/*
  Fast-Track · EPFL v5 "soft tray" layer for the public pages.
  Load order in a page:  the page's own <style>  →  /assets/brand/tokens.css  →  /assets/brand/v5.css
  (after the page's styles, so these rules win where the selectors match).

  tokens.css is a verbatim copy of ~/Documents/00_Brand-v5/css/tokens.css (the kit shared with Startup Manager);
  refresh it from there, never edit it here. The kit's base.css is not used: it is the Startup Manager app shell.

  v5 rules applied here: grey canvas, the content in a white borderless panel (24px radius), grey trays inside it
  where only the selected item is raised, red only for the one primary button and "now" markers, headings 500,
  no uppercase or monospace labels, pill buttons, no coloured left borders (a status colour becomes a small dot).

  Old variable names are aliased to v5 tokens, so every page's remaining CSS resolves to the v5 palette.
*/
:root{
  --ink:#18181a;
  --charcoal:var(--ink);
  --parchment:var(--tray);
  --stone:var(--tray);
  --sand:var(--hair);
  --inset:var(--tray-2);
  --clay:var(--ink-2);
  --ash:var(--mute);
  --smoke:var(--faint);
  --ember:var(--red-btn);
  --alert:var(--red-ink);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   /* code-like values only */
  --r:10px;
  /* status colours: small dots and text only, never chrome */
  --blue:#4a90e2;   --blue-d:#2275d7;
  --orange:#f5a623; --orange-d:#cf8509;
  --teal:#007480;   --teal-d:#005a63;
  --green:#7ed321;  --green-d:#5d9c18;
}

