/* Analytics pages: styles on top of style.css (written by the analytics work; uses the tokens defined in style.css). */

/* small inline bars (funnels, rates): colours only through the tokens, so dark mode follows */
.an-bar { display: block; width: 100%; max-width: 160px; height: 10px; }
.an-bar rect.track { fill: var(--surface-2); }
.an-bar rect.fill { fill: var(--accent); }
.an-bar rect.fill.good { fill: var(--good); }
.an-bar rect.fill.warn { fill: var(--warn); }
.an-bar rect.fill.bad { fill: var(--bad); }
.an-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* cohort cells */
.an-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-cell .an-n { display: block; color: var(--muted); font-size: 12px; }
.an-pending { color: var(--muted); font-size: 12px; white-space: nowrap; }
.an-notes { font-size: 13px; margin: 6px 0 12px; padding-left: 22px; max-width: 80ch; }
.an-notes li { margin: 2px 0; }
.an-small { color: var(--warn); font-size: 12px; }
.an-up { color: var(--good); }
.an-down { color: var(--bad); }
.an-sub td:first-child { padding-left: 22px; color: var(--muted); }

/* reports and the night agent */
.an-report { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; max-width: 80ch; }
.an-insights { display: grid; gap: 12px; margin: 0 0 16px; }
.an-insight { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  min-width: 0; }
.an-insight .an-claim { font-weight: 600; overflow-wrap: anywhere; }
.an-insight p { margin: 6px 0; overflow-wrap: anywhere; }
.an-insight .an-meta { color: var(--muted); font-size: 13px; }
.an-marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.an-marks form { margin: 0; }
.an-marks button.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.an-costline { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.an-form { max-width: 640px; }
.an-form label { display: block; margin: 12px 0 4px; font-weight: 500; }
.an-form input, .an-form select { width: 100%; max-width: 360px; }
.an-form .an-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.an-form .an-row > div { flex: 1 1 140px; min-width: 0; }
.an-target input { width: 5.5em; }
.an-target input.an-note { width: 100%; max-width: 360px; }
.an-section { margin-top: 28px; }
.an-kpi { min-width: 12rem; }

/* ---------- Charts (Overview, Versions): Chart.js reads these tokens, so light and dark both follow ----------
   Categorical slots 1-3 (accent, blue, aqua) and the ordinal blue ramp were checked with the dataviz skill's
   validate_palette.js on the dashboard's own surfaces (light #FFFFFF, dark #30302E), 2026-11-06: every hard gate
   passes in both modes; light aqua is under 3:1 on white, so its charts keep a legend and a numbers view. The
   context grey (old version, normal, yesterday) and the band are de-emphasis, not series. */
:root {
  --viz-1: #D97757; --viz-2: #2a78d6; --viz-3: #1baf7a;
  --viz-ctx: #8F8C83; --viz-band: rgba(107, 106, 99, .13); --viz-grid: #ECEAE2; --viz-axis: #D6D3C7;
  --viz-o1: #86b6ef; --viz-o2: #5598e7; --viz-o3: #2a78d6; --viz-o4: #1c5cab; --viz-o5: #104281;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-1: #d26f4e; --viz-2: #3987e5; --viz-3: #199e70;
    --viz-ctx: #8A877F; --viz-band: rgba(169, 166, 156, .14); --viz-grid: #3A3A37; --viz-axis: #55534E;
    --viz-o1: #256abf; --viz-o2: #3987e5; --viz-o3: #6da7ec; --viz-o4: #9ec5f4; --viz-o5: #cde2fb;
  }
}
:root[data-theme="dark"] {
  --viz-1: #d26f4e; --viz-2: #3987e5; --viz-3: #199e70;
  --viz-ctx: #8A877F; --viz-band: rgba(169, 166, 156, .14); --viz-grid: #3A3A37; --viz-axis: #55534E;
  --viz-o1: #256abf; --viz-o2: #3987e5; --viz-o3: #6da7ec; --viz-o4: #9ec5f4; --viz-o5: #cde2fb;
}

