/* =========================================================================
   freediag C→Rust port report — shared stylesheet
   Design tokens ported from the Boro Software site (sass/_tokens.scss):
   aizome indigo + kakishibu persimmon on undyed-cotton canvas.
   ========================================================================= */

:root {
  --indigo-900:#11192e; --indigo-800:#18233f; --indigo-700:#1f2d50;
  --indigo-600:#2a3d6a; --indigo-500:#38528c; --indigo-400:#5876a8;
  --indigo-300:#8aa4c6; --indigo-200:#b9cbe1; --indigo-100:#dde7f1; --indigo-50:#eef3f8;
  --thread-500:#7fa6cf; --thread-400:#a3c2e0; --thread-300:#c2d8ec; --thread-200:#dbe8f4;
  --canvas-900:#b6ac96; --canvas-700:#d8cfba; --canvas-500:#e7dfcd;
  --canvas-300:#f1ead9; --canvas-100:#f7f2e7; --canvas-50:#faf7ef;
  --persimmon-700:#9c4a22; --persimmon-500:#c2632f; --persimmon-300:#dd9468; --persimmon-100:#f0d9c8;
  --madder-600:#9b3b2f; --madder-100:#efd3cd;
  --sage-600:#4f6f5e; --sage-100:#d6e0d8;
  --ochre-600:#b07d2c; --ochre-100:#f0e2c2;

  --surface-page:var(--canvas-300); --surface-raised:var(--canvas-100);
  --surface-card:var(--canvas-50); --surface-sunken:var(--canvas-500);
  --surface-indigo:var(--indigo-700); --surface-indigo-deep:var(--indigo-900);

  --text-strong:var(--indigo-900); --text-body:var(--indigo-800);
  --text-muted:color-mix(in srgb,var(--indigo-800) 62%,var(--canvas-500));
  --text-subtle:color-mix(in srgb,var(--indigo-800) 42%,var(--canvas-500));
  --text-on-indigo:var(--canvas-100); --text-on-indigo-muted:var(--indigo-200);
  --accent:var(--persimmon-700); --accent-hover:var(--persimmon-500);
  --text-link:var(--indigo-600);
  --border-soft:color-mix(in srgb,var(--canvas-900) 38%,transparent);
  --border-strong:color-mix(in srgb,var(--indigo-800) 28%,transparent);
  --stitch-color:var(--thread-300);

  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;

  --fs-eyebrow:0.8125rem;
  --tracking-eyebrow:0.16em;
  --container:1200px; --container-text:1024px;
  --gutter:clamp(1.25rem,0.5rem + 3vw,3rem);
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px;
  --radius-pill:999px; --stitch-width:2px;
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--indigo-900) 7%,transparent),0 2px 6px color-mix(in srgb,var(--indigo-900) 6%,transparent);
  --shadow-md:0 2px 4px color-mix(in srgb,var(--indigo-900) 6%,transparent),0 8px 20px color-mix(in srgb,var(--indigo-900) 10%,transparent);
  --shadow-lg:0 4px 8px color-mix(in srgb,var(--indigo-900) 7%,transparent),0 18px 40px color-mix(in srgb,var(--indigo-900) 14%,transparent);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);

  /* severity ramp (status scale, reserved) */
  --sev-critical:var(--madder-600); --sev-critical-bg:var(--madder-100);
  --sev-high:var(--persimmon-700);  --sev-high-bg:var(--persimmon-100);
  --sev-medium:var(--ochre-600);    --sev-medium-bg:var(--ochre-100);
  --sev-low:var(--sage-600);        --sev-low-bg:var(--sage-100);

  /* taxonomy accents */
  --tax-a:var(--madder-600); --tax-b:var(--indigo-500);
  --tax-c:var(--ochre-600);  --tax-d:var(--sage-600);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-strong);
  line-height:1.12; letter-spacing:-0.02em; font-weight:700; margin:0 0 .5em}
a{color:var(--text-link); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--accent)}
code,pre,.mono{font-family:var(--font-mono)}
:where(p,li) code{background:color-mix(in srgb,var(--indigo-700) 8%,transparent);
  padding:.08em .34em; border-radius:var(--radius-xs); font-size:.85em; color:var(--indigo-800)}
