/* ═══════════════════════════════════════════════════════════════════════════
   flycatcherclub — the shared base: tokens, and the place-page shell.

   Loaded by BOTH kinds of page: the app shell (public/index.html, ahead of
   style.css) and every generated document (/resources/…, built by
   src/lib/resources/render.ts). The guides used to carry a hand-copied subset
   of these tokens in an inline <style>, and the two drifted; there is now one
   set, here, and one set of components for a place page — the map header, the
   answer strip, the sticky bar and the section modules — whichever kind of
   page draws them.

   Nothing in this file may assume the app: no fixed full-bleed map, no
   overflow:hidden on the page. Those belong to style.css.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #070f1c;            /* page canvas, behind the framed app */
  --ocean: #0a1626;         /* MapLibre ocean (unchanged) */
  --panel-solid: #101a2a;
  --fill: rgba(255, 255, 255, 0.06);
  --fill-hover: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.09);
  --border-mid: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eaf1fb;
  --muted: #93a6c0;
  --muted2: #8fa8c4;
  --faint: #5b7da3;
  --ink2: #c3d2e4;

  /* Brand green — the only accent change from the old blue. */
  --accent: #3fbf85;
  --accent-hover: #7ad9ad;
  --accent-ink: #04121f;
  --accent-16: rgba(63, 191, 133, 0.16);
  --accent-13: rgba(63, 191, 133, 0.13);
  --accent-10: rgba(63, 191, 133, 0.10);

  --glass: rgba(11, 19, 33, 0.74);
  --glass-strong: rgba(11, 19, 33, 0.95);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-drawer: 0 -30px 80px rgba(0, 0, 0, 0.55);
  --radius: 14px;
  --radius-sm: 9px;

  /* One family for everything. Figures come from font-variant-numeric below, not
     from a monospace — see the note on the deleted font links in index.html. The
     --serif/--mono aliases that carried the older rules through the redesign are
     gone with the last rule that named one. */
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --body-left: 24px;   /* left edge for section titles and category labels */

  /* ── redesign tokens ──────────────────────────────────────────────────────
     The "no header at all" pass (design_handoff_flycatcher_chrome). These are
     added alongside the tokens above rather than replacing them: the phases land
     one surface at a time, and a surface that has not been rebuilt yet must keep
     reading its old values. Phase 9i deletes whatever is left unread.

     Data palettes are NOT here and never will be — src/lib/variables.ts stops and
     src/lib/colors.ts ramps stay the single source of truth for anything the map
     paints. These are chrome only. */
  --fc-page: #04070a;             /* frame behind the app */
  --fc-brief: #070a0d;            /* the briefing document's page */
  --fc-panel: rgba(9, 13, 17, 0.90);
  --fc-overlay: rgba(9, 13, 17, 0.95);
  --fc-blur: blur(22px);
  --fc-panel-radius: 16px;
  --fc-panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* Scrims: the map reads through them, so the chrome needs no bar to sit on. */
  --fc-scrim-top: linear-gradient(180deg, rgba(4, 7, 10, 0.78), rgba(4, 7, 10, 0));
  --fc-scrim-bottom: linear-gradient(0deg, rgba(4, 7, 10, 0.86), rgba(4, 7, 10, 0));

  --fc-hair-row: rgba(255, 255, 255, 0.07);   /* between rows */
  --fc-hair-rule: rgba(255, 255, 255, 0.09);  /* section rules */
  --fc-hair-ruler: rgba(255, 255, 255, 0.2);  /* the ruler's baseline */
  --fc-hair-month: rgba(255, 255, 255, 0.13); /* month dividers */

  --fc-fill: rgba(255, 255, 255, 0.06);       /* quiet buttons and fields */
  --fc-fill-strong: rgba(255, 255, 255, 0.08);
  --fc-outline: rgba(255, 255, 255, 0.2);
  --fc-outline-strong: rgba(255, 255, 255, 0.28);

  --fc-text: #eef2f5;         /* primary */
  --fc-text-2: #c3cdd6;       /* secondary */
  --fc-muted: #8d9aa6;        /* muted — still ≥ 4.5:1 at 12px */
  --fc-ruler-month: #7d8b97;
  --fc-sep: #33414c;          /* the sentence's "·" separators */

  /* Verdicts. Distinct from the SCORE_STOPS ramp on purpose: that ramp colours
     data, these colour a written judgement. */
  --fc-ideal: #7ad9ad;
  --fc-marginal: #f4c05a;
  --fc-outside: #f2765c;

  --fc-accent-20: rgba(63, 191, 133, 0.20);
  --fc-accent-16: rgba(63, 191, 133, 0.16);
  --fc-accent-14: rgba(63, 191, 133, 0.14);
  --fc-accent-10: rgba(63, 191, 133, 0.10);

  --fc-gutter: 44px;          /* the map's outer gutter */
  --fc-gutter-brief: 72px;    /* the briefing's side padding */
  --fc-gutter-phone: 22px;

  /* How much map the landing block leaves below itself. Named because two things
     depend on it: the block's own bottom padding, and the aside that drops back
     THROUGH that padding to sit on the page's bottom edge. */
  --fc-landing-reserve: clamp(72px, 25vh, 230px);

  /* Twins of CHART_THEME in src/lib/city-view.ts, mirrored BY HAND. The charts
     are built as SVG strings so their unit test can read them without a browser,
     which means their colours cannot come from here — but the surfaces around
     them have to agree with them. Same convention as breakpoints.ts against the
     media queries. */
  --fc-chart-grid: #18232e;
  --fc-chart-axis: #8d9aa6;
  --fc-chart-line: #eef2f5;

  /* A place's identity in a comparison: the brand green and two siblings at the
     same lightness. CHROME, not data — they only ever say "which place". Every
     verdict keeps the score ramp and every driver keeps the three verdict
     colours above. Mirrored by hand for the map's pins (CMP_HEX in
     src/client/map/layers.ts). */
  --fc-cmp-1: oklch(0.74 0.13 155);
  --fc-cmp-2: oklch(0.74 0.13 60);
  --fc-cmp-3: oklch(0.74 0.13 300);

  /* Hard-coded whites of the dark theme, named so the light one can turn them. */
  --fc-dash: rgba(255, 255, 255, 0.26);        /* an editable word's dashed underline */
  --fc-hover: rgba(255, 255, 255, 0.05);       /* a row under the pointer */
  --fc-tick: rgba(255, 255, 255, 0.15);        /* a ruler section still to come */
  --fc-tick-gone: rgba(63, 191, 133, 0.4);     /* …and one already gone by */
  --fc-tick-hov: rgba(255, 255, 255, 0.5);
  --fc-track: rgba(255, 255, 255, 0.16);       /* a slider's track */
  --fc-field: rgba(255, 255, 255, 0.08);       /* the landing's glass fields */
  --fc-suggest: rgba(14, 23, 38, 0.98);        /* the autocomplete list */
  --fc-tip: rgba(16, 26, 42, 0.97);            /* the dot tooltip */
  --fc-leader-none: rgba(255, 255, 255, 0.10); /* a section nobody leads */
  --fc-dot-track: rgba(255, 255, 255, 0.12);
  --fc-landing-scrim: linear-gradient(180deg, rgba(4, 7, 10, 0.55) 0%, rgba(4, 7, 10, 0.82) 55%, rgba(4, 7, 10, 0.94) 100%);
  --fc-band-scrim: linear-gradient(180deg, rgba(4, 7, 10, 0) 45%, rgba(4, 7, 10, 0.72) 100%);
  --fc-chip-bg: rgba(11, 19, 33, 0.72);        /* the band's small glass chips */
  --fc-chart-zero: #2a3b4a;                    /* CHART_THEME.zero's twin */
  --fc-good-score: #a6d96a;                    /* a "Good" score written as text */

  --cmp-band: 380px;   /* the compare view's map band */
  --cal-floor: 0.3;    /* a calendar cell's opacity at score 0 */
}

