/* Seven out of Seven.
   A cream workspace with a frosted top bar and pill navigation, large white
   cards with hairline borders, filled fields, tinted panels, serif headlines
   and a dark landing stage. Black is the action color, the highlighter stays
   yellow, and the course colors live on badges and edge tabs.

   Light and dark are the same sheet with another token set, chosen by the
   system setting (prefers-color-scheme); there is no in-page switch. Every
   color below is a token, so nothing else needs to change between the two. */

@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-var-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/sourceserif4-var.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/sourceserif4-var-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
	color-scheme:light;
	--desk:#f5f3ed;
	--desk-deep:#ebe8e0;
	--paper:#fcfbf7;
	--paper-2:#f3f1ea;
	--paper-3:#ece9e1;
	--ink:#1b1b19;
	--ink-2:#4d4c47;
	--ink-3:#7f7e76;
	--ink-4:#a4a39b;
	--rule:#e1ded5;
	--rule-soft:#ebe8e0;
	--hi:#f3dd6f;
	--hi-deep:#e4c642;
	--hi-soft:#f8efc4;
	--hi-tint:#f9f4dc;
	--gold:#d9a62c;
	--on-hi:#16171c;
	--on-course:#ffffff;
	--tint:#efece3;
	--euro:#c8102e;
	--euro-tint:#fbe9ed;
	--euro-deep:#7d0a20;
	--whap:#1f4fd0;
	--whap-tint:#e8eefc;
	--whap-deep:#143a9a;
	--met:#1f7a3f;
	--miss:#b3261e;
	--miss-tint:#fdf1f0;
	--miss-rule:#f0c9c5;
	--warn:#8a5a00;
	--accent:#161614;
	--accent-2:#c9c6bd;
	--on-accent:#f7f5ef;
	--stage:#1e1e1b;
	--stage-ink:#ebe8df;
	--stage-2:#bdbab1;
	--stage-3:#8e8b83;
	--bar:rgba(245,243,237,.85);
	--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231b1b19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
	--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
	--ease:cubic-bezier(.16,1,.3,1);
	--r-lg:14px;
	--r:11px;
	--r-sm:8px;
	--shadow:0 1px 2px rgba(27,27,25,.04),0 8px 24px -18px rgba(27,27,25,.18);
	--shadow-lift:0 2px 6px rgba(27,27,25,.06),0 30px 60px -24px rgba(27,27,25,.35);
	--scrim:rgba(27,27,25,.36);
}
@media (prefers-color-scheme: dark){
:root{
	color-scheme:dark;
	--desk:#232320;
	--desk-deep:#1c1c19;
	--paper:#2c2c28;
	--paper-2:#363632;
	--paper-3:#403f3a;
	--ink:#dcd9cf;
	--ink-2:#b1aea5;
	--ink-3:#8c8981;
	--ink-4:#716e67;
	--rule:#413f3a;
	--rule-soft:#383733;
	--hi:#d4bd52;
	--hi-deep:#c2aa3c;
	--hi-soft:#514a24;
	--hi-tint:#3a3620;
	--gold:#f0c84a;
	--on-course:#1c1c19;
	--tint:#30302b;
	--euro:#e5798b;
	--euro-tint:#432428;
	--euro-deep:#f0b0ba;
	--whap:#8fa7e6;
	--whap-tint:#262f4f;
	--whap-deep:#b7c4ec;
	--met:#72c48f;
	--miss:#e6877e;
	--miss-tint:#3f2a27;
	--miss-rule:#5e3a35;
	--warn:#d8bb5e;
	--accent:#dcd9cf;
	--accent-2:#625f58;
	--on-accent:#232320;
	--stage:#1b1b18;
	--stage-ink:#dcd9cf;
	--stage-2:#b1aea5;
	--stage-3:#8e8b83;
	--bar:rgba(35,35,32,.84);
	--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23dcd9cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -16px rgba(0,0,0,.6);
	--shadow-lift:0 2px 6px rgba(0,0,0,.4),0 30px 60px -24px rgba(0,0,0,.8);
	--scrim:rgba(0,0,0,.55);
}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.5;font-variation-settings:"wdth" 100;caret-color:var(--ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--hi);color:var(--on-hi)}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.16em;text-decoration-color:var(--hi-deep);border-radius:4px}
a:hover{background:var(--hi-soft)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--hi)}
mark{background:var(--hi);color:var(--on-hi);padding:.04em .18em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- type: serif headlines, grotesque chrome ---------- */
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
h1{font-size:2.15rem;line-height:1.1;margin:0 0 14px}
h2{font-size:1.3rem;line-height:1.25;margin:0 0 12px}
h3{font-family:var(--sans);font-size:.95rem;font-weight:700;line-height:1.3;margin:0 0 8px}
p{margin:0 0 10px}
.serif{font-family:var(--serif);font-size:1.075rem;line-height:1.6}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
.hint{font-size:.85rem;color:var(--ink-3);margin:6px 0 0}
.err{color:var(--miss);font-weight:600;margin:0 0 12px}
.num{font-variant-numeric:tabular-nums}
.label{font-variation-settings:"wdth" 84;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- header: a frosted top bar with pill tabs ---------- */
.cover{background:var(--bar);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--rule)}
.cover-in{max-width:1440px;margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:var(--sans);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;font-variation-settings:"wdth" 100}
.brand:hover{background:none}
.brand svg{flex:none}
.brand em{font-style:normal;font-weight:300;color:var(--gold);margin:0 .06em}
.cover nav{display:flex;align-items:center;gap:4px}
.nav-link{color:var(--ink-2);text-decoration:none;font-size:.925rem;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
.nav-link:hover{background:var(--paper-2);color:var(--ink)}
.nav-link.active{background:var(--hi-soft);color:var(--ink);font-weight:700}
.nav-link.active:hover{background:var(--hi-soft)}
.cover nav .nav-link + .btn{margin-left:6px}
.sm-only{display:none}
.nav-toggle{display:none;flex:none;width:42px;height:42px;padding:0;border:1.5px solid var(--rule);border-radius:999px;background:var(--paper);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .18s var(--ease),border-color .18s var(--ease)}
.nav-toggle span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s var(--ease),opacity .15s var(--ease)}
.nav-toggle:hover,.nav-toggle[aria-expanded=true]{background:var(--paper-2);border-color:var(--rule)}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-user{color:var(--ink-3);font-size:.85rem;padding:0 6px 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.cover .btn{padding:8px 16px;font-size:.875rem;border-radius:999px}
.cover .btn-secondary{background:var(--paper-2);border-color:var(--paper-2)}

/* ---------- the page ---------- */
main{display:block}
.sheet{position:relative;max-width:1440px;margin:0 auto;padding:26px 32px 44px}
.sheet-narrow{max-width:460px;margin:56px auto;padding:30px 32px 32px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.landing{max-width:none;margin:0;padding:0}
.run-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.run-head a{text-decoration:none;color:var(--ink-2);padding:3px 8px;margin-left:-8px;border-radius:8px}
.run-head a:hover{background:var(--paper);color:var(--ink)}
.run-head .crumbs span{color:var(--rule);margin:0 2px}
.run-head .meta{font-variation-settings:"wdth" 86;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:700;color:var(--ink-3)}
.sheet:has(> .edge-tab) > .run-head{padding-right:120px}
.edge-tab{position:absolute;right:32px;top:24px;background:var(--accent);color:var(--on-accent);padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:700;font-variation-settings:"wdth" 86;letter-spacing:.06em;text-transform:uppercase}
.edge-tab.ap_euro{background:var(--euro);color:var(--on-course)}
.edge-tab.whap{background:var(--whap);color:var(--on-course)}
.title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.title-row h1{margin:0 0 6px}
.title-row .actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.section{margin-top:22px}
.section:first-of-type{margin-top:0}
.cols{display:grid;gap:18px;align-items:start}
.cols-3-2{grid-template-columns:3fr 2fr}
.cols-2-1{grid-template-columns:2fr 1fr}
.cols-1-1{grid-template-columns:1fr 1fr}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.stat-grid .card{margin:0;padding:14px 12px;text-align:center;background:var(--tint);border-color:var(--rule-soft);box-shadow:none}
.stat-grid .score-big{font-size:1.9rem}
.stat-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.stat-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.stat-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.card .stat-grid{margin-bottom:0}
.num-table td.num,.num-table th.num{text-align:right}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.actions-row{display:flex;gap:6px;flex-wrap:wrap}
.search-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-row input{width:auto;min-width:220px;padding:8px 12px}
.nav-role{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--paper-2);font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);vertical-align:1px}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px;min-width:0;overflow-x:auto;box-shadow:var(--shadow)}
.cols > *{min-width:0}
.card-plain{box-shadow:none;background:transparent;border:1.5px dashed var(--rule)}
.card > h2,.card > h3{margin-top:0}
.card > form:last-child{margin-bottom:0}
.notes{background:var(--tint);border-radius:var(--r);padding:16px 18px;margin-top:18px}
.notes h3{display:flex;align-items:center;gap:10px}
.notes ul,.notes ol{margin:2px 0 10px;padding-left:20px}
.notes li{margin-bottom:3px}
.empty{padding:22px 20px;border:1.5px dashed var(--rule);border-radius:var(--r);color:var(--ink-2);text-align:center;font-size:.9375rem;margin-bottom:18px}
.empty strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:4px}

