/* =============================================================
   SkiAllDay — resort pages
   Voxel alpine hero over a cartographic editorial document.
   Rules: hairlines not shadows, tabular numerals, piste colours
   used only to mean piste difficulty, no emoji.
   Theme: light tokens in :root, dark applied by system preference
   unless the reader has explicitly chosen, via [data-theme].
   ============================================================= */

:root {
  color-scheme: light;

  --paper:        #f7f4ee;
  --paper-sunk:   #efeae0;
  --paper-raised: #fffdf9;
  --ink:          #14161a;
  --ink-mid:      #4b5058;
  --ink-soft:     #7d838b;
  --rule:         #ddd7ca;
  --rule-strong:  #bdb5a4;

  --piste-blue:  #2f6db3;
  --piste-red:   #b8382b;
  --piste-black: #23252a;
  --link:        #1a4f8a;
  --brand:       #2997ff;

  --hero-ink:   #101c29;
  --hero-soft:  #2f4559;
  --hero-scrim: linear-gradient(180deg, rgba(247,244,238,.86) 0%, rgba(247,244,238,.56) 24%, rgba(247,244,238,.08) 46%, rgba(247,244,238,0) 62%);

  --vx-sky-top:    #74a8d6;
  --vx-sky-bottom: #d3e4f2;
  --vx-snow:       #ffffff;
  --vx-rock:       #6f8aa6;
  --vx-slope:      #3c5c7e;
  --vx-fore:       #2f4f49;
  --vx-tree:       #1d3a31;
  --vx-trunk:      #332d26;
  --vx-seam:       rgba(255,255,255,.15);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --measure: 68ch;
  --gutter: clamp(18px, 5vw, 48px);
}

/* Dark tokens, shared by "system says dark" and "reader chose dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { color-scheme: dark;
    --paper: #10141a; --paper-sunk: #161b23; --paper-raised: #1a2029;
    --ink: #e8ecf2; --ink-mid: #a9b2be; --ink-soft: #7e8794;
    --rule: #262d38; --rule-strong: #3d4653;
    --piste-blue: #5f9fdf; --piste-red: #e0685a; --piste-black: #c2c9d4;
    --link: #7fb2ea;
    --hero-ink: #eef4fa; --hero-soft: #9db0c6;
    --hero-scrim: linear-gradient(180deg, rgba(9,13,20,.95) 0%, rgba(9,13,20,.92) 30%, rgba(9,13,20,.84) 48%, rgba(9,13,20,.45) 62%, rgba(9,13,20,0) 80%);
    --vx-sky-top: #08111f; --vx-sky-bottom: #1d3551;
    --vx-snow: #dbeaf9; --vx-rock: #4a6b8d; --vx-slope: #22405e;
    --vx-fore: #17322e; --vx-tree: #0f2823; --vx-trunk: #1f1a17; --vx-seam: rgba(0,0,0,.26);
  }
}
:root[data-theme='dark'] { color-scheme: dark;
  --paper: #10141a; --paper-sunk: #161b23; --paper-raised: #1a2029;
  --ink: #e8ecf2; --ink-mid: #a9b2be; --ink-soft: #7e8794;
  --rule: #262d38; --rule-strong: #3d4653;
  --piste-blue: #5f9fdf; --piste-red: #e0685a; --piste-black: #c2c9d4;
  --link: #7fb2ea;
  --hero-ink: #eef4fa; --hero-soft: #9db0c6;
  --hero-scrim: linear-gradient(180deg, rgba(9,13,20,.95) 0%, rgba(9,13,20,.92) 30%, rgba(9,13,20,.84) 48%, rgba(9,13,20,.45) 62%, rgba(9,13,20,0) 80%);
  --vx-sky-top: #08111f; --vx-sky-bottom: #1d3551;
  --vx-snow: #dbeaf9; --vx-rock: #4a6b8d; --vx-slope: #22405e;
  --vx-fore: #17322e; --vx-tree: #0f2823; --vx-trunk: #1f1a17; --vx-seam: rgba(0,0,0,.26);
}

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

body.resort {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.resort a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
.resort a:hover { text-decoration-thickness: 2px; }

/* An anchor styled as a button or a brand is not prose, and must not inherit
   the link colour. `.resort a` is (0,1,1); a bare `.btn-line` is (0,1,0) and
   loses to it, so every one of these was rendering in link blue inside an ink
   border — the brand, the top-bar call to action, the bordered buttons and the
   dark call-to-action button alike. Naming the body class puts them back. */
