/* ═══════════════════════════════════════════════════════════════════════════
   Atlas — the Padelnomics design system (2026-09-22)

   One file: the tokens every surface reads, and the components the rebuilt
   pages are made of. Plain CSS: no build step, loaded
   after the Tailwind output on every page.

   The one bold thing is the map. Everything here is meant to sit quietly on
   top of it: text-first sections split by hairlines rather than cards inside
   cards, one lock treatment, figures in tabular DM Sans, place names and hero
   figures in Bricolage Grotesque.

   Colour does jobs, never decoration (ramps validated 2026-09-22 with the
   dataviz validator, ordinal checks on Chalk):
     Turf   — opportunity: the score and its five bands.
     Court  — action and selection; occupancy is a sequence of Court.
     Violet — the supply gap, when it is on screen with the score.
     Status — planning approved / pending / refused / withdrawn, always with a
              shape and a word beside the colour.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ink and ground ── */
  --ink: #0B1B3B;            /* the only navy */
  --ink-2: #435069;          /* secondary text */
  --ink-3: #6B7890;          /* muted: axis labels, notes */
  --chalk: #F2F4F7;          /* app ground, basemap land */
  --chalk-2: #E8ECF1;        /* hover wash, inset wells */
  --paper: #FFFFFF;          /* the panel, the card */
  --hairline: rgba(11, 27, 59, 0.10);
  --hairline-strong: rgba(11, 27, 59, 0.18);

  /* ── Action ── */
  --court: #1D4ED8;
  --court-hover: #1A44BE;
  --court-wash: #EEF3FF;
  --focus: #1D4ED8;

  /* ── Opportunity: Turf, five ordinal bands (0–20 … 80–100) ── */
  --turf: #0E7C66;
  --turf-1: #67BAA3;
  --turf-2: #44A28B;
  --turf-3: #268A73;
  --turf-4: #02715C;
  --turf-5: #005847;
  --turf-wash: #E7F4EF;

  /* ── Occupancy: Court, five bands ── */
  --occ-1: #81A9FE;
  --occ-2: #598BFF;
  --occ-3: #366CF8;
  --occ-4: #2052DC;
  --occ-5: #0B36C0;

  /* ── Supply gap: violet, five bands ── */
  --gap-1: #B994F7;
  --gap-2: #A278E4;
  --gap-3: #8A5FC9;
  --gap-4: #7347AF;
  --gap-5: #5D2E95;

  /* ── Status (planning) — colour plus shape plus word, never colour alone ── */
  --status-approved: #2E7D32;
  --status-submitted: #C77C02;   /* pending a decision */
  --status-refused: #8E1B5A;
  --status-withdrawn: #64748B;
  --status-other: #64748B;

  /* ── Signal and errors ── */
  --signal: #B45309;
  --signal-wash: #FDF3E7;
  --critical: #B42318;

  /* ── No value ── */
  --none: #A3AEBF;

  /* ── Type ── */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --step--1: 0.75rem;     /* 12 */
  --step-0: 0.875rem;     /* 14 — the app's body */
  --step-1: 1rem;         /* 16 — the marketing body */
  --step-2: 1.25rem;      /* 20 */
  --step-3: 1.5625rem;    /* 25 */
  --step-4: 1.9375rem;    /* 31 — a card's place name */
  --step-5: 3.0625rem;    /* 49 — the score, a hero figure */
  --lh-tight: 1.15;
  --lh-ui: 1.45;
  --lh-prose: 1.6;

  /* ── Shape: radius follows hierarchy ── */
  --r-xs: 4px;       /* bars, data ends */
  --r-s: 6px;        /* chips, inputs */
  --r-m: 10px;       /* buttons, popovers */
  --r-l: 16px;       /* the floating panel */

  /* ── Elevation: only what floats over the map lifts ── */
  --lift-float: 0 1px 2px rgba(11, 27, 59, 0.06), 0 8px 28px rgba(11, 27, 59, 0.12);
  --lift-pop: 0 2px 6px rgba(11, 27, 59, 0.08), 0 16px 40px rgba(11, 27, 59, 0.16);

  /* ── Space: 4px base ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* ── Motion ── */
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-quick: 140ms;
  --dur-move: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-move: 0ms;
  }
}

