/* Grade by Grace — shared styles for the public pages and the app. */
:root{
  --paper:#faf7f0; --card:#fffdf8; --ink:#1f2a37; --ink-2:#465263; --ink-3:#5f6a78; --rule:#e2dacb; --wash:#f2ede2;
  --navy:#23395b; --navy-ink:#fffdf8; --gold:#8a5f0b; --gold-soft:#f3e3bd;
  --ok:#1f7a4d; --ok-bg:#dcefe4; --bad:#a8322a; --bad-bg:#f7e0dc; --on-bad:#fff; --ok-strong:#17633f; --live:#23395b; --focus:#2f6fd6;
  --c-blue:#2f6fd6; --c-green:#2e8b57; --c-orange:#c8641f; --c-purple:#7a4bb5; --c-red:#b8403a; --c-teal:#1c8a88;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#12161c; --card:#1a2029; --ink:#eef1f5; --ink-2:#c3cad3; --ink-3:#a3adb9; --rule:#2e3643; --wash:#1f2632;
    --navy:#9dbbe6; --navy-ink:#12161c; --gold:#e2b45a; --gold-soft:#3a2f17;
    --ok:#5fcf98; --ok-bg:#15301f; --bad:#ff8a7a; --bad-bg:#3a1915; --on-bad:#12161c; --ok-strong:#5fcf98; --live:#9dbbe6; --focus:#8fb3ff;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--serif);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.4vw,44px);font-weight:600;margin:.4em 0 .3em}
h2{font-size:24px;font-weight:600;margin:1.4em 0 .5em}
h3{font-size:19px;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.muted{color:var(--ink-3)}
.fine{font-size:14px;color:var(--ink-3)}
.kicker{font:700 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}

.site-head{border-bottom:1px solid var(--rule);background:var(--card)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 20px/1 var(--serif)}
.brand svg{width:30px;height:30px;flex:none}
.logo-bg{fill:var(--navy)} .logo-g{fill:none;stroke:var(--navy-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .logo-dot{fill:var(--gold-soft)}
.site-nav,.app-nav{display:flex;gap:20px;align-items:center;font-size:16px;flex-wrap:wrap}
.site-nav a,.app-nav a{text-decoration:none;color:var(--ink-2)}
.site-nav a:hover,.app-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.who{color:var(--ink-3);font-size:14px;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.btn{display:inline-flex;align-items:center;gap:6px;font:700 15px/1 var(--sans);padding:11px 16px;border-radius:10px;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--on-bad)}
.btn.small{padding:7px 11px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.link{background:none;border:0;padding:0;font:inherit;color:var(--navy);text-decoration:underline;cursor:pointer}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:.5em 0}
.btns > span{min-width:12ch}

label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px;color:var(--ink-2)}
[hidden]{display:none !important}
input,select,textarea{font:400 16px/1.3 var(--sans);padding:9px 10px;border:1px solid var(--ink-3);border-radius:8px;background:var(--paper);color:var(--ink);min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--focus)}
fieldset{border:1px solid var(--rule);border-radius:10px;padding:10px 14px}
legend{font-weight:700;font-size:14px;color:var(--ink-2);padding:0 6px}
.form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form-row .wide{flex:1 1 260px}
.stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.stack label{width:min(100%,420px)}

.panel{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:16px 20px;margin:20px 0}
.panel h2{margin-top:.2em}
.callout{background:var(--gold-soft);border-radius:12px;padding:12px 16px;margin:16px 0}
.table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0;font-variant-numeric:tabular-nums}
.table caption{text-align:left;font-weight:700;padding:4px 0;color:var(--ink-2)}
.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.table thead th{font-size:13px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.ok{color:var(--ok)} .bad{color:var(--bad)}
.plain{list-style:none;padding:0}
.plain li{padding:6px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}

.site-foot{border-top:1px solid var(--rule);padding:24px 0 40px;margin-top:48px;color:var(--ink-3);font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:var(--on-bad)}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
@media print{.site-head,.site-foot,.noprint,.toast,.skip,.tabs,.crumbs,.timer,form,.btns{display:none !important} body{background:#fff;color:#000} .panel{border:0;padding:0}}