/* ==========================================================================
   Somalian Betting Sites
   Clean and bright. White surfaces, one confident blue, generous cards,
   modern grotesque type. Built for a 2 GB Android phone on a slow connection.
   ========================================================================== */

/* -- Typefaces ------------------------------------------------------------ */
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/generalsans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plexmono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* -- Tokens --------------------------------------------------------------- */
:root {
  --font-display: 'General Sans', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Surfaces */
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-sunk: #f4f7fb;
  --paper-tint: #eef4fd;

  /* Ink */
  --ink: #0d1826;
  --ink-soft: #445366;
  --ink-faint: #6b7b91;

  /* Lines */
  --rule: #e2e8f1;
  --rule-strong: #cbd6e4;

  /* Brand. Somali flag blue, warmed slightly for screen legibility. */
  --blue: #1257d6;
  --blue-flag: #4189dd;
  --blue-deep: #0c3d99;
  --blue-wash: #e8f0fe;
  --blue-glow: rgba(18, 87, 214, 0.22);

  --red: #cf2f28;
  --red-wash: #fdecea;
  --green: #12855a;
  --green-wash: #e4f6ee;
  --amber: #b26a05;
  --amber-wash: #fdf1dd;

  /* Type scale */
  --text-xxs: 0.6875rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-hero: clamp(2.375rem, 1.5rem + 3.8vw, 4rem);

  /* Space */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --wrap: 74rem;
  --wrap-narrow: 46rem;
  --measure: 68ch;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13, 24, 38, 0.05), 0 1px 3px rgba(13, 24, 38, 0.04);
  --shadow: 0 2px 4px rgba(13, 24, 38, 0.04), 0 8px 24px rgba(13, 24, 38, 0.07);
  --shadow-lg: 0 4px 8px rgba(13, 24, 38, 0.05), 0 20px 48px rgba(13, 24, 38, 0.11);
  --shadow-blue: 0 4px 14px rgba(18, 87, 214, 0.28);
}

[data-theme='dark'] {
  --paper: #0b1220;
  --paper-raised: #131c2d;
  --paper-sunk: #0f1727;
  --paper-tint: #16233a;
  --ink: #eaf0f8;
  --ink-soft: #a7b6ca;
  --ink-faint: #7b8ca4;
  --rule: #22304a;
  --rule-strong: #33445f;
  --blue: #5b9dfb;
  --blue-flag: #7fb6ff;
  --blue-deep: #a9ccff;
  --blue-wash: #16233a;
  --blue-glow: rgba(91, 157, 251, 0.25);
  --red: #ff7b72;
  --red-wash: #2b1a1a;
  --green: #4fd39a;
  --green-wash: #10261f;
  --amber: #f0b95c;
  --amber-wash: #2a2113;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.5);
  --shadow-blue: 0 4px 14px rgba(91, 157, 251, 0.3);
}

/* -- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); font-weight: 700; }
p { text-wrap: pretty; }

a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* Tabular figures wherever numbers are compared. */
table, .num, .amount, .money, .rank, .steps__cost, .totals, .tool__val, .hero__meta {
  font-variant-numeric: tabular-nums lining-nums;
}