a.cite{color:var(--indigo-600); text-decoration:none; border-bottom:1px dotted var(--indigo-400); white-space:nowrap}
a.cite:hover{color:var(--accent); border-bottom-color:var(--accent)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--indigo-500) 55%,transparent); outline-offset:2px; border-radius:2px}
.eyebrow{font-family:var(--font-mono); font-size:calc(var(--fs-eyebrow)*1.05);
  text-transform:uppercase; letter-spacing:var(--tracking-eyebrow);
  color:var(--accent); font-weight:500; margin:0 0 .75rem}
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-text{max-width:var(--container-text); margin-inline:auto; padding-inline:var(--gutter)}
.stitch{border:var(--stitch-width) dashed var(--stitch-color)}
.muted{color:var(--text-muted)}
.small{font-size:.875rem}

/* ---- site chrome (interactive pages) ----------------------------------
   Matches the main site header (partials/nav.html): cream, blurred, soft
   underline, with the real BORO SOFTWARE wordmark. Dark-on-cream for contrast. */
.topbar{background:color-mix(in srgb,var(--surface-page) 90%,transparent); color:var(--text-body);
  border-bottom:1px solid var(--border-soft); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.topbar .wrap{display:flex; align-items:center; gap:1.25rem; min-height:70px; flex-wrap:wrap}

/* real wordmark logo (ported from sass/_components.scss) */
.wordmark{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
.topbar .bmark{position:relative; display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; background:var(--indigo-700); color:var(--canvas-100); border:none;
  font-family:var(--font-display); font-weight:800; font-size:25px; letter-spacing:-.04em;
  line-height:1; box-shadow:var(--shadow-sm)}
.topbar .bmark::after{content:""; position:absolute; inset:6px; border-radius:8px;
  border:1.5px dashed var(--thread-300); pointer-events:none}
.wordmark-text{display:flex; flex-direction:column; line-height:.96; font-family:var(--font-display);
  font-weight:800; letter-spacing:.02em; color:var(--text-strong)}
.wordmark-text .wm-1{font-size:21px}
.wordmark-text .wm-2{font-size:12px; font-weight:600; letter-spacing:.14em; opacity:.85}

.topnav{display:flex; gap:.3rem; margin-left:auto; flex-wrap:wrap; align-items:center}
.topnav a{color:var(--text-body); text-decoration:none; font-size:.92rem;
  padding:.42rem .8rem; border-radius:var(--radius-pill); font-weight:500}
.topnav a:hover{color:var(--text-strong); background:color-mix(in srgb,var(--indigo-700) 9%,transparent)}
.topnav a.active{color:var(--canvas-50); background:var(--indigo-700)}
.topback{margin-left:1rem; color:var(--text-link); text-decoration:none; font-size:.82rem;
  font-family:var(--font-mono); white-space:nowrap; align-self:center}
.topback:hover{color:var(--accent)}

/* ---- hero / page head ------------------------------------------------- */
.pagehead{background:var(--surface-indigo); color:var(--text-on-indigo);
  padding-block:clamp(2.5rem,5vw,4.5rem); position:relative; overflow:hidden}
.pagehead::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0 3px,color-mix(in srgb,var(--indigo-900) 30%,transparent) 3px 4px),
    repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--indigo-900) 22%,transparent) 3px 4px);
  opacity:.35; mix-blend-mode:multiply}
.pagehead>*{position:relative}
.pagehead h1{color:var(--canvas-50); font-size:clamp(2rem,1.4rem+2.6vw,3.1rem); margin-bottom:.4rem}
.pagehead .lede{color:var(--indigo-100); font-size:1.15rem; max-width:60ch; margin:.5rem 0 0}
.pagehead .eyebrow{color:var(--persimmon-300)}
/* code inside the dark hero must read light, not the default dark-indigo ink */
.pagehead code{background:color-mix(in srgb,var(--canvas-50) 16%,transparent); color:var(--canvas-50)}

