/* The members' area look — the "night-shift foundry" (2026-10-26).
   One hot ember colour, used only for the live stage or the one button to
   press. No web fonts; every number in monospace. Everything here is
   presentation: the pages read and work with this file and df.js absent. */
:root{
  --bg:#FBFAF6; --surface:#FFFFFF; --ink:#181510; --muted:#5B564B; --line:#E4DFD3;
  --ember:#9A3412; --ember-ink:#FFFFFF; --ok:#166534; --bad:#B91C1C;
  --holdbg:#92400E; --holdink:#FFFFFF; --glow:rgba(154,52,18,.45);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F0E0C; --surface:#171512; --ink:#F1EDE3; --muted:#A9A294; --line:#2B2822;
  --ember:#F59E0B; --ember-ink:#14100A; --ok:#4ADE80; --bad:#F87171;
  --holdbg:#FBBF24; --holdink:#1A1206; --glow:rgba(245,158,11,.5);
}}
:root[data-theme="dark"]{
  --bg:#0F0E0C; --surface:#171512; --ink:#F1EDE3; --muted:#A9A294; --line:#2B2822;
  --ember:#F59E0B; --ember-ink:#14100A; --ok:#4ADE80; --bad:#F87171;
  --holdbg:#FBBF24; --holdink:#1A1206; --glow:rgba(245,158,11,.5);
}
/* Large default type — the accessibility rule carried in from area A. */
html{font-size:112.5%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--sans)}
main{max-width:62rem;margin:0 auto;padding:0 1rem 4rem}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.15;font-weight:600}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:1.6rem 0 .3rem}
h2{font-size:1.5rem;margin:0 0 .6rem}
h3{font-size:1.15rem;margin:1.6rem 0 .4rem}
a{color:var(--ember)}
code,.mono{font-family:var(--mono);font-size:.92em;overflow-wrap:anywhere}
.num,.balance{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tiny,.plain{font-size:.88rem;color:var(--muted)}
.plain{font-style:italic}
.damage{color:var(--bad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:9}
.skip:focus{left:0}
.tag{display:inline-block;font:600 .62rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;background:var(--holdbg);color:var(--holdink);border-radius:4px;padding:.28em .5em;vertical-align:middle}
.tag.ok{background:var(--ok);color:var(--bg)}

/* header */
header.site{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--bg);border-bottom:1px solid var(--line);padding:.6rem 1rem}
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none}
.wordmark::after{content:"";display:inline-block;width:.45em;height:.45em;border-radius:50%;background:var(--ember);margin-left:.35em}
header.site nav{margin-left:auto;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
header.site nav a{color:var(--ink);text-decoration:none}
header.site nav a:hover{text-decoration:underline}
/* The mockup's blank pill: the nav link colour out-ranked .btn and painted
   ink on ink. A button in the header keeps its own colours. */
header.site nav a.btn{color:var(--bg)}
header.site nav a.btn.ember{color:var(--ember-ink)}
.iconbtn{background:none;border:1px solid var(--line);border-radius:50%;width:2.2rem;height:2.2rem;color:var(--ink);cursor:pointer;font-size:1rem}
.nojs-hide{display:none}
.js .nojs-hide{display:inline-block}

/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:.65rem 1.25rem;font:inherit;text-decoration:none;cursor:pointer}
.btn.ember{background:var(--ember);color:var(--ember-ink);font-weight:600}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.small{padding:.4rem .95rem;font-size:.92rem}
.btn:hover{filter:brightness(1.12)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* cards, notes */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.4rem;margin:1.2rem 0}
.note{border-left:4px solid var(--ember);padding:.5rem .9rem;background:var(--bg);border-radius:0 8px 8px 0}
.park{border-left:4px solid var(--holdbg);background:var(--bg);border-radius:0 8px 8px 0;padding:.8rem 1rem;margin:.8rem 0}
.refused-card{border-left:4px solid var(--bad);background:var(--bg);border-radius:0 8px 8px 0;padding:.8rem 1rem;margin:.8rem 0;overflow-wrap:anywhere}
.ok-card{border-left:4px solid var(--ok);background:var(--bg);border-radius:0 8px 8px 0;padding:.8rem 1rem;margin:.8rem 0}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem;margin:.5rem 0}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;overflow-wrap:anywhere}

/* members' tabs. Without JS every section shows, stacked, and the tab
   strip is a list of in-page links; df.js turns it into tabs. */