.resort .topbar-brand, .resort .topbar-cta, .resort .btn-line, .resort .btn-app { color: var(--ink); }
.resort .topbar-cta:hover, .resort .btn-line:hover { color: var(--paper); }
.resort .btn-app { color: var(--ink); }
.resort :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.micro, .rail-title, .crumbs, .metric-label, .chip dt, .xcard-label,
.hut-meta, .source-meta, .qualifier, .theme-date, .eb-unit-label, .map-card-meta {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft);
}
.unit { font-family: var(--sans); font-size: 0.62em; font-weight: 500; color: var(--ink-soft); margin-left: 0.18em; letter-spacing: 0.03em; }
.value-text { font-size: 0.72em; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.875rem;
}
.topbar-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.topbar-brand img { border-radius: 5px; }
.topbar-links { display: flex; gap: 18px; margin-left: auto; }
.topbar-links a { color: var(--ink-mid); text-decoration: none; }
.topbar-links a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.topbar-cta { padding: 7px 15px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.topbar-cta:hover { background: var(--ink); color: var(--paper); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px 6px 10px; background: none; color: var(--ink-mid);
  border: 1px solid var(--rule); font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme-icon { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
:root[data-theme='light'] .theme-icon { background: none; }
:root[data-theme='dark'] .theme-icon { background: currentColor; }

/* ---------- hero ---------- */

.rhero { position: relative; isolation: isolate; }
.rhero-scene { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.voxel { width: 100%; height: 100%; display: block; }
.rhero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hero-scrim); }

.vx--snow   { fill: var(--vx-snow); }
.vx--rock   { fill: var(--vx-rock); }
.vx--slope  { fill: var(--vx-slope); }
.vx--tree   { fill: var(--vx-tree); }
.vx--trunk  { fill: var(--vx-trunk); }
.vx-sky-top { stop-color: var(--vx-sky-top); }
.vx-sky-bottom { stop-color: var(--vx-sky-bottom); }
.vx-seam-line { stroke: var(--vx-seam); stroke-width: 1; }
.vx-layer--far  { opacity: .68; }
.vx-layer--mid  { opacity: .88; }
.vx-layer--near { opacity: 1; }
/* The foreground ridge is forested ground, not another distant snowfield. */
.vx-layer--near .vx--slope { fill: var(--vx-fore); }

.rhero-inner {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(180px, 30vw, 340px);
  color: var(--hero-ink);
}
.crumbs { display: flex; gap: 9px; flex-wrap: wrap; color: var(--hero-soft); margin-bottom: 24px; }
.crumbs a { color: var(--hero-soft); text-decoration: none; }
.crumbs a:hover { color: var(--hero-ink); }
.crumbs [aria-current] { color: var(--hero-ink); }

/* Resort names and the prose about them arrive slash-joined —
   "Fellhorn/Kanzelwand", "Helm/Stiergarten/Rotwand/Kreuzbergpass" — and a
   browser offers no break inside one, so a 387px name in a 338px hero and a
   38-character compound in a 135px metric cell both put the phone page on a
   horizontal scrollbar. Breaking mid-word is the last resort it is meant to be:
   it only applies to a word that cannot fit its line at all. */
.rhero h1, .rhero-place, .metric, .metric-note, .figure-note, .card-note { overflow-wrap: break-word; }

.rhero h1 { margin: 0; font-weight: 400; line-height: 0.92; letter-spacing: -0.03em; }
.rhero-name { display: block; font-size: clamp(2.75rem, 11vw, 6.5rem); }
.rhero-sub { display: block; font-size: clamp(1.35rem, 4.6vw, 2.6rem); font-style: italic; color: var(--hero-soft); margin-top: 0.08em; }
.rhero-place { font-family: var(--sans); font-size: 0.9375rem; color: var(--hero-soft); margin: 18px 0 0; }

/* stat bar sits on the boundary between scene and document */
.statbar {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin;
  background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.chip { flex: 1 0 auto; min-width: 132px; padding: 14px 22px 14px 0; margin-right: 22px; border-right: 1px solid var(--rule); }
.chip:last-child { border-right: 0; margin-right: 0; }
.chip dt { margin-bottom: 3px; }
.chip dd { margin: 0; font-size: 1.375rem; line-height: 1.15; white-space: nowrap; }
.chip--season dd { font-size: 1.1875rem; }
.chip-pre { font-family: var(--sans); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-right: 5px; }
.chip--season { min-width: 176px; }
.chip-note {
  margin: 4px 0 0; font-family: var(--sans); font-size: 0.6875rem; line-height: 1.3;
  color: var(--ink-soft); white-space: nowrap;
}

/* ---------- shell + rail ---------- */

.shell { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; }
@media (min-width: 1040px) { .shell { grid-template-columns: 186px minmax(0, 1fr); gap: 56px; } }

.rail { display: none; }
@media (min-width: 1040px) {
  .rail { display: block; position: sticky; top: 68px; align-self: start; padding-top: 64px; max-height: calc(100vh - 90px); overflow-y: auto; }
}
.rail-title { margin: 0 0 14px; }
.rail-list { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.8125rem; }
.rail-list li { border-left: 1px solid var(--rule); }
.rail-list a { display: block; padding: 6px 0 6px 14px; color: var(--ink-soft); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.rail-list a:hover { color: var(--ink); }
.rail-list a.is-current { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }

/* ---------- document ---------- */

.doc { counter-reset: sec; padding-bottom: 40px; min-width: 0; }
.sec { padding: clamp(38px, 6vw, 56px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 72px; }
.sec:first-child { border-top: 0; }

.sec-title {
  counter-increment: sec; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 22px;
}
.sec-title::before {
  content: counter(sec, decimal-leading-zero); display: block;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink-soft); margin-bottom: 11px;
}
.sub-title { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin: 36px 0 12px; }
.sec-intro, .prose-block p, .sec > p { max-width: var(--measure); }
.sec p { margin: 0 0 18px; }
.figure-note, .metric-note, .card-note { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); }
.card-note { margin: 14px 0 0; }

/* ---------- verdict ---------- */

.lede { font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.45; letter-spacing: -0.012em; max-width: var(--measure); }
.verdict-split { display: grid; gap: 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .verdict-split { grid-template-columns: 1fr 1fr; gap: 44px; } }
.verdict-col h3 { margin: 0 0 14px; }
.tick-list { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.tick-list li { position: relative; padding-left: 26px; margin-bottom: 12px; line-height: 1.5; }
.tick-list li::before { position: absolute; left: 0; top: 0.1em; font-family: var(--sans); font-size: 0.95rem; font-weight: 700; }
.tick-list--yes li::before { content: '+'; color: var(--piste-blue); }
.tick-list--no li::before { content: '–'; color: var(--piste-red); }

/* ---------- key facts explorer ---------- */

.explorer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-top: 26px;
}
.xcard { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.xcard[open] { grid-column: 1 / -1; background: var(--paper-sunk); }
.xcard summary {
  list-style: none; cursor: pointer; display: block; position: relative;
  padding: 16px 40px 16px 18px; transition: background .15s;
}
.xcard summary::-webkit-details-marker { display: none; }
.xcard summary:hover { background: var(--paper-sunk); }
.xcard[open] summary { border-bottom: 1px solid var(--rule); }
.xcard-label { display: block; margin-bottom: 7px; }
.xcard-value { display: block; font-family: var(--serif); font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.02em; }
.xcard-sub { display: block; margin-top: 6px; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); }
.xcard-more { position: absolute; top: 18px; right: 16px; width: 11px; height: 11px; }
.xcard-more::before, .xcard-more::after {
  content: ''; position: absolute; background: var(--ink-soft); transition: transform .18s, opacity .18s;
}
.xcard-more::before { top: 5px; left: 0; width: 11px; height: 1.5px; }
.xcard-more::after  { left: 5px; top: 0; width: 1.5px; height: 11px; }
.xcard[open] .xcard-more::after { transform: scaleY(0); opacity: 0; }
.xcard-body { padding: 22px 18px 26px; }
.xcard-body .facts { margin-bottom: 0; }
.xcard-body .figure { margin-top: 0; }

/* ---------- tables ---------- */

.facts, .suit { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 0.9875rem; }
.facts th, .facts td, .suit th, .suit td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.facts th[scope='row'], .suit th[scope='row'] { font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; color: var(--ink-mid); width: 42%; padding-right: 20px; }
.facts td { font-variant-numeric: tabular-nums; }
.facts--compact th[scope='row'] { width: 38%; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.suit thead th { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--rule-strong); }
.suit td:first-of-type { width: 1%; padding-right: 28px; }
.suit td:last-child { font-size: 0.9375rem; color: var(--ink-mid); }
.qualifier { text-transform: none; letter-spacing: 0.01em; font-size: 0.75rem; color: var(--ink-soft); }

.verdict-pill {
  display: inline-block; padding: 2px 9px; white-space: nowrap;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid currentColor;
}
.verdict-pill--excellent { color: var(--piste-blue); }
.verdict-pill--good { color: var(--piste-blue); opacity: .75; }
.verdict-pill--fair { color: var(--ink-mid); }
.verdict-pill--poor { color: var(--piste-red); }

.v--unverified, .v--medium, .v--derived { border-bottom: 1px dotted var(--rule-strong); cursor: help; }
.v--unverified { border-bottom-color: var(--piste-red); }

.caveat {
  font-family: var(--sans); font-size: 0.8438rem; line-height: 1.6; color: var(--ink-mid);
  background: var(--paper-raised); padding: 15px 17px; margin: 20px 0 0;
  max-width: var(--measure); border-left: 2px solid var(--rule-strong);
}
.caveat-tag { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }

/* ---------- lift fleet ---------- */

.lift-fleet { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.875rem; }
.lift-fleet li { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.lift-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w); background: var(--ink); opacity: .5; }
.lift-name { color: var(--ink-mid); }
.lift-n { margin-left: auto; font-weight: 600; }

/* ---------- computed metrics ---------- */

.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin: 26px 0 40px;
}
.metric { position: relative; padding: 18px 16px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.metric-label { margin: 0 0 8px; padding-right: 62px; }
.metric-value { margin: 0; font-family: var(--serif); font-size: 1.875rem; line-height: 1; letter-spacing: -0.02em; }
.metric-note { margin: 8px 0 0; font-size: 0.75rem; }
.metric-flag { position: absolute; top: 10px; right: 12px; font-family: var(--sans); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--piste-red); cursor: help; }
.metric--provisional .metric-value { color: var(--ink-mid); }

/* The graph-derived figures lead: wider cells, larger numerals. These are the
   ones no other ski site publishes, so they carry the section. */
/* auto-fit, not auto-fill, and a wide floor: at the usual ~900px content width
   this lands on three columns, so five lead metrics break 3 + 2 and the last
   row stretches to fill. auto-fill at 210px gave 4 + 1 and left a dead cell. */
.metric-grid--lead { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 0; }
.metric-grid--lead + .metric-grid { border-top: 0; margin-top: 0; }
.metric--lead { padding: 22px 18px 20px; background: var(--paper-raised); }
.metric--lead .metric-value { font-size: 2.375rem; }

/* Where a number came from, stated positively. `measured` is a claim about
   method, not a warning — it must not read like `provisional`, which flags an
   unchecked figure. Different colour, different weight, same position. */
.metric-basis {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--sans); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: help;
}
.metric-basis--measured { color: var(--ink-soft); }
.metric-basis--official { color: var(--piste-blue); }