/* ---- cards / stat tiles ---------------------------------------------- */
.patch{background:var(--surface-card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); border:1px solid var(--border-soft)}
.statgrid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{background:var(--surface-card); border-radius:var(--radius-md); padding:1.1rem 1.25rem;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-soft)}
.stat .num{font-family:var(--font-display); font-weight:800; font-size:2rem;
  color:var(--text-strong); line-height:1; letter-spacing:-.02em}
.stat .num.accent{color:var(--accent)}
.stat .lbl{font-size:.82rem; color:var(--text-muted); margin-top:.35rem; line-height:1.3}

/* ---- footer ----------------------------------------------------------- */
.pagefoot{background:var(--surface-indigo-deep); color:var(--indigo-200);
  padding-block:2.25rem; margin-top:3rem; font-size:.875rem}
.pagefoot a{color:var(--thread-300)}
.pagefoot .wrap{display:flex; gap:1rem; flex-wrap:wrap; align-items:baseline; justify-content:space-between}

@media (prefers-reduced-motion:no-preference){
  a,.topnav a,.chip,.fcard{transition:color var(--dur-base,200ms) var(--ease-out),
    background var(--dur-base,200ms) var(--ease-out),border-color var(--dur-base,200ms) var(--ease-out)}
}

/* ======================================================================
   Source view  (src/*.c.html)
   ====================================================================== */
.srcpage{background:var(--canvas-100)}
/* Sticky file-path bar + findings strip, both cream to match the top bar. */
.srctop{position:sticky; top:0; z-index:6; box-shadow:var(--shadow-sm)}
.pathbar{background:var(--surface-card); border-bottom:1px solid var(--border-soft)}
.pathbar .wrap{display:flex; align-items:center; gap:.85rem; min-height:46px; flex-wrap:wrap}
.pathbar .pathback{color:var(--text-subtle); text-decoration:none; font-family:var(--font-mono); font-size:1rem}
.pathbar .pathback:hover{color:var(--accent)}
.pathbar .path{font-family:var(--font-mono); font-size:.92rem; color:var(--text-strong); font-weight:600}
.pathbar .path .dir{color:var(--text-subtle); font-weight:400}
.pathbar .pathmeta{margin-left:auto; font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted)}

/* findings-in-this-file strip: a line-jump index, sticky under the header */
.srcfindbar{background:var(--surface-raised); border-bottom:1px solid var(--border-soft)}
.srcfindbar .wrap{padding-block:.5rem; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.srcfindbar .lbl{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.09em;
  font-size:.66rem; color:var(--text-muted); margin-right:.35rem; white-space:nowrap}
.findchip{display:inline-flex; align-items:center; gap:.35rem; text-decoration:none;
  font-family:var(--font-mono); font-size:.75rem; padding:.16rem .55rem .16rem .18rem;
  border-radius:var(--radius-pill); background:var(--surface-card); border:1px solid var(--border-soft); color:var(--text-body)}
.findchip .fc-id{display:inline-grid; place-items:center; min-width:1.55rem; height:1.15rem; padding:0 .3rem;
  border-radius:var(--radius-pill); color:var(--canvas-50); font-weight:800; font-size:.7rem; letter-spacing:.01em}
.findchip .fc-ln{color:var(--text-subtle); font-weight:500}
.findchip:hover{border-color:var(--accent); background:var(--indigo-50); color:var(--text-strong)}
.findchip:hover .fc-ln{color:var(--accent)}

.codewrap{overflow-x:auto; background:var(--indigo-900); padding:1rem 0 3rem}
.coderel{position:relative}
table.code{border-collapse:collapse; font-family:var(--font-mono); font-size:13px;
  line-height:20px; width:100%; color:var(--indigo-100)}
table.code td{padding:0; height:20px; vertical-align:top; white-space:pre}
table.code tr{scroll-margin-top:66px}  /* clear the sticky source header on #Lnnn jumps */
body.has-findbar table.code tr{scroll-margin-top:104px}  /* header + findings strip */
td.ln{-webkit-user-select:none; user-select:none; text-align:right; color:var(--indigo-400);
  padding:0 .9rem 0 1rem; border-right:1px solid var(--indigo-700); min-width:3.5rem}
td.ln a{color:inherit; text-decoration:none}
td.gutter{width:var(--gutw,0); min-width:var(--gutw,0); padding:0; -webkit-user-select:none; user-select:none}
td.src{padding:0 1.25rem 0 .75rem; width:100%}

/* marker rail: one elongated tag per finding range, packed into lanes */
.markrail{position:absolute; top:0; left:0; height:100%; pointer-events:none; z-index:3}
.markrail .fmark{position:absolute; box-sizing:border-box; width:26px; pointer-events:auto;
  display:flex; align-items:flex-start; justify-content:center; padding-top:2px;
  border-radius:4px; color:var(--canvas-50); font-family:var(--font-mono); font-weight:700;
  font-size:10px; line-height:1; letter-spacing:.01em; text-decoration:none; cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 22%,transparent)}
