/* ==========================================================================
   Georges Vanier SS — Guidance Tools: shared design system
   --------------------------------------------------------------------------
   Used by index.html (dashboard) and funding.html. finance-planner.html still
   carries its own inline copy of these rules — it was written before this file
   existed and is verified working, so it was left alone. If a third tool
   arrives, migrate finance-planner to this file rather than making a third
   copy.
   ========================================================================== */
:root{
  --maroon:#6b1f2a; --maroon-dark:#4e161e; --maroon-light:#8a2c3a;
  --gold:#c8a24a; --gold-light:#e3c87f;
  --cream:#fbf7ef; --paper:#ffffff;
  --ink:#22201e; --ink-soft:#5c5751; --line:#e4ddd0;
  --ok:#2f6b4f; --ok-bg:#eaf3ee;
  --warn-bg:#fdf6e8; --warn-ink:#6b5626;
  --radius:10px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

/* ---------- masthead ---------- */
.masthead{background:var(--maroon); color:#fff; padding:26px 0 24px; border-bottom:4px solid var(--gold)}
.masthead .school{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
                  color:var(--gold-light); font-weight:600; margin:0 0 6px}
.masthead h1{margin:0; font-size:1.85rem; font-weight:700; color:#fff; letter-spacing:-.01em}
.masthead p{margin:8px 0 0; max-width:64ch; color:#f0e6e8; font-size:.98rem}
body.embed .masthead{padding:20px 0 18px}
body.embed .masthead .school{display:none}
body.embed .masthead h1{font-size:1.5rem}
body.embed .masthead p{font-size:.92rem}
body.embed .wrap{padding:0 14px}

/* ---------- masthead layout + cross-tool navigation ---------- */
.mhead{display:flex; gap:22px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.mhead .mtext{flex:1 1 380px; min-width:0}
.toolnav{flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
         justify-content:flex-end; font-size:.85rem; padding-top:4px}
.toolnav a{
  color:#f0e6e8; text-decoration:none; font-weight:600; white-space:nowrap;
  border:1px solid rgba(255,255,255,.4); border-radius:99px; padding:5px 12px;
}
.toolnav a:hover, .toolnav a:focus{background:rgba(255,255,255,.14); color:#fff; border-color:#fff}
.toolnav a.home{border-color:var(--gold-light); color:var(--gold-light)}
.toolnav a.home:hover{background:var(--gold); border-color:var(--gold); color:#3d2a08}
@media (max-width:820px){
  .toolnav{justify-content:flex-start; width:100%}
}

/* ---------- panels ---------- */
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
       padding:22px 24px; margin:22px 0}
.panel h2{margin:0 0 4px; font-size:1.12rem; font-weight:700; color:var(--maroon)}
.panel .hint{margin:0 0 18px; font-size:.9rem; color:var(--ink-soft)}
.step{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
      text-transform:uppercase; background:var(--cream); color:var(--maroon-light);
      border:1px solid var(--line); border-radius:99px; padding:3px 10px; margin-bottom:10px}

/* ---------- form fields ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
             color:var(--maroon-light)}
.field select, .field input[type=text], .field input[type=number]{
  font:inherit; font-size:.95rem; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink); width:100%;
}
.field select{cursor:pointer}
.field select:focus-visible, .field input:focus-visible{
  outline:3px solid var(--gold-light); outline-offset:1px; border-color:var(--maroon)}
.field .sub{font-size:.78rem; color:var(--ink-soft); min-height:1.1em}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:.95rem; padding:12px 18px; border-radius:8px;
  background:var(--maroon); color:#fff; border:2px solid var(--maroon);
}
.btn:hover, .btn:focus{background:var(--maroon-light); border-color:var(--maroon-light); color:#fff}
.btn.outline{background:transparent; color:var(--maroon)}
.btn.outline:hover{background:var(--maroon); color:#fff}
.ext{font-size:.85em; opacity:.75}

/* ---------- callouts ---------- */
.callout{background:var(--ok-bg); border-left:4px solid var(--ok); border-radius:0 8px 8px 0;
         padding:12px 16px; margin-top:18px; font-size:.9rem}
.callout strong{color:var(--ok)}
.warnbox{background:var(--warn-bg); border:1px solid var(--gold-light); border-radius:var(--radius);
         padding:14px 18px; font-size:.86rem; color:var(--warn-ink); margin:22px 0}
.warnbox strong{color:#7a5f1f}

/* ---------- expandable ---------- */
details.exp{border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:var(--paper)}
details.exp summary{
  cursor:pointer; padding:12px 15px; font-weight:700; color:var(--maroon); font-size:.95rem;
  list-style:none; display:flex; justify-content:space-between; gap:10px; align-items:center;
}
details.exp summary::-webkit-details-marker{display:none}
details.exp summary::after{content:"+"; color:var(--gold); font-weight:700; font-size:1.2rem}
details.exp[open] summary::after{content:"\2212"}
details.exp .body{padding:0 15px 14px; font-size:.9rem; color:var(--ink)}
details.exp .body p{margin:0 0 9px}
details.exp .body ul{margin:0 0 9px; padding-left:20px}
details.exp .body li{margin-bottom:5px}
details.exp .body a{color:var(--maroon-light)}

footer{padding:26px 0 44px; font-size:.83rem; color:var(--ink-soft)}
footer a{color:var(--maroon-light)}

@media (max-width:820px){
  .masthead h1{font-size:1.5rem}
}