/* Beacon theme "Evolved" (0.7): the 0.4 identity (black brand band, warm off-white page, gold accent) with one
   readable family (Figtree), high contrast, an 8px grid and soft cards instead of rules.
   Gold is never body text: links are ink, semibold, with a gold underline; gold marks fills, dots and the current tab.
   Every text pair is at least 4.5:1 in both themes (docs/mockups/evolved/tokens.css is the source).
   Owned by lane A. Loaded first. Views never use a hex colour; they use these tokens. */

/* ---------- 1. metric-adjusted fallback (no layout shift when Figtree arrives) ---------- */
@font-face{font-family:"Figtree Fallback";src:local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Segoe UI"),local("Roboto");size-adjust:101%;ascent-override:94%;descent-override:25%;line-gap-override:0%}

/* ---------- 2. tokens: light ---------- */
:root{
  /* surfaces */
  --bg:#F6F3EE; --surface:#FFFFFF; --hover:#F6F3EE; --sunk:#EFEAE1; --track:#E2DACB; --hairline:#E3DCCF; --edge:#8E8270;
  /* text */
  --ink:#17150F; --ink-2:#3E3930; --muted:#5C554A;
  /* accent and status */
  --gold-fill:#B07D12; --gold-soft:#E2BE6E; --gold-tint:#F7EACB; --gold-text:#7A5A12;
  --late:#A2321F; --late-wash:#F8E4DE;
  --soon:#7A4F00; --soon-wash:#F6EACB;
  --ok:#2B6A44;   --ok-wash:#E1EFE6;
  --second:#2E4A6B; --second-fill:#4C6E95; --second-wash:#E6ECF3;
  --fill:#17150F;
  /* brand band */
  --band:#141210; --band-ink:#F6F3EE; --band-muted:#CFC3AF; --band-gold:#D6B46A; --band-hover:#2A2622; --band-edge:transparent;
  /* buttons */
  --btn:#141210; --btn-ink:#FFFFFF; --btn-2:#FFFFFF; --btn-2-ink:#17150F; --btn-2-edge:#8E8270;
  /* charts */
  --gantt:#5A544B; --gantt-done:#CFC5B4; --crit:#B07D12; --today:#17150F; --weekend:rgba(23,21,15,.05);
  --focus:#B07D12; --sel:rgba(176,125,18,.14);
  /* type: one family */
  --font:"Figtree","Figtree Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:2.5rem; --lh-display:1.15;
  --fs-title:1.75rem;  --lh-title:1.2;
  --fs-h2:1.25rem;     --lh-h2:1.4;
  --fs-lede:1.1875rem; --lh-lede:1.55;
  --fs-body:1rem;      --lh-body:1.5;
  --fs-small:.9375rem; --lh-small:1.45;
  --fs-tiny:.875rem;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* spacing, 8px grid (both spellings are in use) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(23,21,15,.06),0 8px 24px rgba(23,21,15,.06);
  --shadow-pop:0 12px 40px rgba(23,21,15,.18),0 0 0 1px rgba(23,21,15,.06);
  --shadow-sheet:0 -12px 40px rgba(23,21,15,.22);
  /* sizes */
  --tap:44px; --hit:44px; --row:48px; --mast-h:72px; --tabbar:calc(64px + env(safe-area-inset-bottom));
  --wrap:73.75rem; --gutter:32px; --measure:68ch;
  /* motion */
  --d-1:120ms; --d-2:200ms; --d-3:280ms; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- 3. tokens: dark (system preference, unless the person chose light) ---------- */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#131210; --surface:#24211D; --hover:#2F2B26; --sunk:#2F2B26; --track:#45403A; --hairline:#3A352F; --edge:#7A7268;
  --ink:#F3EEE5; --ink-2:#D9D0C2; --muted:#B3A999;
  --gold-fill:#D6B46A; --gold-soft:#C9A458; --gold-tint:#3D321E; --gold-text:#E2C47E;
  --late:#F2A090; --late-wash:#3A1F1B;
  --soon:#E8C36A; --soon-wash:#352A10;
  --ok:#8ED1A6;   --ok-wash:#1B2F23;
  --second:#A9C2E3; --second-fill:#6E90BD; --second-wash:#1C2838;
  --fill:#F3EEE5;
  --band:#0B0A09; --band-ink:#F6F3EE; --band-muted:#CFC3AF; --band-gold:#D6B46A; --band-hover:#24211D; --band-edge:#2A2622;
  --btn:#F3EEE5; --btn-ink:#131210; --btn-2:#24211D; --btn-2-ink:#F3EEE5; --btn-2-edge:#7A7268;
  --gantt:#8A8276; --gantt-done:#4A4438; --crit:#D6B46A; --today:#F3EEE5; --weekend:rgba(243,238,229,.05);
  --focus:#D6B46A; --sel:rgba(214,180,106,.18);
  --shadow-card:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.25);
  --shadow-pop:0 12px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);
  --shadow-sheet:0 -12px 40px rgba(0,0,0,.6);
  color-scheme:dark } }
