:root{
  color-scheme: light;
  --bg: oklch(98.6% 0.004 285);
  --surface: oklch(100% 0 0);
  --surface-alt: oklch(97.2% 0.008 285);
  --text: oklch(24% 0.022 285);
  --text-secondary: oklch(48% 0.02 285);
  --muted: oklch(61% 0.015 285);
  --border: oklch(92.5% 0.007 285);

  /* Indigo drives the interface — navigation, links, focus, buttons. The
     accents below stay put: sage/rose/etc. encode which place a number came
     from, and --rise/--fall encode direction, so neither may follow a theme. */
  --primary: oklch(52% 0.16 277);
  --primary-tint: oklch(95.5% 0.028 277);
  --primary-text: oklch(43% 0.15 277);

  --sage: oklch(58% 0.085 150);
  --sage-tint: oklch(93% 0.03 150);
  --sage-text: oklch(40% 0.08 150);
  --gold: oklch(76% 0.11 85);
  --gold-tint: oklch(94% 0.035 85);
  --gold-text: oklch(40% 0.09 85);
  --rose: oklch(58% 0.11 20);
  --rose-tint: oklch(93% 0.035 15);
  --rose-text: oklch(42% 0.1 15);
  --lavender: oklch(58% 0.09 300);
  --lavender-tint: oklch(93% 0.032 300);
  --lavender-text: oklch(42% 0.09 300);
  --teal: oklch(58% 0.085 195);
  --teal-tint: oklch(93% 0.03 195);
  --teal-text: oklch(40% 0.08 195);
  --periwinkle: oklch(58% 0.09 250);
  --periwinkle-tint: oklch(93% 0.032 250);
  --periwinkle-text: oklch(42% 0.09 250);
  --moss: oklch(58% 0.09 115);
  --moss-tint: oklch(93% 0.03 115);
  --moss-text: oklch(40% 0.08 115);
  --berry: oklch(58% 0.11 340);
  --berry-tint: oklch(93% 0.035 340);
  --berry-text: oklch(42% 0.1 340);

  --rise: oklch(52% 0.11 145);
  --fall: oklch(53% 0.135 30);

  /* Gender badges are deliberately separate tokens from the decorative
     accents above and from the sage/rose country-coding — never reuse
     --sage/--gold/--rose/--lavender for a gender badge. */
  --girl-tint: oklch(93% 0.03 15);
  --girl-text: oklch(45% 0.1 15);
  --boy-tint: oklch(92% 0.02 235);
  --boy-text: oklch(45% 0.08 235);

  --btn-text: oklch(98% 0.01 60);
  --btn-gradient-start: oklch(58% 0.15 285);
  --btn-gradient-end: oklch(45% 0.17 272);

  /* Spacing, size and type carry no color, so unlike the tokens above they
     are defined once here and are the same in light and dark mode.

     The number in a --space-* / --font-size-* name IS the value in pixels.
     The scale is uneven on purpose: it was read off the existing layout
     rather than imposed on it, so 24 and 26 both exist and neither may be
     rounded to the other. Values that appear fewer than three times in one
     role stay written out at the rule that uses them. */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-26: 26px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --font-size-12-5: 12.5px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;

  --border-width: 1px;
  --radius-pill: 999px;
  --radius-card: 20px;
  --measure: 68ch;

  --overlay-shadow: 0 12px 32px oklch(0% 0 0 / 0.12);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / .04), 0 8px 24px oklch(0% 0 0 / .05);
  --hero-start: oklch(97% 0.025 340);
  --hero-mid: oklch(98% 0.012 320);
  --hero-end: oklch(96.5% 0.03 275);
  --hero-blob-start: oklch(92% 0.05 340);
  --hero-blob-end: oklch(92% 0.05 275);
  --shadow-search: 0 2px 10px oklch(0% 0 0 / .05);
  --shadow-banner: 0 10px 30px oklch(45% 0.17 272 / .28);
  --card-border: oklch(94% 0.006 285);
}