/* keep the id label visible below the sticky header while a tall marker scrolls */
.markrail .fmark>span{position:sticky; top:64px; display:block}
.markrail .fmark:hover,.markrail .fmark:focus-visible{outline:2px solid var(--canvas-50); outline-offset:1px; z-index:6}
tr.code-line:target td.src,tr.code-line.hot td.src{background:color-mix(in srgb,var(--persimmon-500) 22%,transparent)}
tr.code-line:target td.ln,tr.code-line.hot td.ln{background:color-mix(in srgb,var(--persimmon-500) 30%,transparent); color:var(--canvas-50)}
tr.cited td.ln{color:var(--persimmon-300)}
tr.cited td.src{background:color-mix(in srgb,var(--persimmon-700) 12%,transparent)}
tr.cited:target td.src,tr.cited.hot td.src{background:color-mix(in srgb,var(--persimmon-500) 26%,transparent)}
/* C syntax colors (on dark) */
.c-cmt{color:#7d90b0; font-style:italic}
.c-str{color:#c6a15b}
.c-kw{color:#8ab6e6; font-weight:500}
.c-num{color:#dd9468}
.c-pp{color:#a3c2e0}
.badge-A{background:var(--tax-a)} .badge-B{background:var(--tax-b)}
.badge-C{background:var(--tax-c)} .badge-D{background:var(--tax-d)}

/* finding hover popup (source view) */
.fpop{position:fixed; z-index:60; background:var(--surface-card); color:var(--text-body);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  max-width:380px; min-width:250px; padding:.3rem; font-family:var(--font-body);
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s var(--ease-out),transform .12s var(--ease-out)}
.fpop.show{opacity:1; visibility:visible; transform:none}
.fpop-row{display:flex; gap:.55rem; align-items:flex-start; padding:.55rem .6rem; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--text-body)}
.fpop-row:hover{background:var(--indigo-50)}
.fpop-row+.fpop-row{border-top:1px dashed var(--stitch-color)}
.fpop .idtag{font-family:var(--font-display); font-weight:800; color:var(--canvas-50);
  padding:.12rem .48rem; border-radius:6px; font-size:.82rem; flex:none; line-height:1.25}
.fpop-main{display:flex; flex-direction:column; gap:.35rem; flex:1 1 auto; min-width:0}
.fpop-title{font-size:.86rem; line-height:1.32; color:var(--text-strong); font-weight:600}
.fpop-title code{font-family:var(--font-mono); font-size:.8em; background:color-mix(in srgb,var(--indigo-700) 8%,transparent); padding:.05em .3em; border-radius:3px}
.fpop-meta{display:flex; gap:.35rem; align-items:center; flex-wrap:wrap}
.fpop-go{font-family:var(--font-mono); font-size:.72rem; color:var(--text-link); flex:none; align-self:center; white-space:nowrap}
.fpop-row:hover .fpop-go{color:var(--accent)}

/* file index */
.filetree{columns:2 320px; column-gap:2rem}
.filetree .grp{break-inside:avoid; margin-bottom:1.4rem}
.filetree h3{font-size:.95rem; font-family:var(--font-mono); color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em; margin:0 0 .5rem}
.filetree ul{list-style:none; margin:0; padding:0}
.filetree li{display:flex; justify-content:space-between; gap:.5rem; padding:.18rem 0; border-bottom:1px dotted var(--border-soft)}
.filetree a{font-family:var(--font-mono); font-size:.85rem; text-decoration:none}
.filetree .fcount{font-size:.72rem; color:var(--canvas-50); background:var(--tax-a);
  border-radius:var(--radius-pill); padding:0 .45rem; align-self:center; font-weight:700}

/* ======================================================================
   Findings browser  (findings.html)
   ====================================================================== */
.legend{display:flex; gap:.75rem; flex-wrap:wrap; margin:1.25rem 0}
.legend .lg{display:flex; gap:.55rem; align-items:flex-start; background:var(--surface-card);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:.6rem .8rem; flex:1 1 220px; box-shadow:var(--shadow-sm)}
.legend .tag{font-family:var(--font-display); font-weight:800; color:var(--canvas-50);
  width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:8px; flex:none}
.legend .lg b{display:block; font-family:var(--font-body); font-size:.9rem; color:var(--text-strong)}
.legend .lg span{font-size:.78rem; color:var(--text-muted)}

.controls{position:sticky; top:0; z-index:4; background:color-mix(in srgb,var(--surface-page) 92%,transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--border-soft); padding-block:.85rem; margin-bottom:1.5rem}
.controls .row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.controls input[type=search]{flex:1 1 240px; min-width:180px; font-family:var(--font-body);
  font-size:.95rem; padding:.5rem .8rem; border:var(--stitch-width) dashed var(--stitch-color);
  border-radius:var(--radius-sm); background:var(--surface-card); color:var(--text-body)}
.chip{font-family:var(--font-mono); font-size:.78rem; padding:.34rem .7rem; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--surface-card); color:var(--text-body);
  cursor:pointer; font-weight:500; letter-spacing:.02em}
.chip[aria-pressed=true]{background:var(--indigo-700); color:var(--canvas-50); border-color:var(--indigo-700)}
.chip.sev[aria-pressed=true]{background:var(--accent); border-color:var(--accent)}
.chip:hover{border-color:var(--accent)}
.count-note{font-size:.8rem; color:var(--text-muted); margin-left:auto}

.fgrid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); align-items:start}
.fcard{background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  border:1px solid var(--border-soft); overflow:hidden; scroll-margin-top:calc(var(--controls-h,120px) + 16px)}
.fcard.open{box-shadow:var(--shadow-lg); grid-column:1/-1}
.fcard>.head{display:flex; gap:.7rem; align-items:flex-start; padding:1rem 1.1rem; cursor:pointer}
.fcard .idtag{font-family:var(--font-display); font-weight:800; color:var(--canvas-50);
  padding:.2rem .55rem; border-radius:7px; font-size:.9rem; flex:none; letter-spacing:.01em}
.fcard .ftitle{font-family:var(--font-body); font-weight:600; color:var(--text-strong); font-size:.98rem; line-height:1.3; margin:0}
.fcard .ftitle code{font-size:.85em}
.fcard .sub{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem; align-items:center}
.pill{font-size:.68rem; font-family:var(--font-mono); padding:.12rem .5rem; border-radius:var(--radius-pill);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.pill.status-confirmed{background:var(--sage-100); color:var(--sage-600)}
.pill.status-confirmed-runtime{background:var(--sage-100); color:var(--sage-600)}
.pill.status-unverified{background:var(--ochre-100); color:var(--ochre-600)}
.pill.status-refuted{background:var(--indigo-100); color:var(--indigo-600)}
.pill.sev{color:var(--canvas-50)}
.pill.sev-critical{background:var(--sev-critical)} .pill.sev-high{background:var(--sev-high)}
.pill.sev-medium{background:var(--sev-medium)} .pill.sev-low{background:var(--sev-low)}
.pill.tk{background:var(--indigo-100); color:var(--indigo-700)}
.fcard .body{display:none; padding:0 1.1rem 1.15rem; border-top:1px dashed var(--stitch-color); margin-top:.2rem}
.fcard.open .body{display:block}
.fcard .body p{font-size:.9rem; line-height:1.6}
.fcard .body p:first-child{margin-top:.9rem}
.fcard .cites{margin-top:.8rem; display:flex; gap:.4rem; flex-wrap:wrap}
.fcard .cites a{font-family:var(--font-mono); font-size:.75rem; text-decoration:none;
  background:var(--indigo-50); color:var(--indigo-700); border:1px solid var(--indigo-100);
  border-radius:var(--radius-sm); padding:.22rem .5rem}
.fcard .cites a:hover{background:var(--indigo-700); color:var(--canvas-50)}
.fcard .expand{margin-left:auto; color:var(--text-subtle); font-size:1.1rem; flex:none; align-self:center}
.headline-row{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:1rem 0 1.75rem}
.hl{background:var(--surface-card); border-left:4px solid var(--sev-critical); border-radius:var(--radius-md);
  padding:1rem 1.15rem; box-shadow:var(--shadow-sm)}
.hl .hid{font-family:var(--font-mono); font-weight:700; color:var(--sev-critical); font-size:.8rem}
.hl h4{margin:.25rem 0 .4rem; font-size:1rem}
.hl p{font-size:.85rem; margin:0; color:var(--text-muted)}
.empty{text-align:center; padding:3rem 1rem; color:var(--text-muted); display:none}

/* ======================================================================
   Timeline + charts  (timeline.html)
   ====================================================================== */
.tl{position:relative; margin:2rem 0; padding-left:2.5rem}
.tl::before{content:""; position:absolute; left:.65rem; top:.4rem; bottom:.4rem; width:0;
  border-left:var(--stitch-width) dashed var(--stitch-color)}
.tlday{margin-bottom:2.25rem}
.tlday>.date{font-family:var(--font-mono); font-weight:700; color:var(--accent);
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; position:relative; margin-bottom:.9rem}
.tlday>.date::before{content:""; position:absolute; left:-2.2rem; top:.1rem; width:.85rem; height:.85rem;
  background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px var(--surface-page)}
.tlday.inflect>.date::before{background:var(--madder-600); box-shadow:0 0 0 4px var(--surface-page),0 0 0 6px color-mix(in srgb,var(--madder-600) 40%,transparent)}
.tlday .dtitle{font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:1.05rem; margin:.1rem 0 .8rem}
.tlentry{background:var(--surface-card); border-radius:var(--radius-md); padding:.85rem 1rem; margin-bottom:.7rem;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-soft); position:relative}
.tlentry .hash{font-family:var(--font-mono); font-size:.72rem; background:var(--indigo-700); color:var(--canvas-50);
  padding:.1rem .45rem; border-radius:var(--radius-xs); text-decoration:none}
.tlentry .etime{font-family:var(--font-mono); font-size:.75rem; color:var(--text-subtle)}
.tlentry .ehead{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.35rem}
.tlentry .ekind{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  padding:.08rem .45rem; border-radius:var(--radius-pill); font-weight:600}
.ekind.policy{background:var(--persimmon-100); color:var(--persimmon-700)}
.ekind.tooling{background:var(--indigo-100); color:var(--indigo-600)}
.ekind.decision{background:var(--sage-100); color:var(--sage-600)}
.ekind.setup{background:var(--canvas-500); color:var(--indigo-800)}
.tlentry .ebody{font-size:.9rem; margin:.2rem 0 0}
.tlentry .trigger{font-size:.82rem; color:var(--text-muted); margin-top:.4rem; padding-top:.4rem; border-top:1px dotted var(--border-soft)}
.tlentry .trigger b{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent)}