/* -- Layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.wrap-default { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) {
  .wrap, .wrap-narrow, .wrap-default { width: calc(100% - 2rem); }
}

.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s6); }
.section--rule { padding-block: var(--s8); border-top: 1px solid var(--rule); }
section { padding-block: var(--s7); }
.measure { max-width: var(--measure); }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; }
.full { grid-column: 1 / -1; }

.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Marginal note beside a main column. */
.marginal { display: grid; gap: var(--s5); }
@media (min-width: 62rem) {
  .marginal { grid-template-columns: 15rem 1fr; gap: var(--s7); align-items: start; }
}
.marginal__note {
  background: var(--blue-wash);
  border-radius: var(--r);
  padding: var(--s4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  border-left: 3px solid var(--blue);
}
.marginal__note strong { color: var(--ink); }

/* -- Text utilities ------------------------------------------------------- */
.muted { color: var(--ink-faint); }
.small { font-size: var(--text-sm); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.label, .eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.label--ink { color: var(--ink-faint); }
.label--blue { color: var(--blue); }

.asterism { display: block; text-align: center; color: var(--rule-strong); letter-spacing: 0.4em; margin-block: var(--s6); }

/* -- Legal bar and masthead ----------------------------------------------- */
.legalbar {
  background: var(--ink);
  color: #dbe4f0;
  font-size: var(--text-xs);
  padding: 0.55rem 0;
  text-align: center;
}
.legalbar a { color: #fff; }
[data-theme='dark'] .legalbar { background: #060c17; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
[data-theme='dark'] .legalbar a { color: var(--blue); }
.legalbar strong { font-family: var(--font-mono); letter-spacing: 0.08em; }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
[data-theme='dark'] .masthead { background: rgba(11, 18, 32, 0.86); }

.masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); }
.masthead__actions { display: flex; align-items: center; gap: var(--s2); }
.nav { border-top: 1px solid var(--rule); }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.brand svg { flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.1; }
.brand__rule { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px; }

.nav__list {
  display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav__list::-webkit-scrollbar { display: none; }
.nav__list a {
  display: block;
  padding: 0.7rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
}
.nav__list a:hover { color: var(--blue); background: var(--blue-wash); }
.nav__list a[aria-current='page'] { color: var(--blue); font-weight: 700; }

/* Between the mobile breakpoint and roughly 1120px the eleven nav items just
   overflow. Tighten the horizontal rhythm rather than let the last one clip. */
@media (min-width: 60.01rem) and (max-width: 70rem) {
  .nav__list { gap: 0.15rem; }
  .nav__list a { padding-inline: 0.5rem; }
}

#navtoggle { display: none; }
@media (max-width: 60rem) {
  #navtoggle { display: inline-flex; }
  .nav { display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; padding-block: var(--s2); overflow: visible; }
  .nav__list li + li { border-top: 1px solid var(--rule); }
  .nav__list a { padding: 0.8rem 0.25rem; border-radius: 0; }
  .brand__rule { display: none; }
  .brand__name { font-size: 1rem; }
}
@media (max-width: 26rem) {
  .brand__name { font-size: 0.9375rem; }
  .masthead__actions .btn { padding: 0.5rem 0.7rem; }
}

/* -- Breadcrumbs ---------------------------------------------------------- */
.crumbs { font-size: var(--text-xs); color: var(--ink-faint); padding-block: var(--s4) 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: 0.45rem; color: var(--rule-strong); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }

/* -- Hero ----------------------------------------------------------------- */
.hero {
  padding-block: var(--s7) var(--s7);
  background:
    radial-gradient(60rem 28rem at 12% -10%, var(--blue-wash) 0%, transparent 62%),
    radial-gradient(46rem 24rem at 96% 8%, var(--green-wash) 0%, transparent 58%);
}
.hero h1 { font-size: var(--text-hero); font-weight: 600; margin-top: var(--s3); }
.hero .lede { margin-top: var(--s4); max-width: 46rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  font-family: var(--font-mono); font-size: var(--text-xxs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__meta span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }

.hero__split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 64rem) {
  .hero__split { grid-template-columns: 1.05fr 0.95fr; gap: var(--s7); }
}
.hero__art img { width: 100%; height: auto; }
@media (max-width: 64rem) { .hero__art { max-width: 30rem; margin-inline: auto; } }
[data-theme='dark'] .hero__art img { filter: brightness(0.92) contrast(1.04); border-radius: var(--r-lg); }

/* -- Section heads -------------------------------------------------------- */
.rulehead { margin-bottom: var(--s5); }
.rulehead h2, .rulehead h3 { display: block; }
.rulehead h2::after, .rulehead h3::after {
  content: ''; display: block; width: 2.5rem; height: 3px;
  background: var(--blue); border-radius: 2px; margin-top: var(--s3);
}

/* -- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 700;
  line-height: 1;
  padding: 0.8rem 1.15rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--blue, .btn--primary {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn--blue:hover, .btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; box-shadow: 0 6px 20px var(--blue-glow); }
[data-theme='dark'] .btn--blue, [data-theme='dark'] .btn--primary { color: #06101f; }
[data-theme='dark'] .btn--blue:hover, [data-theme='dark'] .btn--primary:hover { color: #06101f; }
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--quiet, .btn--outline { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn--quiet:hover, .btn--outline:hover { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); }
.btn--sm { font-size: var(--text-xs); padding: 0.5rem 0.85rem; }
.btn--block { display: flex; width: 100%; }

.linkbtn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-sm); font-weight: 700; color: var(--blue); text-decoration: none;
}
.linkbtn::after { content: '\2192'; transition: transform 0.16s ease; }
.linkbtn:hover::after { transform: translateX(3px); }

/* -- Cards and panels ----------------------------------------------------- */
.panel, .card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
a.panel, a.card { display: block; text-decoration: none; color: inherit; transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
a.panel:hover, a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-flag); color: inherit; }
a.card:hover h3, a.card:hover strong { color: var(--blue); }
.panel--tight { padding: var(--s4); }
.panel--sunk { background: var(--paper-sunk); box-shadow: none; }
.panel--ink { background: var(--ink); color: #e8eefa; border-color: var(--ink); }
.panel--ink h2, .panel--ink h3, .panel--ink strong { color: #fff; }
.panel--ink .label { color: var(--blue-flag); }
.panel--ink a { color: var(--blue-flag); }
[data-theme='dark'] .panel--ink { background: var(--paper-tint); border-color: var(--rule-strong); }
.panel__head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; margin-bottom: var(--s3); }
.card h3 { margin-bottom: var(--s2); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); }

/* -- Callouts ------------------------------------------------------------- */
.warn, .note {
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  border-left: 4px solid;
  font-size: var(--text-sm);
}
.warn { background: var(--amber-wash); border-color: var(--amber); }
.note { background: var(--blue-wash); border-color: var(--blue); }
.warn h2, .warn h3, .note h2, .note h3 { font-size: var(--text-base); margin-bottom: var(--s2); }
.warn p + p, .note p + p { margin-top: var(--s3); }
.warn ul, .note ul { margin: var(--s2) 0 0; padding-left: 1.1rem; }

/* -- Tags, chips, codes --------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--text-xxs); font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--paper-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.tag--good { background: var(--green-wash); color: var(--green); border-color: transparent; }
.tag--bad { background: var(--red-wash); color: var(--red); border-color: transparent; }
.tag--blue { background: var(--blue-wash); color: var(--blue); border-color: transparent; }
.tag--ink { background: var(--ink); color: #fff; border-color: transparent; }

.code {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  border: 1.5px dashed var(--blue);
  border-radius: var(--r-sm);
  background: var(--blue-wash);
  color: var(--blue);
  cursor: pointer;
}
.code:hover { background: var(--blue); color: #fff; border-style: solid; }
.code[data-copied] { background: var(--green-wash); border-color: var(--green); color: var(--green); }
.code[data-copied]::after { content: ' copied'; font-weight: 400; }

/* -- Tables --------------------------------------------------------------- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-raised);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th, table.data td { padding: 0.8rem 0.9rem; text-align: left; vertical-align: top; }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-sunk);
  font-family: var(--font-mono); font-size: var(--text-xxs); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.data tbody tr + tr { border-top: 1px solid var(--rule); }
table.data tbody tr:hover { background: var(--blue-wash); }
table.data a { font-weight: 700; text-decoration: none; }
table.data a:hover { text-decoration: underline; }
.cell-sub { display: block; font-size: var(--text-xxs); color: var(--ink-faint); margin-top: 2px; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Stacked cards on small screens for the wide tables. */
@media (max-width: 46rem) {
  .data--stack thead { display: none; }
  .data--stack, .data--stack tbody, .data--stack tr, .data--stack td { display: block; width: 100%; }
  .data--stack tr { border-top: 1px solid var(--rule); padding: var(--s3) var(--s2); }
  .data--stack td { display: flex; gap: var(--s3); justify-content: space-between; padding: 0.3rem 0.5rem; }
  .data--stack td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--text-xxs);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
    flex: none;
  }
  .data--stack td:empty { display: none; }
}
.data--compare th, .data--compare td { white-space: nowrap; }
.data--compare td:first-child, .data--compare th:first-child { white-space: normal; }