body{ background:var(--canvas); color:var(--ink); }
a{ color:var(--red-ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
h1,h2,h3,h4,h5,legend{ font-weight:500; }
h1{ letter-spacing:-.025em; }
hr{ border:0; border-top:1px solid var(--hair); }

/* ── Top bar: on the canvas, no rule under it ── */
.topbar{ background:var(--canvas); border-bottom:0; }
.brand{ font-weight:500; }
.brand .logo :is(path,polygon,rect),.brand .logo .st0,.logo :is(path,polygon,rect){ fill:var(--red); }
.brand .sub{ color:var(--mute); border-left-color:#d6d6da; }
.tbtn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:0;
  border-radius:var(--r-pill); background:var(--panel); color:var(--ink); font:500 13px var(--sans); cursor:pointer; white-space:nowrap; flex:none; }
.tbtn:hover{ background:#fafafa; text-decoration:none; }
.search input{ height:36px; border:0; border-radius:var(--r-pill); background:var(--panel); padding:0 16px; }
.search input:focus{ outline:2px solid var(--ink); outline-offset:1px; background:var(--panel); }
.qresults{ border:0; border-radius:var(--r-tray); box-shadow:var(--float); padding:6px; }
.qresults .qr{ border-bottom:0; border-radius:var(--r-tile); }
.qresults .qr:hover,.qresults .qr.sel{ background:var(--tray); }

/* ── The content sits in one white panel on the canvas ── */
body > main:not(.wrap), body > div.wrap, .layout > main{
  background:var(--panel); border-radius:var(--r-panel); }
body > main:not(.wrap), body > div.wrap{
  width:calc(100% - 2 * clamp(12px,3vw,32px)); margin:8px auto 48px; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); }
.layout > main{ margin:8px 0 48px; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px); max-width:860px; }

.eyebrow{ color:var(--mute); }
.lead,.hero .lead{ color:var(--ink-2); }
.muted{ color:var(--mute); }
.hero{ border-bottom:0; }

/* ── Handbook-style sidebar: on the canvas; the open section is the raised item ── */
.side .navlabel,.side .navgroup{ color:var(--mute); }
.side a{ color:var(--ink-2); border:0; border-radius:var(--r-tile); }
.side a .n{ color:var(--mute); font-variant-numeric:tabular-nums; }
.side a:hover{ color:var(--ink); background:var(--tray-2); }
.side a:hover .n{ color:var(--mute); }
.side a.active{ color:var(--ink); background:var(--panel); box-shadow:var(--lift); }
.side a.active .n{ color:var(--red-ink); }
.side a .flag,.side a:hover .flag,.side a.active .flag{ background:var(--red); }
.side .subnav{ border-left-color:#dcdce0; }
.side .subnav a{ border-radius:10px; }
.side .subnav a:hover{ color:var(--ink); background:var(--tray-2); }
.side .subnav a.here{ color:var(--ink); background:var(--panel); }
.eyebrow .flag{ border:0; border-radius:7px; background:var(--red-soft); color:var(--red-ink); padding:3px 8px; }

/* ── Cards, callouts and bars: tinted trays, no borders ── */
.card,.bcard,.pcard,.pickcard{ background:var(--tray); border:0; border-radius:var(--r-tile); }
.card.accent,.pickcard{ border-left:0; }
.card.accent .tag,.pickcard .tag{ display:inline-flex; align-items:center; gap:7px; }
.card.accent .tag::before,.pickcard .tag::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:var(--c,var(--blue)); flex:none; }
a.pickcard:hover,a.card:hover{ background:var(--panel); box-shadow:var(--lift); transform:none; }

.callout,.confirm,.savebar,.totalbar,.privacy,.preview,.evid,.disclaimer-top,.codebox,.modepick,.warn,
.member,.item,div.dim,.panel.who,aside.panel{
  background:var(--tray); border:0; border-radius:var(--r-tile); }
.member.incomplete,.item.incomplete{ background:var(--tray); border:1.5px dashed var(--orange); }
div.dim.invalid{ border:0; box-shadow:inset 0 0 0 1.5px var(--red-ink); }
.evidwrap{ border-left:0; }
.stage2{ border-top-color:var(--hair); }
.callout .k,.warn .k,.privacy .k,.totalbar .k{ display:flex; align-items:center; gap:8px; font-weight:500; color:var(--ink-2); }
.callout .k::before,.warn .k::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
.callout:is(.amber,.warn) .k::before,.warn .k::before{ background:var(--orange); }
.callout.teal .k::before{ background:var(--teal); }
.callout.blue .k::before,.callout.info .k::before{ background:var(--blue); }
.callout:is(.ok,.green) .k::before{ background:var(--green-d); }
.callout .k:empty::before{ display:none; }
.callout.ok .dot{ display:none; }
.done{ border-top:0; }

.badge,.tag,.flow .chip,.priv-badge,.pub-badge,.clbadge{ border:0; border-radius:7px; background:var(--tray); color:var(--ink-2); }
.badge{ padding:6px 10px; font-size:12px; }

/* ── Sections inside a form: spacing, not rules ── */
.sect{ border-top:0; }
.sect .no,.sect .n{ color:var(--mute); font-variant-numeric:tabular-nums; }
h3{ border-top-color:var(--hair); }
.reffields li,ul.checks li,.step,table.t td{ border-bottom-color:var(--hair); }
ul.checks li:before{ color:var(--mute); }
.reffields li:before{ border:0; background:var(--tray); color:var(--ink-2); }
.flow .ar{ color:var(--mute); }
.step .lvl{ border-radius:7px; }

table.t th{ background:transparent; color:var(--mute); border-bottom:1px solid var(--hair); }

/* ── Form fields: grey wells on the white panel, white wells inside a grey block; 10px radius, ink focus ring.
   The long :not() chain is deliberate: it outranks every page's own input rules. ── */
body :is(main,.wrap,.layout) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]),textarea,select){
  background:var(--tray); border:0; border-radius:10px; box-shadow:none; }
body :is(main,.wrap,.layout) :is(.member,.item,.dim,.panel.who,.rolepanel,.callout,.card,.confirm,.savebar,.filters,.totalbar)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]),textarea,select){
  background:var(--panel); }
body :is(main,.wrap,.layout) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]),textarea,select):focus{
  outline:2px solid var(--ink); outline-offset:1px; background:var(--panel); box-shadow:none; }
body :is(main,.wrap,.layout) :is(.field.invalid,.invalid) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]),textarea,select){
  background:var(--red-soft); box-shadow:inset 0 0 0 1.5px var(--red-ink); }
.field.invalid :is(.lbl,.q),.err-msg,.formnote.err{ color:var(--red-ink); }
.field .req,.lbl .req{ color:var(--red-ink); }
input[type=checkbox],input[type=radio]{ accent-color:var(--ink); }

/* segmented choices: a tray; the checked option is the raised one */
.seg .opt,.segbtn{ border:0; border-radius:var(--r-tile); background:var(--tray); color:var(--ink-2); }
.seg label:hover .opt,.segbtn:hover{ background:var(--tray-2); color:var(--ink); }
.seg input:checked + .opt,.segbtn.active,.seg button[aria-pressed=true]{
  background:var(--panel); color:var(--ink); border-color:transparent; box-shadow:var(--lift), inset 0 0 0 1.5px var(--ink); }
.seg input:focus-visible + .opt{ outline:2px solid var(--ink); }