:root[data-theme="dark"] { color-scheme: dark; }

/* ── LIGHT ──────────────────────────────────────────────────────────────────
   The site follows the system's colour scheme unless the reader picked one:
   <html data-theme="light|dark"> then wins either way. The same block is
   written twice — once for "system says light and the reader has not forced
   dark", once for "the reader forced light" — because CSS has no way to name
   one set of rules from two conditions. Only CHROME tokens turn: the data
   palettes (variables.ts stops, colors.ts ramps) are the same in both rooms.
   The map's ground turns in map/theme.ts, mirrored by hand. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fc-page: #f3f2ee;
    --fc-brief: #fbfaf7;
    --bg: #e9e8e3;
    --fc-panel: rgba(251, 250, 247, 0.90);
    --fc-overlay: rgba(251, 250, 247, 0.95);
    --fc-panel-shadow: 0 20px 50px rgba(16, 20, 24, 0.16);
    --fc-scrim-top: linear-gradient(180deg, rgba(243, 242, 238, 0.85), rgba(243, 242, 238, 0));
    --fc-scrim-bottom: linear-gradient(0deg, rgba(243, 242, 238, 0.92), rgba(243, 242, 238, 0));
    --fc-hair-row: rgba(16, 20, 24, 0.08);
    --fc-hair-rule: rgba(16, 20, 24, 0.10);
    --fc-hair-ruler: rgba(16, 20, 24, 0.25);
    --fc-hair-month: rgba(16, 20, 24, 0.16);
    --fc-fill: rgba(16, 20, 24, 0.05);
    --fc-fill-strong: rgba(16, 20, 24, 0.08);
    --fc-outline: rgba(16, 20, 24, 0.2);
    --fc-outline-strong: rgba(16, 20, 24, 0.3);
    --fc-text: #101418;
    --fc-text-2: #3a4550;
    --fc-muted: #5f6b76;
    --fc-ruler-month: #6b7680;
    --fc-sep: #b8bfc6;
    /* Text-on-light green is the hover shade (≥ 4.5:1); the fill stays brighter. */
    --accent: #2a9a67;
    --accent-hover: #1f7d53;
    --accent-ink: #fbfaf7;
    --accent-16: rgba(42, 154, 103, 0.16);
    --accent-13: rgba(42, 154, 103, 0.13);
    --accent-10: rgba(42, 154, 103, 0.10);
    --fc-accent-20: rgba(42, 154, 103, 0.20);
    --fc-accent-16: rgba(42, 154, 103, 0.16);
    --fc-accent-14: rgba(42, 154, 103, 0.14);
    --fc-accent-10: rgba(42, 154, 103, 0.10);
    --fc-ideal: #1f7d53;
    --fc-marginal: #b7791f;
    --fc-outside: #c2410c;
    --fc-good-score: #4d8a1a;
    --fc-chart-grid: #e3e1da;
    --fc-chart-axis: #5f6b76;
    --fc-chart-line: #101418;
    --fc-chart-zero: rgba(16, 20, 24, 0.3);
    /* The identity hues, darkened to read on paper. */
    --fc-cmp-1: oklch(0.58 0.13 155);
    --fc-cmp-2: oklch(0.58 0.13 60);
    --fc-cmp-3: oklch(0.58 0.13 300);
    --fc-dash: rgba(16, 20, 24, 0.3);
    --fc-hover: rgba(16, 20, 24, 0.04);
    --fc-tick: rgba(16, 20, 24, 0.14);
    --fc-tick-gone: rgba(42, 154, 103, 0.4);
    --fc-tick-hov: rgba(16, 20, 24, 0.35);
    --fc-track: rgba(16, 20, 24, 0.16);
    --fc-field: rgba(255, 255, 255, 0.72);
    --fc-suggest: rgba(251, 250, 247, 0.98);
    --fc-tip: rgba(251, 250, 247, 0.97);
    --fc-chip-bg: rgba(251, 250, 247, 0.82);
    --fc-leader-none: rgba(16, 20, 24, 0.08);
    --fc-dot-track: rgba(16, 20, 24, 0.14);
    --fc-landing-scrim: linear-gradient(180deg, rgba(243, 242, 238, 0.45) 0%, rgba(243, 242, 238, 0.8) 55%, rgba(243, 242, 238, 0.94) 100%);
    --fc-band-scrim: linear-gradient(180deg, rgba(243, 242, 238, 0) 45%, rgba(243, 242, 238, 0.78) 100%);
    --cal-floor: 0.45;

    /* The older tokens a few surfaces still read (the Layers panel, the band's
       controls, the tooltip's inner rows). */
    --text: #101418;
    --muted: #5f6b76;
    --muted2: #5f6b76;
    --ink2: #3a4550;
    --faint: #8a949d;
    --fill: rgba(16, 20, 24, 0.05);
    --fill-hover: rgba(16, 20, 24, 0.09);
    --border: rgba(16, 20, 24, 0.1);
    --border-mid: rgba(16, 20, 24, 0.12);
    --border-strong: rgba(16, 20, 24, 0.16);
    --glass: rgba(251, 250, 247, 0.8);
    --glass-strong: rgba(251, 250, 247, 0.95);
    --panel-solid: #fbfaf7;
    --shadow: 0 10px 40px rgba(16, 20, 24, 0.15);
    --shadow-drawer: 0 -30px 80px rgba(16, 20, 24, 0.18);
    color-scheme: light;
  }
}

