/* GameQuant - site styles.
   Colours live in the tokens below and nowhere else. Three rules:
   1. --brand never encodes a state. It is the mark, navigation, the CTA,
      the ticker badge and the chart line (the line is the subject, not a status).
   2. Direction is --up / --down only, and never by colour alone: always an
      arrow and a signed number. --down is magenta, not red (red sits 19 deg of
      hue from the brand orange and would merge with it in a table).
   3. No yellow. "Stale" is the absence of colour: --text-dim.            */

/* Light is the default page (2026-10-09, reworked after comparing with dashboards the owner likes):
   white panels on a grey page with no outline, lines inside panels kept faint, text a soft
   blue-black instead of near-black, the selected switch and table row tinted with the brand. */
:root {
  --bg:           #F4F6F9;
  --surface:      #FFFFFF;
  --surface-2:    #F4F5F7;
  --border:       #D5DAE1;   /* controls: switches, buttons, chips, fields */
  --rule:         #E6E9ED;   /* lines inside a panel and between sections of a page */
  --panel-border: transparent;   /* a white panel on the grey page needs no outline */
  /* a soft blue-grey shadow lifts it off the page (owner chose this over flat and over a lighter shadow) */
  --panel-shadow: 0 2px 4px rgba(40, 60, 140, 0.04), 0 12px 32px rgba(40, 60, 140, 0.11);
  --panel-shadow-hover: 0 4px 8px rgba(40, 60, 140, 0.06), 0 18px 40px rgba(40, 60, 140, 0.17);
  --icon-bg:      #FFF1E6;   /* the square behind an icon */
  --icon-fg:      #E0540A;   /* 3.4:1 on --icon-bg - icons are graphics, 3:1 is the bar */
  --badge-shadow: 0 6px 16px rgba(254, 96, 3, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --badge-shadow-up: 0 6px 16px rgba(21, 128, 61, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --badge-shadow-down: 0 6px 16px rgba(194, 24, 91, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --btn-shadow: 0 6px 16px rgba(254, 96, 3, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --panel-border-hover: transparent;
  --text:         #1A2230;   /* 16.0:1 on white */
  --text-dim:     #556070;   /*  6.4:1 */
  --text-faint:   #8C95A3;   /*  3.0:1 - 24px+ or non-text only */
  --brand:        #FE6003;   /* fills only on light: a button, the chart line, a badge */
  --brand-hover:  #FF7A2E;
  --brand-active: #E0540A;
  --on-brand:     #0A0C12;   /* text on a brand fill; white fails at 3.05:1 */
  --sel-bg:       #FFF1E6;   /* the selected switch */
  --row-sel:      #FFF7F0;   /* the selected row of a table */
  --link:         #1A2230;   /* a link is text with a brand underline... */
  --link-line:    #FE6003;
  --link-hover:   #C2410C;   /* ...and turns orange under the pointer (5.2:1) */
  --area-top:     0.16;      /* chart fill under the line: fades to nothing at the bottom */
  --area-bottom:  0;

  /* second and third line in a comparison chart. Chosen with a colour-vision
     check against --brand: they stay apart for protan, deutan and tritan
     readers, and avoid the two direction colours below. */
  --series-2:     #0F8A91;
  --series-3:     #4B57C9;

  --up:           #15803D;   /*  5.0:1 */
  --down:         #C2185B;   /*  5.9:1 */
  --neutral:      #6B7383;

  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* small text: notes, labels, tags, switches, axis and table figures. Was a monospace face at
     11 px; the owner found it hard to read, so it is Roboto and 2 px larger (2026-10-06). */
  --small: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --radius: 12px;      /* panels and cards */
  --radius-sm: 8px;    /* buttons, switches, fields, tags */
  --radius-xs: 6px;    /* chips and small boxes */
  --gutter: 32px;
  color-scheme: light;
}

/* Dark: the whole page when chosen, and always the header bar and footer (.theme-dark).
   Unchanged from the original design: outlined panels, orange links, a flat chart fill. */
:root[data-theme="dark"], .theme-dark {
  --bg:           #0A0C12;
  --surface:      #12161D;
  --surface-2:    #1A202A;
  --border:       #262E3A;
  --rule:         #262E3A;
  --panel-border: #262E3A;
  --panel-shadow: none;
  --panel-shadow-hover: none;
  --icon-bg:      #2E1F1A;
  --icon-fg:      #FE6003;
  --badge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --badge-shadow-up: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --badge-shadow-down: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --panel-border-hover: #5F6B7C;
  --text:         #E6E9EF;   /* 16.0:1 */
  --text-dim:     #98A2B3;   /*  7.5:1 */
  --text-faint:   #5F6B7C;   /*  3.6:1 - 24px+ or non-text only */
  --brand:        #FE6003;   /*  6.4:1 */
  --brand-hover:  #FF7A2E;
  --brand-active: #E0540A;
  --sel-bg:       #1A202A;
  --row-sel:      #1A202A;
  --link:         #FE6003;
  --link-line:    currentColor;
  --link-hover:   #FF7A2E;
  --area-top:     0.10;
  --area-bottom:  0.10;
  --series-2:     #19A9B0;
  --series-3:     #5A66D6;
  --up:           #2FBF71;   /*  8.2:1 */
  --down:         #FF4F8B;   /*  6.3:1 */
  --neutral:      #6E7787;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--link); text-decoration-color: var(--link-line); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

h1, h2, h3, p, figure { margin: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--brand); color: var(--on-brand);
  padding: 10px 14px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; color: var(--on-brand); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.notice {
  font-family: var(--small); font-size: 15px; color: var(--text-dim);
  background: var(--surface-2); border-bottom: 1px dashed var(--border);
  padding: 8px var(--gutter); text-align: center;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--border); }
.site-header-in { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; min-height: 44px; }
.logo-q { display: block; }
.logo-q .lg { fill: var(--text); }
.logo-q .lg-o { fill: var(--brand); }
.wordmark { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.wordmark .tld { color: var(--text-faint); }

.site-nav { display: flex; gap: 22px; flex-grow: 1; }
.site-nav a {
  font-size: 15px; text-decoration: none; color: var(--text-dim);
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current] { color: var(--brand); border-bottom-color: var(--brand); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; flex-shrink: 0;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer;
}
/* the same gradient as the icon squares, so the call to action belongs to the page instead of shouting */
.btn { background: linear-gradient(140deg, #FF9A52 0%, var(--brand) 55%, #E4520A 100%); box-shadow: var(--btn-shadow); }
.btn:hover { background: linear-gradient(140deg, #FFAB6B 0%, var(--brand-hover) 55%, #F05E10 100%); color: var(--on-brand); }
.btn:active { background: var(--brand-active); box-shadow: none; }

/* ── page ───────────────────────────────────────────────────────────────── */

.main { display: flex; flex-direction: column; gap: 26px; padding-top: 30px; padding-bottom: 56px; flex: 1 0 auto; width: 100%; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--small); font-size: 14px; color: var(--text-dim);
}
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs .here { color: var(--text); }

.app-head { display: flex; align-items: flex-start; gap: 20px; }
.app-head-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app-head h1 { font-size: 31px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }

.app-icon { width: 76px; height: 76px; flex-shrink: 0; display: block; border-radius: 17px; border: 1px solid var(--rule); background: var(--surface-2); }
.app-icon-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 31px; font-weight: 700; color: var(--text-dim);
}

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dev { font-size: 15px; color: var(--text-dim); }
.chip {
  font-family: var(--small); font-size: 14px; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); padding: 3px 9px;
  white-space: nowrap;
}
.chip-ticker { font-weight: 500; color: var(--on-brand); background: var(--brand); border-color: var(--brand); }

/* descriptions at the top of a page run the full width of the content below them (owner, 2026-10-09) */
.lede { display: flex; flex-direction: column; gap: 10px; }
.lede p { font-size: 18px; line-height: 1.55; }
.lede .tracked { font-family: var(--small); font-size: 15px; color: var(--text-dim); }

/* ── filters ────────────────────────────────────────────────────────────── */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}
.filter { display: flex; flex-direction: column; gap: 6px; }
.filter-label, .tile-label, .eyebrow, table.data thead th {
  font-family: var(--small); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.seg { display: flex; }
.seg a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 52px; padding: 0 14px;
  font-family: var(--small); font-size: 16px; text-decoration: none;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); margin-left: -1px;
}
.seg a:first-child { margin-left: 0; }
.seg a:hover { color: var(--text); background: var(--surface-2); }
.seg a[aria-current] { color: var(--text); background: var(--sel-bg); box-shadow: inset 0 -2px 0 var(--brand); }
.asof { margin-left: auto; font-family: var(--small); font-size: 14px; color: var(--text-dim); }

/* ── tiles ──────────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.tile {
  background: var(--surface); border: 1px solid var(--panel-border);
  padding: 20px; display: flex; flex-direction: column; gap: 11px; min-width: 0;
}
/* Label, value and foot of neighbouring tiles share their rows, so the big numbers stay on one
   line even when one label ("Rank - US - Top Free - Health & Fitness") wraps and the others do not. */
@supports (grid-template-rows: subgrid) {
  .tile { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 11px; align-content: start; }
}
.tile-value { font-size: 39px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tile-none { color: var(--text-dim); }
.tile-unit { font-size: 19px; font-weight: 500; color: var(--text-dim); margin-left: 8px; letter-spacing: 0; }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 20px; }
.foot-note { font-size: 13px; color: var(--text-dim); }
.rating-stars { display: block; flex: none; }
.rating-stars .star-off { fill: var(--text-faint); }   /* lighter than in the distribution: the partly filled star must read as partly filled */

.delta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--small); font-size: 16px; white-space: nowrap; }
.delta .arrow { display: block; }
.delta.up { color: var(--up); }
.delta.up .arrow { fill: var(--up); }
.delta.down { color: var(--down); }
.delta.down .arrow { fill: var(--down); }
.delta.flat { color: var(--text-dim); }
.delta.flat .arrow { fill: var(--text-dim); }

/* ── cards & tables ─────────────────────────────────────────────────────── */

.card { background: var(--surface); border: 1px solid var(--panel-border); padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card-flush { padding: 0; gap: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.card-flush .card-head { padding: 20px 24px 14px; }
.card-head h2 { font-size: 17px; font-weight: 500; }
.card-note { font-family: var(--small); font-size: 14px; color: var(--text-dim); }

/* position: relative keeps the visually-hidden .sr labels inside the scroller;
   without it they escape the clip and widen the whole page on phones. */
.table-scroll { overflow-x: auto; position: relative; }
table.data {
  width: 100%; border-collapse: collapse;
  font-family: var(--small); font-size: 16px; font-variant-numeric: tabular-nums;
}
table.data thead tr { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
table.data th, table.data td { padding: 12px 16px; text-align: left; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { padding-left: 24px; }
table.data th:last-child, table.data td:last-child { padding-right: 24px; }
table.data tbody tr { border-bottom: 1px solid var(--rule); }
table.data tbody tr:last-child { border-bottom: 0; }
table.data tbody th { font-weight: 400; }
table.data tbody th a { color: var(--text); text-decoration: none; }
table.data tbody th a:hover { color: var(--link-hover); }
/* the country the tiles and the chart show, marked like the selected switch above */
table.data tbody tr.is-active { background: var(--row-sel); }
table.data tbody tr.is-active > :first-child { box-shadow: inset 3px 0 0 var(--brand); }
table.data tbody tr.is-active th a { font-weight: 500; }
table.data .num { text-align: right; }
table.data .num .delta { justify-content: flex-end; }
table.data .txt { font-family: var(--sans); font-size: 15px; }
.dim { color: var(--text-dim); }

table.compare .txt { white-space: normal; min-width: 190px; }
table.compare tbody th { font-family: var(--small); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

.app-link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 15px; font-weight: 500; }
.app-link .app-icon { width: 28px; height: 28px; border-radius: 7px; font-size: 14px; }
.app-nolink { color: var(--text-dim); }
.nolink-note { flex: none; font-family: var(--small); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--text-dim); border: 1px solid var(--border); padding: 1px 6px; }

.locked {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  border-top: 1px dashed var(--border); padding: 18px 24px;
}
.locked p { font-size: 15px; color: var(--text-dim); max-width: 70ch; }
.locked strong { color: var(--text); font-weight: 500; }

/* ── rank chart (markup from app/charts.py) ─────────────────────────────── */

.rank-chart { width: 100%; height: auto; display: block; overflow: visible; }
.rank-chart.narrow { display: none; }
.rank-chart .grid line { stroke: var(--rule); stroke-width: 1; }
.rank-chart .axis text { font-family: var(--small); font-size: 14px; fill: var(--text-dim); }
/* the fill is a gradient defined in each chart (charts.py); its two stops take the brand colour */
.rank-chart .ga-top { stop-color: var(--brand); stop-opacity: var(--area-top); }
.rank-chart .ga-bottom { stop-color: var(--brand); stop-opacity: var(--area-bottom); }
.rank-chart .series { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rank-chart .lone { fill: var(--brand); }
.rank-chart .dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.rank-chart .end-label {
  font-family: var(--sans); font-size: 15px; font-weight: 700; fill: var(--text);
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round;
}
.rank-chart .empty { font-family: var(--sans); font-size: 15px; fill: var(--text-dim); }
.rank-chart .hit { fill: transparent; }
.rank-chart .tip { visibility: hidden; pointer-events: none; }
.rank-chart .pt:hover .tip { visibility: visible; }
.rank-chart .cross { stroke: var(--text-faint); stroke-width: 1; }
.rank-chart .box { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.rank-chart .tip-v { font-family: var(--sans); font-size: 15px; font-weight: 700; fill: var(--text); }
.rank-chart .tip-d { font-family: var(--small); font-size: 14px; fill: var(--text-dim); }

/* comparison chart: up to three lines; colour is never the only cue (legend, end labels, readout) */
.key { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.key.s2, .rank-chart .series.s2 { stroke: var(--series-2); }
.key.s3, .rank-chart .series.s3 { stroke: var(--series-3); }
.rank-chart .dot.s2, .rank-chart .lone.s2 { fill: var(--series-2); }
.rank-chart .dot.s3, .rank-chart .lone.s3 { fill: var(--series-3); }
.rank-chart .lead { stroke: var(--text-faint); stroke-width: 1; }
.rank-chart.multi .end-label { font-size: 14px; text-anchor: start; }
.rank-chart .end-name { font-weight: 400; font-size: 13px; fill: var(--text-dim); }
.rank-chart .tip-n { font-family: var(--sans); font-size: 13px; fill: var(--text-dim); }
.rank-chart.multi .tip-v { font-size: 14px; }

.chart-actions { margin: 12px 0 0; display: flex; justify-content: flex-end; }
.chart-dl { font-family: var(--small); font-size: 15px; color: var(--text-dim); text-decoration: none; border: 1px solid var(--border); padding: 6px 10px; }
.chart-dl:hover { color: var(--text); border-color: var(--text-faint); }
/* credit and embed code under the chart */
.cite { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cite-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cite-label { flex: none; width: 58px; font-family: var(--small); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.cite-text {
  flex: 1; min-width: 0; font-family: var(--small); font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--rule); padding: 7px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all;
}
button.chart-dl { background: none; cursor: pointer; flex: none; }
.copy-btn.done { color: var(--text); border-color: var(--text-faint); }
.cite-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cite-note { font-family: var(--small); font-size: 14px; color: var(--text-dim); }

.chart-figure { margin: 10px 0; padding: 20px; background: var(--surface); border: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.prose .chart-title { color: var(--text); font-weight: 700; font-size: 17px; }
.chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.prose .chart-legend { padding-left: 0; flex-direction: row; }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.legend-key { flex: none; overflow: visible; }
.legend-val { font-family: var(--small); font-size: 15px; color: var(--text-dim); }
.chart-figure figcaption { font-size: 14px; color: var(--text-dim); }
.chart-data summary { cursor: pointer; font-family: var(--small); font-size: 15px; color: var(--text-dim); }
.chart-data summary:hover { color: var(--text); }
.chart-data .table-scroll { margin-top: 10px; max-height: 320px; overflow-y: auto; border: 1px solid var(--rule); }


/* ── home ───────────────────────────────────────────────────────────────── */

.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 0 10px; min-width: 0; }
.hero h1 { font-size: 45px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; max-width: 22ch; }
.hero-small { padding-top: 14px; }
.hero-small h1 { font-size: 35px; }
.hero-sub { font-size: 19px; color: var(--text-dim); max-width: 60ch; }
.hero .btn { margin-top: 6px; }

/* one panel, three columns split by a line */
.pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--panel-border); padding: 22px 0;
}
.pillar { padding: 2px 24px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--rule); }
.pillar:first-child { border-left: 0; }
.pillar h2 { font-size: 17px; font-weight: 700; }
.pillar p { font-size: 15px; color: var(--text-dim); }

/* ── footer ─────────────────────────────────────────────────────────────── */

/* dark in both themes, like the header bar (.theme-dark on the element) */
.site-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--border); }
.site-footer-in { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; padding-bottom: 36px; font-size: 14px; color: var(--text-dim); }
.site-footer-in p { max-width: 90ch; }
.site-footer strong { color: var(--text); font-weight: 500; }
.site-footer .fine { font-family: var(--small); font-size: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; }
.footer-nav a { color: var(--text-dim); text-decoration: none; padding: 4px 0; }
.footer-nav a:hover { color: var(--text); text-decoration: underline; }

/* ── long-form pages: about, privacy, terms ───────────── ────────────────── */

.prose { display: flex; flex-direction: column; gap: 14px; max-width: 76ch; line-height: 1.65; }
.prose h1 { font-size: 35px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.prose h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-top: 16px; }
.prose p, .prose li { color: var(--text-dim); }
.prose .lede-text, .prose strong { color: var(--text); }
.prose strong { font-weight: 500; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prose .prose-note { font-family: var(--small); font-size: 15px; }

/* ── insights ───────────────────────────────────────────────────────────── */

.insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.insight-list li { padding: 16px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.insight-list li:first-child { border-top: 0; padding-top: 0; }
.insight-list li:last-child { padding-bottom: 0; }
.insight-link { color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-decoration: none; }
.insight-link:hover { color: var(--link-hover); text-decoration: underline; }
.insight-lede { color: var(--text-dim); max-width: 76ch; }
.insight-meta { font-family: var(--small); font-size: 15px; color: var(--text-dim); }

/* Articles use the full width for charts and tables; running text keeps a readable line
   (about 75 characters), the way data-led newsrooms set it. */
.prose.article { max-width: none; }
.article > h1, .article > h2, .article > h3, .article > p, .article > ul, .article > ol,
.article > blockquote { max-width: 76ch; }
.article p, .article li { color: var(--text); }
.article .prose-note, .article .card-note, .article .article-foot, .article figcaption { color: var(--text-dim); }
.article h1 { max-width: 20em; }
.article .lead { font-size: 20px; line-height: 1.55; color: var(--text); }
.article h3 { font-size: 18px; font-weight: 700; margin: 8px 0 0; }
.article blockquote { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--border); color: var(--text-dim); }
.article img { max-width: 100%; height: auto; display: block; }
.article table.data { font-size: 15px; }
.article .table-scroll { border: 1px solid var(--panel-border); background: var(--surface); }
.article-foot { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; }
.mail-cta h2 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }

/* ── contact form ───────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 15px; font-weight: 500; }
.field .optional { font-family: var(--small); font-size: 14px; font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.field-hint { font-size: 14px; color: var(--text-dim); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 0;
  font-family: var(--sans); font-size: 17px; line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-faint); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--brand); }
/* an invalid field is marked by a thicker border and a message, not by colour */
.field.has-error input, .field.has-error textarea { border-color: var(--text); border-width: 2px; padding: 9px 11px; }
.field-error, .form-error { font-size: 15px; color: var(--text); font-weight: 500; }
.field-error::before, .form-error::before { content: "! "; font-family: var(--small); }
.form-error { border: 1px solid var(--text); padding: 12px 14px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-note { font-size: 14px; color: var(--text-dim); }
.mail-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.mail-cta p { color: var(--text-dim); max-width: 62ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* a view being swapped in (static/js/view.js) */
#main[aria-busy="true"] { opacity: 0.6; transition: opacity 0.15s linear 0.15s; }


/* ── small screens ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .site-header-in { gap: 14px; }
  .site-nav { gap: 14px; }
  .btn { padding: 0 14px; }
  .app-head { gap: 14px; }
  .app-head h1 { font-size: 25px; }
  .app-icon { width: 60px; height: 60px; border-radius: 13px; }
  .lede p { font-size: 17px; }
  .asof { margin-left: 0; width: 100%; }
  .card { padding: 16px; }
  .card-flush { padding: 0; }
  .card-flush .card-head { padding: 16px 16px 12px; }
  table.data th:first-child, table.data td:first-child { padding-left: 16px; }
  table.data th:last-child, table.data td:last-child { padding-right: 16px; }
  .locked { padding: 16px; }
  .hero h1 { font-size: 33px; }
  .hero-small h1 { font-size: 29px; }
  .rank-chart.wide { display: none; }
  .rank-chart.narrow { display: block; }

  /* the free/licensed comparison stacks instead of scrolling sideways */
  table.data.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.data.compare, table.data.compare tbody, table.data.compare tbody tr,
  table.data.compare tbody th, table.data.compare tbody td { display: block; }
  table.data.compare tbody tr { padding: 14px 16px; }
  table.data.compare tbody th, table.data.compare tbody td { padding: 0; min-width: 0; white-space: normal; }
  table.data.compare tbody th { color: var(--text); }
  table.data.compare tbody td { margin-top: 10px; }
  table.data.compare tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--small); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  }
}

@media (max-width: 420px) {
  .wordmark .tld { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .seg a, .site-nav a { transition: background-color 0.12s, color 0.12s; }
}

/* ── v3: lists, related apps, home sections ─────────────────────────────── */

/* A long publisher or app name must not push the table past its card. */
.clip { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
a.quiet { color: var(--text); text-decoration: none; }
a.quiet:hover { color: var(--link-hover); }
a.chip { text-decoration: none; }
a.chip:hover { color: var(--text); border-color: var(--text-faint); }
a.chip-ticker:hover { color: var(--on-brand); background: var(--brand-hover); border-color: var(--brand-hover); }
a.dev { text-decoration: none; }
a.dev:hover { color: var(--text); }
a.card-note { text-decoration: none; }
a.card-note:hover { color: var(--text); }

.page-head { display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: 31px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.lede-text { font-size: 18px; line-height: 1.55; }

.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 14px; align-items: start; }
/* Home lists: fixed columns. A long name or chart label is cut with "…" inside its column instead of
   widening the table past its card (which showed a scroll bar). */
table.data.mini { table-layout: fixed; width: 100%; }
table.data.mini .col-rank { width: 84px; }
table.data.mini th:first-child, table.data.mini td:first-child { padding-right: 8px; }
table.data.mini .col-change { width: 100px; }
table.data.mini .col-chart { width: 30%; }
table.data.mini th, table.data.mini td { overflow: hidden; text-overflow: ellipsis; }
table.data.mini .app-link { display: flex; min-width: 0; }
table.data.mini .clip { display: block; max-width: none; min-width: 0; }
/* chart column: the country as a flag first, so the part cut off is never the country */
table.data.mini .chart-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* home: the pitch and, beside it, the coverage figures in a panel; stacked on narrow screens */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 490px); gap: 24px 48px; align-items: center; }
.stats { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; background: var(--surface); border: 1px solid var(--panel-border); padding: 4px 24px; }
/* every row shares the two columns, so the labels line up whatever the width of the figures */
.stat { grid-column: 1 / -1; display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
@supports (grid-template-columns: subgrid) { .stat { grid-template-columns: subgrid; } }
.stat:first-child { border-top: 0; }
.stat-value { font-size: 31px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.stat-label { font-size: 15px; color: var(--text-dim); }
/* latest insights: a card per article, the whole card is the link */
.insight-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.insight-card {
  height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--panel-border); color: var(--text); text-decoration: none;
}
.insight-card:hover { color: var(--text); border-color: var(--text-faint); }
.insight-card-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.insight-card:hover .insight-card-title { color: var(--link-hover); }
.insight-card-lede { flex: 1; font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.insight-card-date { font-family: var(--small); font-size: 14px; color: var(--text-dim); }

.taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; text-decoration: none;
}
.tag:hover { color: var(--text); border-color: var(--text-faint); background: var(--surface-2); }
.tag-count { font-family: var(--small); font-size: 14px; color: var(--text-dim); }
.tag-static, .tag-static:hover { cursor: default; border-color: var(--border); background: var(--bg); }

.related { display: flex; flex-direction: column; gap: 14px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.card-link {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--panel-border); color: var(--text); text-decoration: none;
}
.card-link:hover { color: var(--text); border-color: var(--text-faint); background: var(--surface-2); }
.card-link .app-icon { width: 40px; height: 40px; border-radius: 9px; font-size: 17px; }
.card-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-link-title { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-link-meta { font-family: var(--small); font-size: 14px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .clip { max-width: 170px; }
  .nolink-note { display: none; }   /* no room beside the 7-day column; the dim name still marks it */
  .page-head h1 { font-size: 25px; }
  .prose h1 { font-size: 29px; }
  .lede-text { font-size: 17px; }
  .stat-value { font-size: 27px; }
}

/* Phones and narrow tablets: brand and the CTA on the first row, navigation and the theme switch
   on their own row below (one row does not fit under 860 px since the switch was added). */
@media (max-width: 860px) {
  .site-header-in { flex-wrap: wrap; row-gap: 0; column-gap: 14px; }
  .brand { flex-grow: 1; }
  .site-nav { order: 3; flex-basis: calc(100% - 58px); gap: 22px; }
  .theme-toggle { order: 4; width: 40px; height: 40px; margin: 6px 0 8px; }
}

/* Phones: the movers lists keep rank, app and change; the chart name is on the app page. */
@media (max-width: 720px) {
  table.data.mini .col-wide { display: none; }
}

/* ── rating distribution: five bars, every value printed next to its bar ── */
.stars { width: 100%; max-width: 640px; border-collapse: collapse; font-family: var(--small); font-size: 16px; font-variant-numeric: tabular-nums; }
.stars th { font-weight: 400; color: var(--text-dim); text-align: left; white-space: nowrap; padding: 7px 16px 7px 0; width: 1%; }
.stars-pct { text-align: right; white-space: nowrap; padding: 7px 0 7px 16px; width: 1%; min-width: 48px; }
.stars-bar { width: 100%; padding: 7px 0; }
.stars-bar svg { display: block; width: 100%; height: 10px; border-radius: 2px; overflow: hidden; }
.star-row { display: block; }
.star-on { fill: var(--brand); }
.star-off { fill: var(--border); }
.bar-track { fill: var(--surface-2); }
.bar-fill { fill: var(--brand); }

/* ── search ─────────────────────────────────────────────────────────────── */

.site-search { flex: 0 1 240px; min-width: 0; }
.site-search input, .search-form input {
  width: 100%; height: 44px; padding: 0 14px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 0; font-family: var(--sans); font-size: 16px;
}
.site-search input::placeholder, .search-form input::placeholder { color: var(--text-dim); opacity: 1; }
.site-search input:focus, .search-form input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.search-link { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-dim); border: 1px solid var(--border); }
.search-link:hover { color: var(--text); }
/* light / dark switch, last in the header; shown only when the script that drives it has run */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  padding: 0; background: none; color: var(--text-dim); border: 1px solid var(--border); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--text); border-color: var(--text-faint); }
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.search-link svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* under this width the field does not fit next to the navigation: an icon leads to the search page */
@media (max-width: 1000px) {
  .site-search { display: none; }
  .search-link { display: inline-flex; }
}
.search-form { display: flex; gap: 10px; max-width: 640px; margin-top: 16px; }
.search-form input { flex: 1; min-width: 0; height: 48px; }
.search-form .btn { flex: none; }
.search-empty { margin: 0; padding: 20px; color: var(--text-dim); }
.hit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hit-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.hit-list li:first-child { border-top: 0; }
.hit-list a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hit-list a:hover { color: var(--link-hover); }

/* ── embed: the chart inside a frame on another site (always dark, see embed.html) ── */
body.embed { min-height: 0; font-size: 15px; }
.embed-in { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; }
.embed-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: center; }
.embed-app { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.embed-app .app-icon { width: 36px; height: 36px; border-radius: 9px; }
.embed-app .app-icon-ph { font-size: 17px; }
.embed-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-app:hover .embed-name { color: var(--link-hover); }
.embed-list { grid-column: 1; font-family: var(--small); font-size: 14px; color: var(--text-dim); padding-left: 46px; }
.embed-rank { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.embed-rank-v { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.embed-rank .delta { font-size: 14px; }
.embed-rank-none { font-family: var(--small); font-size: 13px; color: var(--text-dim); text-align: right; max-width: 12em; }
.embed-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.embed .seg a { min-height: 32px; min-width: 0; padding: 0 12px; font-size: 14px; }
.embed-asof { font-family: var(--small); font-size: 13px; color: var(--text-dim); }
.embed .rank-chart.wide { display: block; }
.embed .rank-chart.narrow { display: none; }
.embed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--small); font-size: 13px; }
.embed-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 700; }
.embed-more { color: var(--link); text-align: right; }
.embed-missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100vh; color: var(--text-dim); }
@media (max-width: 480px) {
  .embed-in { padding: 12px 12px 10px; gap: 8px; }
  .embed-list { padding-left: 0; grid-column: 1 / span 2; grid-row: 2; }
  .embed-rank { grid-row: 1; flex-direction: row; align-items: center; gap: 8px; }
  .embed-name { font-size: 16px; }
  .embed-rank-v { font-size: 22px; }
  .embed-asof { display: none; }
  .embed .rank-chart.wide { display: none; }
  .embed .rank-chart.narrow { display: block; }
  .embed-more { font-size: 12px; }
}