/* ---------- 4. tokens: dark (chosen in Settings › Appearance; identical values) ---------- */
:root[data-theme="dark"]{
  --bg:#131210; --surface:#24211D; --hover:#2F2B26; --sunk:#2F2B26; --track:#45403A; --hairline:#3A352F; --edge:#7A7268;
  --ink:#F3EEE5; --ink-2:#D9D0C2; --muted:#B3A999;
  --gold-fill:#D6B46A; --gold-soft:#C9A458; --gold-tint:#3D321E; --gold-text:#E2C47E;
  --late:#F2A090; --late-wash:#3A1F1B;
  --soon:#E8C36A; --soon-wash:#352A10;
  --ok:#8ED1A6;   --ok-wash:#1B2F23;
  --second:#A9C2E3; --second-fill:#6E90BD; --second-wash:#1C2838;
  --fill:#F3EEE5;
  --band:#0B0A09; --band-ink:#F6F3EE; --band-muted:#CFC3AF; --band-gold:#D6B46A; --band-hover:#24211D; --band-edge:#2A2622;
  --btn:#F3EEE5; --btn-ink:#131210; --btn-2:#24211D; --btn-2-ink:#F3EEE5; --btn-2-edge:#7A7268;
  --gantt:#8A8276; --gantt-done:#4A4438; --crit:#D6B46A; --today:#F3EEE5; --weekend:rgba(243,238,229,.05);
  --focus:#D6B46A; --sel:rgba(214,180,106,.18);
  --shadow-card:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.25);
  --shadow-pop:0 12px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);
  --shadow-sheet:0 -12px 40px rgba(0,0,0,.6);
  color-scheme:dark }

/* ---------- 5. aliases: Folio (0.5/0.6) and 0.4 token names, so every sheet renders in the new look ---------- */
:root{
  /* Folio */
  --paper:var(--bg); --paper-2:var(--sunk); --paper-3:var(--track);
  --ink-3:var(--muted); --ink-4:var(--muted);
  --rule:var(--hairline); --rule-2:var(--edge); --rule-ink:var(--hairline);
  --accent:var(--gold-text); --accent-ink:var(--ink); --accent-fill:var(--gold-fill); --accent-wash:var(--gold-tint);
  --f-display:var(--font); --f-ui:var(--font); --f-mono:var(--font);
  --t-xs:var(--fs-tiny); --t-sm:var(--fs-small); --t-md:var(--fs-body); --t-lg:var(--fs-lede); --t-xl:var(--fs-h2); --t-2xl:var(--fs-title); --t-3xl:clamp(1.875rem,4vw,var(--fs-display));
  --lh-tight:var(--lh-display); --lh-ui:var(--lh-body); --lh-body:1.55;
  --track-caps:0;
  --r-0:var(--r-sm); --r-ctl:var(--r-sm);
  /* 0.4 legacy sheet */
  --line:var(--hairline); --line-strong:var(--edge); --taupe:var(--edge);
  --gold:var(--gold-text);
  --bar:var(--band); --bar-ink:var(--band-ink); --bar-muted:var(--band-muted); --bar-gold:var(--band-gold); --bar-line:var(--band-hover);
  --task:var(--gantt);
  --ok-bg:var(--ok-wash); --wait:var(--soon); --wait-bg:var(--soon-wash); --no:var(--late); --no-bg:var(--late-wash);
  --info:var(--second); --info-bg:var(--second-wash);
  --mono:var(--font);
}