/* Dark mode is opt-in, not automatic. prefers-color-scheme is deliberately
   NOT honoured: the site defaults to light for every visitor, and dark is
   applied only by the toggle setting data-theme="dark" below. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(17.5% 0.012 285);
  --surface: oklch(21.5% 0.014 285);
  --surface-alt: oklch(25% 0.016 285);
  --text: oklch(95% 0.008 285);
  --text-secondary: oklch(76% 0.015 285);
  --muted: oklch(62% 0.015 285);
  --border: oklch(31% 0.014 285);
  --primary: oklch(72% 0.13 277);
  --primary-tint: oklch(30% 0.05 277);
  --primary-text: oklch(82% 0.11 277);

  --sage: oklch(68% 0.09 150);
  --sage-tint: oklch(30% 0.04 150);
  --sage-text: oklch(78% 0.08 150);
  --gold: oklch(80% 0.11 85);
  --gold-tint: oklch(32% 0.05 85);
  --gold-text: oklch(82% 0.09 85);
  --rose: oklch(68% 0.11 20);
  --rose-tint: oklch(30% 0.045 15);
  --rose-text: oklch(80% 0.09 15);
  --lavender: oklch(68% 0.09 300);
  --lavender-tint: oklch(30% 0.04 300);
  --lavender-text: oklch(78% 0.08 300);
  --teal: oklch(68% 0.09 195);
  --teal-tint: oklch(30% 0.04 195);
  --teal-text: oklch(78% 0.08 195);
  --periwinkle: oklch(68% 0.09 250);
  --periwinkle-tint: oklch(30% 0.04 250);
  --periwinkle-text: oklch(78% 0.08 250);
  --moss: oklch(68% 0.09 115);
  --moss-tint: oklch(30% 0.04 115);
  --moss-text: oklch(78% 0.08 115);
  --berry: oklch(68% 0.11 340);
  --berry-tint: oklch(30% 0.045 340);
  --berry-text: oklch(80% 0.09 340);

  --rise: oklch(65% 0.13 145);
  --fall: oklch(65% 0.14 30);

  --girl-tint: oklch(30% 0.045 15);
  --girl-text: oklch(80% 0.08 15);
  --boy-tint: oklch(28% 0.03 235);
  --boy-text: oklch(78% 0.06 235);

  --btn-text: oklch(98% 0.01 60);
  --btn-gradient-start: oklch(60% 0.15 285);
  --btn-gradient-end: oklch(48% 0.16 272);
  --overlay-shadow: 0 12px 32px oklch(0% 0 0 / 0.45);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / .3), 0 8px 24px oklch(0% 0 0 / .35);
  --hero-start: oklch(26% 0.04 340);
  --hero-mid: oklch(25% 0.04 300);
  --hero-end: oklch(24% 0.045 277);
  --hero-blob-start: oklch(32% 0.05 340);
  --hero-blob-end: oklch(32% 0.05 277);
  --shadow-search: 0 2px 10px oklch(0% 0 0 / .3);
  --shadow-banner: 0 10px 30px oklch(0% 0 0 / .45);
  --card-border: var(--border);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Karla', sans-serif;
}
a { color: var(--primary); text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
a:hover { color: var(--primary-text); }
h1, h2, h3 { font-family: 'Newsreader', serif; font-weight: 500; text-wrap: pretty; margin: 0 0 var(--space-12); }

.wrap { max-width: 1000px; margin: 0 auto; padding: var(--space-40) var(--space-40) var(--space-48); }

.layout { display:flex; align-items:flex-start; }
.page { flex: 1 1 auto; min-width: 0; }

.sidebar {
  flex: 0 0 220px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 28px var(--space-24) var(--space-26);
  background: var(--surface);
  border-right: var(--border-width) solid var(--border);
}
.logo { font-family:'Newsreader', serif; font-style:italic; font-weight:500; font-size:22px; color:var(--text); margin-bottom:var(--space-4); }
.sidebar-tagline { font-size:12px; color:var(--muted); margin:0 0 var(--space-18); line-height:1.5; }

.sidebar-nav { display:flex; flex-direction:column; gap:var(--space-18); }
.nav-group { display:flex; flex-direction:column; gap:2px; }
/* The group label is a <p>, not a heading: the sidebar ships on every page,
   and a heading here would land in every page's document outline. */