/* Forced light, whatever the system says. */
:root[data-theme="light"] {
  --fc-page: #f3f2ee;
  --fc-brief: #fbfaf7;
  --bg: #e9e8e3;
  --fc-panel: rgba(251, 250, 247, 0.90);
  --fc-overlay: rgba(251, 250, 247, 0.95);
  --fc-panel-shadow: 0 20px 50px rgba(16, 20, 24, 0.16);
  --fc-scrim-top: linear-gradient(180deg, rgba(243, 242, 238, 0.85), rgba(243, 242, 238, 0));
  --fc-scrim-bottom: linear-gradient(0deg, rgba(243, 242, 238, 0.92), rgba(243, 242, 238, 0));
  --fc-hair-row: rgba(16, 20, 24, 0.08);
  --fc-hair-rule: rgba(16, 20, 24, 0.10);
  --fc-hair-ruler: rgba(16, 20, 24, 0.25);
  --fc-hair-month: rgba(16, 20, 24, 0.16);
  --fc-fill: rgba(16, 20, 24, 0.05);
  --fc-fill-strong: rgba(16, 20, 24, 0.08);
  --fc-outline: rgba(16, 20, 24, 0.2);
  --fc-outline-strong: rgba(16, 20, 24, 0.3);
  --fc-text: #101418;
  --fc-text-2: #3a4550;
  --fc-muted: #5f6b76;
  --fc-ruler-month: #6b7680;
  --fc-sep: #b8bfc6;
  /* Text-on-light green is the hover shade (≥ 4.5:1); the fill stays brighter. */
  --accent: #2a9a67;
  --accent-hover: #1f7d53;
  --accent-ink: #fbfaf7;
  --accent-16: rgba(42, 154, 103, 0.16);
  --accent-13: rgba(42, 154, 103, 0.13);
  --accent-10: rgba(42, 154, 103, 0.10);
  --fc-accent-20: rgba(42, 154, 103, 0.20);
  --fc-accent-16: rgba(42, 154, 103, 0.16);
  --fc-accent-14: rgba(42, 154, 103, 0.14);
  --fc-accent-10: rgba(42, 154, 103, 0.10);
  --fc-ideal: #1f7d53;
  --fc-marginal: #b7791f;
  --fc-outside: #c2410c;
  --fc-good-score: #4d8a1a;
  --fc-chart-grid: #e3e1da;
  --fc-chart-axis: #5f6b76;
  --fc-chart-line: #101418;
  --fc-chart-zero: rgba(16, 20, 24, 0.3);
  /* The identity hues, darkened to read on paper. */
  --fc-cmp-1: oklch(0.58 0.13 155);
  --fc-cmp-2: oklch(0.58 0.13 60);
  --fc-cmp-3: oklch(0.58 0.13 300);
  --fc-dash: rgba(16, 20, 24, 0.3);
  --fc-hover: rgba(16, 20, 24, 0.04);
  --fc-tick: rgba(16, 20, 24, 0.14);
  --fc-tick-gone: rgba(42, 154, 103, 0.4);
  --fc-tick-hov: rgba(16, 20, 24, 0.35);
  --fc-track: rgba(16, 20, 24, 0.16);
  --fc-field: rgba(255, 255, 255, 0.72);
  --fc-suggest: rgba(251, 250, 247, 0.98);
  --fc-tip: rgba(251, 250, 247, 0.97);
  --fc-chip-bg: rgba(251, 250, 247, 0.82);
  --fc-leader-none: rgba(16, 20, 24, 0.08);
  --fc-dot-track: rgba(16, 20, 24, 0.14);
  --fc-landing-scrim: linear-gradient(180deg, rgba(243, 242, 238, 0.45) 0%, rgba(243, 242, 238, 0.8) 55%, rgba(243, 242, 238, 0.94) 100%);
  --fc-band-scrim: linear-gradient(180deg, rgba(243, 242, 238, 0) 45%, rgba(243, 242, 238, 0.78) 100%);
  --cal-floor: 0.45;

  /* The older tokens a few surfaces still read (the Layers panel, the band's
     controls, the tooltip's inner rows). */
  --text: #101418;
  --muted: #5f6b76;
  --muted2: #5f6b76;
  --ink2: #3a4550;
  --faint: #8a949d;
  --fill: rgba(16, 20, 24, 0.05);
  --fill-hover: rgba(16, 20, 24, 0.09);
  --border: rgba(16, 20, 24, 0.1);
  --border-mid: rgba(16, 20, 24, 0.12);
  --border-strong: rgba(16, 20, 24, 0.16);
  --glass: rgba(251, 250, 247, 0.8);
  --glass-strong: rgba(251, 250, 247, 0.95);
  --panel-solid: #fbfaf7;
  --shadow: 0 10px 40px rgba(16, 20, 24, 0.15);
  --shadow-drawer: 0 -30px 80px rgba(16, 20, 24, 0.18);
  color-scheme: light;
}

/* ═══════════════ THE PLACE PAGE ══════════════════════════════════════════════
   One shell for every page about a place: a city's guide and its briefing, a
   country, a ranking. Top to bottom —

     .pl-band     the map header, with the page's subject set over it
     .pl-answer   the one-paragraph answer beside a live verdict
     .pl-bar      the sticky bar: section links and the state sentence
     .pl-sec      sections, built from the modules below

   The markup is written once, in src/lib/place-view.ts and place-city.ts, and
   drawn by three callers (the guides' build, the briefings' pre-render, and the
   app's city panel). These rules are the only styling any of them has. */
:root {
  --pl-gutter: clamp(20px, 5vw, 72px);
  --pl-band-h: min(58vh, 640px);
  --city-band: var(--pl-band-h);
  /* The map fading into the page: the same stops in both themes, over the
     briefing's own paper. */
  --pl-fade: linear-gradient(180deg, rgba(7, 10, 13, 0.55) 0%, rgba(7, 10, 13, 0) 22%, rgba(7, 10, 13, 0) 40%, rgba(7, 10, 13, 0.9) 85%, #070a0d 100%);
  --pl-ocean: #0a1626;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pl-fade: linear-gradient(180deg, rgba(251, 250, 247, 0.55) 0%, rgba(251, 250, 247, 0) 22%, rgba(251, 250, 247, 0) 40%, rgba(251, 250, 247, 0.9) 85%, #fbfaf7 100%);
    --pl-ocean: #dbe4ec;
  }
}
:root[data-theme="light"] {
  --pl-fade: linear-gradient(180deg, rgba(251, 250, 247, 0.55) 0%, rgba(251, 250, 247, 0) 22%, rgba(251, 250, 247, 0) 40%, rgba(251, 250, 247, 0.9) 85%, #fbfaf7 100%);
  --pl-ocean: #dbe4ec;
}

/* `hidden` is how every "one of several" switch on these pages works (a chart's
   caption, a country's bars per use), and a display rule on the element would
   otherwise quietly win over the attribute. */
[hidden] { display: none !important; }

/* ── a document (a guide): the page itself scrolls ── */
body.pl-doc {
  margin: 0;
  background: var(--fc-brief);
  color: var(--fc-text);
  font: 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.pl-doc *, .pl-doc *::before, .pl-doc *::after { box-sizing: border-box; }
.pl-doc a { color: var(--accent); text-decoration: none; }
.pl-doc a:hover { color: var(--accent-hover); }
.pl-doc.pl-full { overflow: hidden; }

/* ── the map header ── */
.pl-band { position: relative; height: var(--pl-band-h); }
.pl-doc .pl-band { overflow: hidden; background: var(--pl-ocean); }
.pl-map { position: absolute; inset: 0; }
.pl-map .maplibregl-ctrl-attrib, .pl-map .maplibregl-ctrl-bottom-right { display: none; }
.pl-fade { position: absolute; inset: 0; pointer-events: none; background: var(--pl-fade); }

.pl-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 22px var(--pl-gutter);
}
.pl-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--fc-text) !important; white-space: nowrap; }
.pl-brand-tld { color: var(--fc-muted); }
.pl-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pl-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--fc-muted); }
.pl-crumb-item { display: flex; gap: 6px; }
.pl-sep { color: var(--fc-sep); }
.pl-crumb {
  font: inherit; color: var(--fc-muted) !important; background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px dashed var(--fc-dash);
}
.pl-crumb:hover { color: var(--fc-text) !important; border-bottom-color: var(--accent); }
.pl-words { margin-left: auto; display: flex; align-items: baseline; gap: 22px; font-size: 15px; }
.pl-word { font: inherit; color: var(--fc-text-2) !important; background: none; border: 0; padding: 0; cursor: pointer; }
.pl-word:hover { color: var(--fc-text) !important; }
.pl-word-quiet { color: var(--fc-muted) !important; }
/* The switch names the room it leads to. CSS rather than text the script writes,
   so it is right at first paint. */