/* ═══ Type ════════════════════════════════════════════════════════════════ */

.a-display {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.a-figure {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.a-hero-figure {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.a-muted { color: var(--ink-3); }
.a-soft { color: var(--ink-2); }
.a-prose {
  font-size: var(--step-1);
  line-height: var(--lh-prose);
  color: var(--ink-2);
  max-width: 68ch;
}

/* ═══ Buttons ═════════════════════════════════════════════════════════════ */

.a-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  font: 600 var(--step-0) / 1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-quick) var(--motion-ease),
              border-color var(--dur-quick) var(--motion-ease),
              color var(--dur-quick) var(--motion-ease);
  white-space: nowrap;
}
.a-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.a-btn--primary { background: var(--court); color: #fff; }
.a-btn--primary:hover { background: var(--court-hover); }
.a-btn--quiet { background: var(--paper); color: var(--ink); border-color: var(--hairline-strong); }
.a-btn--quiet:hover { border-color: var(--ink-3); background: var(--chalk); }
.a-btn--ghost { background: transparent; color: var(--ink-2); padding: 0 var(--s-2); }
.a-btn--ghost:hover { background: var(--chalk-2); color: var(--ink); }
.a-btn--small { min-height: 28px; padding: 0 var(--s-3); font-size: var(--step--1); }
.a-btn[aria-disabled="true"], .a-btn:disabled { opacity: 0.5; pointer-events: none; }

.a-link {
  color: var(--court);
  font-weight: 600;
  text-decoration: none;
}
.a-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Chips: the layer switch, the filters, the radius ═══════════════════ */

.a-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.a-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-s);
  background: var(--paper);
  color: var(--ink-2);
  font: 500 var(--step-0) / 1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-quick) var(--motion-ease), color var(--dur-quick) var(--motion-ease);
}
.a-chip:hover { background: var(--chalk); color: var(--ink); }
.a-chip[aria-pressed="true"], .a-chip[aria-current="true"], .a-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.a-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.a-chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* ═══ The floating panel and its sections ════════════════════════════════ */

.a-panel {
  background: var(--paper);
  border-radius: var(--r-l);
  box-shadow: var(--lift-float);
  color: var(--ink);
  font: 400 var(--step-0) / var(--lh-ui) var(--font-ui);
}
.a-section {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hairline);
}
.a-section:first-child { border-top: 0; }
.a-section__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font: 600 var(--step-0) / 1.3 var(--font-ui);
  color: var(--ink);
}
.a-section__title small { font-weight: 400; color: var(--ink-3); font-size: var(--step--1); }

/* ═══ Figures: a value, its label, its count ═════════════════════════════ */