/* ---------- flashes ---------- */
.flash{padding:12px 18px;margin:0 0 18px;font-weight:600;border-radius:var(--r);background:var(--hi);color:var(--on-hi);display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow)}
.flash::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--on-hi);margin-top:6px}
.flash.err{background:var(--paper);color:var(--miss);border:1px solid var(--rule)}
.flash.err::before{background:var(--miss)}
.flash.warn{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.flash.warn::before{background:transparent;border:2px solid var(--ink)}

/* ---------- buttons: black, rounded, flat ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);border:1.5px solid var(--accent);border-radius:12px;padding:9px 18px;font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--hi);color:var(--on-hi);border-color:var(--hi)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.busy{cursor:progress;background:var(--ink-2);border-color:var(--ink-2);color:var(--paper)}
.btn-secondary{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.btn-secondary:hover{background:var(--hi);color:var(--on-hi);border-color:var(--hi)}
.btn-danger{background:var(--miss-tint);color:var(--miss);border-color:var(--miss-tint)}
.btn-danger:hover{background:var(--miss);color:var(--on-course);border-color:var(--miss)}
.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:10px}
.btn-wide{width:100%}
.btn-timer{font-variant-numeric:tabular-nums;font-weight:500;opacity:.85;display:none}
.btn.busy .btn-timer{display:inline}
.btn-spinner{display:none;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.btn.busy .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- forms: filled fields ---------- */
label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:5px}
label .opt{font-weight:400;color:var(--ink-3)}
input,select,textarea{width:100%;padding:10px 14px;border:1.5px solid transparent;border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink);font:inherit;font-size:.975rem;transition:box-shadow .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,select:hover,textarea:hover{background:var(--paper-3)}
input:focus,select:focus,textarea:focus{outline:none;background:var(--paper);border-color:var(--accent);box-shadow:0 0 0 4px var(--hi-soft)}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:var(--arrow);background-repeat:no-repeat;background-position:right 13px center}
textarea{min-height:140px;resize:vertical;line-height:1.55}
textarea.lined{font-family:var(--serif);font-size:1.05rem;line-height:30px;padding:9px 14px 9px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--rule) 29px,var(--rule) 30px);background-origin:content-box;background-attachment:local}
input[type=radio],input[type=checkbox]{width:auto;accent-color:var(--ink)}
input[type=number]{font-variant-numeric:tabular-nums}
.form-row{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:var(--paper-2);border-radius:var(--r);margin-bottom:8px}
.seg label{margin:0;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:block;padding:9px 10px;text-align:center;border-radius:var(--r-sm);transition:background .15s var(--ease)}
.seg span:hover{background:var(--paper)}
.seg b{display:block;font-size:1.1rem;font-weight:900;font-variation-settings:"wdth" 90;letter-spacing:.02em}
.seg small{display:block;font-size:.72rem;color:var(--ink-3);font-weight:500;line-height:1.2;margin-top:2px}
.seg input:checked + span{background:var(--accent);color:var(--on-accent)}
.seg input:checked + span small{color:var(--accent-2)}
.seg input:focus-visible + span{box-shadow:0 0 0 3px var(--hi)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.925rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 10px;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
th{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wdth" 84;color:var(--ink-3);padding:4px 10px 8px}
tr:last-child td{border-bottom:0}
tbody tr:hover td,tr:hover td{background:var(--paper-2)}
td:first-child,th:first-child{border-radius:10px 0 0 10px}
td:last-child,th:last-child{border-radius:0 10px 10px 0}
td.r,th.r{text-align:right}
td form{margin:0;display:inline}

/* ---------- tags ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid transparent;background:var(--paper-2);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-variation-settings:"wdth" 86;line-height:1.35;color:var(--ink-2);vertical-align:middle;white-space:nowrap}
.badge-blue{background:var(--hi);color:var(--on-hi)}
.badge-green{background:var(--accent);color:var(--on-accent)}
.badge-amber{background:transparent;border-color:var(--rule);border-style:dashed;color:var(--ink-3)}
.badge-red{background:var(--miss-tint);color:var(--miss)}
.badge-ap_euro{background:var(--euro-tint);color:var(--euro)}
.badge-whap{background:var(--whap-tint);color:var(--whap)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- the question ---------- */
.prompt-box{font-family:var(--serif);font-size:1.15rem;line-height:1.55;padding:16px 20px;background:var(--tint);border-radius:var(--r);margin:0 0 18px;max-width:72ch}
.prompt-box p{margin:0 0 10px}
.prompt-box p:last-child{margin-bottom:0}
.prompt-box .guide{font-family:var(--sans);font-size:.85rem;color:var(--ink-2);margin:4px 0 0 24px}
.doc{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;max-width:76ch}
.doc h3{display:flex;align-items:center;gap:10px;font-variation-settings:"wdth" 86;margin-bottom:4px}
.doc-source{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-2);margin-bottom:8px}
.doc-text{font-family:var(--serif);font-size:1.03rem;line-height:1.6}
.doc-text p{margin:0 0 10px}
.doc-text p:last-child{margin-bottom:0}
.candidates{display:grid;gap:14px;max-width:820px}
.candidate{margin-bottom:0}
.candidate h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:0}
.candidate .prompt-box{margin-bottom:14px}
.candidate > form{margin:0}
.candidate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.candidate-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.candidate-buttons form{margin:0}
.rubric-list{max-width:none}
.rubric-import{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 14px;border:1.5px dashed var(--rule);border-radius:var(--r);margin:0 0 16px}
.rubric-import label{flex:1 1 100%;font-weight:700;font-size:.9375rem;margin:0}
.rubric-import input[type=file]{flex:1 1 220px;font-size:.8125rem;padding:6px 8px}
.rubric-import .btn{flex:none}
.saved-prompts{display:grid;gap:12px}
/* Saved suggestions: an accordion, one open at a time (name="saved-prompt" + footer fallback). Closed ones show only the title. */
.saved-prompt{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2)}
.saved-prompt summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;font-weight:600}
.saved-prompt summary::-webkit-details-marker{display:none}
.saved-prompt summary h3{margin:0;flex:1;font-size:1.0625rem}
.saved-prompt summary:hover h3{color:var(--ink-2)}
.saved-chevron{width:9px;height:9px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .18s;flex:none;margin-right:3px}
.saved-prompt[open] .saved-chevron{transform:rotate(45deg)}
.saved-prompt[open] summary{border-bottom:1px solid var(--rule)}
.saved-body{padding:12px 18px 16px}
.saved-body > .small{margin-top:0}
.saved-prompt .prompt-box{margin-bottom:12px;background:var(--paper)}
@media (prefers-reduced-motion:reduce){.saved-chevron{transition:none}}
.doc-chart{margin:6px 0 4px}
.chart-title{font-weight:700;font-variation-settings:"wdth" 88;margin-bottom:8px}
.chart-scroll{overflow-x:auto;margin:4px 0 6px}
.chart{display:block;width:100%;max-width:640px;height:auto}
.chart text{font-family:var(--sans);font-size:12px;fill:var(--ink-2)}
.chart .ylab{text-anchor:end}
.chart .xlab,.chart .vlab,.chart .ulab{text-anchor:middle}
.chart .vlab{font-size:11.5px;font-weight:700;fill:var(--ink)}
.chart .ulab{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.chart .leg{font-weight:600;fill:var(--ink)}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .axis{stroke:var(--ink);stroke-width:1.25}
.chart-table{max-width:560px;margin:2px 0 4px;font-size:.9375rem}
.chart-table th.num,.chart-table td.num{text-align:right}
.chart-table td.cat{font-weight:600}
.chart-table tbody tr:hover td{background:transparent}
.chart-data summary{cursor:pointer;font-size:.8125rem;color:var(--ink-3);margin:2px 0 6px}
.chart-note{font-size:.8125rem;color:var(--ink-3);margin:6px 0 0}
.doc-plate{background:var(--paper);border:1.5px dashed var(--rule);border-radius:var(--r-sm);padding:12px 14px}
.doc-plate .label{margin-bottom:6px}
.doc-figure{margin:6px 0 0}
.doc-figure img{display:block;max-width:100%;max-height:560px;border-radius:var(--r-sm);background:var(--paper)}
.doc-figure-missing{display:none;border:1.5px dashed var(--miss);border-radius:var(--r-sm);color:var(--miss);padding:10px 12px;font-size:.875rem}
.doc-figure.broken img{display:none}
.doc-figure.broken .doc-figure-missing{display:block}
.doc-figure figcaption{font-size:.875rem;color:var(--ink-2);line-height:1.5;margin-top:8px}
.doc-figure figcaption p{margin:0 0 6px}
.doc-figure figcaption p:last-child{margin-bottom:0}
.doc-attach{margin:0}
.doc-attach .label{display:block;margin-bottom:6px}
.doc-attach-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.doc-attach-row input{flex:1 1 240px;min-width:0}
.doc-attach .hint{margin-top:8px}
.doc-credit{font-size:.75rem;color:var(--ink-3);margin-top:6px}
.doc-desc{margin-top:8px}
.doc-desc summary{cursor:pointer;font-size:.8125rem;color:var(--ink-3)}
.doc-desc .doc-text{font-size:.9rem;margin-top:6px}
.doc-attach-note{font-size:.875rem;margin:0 0 8px;padding:8px 12px;border:1.5px dashed var(--rule);border-radius:var(--r-sm)}
.doc-attach-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.doc-attach-bar .doc-attach-note{margin:0;flex:1 1 240px}
.doc-attach-row input[type=file]{flex:1 1 200px;font-size:.8125rem;padding:6px 8px}
.doc-attach-tools{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule)}
.doc-attach-or{margin-top:12px}
.doc-attach-row input[type=url]{flex:1 1 200px}
.option{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border:1.5px solid transparent;border-radius:var(--r-sm);margin-bottom:6px;background:var(--paper-2);cursor:pointer;line-height:1.45;transition:border-color .15s var(--ease),background .15s var(--ease)}
.option:hover{border-color:var(--accent)}
.option input{width:auto;margin-top:5px}
.option .letter{flex:none;font-weight:800;font-variation-settings:"wdth" 88;min-width:1.2em}
.option.correct{background:var(--hi-soft)}
.option.picked{border-color:var(--accent)}
.stem{font-family:var(--serif);font-size:1.05rem;margin:0 0 10px}
.stem b{font-family:var(--sans);font-weight:800;margin-right:6px}
.response-text{font-family:var(--serif);font-size:1.075rem;line-height:1.62;max-width:70ch}
.response-text p{margin:0 0 12px}
.response-text mark{cursor:default}
.response-text mark.lit{background:var(--hi-deep)}
.grade-row.lit{background:var(--hi-soft)}