.pl-theme::before { content: 'Light'; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pl-theme::before { content: 'Dark'; } }
:root[data-theme="light"] .pl-theme::before { content: 'Dark'; }

.pl-mast {
  position: absolute; left: var(--pl-gutter); right: var(--pl-gutter); bottom: 28px; z-index: 2;
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  pointer-events: none;
}
.pl-mast > * { pointer-events: auto; }
.pl-mast-text { flex: 1 1 420px; min-width: 0; pointer-events: none; }
.pl-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.pl-mast .pl-eyebrow { margin-bottom: 12px; }
.pl-title {
  margin: 0; font-size: clamp(52px, 7vw, 86px); font-weight: 400;
  letter-spacing: -0.03em; line-height: 0.94; text-wrap: balance; color: var(--fc-text);
}
.pl-title-long { font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.025em; max-width: 16em; }
.pl-sub { margin-top: 12px; font-size: 17.5px; color: var(--fc-text-2); }

/* Segmented controls, on the map (glass) and in a section head (quiet fill). */
.pl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--fc-fill); flex: 0 0 auto; }
.pl-seg-btn {
  padding: 6px 13px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; color: var(--fc-text-2) !important; cursor: pointer; white-space: nowrap;
}
.pl-seg-btn:hover { color: var(--fc-text) !important; }
.pl-seg-btn.on { background: var(--fc-fill-strong); color: var(--fc-text) !important; }
.pl-seg-line { background: none; border: 1px solid var(--fc-hair-rule); }
.pl-seg-line .pl-seg-btn { padding: 5px 11px; border-radius: 7px; font-size: 13.5px; }
.pl-seg-end { margin-left: auto; }
.pl-seg-glass {
  background: var(--fc-chip-bg); border: 1px solid var(--fc-outline);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pl-seg-glass .pl-seg-btn { padding: 7px 14px; border-radius: 7px; }
.pl-seg-glass .pl-seg-btn.on { background: var(--accent); color: var(--accent-ink) !important; }

.pl-mapbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--fc-outline); background: var(--fc-chip-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--fc-text); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.pl-mapbtn:hover { border-color: var(--accent); }
.pl-mapbtn-sm { height: 34px; padding: 0 12px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── pins (HTML markers; the label wears a halo in the page's own colour) ── */
.pl-pin {
  display: flex; align-items: center; gap: 7px; cursor: default;
  font: 13px var(--sans); white-space: nowrap; color: var(--fc-text);
  text-shadow: 0 0 4px var(--fc-brief), 0 0 8px var(--fc-brief);
}
.pl-pin[data-href] { cursor: pointer; }
.pl-pin-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); background: var(--c, var(--accent)); }
.pl-pin-score { font-weight: 600; color: var(--c, var(--fc-text)); }
.pl-pin-note { color: var(--fc-muted); }
.pl-pin.subject { font-size: 15px; font-weight: 600; }
.pl-pin.subject .pl-pin-dot { width: 16px; height: 16px; border: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25), 0 0 0 7px color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); }
.pl-pin.ring .pl-pin-dot { background: transparent; border: 1.5px solid var(--fc-muted); }
.pl-pin.ring .pl-pin-name { opacity: 0.7; }
.pl-pin.season .pl-pin-dot { border: 1.5px solid var(--accent); background: var(--accent); }
.pl-pin.hot .pl-pin-dot { width: 14px; height: 14px; }
.pl-pin.hot .pl-pin-name { font-weight: 600; opacity: 1; }
.pl-pin.num .pl-pin-dot {
  display: grid; place-items: center; width: 19px; height: 19px;
  border: 1.5px solid rgba(0, 0, 0, 0.35); color: #04121f; font-size: 11px; font-weight: 700; text-shadow: none;
}
.pl-pin.num .pl-pin-name { display: none; font-weight: 600; }
.pl-pin.num.hot .pl-pin-dot { width: 24px; height: 24px; }
.pl-pin.num.hot .pl-pin-name { display: inline; }