.a-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-3) var(--s-4);
}
.a-stat__value {
  font: 600 var(--step-2) / 1.1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.a-stat__label { margin-top: 2px; font-size: var(--step--1); color: var(--ink-3); }
.a-stat__note { margin-top: 2px; font-size: var(--step--1); color: var(--ink-3); font-style: normal; }

/* A row of figures in a table-like strip: bands, comparisons. */
.a-grid-rows { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.a-grid-rows th, .a-grid-rows td { padding: 6px 0; text-align: right; font-size: var(--step-0); }
.a-grid-rows th:first-child, .a-grid-rows td:first-child { text-align: left; }
.a-grid-rows thead th { font-weight: 500; font-size: var(--step--1); color: var(--ink-3); padding-bottom: var(--s-1); }
.a-grid-rows tbody tr + tr td { border-top: 1px solid var(--hairline); }

/* ═══ The one lock ════════════════════════════════════════════════════════
   A paid value the reader is not entitled to: a constant glyph under a blur,
   beside the lock. The glyph never depends on the value — it is not the
   value blurred, because the value was never selected. */

.a-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.a-lock__glyph { filter: blur(3px); user-select: none; letter-spacing: 1px; color: var(--ink-2); }
.a-lock__icon { width: 12px; height: 12px; flex: none; color: var(--ink-3); }

/* ═══ The verdict: the answer, first ═════════════════════════════════════ */

/* Rendered by `partials/_verdict.html::verdict_line(v, 'a-card')`, the one
   macro that words a verdict on every surface. */
.a-card__verdict {
  margin: 0;
  font: 600 var(--step-2) / 1.3 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.a-card__verdict--room { color: var(--turf-5); }
.a-card__verdict--served { color: var(--ink); }
.a-card__verdict--unknown { color: var(--ink-2); font-weight: 500; }

/* ═══ Score: the number and its three pillars ════════════════════════════ */

.a-score { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); align-items: center; }
.a-score__value { font: 700 var(--step-5) / 1 var(--font-display); letter-spacing: -0.02em; color: var(--turf-5); }
.a-score__value[data-band="1"] { color: var(--turf-2); }
.a-score__value[data-band="2"] { color: var(--turf-3); }
.a-score__value[data-band="3"] { color: var(--turf-4); }
.a-score__value[data-band="4"],
.a-score__value[data-band="5"] { color: var(--turf-5); }
.a-score__rank { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-3); }
.a-pillars { display: grid; gap: 6px; }
.a-pillar { display: grid; grid-template-columns: 7.5rem 1fr 2.25rem; gap: var(--s-2); align-items: center; font-size: var(--step--1); color: var(--ink-2); }
.a-pillar__track { display: block; height: 6px; border-radius: var(--r-xs); background: var(--chalk-2); overflow: hidden; }
.a-pillar__fill { display: block; height: 100%; border-radius: var(--r-xs); background: var(--turf-3); }
.a-pillar__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ═══ Inline bar: a share of something ═══════════════════════════════════ */

.a-bar { display: flex; height: 6px; border-radius: var(--r-xs); overflow: hidden; background: var(--chalk-2); gap: 2px; }
.a-bar > span { display: block; height: 100%; }

/* ═══ Legend: the map's key, in words ════════════════════════════════════ */

.a-legend { display: grid; gap: 6px; font-size: var(--step--1); color: var(--ink-2); }
.a-legend__ramp { display: flex; gap: 2px; }
.a-legend__ramp span { flex: 1; height: 8px; border-radius: 2px; }
.a-legend__ends { display: flex; justify-content: space-between; color: var(--ink-3); }
.a-legend__item { display: flex; align-items: center; gap: 6px; }
.a-legend__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.a-legend__swatch--ring { background: transparent !important; border: 2.5px solid currentColor; }

/* ═══ Skeleton: a section that is on its way ═════════════════════════════ */

.a-skel { display: grid; gap: var(--s-2); }
.a-skel span {
  display: block;
  height: 12px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--chalk-2) 0%, var(--chalk) 40%, var(--chalk-2) 80%);
  background-size: 300% 100%;
  animation: a-skel 1.4s var(--motion-ease) infinite;
}
.a-skel span:nth-child(2) { width: 82%; }
.a-skel span:nth-child(3) { width: 64%; }
@keyframes a-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .a-skel span { animation: none; } }

/* ═══ Fields ══════════════════════════════════════════════════════════════ */

.a-field { display: grid; gap: 6px; }
.a-field__label { font: 500 var(--step--1) / 1.3 var(--font-ui); color: var(--ink-2); }
.a-input, .a-select {
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-s);
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0) / 1 var(--font-ui);
}
.a-input:focus-visible, .a-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.a-input--small { height: 30px; padding: 0 var(--s-2); font-size: var(--step--1); }

/* Read by a screen reader, not drawn. */
.a-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The omnibox: the one search, floating over the map. */
.a-omnibox {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-3) 0 var(--s-4);
  border-radius: var(--r-m);
  background: var(--paper);
  box-shadow: var(--lift-float);
}
.a-omnibox input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 var(--step-1) / 1 var(--font-ui);
  color: var(--ink);
}
.a-omnibox input::placeholder { color: var(--ink-3); }
.a-omnibox:focus-within { box-shadow: var(--lift-float), 0 0 0 2px var(--focus); }
.a-kbd {
  padding: 2px 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xs);
  font: 500 11px / 1 var(--font-ui);
  color: var(--ink-3);
}

/* ═══ Popover and map tooltip ════════════════════════════════════════════ */