/* ---------- 6. motion preference ---------- */
@media (prefers-reduced-motion:reduce){ :root{ --d-1:0ms; --d-2:0ms; --d-3:0ms } html{scroll-behavior:auto} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ---------- 7. reset and base elements ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:4rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100dvh}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
h1{font-size:var(--t-3xl);line-height:var(--lh-display);font-weight:var(--fw-bold);letter-spacing:-.022em}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-semibold)}
h3{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-semibold)}
p{max-width:var(--measure)}
a{color:var(--ink);text-decoration-color:var(--gold-fill);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:currentColor}
strong,b{font-weight:var(--fw-semibold)}
small{font-size:var(--fs-small)}
/* no monospace anywhere: numbers, dates and codes use Figtree with tabular figures */
code,kbd,samp,time,.mono,.num{font-family:var(--font);font-size:inherit;font-variant-numeric:tabular-nums;letter-spacing:0}
kbd{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--sunk);font-size:.8125rem;line-height:1.5;color:var(--muted)}
hr{border:0;border-top:1px solid var(--hairline);margin:var(--s5) 0}
img,svg{display:block;max-width:100%}
svg.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small)}
th{font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--muted);text-align:left;padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--hairline);letter-spacing:0;text-transform:none}
td{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--hairline);vertical-align:top}
td.num,th.num{text-align:right;white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
label{font-size:var(--fs-small)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{
  display:block;width:100%;min-width:0;min-height:var(--tap);padding:10px 14px;background:var(--surface);color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--r-md);font-size:var(--fs-body)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:0;border-color:var(--gold-fill);box-shadow:0 0 0 3px var(--gold-tint)}
input::placeholder,textarea::placeholder{color:var(--muted)}
select{appearance:none;-webkit-appearance:none;padding-right:2.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235C554A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem}
textarea{resize:vertical;line-height:var(--lh-body);min-height:6rem}
/* checkboxes: a 22px rounded box, ink when ticked (the 44px label around it takes the tap) */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;border:2px solid var(--muted);border-radius:7px;background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;transition:background var(--d-1),border-color var(--d-1)}
input[type=checkbox]:hover{border-color:var(--ink)}
input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid var(--surface);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--ink);flex:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--ink-2);padding:0}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--gold-fill);outline-offset:2px;border-radius:var(--r-sm)}
input[type=checkbox]:focus-visible{outline-offset:3px}
[hidden]{display:none!important}
dialog{color:var(--ink);background:var(--surface);border:0}

/* ---------- 8. utilities ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:720px){:root{--gutter:16px}}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s7);row-gap:var(--s7)}
.grid-12>*{min-width:0}
.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:1/-1}
@media (max-width:1000px){.col-4,.col-6,.col-8{grid-column:1/-1}.grid-12{row-gap:var(--s6)}}
.vh,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.grow{flex:1 1 auto}
/* the old small-caps kicker is now a quiet sentence-case label */
.kicker{font-family:var(--font);font-size:var(--fs-small);line-height:1.4;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;color:var(--muted)}
.serif{font-family:var(--font);font-weight:var(--fw-semibold)}
.measure{max-width:var(--measure)}
.muted{color:var(--muted)}
.c-late{color:var(--late)}.c-soon{color:var(--soon)}.c-ok{color:var(--ok)}.c-accent{color:var(--gold-text)}.c-second{color:var(--second)}
.right{text-align:right}
.stack{display:grid;gap:var(--s4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.hide-sm{display:revert}.show-sm{display:none}
@media (max-width:720px){.hide-sm{display:none!important}.show-sm{display:revert}}
.skip{position:absolute;left:var(--s4);top:-3rem;padding:var(--s2) var(--s4);background:var(--ink);color:var(--bg);border-radius:var(--r-sm);z-index:60}
.skip:focus{top:var(--s2)}
/* the tick target: every row checkbox sits in a 44×44 label */
.tick{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);min-height:var(--tap);margin:0;cursor:pointer;flex:none}