/* ── the full map view ── */
.pl-band.full { position: fixed; inset: 0; z-index: 50; height: auto; }
.pl-band.full .pl-mast { display: none; }
.pl-band.full .pl-fade { opacity: 0.35; }
.pl-panel {
  position: absolute; top: 76px; left: 20px; bottom: 20px; z-index: 4;
  width: min(400px, calc(100% - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fc-panel); border-radius: 16px; box-shadow: var(--fc-panel-shadow);
  backdrop-filter: var(--fc-blur); -webkit-backdrop-filter: var(--fc-blur);
}
.pl-panel-head { padding: 22px 22px 16px; border-bottom: 1px solid var(--fc-hair-rule); }
.pl-panel-top { display: flex; align-items: baseline; gap: 10px; }
.pl-kicker { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-muted); }
.pl-link, .pl-linkbtn {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
}
.pl-link { font-size: 14.5px; white-space: nowrap; }
.pl-link:hover, .pl-linkbtn:hover { color: var(--accent-hover); }
.pl-panel-back { margin-left: auto; font-size: 14px; }
.pl-panel-title { margin-top: 10px; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.pl-panel-title.pl-title-long { font-size: 26px; line-height: 1.1; }
.pl-panel-sub { margin-top: 8px; font-size: 15px; color: var(--fc-text-2); }
.pl-panel-ruler { padding: 14px 22px; border-bottom: 1px solid var(--fc-hair-rule); }
.pl-panel-ruler-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--fc-muted); }
.pl-panel-ruler-head b { font-weight: 400; color: var(--fc-text); }
.pl-panel .pl-ticks { height: 36px; gap: 4px; border-bottom: 0; }
.pl-panel .pl-tick-month { gap: 1.5px; }
.pl-panel .pl-tick { border-radius: 1.5px; }
.pl-panel .pl-axis { gap: 4px; font-size: 11px; }
.pl-panel-list { flex: 1; overflow: auto; padding: 6px 22px 18px; }
.pl-prow {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--fc-hair-row); cursor: pointer; color: var(--fc-text) !important;
}
.pl-prow.hot { background: var(--fc-hover); }
.pl-prow-n { flex: 0 0 22px; font-size: 13px; color: var(--fc-muted); }
.pl-prow-main { flex: 1; min-width: 0; font-size: 15.5px; }
.pl-prow-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--fc-muted); }
.pl-prow-val { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* ── the ruler (a briefing's; and the full map's panel) ── */
.pl-ruler { display: flex; align-items: flex-end; gap: 16px; padding: 18px var(--pl-gutter) 0; }
.pl-play {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--fc-outline); background: none; color: var(--fc-text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.pl-play:hover { border-color: var(--accent); }
.pl-ruler-scale { flex: 1; min-width: 0; }
.pl-ticks { display: flex; gap: 6px; align-items: flex-end; height: 40px; border-bottom: 1px solid var(--fc-outline); }
.pl-tick-month { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; min-width: 0; }
.pl-tick { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; cursor: pointer; }
.pl-tick-flat { background: var(--fc-tick); }
.pl-tick.cur { outline: 1.5px solid var(--fc-text); outline-offset: 1px; }
.pl-axis { display: flex; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--fc-muted); }
.pl-axis > div { flex: 1; min-width: 0; text-align: center; }

/* ── the answer strip ── */
.pl-answer {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px;
  padding: 30px var(--pl-gutter) 40px;
  border-bottom: 1px solid var(--fc-hair-rule);
}
.pl-standfirst {
  margin: 0; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.42; letter-spacing: -0.005em;
  color: var(--fc-text); text-wrap: pretty;
}
.pl-records-line { margin-top: 6px; font-size: 18px; color: var(--fc-text-2); }
.pl-facts { display: flex; flex-wrap: wrap; margin-top: 28px; border-top: 1px solid var(--fc-hair-rule); }
.pl-fact { flex: 1 1 120px; min-width: 0; padding: 12px 16px 0 0; }
.pl-fact-label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-muted); }
.pl-fact-value { margin-top: 4px; font-size: 21px; }
.pl-fact-sub { display: block; margin-top: 2px; font-size: 15px; color: var(--fc-muted); }
/* Every date and every dotted link that goes somewhere: editable text, not a
   button — a dashed underline that firms up under the pointer. */
.pl-goto, .cal-goto {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  text-decoration: underline dashed currentColor 1px; text-underline-offset: 3px;
  transition: color 120ms ease;
}
button.pl-fact-sub { font-size: 15px; color: var(--fc-muted); }
.pl-goto:hover, .cal-goto:hover, .pl-goto:focus-visible, .cal-goto:focus-visible { color: var(--fc-text) !important; text-decoration-style: solid; }
a.pl-goto { color: inherit !important; }

.pl-verdict { text-align: right; min-height: 150px; }
.pl-score { font-size: clamp(56px, 6vw, 80px); letter-spacing: -0.03em; line-height: 0.94; white-space: nowrap; }
.pl-band-word { font-size: 0.44em; margin-left: 12px; }
/* One line, always: a longer rating name must not wrap and add a line's height. */
.pl-verdict-sub { margin-top: 10px; font-size: 17px; color: var(--fc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-vrows { margin-top: 18px; border-top: 1px solid var(--fc-hair-rule); }
.pl-vrow {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--fc-hair-row); font-size: 16px; text-align: left;
}
.pl-vrow-label { flex: 1; color: var(--fc-text-2); }
/* A row held open for a rating with more drivers than this one (place-city.ts). */
.pl-vrow-pad { visibility: hidden; }
.pl-vrow-value { color: var(--fc-text-2); }
.pl-vrow.drv-good .pl-vrow-value { color: var(--fc-ideal); }
.pl-vrow.drv-mid .pl-vrow-value { color: var(--fc-marginal); }
.pl-vrow.drv-bad .pl-vrow-value { color: var(--fc-outside); }
.pl-vrow.drv-na .pl-vrow-value { color: var(--fc-muted); opacity: 0.55; }

/* A written judgement's four colours, wherever one is written. */
.v-ideal { color: var(--fc-ideal); }
.v-good { color: var(--fc-good-score); }
.v-fair { color: var(--fc-marginal); }
.v-poor { color: var(--fc-outside); }

/* ── the sticky bar ── */
.pl-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 26px;
  height: 58px; padding: 0 var(--pl-gutter);
  background: var(--fc-brief); border-bottom: 1px solid var(--fc-hair-rule);
}
.pl-bar-link { font-size: 16px; color: var(--fc-text-2) !important; white-space: nowrap; }
.pl-bar-link:hover { color: var(--fc-text) !important; }
.pl-state { margin-left: auto; display: flex; align-items: baseline; gap: 10px; font-size: 15px; white-space: nowrap; min-width: 0; }
.pl-state-lead { color: var(--fc-muted); }
.pl-state-word, .pl-state-dash { font: inherit; background: none; border: 0; padding: 0 0 1px; cursor: pointer; }
.pl-state-word { font-weight: 600; color: var(--fc-text); border-bottom: 2px solid var(--accent); }
.pl-state-dash { color: var(--fc-text-2); border-bottom: 1px dashed var(--fc-dash); }
.pl-state-dash:hover { color: var(--fc-text); border-bottom-color: var(--accent); }
.pl-state-dash[disabled] { cursor: default; }
.pl-menu {
  position: absolute; top: calc(100% + 6px); right: var(--pl-gutter); z-index: 31;
  width: 250px; padding: 8px;
  background: var(--fc-panel); border-radius: 14px; box-shadow: var(--fc-panel-shadow);
  backdrop-filter: var(--fc-blur); -webkit-backdrop-filter: var(--fc-blur);
}
.pl-menu-row {
  display: flex; width: 100%; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 15px; color: var(--fc-text); text-align: left; cursor: pointer;
}
.pl-menu-row:hover { background: var(--fc-hover); }
.pl-menu-row.on { background: var(--fc-accent-14); }
.pl-menu-row span:last-child { color: var(--fc-muted); }