/* -- Definition list ------------------------------------------------------ */
.deflist { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--paper-raised); }
.deflist__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s4); padding: 0.8rem var(--s4); }
.deflist__row + .deflist__row { border-top: 1px solid var(--rule); }
.deflist__row:nth-child(odd) { background: var(--paper-sunk); }
.deflist dt { font-family: var(--font-mono); font-size: var(--text-xxs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.deflist dd { margin: 0; font-size: var(--text-sm); }
@media (max-width: 40rem) { .deflist__row { grid-template-columns: 1fr; gap: 0.2rem; } }

/* -- Operator entry ------------------------------------------------------- */
.entry {
  display: grid; gap: var(--s4);
  grid-template-columns: 3rem 1fr;
  align-items: start;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.entry:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-flag); }
@media (min-width: 60rem) { .entry { grid-template-columns: 3rem 1fr 16rem; } }
.entry__no, .rank {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--blue-wash);
  color: var(--blue);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm);
}
.entry__name { font-size: var(--text-lg); margin-bottom: 0.15rem; }
.entry__name a { text-decoration: none; color: var(--ink); }
.entry__name a:hover { color: var(--blue); }
.entry__side { display: flex; flex-direction: column; gap: var(--s2); }
.entry__side .deflist { border-radius: var(--r-sm); }
.entry__side .deflist__row { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.55rem var(--s3); }
.entry__side .deflist dd { font-size: var(--text-xs); line-height: 1.4; }
.entry__side .row { gap: var(--s2); }
@media (min-width: 60rem) { .entry__side { align-items: stretch; } .entry__side .btn { width: 100%; } }
.entry .best {
  display: inline-block; font-size: var(--text-xxs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--green); background: var(--green-wash);
  padding: 0.2rem 0.5rem; border-radius: var(--r-pill);
}