/* charts */
.chart{background:var(--surface-card); border-radius:var(--radius-lg); padding:1.4rem 1.5rem;
  box-shadow:var(--shadow-md); border:1px solid var(--border-soft); margin:1.25rem 0}
.chart h3{font-size:1.05rem; margin:0 0 .3rem}
.chart .csub{font-size:.82rem; color:var(--text-muted); margin:0 0 1.1rem}
.barrow{display:grid; grid-template-columns:120px 1fr auto; gap:.6rem; align-items:center; margin:.55rem 0}
.barrow .blabel{font-size:.85rem; font-weight:600; color:var(--text-strong)}
.barrow .blabel small{display:block; font-weight:400; color:var(--text-muted); font-size:.72rem}
.bartrack{background:color-mix(in srgb,var(--indigo-700) 8%,transparent); border-radius:var(--radius-pill); height:1.5rem; overflow:hidden}
.barfill{height:100%; border-radius:var(--radius-pill); background:var(--indigo-600);
  border-top-right-radius:var(--radius-xs); border-bottom-right-radius:var(--radius-xs)}
.barfill.accent{background:var(--accent)}
.barrow .bval{font-family:var(--font-mono); font-size:.82rem; color:var(--text-strong); font-weight:500; text-align:right; min-width:5.5rem}
.barrow .bval small{color:var(--text-muted); font-weight:400}
.stackbar{display:flex; height:2.6rem; border-radius:var(--radius-sm); overflow:hidden; gap:2px; margin:.5rem 0 1rem; background:var(--surface-page)}
.stackbar .seg{display:flex; align-items:center; justify-content:center; color:var(--canvas-50);
  font-family:var(--font-mono); font-size:.75rem; font-weight:600; min-width:0; overflow:hidden; white-space:nowrap}