/* ---------- the score, row by row ---------- */
.score-line{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:14px}
.score-big{font-family:var(--serif);font-size:3.2rem;font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.score-of{font-size:1.3rem;font-weight:700;color:var(--ink-3);font-variation-settings:"wdth" 84}
.grade-rows{display:grid;gap:8px}
.grade-row{display:grid;grid-template-columns:18px 1fr auto;gap:4px 12px;padding:14px 16px;border:1px solid var(--rule-soft);border-radius:var(--r);background:var(--paper-2);transition:background .15s var(--ease)}
.grade-row.met{box-shadow:inset 4px 0 0 var(--accent)}
.grade-row .mk{width:14px;height:14px;border:1.5px solid var(--accent);border-radius:50%;margin-top:4px;background:var(--paper)}
.grade-row.met .mk{background:var(--accent)}
.grade-row.part .mk{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.grade-row .row-name{font-weight:800;font-size:.975rem}
.grade-row .pts{font-weight:800;font-variation-settings:"wdth" 84;font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.grade-row .body{grid-column:2 / 4}
.grade-row .criterion{font-size:.85rem;color:var(--ink-2);margin:0 0 6px}
.grade-row blockquote{margin:6px 0 8px;padding:0;font-family:var(--serif);font-size:1rem;line-height:1.55}
.grade-row blockquote mark{font-style:normal}
.grade-row .why{font-size:.925rem;margin:0}
.summary{margin-top:16px;padding:16px 20px;background:var(--tint);border-radius:var(--r)}
.summary h3{margin-top:0}
.summary ul{margin:4px 0 0;padding-left:20px}

/* ---------- misc ---------- */
code.token{display:block;word-break:break-all;background:var(--paper-2);border-radius:var(--r-sm);padding:10px 12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8125rem;user-select:all}
details summary{cursor:pointer;font-weight:600;font-size:.9375rem}
details summary:hover{color:var(--ink-2)}
.pre{white-space:pre-wrap;font-family:var(--serif);font-size:.975rem;line-height:1.55;margin-top:12px}
.ledger td:first-child{font-weight:600}
.ledger td.r{font-family:var(--serif);font-weight:700;font-size:1.25rem}
.danger{border:1.5px dashed var(--miss-rule);border-radius:var(--r);padding:14px 18px}
.danger h3{color:var(--miss)}
.footer{max-width:1440px;margin:0 auto;padding:8px 32px 36px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-3)}
.footer a{text-decoration:none}

/* ---------- landing: a dark stage, then rounded panels ---------- */
.hero{background:var(--stage);color:var(--stage-ink);padding:52px 40px 56px;display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;max-width:none}
.hero > div:first-child{max-width:560px;justify-self:end;width:100%}
.hero h1{color:var(--stage-ink);font-size:clamp(2.6rem,4.8vw,4.2rem);font-weight:700;line-height:1.02;letter-spacing:-.015em;margin:0 0 20px}
.hero h1 mark{padding:0 .1em;border-radius:8px}
.hero .lede{font-family:var(--serif);font-size:1.2rem;line-height:1.5;max-width:36ch;margin:0 0 24px;color:var(--stage-2)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hero .cta .btn{padding:13px 26px;font-size:1rem;background:var(--hi);color:var(--on-hi);border-color:var(--hi);border-radius:14px}
.hero .cta .btn:hover{background:var(--stage-ink);color:var(--stage);border-color:var(--stage-ink)}
.hero .fine{font-size:.875rem;color:var(--stage-3);max-width:44ch}
.spread{position:relative;color:var(--ink);background:var(--paper);border-radius:28px;box-shadow:var(--shadow-lift);padding:24px 28px 22px;display:grid;grid-template-columns:1fr 200px;gap:0 22px;max-width:860px}
.spread .run-head{grid-column:1 / 3;margin-bottom:14px;padding-right:110px}
.spread .edge-tab{top:22px;right:26px}
.spread .essay{font-family:var(--serif);font-size:1.04rem;line-height:1.62}
.spread .essay p{margin:0 0 10px}
.spread .essay mark{transition:background .18s var(--ease)}
.spread .essay mark.lit{background:var(--hi-deep)}
.spread .notes-col{position:relative;min-height:100%}
.spread .note{position:absolute;left:0;right:0;font-size:.8rem;line-height:1.35;padding:6px 10px;border-radius:10px;cursor:default;transition:background .18s var(--ease)}
.spread .note b{display:flex;justify-content:space-between;font-size:.85rem;font-weight:800;font-variation-settings:"wdth" 88}
.spread .note b span{font-variation-settings:"wdth" 80;font-variant-numeric:tabular-nums}
.spread .note em{font-style:normal;color:var(--ink-2)}
.spread .note.lit{background:var(--hi-soft)}
.spread .leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.spread .leaders path{fill:none;stroke:var(--rule);stroke-width:1.25;transition:stroke .18s var(--ease)}
.spread .leaders path.lit{stroke:var(--ink)}
.spread .total{grid-column:1 / 3;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:6px;padding-top:12px;border-top:1px solid var(--rule-soft)}
.spread .total .score-big{font-size:2.8rem}
.spread .synthetic{font-size:.75rem;color:var(--ink-3)}
.band{padding:24px 28px 0}
.band-in{max-width:1384px;margin:0 auto;background:var(--paper);border:1px solid var(--rule);border-radius:28px;box-shadow:var(--shadow);padding:40px 44px}
.band:not(.band-paper) .band-in{background:var(--tint);border-color:transparent;box-shadow:none}
.band h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 8px;max-width:none;text-wrap:balance}
.band .intro{font-family:var(--serif);font-size:1.1rem;color:var(--ink-2);max-width:60ch;margin:0 0 24px}
.demo-set{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:start}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.925rem;margin:0 0 18px;padding:14px 18px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2)}
.spec dt{font-weight:700;font-variation-settings:"wdth" 86;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;color:var(--ink-3);padding-top:3px}
.spec dd{margin:0}
.band:not(.band-paper) .rubric-table tr:hover td{background:var(--paper)}
.rubric-table td:first-child{font-weight:800;font-variation-settings:"wdth" 88}
.rubric-table .rows{color:var(--ink-2);font-size:.9rem}
.units{margin-top:22px}
.units h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.units .swatch{width:12px;height:12px;border-radius:50%;display:inline-block}
.units .swatch.ap_euro{background:var(--euro)}
.units .swatch.whap{background:var(--whap)}
.unit-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.unit{padding:10px 11px 11px;border-radius:var(--r);font-size:.75rem;line-height:1.25;min-height:88px;display:flex;flex-direction:column;gap:4px}
.unit b{font-size:1.1rem;font-weight:900;font-variation-settings:"wdth" 82}
.unit span{font-weight:600}
.unit em{font-style:normal;opacity:.8;margin-top:auto;font-variant-numeric:tabular-nums}
.unit.ap_euro{background:var(--euro-tint);color:var(--euro-deep)}
.unit.whap{background:var(--whap-tint);color:var(--whap-deep)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.steps li{counter-increment:step;display:grid;grid-template-columns:36px 1fr;gap:2px 10px;align-content:start;padding:16px 18px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r)}
.steps li p{grid-column:2}
.steps li::before{content:counter(step);font-size:.85rem;font-weight:800;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;margin-top:-2px}
.steps li b{display:block;margin-bottom:2px}
.steps li p{margin:0;color:var(--ink-2);font-size:.9rem}
.close{padding:24px 28px 48px}
.close .band-in{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none;border-radius:28px;padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.close h2{color:var(--on-accent);margin:0 0 6px}
.close p{color:var(--accent-2);margin:0}
.close .btn-primary{background:var(--hi);color:var(--on-hi);border-color:var(--hi);padding:13px 26px;font-size:1rem;border-radius:14px}
.close .btn-primary:hover{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}

@media (prefers-reduced-motion:no-preference){
	.sweep mark{background:linear-gradient(var(--hi),var(--hi)) no-repeat 0 0/0% 100%;animation:sweep .7s var(--ease) forwards}
	.sweep mark:nth-of-type(2){animation-delay:.18s}
	.sweep mark:nth-of-type(3){animation-delay:.36s}
	.sweep mark:nth-of-type(4){animation-delay:.54s}
	@keyframes sweep{to{background-size:100% 100%}}
}

/* ---------- drawer: every add/edit form slides in from the right ---------- */
dialog.drawer{position:fixed;inset:0 0 0 auto;width:min(560px,100vw);height:100dvh;max-height:none;max-width:none;margin:0;padding:0;border:0;border-left:1px solid var(--rule);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lift);flex-direction:column;overflow:hidden}
dialog.drawer:not([open]){display:none}
dialog.drawer[open]{display:flex;animation:drawer-in .36s var(--ease)}
dialog.drawer::backdrop{background:var(--scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:drawer-fade .36s var(--ease)}
dialog.drawer.closing{animation:drawer-out .22s ease-in forwards}
dialog.drawer.closing::backdrop{animation:drawer-fade-out .22s ease-in forwards}
body.drawer-open{overflow:hidden}
.drawer-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 26px 16px;border-bottom:1px solid var(--rule)}
.drawer-head h2{margin:0;font-size:1.45rem}
.drawer-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid transparent;background:var(--paper-2);color:var(--ink);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.drawer-close:hover{background:var(--hi);color:var(--on-hi)}
.drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 26px 30px;overscroll-behavior:contain}
.drawer-body > form:last-child{margin-bottom:0}
.drawer-body .flash{margin-bottom:16px}
.drawer-lede{margin:0 0 16px;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.drawer-body .form-grid{grid-template-columns:1fr 1fr}
.drawer-body .btn[type=submit]:not(.btn-sm){width:100%}
.drawer-body .btn-sm[type=submit]{width:auto}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes drawer-out{to{transform:translateX(100%)}}
@keyframes drawer-fade{from{opacity:0}}
@keyframes drawer-fade-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
	dialog.drawer[open],dialog.drawer::backdrop,dialog.drawer.closing,dialog.drawer.closing::backdrop{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
	.hero{grid-template-columns:1fr;gap:28px;padding:40px 28px 44px}
	.hero > div:first-child{justify-self:start;max-width:none}
	.hero .lede{max-width:52ch}
	.spread{max-width:none}
	.demo-set{grid-template-columns:1fr}
	.unit-strip{grid-template-columns:repeat(3,1fr)}
	.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
	.sheet{padding:22px 20px 40px}
	.footer{padding-left:20px;padding-right:20px}
}
@media (max-width:900px){
	.cols{gap:14px}
	.card{padding:16px 16px}
	.cols-3-2,.cols-2-1,.cols-1-1{grid-template-columns:1fr}
	.stat-grid{grid-template-columns:repeat(3,1fr)}
	.sheet{padding:18px 16px 36px}
	.edge-tab{right:16px;top:18px}
	.spread{grid-template-columns:1fr;padding:18px 20px}
	.spread .run-head,.spread .total{grid-column:1}
	.spread .notes-col{min-height:0;margin-top:12px;border-top:1px solid var(--rule-soft);padding-top:10px}
	.spread .note{position:static;margin-bottom:6px}
	.spread .leaders{display:none}
	.band-in,.close .band-in{padding:28px 24px;border-radius:22px}
	.steps{grid-template-columns:1fr}
}
/* ---------- mobile menu: the bar keeps the wordmark and a round toggle; the nav drops down as a panel ---------- */
@media (max-width:760px){
	.nav-toggle{display:flex}
	.js .cover nav{display:none}
	.cover nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px 14px 16px;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:var(--shadow)}
	.cover.menu-open nav{display:flex}
	.cover nav .nav-link{padding:13px 14px;font-size:1rem;border-radius:12px}
	.cover nav .nav-link + .btn{margin-left:0}
	.cover nav .nav-user{order:-1;display:block;max-width:none;padding:6px 14px 10px;font-variation-settings:"wdth" 84;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule-soft);margin-bottom:6px}
	.cover nav .credits-pill{align-self:flex-start;margin:6px 14px 4px;padding:6px 14px}
	.cover nav .btn{margin-top:10px;width:100%;padding:12px 16px;font-size:.95rem;border-radius:12px}
}
@media (max-width:640px){
	body{font-size:15px}
	.cover-in{padding:0 14px;height:56px}
	.brand{font-size:1.3rem}
	.brand svg{width:34px;height:34px}
	.sm-only{display:inline}
	.sm-hide{display:none}
	.stat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
	.brand{gap:9px}
	.sheet{padding:14px 12px 30px}
	.sheet-narrow{margin:16px 12px;padding:24px 20px}
	h1{font-size:1.6rem}
	.hero{padding:30px 16px 32px}
	.hero h1{font-size:2.4rem}
	.band{padding:12px 12px 0}
	.close{padding:12px 12px 36px}
	.seg{grid-template-columns:repeat(2,1fr)}
	.unit-strip{grid-template-columns:repeat(2,1fr)}
	.prompt-box{font-size:1.05rem;padding:14px 16px}
	.chart{min-width:520px}
	table{font-size:.875rem}
	th,td{padding:8px 6px}
	.run-head{margin-bottom:12px}
	.title-row .actions{width:100%}
	dialog.drawer{width:100vw;border-left:0}
	.drawer-head{padding:16px 16px 12px}
	.drawer-body{padding:16px 16px 24px}
	.drawer-body .form-grid{grid-template-columns:1fr}
	.footer{padding-left:14px;padding-right:14px}
}