/* country flags (macro flag in _macros.html) */
.flag { display: inline-block; flex: none; width: 18px; height: 12px; vertical-align: -0.08em; box-shadow: 0 0 0 1px var(--rule); }
.seg a .flag { margin-right: 7px; }
table.data tbody th .flag { margin-right: 10px; }
.embed-list .flag { margin-right: 6px; }

/* home on tablets and phones: the figures panel goes under the pitch, the three columns stack */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pillar { border-left: 0; border-top: 1px solid var(--rule); padding: 16px 20px; }
  .pillar:first-child { border-top: 0; padding-top: 2px; }
  .pillars { padding: 18px 0; grid-template-columns: minmax(0, 1fr); }
  .stats { padding: 0 20px; }
  .insight-cards { grid-template-columns: minmax(0, 1fr); }
}

/* panels: a soft shadow on the light page (owner, 2026-10-09; square corners kept), none on dark */
.card, .tile, .stats, .pillars, .insight-card, .card-link, .chart-figure, .article .table-scroll { box-shadow: var(--panel-shadow); }
.insight-card:hover, .card-link:hover { box-shadow: var(--panel-shadow-hover); border-color: var(--panel-border-hover); }

/* ── rounded corners (2026-10-09, owner's choice: "C") ───────────────────── */
.card, .tile, .stats, .pillars, .insight-card, .card-link, .chart-figure, .article .table-scroll { border-radius: var(--radius); }
.card-flush { overflow: hidden; }   /* tables reach the edge: the corners must clip them */
.btn, .tag, .search-link, .theme-toggle, .site-search input, .search-form input,
.field input, .field select, .field textarea { border-radius: var(--radius-sm); }
.seg a:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.seg a:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.chip, .nolink-note, .cite-text, .chart-dl, .chart-data .table-scroll { border-radius: var(--radius-xs); }
.flag { border-radius: 2px; }
.rank-chart .box { rx: 6px; }