.nav-group-label { color:var(--muted); padding-left:var(--space-10); }
.nav-link {
  display:flex; align-items:center; gap:var(--space-10);
  font-weight:600; font-size:var(--font-size-15); color:var(--text-secondary);
  padding:var(--space-8) var(--space-10); border-radius:10px;
}
.nav-link:hover { color:var(--primary); background:var(--primary-tint); }
.nav-icon { flex:none; color:var(--muted); }
.nav-link:hover .nav-icon { color:var(--primary); }

.theme-toggle {
  margin-top: auto;
  align-self: flex-start;
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: var(--font-size-13);
  color: var(--text-secondary);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-16);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--primary); border-color: var(--primary-tint); }

.card { background:var(--surface); border:var(--border-width) solid var(--card-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--space-26) 28px; margin-bottom:var(--space-20); }
/* A card's first and last child must not add their own margin to the card's
   padding — a trailing <p> put 42px under the text against 26px above it. */
.card > :first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }

.pill { display:inline-block; font-size:var(--font-size-12-5); font-weight:700; padding:6px var(--space-14); border-radius:var(--radius-pill); margin: 0 var(--space-8) var(--space-8) 0; }
.pill-sage { color:var(--sage-text); background:var(--sage-tint); }
.pill-gold { color:var(--gold-text); background:var(--gold-tint); }
.pill-rose { color:var(--rose-text); background:var(--rose-tint); }
.pill-lavender { color:var(--lavender-text); background:var(--lavender-tint); }
.pill-teal { color:var(--teal-text); background:var(--teal-tint); }
.pill-periwinkle { color:var(--periwinkle-text); background:var(--periwinkle-tint); }
.pill-moss { color:var(--moss-text); background:var(--moss-tint); }
.pill-berry { color:var(--berry-text); background:var(--berry-tint); }
.pill-girl { color:var(--girl-text); background:var(--girl-tint); }
.pill-boy { color:var(--boy-text); background:var(--boy-tint); }

.btn-primary {
  display:inline-block; font-weight:700; font-size:var(--font-size-14); color:var(--btn-text);
  background:linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
  padding:var(--space-12) var(--space-24); border-radius:var(--radius-pill);
}

/* Home page */
.hero { position:relative; text-align:center; padding:var(--space-48); border-color:transparent;
  background:linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 45%, var(--hero-end) 100%); }
/* The decorative blobs need clipping to the card's rounded corners, but the
   search dropdown below needs to overflow past the card edge — so only the
   blobs sit inside an overflow:hidden layer, not the whole hero. */
.hero-blobs { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.hero-blob { position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(28px); }
.hero-blob-a { top:-60px; right:-60px; background:var(--hero-blob-start); opacity:.5; }
.hero-blob-b { bottom:-70px; left:-50px; width:200px; height:200px; background:var(--hero-blob-end); opacity:.5; }
.hero-icon {
  position:relative; margin:0 auto var(--space-16); width:56px; height:56px; border-radius:50%;
  background:var(--surface); border:var(--border-width) solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.hero-body { position:relative; }
.hero-body h1 { font-size:42px; line-height:1.15; }
.hero-body p { font-size:16px; color:var(--text-secondary); max-width:560px; margin:0 auto; line-height:1.6; }

.search-bar {
  position:relative; display:flex; align-items:center; gap:var(--space-10); background:var(--bg);
  border:var(--border-width) solid var(--border);
  border-radius:14px; padding:var(--space-14) var(--space-18); font-weight:600; color:var(--text);
  margin:var(--space-20) auto 0; max-width:560px; text-align:left;
  background:var(--surface); box-shadow:var(--shadow-search);
}
.search-bar:hover, .search-bar:focus-within { border-color:var(--primary); color:var(--text); }
.search-bar .muted { color:var(--muted); font-weight:400; }
.search-bar-input {
  flex:1; min-width:0; border:none; background:none; outline:none; font:inherit; color:inherit;
}
.search-bar-input::placeholder { color:var(--muted); font-weight:400; }
.search-bar-arrow {
  margin-left:auto; flex:none; display:flex; border:none; background:none; padding:0; cursor:pointer;
}

.search-suggestions {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--overlay-shadow); padding:6px; margin:0; list-style:none;
  max-height:320px; overflow-y:auto; text-align:left;
}
.search-suggestion {
  padding:10px 12px; border-radius:9px; font-weight:500; color:var(--text); cursor:pointer;
}
.search-suggestion.is-active { background:var(--primary-tint); color:var(--primary-text); }

.section-label { font-size:var(--font-size-12-5); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.section-label-accent { color:var(--primary-text); }

.icon-badge { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; flex:none; }
.icon-badge-accent { background:var(--primary-tint); }
.icon-badge-rose { background:var(--rose-tint); }
.icon-badge-lavender { background:var(--lavender-tint); }

.feature-grid, .tool-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-16); }
.trend-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-20); }
.rec-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-16); }