/* ---------- auth: sign-in, forgot and reset pages ----------
   One wide card split in two: the brand's dark stage on the left with the
   large mark and the claim, the form on the right. Below 820px the stage
   becomes a short band above the form. */
.auth{max-width:1040px;margin:48px auto 56px;display:grid;grid-template-columns:5fr 6fr;background:var(--paper);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--shadow-lift);overflow:hidden}
.auth-stage{background:var(--stage);color:var(--stage-ink);padding:44px 44px 36px;display:flex;flex-direction:column;gap:40px;position:relative;isolation:isolate}
.auth-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(240,200,74,.16),transparent 55%);pointer-events:none;z-index:-1}
.auth-stage-top{display:flex;align-items:center;gap:14px}
.auth-stage .mark{width:56px;height:56px;color:var(--stage-ink)}
.auth-eyebrow{margin:0;font-family:var(--sans);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.auth-eyebrow em{font-style:normal;font-weight:300;color:var(--gold);margin:0 .06em}
.auth-stage-body{margin-top:auto}
.auth-claim{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 14px;color:var(--stage-ink);text-wrap:balance}
.auth-lede{font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--stage-2);margin:0 0 24px;max-width:40ch}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.auth-points li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.4;color:var(--stage-ink)}
.auth-points li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--gold)}
.auth-fine{margin:0;font-size:.72rem;line-height:1.45;color:var(--stage-3);max-width:44ch}
.auth-card{padding:48px 48px 40px;display:flex;flex-direction:column;justify-content:center}
.auth-card h1{font-size:2rem;margin:0 0 8px}
.auth-sub{color:var(--ink-2);font-size:1rem;line-height:1.5;margin:0 0 24px}
.auth-card .flash{margin-bottom:18px}
.auth-form .form-row{margin-bottom:16px}
.auth-form input{padding:12px 14px;font-size:1rem}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px}
.label-row label{margin:0}
.label-link{font-size:.85rem;font-weight:600;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.label-link:hover{color:var(--ink);border-color:var(--ink)}
.pw-field{position:relative}
.pw-field input{padding-right:70px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer}
.pw-toggle:hover{color:var(--ink);background:var(--paper-3)}
.pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn-tall{padding:13px 20px;font-size:1rem;border-radius:var(--r);margin-top:6px}
.auth-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule-soft);display:grid;gap:8px}
.auth-note p{margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-3)}
.auth-note strong{color:var(--ink-2)}
.auth-note a{color:var(--ink);font-weight:600}
@media (max-width:1100px){
	.auth{max-width:none;margin:32px 32px 44px}
}
@media (max-width:820px){
	.auth{grid-template-columns:1fr;margin:20px 16px 36px;border-radius:18px}
	.auth-stage{padding:22px 24px;gap:0;flex-direction:row;align-items:center;justify-content:space-between}
	.auth-stage .mark{width:40px;height:40px}
	.auth-eyebrow{font-size:1.15rem}
	.auth-stage-body,.auth-fine{display:none}
	.auth-card{padding:28px 24px 28px}
	.auth-card h1{font-size:1.7rem}
}
@media (max-width:640px){
	.auth{margin:12px 12px 28px}
	.auth-card{padding:24px 18px}
}