/* tab rows and mode switches: a tray; the active tab is raised */
.lvltabs,.modeswitch{ display:inline-flex; flex-wrap:wrap; gap:6px; padding:6px; background:var(--tray);
  border:0; border-radius:var(--r-tray); overflow:visible; }
.lvltab,.modeswitch .mbtn,.modeswitch .mbtn+.mbtn{ border:0; border-radius:var(--r-tile); background:transparent; color:var(--mute); }
.lvltab:hover,.modeswitch .mbtn:hover{ color:var(--ink); background:transparent; }
.lvltab.active,.modeswitch .mbtn.active{ background:var(--panel); color:var(--ink); box-shadow:var(--lift); }

/* level / status pills: a quiet chip with a status dot instead of a colour fill */
.step .lvl,.dim-head .lvl{ display:inline-flex; align-items:center; gap:7px; background:var(--panel); color:var(--ink-2);
  border-radius:7px; }
.step .lvl::before,.dim-head .lvl::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c,var(--faint)); flex:none; }
.dim.na .dim-head .lvl{ background:var(--panel); color:var(--mute); }
.stepnum{ background:var(--red-soft); color:var(--red-ink); border-radius:7px; }
.prog .bar > i{ background:var(--ink); }

/* headings and numbering stay ink / muted; colour is for small dots and tags only */
body :is(main,.wrap) :is(h1,h2,h3):not(#_){ color:var(--ink); }
.lbl .n{ background:var(--tray); color:var(--ink-2); border:0; }
svg text[font-family]{ font-family:var(--sans); }
section.doc > .eyebrow,.qhead .qno,.sec-head .n,h2 .n,.beat .n,table.lvl td.lv,.memberhead .no,.itemhead .no{ color:var(--mute); }
:is(.memberhead,.itemhead) .rm{ border:0; border-radius:var(--r-pill); background:var(--panel); box-shadow:inset 0 0 0 1px #dcdce0; }
:is(.memberhead,.itemhead) .rm:hover{ color:var(--ink); background:var(--tray-2); }

/* ── Buttons: pills; red only for the one primary action ── */
.btn{ border:0; border-radius:var(--r-pill); background:var(--red-btn); color:#fff; font-weight:500; min-height:44px; padding:0 22px; }
.btn:hover{ background:var(--red-btn-h); }
.btn.ghost{ background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px #dcdce0; }
.btn.ghost:hover{ background:var(--tray-2); }
.sendbtn,.sbtn,.cta,.btn-run{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  border:0; border-radius:var(--r-pill); background:var(--red-btn); color:#fff; font-weight:500; padding:0 24px; }
.sendbtn:hover,.sbtn:hover,.cta:hover,.btn-run:hover{ background:var(--red-btn-h); text-decoration:none; }
.ghostbtn,.savebar button,.addrow{ border:0; border-radius:var(--r-pill); background:var(--panel);
  box-shadow:inset 0 0 0 1px #dcdce0; color:var(--ink); }
.ghostbtn{ min-height:44px; }
.ghostbtn:hover,.savebar button:hover,.addrow:hover{ background:var(--tray-2); color:var(--ink); }
.linkbtn{ color:var(--red-ink); }

/* ── Prev / next and footer ── */
.pn{ border-top:0; }
.pn a{ border:0; border-radius:var(--r-tile); background:var(--tray); }
.pn a:hover{ background:var(--tray-2); }
footer.foot{ border-top:0; color:var(--mute); }

@media(max-width:900px){
  .side{ background:var(--canvas); border-bottom:0; }
  .layout > main{ margin-top:4px; }
}
@media(max-width:600px){
  .topbar .brand .sub{ display:none; }
  .topbar{ gap:10px; }
  .lp-logo{ height:32px; }
  .search input{ width:120px; }
}
@media(max-width:520px){
  body > main:not(.wrap), body > div.wrap{ width:calc(100% - 16px); }
}

/* ── Print: white paper, no panel, no shadows; colour cues as borders ── */
@media print{
  body{ background:#fff; }
  .topbar{ background:#fff; }
  body > main:not(.wrap), body > div.wrap, .layout > main{ background:none; border-radius:0; margin:0 auto; width:auto;
    padding-left:0; padding-right:0; box-shadow:none; }
  *{ box-shadow:none !important; }
  .callout,.card,.confirm,.savebar,.totalbar,.pickcard{ border:1px solid var(--hair); }
  .field input,.field textarea,.field select{ border:1px solid #dcdce0; }
}