/* Shown only when the resort's figure and ours disagree. */
.metric-alt {
  margin: 6px 0 0; font-family: var(--sans); font-size: 0.75rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .metric-grid, .metric-grid--lead { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .metric--lead .metric-value { font-size: 1.875rem; }
}

/* ---------- figures ---------- */

.figure { margin: 24px 0 0; }
.figure figcaption { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); margin-top: 12px; max-width: 46ch; }
.fig-pair { display: grid; gap: 30px; align-items: start; margin-top: 8px; }
@media (min-width: 780px) { .fig-pair { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; } }

.elevation-band { width: 100%; height: auto; overflow: visible; }
.eb-grid { stroke: var(--rule); stroke-width: 1; }
.eb-axis { stroke: var(--rule-strong); stroke-width: 1; }
.eb-bar { fill: var(--ink); opacity: .82; }
.eb-axis-label, .eb-bar-label { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.eb-bar-label { fill: var(--ink-mid); font-weight: 600; }
/* A bar label sits at the vertical centre of its bar, which is regularly the
   exact height of a grid line, and the line ran straight through the number.
   Fixed by drawing the same text twice: a fat paper-coloured copy underneath,
   then the real one on top. `paint-order: stroke` would be one element instead
   of two, but where it is unsupported the stroke paints over the fill and every
   label turns into an illegible smear — which is a worse failure than the bug. */
/* Specific enough to beat `.eb-station text`, which is (0,1,1) and otherwise
   won the fill and turned every station halo into a solid ink blob. */
.elevation-band text.eb-halo {
  stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; fill: var(--paper);
}
.eb-unit { font-weight: 400; fill: var(--ink-soft); }
.eb-unit-label { font-size: 9px; fill: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.eb-station polyline { stroke: var(--rule-strong); stroke-width: 1; }
.eb-station text { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-mid); }
.eb-station-alt { fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Hollow circle = lift station or summit; filled square = village or valley
   base. Two shapes rather than two colours, because blue, red and black are
   piste difficulty on this site and never decorative. */
.eb-mark { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.4; }
.eb-mark--village { fill: var(--ink-mid); stroke: none; }
.eb-station--village text { fill: var(--ink); font-weight: 600; }

.figure--rose img { width: 100%; max-width: 250px; height: auto; display: block; background: #fff; border: 1px solid var(--rule); padding: 6px; }

.ribbon { display: flex; height: 32px; border: 1px solid var(--rule-strong); }
.ribbon-seg { min-width: 2px; }
.ribbon-seg--blue { background: var(--piste-blue); }
.ribbon-seg--red { background: var(--piste-red); }
.ribbon-seg--black { background: var(--piste-black); }
.ribbon-seg + .ribbon-seg { border-left: 1px solid var(--paper); }
.ribbon-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; padding: 0; font-family: var(--sans); font-size: 0.8125rem; }
.ribbon-key { display: flex; align-items: baseline; gap: 8px; }
.ribbon-swatch { width: 9px; height: 9px; flex: none; }
.ribbon-swatch--blue { background: var(--piste-blue); }
.ribbon-swatch--red { background: var(--piste-red); }
.ribbon-swatch--black { background: var(--piste-black); }
.ribbon-key-label { color: var(--ink-mid); }
.ribbon-key-val { font-weight: 600; }
.ribbon-key-pct { color: var(--ink-soft); }

.grad-chart { list-style: none; display: flex; align-items: flex-end; gap: 10px; height: 170px; margin: 20px 0 0; padding: 0; border-bottom: 1px solid var(--rule-strong); }
.grad-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.grad-bar { width: 100%; background: var(--ink); opacity: .82; min-height: 2px; }
.grad-val { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; margin-bottom: 6px; }
.grad-band { font-family: var(--sans); font-size: 0.6875rem; color: var(--ink-soft); margin-top: 8px; white-space: nowrap; }

/* ---------- tabs ---------- */

.tablist { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--rule); margin-bottom: 4px; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist button {
  flex: none; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 14px; margin-bottom: -1px; color: var(--ink-soft);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.tabpanel { padding-top: 18px; }
.tabpanel:focus { outline: none; }
.tabpanel > .sec-intro:first-child { margin-top: 0; }

/* ---------- maps ---------- */

/* A grid item defaults to min-width:auto, and the min-content contribution of
   a replaced element sized in percent falls back to its intrinsic width — so a
   1400px map pushed .map-card to 411px inside a 338px column and gave the whole
   phone page a horizontal scrollbar. The map must never be wider than the prose
   beside it. */
.map-stack { display: grid; gap: 22px; min-width: 0; }
.map-stack > * { min-width: 0; max-width: 100%; }
.map-card { border: 1px solid var(--rule); background: var(--paper-raised); min-width: 0; max-width: 100%; }
.map-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
/* .btn-line is nowrap, which is right for "Open in SkiAllDay" and wrong here:
   "Official map at Consorzio Skipass Alto Sangro (SIAFAS)" is 382px of
   unbreakable button and pushed a 375px page out to 422px. Shorter operator
   names do not fix it — 38 characters already overflows. So the label wraps
   when it has to, and on a phone it drops the operator entirely: the note under
   the card names the operator twice more, and "Official map" is the whole
   instruction. */
.map-card-head .btn-line { white-space: normal; max-width: 100%; }
.map-card-head h3, .map-card--app h3 { margin: 0; font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
.map-card-meta { margin: 4px 0 0; }
.map-zoom {
  display: block; width: 100%; min-width: 0; max-width: 100%; padding: 0; border: 0;
  cursor: zoom-in; background: #fff; position: relative; line-height: 0;
}
.map-zoom img { width: 100%; max-width: 100%; height: auto; display: block; }
.map-zoom-hint {
  position: absolute; right: 12px; bottom: 12px; padding: 5px 11px;
  background: rgba(16,20,26,.82); color: #fff; line-height: 1.4;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.map-zoom:hover .map-zoom-hint { background: rgba(16,20,26,.95); }
.map-fallback { padding: 40px 20px; text-align: center; font-family: var(--sans); font-size: 0.875rem; }

/* A prose block that hands the reader on to another guide — or says one is
   coming. The planned state is deliberately not a link: a sub-area page that
   does not exist yet is a 404, and 404s are the one thing this site cannot
   afford to publish. */
.block-link { margin: -8px 0 0; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; }
.block-link a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.block-link a:hover { border-bottom-color: var(--ink); }
.block-link a::after { content: ' \2192'; }
.block-link--planned { color: var(--ink-soft); font-weight: 500; font-style: italic; }

/* full-size map viewer */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,11,16,.94); display: flex; flex-direction: column; }
.lightbox[hidden] { display: none; }
.lightbox-close {
  align-self: flex-end; margin: 14px 16px; padding: 9px 18px; cursor: pointer;
  background: none; color: #fff; border: 1px solid rgba(255,255,255,.45);
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
}
.lightbox-close:hover { background: #fff; color: #10141a; }
.lightbox-stage { flex: 1; overflow: auto; padding: 0 16px 20px; display: flex; align-items: flex-start; justify-content: center; }
.lightbox-stage img { max-width: none; height: auto; cursor: grab; }
@media (max-width: 900px) { .lightbox-stage img { width: 1600px; } }
.map-card .figure-note { padding: 11px 20px; margin: 0; border-top: 1px solid var(--rule); }
.map-card--app { padding: 20px; }
.map-card--app p { margin: 10px 0 18px; font-size: 0.9375rem; max-width: 54ch; }

.btn-line { display: inline-block; padding: 8px 16px; border: 1px solid var(--ink); color: var(--ink); font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-line:hover { background: var(--ink); color: var(--paper); }

.archive-list { list-style: none; margin: 14px 0 0; padding: 0; font-family: var(--sans); font-size: 0.875rem; }
.archive-list li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.archive-list span { color: var(--ink-soft); }

/* ---------- dining, community, timeline ---------- */

.hut-list { list-style: none; margin: 0; padding: 0; }
.hut { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.hut-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hut h3 { margin: 0; font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; }
.hut p { margin: 6px 0 0; font-size: 0.9375rem; color: var(--ink-mid); max-width: var(--measure); }

.empty-state { border: 1px dashed var(--rule-strong); padding: 22px; max-width: var(--measure); }
.empty-title { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); margin: 0 0 10px; }
.empty-state p:last-child { margin: 0; font-size: 0.9375rem; color: var(--ink-mid); }


/* ---------- community tips ---------- */

.tips-meta { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 26px; }
.tips { display: grid; gap: 34px; }
.tip-group-title {
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong);
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft);
}
.tip-list { list-style: none; margin: 0; padding: 0; }
.tip { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tip:last-child { border-bottom: 0; }
.tip-line { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: var(--measure); }
.tip-detail { margin: 6px 0 0; font-size: 0.9375rem; color: var(--ink-mid); max-width: var(--measure); }
.tip-quote {
  margin: 10px 0 0; padding-left: 16px; border-left: 2px solid var(--rule-strong);
  font-style: italic; color: var(--ink-mid); font-size: 0.9375rem; max-width: var(--measure);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 66px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.tl-year { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); padding-top: 2px; }
.tl-body { margin: 0; max-width: var(--measure); }

.nearby-list { list-style: none; margin: 0; padding: 0; }
.nearby-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.nearby-list a, .nearby-pending { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; }
.nearby-pending { color: var(--ink-mid); }
.nearby-list p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--ink-mid); }

/* ---------- faq + sources ---------- */

.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: baseline; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; margin-left: auto; font-family: var(--sans); font-size: 1.1rem; color: var(--ink-soft); }
.faq-item[open] summary::after { content: '–'; }
.faq-item summary h3 { display: inline; margin: 0; font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; }
.faq-item p { margin: 0 0 18px; max-width: var(--measure); color: var(--ink-mid); }

.source-list { margin: 0; padding: 0 0 0 20px; font-size: 0.9375rem; }
.source-list li { margin-bottom: 12px; }
.source-meta { display: block; margin-top: 2px; }

/* Wikipedia-style inline markers and reference list */
.ref { font-family: var(--sans); font-size: 0.62em; font-weight: 600; line-height: 0; vertical-align: super; white-space: nowrap; margin-left: 1px; }
.ref a { text-decoration: none; padding: 0 1px; }
.ref a::before { content: '['; color: var(--ink-soft); }
.ref a::after { content: ']'; color: var(--ink-soft); }
.ref a:hover { text-decoration: underline; }
.ref a:target, .ref-item:target { background: color-mix(in srgb, var(--piste-blue) 16%, transparent); }

.ref-list { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.ref-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 80px; }
.ref-num { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); }
.ref-back { font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); margin-right: 4px; }
.ref-back a { color: var(--link); text-decoration: none; font-style: italic; }
.ref-back a:hover { text-decoration: underline; }
.ref-body { grid-column: 2; }
.ref-meta { display: block; margin-top: 2px; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); }
.ref-flag {
  display: inline-block; margin-top: 5px; padding: 1px 7px;
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--piste-red); border: 1px solid currentColor;
}
.updated { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); margin-top: 24px; }