/* ── sections ── */
.pl-main { padding: 0 var(--pl-gutter); }
.pl-sec { padding: 76px 0 14px; scroll-margin-top: 62px; }
.pl-sec-first { padding-top: 56px; }
.pl-sec-head { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 26px; }
.pl-h2 { margin: 0; font-size: 34px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; color: var(--fc-text); }
.pl-unit { margin-left: 8px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--fc-muted); }
.pl-p { margin: 0 0 16px; max-width: 44em; font-size: 17.5px; line-height: 1.65; color: var(--fc-text-2); text-wrap: pretty; }
.pl-lead { margin: 0 0 22px; max-width: 52em; font-size: 17.5px; line-height: 1.65; color: var(--fc-text-2); text-wrap: pretty; }
.pl-note, .pl-caveat { margin: 16px 0 0; max-width: 60em; font-size: 15.5px; line-height: 1.65; color: var(--fc-muted); text-wrap: pretty; }
.pl-note-top { margin: 0 0 10px; }
.pl-list { margin: 0 0 14px; padding-left: 20px; max-width: 60em; font-size: 17.5px; line-height: 1.7; color: var(--fc-text-2); }
.pl-list li { margin-bottom: 6px; }
.pl-k { color: var(--fc-muted); }

/* The two-column module: the thing itself, and a 300px reading column. */
.pl-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }

/* ── the ratings calendar ──
   The cell primitives (.cal-cells, .cal-monthgroup, .cal-cell, .cal-months) are
   shared with the compare view, which arranges them into rows of its own. */
.calendar { margin-top: 2px; }
.cal-row { border-top: 1px solid var(--fc-hair-row); padding: 9px 0; position: relative; }
.cal-row-myday { border-bottom: 1px solid var(--fc-hair-row); }
.cal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.cal-label {
  width: 176px; flex: 0 0 176px; text-align: left;
  font: inherit; font-size: 17.5px; color: var(--fc-text-2);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.cal-label:hover { color: var(--fc-text); }
/* The rating the page is showing. */
.cal-row.active .cal-label { font-weight: 600; color: var(--fc-text); }
.cal-cells { display: flex; gap: 8px; flex: 1 1 0; min-width: 0; }   /* between months */
.cal-monthgroup { display: flex; gap: 3px; flex: 1; min-width: 0; }   /* within one */
.cal-cell {
  flex: 1 1 0; min-width: 0; height: 34px; border-radius: 3px; cursor: pointer;
  /* The cell's score arrives as --s (0–1); the floor is the theme's. */
  opacity: calc(var(--cal-floor) + (1 - var(--cal-floor)) * var(--s, 1));
}
/* The selected section in every row; firmer in the selected rating's own. */
.cal-cell.cur { box-shadow: inset 0 0 0 1px var(--fc-dash); }
.cal-row.active .cal-cell.cur, .cal-cell.pinned { box-shadow: inset 0 0 0 2px var(--fc-text); }
.cal-cell.hov { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Where this rating peaks HERE — the answer the row exists to give. */
.cal-peak { width: 96px; flex: 0 0 96px; font-size: 16px; color: var(--fc-text-2); text-align: left; }
.cal-peak-none { color: var(--fc-muted); }
.cal-months { display: flex; gap: 8px; }
.cal-row ~ .cal-months { margin: 10px 120px 0 200px; }
.cal-month { flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; color: var(--fc-muted); }
/* A rating's paragraph: in the document for every row, open under the one the
   reader picked. */
.cal-prose { display: none; margin: 10px 120px 8px 200px; font-size: 17.5px; line-height: 1.65; color: var(--fc-text-2); text-wrap: pretty; }
.cal-row.active .cal-prose { display: block; }
.cal-myday-cta {
  height: 34px; border-radius: 3px; border: 1px dashed var(--fc-dash); background: none;
  font: inherit; font-size: 15.5px; color: var(--fc-text-2); cursor: pointer;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px;
}
.cal-myday-cta:hover { border-color: var(--accent); color: var(--fc-text); }
.cal-myday-setup { font: inherit; font-size: 16px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }

/* ── "My kind of day": the editor, under its row ── */
.pl-myday {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(420px, 100%); padding: 20px;
  background: var(--fc-panel); border-radius: 16px; box-shadow: var(--fc-panel-shadow);
  backdrop-filter: var(--fc-blur); -webkit-backdrop-filter: var(--fc-blur);
}
.pl-myday::before {
  content: ""; position: absolute; top: -6px; right: 44px; width: 12px; height: 12px;
  transform: rotate(45deg); background: var(--fc-panel);
}
.pl-md-head { display: flex; align-items: baseline; font-size: 19px; }
.pl-md-close { margin-left: auto; font: inherit; font-size: 16px; color: var(--fc-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.pl-md-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; color: var(--fc-muted); }
.pl-chip {
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--fc-outline); background: none;
  font: inherit; font-size: 13px; color: var(--fc-text-2); cursor: pointer;
}
.pl-chip:hover { border-color: var(--accent); color: var(--fc-text); }
.pl-md-line { margin-top: 16px; font-size: 15px; color: var(--fc-text-2); }
.pl-md-line b { font-weight: 600; color: var(--fc-text); }
.pl-md-sliders { display: grid; grid-template-columns: 96px 1fr 52px; gap: 10px 12px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--fc-text-2); }
.pl-md-sliders output { text-align: right; color: var(--fc-text); }
.pl-md-sliders input[type="range"] { width: 100%; accent-color: var(--accent); }
.pl-md-order-head { display: flex; align-items: baseline; margin-top: 18px; font-size: 14px; }
.pl-md-order-head span:last-child { margin-left: auto; font-size: 12.5px; color: var(--fc-muted); }
.pl-md-rank { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fc-hair-row); font-size: 14.5px; }
.pl-md-rank-n { width: 16px; color: var(--fc-muted); }
.pl-md-rank-label { flex: 1; }
.pl-md-rank-w { font-size: 12.5px; color: var(--fc-muted); }
.pl-md-up {
  width: 28px; height: 26px; border-radius: 7px; border: 1px solid var(--fc-outline);
  background: none; color: var(--fc-text-2); font: inherit; cursor: pointer;
}
.pl-md-up[disabled] { opacity: 0.3; cursor: default; }
.pl-md-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pl-md-foot span { flex: 1; font-size: 13px; line-height: 1.5; color: var(--fc-muted); }
.pl-btn {
  height: 36px; padding: 0 16px; border-radius: 9px; border: 0;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.pl-btn:hover { background: var(--accent-hover); }

/* ── charts ──
   The charts are strings with CHART_THEME's literals in them (so the tests can
   read them); these put the stylesheet's tokens back over the non-data ones, so
   a theme reaches them. A CSS rule outranks an SVG presentation attribute. */
.chart { width: 100%; height: 100%; display: block; }
.chart line[stroke="#18232e"] { stroke: var(--fc-chart-grid); }
.chart line[stroke="#2a3b4a"] { stroke: var(--fc-chart-zero); }
.chart text[fill="#8d9aa6"] { fill: var(--fc-chart-axis); }
.chart polyline[stroke="#eef2f5"] { stroke: var(--fc-chart-line); }
.chart-slot { position: relative; cursor: crosshair; }
.chart-svg { display: block; }
.chart-cursor { position: absolute; top: 0; bottom: 14px; width: 1px; background: var(--accent); opacity: 0.85; pointer-events: none; }
.chart-readout {
  position: absolute; top: 2px; pointer-events: none; font-size: 10px; color: var(--fc-text);
  background: var(--fc-tip); border: 1px solid var(--fc-hair-rule); border-radius: 5px; padding: 2px 6px; white-space: nowrap;
}
/* A static file carries the chart at BOTH widths, because it cannot know the
   viewport, and an SVG drawn at the wrong viewBox for its box is letterboxed
   inside it. This picks the one whose viewBox matches the box reserved below.
   Once the client draws, one SVG with neither class replaces both. */
.chart-atnarrow { display: none; }
.pl-chart-head { display: flex; align-items: baseline; gap: 10px; }
.pl-chart-unit { font-size: 15px; color: var(--fc-muted); }
.pl-chart-readout { margin-left: auto; font-size: 20px; white-space: nowrap; }
.pl-chart-main { margin-top: 10px; }
.pl-chart-main .chart-svg { aspect-ratio: 1000 / 240; }
.pl-caption { margin: 14px 0 0; max-width: 46em; font-size: 17.5px; line-height: 1.65; color: var(--fc-text-2); text-wrap: pretty; }
.pl-caption .pl-link { font-size: inherit; border-bottom: 1px solid var(--fc-accent-14); white-space: normal; text-align: left; }
.pl-chart-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px 44px; }
.pl-mini { display: block; text-align: left; font: inherit; color: var(--fc-text); background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.pl-mini-head { display: flex; align-items: baseline; gap: 9px; }
.pl-mini-title { font-size: 21px; }
.pl-mini-val { margin-left: auto; font-size: 16px; }
.pl-mini-unit { display: block; margin: 3px 0 10px; font-size: 13.5px; color: var(--fc-muted); }
.pl-mini .chart-svg { aspect-ratio: 340 / 220; }
.pl-sec[data-chart-mode="all"] .pl-chart-one { display: none; }

/* "Mid April, every reading": a labelled measurement per row. */
.summary { display: flex; flex-direction: column; }
.sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--fc-hair-row);
}
.sum-row:last-child { border-bottom: 0; }
.sum-label { font-size: 16.5px; color: var(--fc-muted); min-width: 0; }
.sum-val { font-size: 17px; color: var(--fc-text); white-space: nowrap; }
.pl-reading .pl-kicker { margin-bottom: 6px; }