/* ---------- Credits and pricing ---------- */
.credits-pill{display:inline-flex;align-items:baseline;gap:4px;padding:5px 12px;border-radius:999px;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink-2);font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap;margin-left:6px;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.credits-pill b{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.credits-pill:hover,.credits-pill.active{background:var(--hi);color:var(--on-hi);border-color:var(--hi)}
.credits-pill:hover b,.credits-pill.active b{color:var(--on-hi)}
.credits-pill.empty{border-color:var(--miss);color:var(--miss)}
.credits-pill.empty b{color:var(--miss)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.pack{position:relative;display:flex;flex-direction:column;gap:4px;padding:24px 22px 20px;background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.pack-best{border-color:var(--accent)}
.pack-flag{position:absolute;top:-11px;left:18px;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pack-name{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pack-credits{font-size:1rem;color:var(--ink-2)}
.pack-credits b{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--ink);line-height:1;margin-right:4px}
.pack-price{font-size:1.35rem;font-weight:800;color:var(--ink);margin-top:6px}
.pack-price small{display:block;font-size:.8rem;font-weight:500;color:var(--ink-3)}
.pack-blurb{margin:8px 0 0;font-size:.9rem;color:var(--ink-2);flex:1}
.pack form{margin:14px 0 0}
.balance{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.balance-label{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);width:100%}
.balance-num{font-family:var(--serif);font-size:3.2rem;font-weight:700;line-height:1;color:var(--ink)}
.balance-word{font-size:1.1rem;color:var(--ink-2);margin-right:10px}
.credits-top{align-items:flex-end;margin-bottom:22px}
.credits-blurb{max-width:46ch;margin:0;font-size:.95rem}
.credits-cols{margin-top:22px}
.cost-table td.num{text-align:right;font-family:var(--serif);font-weight:700;font-size:1.15rem;width:72px}
.ledger-table td.num{text-align:right;font-weight:700;white-space:nowrap}
.ledger-table td.plus{color:var(--accent)}
.pricing-head{max-width:72ch;margin-bottom:26px}
.pricing-head h1{margin-bottom:10px}
.pricing-head .lede{margin:0;color:var(--ink-2)}
.pricing-faq{margin-top:18px}
.pricing-faq h3{margin:0 0 6px}
.pricing-faq p{margin:0;font-size:.95rem}
.pricing-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:22px;padding:26px 30px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-lg)}
.pricing-cta h2{color:var(--on-accent);margin:0 0 4px}
.pricing-cta p{color:var(--accent-2);margin:0}
.pricing-cta .btn{background:var(--hi);color:var(--on-hi);border-color:var(--hi)}
.pricing-cta .btn:hover{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
/* Out-of-credits dialog: opened by the footer script when the last action was declined. */
dialog.credit-wall{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));padding:30px 28px 26px;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lift);text-align:center}
dialog.credit-wall::backdrop{background:var(--scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog.credit-wall h2{margin:12px 0 8px;font-size:1.5rem}
dialog.credit-wall p{margin:0 0 18px;font-size:.95rem}
dialog.credit-wall .btn{margin-top:8px}
.wall-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;background:transparent;color:var(--ink-3);font-size:24px;line-height:1;border-radius:8px;cursor:pointer}
.wall-close:hover{background:var(--paper-2);color:var(--ink)}
@media (max-width:820px){.packs{grid-template-columns:1fr}.credits-pill{margin-left:0}}
@media (max-width:640px){.balance-num{font-size:2.6rem}.pricing-cta{padding:22px}}

/* FAQs page: a sticky topic list beside the groups; each question is a <details> */
.faq-layout{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start}
.faq-toc{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.faq-toc a{color:var(--ink-3);text-decoration:none;padding:6px 10px;border-left:2px solid var(--rule);transition:color .18s var(--ease),border-color .18s var(--ease)}
.faq-toc a:hover{color:var(--ink);border-color:var(--ink)}
.faq-group + .faq-group{margin-top:30px}
.faq-group .section{margin:0 0 8px}
.faq{border-top:1px solid var(--rule)}
.faq:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;cursor:pointer;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink)}
.faq-mark{flex:none;position:relative;width:14px;height:14px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--ink-3);border-radius:1px;transition:transform .2s var(--ease)}
.faq-mark::before{left:0;right:0;top:6px;height:2px}
.faq-mark::after{top:0;bottom:0;left:6px;width:2px}
.faq[open] .faq-mark::after{transform:scaleY(0)}
.faq p{margin:0 0 16px;color:var(--ink-2);max-width:68ch;line-height:1.55}
.faq-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.pricing-cta .btn-secondary{background:transparent;color:var(--on-accent);border-color:var(--accent-2)}
.pricing-cta .btn-secondary:hover{background:var(--accent-2);color:var(--accent);border-color:var(--accent-2)}
@media (max-width:820px){.faq-layout{grid-template-columns:1fr;gap:18px}.faq-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}.faq-toc a{border:1px solid var(--rule);border-radius:999px;padding:5px 11px}}