.quote-bar { display:flex; align-items:center; gap:var(--space-14); background:var(--surface-alt); }
.quote-bar-icon { flex:none; }
.tip-box { display:flex; align-items:center; gap:var(--space-14); background:var(--surface-alt); border-color:transparent; border-left:3px solid var(--gold); }
.tip-box-label { flex:none; }

.report-banner {
  display:flex; align-items:center; gap:var(--space-20); color:var(--btn-text); border:none;
  background:linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
}
.report-banner { box-shadow:var(--shadow-banner); }
.report-banner h3 { color:var(--btn-text); }
.report-banner .pill { background:rgba(255,255,255,.2); color:var(--btn-text); }
.report-banner .cta { font-weight:700; font-size:var(--font-size-14); white-space:nowrap; }
.report-banner-icon { background:rgba(255,255,255,.18); }
.report-banner-body { flex:1; }
.report-banner-stat { margin:var(--space-4) 0 0; color:var(--btn-text); }

.tool-card { display:flex; align-items:flex-start; gap:var(--space-14); }
.tool-card .arrow { margin-left:auto; flex:none; }
.tool-card-title { font-size:16px; }
/* The whole card is a link, so without this every line inherits the link
   colour — title, stat and all — and the card reads as one flat block. Text
   keeps the normal hierarchy; only the title takes the accent, on hover. */
.tool-card { color: var(--text); }
.tool-card p { color: var(--text-secondary); }
.tool-card .section-label { color: var(--muted); }
.tool-card:hover .tool-card-title { color: var(--primary); }
/* Titles wrap to one or two lines, so pin the stat line to the bottom and the
   row reads across instead of stair-stepping. */
.tool-card > div { display:flex; flex-direction:column; height:100%; }
.tool-card > div > p:last-child { margin-top:auto; margin-bottom:0; }

.trend-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-14); }
/* Inside a country card the girls/boys markers label a column — as filled
   pills they put three badges in every card. */
.card .trend-grid .trend-card-header { margin-bottom:var(--space-10); padding-bottom:var(--space-8); border-bottom:var(--border-width) solid var(--border); }
.card .trend-grid .pill { background:none; padding:0; margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.trend-card-header h3 { font-size:17px; margin:0; }

.quick-links { display:flex; flex-wrap:wrap; gap:var(--space-10); margin-bottom:var(--space-20); }
.tag-link {
  font-weight:600; font-size:13.5px; color:var(--text-secondary); background:var(--surface);
  border:var(--border-width) solid var(--border); padding:var(--space-8) var(--space-16); border-radius:var(--radius-pill);
}
.tag-link:hover { color:var(--primary); border-color:var(--primary-tint); }
.tag-link[aria-current="page"] { color:var(--primary-text); background:var(--primary-tint); border-color:transparent; }

.rank-row { display:flex; align-items:center; gap:var(--space-12); padding:11px var(--space-4); border-bottom:var(--border-width) solid var(--border); }
.rank-row:last-child { border-bottom:none; }
.rank-num { width:22px; flex:none; color:var(--muted); font-weight:700; font-size:var(--font-size-13); }
.rank-name { font-weight:600; font-size:var(--font-size-15); color:var(--text); }

.sparkline { display:block; width:100%; height:auto; margin-bottom:var(--space-8); }

.rank-table { width:100%; border-collapse:collapse; font-size:var(--font-size-14); }
.rank-table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); font-weight:700; padding:var(--space-12); border-bottom:none; }
.rank-table td { padding:var(--space-12); border-bottom:var(--border-width) solid var(--border); }
.rank-table thead th { position:sticky; top:0; background:var(--surface-alt); }
.rank-table thead th:first-child { border-top-left-radius:12px; border-bottom-left-radius:12px; }
.rank-table thead th:last-child { border-top-right-radius:12px; border-bottom-right-radius:12px; }
/* One place label spans its group of years, so the label cell is a row-group
   header, not a column header — it must not take the tinted thead treatment. */