/* ---------- app cta + footer ---------- */

.app-cta { background: var(--ink); color: var(--paper); padding: clamp(40px, 7vw, 78px) var(--gutter); }
.app-cta-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.app-cta h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 3.4vw, 2.25rem); letter-spacing: -0.02em; }
.app-cta p { margin: 0; max-width: 52ch; color: color-mix(in srgb, var(--paper) 68%, transparent); font-size: 1rem; }
.btn-app { flex: none; padding: 13px 26px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 600; text-decoration: none; }

.rfooter { background: var(--paper-sunk); color: var(--ink-soft); padding: 28px var(--gutter) 40px; border-top: 1px solid var(--rule); }
.rfooter-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-family: var(--sans); font-size: 0.8125rem; }
.rfooter-brand { margin: 0; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.rfooter-links { display: flex; gap: 18px; margin-left: auto; }
.rfooter-links a { color: var(--ink-soft); text-decoration: none; }
.rfooter-links a:hover { color: var(--ink); }
.rfooter-legal { margin: 0; }

/* ---------- responsive ---------- */

/* The scene is close to 2:1 and a phone hero is nearer 1:2. `xMidYMax slice`
   settles that by zooming the scene until it covers the box, which on a phone
   means a single snowfield filling the hero — with the crumbs, the subtitle and
   the place line set in --hero-soft over it, which in dark is a pale grey on
   near-white snow and close to invisible. The scrim cannot save them: it is a
   vertical wash and the place line sits below the point where it has faded
   out. Below the breakpoint the scene gets a band at the foot of
   the hero instead: its aspect ratio then matches the box it has to fill, the
   whole range is in frame, and the headline sits on plain paper rather than
   fighting a wash for legibility. The landing hero has done this since it was
   built and it is the same hero, so the rule lives here and home.css only
   carries the padding its taller headline needs. */
@media (max-width: 859px) {
  .rhero { --hero-scrim: none; }
  .rhero-scene {
    inset: auto 0 0 0;
    height: clamp(240px, 42vh, 350px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%);
            mask-image: linear-gradient(180deg, transparent 0, #000 15%);
  }
  .rhero-inner { padding-bottom: clamp(215px, 37vh, 310px); }
}

@media (max-width: 860px) {
  .topbar-links { display: none; }
  .theme-toggle { margin-left: auto; }
  .theme-name { display: none; }
  .theme-toggle { padding: 7px 9px; }
}
@media (max-width: 620px) {
  .map-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-line-tail { display: none; }
  .explorer { grid-template-columns: 1fr; }
  .xcard-value { font-size: 1.5rem; }
  .tl-item { grid-template-columns: 52px 1fr; gap: 14px; }
  .facts th[scope='row'] { width: 46%; }
  .suit thead { display: none; }
  .suit tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .suit th, .suit td { border: 0; padding: 0; }
  .suit td:first-of-type { width: auto; padding-right: 0; }
  .suit td:last-child { grid-column: 1 / -1; margin-top: 4px; }
  .grad-chart { gap: 5px; height: 140px; }
  .grad-band { font-size: 0.5625rem; }
  .app-cta-inner { display: block; }
  .btn-app { display: inline-block; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .topbar, .rail, .app-cta, .rhero-scene, .theme-toggle { display: none; }
  .xcard-body, .tabpanel { display: block !important; }
}

/* ---------- index pages (/resorts, /resorts/<country>) ---------- */

/* No voxel scene here: an index is a directory, and the hero's job is to say
   what the numbers mean rather than to be a picture of a mountain. */
.idx-hero { border-bottom: 1px solid var(--rule); background: var(--paper-sunk); }
.idx-hero-inner { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(30px, 5vw, 52px); }
.idx-hero .crumbs { color: var(--ink-soft); margin-bottom: 20px; }
.idx-hero .crumbs a { color: var(--ink-soft); }
.idx-hero .crumbs a:hover { color: var(--ink); }
.idx-hero .crumbs [aria-current] { color: var(--ink); }
.idx-h1 { margin: 0; font-weight: 400; font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; }
.idx-lede { margin: 16px 0 0; max-width: var(--measure); color: var(--ink-mid); }

/* An index page has no rail, so it must not sit in the rail's grid column.
   .shell becomes `186px minmax(0,1fr)` above 1040px, which squeezed the whole
   table into 186px. */
.shell--index { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) { .shell--index { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.doc--index { counter-reset: sec; }
.doc--index .sec:first-child { border-top: 0; }

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.idx-scroll { overflow-x: auto; margin: 22px 0 0; }
.idx-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.875rem; }
.idx-table th, .idx-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.idx-table thead th {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
.idx-table td.num, .idx-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idx-table tbody th { font-weight: 600; min-width: 190px; }
.idx-table tbody th a { color: var(--ink); text-decoration: none; }
.idx-table tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.idx-table tbody tr:hover { background: var(--paper-sunk); }
.idx-where { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }

.idx-countries {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.idx-countries li { background: var(--paper); }
.idx-countries a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; text-decoration: none; }
.idx-countries a:hover { background: var(--paper-raised); }
.idx-country-name { font-family: var(--serif); font-size: 1.125rem; color: var(--ink); }
.idx-country-n { font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; }

/* ---------- imperial partner ---------- */

/* Metric stays the headline; the imperial figure is a quiet aside, never a
   replacement. Same size as the unit so it never competes with the number. */
.alt-unit {
  font-family: var(--sans); font-size: 0.62em; font-weight: 500;
  color: var(--ink-soft); margin-left: 0.4em; letter-spacing: 0.01em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------- mobile section switcher ---------- */

/* The rail is desktop-only, so below 1040px this is the only way to move
   between sections without scrolling the whole document. Sticky under the
   topbar, horizontally scrollable, and it mirrors the rail exactly — same
   section list, same data-rail hooks, so one scrollspy drives both. */
.secnav {
  position: sticky; top: 49px; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.secnav::-webkit-scrollbar { display: none; }
.secnav-list {
  display: flex; gap: 2px; list-style: none; margin: 0;
  padding: 0 var(--gutter); white-space: nowrap;
}
.secnav-list a {
  display: block; padding: 11px 12px; text-decoration: none;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.secnav-list a:hover { color: var(--ink); }
.secnav-list a.is-current { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

@media (min-width: 1040px) { .secnav { display: none; } }

/* Section anchors must clear both sticky bars on mobile. */
@media (max-width: 1039px) { .sec { scroll-margin-top: 96px; } }

/* ---------- horizontal scroll affordance ---------- */

/* Any strip that runs past the edge fades on the side that has more behind it,
   so "there is more this way" is visible without a scrollbar — which is hidden
   on most of these by design and absent on touch anyway.

   A mask on the content, not a gradient overlay: it needs no matching
   background, so the same rule works on the stat bar, a tab strip and the
   comparison table alike. resort.js sets data-scroll. */
[data-scroll] { --fade: 32px; }

[data-scroll='right'] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
[data-scroll='left'] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}
[data-scroll='both'] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
}

/* Smooth the slide when a tab centres itself, but respect a reader who has
   asked for less motion. */
.tablist, .secnav { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .tablist, .secnav { scroll-behavior: auto; }
}

/* ---------- country overview ---------- */

.cty-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; margin: 26px 0 0;
  background: var(--rule); border: 1px solid var(--rule);
}
.cty-fact { background: var(--paper); padding: 15px 16px; }
.cty-fact dt {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 5px;
}
.cty-fact dd { margin: 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }

.cty-known { list-style: none; margin: 22px 0 0; padding: 0; }
.cty-known li { padding: 16px 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.cty-known li:last-child { border-bottom: 1px solid var(--rule); }
.cty-known-label {
  margin: 0 0 4px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink);
}
.cty-known li p:last-child { margin: 0; color: var(--ink-mid); }

.cty-corpus { max-width: var(--measure); color: var(--ink-mid); margin: 0 0 4px; }
.cty-corpus strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- clickable comparison rows ---------- */

/* The whole row is a target, so it has to look like one. The anchor on the
   name still carries the real link — this is hit area, not semantics. */
.idx-row { cursor: pointer; }
.idx-row:hover { background: var(--paper-sunk); }
.idx-row:focus-within { background: var(--paper-sunk); outline: 2px solid var(--link); outline-offset: -2px; }