/* Sample essays (full marks, near miss, weak) on the question page */
.samples{display:grid;gap:10px;margin-top:14px}
.sample{border:1px solid var(--rule-soft);border-radius:var(--r);background:var(--paper-2)}
.sample>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;list-style:none}
.sample>summary::-webkit-details-marker{display:none}
.sample>summary::after{content:"+";font-weight:800;margin-left:auto;color:var(--ink-2)}
.sample[open]>summary::after{content:"\2013"}
.sample>summary .sample-title{font-weight:700;font-size:.975rem}
.sample>summary .sample-score{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}
.sample[open]>summary{border-bottom:1px solid var(--rule-soft)}
.sample-body{padding:16px}
.sample-lesson{font-size:.925rem;line-height:1.5;padding:12px 14px;border-left:4px solid var(--accent);background:var(--paper);border-radius:var(--r);margin-bottom:16px}
.sample-body .grade-row{background:var(--paper)}
#samples,.sample{scroll-margin-top:84px}

/* Use your own question (request #51): the review / hand-entry form */
.import-docs{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.import-docs h2{margin:0 0 4px}
.import-doc{border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px 12px;margin:14px 0;min-width:0}
.import-doc legend{font-weight:600;padding:0 6px}
.import-doc .form-row:last-of-type{margin-bottom:10px}
.import-doc-text{min-height:110px}
.import-chart{margin:0 0 14px}

/* Rubric switcher on the question page (request #53) */
.rubric-switch{margin-top:12px}
.rubric-switch label{display:block;font-weight:600;margin-bottom:6px}
.rubric-switch-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rubric-switch-row select{flex:1 1 180px;min-width:0}

/* Admin area on phones: stat tiles two across, search full width, role tag inline in the menu heading. */
@media (max-width:760px){
	.stat-grid[class*="cols-"]{grid-template-columns:repeat(2,1fr);gap:8px}
	.search-row,.search-row input{width:100%;min-width:0}
	.cover nav .nav-user .nav-role{margin-left:8px;background:var(--hi-soft);color:var(--ink)}
}