/* -- Fit chips ------------------------------------------------------------ */
.fits { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fit {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--text-xs); font-weight: 500;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--paper-sunk);
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--rule);
}
a.fit:hover { background: var(--blue-wash); color: var(--blue); border-color: var(--blue-flag); }
/* Skip link. Off screen until it takes focus. */
.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 100;
  background: var(--blue); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: var(--text-sm); text-decoration: none;
  transition: top 0.16s ease;
}
.skip:focus { top: var(--s3); color: #fff; }

/* -- Route finder --------------------------------------------------------- */
.finder {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.finder__head {
  padding: var(--s5);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
}
.finder__head h2 { color: #fff; }
.finder__head p { color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); margin-top: var(--s2); }
.finder__head .label { color: rgba(255, 255, 255, 0.75); }
.finder__body { padding: var(--s5); }
.finder__step + .finder__step { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--rule); }
.finder__q { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; margin: var(--s2) 0 var(--s4); }

.choices { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.choice {
  text-align: left;
  font-family: inherit; font-size: var(--text-sm); font-weight: 700;
  padding: var(--s4);
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.choice small { display: block; margin-top: 0.2rem; font-weight: 400; font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.45; }
.choice:hover { border-color: var(--blue-flag); background: var(--blue-wash); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.choice[aria-pressed='true'] {
  border-color: var(--blue); background: var(--blue-wash); color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.choice[aria-pressed='true'] small { color: var(--blue); }

.result { display: grid; gap: var(--s4); }
ul.log { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
ul.log li {
  font-size: var(--text-xs);
  background: var(--blue-wash); color: var(--blue);
  padding: 0.28rem 0.65rem; border-radius: var(--r-pill);
}
.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--ink-faint); }
.pending { color: var(--ink-faint); font-style: italic; }

/* A gap we could not close from a published source. Deliberately quiet, never
   styled to look like a failing grade: the operator may simply publish nothing. */
.unconf { color: var(--ink-faint); font-style: italic; }

/* The inline provenance link beside a confirmed value. */
.srcmark {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  padding-bottom: 1px;
}
.srcmark:hover { color: var(--blue); border-bottom-color: var(--blue); }
.record thead th:last-child, .record td:last-child { background: var(--paper-sunk); }
.record td:first-child { width: 12rem; }
@media (max-width: 46rem) {
  .record td:last-child, .record td:first-child { background: none; width: auto; }
  /* Stacked, the confirmed value plus its source link is far too long to sit in
     a right-aligned flex column. Put the label above the value and give it the
     full width. */
  .record.data--stack td { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .record.data--stack td::before { margin-bottom: 0.1rem; }
  .record.data--stack td:first-child strong { font-size: var(--text-sm); }
  .record.data--stack .srcmark { display: inline-block; margin-top: 0.35rem; }
}

/* -- Cost ledger ---------------------------------------------------------- */
.ledger { display: grid; gap: var(--s4); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: space-between; align-items: baseline;
  padding: var(--s4) 0 var(--s4) 2.75rem;
  border-bottom: 1px solid var(--rule);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: var(--s4);
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--blue-wash); color: var(--blue);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
}
.steps__cost { font-family: var(--font-mono); font-weight: 600; color: var(--ink); white-space: nowrap; }
.totals {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: space-between; align-items: baseline;
  padding: var(--s4);
  border-radius: var(--r);
  background: var(--blue-wash);
  border: 1px solid var(--blue-flag);
}
.amount { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--blue); }
.money { font-family: var(--font-mono); font-weight: 600; }

.field { display: grid; gap: 0.3rem; }
.field label, .tool__label {
  font-family: var(--font-mono); font-size: var(--text-xxs);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint);
}
.field input, .field select, .filters input, .filters select {
  font-family: inherit; font-size: var(--text-sm);
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field input:focus, .field select:focus, .filters input:focus, .filters select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow);
}

/* -- Filters -------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end;
  padding: var(--s4);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: var(--s5);
}
.filters .field { flex: 1 1 10rem; }
.filters__count { font-family: var(--font-mono); font-size: var(--text-xxs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin-left: auto; }

/* -- Tools ---------------------------------------------------------------- */
.tool {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper-raised);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.tool__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tool__out { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.tool__out > div { display: flex; flex-direction: column; gap: 0.35rem; }
.tool__out .tool__label { display: block; }
.tool__out strong { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; color: var(--blue); line-height: 1.2; }
.tool__val { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; color: var(--blue); }
.tool__err { color: var(--red); font-size: var(--text-sm); min-height: 1.4em; }
.tool__legs { display: grid; gap: var(--s3); }
.s-leg { padding-top: var(--s4); margin-top: var(--s4); border-top: 1px solid var(--rule); }

/* -- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: var(--s2); }
.faq details {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-raised);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  font-weight: 700; font-size: var(--text-sm);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-weight: 400; font-size: 1.15rem; color: var(--blue);
}
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { background: var(--blue-wash); color: var(--blue); }
.faq details[open] summary { border-bottom: 1px solid var(--rule); }
.faq details > p, .faq details > div { padding: var(--s4); font-size: var(--text-sm); color: var(--ink-soft); }
.faq details > p { max-width: var(--measure); }

/* -- Prose ---------------------------------------------------------------- */
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--s7); margin-bottom: var(--s3); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--s6); margin-bottom: var(--s2); }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose p, .prose li { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: var(--s2); }
.prose strong { font-weight: 700; }
.prose figure { margin: var(--s5) 0; }
.prose figure img, .fig img { border-radius: var(--r); border: 1px solid var(--rule); }
figcaption { font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--s2); }