.a-pop {
  background: var(--paper);
  border-radius: var(--r-m);
  box-shadow: var(--lift-pop);
  padding: var(--s-3) var(--s-4);
  color: var(--ink);
  font: 400 var(--step-0) / var(--lh-ui) var(--font-ui);
}
.a-tip.maplibregl-popup .maplibregl-popup-content {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-s);
  box-shadow: var(--lift-pop);
  font: 500 var(--step--1) / 1.35 var(--font-ui);
  color: var(--ink);
}
.a-tip.maplibregl-popup .maplibregl-popup-tip { display: none; }
.a-tip strong { display: block; font-weight: 600; font-size: var(--step-0); }

/* ═══ Tables ══════════════════════════════════════════════════════════════ */

.a-table-wrap { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.a-table th {
  position: sticky;
  top: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline-strong);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
}
.a-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline); color: var(--ink); }
.a-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.a-table tbody tr:hover td { background: var(--chalk); }
.a-table a { color: inherit; text-decoration: none; font-weight: 500; }
.a-table a:hover { color: var(--court); }

/* ═══ Bottom sheet (phones) ══════════════════════════════════════════════ */

.a-sheet__handle {
  display: block;
  width: 100%;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
}
.a-sheet__handle::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 8px auto;
  border-radius: 2px;
  background: var(--hairline-strong);
}
.a-sheet__handle:focus-visible::before { background: var(--focus); }

/* ── Sparkline ─────────────────────────────────────────────────────────── */
.a-spark { display: block; max-width: 100%; height: auto; color: var(--court); overflow: visible; }

/* ── Markets: the country grid ─────────────────────────────────────────── */
/* An index, not a deck of cards: each country sits under a hairline, its
   name first, then three figures, the move, and the line. */
.mkt { max-width: 72rem; margin: 0 auto; padding-block: var(--s-10) var(--s-10); }
.mkt__title { font: 700 var(--step-4) / 1.1 var(--font-display); color: var(--ink); margin: 0 0 var(--s-2); }
.mkt__lede { color: var(--ink-2); font-size: var(--step-1); max-width: 40rem; margin: 0 0 var(--s-8); }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: var(--s-8) var(--s-6); }
.mkt-country { border-top: 1px solid var(--hairline); padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.mkt-country.is-home { border-top: 2px solid var(--ink); }
.mkt-country__name { font: 700 var(--step-2) / 1.2 var(--font-display); color: var(--ink); text-decoration: none; }
.mkt-country__name:hover { color: var(--court); }
.mkt-country .a-stats { gap: var(--s-4); }
.mkt-country .a-stat__value { font-size: var(--step-2); }
.mkt-country__move { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.mkt-country__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--step--1); margin-top: auto; }
.mkt__rest { margin-top: var(--s-8); font-size: var(--step-0); color: var(--ink-2); }
.mkt__note { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-3); max-width: 44rem; }
.mkt__essays { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.mkt__essays h2 { font: 700 var(--step-3) / 1.2 var(--font-display); color: var(--ink); margin: 0 0 var(--s-5); }

/* Every figure set with the old monospace token keeps its columns aligned. */
.font-mono { font-variant-numeric: tabular-nums; }

/* ── The navigation bar ───────────────────────────────────────────────────
   One bar on every page and over the map (`partials/_nav.html`). Paper with a
   hairline; the wordmark in Bricolage; four places in DM Sans; the current
   one in ink with a court-blue rule on the bar's bottom edge. No chevrons,
   no capitals, no arrows. `--nav-h` is what the workspace sits below. */
:root { --nav-h: 56px; }
.pn-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-ui);
}
.pn-nav__inner {
  max-width: 72rem; height: var(--nav-h); margin: 0 auto;
  padding: 0 var(--s-4);
  display: flex; align-items: stretch; gap: var(--s-6);
}
.pn-nav__mark {
  align-self: center;
  font: 800 1.125rem / 1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.pn-nav__here { display: none; }
.pn-nav__items { display: flex; align-items: stretch; gap: var(--s-5); flex: 1; }
.pn-nav__end { display: flex; align-items: stretch; gap: var(--s-5); }
.pn-nav__item {
  position: relative; display: inline-flex; align-items: center;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  transition: color var(--dur-quick) ease;
}
.pn-nav__item:hover { color: var(--ink); }
.pn-nav__item[aria-current="page"] { color: var(--ink); }
.pn-nav__item[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--court);
}
.pn-nav__item:focus-visible, .pn-nav__mark:focus-visible, .pn-nav__signin:focus-visible,
.pn-nav__account > summary:focus-visible, .pn-nav__toggle:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s);
}
.pn-nav__signin {
  align-self: center; display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 var(--s-4);
  border-radius: var(--r-m); background: var(--court); color: #fff;
  font-size: var(--step-0); font-weight: 600; text-decoration: none;
}
.pn-nav__signin:hover { background: var(--court-hover); color: #fff; }

.pn-nav__account { position: relative; align-self: center; }
.pn-nav__account > summary { list-style: none; cursor: pointer; }
.pn-nav__account > summary::-webkit-details-marker { display: none; }
.pn-nav__disc {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ink); color: #fff;
  font: 600 0.8125rem / 1 var(--font-ui); letter-spacing: 0.02em;
}
.pn-nav__menu {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 60;
  min-width: 14rem; padding: var(--s-2);
  background: var(--paper); border-radius: var(--r-m); box-shadow: var(--lift-pop);
}
.pn-nav__menu a, .pn-nav__menu button, .pn-nav__sheet a, .pn-nav__sheet button {
  display: block; width: 100%; text-align: left;
  padding: 10px var(--s-3); border: 0; border-radius: var(--r-s);
  background: none; font: 500 var(--step-0) / 1.3 var(--font-ui);
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.pn-nav__menu a:hover, .pn-nav__menu button:hover,
.pn-nav__sheet a:hover, .pn-nav__sheet button:hover { background: var(--chalk); }
.pn-nav__menu form, .pn-nav__sheet form { margin: 0; }
.pn-nav__who {
  margin: 0 0 var(--s-1); padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-weight: 600; color: var(--ink); font-size: var(--step-0);
}
.pn-nav__who span { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--step--1); margin-top: 2px; }