/* ── tables ── */
.pl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 17px; }
.pl-table th, .pl-table td { padding: 12px 14px 12px 0; text-align: right; border-bottom: 1px solid var(--fc-hair-row); white-space: nowrap; }
.pl-table thead th {
  padding: 8px 12px 8px 0; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fc-muted); border-bottom-color: var(--fc-hair-rule);
}
.pl-table th:first-child { text-align: left; }
.pl-table tbody th { font-weight: 500; }
.pl-table tbody tr[data-goto-i] { cursor: pointer; }
.pl-table tbody tr[data-goto-i]:hover, .pl-table tbody tr.cur { background: var(--fc-hover); }
.pl-score-cell { font-weight: 600; }
/* A table of words (a region's seasons), not of figures. */
.pl-table-text { min-width: 520px; }
.pl-table-text th, .pl-table-text td { text-align: left; white-space: normal; }

/* ── cards ── */
/* Card grids step 4 → 2 → 1 and never through 3: four cards in three columns
   leaves one alone on a second row. */
.pl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pl-cards-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-card { display: block; padding: 16px 18px; border: 1px solid var(--fc-hair-rule); border-radius: 14px; min-width: 0; }
a.pl-card { color: var(--fc-text) !important; }
a.pl-card:hover { border-color: var(--accent); }
.pl-card-name { display: block; font-size: 21px; color: var(--fc-text) !important; }
a.pl-card-name:hover { color: var(--accent) !important; }
.pl-card-where { margin-top: 3px; font-size: 15px; color: var(--fc-muted); }
.pl-card-big { margin-top: 14px; font-size: 28px; letter-spacing: -0.02em; }
.pl-card-band { margin-left: 8px; font-size: 15px; letter-spacing: 0; }
.pl-card-more { display: inline-block; margin-top: 8px; font-size: 15px; color: var(--fc-muted) !important; }
.pl-card-title { margin-top: 8px; font-size: 24px; letter-spacing: -0.01em; }
.pl-card-text { display: block; margin-top: 6px; font-size: 16.5px; line-height: 1.5; color: var(--fc-text-2); }
.pl-cards-links .pl-card-name { font-size: 17px; font-weight: 600; }

/* The four seasons. */
.pl-seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pl-season { padding: 18px; border: 1px solid var(--fc-hair-rule); border-radius: 14px; cursor: pointer; min-width: 0; }
.pl-season:hover { border-color: var(--fc-outline); }
.pl-season.cur { background: var(--fc-hover); }
.pl-season-head { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; font-weight: 400; }
.pl-season-kw { flex: 0 0 100%; font-size: 13.5px; color: var(--fc-muted); }
.pl-season-name { font-size: 22px; text-transform: capitalize; }
.pl-season-span { margin-left: auto; font-size: 14.5px; color: var(--fc-muted); }
.pl-strip { display: flex; gap: 3px; margin-top: 12px; }
.pl-strip span { flex: 1; height: 6px; border-radius: 2px; background: var(--fc-fill-strong); }
.pl-strip span.on { background: var(--accent); }
.pl-season-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: 17px; }
.pl-season-text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--fc-muted); }
/* Short titled paragraphs side by side: as many columns as there are items, so
   none is left over (three, or two-by-two for four). */
.pl-qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; margin-top: 34px; }
.pl-qa:has(> :nth-child(2):last-child), .pl-qa:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-qa:has(> :first-child:last-child) { grid-template-columns: minmax(0, 46em); }
.pl-sec-head + .pl-qa { margin-top: 0; }
.pl-qa-item h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.pl-qa-item p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--fc-text-2); text-wrap: pretty; }

/* Link groups: a small heading, an optional lead link, then a run of links. */
.pl-lgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 40px; margin-top: 32px; font-size: 17px; }
.pl-sec-head + .pl-lgroups { margin-top: 0; }
.pl-lgroup-title { margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fc-muted); }
.pl-lgroup-lead { display: inline-block; margin-bottom: 5px; }
.pl-lgroup-links { line-height: 1.9; }

/* The briefing's way to the guide. */
.pl-guidecard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 24px 26px; border: 1px solid var(--fc-hair-rule); border-radius: 16px; color: var(--fc-text) !important;
}
.pl-guidecard:hover { border-color: var(--accent); }
.pl-guidecard-body { display: block; min-width: 0; }
.pl-guidecard .pl-eyebrow { display: block; font-size: 12.5px; }
.pl-guidecard-title { display: block; margin-top: 8px; font-size: 26px; letter-spacing: -0.01em; }
.pl-guidecard-text { display: block; margin-top: 8px; max-width: 52em; font-size: 17.5px; line-height: 1.6; color: var(--fc-text-2); text-wrap: pretty; }
.pl-guidecard-go { font-size: 15px; color: var(--accent); white-space: nowrap; }
.pl-also { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 16.5px; }