.stacklegend{display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem}
.stacklegend .k{display:flex; align-items:center; gap:.4rem}
.stacklegend .sw{width:.85rem; height:.85rem; border-radius:3px; flex:none}
figure.chart figcaption{font-size:.78rem; color:var(--text-subtle); margin-top:.6rem; font-style:italic}
details.tabledata{margin-top:.8rem; font-size:.82rem}
details.tabledata summary{cursor:pointer; color:var(--text-link); font-family:var(--font-mono); font-size:.75rem}

/* generic prose tables */
.table-wrap{overflow-x:auto; margin:1.25rem 0}
table:not(.code){border-collapse:collapse; width:100%; font-size:.9rem}
table:not(.code) th{background:var(--indigo-700); color:var(--canvas-50); text-align:left;
  padding:.55rem .8rem; font-family:var(--font-body); font-weight:600; font-size:.82rem}
table:not(.code) td{padding:.5rem .8rem; border-bottom:1px solid var(--border-soft); vertical-align:top}
table:not(.code) tbody tr:nth-child(even){background:color-mix(in srgb,var(--canvas-500) 30%,transparent)}

/* ======================================================================
   Whitepaper (readability-first, print)
   ====================================================================== */
.paper{background:var(--surface-card); max-width:52rem; margin:2rem auto; padding:clamp(2rem,4vw,4rem);
  box-shadow:var(--shadow-lg); border-radius:var(--radius-md)}