.pn-nav__toggle {
  display: none; align-self: center; margin-left: auto;
  width: 40px; height: 40px; place-items: center;
  border: 0; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer;
}
.pn-nav__toggle:hover { background: var(--chalk); }
.pn-nav__sheet {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  padding: var(--s-2) var(--s-4) var(--s-4);
  background: var(--paper); border-bottom: 1px solid var(--hairline); box-shadow: var(--lift-float);
}
.pn-nav__sheet a[aria-current="page"] { font-weight: 600; box-shadow: inset 2px 0 0 var(--court); }
.pn-nav__sheet .pn-nav__who { margin-top: var(--s-3); border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
.pn-nav__sheet .pn-nav__signin { display: inline-flex; width: auto; margin-top: var(--s-3); color: #fff; }

/* The bar clears a phone's notch itself, so nothing under it has to. */
.pn-nav { padding-top: env(safe-area-inset-top, 0px); }
@media (max-width: 899px) {
  :root { --nav-h: 48px; }
  .pn-nav__items, .pn-nav__end { display: none; }
  .pn-nav__toggle { display: inline-grid; }
  .pn-nav__inner { gap: var(--s-3); }
  .pn-nav__here { display: block; align-self: center; color: var(--ink-3); font-size: var(--step-0); }
}
@media (prefers-reduced-motion: reduce) { .pn-nav__item { transition: none; } }

/* ── Feedback: a small round button in the corner ─────────────────────────
   Icon only, its name in the tooltip and the aria-label. A reader can hide
   it from its own popover (`data-hidden`, remembered in the browser); the
   footer's Feedback link opens the same form either way. */
.pn-feedback {
  position: fixed; z-index: 1100;
  right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.pn-feedback__btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--hairline-strong);
  background: var(--paper); color: var(--ink-2);
  box-shadow: 0 2px 10px rgba(11, 27, 59, 0.12);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.pn-feedback__btn:hover { color: var(--court); border-color: var(--court); }
.pn-feedback__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pn-feedback[data-hidden] .pn-feedback__btn { display: none; }
.pn-feedback__hide {
  display: block; margin: 10px auto 0; padding: 2px 4px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; color: var(--ink-3); text-decoration: underline;
}
.pn-feedback__hide:hover { color: var(--ink); }
@media (max-width: 640px) {
  .pn-feedback { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pn-feedback__btn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .pn-feedback__btn { transition: none; } }