/* ── a country ── */
.pl-cbars { display: flex; gap: 10px; align-items: flex-end; height: 200px; margin-top: 14px; border-bottom: 1px solid var(--fc-hair-rule); }
.pl-cbar {
  flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.pl-cbar-v { margin-bottom: 4px; font-size: 12px; color: var(--fc-muted); text-align: center; }
.pl-cbar-fill { display: block; border-radius: 3px 3px 0 0; opacity: 0.8; }
.pl-cbar.cur .pl-cbar-fill { opacity: 1; box-shadow: 0 0 0 1.5px var(--fc-text); }
.pl-cbars + .pl-axis, .pl-cbars[hidden] + .pl-axis { gap: 10px; }
.pl-cbars ~ .pl-axis { gap: 10px; }
.pl-cprose { margin: 0; font-size: 19px; line-height: 1.55; color: var(--fc-text); text-wrap: pretty; }
.pl-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 11px 0; border-top: 1px solid var(--fc-hair-row); }
.pl-crow.hot { background: var(--fc-hover); }
.pl-crow-name { width: 176px; flex: 0 0 176px; font-size: 17px; color: var(--fc-text) !important; }
.pl-crow-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-cs { flex: 1; min-width: 0; height: 22px; border-radius: 3px; background: var(--fc-fill); }
.pl-cs.on { background: var(--accent); }
.pl-cs.cur { box-shadow: inset 0 0 0 1.5px var(--fc-text); }
.pl-crow-text { width: 160px; flex: 0 0 160px; font-size: 15.5px; color: var(--fc-text-2); }
.pl-axis-rows { gap: 8px; margin: 10px 184px 0 200px; }

/* ── a ranking ── */
.pl-rank { list-style: none; margin: 0; padding: 0; }
.pl-rk {
  display: grid; grid-template-columns: 36px minmax(0, 1.5fr) minmax(0, 1fr) 120px; gap: 24px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--fc-hair-row);
}
.pl-rk.hot { background: var(--fc-hover); }
.pl-rk-n { font-size: 15px; color: var(--fc-muted); }
.pl-rk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-rk-name { font-size: 21px; font-weight: 600; color: var(--fc-text) !important; border-bottom: 1px solid var(--fc-hair-rule); }
.pl-rk-name:hover { border-bottom-color: var(--accent); }
.pl-rk-where { font-size: 15px; color: var(--fc-muted); }
.pl-rk-line { margin: 4px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--fc-text-2); text-wrap: pretty; }
.pl-rk-bar { display: flex; align-items: center; gap: 10px; }
.pl-track { flex: 1; height: 8px; border-radius: 4px; background: var(--fc-fill); overflow: hidden; }
.pl-track span { display: block; height: 100%; border-radius: 4px; }
.pl-rk-val { width: 62px; text-align: right; font-size: 15.5px; white-space: nowrap; }
.pl-rk-badge { text-align: right; font-size: 16.5px; font-weight: 600; white-space: nowrap; }

/* ── the footer ── */
.pl-foot {
  margin: 64px var(--pl-gutter) 0; padding: 22px 0 80px;
  border-top: 1px solid var(--fc-hair-rule); color: var(--fc-muted); font-size: 15.5px; line-height: 1.6;
}
.pl-foot p { margin: 0 0 6px; }
.pl-credit { font-size: 13.5px; }
.pl-foot a, .pl-foot .pl-linkbtn { color: var(--fc-muted) !important; border-bottom: 1px solid var(--fc-hair-rule); }
.pl-foot a:hover, .pl-foot .pl-linkbtn:hover { color: var(--fc-text) !important; }

/* ── narrow: one column, and the calendar's cells under its names ── */
@media (max-width: 1100px) {
  .pl-side { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pl-cards, .pl-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-qa { grid-template-columns: minmax(0, 1fr); }
  .pl-qa:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pl-cards, .pl-cards-wide, .pl-seasons, .pl-qa, .pl-qa:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --pl-band-h: min(50vh, 460px); }
  @supports (height: 1dvh) { :root { --pl-band-h: min(50dvh, 460px); } }
  .pl-desk { display: none !important; }
  .pl-mast { bottom: 20px; gap: 12px; }
  .pl-mast-text { flex-basis: 100%; }
  .pl-answer { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px var(--pl-gutter) 30px; }
  .pl-verdict { text-align: left; min-height: 0; }
  .pl-bar { gap: 12px; }
  /* The sentence can be longer than the screen ("My kind of day · late
     September · midday"): it scrolls sideways rather than losing its last word. */
  .pl-state { margin-left: 0; flex: 1; gap: 8px; font-size: 14.5px; overflow-x: auto; scrollbar-width: none; }
  .pl-state::-webkit-scrollbar { display: none; }
  .pl-top { gap: 12px; padding-top: 18px; }
  .pl-menu { right: auto; left: var(--pl-gutter); }
  .pl-h2 { font-size: 28px; }
  .pl-sec { padding-top: 56px; }
  .pl-unit { display: block; margin: 6px 0 0; }
  .pl-seg-end { margin-left: 0; }
  /* Name and peak share a line; the cells take the full width under them. */
  .cal-line, .pl-crow { gap: 6px 12px; }
  .cal-line .cal-label, .pl-crow-name { width: auto; flex: 1 1 auto; }
  .cal-line .cal-cells, .pl-crow .cal-cells { flex: 1 1 100%; order: 2; gap: 3px; touch-action: pan-y; }
  .cal-line .cal-monthgroup, .pl-crow .cal-monthgroup { gap: 1.5px; }
  .cal-line .cal-peak, .pl-crow-text { width: auto; flex: 0 0 auto; }
  .cal-row ~ .cal-months, .pl-axis-rows { margin: 8px 0 0; gap: 3px; }
  .cal-row ~ .cal-months .cal-month { font-size: 10px; }
  .cal-prose { margin: 8px 0 6px; }
  .chart-slot { touch-action: pan-y; }
  .chart-atwide { display: none; }
  .chart-atnarrow { display: block; }
  .pl-chart-main .chart-svg { aspect-ratio: 340 / 220; }
  .pl-chart-readout { font-size: 15px; }
  .pl-cbars { gap: 4px; height: 160px; }
  .pl-cbars ~ .pl-axis { gap: 4px; font-size: 10px; }
  .pl-cbar-v { font-size: 10px; }
  .pl-rk { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; }
  .pl-rk-bars { grid-column: 2 / 4; order: 4; }
  .pl-guidecard { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .pl-ticks { gap: 3px; }
  .pl-tick-month { gap: 1px; }
  .pl-axis { gap: 3px; font-size: 10px; }
  /* The full map's panel becomes a sheet over the lower half. */
  .pl-panel { top: 46vh; left: 8px; right: 8px; bottom: 8px; width: auto; }
  .pl-panel-title { font-size: 30px; }
}