/* ── icons (app/icons.py) ─────────────────────────────────────────────────── */
.ic { display: inline-block; flex: none; }
.ic-ph { fill: currentColor; }                      /* Phosphor duotone: filled shapes */
.ic-lu { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Coloured square with a solid white glyph (owner chose it, 2026-10-10, over a pale square and a dark one:
   to switch, give .ic-badge background: var(--icon-bg); color: var(--icon-fg); box-shadow: none). */
.ic-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px; color: #FFFFFF;
  background: linear-gradient(140deg, #FF9A52 0%, var(--brand) 55%, #E4520A 100%);
  box-shadow: var(--badge-shadow);
}
.ic-badge-sm { width: 32px; height: 32px; border-radius: 9px; }
/* section headings: a small square of the same kind; climbers and drops take the direction colours */
h2.h-ic { display: flex; align-items: center; gap: 11px; }
.ic-badge-xs { width: 30px; height: 30px; border-radius: 8px; }
.ic-badge-up { background: linear-gradient(140deg, #3CC27A 0%, #1E9A55 55%, #15803D 100%); box-shadow: var(--badge-shadow-up); }
.ic-badge-down { background: linear-gradient(140deg, #F0609A 0%, #D63371 55%, #C2185B 100%); box-shadow: var(--badge-shadow-down); }
.tag .ic { color: var(--text-dim); }
/* home figures: icon, figure and label in three shared columns */
.stats { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 16px; }
.stat { grid-template-columns: 48px 10rem minmax(0, 1fr); align-items: center; }
@supports (grid-template-columns: subgrid) { .stat { grid-template-columns: subgrid; } }
.pillar .ic-badge { margin-bottom: 6px; }
.insight-card-kind { display: flex; align-items: center; gap: 10px; font-family: var(--small); font-size: 14px; color: var(--text-dim); }
@media (max-width: 760px) {
  /* phones: the icon beside the heading, not above it, so the three columns stay short */
  .pillar { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
  .pillar .ic-badge { grid-row: span 2; margin-bottom: 0; }
  .stats .ic-badge { width: 40px; height: 40px; border-radius: 10px; }
  .stats { column-gap: 12px; }
}
@media (max-width: 720px) {
  /* phones: narrower number columns leave the app name more room */
  table.data.mini .col-rank { width: 64px; }
  table.data.mini .col-change { width: 88px; }
  table.data.mini thead th { letter-spacing: 0.06em; }
  table.data.mini .app-link { gap: 8px; }
}