.paper .doc-eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.75rem; color:var(--accent)}
.paper h1{font-size:clamp(1.9rem,1.4rem+2vw,2.7rem); margin:.3rem 0 .5rem; line-height:1.08}
.paper .byline{color:var(--text-muted); font-size:.95rem; border-bottom:var(--stitch-width) dashed var(--stitch-color); padding-bottom:1.25rem; margin-bottom:1.5rem}
.paper h2{font-size:1.5rem; margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--border-soft); scroll-margin-top:5rem}
.paper h3{font-size:1.15rem; margin-top:1.6rem}
.paper p,.paper li{font-size:1.02rem; line-height:1.72; color:var(--text-body)}
.paper .lede{font-size:1.2rem; line-height:1.6; color:var(--text-strong)}
.paper blockquote{border-left:3px solid var(--accent); margin:1.25rem 0; padding:.4rem 0 .4rem 1.2rem; color:var(--text-muted); font-style:italic}
.toc{background:var(--surface-raised); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:1.1rem 1.4rem; margin:1.75rem 0}
.toc h4{margin:0 0 .5rem; font-size:.8rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted)}
.toc ol{margin:0; padding-left:1.3rem; font-size:.9rem}
.toc li{margin:.1rem 0}
.toc a{text-decoration:none; color:var(--text-body)}
.toc a:hover{color:var(--accent)}
/* Active = colour change only. No weight/border/padding change, so the text
   never reflows or jiggles as the highlight moves while scrolling. */
