/* record.css — the revision-record surface.
   Extends the Silicon Almanac tokens. No new hues invented, no good/warn/crit
   palette anywhere: nothing on this surface is allowed to imply a judgement. */

@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-500-normal.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-900-normal.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#E9E7E3; --card:#F2F0EC; --ink:#171614; --body:#3A3833;
  --muted:#55524C; --rule:#C9C5BE; --hair:#DBD8D2; --accent:#C8382A;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media(prefers-color-scheme:dark){:root:where(:not([data-theme=light])){
  color-scheme:dark;
  --paper:#141311; --card:#1B1A17; --ink:#EEECE7; --body:#B9B5AD;
  --muted:#8B8781; --rule:#2C2A27; --hair:#242220; --accent:#E2513F;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
}}

:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#141311; --card:#1B1A17; --ink:#EEECE7; --body:#B9B5AD;
  --muted:#8B8781; --rule:#2C2A27; --hair:#242220; --accent:#E2513F;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
}
:root[data-theme=light]{
  color-scheme:light;
  --paper:#E9E7E3; --card:#F2F0EC; --ink:#171614; --body:#3A3833;
  --muted:#55524C; --rule:#C9C5BE; --hair:#DBD8D2; --accent:#C8382A;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 15px/1.55 var(--sans);font-synthesis-weight:none}
h1,h2,h3{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
/* Standalone preview container. On the live site the pages sit inside
   semi.css's own .wrap, which is wider, so this class is deliberately not
   called .wrap: two stylesheets fighting over one class name is a bug that
   only shows up in the deployed build. */
.rwrap{max-width:1280px;margin:0 auto;padding:0 clamp(16px,2.5vw,40px) 90px}
main.wrap{padding-bottom:70px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- masthead ---- */
header.top{border-bottom:1px solid var(--rule);padding:22px 0 0;margin-bottom:26px}
.top .row{display:flex;flex-wrap:wrap;gap:20px;align-items:baseline;justify-content:space-between}
.top h1{font-size:clamp(21px,2.1vw,27px);font-weight:900;letter-spacing:-.02em}
.top h1 .dot{color:var(--accent)}
.top .sub{max-width:66ch;margin:8px 0 0;color:var(--muted);font-size:14px}
nav.jump{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 26px}
nav.jump a{border:1px solid var(--rule);border-radius:2px;padding:5px 10px;
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
nav.jump a:hover{color:var(--ink);border-color:var(--ink)}
nav.jump a[aria-current=page]{color:var(--paper);background:var(--ink);border-color:var(--ink)}

/* ---- control bar: currency + lens ---- */
.bar{position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule);padding:10px 0;margin-bottom:26px}
.bar .in{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ctl > .lab{font:500 10px/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
button.ghost{background:none;border:1px solid var(--rule);border-radius:2px;color:var(--muted);
  font:500 11px/1 var(--mono);letter-spacing:.06em;padding:6px 9px;cursor:pointer}
button.ghost:hover{color:var(--ink);border-color:var(--ink)}
button.ghost[aria-pressed=true]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
input[type=range]{accent-color:var(--accent);width:min(340px,46vw)}
input[type=date],input[type=number],select{background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;padding:6px 8px;font:400 13px/1 var(--mono)}
.bar .now{font:500 12px/1 var(--mono);color:var(--ink)}
.bar .hint{font:400 11px/1.4 var(--mono);color:var(--muted);flex-basis:100%;margin-top:2px}

/* ---- sections ---- */
section{margin:0 0 clamp(40px,4vw,66px);scroll-margin-top:70px}
.shead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:20px}
.shead .num{font:500 11px/1 var(--mono);color:var(--accent);letter-spacing:.14em;text-transform:uppercase}
.shead h2{font-size:19px}
.shead .note{color:var(--muted);font-size:13px;margin:0 0 0 auto;max-width:56ch;text-align:right}

/* ---- tiles ---- */
.tiles{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{background:var(--card);padding:15px 17px 17px;display:flex;flex-direction:column;
  gap:6px;min-height:146px}
.tile .lab{font:500 10px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tile .val{font:400 27px/1.05 var(--sans);color:var(--ink);letter-spacing:-.02em}
.tile .val.na{font-size:14px;color:var(--muted);letter-spacing:0;line-height:1.4}
.tile .sub{font:400 12px/1.45 var(--mono);color:var(--muted)}
.tile .src{margin-top:auto;font:400 11px/1.4 var(--mono);color:var(--muted)}
.tile .src a{border:none;color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* ---- charts ---- */
.chartgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(430px,1fr))}
figure.chart{margin:0;background:var(--card);border:1px solid var(--rule);padding:16px 18px 12px}
figure.chart figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px}
figure.chart h3{font-size:14px}
figure.chart .cap{font:400 11px/1.4 var(--mono);color:var(--muted);text-align:right}
.plot{position:relative}
.plot svg{display:block;width:100%;height:auto;overflow:visible}
.grid line{stroke:var(--hair);stroke-width:1}
.axis line{stroke:var(--rule);stroke-width:1}
.axis text{fill:var(--muted);font:400 10px/1 var(--mono)}
.serie{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lead{fill:none;stroke-width:2;stroke-dasharray:3 4;opacity:.7}
.legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:9px;font:400 11px/1 var(--mono);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend i.sq{border:2px solid var(--muted);background:none;border-radius:0}

/* ---- stagger matrix ---- */
.matrix{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--mono);
  font-variant-numeric:tabular-nums}
.matrix th{font:500 10px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--rule);padding:8px 10px;text-align:right;
  white-space:nowrap}
.matrix th.rowhead,.matrix td.rowhead{text-align:left;color:var(--ink);font-weight:500}
.matrix td{padding:9px 10px;border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
.matrix td.carried{color:var(--muted)}
.matrix td.empty{color:var(--hair)}
.matrix td.actualcol.empty{color:var(--muted);font:400 11px var(--mono)}
.matrix td.restated{color:var(--ink)}
.matrix td.restated::after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--accent);margin-left:7px;vertical-align:middle}
.matrix td.actual{color:var(--ink);font-weight:500}
.matrix .actualcol{border-left:1px solid var(--rule)}
.mkey{margin-top:10px;font:400 11px/1.6 var(--mono);color:var(--muted);max-width:78ch}
.mkey b{font-weight:500;color:var(--ink)}

/* ---- record table ---- */
table.rec{width:100%;border-collapse:collapse;font-size:13px;margin-top:16px}
table.rec th{text-align:left;font:500 10px/1.3 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule);padding:8px 12px 8px 0}
table.rec td{padding:8px 12px 8px 0;border-bottom:1px solid var(--hair);vertical-align:top}
table.rec td.mono{white-space:nowrap}
table.rec .num{text-align:right;padding-right:20px}

/* ---- digest ---- */
ol.digest{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
ol.digest li{display:grid;grid-template-columns:104px 1fr;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--hair)}
ol.digest .d{font:500 12px/1.5 var(--mono);color:var(--muted)}
ol.digest .t{font-size:14px;line-height:1.55;color:var(--ink)}
ol.digest .t .src{display:block;margin-top:4px;font:400 11px/1.4 var(--mono);color:var(--muted)}
ol.digest .t .src a{border:none;text-decoration:underline;text-underline-offset:2px;color:var(--muted)}
ol.digest .k{font:500 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:3px}

/* ---- money marks ---- */
[data-money]{border-bottom:1px dotted var(--rule);cursor:help}
[data-money].m-derived{border-bottom-style:dashed}
[data-money].m-failed{border-bottom:1px solid var(--accent);opacity:.85}
.mnote{font:400 11px/1.5 var(--mono);color:var(--muted);margin-top:8px;max-width:82ch}

/* ---- converter ---- */
.conv{background:var(--card);border:1px solid var(--rule);padding:18px}
.conv .fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.conv label{display:flex;flex-direction:column;gap:5px;
  font:500 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.conv input[type=number]{width:190px;font-size:16px;padding:9px 10px}
.conv .out{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.conv .big{font:400 34px/1.1 var(--sans);color:var(--ink);letter-spacing:-.02em}
.conv .why{margin-top:9px;font:400 12px/1.6 var(--mono);color:var(--muted);max-width:80ch}
.conv .lad{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;
  font:400 13px/1.5 var(--mono);color:var(--body)}
.conv .lad b{display:block;font:500 10px/1.6 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}

/* ---- callout ---- */
.callout{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:20px 0;
  color:var(--body);font-size:14px;max-width:82ch}
.callout b{color:var(--ink);font-weight:600}
.foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);
  color:var(--muted);font-size:12px;line-height:1.7;max-width:88ch}
.foot code{font-family:var(--mono);font-size:11px}

/* ---- print -------------------------------------------------------------
   A stagger matrix is the kind of thing that ends up in somebody's deck or
   on somebody's wall. Printing it should not print the controls, and every
   link should carry its own URL, because a printed link that hides its
   destination is a citation that cannot be checked. */
@media print{
  :root{--paper:#fff;--card:#fff;--ink:#000;--body:#222;--muted:#555;
        --rule:#999;--hair:#ccc;--accent:#000}
  .bar,nav.jump,button.ghost,input[type=range],.conv .fields{display:none!important}
  body{font-size:11pt;background:#fff}
  .wrap{max-width:none;padding:0}
  section{break-inside:avoid;margin-bottom:24pt}
  figure.chart,table,.tiles{break-inside:avoid;border-color:#999}
  .tiles{grid-template-columns:repeat(2,1fr)}
  a[href^="http"]::after{content:" (" attr(href) ")";font:400 8pt var(--mono);
    color:#555;word-break:break-all}
  .shead .note{max-width:none}
  .foot{page-break-before:avoid}
  .matrix td.restated::after{background:#000}
}

/* ---- reduced motion and focus ---- */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 14px;font:500 12px var(--mono);z-index:100}
.skip:focus{left:8px;top:8px}
.tile:target{outline:2px solid var(--accent);outline-offset:-2px}


/* ---- revision heatmap --------------------------------------------------
   Depth of ink, never hue. A count is a quantity; a colour would be a claim,
   and on this surface no cell is allowed to say good or bad. */
.hmwrap{overflow-x:auto;border:1px solid var(--rule);background:var(--card)}
table.heatmap{border-collapse:collapse;font:400 11px/1 var(--mono);
  font-variant-numeric:tabular-nums;min-width:100%}
table.heatmap th{font:500 9px/1.2 var(--mono);letter-spacing:.06em;color:var(--muted);
  padding:7px 4px;border-bottom:1px solid var(--rule);white-space:nowrap;
  position:sticky;top:0;background:var(--card);z-index:1}
table.heatmap th.rowhead{text-align:left;padding-left:12px;left:0;z-index:2}
table.heatmap td{padding:0;text-align:center;width:26px;height:20px;
  border-right:1px solid var(--paper);border-bottom:1px solid var(--paper)}
table.heatmap td.rowhead{font:500 11px/1 var(--mono);color:var(--ink);text-align:left;
  padding:0 10px 0 12px;width:auto;white-space:nowrap;position:sticky;left:0;
  background:var(--card);z-index:1}
table.heatmap td.cell{color:var(--paper);
  background:color-mix(in srgb, var(--ink) calc(var(--k, 0) * 100%), var(--card))}
table.heatmap td.cell.zero{background:var(--card);color:transparent}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  table.heatmap td.cell{background:var(--ink);opacity:var(--k,1);color:var(--paper)}
  table.heatmap td.cell.zero{background:var(--card);opacity:1}
}