/* SN61 Analysis, styled after taostats.io (the same base as the SN15 Analysis site): light grey page, white cards with
   hairline borders, teal brand, Inter for text and IBM Plex Mono for labels, navigation, tags and numbers.
   One reading column (max 1240px) under a top bar of analyses (tabs); each analysis has its own sub-navigation. */
:root {
  --paper: #f5f6f6;
  --surface: #ffffff;
  --ink: #0e0f11;
  --ink-2: #3e3f41;
  --muted: #646568;
  --line: #e6e7e8;
  --line-strong: #8c92a4;
  --grid: #f0f1f1;
  --code-bg: #f9fafb;
  --brand: #0e0f11;
  --teal: #007f6c; --teal-soft: #e0f0ed;
  --accent: var(--teal); --accent-soft: var(--teal-soft);
  --pass: #15803d;  --pass-soft: #e3f0e8;
  --warn: #c2410c;  --warn-soft: #f8e8e2;
  --fail: #e11d48;  --fail-soft: #fbe4e9;
  --display: "Inter", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0f11; --surface: #17181a; --ink: #ffffff; --ink-2: #d4d5d6; --muted: #a2a2a3; --line: #28292c; --line-strong: #8c92a4; --grid: #232426; --code-bg: #131416;
    --brand: #ffffff;
    --teal: #00dbbc; --teal-soft: #143532;
    --pass: #4ade80; --pass-soft: #1f3629; --warn: #f77c36; --warn-soft: #39271e; --fail: #ff3d57; --fail-soft: #3a1e23;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0f11; --surface: #17181a; --ink: #ffffff; --ink-2: #d4d5d6; --muted: #a2a2a3; --line: #28292c; --line-strong: #8c92a4; --grid: #232426; --code-bg: #131416;
  --brand: #ffffff;
  --teal: #00dbbc; --teal-soft: #143532;
  --pass: #4ade80; --pass-soft: #1f3629; --warn: #f77c36; --warn-soft: #39271e; --fail: #ff3d57; --fail-soft: #3a1e23;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15.5px/1.6 var(--body); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
::selection { background: var(--teal-soft); color: var(--ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 32px 80px; display: grid; gap: 52px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 500; letter-spacing: -0.035em; }
h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; letter-spacing: -0.028em; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
p { margin: 0; max-width: 78ch; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--grid); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
header.hero .eyebrow { color: var(--accent); }
section { display: grid; gap: 18px; scroll-margin-top: 116px; }
section > .head { display: grid; gap: 8px; }
section > .head > .eyebrow { display: flex; align-items: center; gap: 12px; }
section > .head > .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
header.hero { display: grid; gap: 18px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 74ch; letter-spacing: -0.005em; }
.caption { font-size: 14px; color: var(--muted); max-width: 92ch; }

/* top bar: the site and its analyses */
.topbar { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar .in { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 6px; }
.topbar .brand { display: flex; align-items: center; gap: 9px; padding-block: 13px; margin-right: 22px; text-decoration: none; font: 700 19px/1 var(--display); color: var(--brand); letter-spacing: -0.04em; }
.topbar .brand .mark { width: 24px; height: 24px; border-radius: 6px; background: var(--brand); display: grid; place-items: center; color: var(--surface); font: 600 11.5px/1 var(--mono); letter-spacing: -0.02em; }
.topbar a.tab { display: flex; align-items: center; padding: 13px 12px 11px; font: 500 12.5px/1.2 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.topbar a.tab:hover, .topbar a.tab:focus-visible { color: var(--ink); outline: none; }
.topbar a.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.subnav { position: sticky; top: 51px; z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.subnav .in { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.subnav .label { font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.subnav a { font: 500 12.5px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; padding: 7px 10px; border-radius: 4px; color: var(--muted); border: 1px solid transparent; }
.subnav a:hover, .subnav a:focus-visible { color: var(--ink); background: var(--grid); outline: none; }
.subnav a[aria-current="page"] { color: var(--teal); background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.toc { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 4px; }
.toc a { font: 500 12px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.toc a:hover, .toc a:focus-visible { color: var(--ink); border-color: var(--line-strong); outline: none; }

/* home: list of analyses */
.analyses { display: grid; gap: 12px; }
a.analysis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; text-decoration: none; color: inherit; transition: border-color .15s; }
a.analysis:hover, a.analysis:focus-visible { border-color: var(--teal); outline: none; }
a.analysis .t { font: 500 23px/1.2 var(--display); letter-spacing: -0.025em; }
a.analysis .d { grid-column: 1 / -1; color: var(--muted); font-size: 15px; max-width: 80ch; }
a.analysis .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding-top: 2px; }
a.analysis .date { font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: nowrap; text-transform: uppercase; }
.tag { font: 500 11.5px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; background: var(--grid); color: var(--muted); }

/* tiles and cards */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.tile .v { font: 500 30px/1.05 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tile .k { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.tile.good .v { color: var(--pass); } .tile.bad .v { color: var(--fail); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s; }
a.card:hover, a.card:focus-visible { border-color: var(--line-strong); outline: none; }
.card .name { font: 500 23px/1 var(--display); letter-spacing: -0.03em; }
.card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.card .go { font: 500 12px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--teal); }


ul.notes { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; max-width: 96ch; }

/* data strips, pills, tables */
.data { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 14.5px; }
.data b { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.pill { font: 500 12.5px/1 var(--mono); padding: 5px 8px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--grid) 60%, transparent); }
th { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font: 400 12.5px/1.45 var(--mono); }
td.best { font-weight: 600; }
td.low { color: var(--fail); font-weight: 600; }
td.rule { font-size: 14px; }
tr.grp td { background: var(--paper); font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.note { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); border-radius: 8px; padding: 12px 16px; font-size: 14.5px; max-width: 98ch; }
.note b { color: var(--warn); font: 500 12px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; margin-right: 4px; }
.take { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.take li { counter-increment: t; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.take li::before { content: counter(t, decimal-leading-zero); font: 500 14px/1.5 var(--mono); color: var(--teal); }
.take .src { font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 6px; }
footer { font: 400 12.5px/1.6 var(--mono); color: var(--muted); display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 20px; }

@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .take li { grid-template-columns: 28px minmax(0, 1fr); }
  a.analysis { grid-template-columns: minmax(0, 1fr); }
  .subnav { position: static; }
  .topbar .brand { margin-right: 8px; }
}

/* charts: horizontal bars in HTML, one baseline, hairline grid, value at the tip, hover/focus tooltip, table view.
   Every chart on this site is ONE series in the accent teal (light #007f6c 4.94:1 on white, dark #00dbbc 10.0:1 on
   #17181a), so no categorical palette is needed; categories are named in text, never by colour. */
figure.chart { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 14px; display: grid; gap: 14px; min-width: 0; }
.chart figcaption { display: grid; gap: 4px; }
.chart .ct { font: 600 15.5px/1.3 var(--display); letter-spacing: -0.01em; }
.chart .cs { font-size: 13.5px; color: var(--muted); max-width: 90ch; }
.chart .keys { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.chart .key { display: inline-flex; align-items: center; gap: 7px; }
.chart .key i { width: 14px; height: 10px; border-radius: 0 3px 3px 0; display: inline-block; }
.bars { display: grid; gap: 14px; }
.brow, .baxis { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.blabel { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.btrack { position: relative; display: grid; gap: 2px; border-left: 1px solid var(--line-strong); }
.btrack .gl { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--grid); }
.bline { position: relative; display: flex; align-items: center; gap: 6px; height: 12px; }
.bar { flex: none; height: 10px; border-radius: 0 4px 4px 0; min-width: 2px; position: relative; }
.bar::after { content: ""; position: absolute; inset: -3px -4px; }          /* (hit area larger than the mark) */
.bar:hover, .bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.bval { font: 500 11.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.baxis .ticks { position: relative; height: 14px; }
.baxis .ticks span { position: absolute; transform: translateX(-50%); font: 400 11px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.baxis .ticks span:first-child { transform: none; }
.ctip { position: fixed; z-index: 30; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; box-shadow: 0 8px 24px rgba(14, 15, 17, 0.14); display: grid; gap: 3px; max-width: 280px; }
.ctip b { font: 600 15px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.ctip span { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ctip i { width: 12px; height: 2px; display: inline-block; flex: none; }
details.tableview { border-top: 1px solid var(--line); padding-top: 8px; }
details.tableview > summary { cursor: pointer; font: 500 12px/1.2 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
details.tableview > summary:hover { color: var(--ink); }
details.tableview .tbl { margin-top: 10px; }
@media (max-width: 640px) {
  .brow, .baxis { grid-template-columns: minmax(0, 1fr); }
  .baxis > :first-child { display: none; }
  figure.chart { padding: 16px 14px 12px; }
}

/* ---- incentive-change page: risk labels (status colours, always with the word) and the quoted announcement ---- */
.risk { font: 500 11.5px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.risk.high { background: var(--fail-soft); color: var(--fail); } .risk.med { background: var(--warn-soft); color: var(--warn); } .risk.low { background: var(--pass-soft); color: var(--pass); }
blockquote.quote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--line-strong); background: var(--surface); border-radius: 0 8px 8px 0; font-size: 15px; color: var(--ink-2); max-width: 98ch; }
blockquote.quote span { display: block; margin-top: 6px; font: 400 12px/1.4 var(--mono); color: var(--muted); }

/* ---- SN61 additions ---- */
.s-main { background: var(--teal); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart-grid .brow, .chart-grid .baxis { grid-template-columns: 190px minmax(0, 1fr); }
.chart-grid .bars { gap: 9px; }
.rare { font: 500 10.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); border-radius: 4px; padding: 3px 5px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.big { font: 500 clamp(40px, 6vw, 64px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.verdict { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; display: grid; gap: 12px; box-shadow: inset 3px 0 0 var(--teal); }
.verdict p { font-size: 16.5px; color: var(--ink-2); }
.verdict b { color: var(--ink); }
ul.plain { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; max-width: 96ch; }
.status { font: 500 11.5px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.status.live { background: var(--pass-soft); color: var(--pass); } .status.gone { background: var(--grid); color: var(--muted); } .status.rej { background: var(--fail-soft); color: var(--fail); }
.src { font: 400 12.5px/1.6 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
/* line chart: an SVG plot stretched to the box (non-scaling strokes) with HTML labels, so text never scales;
   one series, recessive grid, event markers named in text, crosshair + tooltip (lchart.js) */
.lchart { position: relative; height: 260px; margin: 40px 6px 26px 58px; outline: none; touch-action: pan-y; }
.lchart:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }
.lchart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lchart .grid line { stroke: var(--grid); stroke-width: 1; }
.lchart .base { stroke: var(--line-strong); stroke-width: 1; }
.lchart .series { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lchart .area { fill: var(--teal); opacity: 0.08; }
.lchart .ev line { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.lchart .yl { position: absolute; left: -58px; width: 50px; text-align: right; transform: translateY(-50%); font: 400 11px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.lchart .xl { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); font: 400 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.lchart .evl { position: absolute; font: 500 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap; padding-left: 4px; }
.lchart .evl.r0 { top: -16px; } .lchart .evl.r1 { top: -32px; }
.lchart .evl.end { transform: translateX(-100%); padding: 0 4px 0 0; }
.lchart .cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-2); pointer-events: none; }
.lchart .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); pointer-events: none; }
@media (max-width: 640px) { .lchart { height: 200px; margin-left: 50px; } .lchart .yl { left: -50px; width: 44px; } }
@media (max-width: 980px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .chart-grid .brow, .chart-grid .baxis { grid-template-columns: minmax(0, 1fr); } }
/* room right of every bar track for the value label of a full-length bar */
.btrack, .baxis .ticks { margin-right: 46px; }
.lchart { margin-top: 58px; }
.lchart .evl.r2 { top: -48px; }
@media (max-width: 640px) { .lchart .xl.mid { display: none; } }