.who{margin:.2rem 0 0;color:var(--muted)}
.subnav{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .4rem;padding:0;list-style:none}
.subnav a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;text-decoration:none;color:var(--ink);background:var(--surface)}
.subnav a:hover{border-color:var(--ember)}
.subnav a[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.js .tabpanel[hidden]{display:none}
.tabpanel{scroll-margin-top:4.5rem}

/* credits */
.balance{font-size:2.2rem;margin:.1em 0}
.balance small{font:600 .9rem var(--sans);color:var(--muted);margin-left:.4rem}
table{width:100%;border-collapse:collapse;margin-top:.8rem}
caption{text-align:left;font-size:.85rem;color:var(--muted);padding-bottom:.4rem}
th,td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
td.num,th.num{text-align:right;white-space:nowrap}
.scroll{overflow-x:auto}

/* ghillie */
.code{font-family:var(--mono);font-size:1.35rem;letter-spacing:.12em;background:var(--bg);border:1px dashed var(--line);border-radius:8px;display:inline-block;padding:.45rem .9rem}

/* drop-off */
.key{font-family:var(--mono);font-size:.88rem;background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:.6rem .8rem;overflow-wrap:anywhere;user-select:all}
.steps{padding-left:1.3rem}
.steps li{margin:.35rem 0}
label{display:block;margin:.8rem 0 .2rem;font-weight:600}
input[type=file]{display:block;margin-top:.4rem;max-width:100%}
.filemsg{min-height:1.4em}
.filemsg.bad{color:var(--bad)} .filemsg.ok{color:var(--ok)}

/* build: the stage rail */
.rail{list-style:none;display:flex;padding:1rem 0 .4rem;margin:0;overflow-x:auto}
.rail li{display:flex;flex-direction:column;align-items:center;min-width:5.2rem;flex:1;position:relative;text-align:center}
.rail li::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;background:var(--line)}
.rail li:first-child::before{display:none}
.rail li.done::before{background:var(--ok)}
.node{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.95rem;background:var(--surface);z-index:1;border:2px dashed var(--line);color:var(--muted)}
.done .node{border:2px solid var(--ok);color:var(--ok);animation:stamp .45s var(--ease) both}
.current .node{border:2px solid var(--ember);background:var(--ember);color:var(--ember-ink);animation:pulse 2.4s infinite}
.parked .node{border:2px solid var(--holdbg);color:var(--holdbg)}
.sl{font-family:var(--mono);font-size:.78rem;margin-top:.4rem;color:var(--muted)}
.done .sl{color:var(--ink)}
.at{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.rail.flash .node{transition:box-shadow .5s var(--ease);box-shadow:0 0 0 6px var(--glow)}
@keyframes stamp{0%{transform:scale(2.2) rotate(-20deg);opacity:0}60%{transform:scale(.94) rotate(-6deg);opacity:1}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 10px transparent}}

/* the hallmark — struck only on a real admission */
.bigseal{border:3px solid var(--ok);color:var(--ok);border-radius:50%;width:5.6rem;height:5.6rem;display:grid;place-items:center;font:700 .95rem var(--serif);letter-spacing:.1em;transform:rotate(-8deg);animation:strike .45s var(--ease) both;flex:none}
@keyframes strike{0%{transform:scale(2.2) rotate(-20deg);opacity:0}60%{transform:scale(.94) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-8deg)}}
.jobhead{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.jobhead .push{margin-left:auto}
.jobs{list-style:none;padding:0;margin:.6rem 0}
.jobs li{display:flex;gap:.8rem;flex-wrap:wrap;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}

/* examination: the six admission facts */
.facts{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.6rem}
@media(min-width:40rem){.facts{grid-template-columns:1fr 1fr}}
.fact{border-left:4px solid var(--ok);border-radius:0 8px 8px 0;padding:.55rem .8rem;background:var(--surface)}
.fact.refusing{border-color:var(--bad)}
.fact .v{font-family:var(--mono);font-size:.85rem;color:var(--muted);display:block}
.fact.refusing .v{color:var(--bad);font-weight:600}
.verdict{font:700 1.4rem var(--serif);letter-spacing:.06em;margin:1.2rem 0 .4rem}
.verdict.green{color:var(--ok)} .verdict.refused{color:var(--bad)}

/* toast + footer */
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,1rem);background:var(--ink);color:var(--bg);padding:.7rem 1.2rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:90vw;font-size:.9rem}
#toast.on{opacity:1;transform:translate(-50%,0)}
footer.site{border-top:1px solid var(--line);padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.9rem}
footer.site nav{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0}
footer.site a{color:var(--muted)}
.svc-notice{background:var(--ink);color:var(--bg);padding:.7rem 1rem;font-size:.88rem;text-align:center;border-bottom:3px solid var(--ember)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── book an engineer ── */
.slots{border:0;padding:0;margin:.4rem 0 0;display:grid;gap:.9rem}
.slots .day h3{margin:.2rem 0 .4rem;font-size:1rem}
.times{display:flex;flex-wrap:wrap;gap:.5rem}
.slot{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;background:var(--bg);cursor:pointer}
.slot:hover{border-color:var(--ember)}
.slot input{accent-color:var(--ember);margin:0}
.slot:has(input:checked){background:var(--ember);border-color:var(--ember);color:var(--ember-ink)}
.slot.held{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.slot:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:2px}
input[type=text],input[type=email],textarea{display:block;width:100%;box-sizing:border-box;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem}
input[type=text]:focus,input[type=email]:focus,textarea:focus{outline:2px solid var(--ember);outline-offset:1px}