h2.an-first { margin-top: 8px; }
.an-lede { max-width: 90ch; }
.an-foot { margin-top: 18px; font-size: 13px; }

/* data health: one line of sources, then any incident in words */
.an-health { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.an-health .an-sep { color: var(--border-strong); }
.an-health .notice { flex: 1 1 100%; margin: 6px 0 0; color: var(--text); font-size: 14px; }

/* KPI tiles: label, value, the comparison with its verdict, the n */
.an-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 12px; margin: 0 0 8px; }
.an-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.an-tile p { margin: 0; }
.an-tile-label { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.35; }
.an-tile-value { font: 600 26px/1.2 var(--sans); margin-top: 4px !important; letter-spacing: -.01em; overflow-wrap: anywhere; }
.an-tile-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px !important; }
.an-tile.an-missing .an-tile-value { font-size: 15px; font-weight: 500; color: var(--muted); }
.an-tile .chip { white-space: normal; text-align: left; border-radius: 10px; }

/* chart cards */
.an-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin: 0 0 8px; }
.an-chart { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 10px; box-shadow: var(--shadow); min-width: 0; }
.an-chart.an-wide { grid-column: 1 / -1; }
.an-chart figcaption { font-weight: 600; font-size: 14.5px; line-height: 1.35; margin: 0 0 8px; }
.an-chart figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.an-canvas { position: relative; height: 240px; }
/* a card stretched by a taller neighbour in its row gives the extra height to its chart, never blank space (owner
   2026-11-06: "why in this card so much blank space?") */