/* -- Footer --------------------------------------------------------------- */
.foot {
  margin-top: var(--s9);
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding-block: var(--s8) var(--s6);
  font-size: var(--text-sm);
}
.foot__grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.foot h3 {
  font-family: var(--font-mono); font-size: var(--text-xxs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--s3);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--blue); text-decoration: underline; }
.foot__legal {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--text-xs); color: var(--ink-faint);
}
.foot__legal p + p { margin-top: var(--s3); }
.foot__legal a { color: var(--ink-faint); text-decoration: underline; }

/* -- Print ---------------------------------------------------------------- */
@media print {
  .masthead, .foot, .legalbar, .btn, .finder { display: none !important; }
  body { background: #fff; color: #000; }
  .tablewrap, .panel, .card { box-shadow: none; border-color: #999; }
}

/* Legacy token aliases: page modules still reference the v1 names inline. */
:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem;
  --space-10: 4rem; --space-12: 5rem;
  --color-text-muted: var(--ink-soft);
  --color-text-faint: var(--ink-faint);
  --color-text: var(--ink);
  --color-surface: var(--paper-sunk);
  --color-surface-raised: var(--paper-raised);
  --color-border: var(--rule);
  --color-accent: var(--blue);
  --radius: var(--r); --radius-sm: var(--r-sm); --radius-lg: var(--r-lg);
}

/* Figures */
.fig { margin: var(--s5) 0; }
.fig img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--paper-sunk); }
.fig figcaption { margin-top: .75rem; font-size: .875rem; color: var(--ink-faint); text-align: center; }