.toc a.active{color:var(--accent)}
/* Wide screens: float the TOC into the left gutter as a sticky single-column rail. */
@media (min-width:1340px){
  .paper{margin-inline:auto}
  .toc{position:fixed; top:5.5rem; left:calc((100% - 52rem)/2 - 14.75rem); width:13rem; margin:0; z-index:5;
    max-height:calc(100vh - 7.5rem); overflow:auto; padding:1rem 1.15rem; box-shadow:var(--shadow-sm)}
  .toc ol{padding-left:1.15rem; list-style-position:outside}
  .toc li{line-height:1.35; margin:.35rem 0}
}
.callout{background:var(--madder-100); border-left:4px solid var(--madder-600); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; margin:1.5rem 0}
.callout.info{background:var(--indigo-50); border-color:var(--indigo-500)}
.callout .k{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--madder-600); font-weight:700; display:block; margin-bottom:.3rem}
.callout.info .k{color:var(--indigo-600)}
/* inline finding badges + section links in whitepaper prose (web only) */
.wp-fid{display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:.8em; line-height:1.15;
  padding:.1em .4em; border-radius:5px; color:var(--canvas-50); text-decoration:none; vertical-align:baseline;
  letter-spacing:.01em; cursor:pointer; box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 16%,transparent)}
.wp-fid:hover,.wp-fid:focus-visible{color:var(--canvas-50); outline:2px solid color-mix(in srgb,var(--indigo-900) 30%,transparent); outline-offset:1px}
strong .wp-fid,em .wp-fid{font-weight:700}
.wp-sec{text-decoration:none; color:var(--text-link); border-bottom:1px dotted var(--indigo-300);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.wp-sec:hover{color:var(--accent); border-bottom-color:var(--accent)}

.printbtn{position:fixed; right:1.25rem; bottom:1.25rem; z-index:20; background:var(--accent); color:var(--canvas-50);
  border:none; border-radius:var(--radius-pill); padding:.7rem 1.2rem; font-family:var(--font-body); font-weight:600;
  font-size:.9rem; cursor:pointer; box-shadow:var(--shadow-lg)}
.printbtn:hover{background:var(--accent-hover)}

/* hub cards */
.hubgrid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:2rem 0}
.hubcard{display:block; text-decoration:none; background:var(--surface-card); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--shadow-md); border:1px solid var(--border-soft); color:var(--text-body)}
.hubcard:hover{box-shadow:var(--shadow-lg); border-color:var(--accent); color:var(--text-body)}
.hubcard .ic{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent)}
.hubcard h3{margin:.5rem 0 .4rem; font-size:1.25rem}
.hubcard p{font-size:.9rem; color:var(--text-muted); margin:0}
.hubcard .go{display:inline-block; margin-top:.9rem; font-family:var(--font-mono); font-size:.8rem; color:var(--text-link)}

@media print{
  @page{margin:18mm 16mm}
  :root{--surface-page:#fff; --surface-card:#fff}
  body{background:#fff; color:#1a1a1a; font-size:11pt; line-height:1.5}
  .topbar,.pagefoot,.printbtn,.controls,.no-print{display:none !important}
  .paper{box-shadow:none; margin:0; padding:0; max-width:100%; border-radius:0}
  .paper h1,.paper h2,.paper h3,h1,h2,h3,h4{color:#111}
  .paper h2{break-after:avoid; page-break-after:avoid}
  .paper h3{break-after:avoid}
  p,li,blockquote,tr,.callout,figure{break-inside:avoid}
  .paper p,.paper li{font-size:10.5pt; line-height:1.5}
  a{color:#111; text-decoration:none}
  a.cite,.paper a[href]{color:#333}
  .callout{border:1px solid #999; background:#f4f4f4 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  /* finding badges + section links revert to plain text on paper */
  .wp-fid{background:none !important; color:#111 !important; padding:0 !important; box-shadow:none !important; border-radius:0; font-family:inherit; font-weight:inherit; font-size:1em}
  .wp-sec{color:#111 !important; border-bottom:0 !important}
  table:not(.code) th{background:#333 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .toc{border:1px solid #ccc}
  .barfill,.barfill.accent{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .pagebreak{break-before:page; page-break-before:always}
}