/* The country a group of places sits inside. A muted section divider, not a
   badge — the places below it carry the badges. */
.rank-table-group {
  background:var(--surface-alt); color:var(--muted);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  padding:var(--space-8) var(--space-12); border-bottom:none;
}
.rank-table tbody th { width:180px; text-align:left; vertical-align:top; padding:9px var(--space-10); border-bottom:var(--border-width) solid var(--border); font-size:var(--font-size-14); font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text); }
.rank-table-numbered td:first-child { width:76px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.rank-table tbody tr:hover td { background:var(--primary-tint); }

/* Names index */
.name-columns { column-width:160px; column-gap:20px; margin:12px 0 6px; }
.name-columns a { display:block; padding:4px 0; break-inside:avoid; color:var(--text); }
.name-columns a:hover { color:var(--primary); }
.name-gender { color:var(--muted); font-size:12.5px; }
.letter-more { margin:0 0 30px; font-size:13px; color:var(--muted); }

/* Rankings */
.page-head { margin-bottom:var(--space-26); }
.page-head h1 { font-size:34px; line-height:1.15; margin-bottom:var(--space-8); }
.page-head p { margin:0; max-width:var(--measure); font-size:var(--font-size-15); line-height:1.65; color:var(--text-secondary); }

.breadcrumb { display:flex; align-items:center; gap:var(--space-8); margin-bottom:var(--space-14); font-size:var(--font-size-13); color:var(--muted); }
.breadcrumb a { font-weight:600; color:var(--text-secondary); }
.breadcrumb a:hover { color:var(--primary); }

.block { margin-bottom:38px; }
.prose p { max-width:var(--measure); font-size:var(--font-size-15); line-height:1.7; color:var(--text-secondary); }

.subhead { font-size:17px; margin:28px 0 var(--space-10); }
.rank-diff { font-size:var(--font-size-12-5); font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.rank-diff-rise { color:var(--rise); }
.rank-diff-fall { color:var(--fall); }

.switcher { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10) 22px; margin-bottom:34px; }
.switcher-group { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8); }
.switcher-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }

.lede { max-width:62ch; margin:0 0 var(--space-14); font-size:var(--font-size-15); line-height:1.6; color:var(--text-secondary); }
.chart-note { margin:0 0 var(--space-18); font-size:var(--font-size-12-5); color:var(--muted); }
.rank-chart { display:block; width:100%; max-width:680px; height:auto; margin-bottom:var(--space-18); }

.site-footer { padding:var(--space-32) var(--space-40) var(--space-48); border-top:var(--border-width) solid var(--border); color:var(--muted); font-size:var(--font-size-12-5); line-height:1.8; }

/* Girls/boys tabs — collections and reports */

/* Screen-reader-only: the tab label carries the visible heading text, but the
   panel keeps a real heading so the document outline survives. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* A radio group, not JavaScript: the checked input selects its own panel
   through a sibling combinator, so every panel is present in the HTML
   whichever one is on screen. The inputs must stay siblings of the panels for
   `~` to reach them.

   Matched on the input's class, never its id, because a page carries more than
   one group — the trends report has one per place. `~` cannot reach outside
   its own parent, so the .tabs wrapper is what keeps the groups independent:
   one place's checked input can only ever switch the panels beside it. Each
   group still needs its own radio `name` and its own ids, or the groups would
   share one selection and share one label target. */
.tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tablist { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-20); }
.tab-label {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-weight: 700; font-size: var(--font-size-14); color: var(--text-secondary);
  background: var(--surface); border: var(--border-width) solid var(--border);
  padding: var(--space-10) var(--space-20); border-radius: var(--radius-pill); cursor: pointer;
}
.tab-label:hover { color: var(--primary); border-color: var(--primary-tint); }
.tab-count {
  font-size: var(--font-size-12-5); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tab-panel { display: none; }
.tab-input-girl:checked ~ .tab-panel-girl,
.tab-input-boy:checked ~ .tab-panel-boy { display: block; }
.tab-input-girl:checked ~ .tablist .tab-label-girl,
.tab-input-boy:checked ~ .tablist .tab-label-boy {
  color: var(--primary-text); background: var(--primary-tint); border-color: transparent;
}
.tab-input-girl:checked ~ .tablist .tab-label-girl .tab-count,
.tab-input-boy:checked ~ .tablist .tab-label-boy .tab-count { color: var(--primary-text); }
.tab-input-girl:focus-visible ~ .tablist .tab-label-girl,
.tab-input-boy:focus-visible ~ .tablist .tab-label-boy {
  outline: 2px solid var(--primary); outline-offset: 3px;
}


/* Reports */

/* Recommendations */
.finder-form { margin-bottom: var(--space-10); }
.finder-form .switcher { margin-bottom: var(--space-14); }
button.tag-link { font-family: inherit; cursor: pointer; }
.tag-link[aria-pressed="true"] { color:var(--primary-text); background:var(--primary-tint); border-color:transparent; }
.finder-input {
  font-family: inherit; font-size:13.5px; font-weight:600; width:96px;
  color:var(--text); background:var(--surface);
  border:var(--border-width) solid var(--border); border-radius:var(--radius-pill);
  padding:var(--space-8) var(--space-16);
}
.finder-input:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

.rec-card { display:flex; flex-direction:column; gap:var(--space-8); margin-bottom:0; }
.rec-card .pill { margin:0; }
.rec-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-8); }
.rec-card-name { margin:0; }
.rec-card-score { flex:none; }
.rec-card-meta { margin:0; font-size:var(--font-size-12-5); color:var(--text-secondary); }
.rec-card-note { margin:0; font-size:var(--font-size-12-5); color:var(--muted); }

/* Twelve results at four across are unreadable on a tablet long before the
   single-column breakpoint below takes over. */
@media (max-width: 1000px) {
  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .wrap { padding: var(--space-24) var(--space-20) var(--space-32); }
  .layout { flex-direction: column; }
  .sidebar {
    position: static;
    /* .layout is a column here, so the desktop flex-basis of 220px would be
       read as a HEIGHT and pad the header out with 100px of dead space. */
    flex: none;
    height: auto;
    overflow-y: visible;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--space-8);
    column-gap: var(--space-12);
    padding: var(--space-16) var(--space-20);
    border-right: none;
    border-bottom: var(--border-width) solid var(--border);
  }
  .logo { margin-bottom: 0; margin-right: var(--space-8); }
  .sidebar-tagline { display: none; }
  /* Line 1 is the logo and the theme toggle; the nav takes the whole of line 2
     as one horizontally scrollable row. min-width:0 is what stops the row from
     widening the page instead of scrolling, and the vertical padding is what
     keeps :focus-visible's ring from being clipped by the scroll container. */
  .sidebar-nav {
    order: 2;
    flex-basis: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
    overflow-x: auto;
    padding: var(--space-8) 0;
  }
  .nav-group { flex-direction: row; align-items: center; gap: var(--space-4); }
  .nav-group-label { margin: 0 var(--space-4) 0 0; padding-left: 0; white-space: nowrap; }
  .nav-link { padding: 6px var(--space-8); white-space: nowrap; }
  .theme-toggle { order: 1; margin-top: 0; margin-left: auto; }
  .hero { padding: var(--space-32) var(--space-24); }
  .hero-body h1 { font-size: 30px; }
  .feature-grid, .tool-grid, .trend-grid, .rec-grid { grid-template-columns: 1fr; }
  .report-banner { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
  .report-banner .cta { margin-left: 64px; }
  .page-head h1 { font-size: 26px; }
}