/* Page titles on inner content pages */
.pagetitle {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.06; letter-spacing: -0.022em;
  margin: 0 0 var(--s4);
}
.prose > .pagetitle { margin-top: 0; }
.pagelede {
  font-size: var(--text-lg); color: var(--ink-soft);
  max-width: var(--measure); line-height: 1.55;
  margin: 0 0 var(--s6);
}
.prose > .pagelede + h2 { margin-top: var(--s6); }

/* Content pages sit under a soft wash so they read as pages, not fragments */
/* Section that immediately follows the page head should not add another gap. */
.pagehead-wash + section { padding-top: 0; }
.pagehead-wash {
  background: linear-gradient(180deg, var(--blue-wash) 0%, rgba(232,240,254,0) 100%) no-repeat top / 100% 20rem;
  padding-top: var(--s6);
}
[data-theme='dark'] /* Section that immediately follows the page head should not add another gap. */
.pagehead-wash + section { padding-top: 0; }
.pagehead-wash {
  background: linear-gradient(180deg, rgba(91,157,251,.10) 0%, rgba(91,157,251,0) 100%) no-repeat top / 100% 20rem;
}
.prose h2, .prose h3 { max-width: 26ch; }
.pagetitle { max-width: 18ch; }

/* Tables never push the page sideways */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table, .data { width: 100%; }
@media (max-width: 48rem) {
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
  .prose table td, .prose table th { white-space: normal; min-width: 8rem; }
}

/* A figure directly beneath a page head hugs it rather than opening a gap. */
.section--figure { padding-block: 0 var(--s6); }
.section--figure .fig { margin: 0; }

/* Anything that follows a page title needs breathing room. */
.pagetitle + * { margin-top: var(--s5); }
.pagetitle + .pagelede { margin-top: var(--s4); }

/* Two column key and value spec table on the app pages. */
.record--spec th { width: 12rem; text-align: left; color: var(--ink-muted); font-weight: 500; }
.record--spec td:last-child { background: none; }
@media (max-width: 40rem) {
  .record--spec th, .record--spec td { display: block; width: auto; }
  .record--spec th { padding-bottom: 0; }
}