.an-chart { display: flex; flex-direction: column; }
.an-chart > .an-canvas { flex: 1 1 0; min-height: 240px; height: auto; }   /* basis 0: Chart.js never feeds its own height back */
.an-chart.an-wide > .an-canvas { min-height: 270px; }
.an-chart > .an-table-view { flex: 1 1 auto; }
/* the hover box: above the plot, never over the data */
.an-tip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .08s;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 12.5px; line-height: 1.3; box-sizing: border-box; }
.an-tip p { margin: 0; }
.an-tip-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; }
.an-tip-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.an-tip-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.an-tip-foot { color: var(--muted); white-space: nowrap; }
.an-chart.an-wide .an-canvas { height: 270px; }
.an-chart-note { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.an-chart-empty { margin: 6px 0 8px; color: var(--muted); font-size: 14px; }
.an-chart > figcaption { position: relative; padding-right: 92px; }
.an-chart > figcaption > .an-cap-tool { position: absolute; right: 0; top: -3px; min-height: 26px; padding: 0 10px;
  font-size: 12px; font-weight: 500; color: var(--muted); }
.an-chart-tools { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.an-chart-tools button { min-height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.an-table-view { overflow: auto; -webkit-overflow-scrolling: touch; }
.an-table-view thead th { position: sticky; top: 0; background: var(--surface, inherit); z-index: 1; }
main .an-table-view table { display: table; font-size: 12.5px; box-shadow: none; }
/* compact: a half-width card shows every column without sideways scrolling (owner 2026-11-06) */
.an-table-view th, .an-table-view td { padding: 5px 7px; white-space: nowrap; }
.an-table-view th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
@media (max-width: 767.98px) {
  .an-charts { grid-template-columns: 1fr; }
  .an-canvas, .an-chart.an-wide .an-canvas, .an-chart > .an-canvas, .an-chart.an-wide > .an-canvas { height: 220px; min-height: 220px; flex: none; }
  .an-chart { padding: 12px 12px 8px; }
  .an-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-tile { padding: 10px 12px; }
  .an-tile-value { font-size: 21px; }
  .an-tile-meta { font-size: 12px; }
}

/* sheets */
.an-sheet td.an-kpi { min-width: 13rem; }

/* Insights: claims in plain words, the change ledger's cards, the owner's optional review */
.an-claims { list-style: none; padding: 0; display: grid; gap: 8px; margin: 8px 0 16px; max-width: 100ch; }
.an-claims li { margin: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.an-claims .chip { margin-right: 4px; }
.an-claim-text { font-weight: 500; overflow-wrap: anywhere; }
.an-claims .an-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.an-quiet li { background: transparent; box-shadow: none; }
.an-quiet .an-claim-text { font-weight: 400; }
.an-claim-line { max-width: 100ch; }
.an-subhead { font-weight: 600; margin: 14px 0 4px; }
.an-review { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.an-review .an-meta { flex: 1 1 100%; }
.an-review input[type="text"] { flex: 1 1 160px; min-width: 0; max-width: 320px; }
.an-review button.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }

/* ---------- Round two: Insights as cards and lists, Day pages, reply threads, Settings' analytics section ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.an-sub1 { margin: -4px 0 18px; font-size: 14px; }
.an-nothing { margin: 6px 0 12px; padding: 14px 16px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); max-width: 80ch; }
.an-chart-line { margin: 6px 0 12px; font-size: 12.5px; max-width: 100ch; }

/* What's new: compact cards (claim, verdict chip, the numbers, how sure, the action, marks, details, thread) */
.an-cards2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 8px; max-width: 100ch; }
.an-card2, .an-dayitem { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.an-card2-head { display: flex; align-items: flex-start; gap: 8px; }
.an-card2-head .chip { flex: none; margin-top: 1px; }
.an-card2-claim { margin: 0; font: 600 15px/1.4 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
.an-card2-body { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-top: 8px; }
.an-card2-body > div { min-width: 0; }
.an-card2-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.an-card2-body .an-card2-nums { margin-top: 0; }
.an-card2 p, .an-dayitem p { margin: 4px 0; overflow-wrap: anywhere; }
.an-card2 .an-meta, .an-dayitem .an-meta { color: var(--muted); font-size: 13px; }
.an-card2-action { font-size: 14px; }
.an-card2 .an-marks { margin-top: 10px; }
.an-spark { flex: none; width: 120px; height: 28px; margin-top: 2px; }
.an-spark polyline { fill: none; stroke: var(--viz-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-card2 details, .an-dayitem details { margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
.an-card2 details > summary, .an-dayitem details > summary { display: list-item; list-style-position: inside; width: fit-content; padding: 3px 0; min-height: 0; font-size: 13px; color: var(--muted); }
.an-card2 details[open] > summary { margin-bottom: 0; }
.an-card2 details.an-thread { margin-top: 0; }
main > details.an-thread { max-width: 100ch; padding: 0 14px; }
main > details.an-thread > summary { font-size: 13.5px; color: var(--muted); }
.an-card2-details dl { margin: 0 0 10px; font-size: 13px; }
.an-card2-details dt { color: var(--muted); font-weight: 600; margin-top: 6px; }
.an-card2-details dd { margin: 0; overflow-wrap: anywhere; }

/* the reports, the days and the rest: one line each */
.an-list { list-style: none; padding: 0; margin: 4px 0 12px; max-width: 100ch; }
.an-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.an-list > li:last-child { border-bottom: 0; }
.an-list > li > a { font-weight: 500; }
.an-list-text { min-width: 0; overflow-wrap: anywhere; }
.an-list-meta { color: var(--muted); font-size: 13px; }
.an-list-wide > li { flex-direction: column; align-items: stretch; }
.an-list-sub { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.an-list-sub b { color: var(--text); font-weight: 600; }
details.an-fold { margin: 14px 0; max-width: 100ch; }
details.an-fold > summary { font-weight: 600; }

/* reply threads */
.an-msgs { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
.an-msg { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); max-width: 70ch; }
.an-msg.an-answer { background: transparent; border: 1px solid var(--border); }
.an-msg p { margin: 0; }
.an-msg-who { color: var(--muted); font-size: 12px; font-weight: 600; }
.an-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.an-reply { display: flex; gap: 8px; align-items: flex-end; margin: 6px 0 10px; }
.an-reply textarea { min-height: 44px; flex: 1 1 auto; max-width: none; }
.an-reply button { flex: none; }

/* Day pages */
.an-crumbs { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; font-size: 14px; }
.an-crumbs span { display: inline-flex; gap: 14px; }
.an-days { display: grid; gap: 10px; margin: 0 0 12px; max-width: 100ch; }
.an-dayitem h2.an-card2-claim { font-size: 15px; }
.an-agentnote { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--viz-1); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.an-also { font-size: 13.5px; margin: 6px 0; }

/* Settings: the analytics switches and forms */
.an-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0 0 12px; }
.settings.an-switch { padding: 14px 18px; max-width: none; }
.an-switch p { margin: 0 0 8px; }
.an-switch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-switch .muted { font-size: 13px; }
.an-mode { font-size: 13.5px; }
.an-lessons { display: grid; gap: 12px; margin: 0 0 12px; max-width: 760px; }
.settings.an-lesson { padding: 6px 18px 14px; }
.settings.an-lesson > form > label { display: block; margin: 12px 0 6px; font-weight: 600; }
.settings.an-lesson form + form { margin-top: 6px; }
form.settings.card + h3, .an-lessons + h3, .an-switch + h3 { margin-top: 26px; }
@media (max-width: 767.98px) {
  .an-cards2 { grid-template-columns: 1fr; }
  .an-card2, .an-dayitem { padding: 12px; }
  .an-spark { width: 84px; }
  .an-reply { flex-direction: column; align-items: stretch; }
}

/* ---------- The rebuilt Overview and Versions (owner 2026-11-06): one card per metric with its number on top,
   sections in the research's order, money as a KPI sheet within geo, the platform switch as a segmented control ---- */
.an-game { margin-top: 8px; }
.an-game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 36px 0 6px; }
.an-game-head h1, .an-game-head h2 { margin: 0; }
#versions .an-game-head { margin-top: 0; }
.an-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.an-seg a { display: inline-flex; align-items: center; min-height: calc(var(--control) - 8px); padding: 0 16px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; }
.an-seg a:hover { color: var(--text); text-decoration: none; }
.an-seg a.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.an-pf[hidden] { display: none; }
.an-pf > .an-health { margin-top: 2px; }
.an-sec { margin: 26px 0 0; }
.an-sec-title { margin: 0 0 10px; font: 600 12px/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.an-sec-title .muted { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
@media (min-width: 1100px) { .an-charts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the number at the top of a chart card */
.an-head { margin: -2px 0 2px; }
.an-head:empty { display: none; }
.an-head p { margin: 0; }
.an-head-main { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.an-big { font: 600 26px/1.15 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.an-head-sub { margin-top: 2px !important; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.an-head-sub .an-up, .an-head-sub.an-up { color: var(--good); }
.an-head-sub .an-down, .an-head-sub.an-down { color: var(--bad); }
.an-head-row { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.an-head-cell { min-width: 0; }
.an-head-label { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.an-head-value { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 1px !important; }
.an-head-value.muted { font-size: 13px; font-weight: 400; }
.an-mid { font: 600 21px/1.2 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.an-chart .chip { white-space: normal; }

/* money within geo: one row per metric, US and non-US side by side */
.an-money .table-wrap { margin-bottom: 4px; }
table.an-kpis { min-width: 520px; }
.an-kpis thead th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.an-kpis tbody th { font-weight: 400; color: var(--text); font-size: 14px; min-width: 15rem; }
.an-kpi-name { display: block; font-weight: 600; }
.an-kpi-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.4; margin-top: 2px; }
.an-kpis td.num { white-space: normal; min-width: 8.5rem; }
.an-kpi-val { display: block; font: 600 19px/1.25 var(--sans); font-variant-numeric: tabular-nums; }
.an-kpi-cmp { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.an-kpi-chip { display: block; margin-top: 4px; }
.an-kpi-missing { color: var(--muted); font-size: 12.5px; }
.an-sheet tr.an-strong > * { font-weight: 600; }
.an-sheet tbody th[scope="row"] { color: var(--text); font-weight: 500; font-size: 14px; }
.an-versions td.num b { font-weight: 600; }
/* Versions: a number with an unfinished day in it (the release day, yesterday, today) carries a small "≈" */
.an-versions abbr.an-est { text-decoration: none; border: 0; cursor: help; color: var(--warn); font-weight: 600; margin-right: 3px; }
.an-est-note { margin: -4px 0 12px; font-size: 13px; }
.an-rollout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 14px; font-size: 14px; }
@media (max-width: 767.98px) {
  .an-game-head { margin-top: 28px; }
  .an-big { font-size: 22px; }
  .an-mid { font-size: 18px; }
  .an-head-row { gap: 8px 18px; }
  table.an-kpis { min-width: 0; }
  .an-kpis tbody th { min-width: 9rem; font-size: 13px; }
  .an-kpis td.num { min-width: 6.5rem; }
  .an-kpi-val { font-size: 16px; }
  .an-kpi-sub { font-size: 11.5px; }
}
/* row names wrap (the shared table rules keep header cells on one line below 1024 px) */
.table-wrap tbody th[scope="row"], main .an-kpis tbody th, main .an-versions tbody th { white-space: normal; }
@media (min-width: 1100px) { .an-charts-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.an-sheet tbody th[scope="row"] { min-width: 7.5rem; }
@media (max-width: 767.98px) {
  .an-head-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px 12px; }
  .an-head-row .an-head-sub.muted { display: none; }
  .an-kpi-explain { display: none; }
}
/* the Versions sheet on a phone: metric, old, new, change (its verdict under it); the sample and the source hidden */
.an-narrow-only { display: none; }
@media (max-width: 767.98px) {
  .an-versions .an-wide-only { display: none; }
  .an-versions .an-narrow-only { display: block; margin-top: 4px; }
  .an-versions .an-kpi-sub { display: none; }
  main .an-versions th, main .an-versions td { padding: 9px 8px; }
  main .an-versions th:first-child, main .an-versions td:first-child { padding-left: 12px; }
  .an-versions .chip { font-size: 11.5px; padding: 1px 8px; }
}
@media (max-width: 767.98px) {
  main .an-sheet thead th { white-space: normal; }
  main .an-sheet th, main .an-sheet td { padding: 8px; }
  main .an-sheet th:first-child, main .an-sheet td:first-child { padding-left: 12px; }
}
@media (max-width: 767.98px) {
  main .an-versions td .chip { white-space: normal; text-align: right; }
  main .an-versions th:nth-child(4), main .an-versions td:nth-child(4) { width: 5.5rem; max-width: 5.5rem; }
}
@media (max-width: 767.98px) {
  main .an-kpis td .chip { white-space: normal; text-align: right; }
  main .an-sheet td.nowrap { white-space: normal; }
}
.an-versions .chip, .an-kpis .chip { border-radius: 10px; }

/* ---------- The version pages (owner 2026-11-06: "possible to open each version at look at results"): the summary,
   each change with its verdict and numbers, the night agent's verdicts, what is still open, new against old ---------- */
.an-vhead { margin-top: 0; }
.an-vhead > a { font-size: 14px; }
h1.an-vtitle { margin: 6px 0 4px; }
.an-vsummary { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.an-change .an-card2-head { align-items: center; }
.an-change h4.an-card2-claim { font-size: 15px; }
.an-impacts { list-style: none; padding: 0; margin: 8px 0 2px; display: grid; gap: 4px; font-size: 14px; max-width: 100ch; }
.an-impacts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 0; margin: 0; }
.an-imp-name { font-weight: 500; overflow-wrap: anywhere; }
.an-imp-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.an-imp-sub { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.an-vmoves { margin-bottom: 12px; }
.an-vfold .an-list > li { gap: 2px; }
.an-vfold .an-impacts { margin-top: 2px; }
.an-list details.an-card2-details { margin: 2px 0 0; padding: 0; border: 0; background: none; }
.an-list details.an-card2-details > summary { display: list-item; list-style-position: inside; width: fit-content;
  padding: 3px 0; min-height: 0; font-size: 13px; color: var(--muted); font-weight: 400; }
.an-list .an-card2-details dl { margin: 0 0 8px; font-size: 13px; }
.an-list .an-card2-details dt { color: var(--muted); font-weight: 600; margin-top: 6px; }
.an-list .an-card2-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .an-impacts { font-size: 13.5px; }
  .an-imp-sub { font-size: 12.5px; }
  .an-vsummary { font-size: 14.5px; }
}
/* the Versions sheet (owner 2026-11-06: "make the sheet more readable", then "I was talking about lines only in the
   header"): each metric's title is a shaded band with no line above or under it, the rows keep their hairlines, a row
   reads "New · US" in plain text, the change with its verdict beside it (under it on a phone) */
main .an-vsheet tbody th, main .an-vsheet tbody td { vertical-align: baseline; }
main .an-vsheet tr.an-group th { padding-top: 8px; padding-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--surface-2); border-bottom: 0; }
main .an-vsheet tbody tr:has(+ tr.an-group) > * { border-bottom: 0; }
main .an-vsheet tbody tr.an-group > th { border-radius: 0; }
/* the hover fills the whole row: the site's rule colours only td, the row's name is a th; no hover on a title band */
@media (hover: hover) {
  main .an-vsheet tbody tr:not(.an-group):hover > th { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
  main .an-vsheet tbody tr.an-group:hover > th { background: var(--surface-2); }
}
main .an-vsheet tbody th.an-kpi { font-weight: 400; }
.an-versions thead .an-th-days { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.an-vsheet .an-group-span { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.an-vsheet .an-cv { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 8px; }
/* the row's normal noise under the change (owner 2026-11-07) */
.an-vsheet .an-cv .an-band { order: 2; flex-basis: 100%; text-align: right; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.an-vsheet .an-cv .an-chg { font-weight: 600; min-width: 3.6em; text-align: right; }
.an-vsheet .an-cv .an-say { order: -1; font-size: 12.5px; white-space: nowrap; }
.an-vsheet td.num.an-flat { color: var(--muted); }
.an-vsheet td.num.an-flat .an-chg { font-weight: 500; }
main .an-vsheet .an-kpi { min-width: 0; }
@media (min-width: 641px) { main .an-vsheet thead th:first-child { width: 30%; } main .an-vsheet thead th.num { width: 18%; }
  main .an-vsheet thead th.num:last-child { width: 34%; } }
@media (max-width: 640px) {
  main .an-vsheet th, main .an-vsheet td { padding: 8px 6px; }
  main .an-vsheet th:first-child, main .an-vsheet td:first-child { padding-left: 12px; }
  main .an-vsheet tr.an-group th { padding-top: 7px; padding-bottom: 7px; }
  .an-vsheet .an-cv { flex-direction: column; align-items: flex-end; gap: 0; }
  .an-vsheet .an-cv .an-say { order: 1; white-space: normal; font-size: 11.5px; text-align: right; }
}
h2.an-vgroup { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-size: 15px; }
.an-change h3.an-card2-claim { font-size: 15px; }
.an-vreports { margin: 18px 0 0; font-size: 13.5px; }
.an-change-why { margin: 6px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.an-vearly { margin: 0 0 10px; color: var(--muted); line-height: 1.5; }
.an-change-bug { margin: 6px 0 0; line-height: 1.5; overflow-wrap: anywhere; color: var(--bad); }