@charset "UTF-8";

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------------
     Palette. Neutral graphite paper, a deep navy for structure and links, a
     periwinkle highlight where the old acid green used to shout, and warm
     amber / terracotta reserved for caution and negative signals.
     Every colour below is a token: the dark theme re-points the same names,
     so no component needs to know which theme is active.
  --------------------------------------------------------------------------- */

  /* Surfaces */
  --paper: #f4f4f1;
  --paper-deep: #e8e8e3;
  --surface: #ffffff;
  --surface-hi: #ffffff;
  --wash: rgba(255, 255, 255, 0.68);
  --tint: rgba(23, 24, 28, 0.05);
  --ghost: rgba(23, 24, 28, 0.035);
  --track: #dcdcd8;

  /* Text and rules */
  --ink: #17181c;
  --ink-soft: #3f434a;
  --muted: #5d616a;
  --line: rgba(23, 24, 28, 0.14);
  --line-strong: rgba(23, 24, 28, 0.72);

  /* Solid fills: buttons, dark strips, table heads */
  --fill: #17181c;
  --on-fill: #ffffff;
  --stamp: #17181c;

  /* Accent: highlights, selected states, the brand mark */
  --accent: #c6d0f7;
  --accent-hi: #dbe1fb;
  --accent-deep: #6d82d8;
  --accent-wash: rgba(198, 208, 247, 0.3);
  --on-accent: #17181c;

  /* Brand: links, numerals, full-bleed brand sections */
  --brand: #2f4f9e;
  --brand-solid: #2f4f9e;
  --brand-soft: #d5def3;

  /* Signals */
  --coral: #e2694c;
  --violet: #7b64d6;
  --yellow: #f6cf6a;
  --amber-wash: rgba(246, 207, 106, 0.22);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --shadow-sm: 0 9px 24px rgba(16, 18, 15, 0.08);
  --shadow-lg: 0 24px 60px rgba(16, 18, 15, 0.16);
  --sans: "Avenir Next", Avenir, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", var(--sans);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  /* Reading face. The condensed display and geometric label faces are great at
     poster sizes but cramped at 12-16px, so prose and table data use this. */
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Dark theme. `data-theme` is set by an inline script in <head> before paint,
   from a stored preference or the OS setting, so there is no flash.
   The media query below covers the no-JavaScript case.
--------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0f1216;
  --paper-deep: #191d23;
  --surface: #15181d;
  --surface-hi: #1f242c;
  --wash: rgba(255, 255, 255, 0.05);
  --tint: rgba(255, 255, 255, 0.06);
  --ghost: rgba(255, 255, 255, 0.04);
  --track: #2c313a;

  --ink: #e7eaef;
  --ink-soft: #c3c9d3;
  --muted: #98a0ad;
  --line: rgba(231, 234, 239, 0.14);
  --line-strong: rgba(231, 234, 239, 0.48);

  --fill: #262c36;
  --on-fill: #eef1f6;
  --stamp: rgba(231, 234, 239, 0.16);

  --accent: #8ea3ee;
  --accent-hi: #a6b7f4;
  --accent-deep: #6d82d8;
  --accent-wash: rgba(142, 163, 238, 0.16);
  --on-accent: #12141a;

  --brand: #93aaf5;
  --brand-solid: #1f3268;
  --brand-soft: #26325a;

  --coral: #d9614a;
  --violet: #9683e4;
  --yellow: #e5be5a;
  --amber-wash: rgba(229, 190, 90, 0.14);

  --shadow-sm: 0 9px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--ghost) 1px, transparent 1px),
    linear-gradient(90deg, var(--ghost) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  content: "";
}
::selection { background: var(--fill); color: var(--accent); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* --------------------------- Reading typography --------------------------
   Three faces, three jobs:
   --display  condensed, for headlines, ranks and big numbers (the identity)
   --sans     geometric, for nav, buttons and uppercase micro-labels
   --text     humanist, for prose and every table cell people actually read  */
p, li, dd, td, blockquote, figcaption, input, select, textarea { font-family: var(--text); }
.board-value, .board-sub, .board-warn, .compare-cell, .compare-row__label,
.compare-row__hint, .compare-col__name, .board-table__card a, .card-note,
.research-card dd, .research-sidebar dd, .compare-section-row__head span,
.detail-scorecard strong, .source-box strong, .source-box p,
.product-meta strong, .related-item strong, .related-item small,
.picker-option__name, .picker-option__meta,
.newsletter small, .compare-picker__submit small,
.banks-rail__name, .banks-rail__hint, .bank-card__name, .bank-panel__note,
.bank-panel__pending, .bank-panel__flags li, .bank-panel dd, .bank-panel__sources,
.banks-hero__meta, .banks-method p {
  font-family: var(--text);
}
/* Uppercase micro-labels stay on the geometric face: they are signage, not prose. */
.board-issuer, .compare-col__issuer, .status, .issuer-line, .product-meta small,
.research-facts small, .issuer-group > header p, .research-card > p:first-of-type,
.board-table thead th, .compare-section-row__col, .detail-scorecard small,
.hero-proof, .filter-bar__field label, .picker-group legend,
.banks-rail__kind, .banks-rail__count, .bank-panel__kind, .bank-group__label,
.bank-panel dt, .tag {
  font-family: var(--sans);
}
/* Money and rates line up column to column. */
.board-value, .compare-cell__value, .research-facts strong, .detail-scorecard strong {
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 0.8rem 1rem;
  background: var(--fill);
  color: var(--on-fill);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.site-shell {
  /* Full desktop width. The 1600px cap left wide monitors with large empty
     gutters; individual sections still cap their own line lengths where prose
     readability needs it, which is the right place for that decision. The inline
     borders went with the cap: at full width they were 1px lines hugging the
     window edge. */
  width: 100%;
  margin-inline: auto;
  overflow: clip;
}
main { min-height: 70vh; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  /* Side columns size to their content; the nav takes what is left.
     This was `1fr auto 1fr`, which forces the two side tracks to be equal —
     and they are not. The brand is ~110px while the signed-in actions (theme
     toggle, inbox, account chip, sign out) are ~350px, so the right track could
     not fit its content, grew past its share, and pushed the actions left until
     they touched the last nav link. `minmax(0, 1fr)` on the middle lets the nav
     shrink rather than force an overflow, and the gap guarantees the two never
     abut even at the tightest width that still shows this layout. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  align-items: center;
  min-height: 74px;
  padding: 0.8rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  /* Opaque, not translucent-and-blurred.
     A `backdrop-filter` on a *sticky* header is the most expensive thing a page
     can do while scrolling: the browser has to re-read the pixels behind the
     header and re-blur them on every single frame, and the region it reads keeps
     changing because the content under it is moving. Here it bought nothing --
     the backdrop is a flat paper colour with a 2.5%-opacity grid over it, so
     blurring it is indistinguishable from just painting the colour. */
  background: var(--paper);
  transition: box-shadow 180ms ease, background 180ms ease;
}
.site-header.is-scrolled { background: var(--surface); box-shadow: var(--shadow-sm); }
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: var(--ink);
  font-size: 1.42rem;
  font-weight: 860;
  letter-spacing: -0.055em;
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 11px;
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--stamp);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-4deg);
}
.brand-mark::after {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  content: "";
}
.brand-word { transform: translateY(1px); }
.brand-admin {
  margin-left: .35rem;
  padding: .12rem .4rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(1px);
}
.site-header--admin {
  border-bottom-color: var(--ink);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}
.site-header--admin .desktop-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 880;
}
.site-header--admin .desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* `min-width: 0` lets this shrink inside its grid track instead of forcing the
   header wider than the viewport. The gap cap came down from 2rem: eight items
   at 2rem spend 224px on whitespace alone, which is what tipped the signed-in
   header over at 1200-1440px. */
.desktop-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; min-width: 0; gap: clamp(0.55rem, 1.1vw, 1.25rem); }
.desktop-nav a {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  color: var(--ink-soft);
  font-size: clamp(0.68rem, 0.85vw, 0.78rem);
  font-weight: 760;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
/* One glyph per destination, drawn as a stroke outline so it always matches
   the link's own colour and needs nothing extra for the dark theme. */
.nav-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.desktop-nav a:hover .nav-icon,
.mobile-nav a:hover .nav-icon { opacity: 1; }
.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--fill);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* The forum sits apart from the catalogue links: a leading acid dot marks it as
   a different destination without adding another button to a busy header. The
   dot is decorative, so the distinction is also carried by position and by the
   mobile hint text rather than by colour alone. */
.desktop-nav a.nav-forum { display: inline-flex; align-items: center; gap: 0.42rem; }
.desktop-nav a.nav-forum::before {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  content: "";
}
.desktop-nav a.nav-forum::after { left: 15px; }
/* A hairline, not another link: groups the catalogue links, the Top 9 picks
   and the two off-catalogue destinations without adding more chrome. */
.nav-divider { width: 1px; height: 15px; background: var(--line-strong); }
.mobile-nav a.nav-forum { display: flex; align-items: baseline; gap: 0.5rem; }
.mobile-nav .nav-forum__hint { color: var(--muted); font-size: 0.7rem; font-weight: 620; }
.mobile-nav__label { margin: 0; padding: 0.9rem 0.9rem 0.3rem; color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mobile-nav__label:first-child { padding-top: 0.6rem; }
.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.66rem 0.9rem 0.66rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
/* Sign in, beside the primary call to action on every page. Quieter than
   `.header-cta` on purpose: returning members know where it is, and it must not
   compete with the action we want a new visitor to take. */
.header-signin {
  justify-self: end;
  padding: 0.66rem 0.2rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-signin:hover { text-decoration: underline; }
.header-cta span { color: var(--accent); font-size: 1rem; }
.header-cta:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.header-cta:hover span { color: var(--ink); }
.menu-button {
  justify-self: end;
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.menu-button > span:not(.sr-only) { display: block; width: 17px; height: 2px; margin: 4px auto; background: var(--fill); transition: transform 180ms ease; }
.mobile-nav {
  position: fixed;
  top: 74px;
  right: 0;
  left: 0;
  z-index: 70;
  display: grid;
  padding: 1rem;
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.mobile-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem; border-bottom: 1px solid var(--line); font-weight: 750; text-decoration: none; }
.mobile-nav .nav-icon { width: 17px; height: 17px; }
/* The bell is drawn on the 24-unit grid, so it needs its own size here to land
   on the same optical weight as the 18-unit nav glyphs beside it. */
.mobile-nav .action-icon { width: 18px; height: 18px; opacity: .85; }
/* The forum row also carries a hint span, so its icon aligns to the link text
   rather than the row's cross-axis centre. */
.mobile-nav a.nav-forum { align-items: baseline; }
.mobile-nav a.nav-forum .nav-icon { align-self: center; }
/* The count sits at the far end of the row rather than beside the word, so it
   lines up with nothing else and reads as a status rather than part of the
   label. Same bubble as the header badge, minus the overlap it needs there. */
.mobile-nav__inbox { justify-content: flex-start; }
.mobile-nav__count { margin-left: auto; display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border: 1px solid var(--ink); border-radius: 999px; background: var(--coral); color: var(--on-accent); font-family: var(--display); font-size: .66rem; font-variant-numeric: tabular-nums; font-weight: 860; line-height: 1; }

/* Shared typography */
.eyebrow, .kicker {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.73rem;
  font-weight: 820;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 0.6rem; }
.eyebrow > span { width: 28px; height: 7px; border: 1px solid var(--ink); border-radius: 999px; background: var(--accent); }
.section-heading h2, .ranking-header h2, .home-forum__head h2, .radar-copy h2, .newsletter h2, .detail-section h2 {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 880;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

/* Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(2rem, 5vw, 7rem);
  min-height: 720px;
  padding: clamp(4.5rem, 8vw, 8.5rem) clamp(1rem, 5vw, 5.5rem) 2.5rem;
  border-bottom: 1px solid var(--line-strong);
  isolation: isolate;
}
.hero::after {
  position: absolute;
  right: -0.05em;
  bottom: -0.24em;
  z-index: -1;
  color: var(--ghost);
  font-family: var(--display);
  font-size: clamp(25rem, 49vw, 46rem);
  font-weight: 950;
  letter-spacing: -0.12em;
  line-height: 0.8;
  content: "9";
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; align-self: center; }
.hero h1 {
  max-width: 900px;
  margin: 1.15rem 0 1.55rem;
  font-family: var(--display);
  font-size: clamp(4.4rem, 8.2vw, 9rem);
  font-weight: 920;
  letter-spacing: -0.082em;
  line-height: 0.79;
}
.hero h1 em { color: var(--muted); font-family: var(--serif); font-weight: 400; }
.hero h1 span { position: relative; white-space: nowrap; }
.hero h1 span::after {
  position: absolute;
  right: 0.03em;
  bottom: -0.07em;
  left: 0.03em;
  z-index: -1;
  height: 0.19em;
  border-radius: 999px;
  background: var(--accent);
  content: "";
  transform: rotate(-1.5deg);
}
.hero-intro { max-width: 680px; margin: 0 0 2rem; color: var(--ink-soft); font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.55; }
.finder { max-width: 780px; }
.finder > label { display: block; margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 820; letter-spacing: 0.03em; }
.finder-control {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 0.42rem;
  border: 1.5px solid var(--ink);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 7px 7px 0 var(--stamp);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.finder-control:focus-within { box-shadow: 10px 10px 0 var(--brand); transform: translate(-2px, -2px); }
.finder-spark { margin-left: 0.8rem; color: var(--brand); font-size: 1.1rem; }
.finder-control input { flex: 1; min-width: 0; padding: 0.8rem; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 0.98rem; }
.finder-control input::placeholder { color: var(--muted); }
.finder-control button {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.83rem;
  font-weight: 880;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.finder-control button:hover { background: var(--fill); color: var(--accent); }
.finder-control button span { font-size: 1.1rem; }
.query-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.9rem; color: var(--muted); font-size: 0.73rem; }
.query-suggestions > span { margin-right: 0.2rem; font-weight: 750; }
.query-suggestions button { display: inline-flex; align-items: center; gap: 0.38rem; padding: 0.32rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--wash); cursor: pointer; }
.query-suggestions button:hover { border-color: var(--ink); background: var(--surface-hi); }
/* The live count behind a chip. Sits inside the button so the number travels
   with the label rather than reading as a separate control. */
.query-suggestions button small { padding: 0 0.32rem; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 0.62rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.finder-scope { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.7rem; }
.finder-scope strong { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* --------------------------- Typeahead listbox ---------------------------- */
/* The panel is anchored to the field rather than to the form, so the chips and
   the scope line beneath cannot shift it. */
.finder-field { position: relative; }
.finder-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.45rem);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 7px 7px 0 var(--stamp);
}
.suggest-list { max-height: min(52vh, 26rem); margin: 0; padding: 0.3rem; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.suggest-option {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  cursor: pointer;
}
/* One highlight, driven by the same state as `aria-activedescendant`: keyboard
   and pointer must never disagree about which row is current. */
.suggest-option.is-active { background: var(--accent); }
.suggest-option__badge {
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink-soft);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.suggest-option.is-active .suggest-option__badge { border-color: var(--ink); background: var(--surface); }
.suggest-option__badge--bank { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.suggest-option__body { display: grid; gap: 0.1rem; min-width: 0; }
.suggest-option__body strong { overflow: hidden; font-size: 0.85rem; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.suggest-option__body small { overflow: hidden; color: var(--muted); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.suggest-option.is-active .suggest-option__body small { color: var(--ink-soft); }
.suggest-option__check { color: var(--brand); font-size: 0.75rem; }
.suggest-foot { margin: 0; padding: 0.45rem 0.85rem; border-top: 1px solid var(--line); background: var(--wash); color: var(--muted); font-size: 0.66rem; }
.suggest-foot:empty { display: none; }

/* ---------------------------- Direct matches ------------------------------ */
/* Shown above the shortlist when the query named a card or an issuer outright.
   Deliberately plainer than a product card: this is a route to a page, not
   another thing to compare. */
.direct-hits { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.direct-hits h2 { margin: 0 0 0.7rem; font-size: 0.78rem; font-weight: 850; letter-spacing: 0.03em; text-transform: uppercase; }
.direct-hit {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr) 1.4rem;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.4rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-strong, var(--ink));
  border-radius: var(--radius-sm);
  background: var(--wash);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.direct-hit:hover { border-color: var(--ink); background: var(--surface-hi); transform: translateX(2px); }
.direct-hit--compare { background: var(--accent); }
.direct-hit__badge {
  padding: 0.22rem 0.35rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.direct-hit__body { display: grid; gap: 0.12rem; min-width: 0; }
.direct-hit__body strong { font-size: 0.92rem; font-weight: 830; }
.direct-hit__body small { overflow: hidden; color: var(--muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.direct-hit__check { color: var(--brand); }
.direct-hit__go { font-size: 1.05rem; text-align: right; }

/* An aside about the reading itself: a word set aside, or why the shortlist
   below ranks for what it does. */
.query-aside { margin: -0.7rem 0 1.3rem; color: var(--muted); font-size: 0.74rem; }
.hero-deck { position: relative; align-self: center; min-height: 505px; perspective: 1200px; transform-style: preserve-3d; }
.deck-card {
  --deck-x: 0px;
  --deck-y: 0px;
  position: absolute;
  width: min(88%, 460px);
  margin: 0;
  filter: drop-shadow(0 28px 24px rgba(16, 18, 15, 0.22));
  transform-style: preserve-3d;
  transition: transform 240ms ease, filter 240ms ease;
}
.deck-card img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; object-fit: contain; border-radius: 24px; }
.deck-card--back { top: 2%; left: 1%; transform: translate3d(calc(var(--deck-x) * -0.35), calc(var(--deck-y) * -0.35), -60px) rotate(-15deg); }
.deck-card--middle { top: 22%; right: -2%; transform: translate3d(calc(var(--deck-x) * 0.5), calc(var(--deck-y) * 0.5), -20px) rotate(10deg); }
.deck-card--front { top: 40%; left: 5%; z-index: 3; transform: translate3d(var(--deck-x), var(--deck-y), 25px) rotate(-2deg); }
.hero-deck:hover .deck-card--back { transform: translate3d(-25px, -14px, -60px) rotate(-19deg); }
.hero-deck:hover .deck-card--middle { transform: translate3d(32px, -8px, -20px) rotate(13deg); }
.hero-deck:hover .deck-card--front { transform: translate3d(0, 12px, 25px) rotate(0); filter: drop-shadow(0 34px 28px rgba(16,18,15,.26)); }
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.orbit--one { top: 7%; right: 0; width: 340px; height: 340px; }
/* The dashed ring rotates forever, and Chrome will not run that rotation on the
   compositor: the ring shares a 3D rendering context with the card deck (the
   `perspective` on `.hero-deck`), so it has to be depth-sorted against the three
   deck cards on the main thread. Every frame of it therefore costs a style
   recalculation, a prepaint and a commit -- measured at roughly 0.4-0.9ms per
   frame, forever, whether or not the hero is anywhere near the viewport.
   `is-paused` is toggled by an IntersectionObserver in app.js so the rest of the
   page scrolls against an idle renderer. Promoting the ring with `will-change`
   was tried and does not help; nor does flattening the deck's 3D context. */
.orbit--two { right: 14%; bottom: 0; width: 210px; height: 210px; border-style: dashed; animation: orbit-spin 24s linear infinite; }
.orbit--two.is-paused { animation-play-state: paused; }
.deck-note { position: absolute; right: 0; bottom: 5%; z-index: 6; display: block; padding: .7rem .9rem; border: 1px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: .65rem; line-height: 1.2; text-transform: uppercase; transform: rotate(4deg); box-shadow: 4px 4px 0 var(--stamp); }
.deck-note strong { font-size: .8rem; }
.hero-proof { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.hero-proof span { display: flex; align-items: baseline; gap: .45rem; }
.hero-proof strong { color: var(--ink); font-family: var(--display); font-size: 2rem; letter-spacing: -.06em; }

/* Intent rail: a two-row piano selector that stays on the same dark plane as
   the surrounding section. Hover follows Material state-layer conventions:
   a quiet colour tint and an accent indicator, not a raised glowing card. */
.intent-rail { padding: 0 clamp(1rem, 5vw, 5.5rem) 3rem; border-bottom: 1px solid var(--line-strong); background: var(--fill); color: var(--on-fill); }
.section-heading--compact { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.section-heading--compact .kicker { color: #a8aaa3; }
.section-heading--compact h2 { font-size: clamp(1.8rem, 3vw, 3.3rem); }
.intent-grid {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(132px, 1fr));
  gap: 1px;
  overflow: hidden;
  border-top: 1px solid #363832;
  border-bottom: 1px solid #363832;
  background: #363832;
}
.intent-tile {
  display: flex;
  grid-column: span 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: 0;
  min-height: 132px;
  padding: 1rem .7rem;
  background: var(--fill);
  color: #d8dad3;
  contain: paint;
  text-align: center;
  text-decoration: none;
}
.intent-tile:nth-child(n + 7) { grid-column: span 6; }
/* A direct background tint and inset rule are inexpensive to paint while
   scrolling. Avoiding filters, transforms and layered state elements means
   the pointer can pass over a key without promoting it to a new GPU layer. */
.intent-tile:hover, .intent-tile:focus-visible {
  background: color-mix(in srgb, var(--fill) 88%, var(--tile));
  box-shadow: inset 0 3px 0 var(--tile);
  color: #fff;
}
.intent-tile.is-active {
  background: color-mix(in srgb, var(--fill) 94%, var(--tile));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--tile) 68%, transparent);
}
.intent-tile:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* One visual grammar for every category: a compact card-shaped plate, a hard
   offset shadow matching the 9cards brand mark, and a heavy editorial line
   symbol. Colour comes from the tile modifier; the drawings themselves stay
   ink-black for consistent contrast and avoid the app-badge look of gradients. */
.intent-tile__icon { display: grid; width: 58px; height: 54px; place-items: center; }
.intent-tile__icon svg { display: block; width: 54px; height: 54px; overflow: visible; }
.intent-icon__shadow { fill: #050607; opacity: .72; }
.intent-icon__plate { fill: var(--tile); stroke: #101216; stroke-width: 1.5; }
.intent-icon__mark { fill: none; stroke: #101216; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.intent-icon__mark--fill { fill: #101216; stroke-width: 1.2; }
.intent-tile:hover .intent-icon__plate,
.intent-tile:focus-visible .intent-icon__plate { fill: color-mix(in srgb, var(--tile) 86%, white); }
.intent-tile.is-active .intent-icon__shadow { opacity: 1; }
.intent-tile__label { max-width: 12ch; font-size: .78rem; font-weight: 800; line-height: 1.2; color: inherit; }
.intent-tile--lime { --tile: #9fd94a; }.intent-tile--blue { --tile: #5f8bff; }.intent-tile--coral { --tile: #e2694c; }.intent-tile--violet { --tile: #8a6fe0; }.intent-tile--amber { --tile: #e0a223; }.intent-tile--red { --tile: #e0483f; }.intent-tile--sky { --tile: #2fa3d6; }.intent-tile--teal { --tile: #2fb896; }.intent-tile--ink { --tile: #9a9c94; }.intent-tile--indigo { --tile: #6a6ee0; }.intent-tile--green { --tile: #3f9c4c; }
@media (max-width: 800px) {
  .intent-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; }
  .intent-tile, .intent-tile:nth-child(n + 7) { grid-column: span 2; min-height: 120px; }
}
@media (max-width: 480px) {
  .intent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intent-tile, .intent-tile:nth-child(n + 7) { grid-column: span 1; min-height: 112px; }
}
/* Reduced motion is handled by the blanket rule further down this file, which
   collapses every animation and transition. The tiles need nothing of their own:
   their hover state is a colour change, not a movement. */

/* Ranking cards */
.ranking-section { padding: clamp(4.5rem, 8vw, 8rem) clamp(1rem, 5vw, 5.5rem); background: var(--paper); }
.ranking-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 2.2rem; }
.ranking-header > div:first-child { max-width: 880px; }
.ranking-header h2 { font-size: clamp(3.1rem, 6.3vw, 7rem); }
.ranking-header h2 span { color: var(--brand); }
.ranking-header > div > p:last-child { max-width: 760px; margin: .9rem 0 0; color: var(--muted); font-size: 1.04rem; }
.ranking-seal { display: grid; flex: 0 0 auto; width: 112px; height: 112px; place-items: center; align-content: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--accent); box-shadow: 8px 8px 0 var(--stamp); transform: rotate(7deg); }
.ranking-seal span { font-family: var(--display); font-size: 3.8rem; font-weight: 950; line-height: .72; letter-spacing: -.09em; }
.ranking-seal small { margin-top: .55rem; font-size: .63rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.query-readback { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.3rem; padding: .75rem 1rem; border: 1px solid var(--ink); background: var(--surface); font-size: .78rem; }
.query-readback strong { padding: .25rem .55rem; border-radius: 999px; background: var(--accent); }
.query-readback a { margin-left: auto; font-weight: 750; }
/* The same strip after a query that matched nothing. Dashed rather than solid,
   and without the accent pill, so it does not read as a result. */
.query-readback--empty { border-style: dashed; background: var(--wash); }
.query-readback--empty strong { background: transparent; padding-left: 0; font-variant-numeric: tabular-nums; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.product-card {
  --card-accent: var(--brand);
  position: relative;
  display: flex;
  min-width: 0;
  padding: .6rem .65rem .55rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--wash);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  flex-direction: column;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 220ms ease;
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transform-style: preserve-3d;
}
.product-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--card-accent); content: ""; }
.product-card::after { position: absolute; top: var(--glow-y, 50%); left: var(--glow-x, 50%); width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.72), transparent 68%); opacity: 0; content: ""; pointer-events: none; transform: translate(-50%,-50%); transition: opacity 180ms ease; }
.product-card:hover { z-index: 2; background: var(--surface); box-shadow: var(--shadow-lg); transform: perspective(900px) translateY(-9px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }
.product-card:hover::after { opacity: .38; }
.product-card--navy { --card-accent: #bce83a; }.product-card--charcoal { --card-accent: #ffae35; }.product-card--orange { --card-accent: #ff6b30; }.product-card--red { --card-accent: #e62c33; }.product-card--purple { --card-accent: #8b62ff; }.product-card--electric { --card-accent: #4e78ff; }.product-card--sky { --card-accent: #27c5e5; }.product-card--aurora { --card-accent: #7c55e8; }.product-card--white { --card-accent: #e51f3f; }
.product-topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: .5rem; }
.rank { font-family: var(--display); font-size: 1.15rem; font-weight: 950; letter-spacing: -.06em; line-height: 1; }
.fit { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .44rem; border: 1px solid var(--line); border-radius: 999px; background: var(--wash); font-size: .61rem; font-weight: 820; }
.fit i { position: relative; width: 30px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--track); }
.fit i::after { position: absolute; inset: 0; width: var(--fit); background: var(--card-accent); content: ""; }
.card-art { position: relative; z-index: 2; display: block; margin-bottom: .55rem; border-radius: 10px; outline: 1px solid var(--line); overflow: hidden; transform: translateZ(18px); }
.card-art img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; object-fit: contain; transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.product-card:hover .card-art img { transform: scale(1.025); }
.product-copy { position: relative; z-index: 2; flex: 1; }
.issuer-line { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.issuer-line span:first-of-type { flex: 1; }
.issuer-line :is(.bank-badge, .bank-logo) { margin-inline-end: 0; }
.product-copy h3 { margin: .12rem 0 .28rem; font-size: clamp(.98rem, 1.2vw, 1.15rem); letter-spacing: -.035em; line-height: 1.06; }
.product-copy h3 a { text-decoration: none; }
.product-headline { display: -webkit-box; margin: 0; overflow: hidden; font-size: .74rem; font-weight: 740; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rank-reason { display: -webkit-box; margin: .3rem 0 .5rem; overflow: hidden; color: var(--muted); font-size: .68rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .3rem .4rem; padding: .4rem 0; border-block: 1px solid var(--line); }
.product-meta div { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 0; padding: .1rem .4rem; border-radius: 999px; background: var(--tint); }
.product-meta small { flex: 0 0 auto; color: var(--muted); font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-meta strong { overflow: hidden; font-size: .72rem; font-weight: 620; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.product-actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding-top: .45rem; }
.product-actions a { font-size: .66rem; font-weight: 830; text-decoration: none; white-space: nowrap; }
.product-actions > a { display: flex; align-items: center; gap: .3rem; }
.product-actions .compare-check { margin-top: 0; margin-right: auto; }
.product-actions > a span { color: var(--card-accent); font-size: .9rem; transition: transform 160ms ease; }
.product-actions > a:hover span { transform: translateX(3px); }
.source-link { color: var(--muted); font-weight: 650 !important; }
.source-link:hover { color: var(--ink); text-decoration: underline; }
.art-disclosure { max-width: 860px; margin: 1.2rem auto 0; color: var(--muted); font-size: .65rem; text-align: center; }
/* Community, radar, journal */
.home-forum { padding: clamp(4.5rem, 8vw, 8rem) clamp(1rem, 5vw, 5.5rem); border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.home-forum__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.home-forum__head h2 { max-width: 770px; margin: .55rem 0 0; font-family: var(--display); font-size: clamp(3rem, 5.5vw, 6.1rem); font-weight: 900; letter-spacing: -.065em; line-height: .9; }
.home-forum__head > a { flex: 0 0 auto; padding: .65rem .85rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--fill); color: var(--on-fill); font-size: .72rem; font-weight: 820; text-decoration: none; }
.home-forum__head > a:hover { background: var(--accent); color: var(--ink); }
.home-forum__head > a span { color: var(--accent); font-size: 1rem; }
.home-forum__head > a:hover span { color: var(--ink); }
.home-forum__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.home-forum-card { display: grid; grid-template-columns: 144px minmax(0, 1fr) auto; gap: 1.15rem; align-items: center; min-height: 132px; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.home-forum-card:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.home-forum-card__art { position: relative; display: grid; min-height: 112px; place-items: center; overflow: hidden; border: 1px solid var(--ink); border-radius: 7px; background: var(--accent); color: var(--ink); text-decoration: none; }
.home-forum-card__art::before { position: absolute; width: 92px; height: 92px; border: 15px solid var(--ink); border-radius: 50%; content: ""; opacity: .82; transform: translate(-21px, -16px); }
.home-forum-card__art span { position: relative; z-index: 1; font-family: var(--display); font-size: 2.4rem; font-weight: 950; letter-spacing: -.09em; }
.home-forum-card__art small { position: absolute; right: .45rem; bottom: .25rem; color: var(--ink-soft); font-size: .58rem; font-weight: 850; letter-spacing: .08em; }
.home-forum-card__body { min-width: 0; }
.home-forum-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; color: var(--muted); font-size: .68rem; }
.home-forum-card__meta a { padding: .16rem .42rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: .57rem; font-weight: 830; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.home-forum-card__meta a:hover { background: var(--accent); }
.home-forum-card__meta span::before { margin-right: .45rem; color: var(--line-strong); content: "·"; }
.home-forum-card h3 { margin: .42rem 0; font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: -.035em; line-height: 1.15; }
.home-forum-card h3 a { text-decoration: none; }
.home-forum-card h3 a:hover { text-decoration: underline; }
.home-forum-card__byline { margin: 0; color: var(--muted); font-size: .72rem; }
.home-forum-card__byline a { color: var(--ink); font-weight: 750; text-decoration: none; }
.home-forum-card__byline a:hover { text-decoration: underline; }
.home-forum-card__action { display: grid; gap: .35rem; min-width: 74px; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: .62rem; font-weight: 800; line-height: 1; text-align: center; text-decoration: none; }
.home-forum-card__action i { color: var(--brand); font-size: 1.05rem; font-style: normal; }
.home-forum-card__action:hover { border-color: var(--ink); background: var(--accent); }
.home-forum__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem; border: 1px dashed var(--line-strong); background: var(--wash); }
.home-forum__empty p { margin: 0; color: var(--muted); font-size: .82rem; }
.home-forum__empty a { font-size: .72rem; font-weight: 820; }
.change-radar { display: grid; grid-template-columns: minmax(145px, .32fr) minmax(0, 1.68fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 6vw, 7rem); border-bottom: 1px solid var(--line-strong); background: var(--fill); color: var(--on-fill); }
.change-radar__signal { display: grid; align-content: start; gap: .45rem; min-height: 166px; padding: 1rem; border: 1px solid #4a4d47; background: #1e211d; }
.change-radar__signal strong { color: var(--accent); font-family: var(--display); font-size: clamp(4rem, 7vw, 6.8rem); font-weight: 950; letter-spacing: -.1em; line-height: .7; }
.change-radar__signal span { font-size: .67rem; font-weight: 850; letter-spacing: .09em; line-height: 1.25; text-transform: uppercase; }
.change-radar__signal small { margin-top: auto; color: #aeb2a8; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.radar-copy .kicker { color: var(--accent); }
.radar-copy__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.radar-copy h2 { margin: .8rem 0 0; font-size: clamp(2.7rem, 5.4vw, 5.8rem); }
.radar-copy__head > a { flex: 0 0 auto; padding: .62rem .8rem; border: 1px solid #676b62; color: var(--on-fill); font-size: .66rem; font-weight: 820; text-decoration: none; white-space: nowrap; }
.radar-copy__head > a:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.radar-copy__head > a span { color: var(--accent); font-size: .9rem; }
.radar-copy__head > a:hover span { color: var(--ink); }
.radar-copy > p { max-width: 760px; margin: 1rem 0 0; color: #bfc2ba; font-size: .92rem; }
.change-items { margin: 2rem 0 0; padding: 0; border-top: 1px solid #3b3e38; list-style: none; }
.change-items > li { display: grid; grid-template-columns: 108px 92px minmax(0, 1fr) minmax(120px, .5fr); gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid #3b3e38; }
.change-items time { color: var(--accent); font-size: .66rem; font-weight: 820; text-transform: uppercase; }
.change-items__topic { color: #9b9f97; font-size: .59rem; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }
.change-items p { margin: 0; color: #c9cbc5; font-size: .76rem; line-height: 1.5; }
.change-items strong { color: var(--on-fill); }
.change-items__card { color: #d9dcd5; font-size: .68rem; font-weight: 740; line-height: 1.4; text-decoration: none; }
a.change-items__card:hover { color: var(--accent); text-decoration: underline; }

/* Updates archive */
.updates-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 6vw, 7rem) clamp(3rem, 5vw, 5rem); border-bottom: 1px solid var(--ink); background: var(--accent); }
.updates-hero h1 { max-width: 980px; margin: .75rem 0 1rem; font-family: var(--display); font-size: clamp(4rem, 8.4vw, 9.2rem); font-weight: 950; letter-spacing: -.082em; line-height: .8; }
.updates-hero h1 span { font-family: var(--serif); font-weight: 400; }
.updates-hero > div > p:last-child { max-width: 670px; margin: 0; font-size: clamp(1rem, 1.55vw, 1.25rem); line-height: 1.5; }
.updates-hero__status { display: grid; gap: .5rem; min-width: 185px; padding: 1rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); }
.updates-hero__status strong { color: var(--accent); font-family: var(--display); font-size: 5rem; font-weight: 950; letter-spacing: -.1em; line-height: .7; }
.updates-hero__status span { font-size: .67rem; font-weight: 850; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.updates-hero__status small { margin-top: 1.5rem; color: #afb3aa; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.updates-page { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: clamp(2rem, 7vw, 8rem); padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem); background: var(--surface); }
.updates-page__intro { align-self: start; position: sticky; top: 96px; }
.updates-page__intro h2 { margin: .7rem 0; font-family: var(--display); font-size: clamp(3rem, 5vw, 5.3rem); font-weight: 950; letter-spacing: -.065em; line-height: .88; }
.updates-page__intro > p:last-child { max-width: 310px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.updates-list { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.update-row { display: grid; grid-template-columns: 110px 100px minmax(0, 1fr) minmax(130px, .46fr); gap: 1rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line-strong); }
.update-row time { color: var(--brand); font-size: .68rem; font-weight: 830; text-transform: uppercase; }
.update-row__topic { padding-top: .05rem; color: var(--muted); font-size: .59rem; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }
.update-row__body h3 { margin: 0 0 .32rem; font-size: 1rem; letter-spacing: -.025em; }
.update-row__body p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.update-row__card { color: var(--ink); font-size: .7rem; font-weight: 760; line-height: 1.4; text-decoration: none; }
a.update-row__card:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 760px) { .change-radar { grid-template-columns: 1fr; gap: 1.5rem; } .change-radar__signal { grid-template-columns: auto 1fr; column-gap: .8rem; min-height: 0; align-items: center; } .change-radar__signal strong { grid-row: span 2; font-size: 4.5rem; } .change-radar__signal small { grid-column: 2; margin-top: 0; } .radar-copy__head { align-items: start; flex-direction: column; } .change-items > li { grid-template-columns: 84px 1fr; gap: .45rem .75rem; } .change-items__topic { grid-column: 2; grid-row: 1; } .change-items p { grid-column: 1 / -1; } .change-items__card { grid-column: 1 / -1; } .updates-hero { grid-template-columns: 1fr; } .updates-hero__status { width: min(100%, 230px); } .updates-page { grid-template-columns: 1fr; } .updates-page__intro { position: static; } .update-row { grid-template-columns: 88px 1fr; gap: .45rem .8rem; } .update-row__topic { grid-column: 2; grid-row: 1; } .update-row__body, .update-row__card { grid-column: 1 / -1; } }
.newsletter { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: end; padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 5vw, 5.5rem); background: var(--accent); }
.newsletter h2 { margin-top: .7rem; font-size: clamp(3rem, 5.5vw, 6rem); }
/* Two real destinations where a dead signup form used to be. */
.newsletter-actions { display: grid; gap: .7rem; justify-items: start; }
.newsletter-actions a { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.15rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); font-size: .8rem; font-weight: 820; text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.newsletter-actions a:hover { background: var(--fill); color: var(--accent); transform: translateY(-2px); }
.newsletter-actions__cta { background: var(--fill) !important; color: var(--accent); }
.newsletter-actions__cta:hover { background: var(--surface) !important; color: var(--ink); }
.newsletter small { font-size: .63rem; }

/* Category pages */
.category-hero { --category-accent: var(--accent); position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; min-height: 500px; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 5vw, 5.5rem) 4rem; overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--category-accent); }
.category-hero--brand { --category-accent: #91acff; }.category-hero--coral { --category-accent: #ff846b; }.category-hero--violet { --category-accent: #b69cff; }.category-hero--amber { --category-accent: #ffc852; }.category-hero--red { --category-accent: #ff7a7a; }.category-hero--sky { --category-accent: #78dfff; }.category-hero--teal { --category-accent: #62dec5; }.category-hero--ink { --category-accent: #b9bec9; }.category-hero--indigo { --category-accent: #9293ff; }.category-hero--green { --category-accent: #83e991; }
.category-hero h1 { max-width: 1050px; margin: 1rem 0; font-family: var(--display); font-size: clamp(4rem, 8.5vw, 9rem); font-weight: 930; letter-spacing: -.078em; line-height: .82; }
.category-hero h1 span { font-family: var(--serif); font-weight: 400; }
.category-hero > div:first-child > p:last-child { max-width: 720px; margin: 1rem 0 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.category-nine { display: flex; align-items: flex-end; gap: .8rem; transform: rotate(5deg); }
.category-nine span { font-family: var(--display); font-size: clamp(9rem, 18vw, 18rem); font-weight: 950; letter-spacing: -.13em; line-height: .66; }
.category-nine i { padding-bottom: .5rem; font-size: .67rem; font-style: normal; font-weight: 850; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.category-switcher { position: sticky; top: 73px; z-index: 50; display: flex; gap: .4rem; padding: .75rem clamp(1rem,5vw,5.5rem); overflow-x: auto; border-bottom: 1px solid var(--line-strong); background: var(--wash); backdrop-filter: blur(14px); }
.category-switcher a { flex: 0 0 auto; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .65rem; font-weight: 780; text-decoration: none; }
.category-switcher a:hover, .category-switcher a[aria-current="page"] { border-color: var(--ink); background: var(--fill); color: var(--on-fill); }
.ranking-section--category { padding-top: 5rem; }
.ranking-section--category .ranking-header h2 { max-width: 900px; font-size: clamp(2.8rem,5vw,5.6rem); }
/* Category guide: the written half of a /top-9 page. Two columns on desktop so
   the heading acts as a standing title beside the prose, one column below. Body
   copy uses the reading face, not the condensed display face, for the same
   reason article bodies do. */
.category-guide { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5.5rem); padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5.5rem); border-top: 1px solid var(--ink); background: var(--surface); }
.category-guide__head { align-self: start; position: sticky; top: 96px; }
.category-guide__head h2 { margin: .7rem 0 1rem; font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 4.4rem); font-weight: 930; letter-spacing: -.06em; line-height: .93; }
.category-guide__standfirst { max-width: 42ch; margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; }
.category-guide__byline { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 0; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.category-guide__body { max-width: 760px; font-family: var(--text); }
.category-guide__subhead, .category-guide__body h3 { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.08; }

.guide-criteria { display: grid; gap: .75rem; margin: 0 0 2.6rem; padding: 0; list-style: none; }
.guide-criteria li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .2rem .9rem; padding: .95rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); }
.guide-criteria__num { grid-row: span 2; align-self: start; color: var(--brand); font-family: var(--display); font-size: 1.7rem; font-weight: 950; letter-spacing: -.06em; line-height: 1; }
.guide-criteria h4 { margin: 0; font-size: .93rem; letter-spacing: -.02em; }
.guide-criteria p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.6; }

.guide-block { margin-bottom: 2.6rem; }
.guide-block h3 { margin-bottom: .8rem; }
.guide-block p { margin: 0 0 1.05rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.guide-block__points { margin: 0 0 1.1rem; padding-left: 1.15rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }
.guide-block__points li { margin-bottom: .45rem; }

.guide-faq { margin-bottom: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line-strong); }
.guide-faq dl { margin: 0; }
.guide-faq dt { margin-top: 1.35rem; font-size: .96rem; font-weight: 800; letter-spacing: -.015em; }
.guide-faq dt:first-of-type { margin-top: 0; }
.guide-faq dd { margin: .4rem 0 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.7; }

.guide-next { padding: 1.15rem 1.25rem; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--wash); }
.guide-next ul { display: grid; gap: .45rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.guide-next a { color: var(--brand); font-size: .86rem; font-weight: 720; text-decoration: none; }
.guide-next a:hover { text-decoration: underline; }
.guide-next__other { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; line-height: 2; }
.guide-next__other a { margin-left: .3rem; padding: .2rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .68rem; font-weight: 780; }
.guide-next__other a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }

/* Card detail */
.detail-page { padding: 0 clamp(1rem,5vw,5.5rem) clamp(5rem,8vw,8rem); }
.breadcrumbs { display: flex; gap: .55rem; padding: 1rem 0; overflow: hidden; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.breadcrumbs a { text-decoration: none; }.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.detail-hero { --detail-accent: var(--accent); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,3vw,2.75rem); align-items: center; padding: clamp(1.5rem,2.8vw,2.25rem); overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius-lg); background: var(--detail-accent); }
.detail-hero--navy { --detail-accent: #c6d0f7; }.detail-hero--charcoal { --detail-accent: #ffba52; }.detail-hero--orange { --detail-accent: #ff976d; }.detail-hero--red { --detail-accent: #f27a7e; }.detail-hero--purple { --detail-accent: #b8a0ff; }.detail-hero--electric { --detail-accent: #91acff; }.detail-hero--sky { --detail-accent: #88e1f3; }.detail-hero--aurora { --detail-accent: #aa99e5; }.detail-hero--white { --detail-accent: #f1a0ad; }
.detail-bank { margin: .9rem 0 .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-hero h1 { max-width: 800px; margin: 0; font-family: var(--display); font-size: clamp(2.1rem,3.8vw,3.4rem); font-weight: 920; letter-spacing: -.045em; line-height: .95; }
.detail-headline { max-width: 650px; margin: .9rem 0; font-size: clamp(1.1rem,1.5vw,1.35rem); }
.detail-tags { display: flex; flex-wrap: wrap; gap: .45rem; }.detail-tags span { padding: .36rem .6rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .65rem; font-weight: 750; }
.detail-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }.detail-cta a { padding: .75rem 1rem; border: 1px solid var(--ink); border-radius: 9px; font-size: .75rem; font-weight: 820; text-decoration: none; }.detail-cta a:first-child { background: var(--fill); color: var(--on-fill); }.detail-cta a:hover { background: var(--surface-hi); color: var(--ink); }
.detail-hero figure { margin: 0; transform: rotate(4deg); }.detail-hero figure img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; object-fit: contain; filter: drop-shadow(0 28px 24px rgba(16,18,15,.24)); }.detail-hero figcaption { margin-top: .75rem; font-size: .62rem; text-align: center; }
.detail-scorecard { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 1rem; border: 1px solid var(--ink); }.detail-scorecard > div { display: grid; gap: .25rem; padding: 1rem; border-right: 1px solid var(--ink); }.detail-scorecard > div:last-child { border-right: 0; }.detail-scorecard small { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.detail-scorecard strong { font-size: .82rem; font-weight: 650; }
.detail-layout { display: grid; grid-template-columns: 1fr 330px; gap: 4rem; padding: clamp(4rem,7vw,7rem) 0; }.detail-section h2 { max-width: 900px; margin-top: .8rem; font-size: clamp(2.7rem,5vw,5.4rem); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem; border: 1px solid var(--ink); }.pros-cons > div { padding: 1.3rem; }.pros { border-right: 1px solid var(--ink); }.pros-cons ul { margin: 1rem 0 0; padding: 0; list-style: none; }.pros-cons li { display: grid; grid-template-columns: 26px 1fr; gap: .6rem; padding: .8rem 0; border-top: 1px solid var(--line); font-size: .78rem; }.pros-cons li span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--accent); font-weight: 900; }.cons li span { background: var(--coral); }
.source-box { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid var(--ink); background: var(--surface); }.source-box > span { padding: .35rem .55rem; border-radius: 999px; background: var(--accent); font-size: .59rem; font-weight: 850; text-transform: uppercase; }.source-box strong { font-size: .8rem; }.source-box p { margin: .15rem 0 0; color: var(--muted); font-size: .67rem; }.source-box a { font-size: .7rem; font-weight: 800; }
.detail-aside { align-self: start; position: sticky; top: 150px; padding: 1.2rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); box-shadow: 7px 7px 0 var(--accent); }.detail-aside .kicker { color: var(--accent); }.detail-aside ol { margin: 1rem 0; padding: 0; list-style: none; }.detail-aside li { display: grid; grid-template-columns: 27px 1fr; gap: .7rem; padding: .9rem 0; border-top: 1px solid #444741; font-size: .75rem; }.detail-aside li span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: .65rem; }.detail-aside > p:last-child { color: #afb1ab; font-size: .65rem; }
.related { padding-top: 2rem; border-top: 1px solid var(--ink); }.related .section-heading h2 { font-size: clamp(2.5rem,4vw,4.5rem); }.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.5rem; }.related-grid > a { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: .8rem; align-items: center; padding: .7rem; border: 1px solid var(--ink); background: var(--surface); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }.related-grid > a:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 var(--stamp); }.related-grid > a > span { position: absolute; top: .3rem; left: .3rem; z-index: 2; padding: .18rem .3rem; background: var(--accent); font-size: .55rem; font-weight: 850; }.related-grid img { display: block; width: 70px; height: auto; aspect-ratio: 8 / 5; object-fit: contain; border-radius: 7px; }.related-grid div { display: grid; gap: .2rem; }.related-grid strong { font-size: .76rem; }.related-grid small { color: var(--muted); font-size: .64rem; }.related-grid i { font-style: normal; }

/* Information pages and footer */
.info-page { display: grid; grid-template-columns: 1fr minmax(250px,340px); gap: 5rem; max-width: 1250px; margin: 0 auto; padding: clamp(5rem,9vw,9rem) clamp(1rem,5vw,5rem); }.info-page header { grid-column: 1 / -1; max-width: 1050px; }.info-page h1, .not-found h1 { margin: 1rem 0; font-family: var(--display); font-size: clamp(4rem,8vw,8.5rem); font-weight: 930; letter-spacing: -.08em; line-height: .82; }.info-page header > p:last-child { max-width: 750px; color: var(--muted); font-size: 1.2rem; }.info-body { max-width: 780px; }.info-body h2 { margin: 2.5rem 0 .6rem; font-family: var(--display); font-size: 2.5rem; letter-spacing: -.05em; }.info-body p { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }.info-page aside { align-self: start; padding: 1.2rem; border: 1px solid var(--ink); background: var(--accent); box-shadow: 7px 7px 0 var(--stamp); }.info-page aside p { margin: .5rem 0 0; font-size: .75rem; }
.not-found { min-height: 720px; display: grid; place-items: center; align-content: center; padding: 5rem 1rem; text-align: center; }.not-found > span { color: var(--brand); font-family: var(--display); font-size: 11rem; font-weight: 950; letter-spacing: -.12em; line-height: .6; }.not-found p { color: var(--muted); }.not-found > div { display: flex; gap: .7rem; }.not-found a { padding: .7rem 1rem; border: 1px solid var(--ink); border-radius: 8px; font-size: .75rem; font-weight: 800; text-decoration: none; }.not-found a:first-child { background: var(--fill); color: var(--on-fill); }
.site-footer { padding: clamp(4rem,7vw,7rem) clamp(1rem,5vw,5.5rem) 1.2rem; background: var(--paper-deep); border-top: 1px solid var(--ink); }.footer-lead { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--ink); }.brand--footer { font-size: clamp(2.5rem,5vw,5rem); }.brand--footer .brand-mark { width: clamp(52px,6vw,78px); border-radius: 19px; font-size: clamp(2.2rem,4vw,4rem); box-shadow: 7px 7px 0 var(--stamp); }.footer-lead p { max-width: 320px; margin: 0; font-family: var(--serif); font-size: 1.3rem; font-style: italic; text-align: right; }.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 4rem; padding: 3rem 0; }.footer-links > div { display: grid; align-content: start; gap: .5rem; }.footer-links strong { margin-bottom: .5rem; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }.footer-links a { width: fit-content; color: var(--muted); font-size: .77rem; text-decoration: none; }.footer-links a:hover { color: var(--ink); text-decoration: underline; }.footer-floor { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .62rem; }

/* Ambient motion */
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr .78fr; gap: 2rem; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-grid { grid-template-columns: 1.5fr 1fr; }
  .article-grid article:last-child { grid-column: 1 / -1; min-height: 280px; border-top: 1px solid var(--ink); border-right: 0; }
  .detail-layout { grid-template-columns: 1fr 280px; gap: 2rem; }
  .category-guide { grid-template-columns: 1fr; gap: 2rem; }
  .category-guide__head { position: static; }
}
/* Staff see one more nav link than everyone else ("Moderate"), which is exactly
   when the signed-in header runs out of room. Shedding the display name first
   buys ~130px and costs nothing: the avatar beside it already identifies who is
   signed in, and the link still goes to /account. */
@media (max-width: 1400px) {
  .account-chip__name { display: none; }
}
/* Next to go are the nav glyphs, worth ~175px across eight items. The labels are
   what people read; the icons are decoration and are marked `aria-hidden`, so
   dropping them loses nothing but ornament. */
@media (max-width: 1300px) {
  .desktop-nav .nav-icon { display: none; }
  .desktop-nav a.nav-forum::after { left: 0; }
}
@media (max-width: 1180px) {
  .site-header { grid-template-columns: 1fr auto; }
  /* On narrow screens the account chip and sign-in move into the mobile sheet,
     which already lists them, so the header keeps only the brand and the menu. */
  .desktop-nav, .header-cta, .header-signin, .account-chip { display: none; }
  .menu-button { display: block; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; }
  .hero h1 { font-size: clamp(4.3rem,13vw,8rem); }
  .hero-deck { width: min(100%, 620px); min-height: 540px; margin: -1rem auto 0; }
  .hero-proof { justify-content: space-between; }
  .home-forum, .change-radar { grid-template-columns: 1fr; }
  .radar-visual { width: min(80vw,460px); }
  .article-grid { grid-template-columns: 1fr 1fr; }
  .article-feature { grid-column: 1 / -1; }
  .newsletter { grid-template-columns: 1fr; gap: 2rem; }
  .category-hero { min-height: 430px; }
  .category-nine { opacity: .5; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero figure { width: min(100%,520px); margin-inline: auto; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
  .related-grid { grid-template-columns: 1fr; }
  .info-page { grid-template-columns: 1fr; gap: 2rem; }.info-page aside { max-width: 520px; }
}
@media (max-width: 680px) {
  body { font-size: 15px; }
  .site-shell { border: 0; }
  .site-header { min-height: 66px; padding-inline: 1rem; }
  .mobile-nav { top: 66px; }
  .hero { padding: 3.8rem 1rem 1.5rem; }
  .hero h1 { font-size: clamp(3.65rem,18.5vw,6rem); line-height: .82; }
  .hero h1 span { white-space: normal; }
  .hero-intro { font-size: 1rem; }
  .finder-control { display: grid; grid-template-columns: auto 1fr; padding: .35rem; box-shadow: 5px 5px 0 var(--stamp); }
  .finder-control button { grid-column: 1 / -1; min-height: 46px; justify-content: center; }
  .finder-spark { margin-left: .55rem; }
  .hero-deck { min-height: 410px; }
  .deck-card { width: 88%; }
  .deck-card--middle { top: 19%; }.deck-card--front { top: 36%; }
  .orbit--one { width: 260px; height: 260px; }
  .deck-note { right: .3rem; bottom: 1%; }
  .hero-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
  .hero-proof span { display: grid; gap: 0; }
  .hero-proof strong { font-size: 1.5rem; }
  .intent-rail, .ranking-section, .home-forum, .change-radar, .journal, .newsletter, .category-guide { padding-inline: 1rem; }
  .section-heading--compact { display: block; }
  .section-heading--compact h2 { margin-top: .35rem; }
  .ranking-header { align-items: flex-start; gap: 1rem; }
  .ranking-header h2 { font-size: 3.6rem; }
  .ranking-seal { width: 78px; height: 78px; box-shadow: 5px 5px 0 var(--stamp); }
  .ranking-seal span { font-size: 2.6rem; }.ranking-seal small { font-size: .48rem; margin-top: .35rem; }
  .card-grid { grid-template-columns: 1fr; }
  .product-card { border-radius: 15px; }
  .query-readback { flex-wrap: wrap; }.query-readback a { width: 100%; margin-left: 0; }
  .finder-panel { box-shadow: 5px 5px 0 var(--stamp); }
  .suggest-option { grid-template-columns: 3.9rem minmax(0, 1fr); gap: .55rem; }
  .direct-hit { grid-template-columns: 4rem minmax(0, 1fr); gap: .55rem; }
  .direct-hit__go { display: none; }
  .home-forum__head h2, .radar-copy h2 { font-size: 3.6rem; }
  .home-forum-card { grid-template-columns: 92px minmax(0, 1fr); gap: .8rem; padding: .65rem; }
  .home-forum-card__art { min-height: 92px; }
  .home-forum-card__art::before { width: 72px; height: 72px; border-width: 11px; }
  .home-forum-card__art span { font-size: 1.8rem; }
  .home-forum-card__action { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .55rem; }
  .home-forum-card__action i { font-size: .9rem; }
  .change-items > div { grid-template-columns: 75px 1fr; }
  .journal .section-heading { display: block; }.journal .section-heading > a { display: inline-block; margin-top: 1rem; }
  .article-grid { display: block; }
  .article-grid article, .article-grid article:last-child { min-height: 330px; border: 0; border-bottom: 1px solid var(--ink); }
  .article-grid article:last-child { border-bottom: 0; }
  .article-feature { display: block; }
  .article-art { min-height: 280px; margin-bottom: 1.5rem; }
  .newsletter form { grid-template-columns: 1fr; }.newsletter button { min-height: 48px; }.newsletter small { grid-column: 1; }
  .category-hero { grid-template-columns: 1fr; min-height: 480px; padding: 4rem 1rem 2rem; }.category-hero h1 { font-size: 4.5rem; }.category-nine { position: absolute; right: -1rem; bottom: .5rem; z-index: 0; opacity: .14; }.category-hero > div:first-child { position: relative; z-index: 2; }
  .category-switcher { top: 65px; padding-inline: 1rem; }
  .ranking-section--category .ranking-header { display: block; }
  .category-guide__head h2 { font-size: 2.3rem; }
  .guide-criteria li { grid-template-columns: 1.7rem minmax(0, 1fr); padding: .8rem .85rem; }
  .detail-page { padding-inline: 1rem; }.detail-hero { padding: 1.5rem 1rem; border-radius: 18px; }.detail-hero h1 { font-size: 2.1rem; }.detail-scorecard { grid-template-columns: 1fr 1fr; }.detail-scorecard > div:nth-child(2) { border-right: 0; }.detail-scorecard > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }.pros-cons { grid-template-columns: 1fr; }.pros { border-right: 0; border-bottom: 1px solid var(--ink); }.source-box { grid-template-columns: 1fr; }.source-box > span { width: fit-content; }
  .info-page { padding: 4rem 1rem; }.info-page h1, .not-found h1 { font-size: 4.2rem; }
  .footer-lead { display: block; }.footer-lead p { margin-top: 2rem; text-align: left; }.footer-links { grid-template-columns: 1fr 1fr; gap: 2rem; }.footer-floor { display: block; }
}
@media (max-width: 390px) {
  .hero h1 { font-size: 3.4rem; }
  .hero-deck { min-height: 340px; }
  .ranking-header h2, .home-forum__head h2, .radar-copy h2 { font-size: 3rem; }
  .detail-hero h1 { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .product-card { transform: none !important; }
}
@media print {
  .site-header, .mobile-nav, .site-footer, .newsletter, .hero-deck, .query-suggestions, .product-actions, .detail-cta { display: none !important; }
  body { background: var(--surface-hi); }
  .site-shell { border: 0; }
  .card-grid { grid-template-columns: repeat(2,1fr); }
  .product-card { break-inside: avoid; box-shadow: none; }
}

/* Research catalogue */
.catalogue-page, .research-detail { padding: 0 clamp(1rem,5vw,5.5rem) clamp(5rem,8vw,8rem); }
.catalogue-hero { max-width: 1100px; padding: clamp(5rem,9vw,9rem) 0 4rem; }
.catalogue-hero h1, .research-detail__hero h1 { margin: 1rem 0; font-family: var(--display); font-size: clamp(4rem,8vw,8rem); font-weight: 930; letter-spacing: -.08em; line-height: .82; }
.research-detail__hero h1 { margin: .5rem 0 .4rem; font-size: clamp(2rem,3.6vw,3.1rem); letter-spacing: -.045em; line-height: .95; }
.catalogue-hero h1 em { color: var(--muted); font-family: var(--serif); font-weight: 400; }
.catalogue-hero > p:last-of-type { max-width: 760px; color: var(--muted); font-size: 1.1rem; }
.catalogue-counts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.catalogue-counts span { padding: .6rem .8rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .72rem; }
.catalogue-counts strong { font-size: 1rem; }
.catalogue-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1rem 0; border-block: 1px solid var(--ink); font-size: .7rem; }
.catalogue-legend > strong { margin-right: .5rem; text-transform: uppercase; }
.status { display: inline-flex; width: fit-content; padding: .28rem .5rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .59rem; font-weight: 840; letter-spacing: .04em; text-transform: uppercase; }
.status--verified, .status--active { background: var(--accent); }
.status--review, .status--unknown { background: var(--yellow); }
.status--invite-only { background: #c9d7ff; }
.status--temporarily-unavailable { background: #ffd7a8; }
.status--discontinued { background: var(--coral); }
.issuer-index { display: flex; overflow-x: auto; gap: .45rem; padding: 1rem 0; border-bottom: 1px solid var(--ink); scrollbar-width: thin; }
.issuer-index a { flex: 0 0 auto; padding: .42rem .62rem; border: 1px solid var(--ink); background: var(--surface); font-size: .62rem; font-weight: 800; text-decoration: none; }
.issuer-index a:hover { background: var(--accent); }
.catalogue-groups { display: grid; gap: 3.5rem; padding-top: 3rem; }
.issuer-group { scroll-margin-top: 110px; }
.issuer-group__head { display: flex; align-items: center; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--ink); }
.issuer-group__head :is(.bank-badge, .bank-logo) { margin-inline-end: 0; }
.issuer-group__head p { margin: 0; color: var(--muted); font-size: .59rem; font-weight: 800; text-transform: uppercase; }
.issuer-group__head h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -.05em; line-height: 1; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; padding-top: 1rem; }
.research-card { display: flex; min-width: 0; padding: 1.1rem; border: 1px solid var(--ink); background: var(--surface); flex-direction: column; }
.research-card__status { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.research-card > p:first-of-type { margin: 0; color: var(--muted); font-size: .65rem; font-weight: 780; text-transform: uppercase; }
.research-card h3 { margin: .45rem 0; font-size: 1.25rem; line-height: 1.1; }
.research-card h3 a { text-decoration: none; }
.research-card h3 a:hover { text-decoration: underline; }
.research-card__reward { flex: 1; color: var(--muted); font-size: .75rem; }
.research-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; padding-block: .75rem; border-block: 1px solid var(--line); }
.research-card dl div { min-width: 0; }
.research-card dt, .research-sidebar dt { color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.research-card dd, .research-sidebar dd { margin: .2rem 0 0; font-size: .74rem; font-weight: 560; line-height: 1.45; }
.research-card__link { font-size: .7rem; font-weight: 820; }
.research-detail__hero { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: clamp(1.5rem,3vw,2.5rem); align-items: center; padding: clamp(1.25rem,2.6vw,2rem); border: 1px solid var(--ink); background: #c9d7ff; }
.research-detail__hero > div > p { max-width: 760px; }
.research-detail__hero > div > a { display: inline-block; margin-top: 1rem; padding: .7rem .9rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); font-size: .72rem; font-weight: 800; text-decoration: none; }
.research-detail__hero aside { padding: .75rem; border: 1px solid var(--ink); background: var(--surface); box-shadow: 6px 6px 0 var(--stamp); }
.research-detail__hero aside > strong { font-size: .78rem; }
.research-detail__hero aside p { margin: .3rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.research-detail__art { margin: 0 0 .6rem; }
.research-detail__art img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; object-fit: contain; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper-deep); box-shadow: 4px 4px 0 var(--stamp); }
.research-detail__art figcaption { margin-top: .4rem; color: var(--muted); font-size: .58rem; line-height: 1.35; text-align: center; }
.research-facts { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--ink); border-top: 0; }
.research-facts div { display: grid; gap: .2rem; padding: 1rem; border-right: 1px solid var(--ink); }
.research-facts div:last-child { border: 0; }
.research-facts small { color: var(--muted); font-size: .59rem; font-weight: 800; text-transform: uppercase; }
.research-facts strong { font-size: .76rem; }
.research-detail__layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 4rem; padding-top: clamp(4rem,7vw,7rem); }
.research-section { margin-bottom: 4rem; }
.research-section h2, .research-sidebar h2 { margin: 0 0 1rem; font-family: var(--display); font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; }
.research-table { border: 1px solid var(--ink); }
.research-table article { padding: 1rem; border-bottom: 1px solid var(--ink); }
.research-table article:last-child { border: 0; }
.research-table article > div { display: flex; justify-content: space-between; gap: 2rem; }
.research-table span { font-weight: 800; text-align: right; }
.research-table p { margin: .5rem 0 0; color: var(--muted); font-size: .72rem; }
.research-columns { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.research-columns > div { padding: 1rem; }
.research-columns > div:first-child { border-right: 1px solid var(--ink); }
.research-columns h3 { margin-top: 0; }
.research-columns ul { margin: 0; padding: 0; list-style: none; }
.research-columns li { display: grid; gap: .2rem; padding: .65rem 0; border-top: 1px solid var(--line); font-size: .72rem; }
.research-columns li span, .research-columns p, .research-section > p { color: var(--muted); font-size: .74rem; }
.change-log { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.change-log li { display: grid; grid-template-columns: 95px 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--ink); font-size: .72rem; }
.change-log li:not(:has(time)), .change-log--plain li { grid-template-columns: 1fr; }
.change-log li:not(:has(time)) > span, .change-log--plain span { display: block; max-width: 88ch; line-height: 1.55; }
.change-log time { color: var(--brand); font-weight: 820; }
.research-sidebar { align-self: start; position: sticky; top: 110px; }
.research-sidebar > dl { margin: 0 0 1rem; border: 1px solid var(--ink); background: var(--surface); }
.research-sidebar > dl div { padding: .8rem; border-bottom: 1px solid var(--line); }
.research-sidebar > dl div:last-child { border: 0; }
.source-box--stacked { grid-template-columns: 1fr; }
.import-note { margin-top: 1rem; padding: 1rem; border: 1px solid var(--ink); background: var(--yellow); }
.import-note p { margin: .5rem 0 0; font-size: .67rem; }
@media (max-width: 960px) { .catalogue-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .research-detail__hero, .research-detail__layout { grid-template-columns: 1fr; } .research-sidebar { position: static; } }
@media (max-width: 680px) { .catalogue-page, .research-detail { padding-inline: 1rem; } .catalogue-grid, .research-columns { grid-template-columns: 1fr; } .research-columns > div:first-child { border-right: 0; border-bottom: 1px solid var(--ink); } .research-detail__hero { padding: 2rem 1rem; } .catalogue-hero h1 { font-size: 4rem; } .research-detail__hero h1 { font-size: 2rem; } .research-facts { grid-template-columns: 1fr 1fr; } .research-facts div:nth-child(2) { border-right: 0; } .research-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); } .research-table article > div { display: grid; gap: .3rem; } .research-table span { text-align: left; } }

/* ==========================================================================
   Comparison layer
   Shared tokens for the compare table, the shortlist board and the tray.
   ========================================================================== */
:root {
  --best: #2f7d32;
  --best-soft: rgba(47, 125, 50, 0.14);
  --best-ink: #1f5a24;
  --warn: #a63c1a;
  --warn-soft: rgba(214, 90, 50, 0.14);
  --tray-height: 78px;
}
:root[data-theme="dark"] {
  --best: #6cc47a;
  --best-soft: rgba(108, 196, 122, 0.16);
  --best-ink: #b6e8bf;
  --warn: #f08a63;
  --warn-soft: rgba(240, 138, 99, 0.16);
}

/* Hero: give people a route straight to comparison */
.hero-alt-path { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; font-size: .78rem; font-weight: 780; }
.hero-alt-path__cta { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.hero-alt-path__cta:hover { background: var(--fill); color: var(--accent); transform: translateY(-2px); }
.hero-alt-path > a:not(.hero-alt-path__cta) { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.hero-alt-path > a:not(.hero-alt-path__cta):hover { color: var(--ink); border-color: var(--ink); }
.category-hero__cta, .catalogue-hero__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; padding: .7rem 1rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); font-size: .76rem; font-weight: 820; text-decoration: none; }
.category-hero__cta:hover, .catalogue-hero__cta:hover { background: var(--fill); color: var(--accent); }

/* --------------------------- Shortlist toolbar --------------------------- */
.shortlist { display: block; }
.shortlist-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.3rem; padding: .7rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--wash); }
.view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper-deep); }
.view-switch__button { padding: .48rem .9rem; border: 0; border-radius: 999px; background: transparent; font-size: .73rem; font-weight: 830; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.view-switch__button.is-active { background: var(--fill); color: var(--accent); }
.view-switch__button:not(.is-active):hover { background: var(--tint); }
.shortlist-toolbar__sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; }
.shortlist-toolbar__sort label { color: var(--muted); font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.shortlist-toolbar__sort select, .filter-bar__field select {
  padding: .5rem .6rem;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  font-size: .74rem;
  font-weight: 750;
  cursor: pointer;
}
.shortlist-toolbar__compare { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-left: auto; }
.shortlist-hint { margin: 0; color: var(--muted); font-size: .72rem; }
.shortlist-submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .95rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  font-size: .74rem;
  font-weight: 860;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.shortlist-submit:hover { background: var(--fill); color: var(--accent); }

/* Compare checkbox on card surfaces */
.compare-check {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .6rem;
  padding: .2rem .5rem .2rem .38rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--wash);
  font-size: .64rem;
  font-weight: 820;
  cursor: pointer;
  width: fit-content;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.compare-check:hover { background: var(--surface-hi); }
.compare-check.is-selected { border-color: var(--ink); background: var(--accent); }
.compare-check.is-disabled { color: var(--muted); cursor: not-allowed; opacity: .55; }
.compare-check input { width: 12px; height: 12px; margin: 0; accent-color: var(--ink); cursor: inherit; }

/* ------------------------- Shortlist table view ------------------------- */
.board-scroll { overflow-x: auto; border: 1px solid var(--ink); background: var(--surface); overscroll-behavior-x: contain; }
.board-scroll:focus-visible { outline-offset: 0; }
.board-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.board-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--ink);
  background: var(--fill);
  color: var(--on-fill);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-table tbody tr { border-bottom: 1px solid var(--line); transition: background 140ms ease; }
.board-table tbody tr:last-child { border-bottom: 0; }
.board-table tbody tr:hover { background: var(--accent-wash); }
.board-table td, .board-table tbody th { padding: .8rem; vertical-align: top; text-align: left; }
.board-table__pick { width: 44px; }
.board-table thead .board-table__pick, .board-table thead .board-table__rank { width: 44px; }
.board-check { display: grid; place-items: center; }
.board-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.board-table__rank { width: 46px; }
.board-rank { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: .92rem; font-weight: 900; }
.board-table__card { position: sticky; left: 0; z-index: 2; min-width: 210px; background: var(--surface); }
.board-table tbody tr:hover .board-table__card { background: var(--paper-deep); }
.board-table__card a { display: block; font-size: .88rem; font-weight: 700; letter-spacing: -.005em; text-decoration: none; }
.board-table__card a:hover { text-decoration: underline; }
.board-issuer { display: block; margin-top: .2rem; color: var(--muted); font-size: .63rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.board-warn { display: block; margin-top: .4rem; max-width: 260px; color: var(--warn); font-size: .68rem; font-weight: 560; line-height: 1.4; }
.board-value { display: block; max-width: 230px; font-weight: 560; line-height: 1.4; }
/* Board cells stay scannable: long transcriptions live on the card and compare pages. */
.board-table td .board-sub, .board-table td .board-value { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.board-value.is-best { display: inline-block; padding: .1rem .35rem; border-radius: 5px; background: var(--best-soft); color: var(--best-ink); }
.board-value.is-warn { color: var(--warn); }
.board-value.is-best { font-weight: 680; }
.board-value.is-missing { color: var(--muted); font-weight: 500; }
.board-sub { display: block; margin-top: .3rem; max-width: 280px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.board-fit { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-size: 1.05rem; font-weight: 900; }
.board-fit i { position: relative; width: 34px; height: 5px; overflow: hidden; border-radius: 999px; background: var(--track); }
.board-fit i::after { position: absolute; inset: 0; width: var(--fit); background: var(--brand); content: ""; }

/* ------------------------------ Compare tray ---------------------------- */
.compare-tray {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  padding: .6rem clamp(.75rem, 4vw, 3rem) max(.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink);
  background: var(--fill);
  backdrop-filter: blur(14px);
  color: var(--on-fill);
}
.compare-tray__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; width: min(100%, 1600px); margin-inline: auto; }
.compare-tray__count { display: flex; align-items: baseline; gap: .4rem; margin: 0; font-size: .7rem; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.compare-tray__count strong { color: var(--accent); font-family: var(--display); font-size: 1.6rem; letter-spacing: -.05em; }
.compare-tray__count small { color: #9b9d96; font-size: .58rem; }
.compare-tray__list { display: flex; flex: 1; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; min-width: 0; list-style: none; }
.compare-tray__list li { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .32rem .32rem .6rem; border: 1px solid #4c4f48; border-radius: 999px; font-size: .69rem; font-weight: 760; }
.compare-tray__remove { display: grid; width: 20px; height: 20px; place-items: center; border: 0; border-radius: 50%; background: #35382f; color: #e6e8e0; font-size: .8rem; line-height: 1; cursor: pointer; }
.compare-tray__remove:hover { background: var(--coral); color: var(--ink); }
.compare-tray__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.compare-tray__clear { padding: .5rem .7rem; border: 1px solid #4c4f48; border-radius: 999px; background: transparent; color: #c8cac3; font-size: .7rem; font-weight: 780; cursor: pointer; }
.compare-tray__clear:hover { border-color: var(--on-fill); color: var(--on-fill); }
.compare-tray__go { display: inline-flex; align-items: center; gap: .45rem; padding: .58rem 1rem; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: .74rem; font-weight: 870; text-decoration: none; }
.compare-tray__go:hover { background: var(--accent-hi); }
.compare-tray__go.is-waiting { background: #4c4f48; color: #c8cac3; pointer-events: none; }
body:has(.compare-tray:not([hidden])) .site-footer { padding-bottom: calc(var(--tray-height) + 1rem); }

/* ------------------------------ Compare page ---------------------------- */
.compare-page { padding: 0 clamp(1rem, 5vw, 5.5rem) clamp(5rem, 8vw, 8rem); }
/* The table is the reason people are here, so the hero stays deliberately short. */
.compare-hero { max-width: 1100px; padding: 1.6rem 0 1.4rem; }
.compare-hero h1 { margin: .5rem 0 .7rem; font-family: var(--display); font-size: clamp(2.1rem, 3.6vw, 3.6rem); font-weight: 930; letter-spacing: -.055em; line-height: .95; }
.compare-hero--empty { padding-bottom: 2.2rem; }
.compare-hero--empty h1 { font-size: clamp(3.2rem, 6.5vw, 6.5rem); letter-spacing: -.075em; line-height: .85; }
.compare-hero h1 em { color: var(--muted); font-family: var(--serif); font-weight: 400; }
.compare-hero__lead { max-width: 820px; margin: 0; color: var(--ink-soft); font-size: .88rem; }
.compare-hero--empty .compare-hero__lead { font-size: 1.02rem; }
.compare-legend-chip { display: inline-block; padding: .1rem .38rem; border-radius: 5px; font-size: .78rem; }
.compare-legend-chip.is-best { background: var(--best-soft); color: var(--best-ink); }
.compare-legend-chip.is-warn { background: var(--warn-soft); color: var(--warn); }
.compare-notice { margin: 0 0 1.5rem; padding: .9rem 1rem; border: 1px solid var(--ink); border-left-width: 5px; background: var(--yellow); font-size: .8rem; font-weight: 760; }

.compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .8rem 0; border-block: 1px solid var(--ink); }
.compare-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .68rem; }
.compare-jump > span { margin-right: .2rem; color: var(--muted); font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.compare-jump a { padding: .35rem .58rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 780; text-decoration: none; }
.compare-jump a:hover { border-color: var(--ink); background: var(--accent); }
.compare-toolbar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.compare-diff-toggle { padding: .5rem .8rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--surface); font-size: .72rem; font-weight: 820; cursor: pointer; }
.compare-diff-toggle[aria-pressed="true"] { background: var(--fill); color: var(--accent); }
.compare-reset { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 780; text-decoration: none; }
.compare-reset:hover { border-color: var(--ink); color: var(--ink); }

.compare-scroll { margin-top: 1.2rem; overflow-x: auto; border: 1px solid var(--ink); background: var(--surface); overscroll-behavior-x: contain; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table__corner, .compare-row__label { position: sticky; left: 0; z-index: 4; width: 210px; min-width: 175px; background: var(--paper-deep); }
.compare-table__corner { z-index: 6; top: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.compare-table thead th { z-index: 5; }
.compare-col {
  --card-accent: var(--brand);
  width: 240px;
  min-width: 185px;
  padding: .6rem .7rem .75rem;
  border-right: 1px solid var(--line);
  border-bottom: 4px solid var(--card-accent);
  background: var(--surface);
  text-align: left;
  vertical-align: top;
}
.compare-col:last-child { border-right: 0; }
.compare-col__head { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .6rem; align-items: center; }
.compare-col--navy { --card-accent: #bce83a; }.compare-col--charcoal { --card-accent: #ffae35; }.compare-col--orange { --card-accent: #ff6b30; }.compare-col--red { --card-accent: #e62c33; }.compare-col--purple { --card-accent: #8b62ff; }.compare-col--electric { --card-accent: #4e78ff; }.compare-col--sky { --card-accent: #27c5e5; }.compare-col--aurora { --card-accent: #7c55e8; }.compare-col--white { --card-accent: #e51f3f; }
.compare-col__art { display: grid; place-items: center; }
.compare-col__art img { display: block; width: 62px; height: auto; aspect-ratio: 8 / 5; object-fit: contain; border-radius: 6px; outline: 1px solid var(--line); }
.compare-col__initials { display: grid; width: 62px; aspect-ratio: 8 / 5; place-items: center; border: 1px solid var(--ink); border-radius: 6px; background: var(--card-accent); font-family: var(--display); font-size: 1.1rem; font-weight: 900; letter-spacing: -.05em; }
.compare-col__issuer { display: flex; align-items: center; margin: 0; overflow: hidden; color: var(--muted); font-size: .58rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.compare-col__issuer > span:not(.bank-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-col__name { display: block; margin: .12rem 0 .3rem; font-size: .9rem; font-weight: 720; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; }
.compare-col__name:hover { text-decoration: underline; }
.compare-col__status { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; }
.compare-col__status .status { font-size: .53rem; padding: .2rem .4rem; }
.compare-col__remove { color: var(--muted); font-size: .62rem; font-weight: 780; text-decoration: none; white-space: nowrap; }
.compare-col__remove:hover { color: var(--warn); text-decoration: underline; }

.compare-section-row__head, .compare-section-row__col { padding: .7rem .8rem; border-block: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); text-align: left; vertical-align: bottom; }
.compare-section-row__head { position: sticky; left: 0; z-index: 4; }
.compare-section-row__head strong { display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.compare-section-row__head span { display: block; margin-top: .15rem; color: #b9bcb4; font-size: .64rem; font-weight: 600; line-height: 1.35; }
.compare-section-row__col { color: var(--accent); font-size: .63rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.compare-row__label { padding: .85rem .8rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 680; text-align: left; vertical-align: top; }
.compare-row__hint { display: block; margin-top: .25rem; color: var(--muted); font-size: .66rem; font-weight: 450; line-height: 1.4; }
.compare-cell { padding: .85rem .8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .78rem; vertical-align: top; }
.compare-cell:last-child { border-right: 0; }
.compare-cell__value { display: block; font-weight: 560; line-height: 1.45; overflow-wrap: anywhere; }
.compare-cell__note { display: block; margin-top: .3rem; color: var(--muted); font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.compare-cell.is-best { background: var(--best-soft); }
.compare-cell.is-best .compare-cell__value { color: var(--best-ink); font-weight: 700; }
.compare-cell.is-best .compare-cell__value::after { content: " ✓"; }
.compare-cell.is-good .compare-cell__value { color: var(--best); }
.compare-cell.is-warn { background: var(--warn-soft); }
.compare-cell.is-warn .compare-cell__value { color: var(--warn); }
.compare-cell.is-missing .compare-cell__value { color: var(--muted); font-weight: 500; }
.compare-cell__source { display: block; margin-bottom: .3rem; font-size: .72rem; font-weight: 680; }
.compare-table tfoot td, .compare-table tfoot th { padding: .85rem .8rem; border-top: 1px solid var(--ink); background: var(--paper-deep); }

/* ----------------------------- Compare picker --------------------------- */
.compare-picker { margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: 2rem; border-top: 1px solid var(--ink); }
.compare-picker .section-heading--compact .kicker { color: var(--muted); }
.compare-picker .section-heading--compact h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -.05em; }
.compare-picker__search input, .filter-bar__search input {
  width: min(100%, 320px);
  padding: .68rem .85rem;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
  font-size: .82rem;
}
.compare-picker__hint { margin: 0 0 1rem; color: var(--muted); font-size: .8rem; }
.picker-group { margin: 0 0 1.5rem; padding: 0; border: 0; }
.picker-group legend { padding: 0 0 .5rem; color: var(--muted); font-size: .62rem; font-weight: 830; letter-spacing: .1em; text-transform: uppercase; }
.picker-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .55rem; }
.picker-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .6rem;
  align-items: center;
  padding: .62rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--wash);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.picker-option:hover { background: var(--surface-hi); transform: translateY(-2px); }
.picker-option.is-selected { border-color: var(--ink); background: var(--accent); }
.picker-option.is-disabled { cursor: not-allowed; opacity: .48; }
.picker-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); cursor: inherit; }
.picker-option__body { display: grid; gap: .1rem; min-width: 0; }
.picker-option__name { font-size: .82rem; font-weight: 660; letter-spacing: -.005em; line-height: 1.25; }
.picker-option__meta { color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-option__link { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: .95rem; font-weight: 850; line-height: 1; text-decoration: none; }
.picker-option__link:hover { background: var(--fill); color: var(--accent); }
.compare-picker__submit { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.compare-picker__submit button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .78rem 1.15rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-size: .78rem;
  font-weight: 860;
  cursor: pointer;
}
.compare-picker__submit button:hover { background: var(--accent); color: var(--ink); }
.compare-picker__submit small { color: var(--muted); font-size: .68rem; }

/* --------------------------- Catalogue filtering ------------------------ */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; padding: 1.1rem 0; border-block: 1px solid var(--ink); }
.filter-bar__search { flex: 1 1 260px; }
.filter-bar__field { display: grid; gap: .28rem; }
.filter-bar__field label { color: var(--muted); font-size: .6rem; font-weight: 830; letter-spacing: .09em; text-transform: uppercase; }
.filter-bar__reset { padding: .6rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 800; cursor: pointer; }
.filter-bar__reset:hover { border-color: var(--ink); color: var(--ink); }
.filter-status { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .9rem 0; }
.filter-status p { margin: 0; color: var(--muted); font-size: .74rem; font-weight: 780; }
.filter-status .shortlist-submit { margin-left: auto; }
.catalogue-empty { margin: 2rem 0; padding: 1.2rem; border: 1px dashed var(--line-strong); text-align: center; font-size: .82rem; }
.catalogue-empty button { border: 0; background: none; color: var(--brand); font: inherit; font-weight: 820; text-decoration: underline; cursor: pointer; }
.catalogue-item { display: contents; }
.catalogue-item[hidden] { display: none; }
.research-card dl { grid-template-columns: 1fr 1fr; }
.research-card dd.is-best { display: inline-block; padding: .05rem .3rem; border-radius: 4px; background: var(--best-soft); color: var(--best-ink); }
.research-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); }
.research-card__foot .compare-check { margin-top: 0; }
.research-detail__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.research-detail__cta a { display: inline-block; padding: .7rem .9rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); font-size: .72rem; font-weight: 800; text-decoration: none; }
.research-detail__compare { background: var(--surface) !important; color: var(--ink) !important; }
.research-detail__compare:hover { background: var(--accent) !important; }

/* ------------------------- Head-to-head related ------------------------- */
.related-grid > .related-item { display: grid; border: 1px solid var(--ink); background: var(--surface); }
.related-item__main { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: .8rem; align-items: center; padding: .7rem; text-decoration: none; }
.related-item__main > span { position: absolute; top: .3rem; left: .3rem; z-index: 2; padding: .18rem .3rem; background: var(--accent); font-size: .55rem; font-weight: 850; }
.related-item__main img { display: block; width: 70px; height: auto; aspect-ratio: 8 / 5; object-fit: contain; border-radius: 7px; }
.related-item__main div { display: grid; gap: .2rem; }
.related-item__main strong { font-size: .78rem; font-weight: 700; letter-spacing: -.005em; }
.related-item__main small { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.related-item__main i { font-style: normal; }
.related-item__versus { padding: .6rem .7rem; border-top: 1px solid var(--line); background: var(--paper-deep); font-size: .68rem; font-weight: 820; text-align: center; text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.related-item__versus em { color: var(--muted); font-family: var(--serif); font-style: normal; }
.related-item__versus:hover { background: var(--fill); color: var(--accent); }
.related-item__versus:hover em { color: var(--accent); }

/* ------------------------------- Responsive ----------------------------- */
@media (max-width: 960px) {
  .compare-table__corner, .compare-row__label { width: 150px; min-width: 135px; }
  .compare-col { width: 200px; min-width: 165px; }
  .shortlist-toolbar__compare { width: 100%; margin-left: 0; }
}
@media (max-width: 680px) {
  .compare-page { padding-inline: 1rem; }
  .compare-hero { padding-top: 3rem; }
  .compare-hero h1 { font-size: 2.9rem; }
  .compare-toolbar__actions { width: 100%; margin-left: 0; }
  .compare-table__corner, .compare-row__label { width: 118px; min-width: 112px; font-size: .67rem; }
  .compare-col { width: 178px; min-width: 158px; }
  .compare-section-row__head strong { font-size: 1.2rem; }
  .shortlist-toolbar { flex-direction: column; align-items: stretch; }
  .view-switch { justify-content: center; }
  .view-switch__button { flex: 1; }
  .shortlist-toolbar__sort { justify-content: space-between; }
  .shortlist-toolbar__sort select { flex: 1; }
  .shortlist-submit { justify-content: center; width: 100%; }
  .board-table__card { position: static; min-width: 175px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar__search input, .compare-picker__search input { width: 100%; }
  .filter-status .shortlist-submit { margin-left: 0; }
  .picker-options { grid-template-columns: 1fr; }
  .compare-tray__inner { gap: .5rem; }
  .compare-tray__count small { display: none; }
  .compare-tray__list { order: 3; flex: 1 0 100%; max-height: 62px; overflow-y: auto; }
  .compare-tray__actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-alt-path__cta:hover, .picker-option:hover { transform: none; }
}
@media print {
  .compare-tray, .shortlist-toolbar, .compare-toolbar, .compare-picker, .catalogue-controls .filter-bar, .filter-status, .compare-check, .board-table__pick, .compare-col__remove { display: none !important; }
  .compare-scroll, .board-scroll { overflow: visible; }
  .compare-table, .board-table { font-size: 8pt; }
  .compare-cell.is-best { background: none; outline: 1px solid black; }
}

/* --------------------------------------------------------------------------
   Getting to the cards sooner. The identity stays, the scroll distance drops.
   -------------------------------------------------------------------------- */
.hero { min-height: auto; padding-block: clamp(3rem, 5vw, 5rem) 2rem; }
.hero h1 { margin: .9rem 0 1.1rem; font-size: clamp(3.4rem, 6.4vw, 6.6rem); }
.hero-intro { margin-bottom: 1.5rem; font-size: clamp(1rem, 1.25vw, 1.15rem); }
/* The deck lost vertical room when the hero tightened, so the cards scale down with it. */
.hero-deck { min-height: 430px; }
.deck-card { width: min(78%, 390px); }
.deck-card--back { top: 0; }
.deck-card--middle { top: 20%; }
.deck-card--front { top: 40%; }
.deck-note { bottom: 2%; }
.orbit--one { width: 280px; height: 280px; }
.orbit--two { width: 175px; height: 175px; }
.hero-proof { padding-top: 1.5rem; }
.ranking-section { padding-block: clamp(2.5rem, 4vw, 4rem); }
.ranking-header { margin-bottom: 1.5rem; }
.ranking-header h2 { font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.catalogue-hero { padding: clamp(2rem, 4vw, 3.2rem) 0 1.8rem; }
.catalogue-hero h1 { margin: .6rem 0 .8rem; font-size: clamp(2.6rem, 5vw, 4.6rem); letter-spacing: -.06em; line-height: .9; }
.catalogue-hero > p:last-of-type { font-size: .95rem; }
.catalogue-counts { margin-top: 1.2rem; }
.category-hero { min-height: auto; padding-block: clamp(3rem, 5vw, 5rem) 2.5rem; }
.category-hero h1 { margin: .8rem 0; font-size: clamp(3rem, 5.6vw, 5.8rem); }
@media (max-width: 680px) {
  .hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .catalogue-hero h1 { font-size: 2.6rem; }
  .category-hero h1 { font-size: 3rem; }
  .ranking-header h2 { font-size: 2.4rem; }
}

/* ==========================================================================
   Bank directory  ·  /banks
   Two columns that behave like one control: a sticky issuer rail on the left,
   the selected issuer's full lineup on the right. Every panel ships in the
   HTML, so switching is instant and works as plain links without scripting.
   ========================================================================== */
.banks-page { padding-inline: clamp(1rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3.5rem); padding-bottom: 5rem; }
.banks-hero { max-width: 1100px; padding: clamp(2rem, 4vw, 3.2rem) 0 1.8rem; }
.banks-hero h1 { margin: .6rem 0 .8rem; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 930; letter-spacing: -.06em; line-height: .9; }
.banks-hero h1 em { color: var(--muted); font-family: var(--serif); font-weight: 400; }
.banks-hero > p { max-width: 780px; color: var(--muted); font-size: .95rem; }
.banks-stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2.2rem; margin-top: 1.4rem; }
.banks-stats__label { margin: 0 0 .45rem; color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.banks-stats__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.banks-stats__row span { padding: .55rem .75rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .72rem; white-space: nowrap; }
.banks-stats__row strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.banks-hero__meta { margin-top: 1.2rem; color: var(--muted); font-size: .74rem; }

.banks-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: start; }

/* ------------------------------- rail ---------------------------------- */
.banks-rail { align-self: start; position: sticky; top: 96px; display: flex; max-height: calc(100vh - 120px); flex-direction: column; border: 1px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.banks-rail__search { padding: .8rem; border-bottom: 1px solid var(--ink); }
.banks-rail__search input { width: 100%; padding: .62rem .7rem; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); font-size: .82rem; }
.banks-rail__hint { margin: 0; padding: .55rem .8rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; line-height: 1.4; }
.banks-rail__list { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.banks-rail__list li + li { border-top: 1px solid var(--line); }
.banks-rail__list a { display: flex; align-items: center; gap: .6rem; padding: .68rem .8rem; text-decoration: none; }
.banks-rail__list a:hover { background: var(--paper-deep); }
.banks-rail__list a[aria-current="page"] { background: var(--fill); color: var(--on-fill); }
.banks-rail__list a[aria-current="page"] .banks-rail__kind { color: #b9bcb4; }
.banks-rail__list a[aria-current="page"] .banks-rail__count { border-color: var(--accent); background: transparent; color: var(--accent); }
.banks-rail__list a :is(.bank-badge, .bank-logo) { margin-inline-end: 0; }
.banks-rail__text { display: grid; flex: 1; min-width: 0; }
.banks-rail__name { min-width: 0; font-size: .84rem; font-weight: 620; line-height: 1.25; }
.banks-rail__kind { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.banks-rail__count { flex-shrink: 0; min-width: 2.1rem; padding: .18rem .3rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .66rem; font-weight: 840; font-variant-numeric: tabular-nums; text-align: center; }
.banks-rail__empty { margin: 0; padding: .9rem .8rem; border-top: 1px solid var(--ink); color: var(--muted); font-size: .74rem; }
/* Card matches, named in the rail rather than only filtered into the panel.
   Only present while a search is running, which is why the group label appears
   with them: without a heading the two lists would read as one. */
.banks-rail__group { margin: 0; padding: .5rem .8rem; border-bottom: 1px solid var(--line); background: var(--paper-deep); color: var(--muted); font-size: .6rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.banks-rail__group span { font-variant-numeric: tabular-nums; }
.banks-rail__group span::before { content: "("; }
.banks-rail__group span::after { content: ")"; }
.banks-rail__card-list { margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.banks-rail__card-list li + li { border-top: 1px solid var(--line); }
.banks-rail__card { display: grid; gap: .1rem; padding: .55rem .8rem; text-decoration: none; }
.banks-rail__card:hover { background: var(--paper-deep); }
.banks-rail__card-name { font-size: .8rem; font-weight: 640; line-height: 1.25; }
.banks-rail__card-meta { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.banks-rail__more { margin: 0; padding: .45rem .8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .66rem; }

/* ------------------------------ panels --------------------------------- */
.banks-panels { min-width: 0; }
.bank-panel { border: 1px solid var(--ink); background: var(--surface); }
.bank-panel__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: clamp(1rem, 2vw, 2rem); padding: clamp(1.1rem, 2vw, 1.7rem); border-bottom: 1px solid var(--ink); }
.bank-panel__identity { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.bank-panel__kind { margin: 0; color: var(--muted); font-size: .59rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bank-panel__head h2 { margin: .35rem 0 .5rem; font-family: var(--display); font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 930; letter-spacing: -.05em; line-height: .95; }
.bank-panel__note { margin: 0; max-width: 62ch; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.bank-panel__facts { display: grid; gap: .7rem; justify-items: start; align-content: start; }
.bank-panel__facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .4rem; margin: 0; }
.bank-panel__facts dl div { min-width: 0; }
.bank-panel dt { margin: 0; color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.bank-panel dd { margin: .15rem 0 0; font-size: .82rem; font-weight: 640; font-variant-numeric: tabular-nums; }
.bank-panel__official { padding: .5rem .7rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); font-size: .68rem; font-weight: 800; text-decoration: none; }
.bank-panel__official:hover { background: var(--accent); color: var(--ink); }
.status--listing { background: var(--accent); }
.status--partial { background: var(--yellow); }
.status--pending { background: var(--paper-deep); }

.bank-panel__flags { margin: 0; padding: .8rem clamp(1.1rem, 2vw, 1.7rem); border-bottom: 1px solid var(--line); background: var(--amber-wash); list-style: none; }
.bank-panel__flags li { color: var(--ink); font-size: .74rem; line-height: 1.45; }
.bank-panel__flags li + li { margin-top: .3rem; }
.bank-panel__pending { margin: 0; padding: clamp(1.1rem, 2vw, 1.7rem); color: var(--muted); font-size: .82rem; line-height: 1.55; }

.bank-group { border-bottom: 1px solid var(--line); }
.bank-group__label { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem clamp(1.1rem, 2vw, 1.7rem); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: .6rem; font-weight: 840; letter-spacing: .06em; text-transform: uppercase; position: sticky; top: 0; }
.bank-group__label span { padding: .1rem .38rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: .58rem; font-variant-numeric: tabular-nums; }
.bank-cards { margin: 0; padding: 0; list-style: none; }
.bank-card { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .62rem clamp(1.1rem, 2vw, 1.7rem); }
.bank-card + .bank-card { border-top: 1px solid var(--line); }
.bank-card:hover { background: var(--paper); }
.bank-card__art { flex: 0 0 80px; width: 80px; height: 50px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); object-fit: cover; }
.bank-card__art + .bank-card__main { flex: 1 1 220px; }
.bank-card__main { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; min-width: 0; }
.bank-card__name { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.35; }
.bank-card__name-link { color: inherit; text-decoration: none; }
.bank-card__name-link:hover, .bank-card__name-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.bank-card--retired .bank-card__name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.bank-card--retired .bank-card__name-link { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.bank-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.tag { display: inline-flex; padding: .12rem .38rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .55rem; font-weight: 840; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tag--retired { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.tag--verified { background: var(--best-soft); }
.tag--blocked { background: var(--paper-deep); color: var(--muted); }
/* ------------------------------ bank identity --------------------------- */
/* Most issuer marks below are user-supplied local files. The monogram remains
   only as a resilient fallback for directory issuers without a supplied logo. */
.bank-logo {
  display: inline-block;
  flex-shrink: 0;
  width: 1.9em;
  height: 1.9em;
  padding: .12em;
  border: 1px solid var(--line-strong);
  border-radius: .38em;
  background: var(--surface);
  object-fit: contain;
  vertical-align: middle;
}
.bank-logo--sm { width: 1.5em; height: 1.5em; margin-inline-end: .4rem; }
.bank-logo--lg { width: 3.5rem; height: 3.5rem; padding: .25rem; }

.bank-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--badge-accent);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 840;
  font-variant-numeric: normal;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
}
/* Sized relative to its own font-size, so a badge dropped into a heading, a
   small caption, or a legend all come out proportioned rather than needing a
   size override at every call site. */
.bank-badge--sm { width: 1.5em; height: 1.5em; font-size: .56rem; margin-inline-end: .4rem; }
.bank-badge--lg { width: 3rem; height: 3rem; flex-shrink: 0; font-size: .92rem; }
.banks-rail__name ~ .bank-badge,
a > .bank-badge:not(.bank-badge--lg) { margin-inline-end: .55rem; }
.detail-bank :is(.bank-badge, .bank-logo),
.research-detail__issuer :is(.bank-badge, .bank-logo),
.compare-col__issuer :is(.bank-badge, .bank-logo),
.issuer-line :is(.bank-badge, .bank-logo),
.board-issuer :is(.bank-badge, .bank-logo),
.picker-group legend :is(.bank-badge, .bank-logo),
.issuer-group__head :is(.bank-badge, .bank-logo) { margin-inline-end: .5rem; }
.bank-badge--lime { --badge-accent: #d8f37b; }
.bank-badge--blue { --badge-accent: #9db8ff; }
.bank-badge--coral { --badge-accent: #ffab93; }
.bank-badge--violet { --badge-accent: #cdb8ff; }
.bank-badge--amber { --badge-accent: #ffd876; }
.bank-badge--teal { --badge-accent: #8be9d1; }
.bank-badge--indigo { --badge-accent: #b3c0ff; }
.bank-badge--sky { --badge-accent: #a3e8ff; }
:root[data-theme="dark"] .bank-badge { color: #12141a; border-color: rgba(231, 234, 239, 0.48); }

.bank-card__fee { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; margin: 0; margin-inline-start: auto; padding-inline: .6rem; font-size: .72rem; line-height: 1.35; text-align: right; justify-content: flex-end; }
.bank-card__fee-value { font-weight: 760; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-card__fee-value.is-free { color: var(--best); }
.bank-card__fee-waiver { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; cursor: help; border-bottom: 1px dotted var(--line-strong); }
.bank-card__fee-unknown { color: var(--muted); font-size: .66rem; font-style: italic; }
.bank-card--retired .bank-card__fee-value { color: var(--muted); }
.bank-card__links { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.bank-card__record { font-size: .7rem; font-weight: 820; }
.bank-card__official { color: var(--muted); font-size: .7rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bank-card__official:hover { color: var(--ink); text-decoration: underline; }
.bank-panel__sources { margin: 0; padding: .8rem clamp(1.1rem, 2vw, 1.7rem); color: var(--muted); font-size: .66rem; line-height: 1.5; overflow-wrap: anywhere; }
.bank-panel__sources a { color: var(--muted); }

.banks-method { max-width: 900px; margin-top: 2.5rem; padding: 1.2rem; border: 1px solid var(--ink); background: var(--paper-deep); }
.banks-method p { margin: .5rem 0 0; font-size: .8rem; line-height: 1.55; }
.banks-method__links { font-weight: 700; }

@media (max-width: 900px) {
  .banks-layout { grid-template-columns: 1fr; }
  .banks-rail { position: static; max-height: none; }
  .banks-rail__list { max-height: 44vh; }
  .bank-panel__head { grid-template-columns: 1fr; }
  .bank-panel__facts { justify-items: stretch; }
}
@media (max-width: 680px) {
  .banks-page { padding-inline: 1rem; }
  .banks-hero h1 { font-size: 2.5rem; }
  .bank-card { align-items: flex-start; flex-direction: column; }
  .bank-card__links { width: 100%; justify-content: space-between; }
  /* Stacked, the fee belongs under its card name rather than pushed right. */
  .bank-card__fee { margin-inline-start: 0; padding-inline: 0; text-align: left; justify-content: flex-start; }
}

/* ==========================================================================
   Forum
   Lives on forum.9cards.in. Reuses every token from :root so the community
   reads as part of the same product, but swaps the marketing furniture for
   discussion furniture. Post bodies use --text, the humanist reading face,
   for the same reason table cells do: the condensed display face is signage,
   not prose.
   ========================================================================== */
:root {
  --forum-surface: var(--surface);
  --forum-rail: var(--line);
}

/* Thread and category pages. Wider than before but still capped: these are
   single columns of prose, and a 1600px line length is unreadable. */
.forum-page { max-width: 1400px; margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(4rem, 7vw, 7rem); }
.forum-page--prose { max-width: 860px; }
.forum-page--wide { max-width: none; }

/* ------------------------------- Forum hero ----------------------------- */
.forum-hero { padding: clamp(2.2rem, 4vw, 3.6rem) 0 1.8rem; border-bottom: 1px solid var(--line-strong); }
.forum-hero h1 { margin: .7rem 0 .8rem; font-family: var(--display); font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 920; letter-spacing: -.07em; line-height: .88; }
.forum-hero h1 em { color: var(--muted); font-family: var(--serif); font-weight: 400; }
.forum-hero__lead { max-width: 640px; margin: 0; color: var(--ink-soft); font-family: var(--text); font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.6; }
.forum-hero__meta { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 2.6rem); margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.forum-hero__meta span { display: flex; align-items: baseline; gap: .4rem; }
.forum-hero__meta strong { color: var(--ink); font-family: var(--display); font-size: 1.75rem; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.forum-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.forum-hero__cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem; padding: .72rem 1.05rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--accent); font-size: .78rem; font-weight: 860; text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.forum-hero__actions .forum-hero__cta { margin-top: 0; }
.forum-hero__cta:hover { background: var(--fill); color: var(--accent); transform: translateY(-2px); }
.forum-hero__alt { color: var(--muted); font-size: .78rem; font-weight: 750; }

/* The disclaimer is repeated on every entry point rather than buried in a
   policy page. On a finance forum the distinction genuinely matters. */
.forum-disclaimer { margin: 1.5rem 0 0; padding: .8rem .95rem; border: 1px solid var(--ink); border-left-width: 5px; background: var(--yellow); font-family: var(--text); font-size: .76rem; line-height: 1.5; }
.forum-announcement { margin-top: 1.8rem; padding: 1rem 1.1rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); box-shadow: 6px 6px 0 var(--accent); }
.forum-announcement strong { display: block; color: var(--accent); font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.forum-announcement p { margin: .4rem 0 0; font-family: var(--text); font-size: .84rem; }

.forum-section-heading { margin: 0 0 1.1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 880; letter-spacing: -.05em; }
.forum-categories, .forum-latest { padding-top: clamp(2.2rem, 4vw, 3.2rem); }
.forum-empty { padding: 1.6rem 1.2rem; border: 1px dashed var(--line-strong); background: var(--wash); color: var(--muted); font-family: var(--text); font-size: .86rem; text-align: center; }

/* ------------------------------- Categories ----------------------------- */
.category-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.category-row { --row-accent: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 1.2rem; align-items: center; padding: .95rem 1.05rem; border: 1px solid var(--line-strong); border-left: 5px solid var(--row-accent); border-radius: var(--radius-sm); background: var(--wash); transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.category-row:hover { background: var(--surface-hi); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.category-row--lime { --row-accent: var(--accent); }
.category-row--blue,
.category-row--brand { --row-accent: var(--brand); }
.category-row--coral { --row-accent: var(--coral); }
.category-row--violet { --row-accent: var(--violet); }
.category-row--sky { --row-accent: #27c5e5; }
.category-row--amber { --row-accent: #ffae35; }
.category-row--yellow { --row-accent: var(--yellow); }
.category-row--ink { --row-accent: var(--line-strong); }
.category-row--teal { --row-accent: #5ce1c6; }
.category-row--green { --row-accent: #79e88f; }
.category-row__body h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.04rem; letter-spacing: -.025em; }
.category-row__body h3 a { text-decoration: none; }
.category-row__body h3 a:hover { text-decoration: underline; }
.category-row__body p { margin: 0; color: var(--muted); font-family: var(--text); font-size: .78rem; line-height: 1.5; }
.category-row__stats { display: grid; gap: .3rem; justify-items: end; min-width: 0; text-align: right; }
.category-row__count { color: var(--muted); font-size: .62rem; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.category-row__last { display: grid; gap: .1rem; max-width: 100%; text-decoration: none; }
.category-row__last span { overflow: hidden; font-size: .76rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.category-row__last:hover span { text-decoration: underline; }
.category-row__last small { color: var(--muted); font-size: .64rem; }
.category-row__last--empty { color: var(--muted); font-size: .72rem; font-style: italic; }

/* ------------------------------ Thread lists ---------------------------- */
.thread-list { display: grid; margin: 0; padding: 0; border: 1px solid var(--ink); background: var(--forum-surface); list-style: none; }
.thread-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); transition: background 140ms ease; }
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--accent-wash); }
.thread-row.is-pinned { background: var(--amber-wash); }
.thread-row.is-pinned:hover { background: var(--amber-wash); }
.thread-row__avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-deep); font-family: var(--display); font-size: .9rem; font-weight: 900; letter-spacing: -.03em; }
.thread-row__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin: 0 0 .2rem; font-size: .94rem; letter-spacing: -.025em; line-height: 1.3; }
.thread-row__title a { text-decoration: none; }
.thread-row__title a:hover { text-decoration: underline; }
.thread-row__flag { padding: .12rem .38rem; border: 1px solid var(--ink); border-radius: 4px; background: var(--yellow); font-size: .55rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.thread-row__meta { margin: 0; color: var(--muted); font-family: var(--text); font-size: .7rem; }
.thread-row__meta a { font-weight: 750; text-decoration: none; }
.thread-row__meta a:hover { text-decoration: underline; }
.thread-row__stats { display: grid; gap: .2rem; justify-items: end; text-align: right; white-space: nowrap; }
.thread-row__replies { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.thread-row__answered { padding: .12rem .4rem; border-radius: 4px; background: var(--best-soft); color: var(--best-ink); font-size: .58rem; font-weight: 850; text-transform: uppercase; }

.forum-foot { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.forum-foot a { color: var(--muted); font-size: .74rem; font-weight: 780; text-decoration: none; }
.forum-foot a:hover { color: var(--ink); text-decoration: underline; }

/* --------------------------------- Prose -------------------------------- */
.forum-prose { padding-top: clamp(2rem, 4vw, 3rem); }
.forum-prose h2 { margin: 2.4rem 0 .6rem; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 880; letter-spacing: -.05em; }
.forum-prose h2:first-child { margin-top: 0; }
.forum-prose p, .forum-prose li { color: var(--ink-soft); font-family: var(--text); font-size: .95rem; line-height: 1.75; }
.forum-prose ul { padding-left: 1.1rem; }
.forum-prose li { margin-bottom: .5rem; }

/* ------------------------------ Account chip ---------------------------- */
/* `.6rem` rather than `.5rem` because of the badge: it reaches 6px past the
   bell's right edge and carries a 2px ring, which at the old gap put its outer
   edge exactly on the account pill's border. */
.account-chip { justify-self: end; display: flex; align-items: center; gap: .6rem; }
/* Matches the theme toggle beside it exactly — same 36px circle, same surface,
   same border — so the two read as a pair of controls rather than two unrelated
   round things. */
.account-chip__inbox { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--surface); color: var(--ink); text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.account-chip__inbox:hover { background: var(--accent); color: var(--on-accent); }
/* The unread bubble. Two characters ("9+") is the widest it ever gets, and
   tabular figures keep 1 and 9 the same width so it does not twitch as the count
   changes.

   The 17px size and the 6px offset are not taste, they are clearance. At 19px and
   -5px the bubble and its ring covered the bell's dome outright, leaving a badge
   sitting on a lip and a clapper. At this size the ring's inner corner clears the
   widest point of the dome by about 1.5px while still overlapping the button's own
   circle, which is what makes it read as something arriving on the bell rather
   than a second control parked beside it. */
.account-chip__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 3px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--coral);
  /* Ink on coral, not white: 5.6:1 in the light theme and 5.2:1 in the dark one,
     where white would fall to 2.9:1 and fail outright. */
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--paper);
  font-family: var(--display);
  font-size: .6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 860;
  line-height: 1;
  letter-spacing: -.01em;
}
/* Once the header has a background of its own, the ring has to follow it or it
   draws a pale halo on a white strip. */
.site-header.is-scrolled .account-chip__badge { box-shadow: 0 0 0 2px var(--surface); }
/* Fires when the badge appears or the number changes, not on every poll: the
   script only writes to the element when the count actually moved. Scale only,
   so it costs one composited frame and nothing reflows around it. */
.account-chip__badge.is-new { animation: badge-pop 320ms cubic-bezier(.2, 1.5, .4, 1); }
@keyframes badge-pop {
  0% { transform: scale(.4); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .account-chip__badge.is-new { animation: none; }
}
.account-chip__link { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .32rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--surface); text-decoration: none; transition: background 160ms ease; }
.account-chip__link:hover { background: var(--accent); }
.account-chip__avatar { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--fill); color: var(--accent); font-family: var(--display); font-size: .78rem; font-weight: 900; }
.account-chip__name { max-width: 130px; overflow: hidden; font-size: .76rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__signout button { padding: .42rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: .68rem; font-weight: 780; cursor: pointer; transition: border-color 160ms ease, color 160ms ease; }
.account-chip__signout button:hover { border-color: var(--ink); color: var(--ink); }

.role-chip { display: inline-flex; padding: .2rem .48rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .58rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.role-chip--member { background: var(--paper-deep); }
.role-chip--moderator { background: #c9d7ff; }
.role-chip--admin { background: var(--accent); }

/* --------------------------------- Flashes ------------------------------ */
.flash { margin: 1.2rem 0 0; padding: .8rem .95rem; border: 1px solid var(--ink); border-left-width: 5px; font-family: var(--text); font-size: .82rem; font-weight: 600; }
.flash--error { border-left-color: var(--coral); background: var(--warn-soft); color: var(--warn); }
.flash--notice { border-left-color: var(--accent-deep); background: var(--best-soft); color: var(--best-ink); }

/* ------------------------------- Auth pages ----------------------------- */
.auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(2rem, 5vw, 4rem); align-items: start; max-width: 1060px; margin-inline: auto; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 5vw, 3.5rem) clamp(4rem, 7vw, 6rem); }
.auth-card h1 { margin: .7rem 0 .7rem; font-family: var(--display); font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 920; letter-spacing: -.07em; line-height: .9; }
.auth-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.6rem; color: var(--muted); font-family: var(--text); font-size: .9rem; }
.auth-handle { font-weight: 780; }
.auth-since { color: var(--muted); font-size: .78rem; }
.auth-section { margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: var(--display); font-size: 1.5rem; font-weight: 880; letter-spacing: -.045em; }
.auth-approval { margin: 1.2rem 0 0; padding: .85rem 1rem; border: 1px solid var(--ink); background: #c9d7ff; font-family: var(--text); font-size: .8rem; line-height: 1.55; }
.auth-form { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.auth-field { display: grid; gap: .35rem; }
.auth-field label { font-size: .74rem; font-weight: 820; letter-spacing: .02em; }
.auth-field input, .auth-field textarea { width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--surface); font-family: var(--text); font-size: .92rem; }
.auth-field textarea { resize: vertical; }
.auth-field input:focus-visible, .auth-field textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.auth-field small { color: var(--muted); font-family: var(--text); font-size: .7rem; line-height: 1.45; }
/* Live verdict on a signup field. Neutral until it has something to say, so a
   field nobody has touched yet carries no colour at all. */
.auth-check { display: flex; gap: .4rem; margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.4; }
.auth-check::before { content: "•"; }
.auth-check--bad { color: var(--warn); }
.auth-check--bad::before { content: "✕"; }
.auth-check--good { color: var(--best); }
.auth-check--good::before { content: "✓"; }
/* Paired with the message, so the border agrees with the text rather than
   relying on colour alone to carry the state. */
.auth-field input[aria-invalid="true"] { border-color: var(--warn); }
.auth-field input[aria-invalid="true"]:focus-visible { outline-color: var(--warn); }
/* Off-screen rather than display:none, which some bots detect and skip. */
.auth-decoy { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-family: var(--text); font-size: .78rem; line-height: 1.5; }
.auth-consent input { width: 17px; height: 17px; margin: .2rem 0 0; accent-color: var(--ink); }
.auth-submit { justify-self: start; padding: .8rem 1.3rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--fill); color: var(--on-fill); font-size: .8rem; font-weight: 860; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.auth-submit:hover { background: var(--accent); color: var(--ink); }
.auth-alt { margin: 1.5rem 0 0; font-family: var(--text); font-size: .82rem; }
.auth-note { margin: .6rem 0 0; color: var(--muted); font-family: var(--text); font-size: .74rem; line-height: 1.55; }
.auth-aside { position: sticky; top: 110px; padding: 1.2rem; border: 1px solid var(--ink); background: var(--fill); color: var(--on-fill); box-shadow: 7px 7px 0 var(--accent); }
.auth-aside .kicker { color: var(--accent); }
.auth-aside ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.auth-aside li { padding: .75rem 0; border-top: 1px solid #444741; color: #c9cbc5; font-family: var(--text); font-size: .78rem; line-height: 1.5; }
.auth-aside__link { display: inline-block; margin-top: 1rem; color: var(--accent); font-size: .74rem; font-weight: 820; text-decoration: none; }
.auth-aside__link:hover { text-decoration: underline; }
.auth-aside__note { margin: 1rem 0 0; color: #afb1ab; font-family: var(--text); font-size: .72rem; line-height: 1.5; }
.auth-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0 0; }
.auth-stats dt { color: #a8aaa3; font-size: .58rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.auth-stats dd { margin: .2rem 0 0; font-family: var(--display); font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }

/* -------------------------------- Moderation ---------------------------- */
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(1.8rem, 3vw, 2.6rem); border: 1px solid var(--ink); }
.admin-stats > div { display: grid; gap: .3rem; padding: 1rem; border-right: 1px solid var(--ink); background: var(--forum-surface); }
.admin-stats > div:last-child { border-right: 0; }
.admin-stats > div.is-warn { background: var(--warn-soft); }
.admin-stats small { color: var(--muted); font-size: .59rem; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.admin-stats strong { font-family: var(--display); font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.06em; line-height: 1; }
.admin-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.admin-links a { padding: .55rem .85rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .74rem; font-weight: 800; text-decoration: none; background: var(--forum-surface); }
.admin-links a:hover { background: var(--accent); }
.admin-links a.is-alert { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

/* Action strip: only the counts that should pull an operator into a queue. */
.admin-attention { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin-top: 1.2rem; }
.admin-attention__item { display: grid; gap: .25rem; padding: .75rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.admin-attention__item:hover { border-color: var(--ink); transform: translateY(-1px); }
.admin-attention__item.is-warn { border-color: var(--warn); background: var(--warn-soft); }
.admin-attention__item small { color: var(--muted); font-size: .58rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.admin-attention__item strong { font-family: var(--display); font-size: 1.55rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; }

/* Primary traffic board — chart first, secondary numbers denser. */
.admin-board { margin-top: clamp(1.4rem, 2.5vw, 2rem); padding: clamp(1rem, 2vw, 1.35rem); border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--forum-surface); }
.admin-board__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: 1rem 1.4rem; align-items: start; margin-bottom: 1rem; }
.admin-board__head .forum-section-heading { margin: 0 0 .35rem; }
.admin-board__head .admin-traffic__note { margin: 0; }
.admin-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.admin-kpis > div { display: grid; gap: .2rem; padding: .7rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--wash); }
.admin-kpis small { color: var(--muted); font-size: .58rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.admin-kpis strong { font-family: var(--display); font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; }
.admin-board__main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(14rem, .9fr); gap: 1.2rem 1.5rem; align-items: start; }
.admin-board__side h3 { margin: 0 0 .7rem; }

.admin-pulse { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.admin-pulse__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line-strong); background: var(--forum-surface); }
.admin-pulse__grid > div { display: grid; gap: .2rem; padding: .7rem .75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-pulse__grid > div:nth-child(6n) { border-right: 0; }
.admin-pulse__grid > div:nth-last-child(-n+6) { border-bottom: 0; }
.admin-pulse__grid small { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-pulse__grid strong { font-family: var(--display); font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.admin-queue { display: grid; margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; padding: 0; border: 1px solid var(--ink); background: var(--forum-surface); list-style: none; }
.admin-queue__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.admin-queue__row:last-child { border-bottom: 0; }
.admin-queue__row strong { display: block; font-size: .88rem; }
.admin-queue__row small { color: var(--muted); font-family: var(--text); font-size: .7rem; }
.admin-queue__actions { display: flex; gap: .5rem; align-items: center; }
.admin-queue__actions button { padding: .5rem .8rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .72rem; font-weight: 820; cursor: pointer; }
.admin-approve { background: var(--accent); }
.admin-approve:hover { background: var(--fill); color: var(--accent); }
.admin-reject { background: transparent; color: var(--warn); }
.admin-reject:hover { background: var(--coral); color: var(--ink); }

/* Quiet icon actions on the posts list: pencil / eye, not filled Approve chips. */
.admin-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.admin-icon-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--ink);
}
.admin-icon-btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.admin-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Article editor: Write / Preview toggle over the body field. */
.composer-body__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem .9rem;
  margin-bottom: .45rem;
}
.composer-body__head label { margin: 0; }
.composer-mode {
  display: inline-flex;
  padding: .15rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  gap: .15rem;
}
.composer-mode__btn {
  padding: .35rem .75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 820;
  cursor: pointer;
}
.composer-mode__btn.is-active {
  background: var(--fill);
  color: var(--accent);
}
.composer-mode__btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.composer-preview {
  min-height: 18rem;
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
}
.composer-preview__empty {
  margin: 0;
  color: var(--muted);
  font-family: var(--text);
  font-size: .9rem;
}
.composer-preview__status {
  margin: .45rem 0 0;
  color: var(--warn);
  font-family: var(--text);
  font-size: .74rem;
}

/* ------------------------------- Responsive ----------------------------- */
@media (max-width: 960px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { position: static; max-width: 520px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-stats > div:nth-child(2) { border-right: 0; }
  .admin-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .admin-attention { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-board__head,
  .admin-board__main { grid-template-columns: 1fr; }
  .admin-pulse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-pulse__grid > div:nth-child(6n) { border-right: 1px solid var(--line); }
  .admin-pulse__grid > div:nth-child(3n) { border-right: 0; }
  .admin-pulse__grid > div:nth-last-child(-n+6) { border-bottom: 1px solid var(--line); }
  .admin-pulse__grid > div:nth-last-child(-n+3) { border-bottom: 0; }
  .account-chip__name { display: none; }
}
@media (max-width: 680px) {
  .forum-page, .auth-page { padding-inline: 1rem; }
  .forum-hero h1 { font-size: 2.4rem; }
  .forum-hero__meta { gap: 1.2rem; }
  .forum-hero__meta strong { font-size: 1.35rem; }
  .category-row { grid-template-columns: 1fr; gap: .7rem; }
  .category-row__stats { justify-items: start; text-align: left; }
  .thread-row { grid-template-columns: 30px minmax(0, 1fr); padding: .8rem; }
  .thread-row__avatar { width: 30px; height: 30px; font-size: .74rem; }
  .thread-row__stats { grid-column: 1 / -1; justify-items: start; }
  .auth-card h1 { font-size: 2.3rem; }
  .admin-queue__row { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-stats > div { border-right: 0; border-bottom: 1px solid var(--ink); }
  .admin-stats > div:last-child { border-bottom: 0; }
  .admin-attention { grid-template-columns: 1fr 1fr; }
  .admin-kpis { grid-template-columns: 1fr 1fr; }
  .admin-pulse__grid { grid-template-columns: 1fr 1fr; }
  .admin-pulse__grid > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .admin-pulse__grid > div:nth-child(2n) { border-right: 0; }
  .admin-pulse__grid > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .admin-pulse__grid > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .category-row:hover, .forum-hero__cta:hover { transform: none; }
}

/* ------------------------- Category & thread pages ---------------------- */
.forum-hero--category { --hero-accent: var(--accent); position: relative; margin-inline: calc(clamp(1rem, 5vw, 3.5rem) * -1); padding-inline: clamp(1rem, 5vw, 3.5rem); border-bottom: 1px solid var(--ink); background: var(--hero-accent); }
.forum-hero--lime { --hero-accent: var(--accent); }
.forum-hero--brand { --hero-accent: #91acff; }
.forum-hero--coral { --hero-accent: #ff846b; }
.forum-hero--violet { --hero-accent: #b69cff; }
.forum-hero--sky { --hero-accent: #78dfff; }
.forum-hero--amber { --hero-accent: #ffc852; }
.forum-hero--yellow { --hero-accent: var(--yellow); }
.forum-hero--ink { --hero-accent: #b9bec9; }
.forum-hero--teal { --hero-accent: #62dec5; }
.forum-hero--green { --hero-accent: #83e991; }
.forum-hero--category .forum-hero__lead { color: var(--ink-soft); }
.forum-locked { margin: 1.2rem 0 0; font-family: var(--text); font-size: .82rem; font-style: italic; }

.thread-sort { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.6rem 0 1.1rem; }
.thread-sort a { padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; font-weight: 800; text-decoration: none; }
.thread-sort a:hover, .thread-sort a[aria-current="page"] { border-color: var(--ink); background: var(--fill); color: var(--on-fill); }

.thread-header { padding: clamp(1.4rem, 3vw, 2.2rem) 0 1.2rem; border-bottom: 1px solid var(--line-strong); }
.thread-header__flags { display: flex; flex-wrap: wrap; gap: .4rem; }
.thread-header__flags:empty { display: none; }
.thread-header h1 { margin: .6rem 0 .7rem; font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.thread-header__meta { margin: 0; color: var(--muted); font-family: var(--text); font-size: .78rem; }
.thread-header__meta a { font-weight: 750; text-decoration: none; }
.thread-header__meta a:hover { text-decoration: underline; }
.thread-card-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.2rem; padding: .75rem .95rem; border: 1px solid var(--ink); background: var(--surface); }
.thread-card-strip p { margin: 0; font-family: var(--text); font-size: .8rem; }
.thread-card-strip a { font-size: .74rem; font-weight: 820; text-decoration: none; }
.thread-card-strip a:hover { text-decoration: underline; }

/* ---------------------------------- Posts ------------------------------- */
.post-list { display: grid; gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.post { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; padding: 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); }
.post.is-opening { border-color: var(--ink); border-left: 4px solid var(--accent); }
.post.is-deleted { display: block; border-style: dashed; background: var(--wash); }
.post__avatar { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-deep); font-family: var(--display); font-size: 1.1rem; font-weight: 900; letter-spacing: -.03em; }
.post__byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; color: var(--muted); font-size: .7rem; }
.post__author { color: var(--ink); font-size: .82rem; font-weight: 830; text-decoration: none; }
.post__author:hover { text-decoration: underline; }
.post__op { padding: .12rem .38rem; border-radius: 4px; background: var(--accent); color: var(--ink); font-size: .56rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.post__rep { font-variant-numeric: tabular-nums; }
.post__time { color: var(--muted); text-decoration: none; }
.post__time:hover { text-decoration: underline; }
.post__edited { font-style: italic; }
.post__tombstone { margin: 0; color: var(--muted); font-family: var(--text); font-size: .8rem; font-style: italic; }
/* Post prose is the one place user content is rendered, so it gets the reading
   face and tight control over what its markup can do to the layout. */
.post__prose { font-family: var(--text); font-size: .92rem; line-height: 1.65; overflow-wrap: anywhere; }
.post__prose > :first-child { margin-top: 0; }
.post__prose > :last-child { margin-bottom: 0; }
.post__prose p { margin: 0 0 .8rem; }
.post__prose h3, .post__prose h4 { margin: 1.2rem 0 .4rem; font-family: var(--sans); font-size: 1rem; font-weight: 850; }
.post__prose ul, .post__prose ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.post__prose li { margin-bottom: .3rem; }
.post__prose code { padding: .1rem .3rem; border-radius: 4px; background: var(--paper-deep); font-size: .85em; }
.post__prose pre { margin: 0 0 .8rem; padding: .8rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-deep); }
.post__prose pre code { padding: 0; background: none; }
.post__prose blockquote { margin: 0 0 .8rem; padding: .3rem 0 .3rem .9rem; border-left: 3px solid var(--line-strong); color: var(--muted); }
.post__prose hr { margin: 1.2rem 0; border: 0; border-top: 1px solid var(--line); }
.post__prose a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); }
.post__helpful { color: var(--muted); font-size: .68rem; font-weight: 780; font-variant-numeric: tabular-nums; }

/* ------------------------------- Pagination ----------------------------- */
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.pagination a { font-size: .76rem; font-weight: 820; text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination a[rel="next"] { justify-self: end; }
.pagination__current { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* -------------------------------- Composer ------------------------------ */
.composer { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.composer select, .composer textarea, .composer input[type="text"] { width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--surface); font-family: var(--text); font-size: .92rem; }
.composer textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.composer select { font-family: var(--sans); font-weight: 700; cursor: pointer; }
.composer__reminder { margin: 0; padding: .7rem .9rem; border: 1px solid var(--ink); border-left-width: 5px; background: var(--yellow); font-family: var(--text); font-size: .76rem; }
.auth-optional { color: var(--muted); font-weight: 600; }
.reply { padding-top: clamp(2rem, 4vw, 3rem); }

/* -------------------------------- Profiles ------------------------------ */
.profile-header { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: clamp(1.6rem, 3vw, 2.6rem) 0 1.4rem; border-bottom: 1px solid var(--line-strong); }
.profile-avatar { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--accent); box-shadow: 4px 4px 0 var(--stamp); font-family: var(--display); font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; }
.profile-header h1 { margin: 0 0 .5rem; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 0; color: var(--muted); font-family: var(--text); font-size: .74rem; }
.profile-bio { margin: .8rem 0 0; max-width: 60ch; font-family: var(--text); font-size: .88rem; line-height: 1.6; }
.profile-edit { display: inline-block; margin-top: .8rem; font-size: .74rem; font-weight: 820; text-decoration: none; }
.profile-edit:hover { text-decoration: underline; }
.profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }

/* ------------------------------ Notifications --------------------------- */
.notify-actions { margin: 1.4rem 0 .8rem; }
.notify-actions button { padding: .5rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 800; cursor: pointer; }
.notify-actions button:hover { border-color: var(--ink); color: var(--ink); }
.notify-list { display: grid; margin: 0; padding: 0; border: 1px solid var(--ink); background: var(--forum-surface); list-style: none; }
.notify-row { border-bottom: 1px solid var(--line); }
.notify-row:last-child { border-bottom: 0; }
.notify-row.is-unread { background: var(--accent-wash); }
.notify-row a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .85rem 1rem; text-decoration: none; }
.notify-row a:hover { background: var(--tint); }
.notify-row__text { font-family: var(--text); font-size: .84rem; }
.notify-row__text em { color: var(--muted); font-style: normal; font-weight: 700; }
.notify-row small { color: var(--muted); font-size: .68rem; white-space: nowrap; }

@media (max-width: 680px) {
  .post { grid-template-columns: 34px minmax(0, 1fr); gap: .7rem; padding: .9rem; }
  .post__avatar { width: 34px; height: 34px; font-size: .82rem; }
  .thread-header h1 { font-size: 1.75rem; }
  .pagination { grid-template-columns: 1fr; justify-items: start; gap: .5rem; }
  .pagination a[rel="next"] { justify-self: start; }
  .profile-header { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .thread-card-strip { flex-direction: column; align-items: flex-start; }
}
/* ---------------------------- Post participation ------------------------- */
/* Accepted answers get the loudest treatment on the page: on a Q&A forum the
   answer is the payload, and a reader arriving from search should find it
   without reading the whole thread. */
.post.is-accepted { border-left: 5px solid var(--accent-deep); background: linear-gradient(90deg, var(--accent-wash), transparent 42%); }
.post__accepted-flag { grid-column: 1 / -1; margin: 0 0 .5rem; color: var(--best-ink); font-size: .6rem; font-weight: 880; letter-spacing: .09em; text-transform: uppercase; }
.post__accepted-flag::before { content: "✓ "; }
/* Card terms move under answers that were correct when written. */
.post__stale { margin: 0 0 .8rem; padding: .6rem .8rem; border: 1px solid var(--warn); border-left-width: 4px; background: var(--warn-soft); color: var(--warn); font-family: var(--text); font-size: .76rem; font-weight: 640; line-height: 1.5; }
.post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.post__actions-spacer { flex: 1 1 auto; }
.post__tally { color: var(--muted); font-family: var(--text); font-size: .72rem; font-weight: 620; }
.react { display: contents; }
.react--restore { display: block; margin-top: .6rem; }
.react__btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-family: var(--sans); font-size: .7rem; font-weight: 800; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; }
.react__btn:hover { border-color: var(--ink); color: var(--ink); }
.react__btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Pressed state carries colour *and* a border weight change, so it survives
   greyscale and colour-blindness. */
.react__btn.is-on { border-color: var(--ink); border-width: 1.5px; background: var(--accent); color: var(--ink); }
.react__n { font-variant-numeric: tabular-nums; }
.react__btn--warn.is-on { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.react__btn--accept.is-on { background: var(--accent-deep); color: var(--ink); }
.react__btn--danger { border-color: rgba(178, 58, 28, .5); color: var(--warn); }
.react__btn--danger:hover { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.react__reason { width: min(210px, 40vw); padding: .34rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-family: var(--text); font-size: .7rem; }
.post__report, .post__reported { color: var(--muted); font-family: var(--text); font-size: .7rem; font-weight: 700; text-decoration: none; }
.post__report:hover { color: var(--warn); text-decoration: underline; }
.post__reported { opacity: .75; }
/* ------------------------------ Moderator strip -------------------------- */
.mod-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; padding: .6rem .8rem; border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, transparent, transparent 8px, var(--ghost) 8px, var(--ghost) 16px); }
.mod-strip__label { color: var(--muted); font-size: .58rem; font-weight: 880; letter-spacing: .1em; text-transform: uppercase; }
.mod-strip form { display: flex; align-items: center; gap: .4rem; }
.mod-strip button, .mod-strip input { padding: .34rem .7rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--surface); font-family: var(--sans); font-size: .68rem; font-weight: 800; }
.mod-strip button { cursor: pointer; transition: background 140ms ease; }
.mod-strip button:hover { background: var(--accent); }
.mod-strip input { font-family: var(--text); font-weight: 500; }
.mod-strip__danger { border-color: var(--warn); color: var(--warn); }
.mod-strip__danger:hover { background: var(--warn-soft); }
/* -------------------------------- Report form ---------------------------- */
.forum-page--narrow { max-width: 680px; }
.report-header h1 { margin: .5rem 0 .5rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 910; letter-spacing: -.06em; }
.report-header p { color: var(--muted); font-family: var(--text); font-size: .88rem; line-height: 1.6; }
.report-quote { margin: 1.4rem 0 0; padding: .9rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--ink); background: var(--forum-surface); }
.report-quote__author { margin: 0 0 .4rem; font-size: .68rem; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
.report-quote__body { margin: 0; color: var(--ink-soft); font-family: var(--text); font-size: .85rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-form { display: grid; gap: 1.3rem; margin-top: 1.6rem; }
.report-reasons { display: grid; gap: .1rem; margin: 0; padding: 0; border: 1px solid var(--ink); }
.report-reasons legend { padding: 0 .4rem; margin-left: .6rem; font-size: .74rem; font-weight: 850; }
.report-reason { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 140ms ease; }
.report-reason:last-child { border-bottom: 0; }
.report-reason:hover { background: var(--forum-surface); }
.report-reason input { grid-row: 1 / 3; width: 17px; height: 17px; margin: .15rem 0 0; accent-color: var(--ink); }
.report-reason__label { font-size: .84rem; font-weight: 780; }
.report-reason__hint { color: var(--muted); font-family: var(--text); font-size: .73rem; line-height: 1.45; }
.report-reason:has(input:checked) { background: var(--best-soft); }
.report-actions { display: flex; align-items: center; gap: 1rem; }
.report-cancel { color: var(--muted); font-family: var(--text); font-size: .8rem; text-decoration: none; }
.report-cancel:hover { color: var(--ink); text-decoration: underline; }
.report-note { margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--text); font-size: .78rem; line-height: 1.6; }
.auth-optional { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
/* ------------------------------- Report queue ---------------------------- */
.report-queue { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.report-queue__row { padding: 1rem 1.1rem; border: 1px solid var(--ink); background: var(--forum-surface); }
.report-queue__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.report-queue__reason { padding: .22rem .55rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--warn-soft); font-size: .62rem; font-weight: 860; letter-spacing: .04em; text-transform: uppercase; }
.report-queue__pile { padding: .22rem .55rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--coral); color: var(--on-fill); font-size: .62rem; font-weight: 860; }
.report-queue__done { padding: .22rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .62rem; font-weight: 800; }
.report-queue__when { margin-left: auto; color: var(--muted); font-family: var(--text); font-size: .72rem; }
.report-queue__context { margin: .7rem 0 .6rem; color: var(--muted); font-family: var(--text); font-size: .78rem; line-height: 1.55; }
.report-queue__context a { color: var(--ink); font-weight: 720; }
/* Monospace and pre-wrapped: a moderator judging a referral link needs to see
   the raw URL exactly as written, including any lookalike characters. */
.report-queue__excerpt { margin: 0; padding: .8rem .9rem; border: 1px solid var(--line); background: var(--surface-hi); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-queue__note { margin: .7rem 0 0; font-family: var(--text); font-size: .79rem; line-height: 1.55; }
.report-queue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.report-queue__actions form { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.report-queue__actions input { width: min(200px, 42vw); padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-hi); font-family: var(--text); font-size: .72rem; }
.report-queue__open { font-size: .76rem; font-weight: 820; text-decoration: none; }
.report-queue__open:hover { text-decoration: underline; }
/* ----------------------------- Moderation log ---------------------------- */
.admin-log { margin-top: clamp(2rem, 4vw, 3rem); }
.admin-log__list { margin: 1rem 0 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.admin-log__list li { padding: .6rem .9rem; border-bottom: 1px solid var(--line); font-family: var(--text); font-size: .79rem; line-height: 1.5; }
.admin-log__list li:last-child { border-bottom: 0; }
.admin-log__list strong { font-family: var(--sans); font-weight: 800; }
.admin-log__when { color: var(--muted); font-size: .72rem; }
.admin-log__reason { display: block; color: var(--muted); font-size: .75rem; font-style: italic; }
@media (max-width: 720px) {
  .post__actions { gap: .4rem; }
  .post__actions-spacer { display: none; }
  .react__reason { width: 100%; }
  .report-queue__actions form { margin-left: 0; width: 100%; }
  .report-queue__when { margin-left: 0; }
}
/* Flash slot for forum pages, aligned with the page gutter the content uses. */
.forum-flash { max-width: none; margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.forum-flash .flash { margin-top: 1.4rem; }
/* ========================================================================== */
/* Forum layout: dense listings                                               */
/* -------------------------------------------------------------------------- */
/* A forum is a navigational surface, not an article. The rhythm here is much
   tighter than the marketing pages on purpose: a reader scanning for "has
   anything happened" needs many rows in one eyeful, and every row carries four
   pieces of information (title, who, how busy, how fresh). */
/* No inner cap: the shell already bounds the page, so the forum fills the
   desktop width instead of sitting in a 1240px column with empty gutters. */
.forum-shell { max-width: none; margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
/* ------------------------------- Header bar ------------------------------- */
.forum-bar { --bar-accent: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem clamp(1.4rem, 3vw, 3rem); align-items: end; margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.5rem); border: 1px solid var(--ink); background: var(--surface); box-shadow: 6px 6px 0 var(--bar-accent); }
.forum-bar--tight { align-items: center; }
.forum-bar--lime { --bar-accent: var(--accent); }
.forum-bar--blue,
.forum-bar--brand { --bar-accent: #91acff; }
.forum-bar--coral { --bar-accent: #ff846b; }
.forum-bar--violet { --bar-accent: #b69cff; }
.forum-bar--sky { --bar-accent: #78dfff; }
.forum-bar--amber { --bar-accent: #ffc852; }
.forum-bar--yellow { --bar-accent: var(--yellow); }
.forum-bar--ink { --bar-accent: #b9bec9; }
.forum-bar--teal { --bar-accent: #62dec5; }
.forum-bar--green { --bar-accent: #83e991; }
.forum-bar__lead h1 { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 920; letter-spacing: -.06em; line-height: .95; }
.forum-bar__lead p { max-width: 56ch; margin: .5rem 0 0; color: var(--muted); font-family: var(--text); font-size: .86rem; line-height: 1.55; }
.forum-bar__stats { display: flex; gap: clamp(1rem, 2vw, 1.8rem); margin: 0; grid-column: 1; }
.forum-bar__stats dt { color: var(--muted); font-size: .56rem; font-weight: 860; letter-spacing: .1em; text-transform: uppercase; }
.forum-bar__stats dd { margin: .1rem 0 0; font-family: var(--display); font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; }
.forum-bar__actions { display: flex; flex-wrap: wrap; gap: .5rem; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-content: flex-end; }
/* With the stats row hidden there is only one row of content, so the two-row
   span above would reserve an empty second row and add a stray gap. */
.forum-bar--no-stats .forum-bar__actions { grid-row: 1; }
.forum-bar__locked { align-self: center; color: var(--muted); font-family: var(--text); font-size: .78rem; font-style: italic; }
.forum-btn { display: inline-flex; align-items: center; padding: .55rem 1rem; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-size: .74rem; font-weight: 830; text-decoration: none; white-space: nowrap; transition: background 150ms ease, color 150ms ease; }
.forum-btn:hover { background: var(--accent); }
.forum-btn--primary { background: var(--fill); color: var(--on-fill); }
.forum-btn--primary:hover { background: var(--accent); color: var(--ink); }

/* The primary member action is a real composer on the landing page. It reuses
   the field and button primitives from `/forum/new`, so both entry points have
   the same browser validation and interaction behaviour. */
.forum-compose-panel { margin-top: 1.2rem; padding: clamp(1rem, 2.5vw, 1.45rem); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--forum-surface); box-shadow: 7px 7px 0 var(--accent); }
.forum-compose-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem; align-items: end; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.forum-compose-panel__head .eyebrow { margin: 0 0 .45rem; }
.forum-compose-panel__head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.forum-compose-panel__head p:not(.eyebrow) { margin: .45rem 0 0; color: var(--muted); font-family: var(--text); font-size: .78rem; }
.forum-compose-panel__head > a { flex: 0 0 auto; color: var(--muted); font-size: .7rem; font-weight: 780; }
.forum-composer { margin-top: 1rem; }
.forum-composer__fields { display: grid; grid-template-columns: minmax(190px, .36fr) minmax(0, 1fr); gap: 1rem; }
.forum-composer__body { grid-column: 1 / -1; }
.forum-composer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.forum-composer__actions .auth-submit { margin: 0; }
.forum-composer__actions span { color: var(--muted); font-family: var(--text); font-size: .72rem; }
.forum-composer__actions strong { color: var(--ink); }

/* ------------------------------ Two columns ------------------------------- */
/* Content centre, navigation right. The rail grows a little on very wide
   screens so the centre column does not become an unreadably long line. */
.forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.forum-main { min-width: 0; }
.forum-side { display: grid; gap: 1rem; min-width: 0; align-self: start; }

/* Compact category list for the rail. */
.rail-card--cats { padding-bottom: .35rem; }
.rail-cats__group { margin: .8rem 0 .35rem; color: var(--muted); font-family: var(--text); font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.rail-cats { display: grid; margin: 0; padding: 0; list-style: none; }
.rail-cats__item {
  /* `isolation` creates the stacking context the fill sits inside, so the
     `z-index: -1` below drops behind the text without escaping to the page. */
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .1rem;
  padding: .45rem .55rem;
  border-left: 3px solid var(--row-accent, var(--accent));
  border-bottom: 1px solid var(--line);
}
.rail-cats__item:last-child { border-bottom: 0; }

/* The hover fill: the row floods with its own accent, wiping in from the left
   edge where the marker already is, so the colour appears to come out of the
   marker rather than fading in from nowhere.
   `scaleX` rather than animating `width` or `background-size`, because a
   transform is composited and does not trigger layout on each frame. */
.rail-cats__item::before {
  position: absolute;
  z-index: -1;
  background: color-mix(in srgb, var(--row-accent, var(--accent)) 34%, var(--surface));
  content: "";
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}
/* `focus-within` so a keyboard user tabbing the links gets the same feedback. */
.rail-cats__item:hover::before,
.rail-cats__item:focus-within::before { transform: scaleX(1); }

/* Mixed against `--surface` rather than used raw, and this is the reason: several
   accents are dark in the light theme (`--brand` is #2f4f9e) and light in the
   dark theme. A raw fill would put dark text on dark blue in one theme and light
   text on a pastel in the other. Mixing toward the surface keeps the hue
   recognisable while guaranteeing `--ink` still reads against it in both. */
.rail-cats__item--lime { --row-accent: var(--accent); }
.rail-cats__item--blue,
.rail-cats__item--brand { --row-accent: var(--brand); }
.rail-cats__item--coral { --row-accent: var(--coral); }
.rail-cats__item--violet { --row-accent: var(--violet); }
.rail-cats__item--sky { --row-accent: #27c5e5; }
.rail-cats__item--amber { --row-accent: #ffae35; }
.rail-cats__item--yellow { --row-accent: var(--yellow); }
.rail-cats__item--ink { --row-accent: var(--line-strong); }
.rail-cats__item--teal { --row-accent: #5ce1c6; }
.rail-cats__item--green { --row-accent: #79e88f; }
.rail-cats__item > a { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--ink); font-family: var(--text); font-size: .78rem; font-weight: 700; text-decoration: none; }
.rail-cats__item > a:hover .rail-cats__name { text-decoration: underline; }
/* Wraps because a category holding writing carries a third counter, and three
   labels can outgrow a 300px rail at narrower window widths. */
.rail-cats__counts { display: flex; flex-wrap: wrap; gap: .2rem .7rem; color: var(--muted); font-family: var(--text); font-size: .62rem; }
.rail-cats__counts strong { font-variant-numeric: tabular-nums; }
.rail-cats__counts small { font-size: .62rem; }
/* The counters sit on the fill once it arrives, so they step up from muted to
   full ink to stay legible against it. */
.rail-cats__item:hover .rail-cats__counts,
.rail-cats__item:focus-within .rail-cats__counts { color: var(--ink-soft); }

/* The link covers the whole row, so the hit area matches the area that fills.
   A row that colours on hover but only responds to a click on the title text is
   a worse affordance than no hover at all. */
.rail-cats__item > a::after { position: absolute; content: ""; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the colour, drop the wipe. The fill is the information; the animation
     is decoration. */
  .rail-cats__item::before { transition: none; }
}
/* --------------------------- Category node rows --------------------------- */
.node-group + .node-group { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.node-group__head { margin: 0; padding: .6rem .9rem; border: 1px solid var(--ink); background: var(--fill); color: var(--accent); font-family: var(--display); font-size: .82rem; font-weight: 880; letter-spacing: .06em; text-transform: uppercase; }
.node-list { margin: 0; padding: 0; border: 1px solid var(--ink); border-top: 0; list-style: none; }
.node { display: grid; grid-template-columns: 6px minmax(0, 1fr) 74px 74px minmax(0, 210px); gap: 0 clamp(.6rem, 1.4vw, 1.1rem); align-items: center; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); background: var(--forum-surface); }
.node:last-child { border-bottom: 0; }
.node:hover { background: var(--surface-hi); }
/* The accent bar is the only colour a node row carries: eight coloured rows
   compete with each other, eight coloured edges read as one list. */
.node__mark { align-self: stretch; background: var(--row-accent, var(--accent)); }
.node--lime { --row-accent: var(--accent); }
/* `blue` is what migration 0001 actually seeds for "Applications & eligibility";
   only `brand` was ever styled, so that row fell back to the default accent
   everywhere it appeared. Aliased rather than renamed: the accent lives in the
   database, and an applied migration cannot be edited. */
.node--blue,
.node--brand { --row-accent: var(--brand); }
.node--coral { --row-accent: var(--coral); }
.node--violet { --row-accent: var(--violet); }
.node--sky { --row-accent: #27c5e5; }
.node--amber { --row-accent: #ffae35; }
.node--yellow { --row-accent: var(--yellow); }
.node--ink { --row-accent: var(--line-strong); }
.node--teal { --row-accent: #5ce1c6; }
.node--green { --row-accent: #79e88f; }
.node__main { min-width: 0; }
.node__title { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; font-size: .95rem; font-weight: 830; letter-spacing: -.01em; }
.node__title a { text-decoration: none; }
.node__title a:hover { text-decoration: underline; }
.node__desc { margin: .22rem 0 0; color: var(--muted); font-family: var(--text); font-size: .765rem; line-height: 1.45; }
.node__stat { display: grid; gap: .1rem; text-align: right; }
.node__stat small { color: var(--muted); font-size: .53rem; font-weight: 830; letter-spacing: .08em; text-transform: uppercase; }
.node__stat strong { font-family: var(--display); font-size: 1.05rem; font-weight: 880; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.node__last { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: center; margin: 0; padding-left: clamp(.6rem, 1.4vw, 1.1rem); border-left: 1px solid var(--line); }
.node__last-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--fill); color: var(--accent); font-family: var(--display); font-size: .72rem; font-weight: 900; text-decoration: none; }
.node__last-title { display: block; overflow: hidden; color: var(--ink); font-size: .765rem; font-weight: 760; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.node__last-title:hover { text-decoration: underline; }
.node__last small { display: block; color: var(--muted); font-family: var(--text); font-size: .69rem; }
.node__last--empty { display: block; padding-left: clamp(.6rem, 1.4vw, 1.1rem); color: var(--muted); font-family: var(--text); font-size: .72rem; font-style: italic; }
/* ------------------------------ Reading block ------------------------------ */
/* Articles grouped under their sections, below the discussion categories. The
   cards themselves are `.home-forum-card`, shared with the homepage, so an
   article looks the same wherever it appears. Only the grouping around them is
   defined here.

   Groups stack rather than sitting in columns: the card is a wide three-column
   object (artwork, body, action), so squeezing several side by side is what
   produced the one-word-per-line wrapping earlier. */
.node-group__head--reading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.node-group__more { color: var(--accent); font-family: var(--text); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: none; white-space: nowrap; }
.node-group__more:hover { text-decoration: underline; }
/* The post list and its pager share one bordered block hanging off the section
   head, which is why the top border is dropped: the head already drew it. This
   replaced a per-section grid (`.reading-groups`) when the forum index became a
   single reverse-chronological list. */
.node-posts { padding: 1.1rem; border: 1px solid var(--ink); border-top: 0; background: var(--forum-surface); }
/* Sits opposite "Posts" in the flex head, so it must not inherit the head's
   uppercase display treatment — it carries a count and a page number. */
.node-group__count { color: var(--muted); font-family: var(--text); font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-transform: none; white-space: nowrap; }

/* ---------------------------- Thread listings ----------------------------- */
.thread-table { margin: 0; padding: 0; border: 1px solid var(--ink); list-style: none; }
.thread-table__head { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px 64px minmax(0, 150px); gap: 0 clamp(.5rem, 1.2vw, .9rem); padding: .5rem 1rem; border-bottom: 1px solid var(--ink); background: var(--fill); color: #d9dbd4; font-size: .55rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.thread-table__head-title { grid-column: 2; }
.thread-table__head-stat { text-align: right; }
.thread-table__head-last { padding-left: clamp(.5rem, 1.2vw, .9rem); }
.thread-table__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px 64px minmax(0, 150px); gap: 0 clamp(.5rem, 1.2vw, .9rem); align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--forum-surface); }
.thread-table__row:last-child { border-bottom: 0; }
.thread-table__row:hover { background: var(--surface-hi); }
.thread-table__row.is-pinned { background: var(--amber-wash); }
.thread-table__row.is-answered { box-shadow: inset 3px 0 0 var(--accent-deep); }
.thread-table__avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--fill); color: var(--accent); font-family: var(--display); font-size: .74rem; font-weight: 900; text-decoration: none; }
.thread-table__main { min-width: 0; }
.thread-table__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0; font-size: .92rem; font-weight: 800; letter-spacing: -.012em; line-height: 1.3; }
.thread-table__title a { text-decoration: none; }
.thread-table__title a:hover { text-decoration: underline; }
.thread-table__byline { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 0; color: var(--muted); font-family: var(--text); font-size: .715rem; }
.thread-table__byline a { color: var(--muted); text-decoration: none; }
.thread-table__byline a:hover { color: var(--ink); text-decoration: underline; }
.thread-table__stat { display: grid; gap: .05rem; text-align: right; }
/* The column head is hidden from assistive tech, so each cell carries its own
   label; it is hidden visually only where the head is actually visible. */
.thread-table__stat small { color: var(--muted); font-size: .52rem; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }
.thread-table__stat strong { font-size: .86rem; font-weight: 830; font-variant-numeric: tabular-nums; }
.thread-table__last { display: block; padding-left: clamp(.5rem, 1.2vw, .9rem); border-left: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.thread-table__last time { display: block; font-size: .73rem; font-weight: 760; }
.thread-table__last small { display: block; overflow: hidden; color: var(--muted); font-family: var(--text); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.thread-table__last:hover time { text-decoration: underline; }
.thread-flag { padding: .1rem .36rem; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper-deep); font-size: .53rem; font-weight: 860; letter-spacing: .06em; text-transform: uppercase; }
.thread-flag--pin { background: var(--yellow); }
.thread-flag--lock { background: var(--paper-deep); }
.thread-flag--answered { background: var(--accent); }
/* -------------------------------- Right rail ------------------------------ */
/* Deliberately not sticky. Two reasons, and the second is the important one:
   a sticky element is repositioned by the compositor on every frame, and this
   one is tall and full of borders and text; and once the rail is taller than the
   viewport, sticky pins its top and makes its bottom permanently unreachable. */
.forum-rail { display: grid; gap: 1rem; min-width: 0; align-self: start; }
.rail-card { border: 1px solid var(--ink); background: var(--surface); }
.rail-card__head { margin: 0; padding: .55rem .85rem; border-bottom: 1px solid var(--ink); background: var(--paper-deep); font-size: .62rem; font-weight: 870; letter-spacing: .1em; text-transform: uppercase; }
.rail-card__more { display: block; padding: .6rem .85rem; border-top: 1px solid var(--line); font-size: .7rem; font-weight: 820; text-decoration: none; }
.rail-card__more:hover { background: var(--accent); }
.rail-posts { margin: 0; padding: 0; list-style: none; }
.rail-posts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; padding: .6rem .85rem; border-bottom: 1px solid var(--line); }
.rail-posts li:last-child { border-bottom: 0; }
.rail-posts__avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--fill); color: var(--accent); font-family: var(--display); font-size: .64rem; font-weight: 900; text-decoration: none; }
.rail-posts__title { display: block; color: var(--ink); font-size: .76rem; font-weight: 780; line-height: 1.35; text-decoration: none; }
.rail-posts__title:hover { text-decoration: underline; }
.rail-posts__meta { margin: .15rem 0 0; color: var(--muted); font-family: var(--text); font-size: .68rem; }
.rail-posts__cat { display: inline-block; margin-top: .18rem; color: var(--muted); font-size: .63rem; font-weight: 780; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; }
.rail-posts__cat:hover { color: var(--ink); text-decoration: underline; }
.rail-rules { margin: 0; padding: .3rem .85rem .55rem 1.7rem; }
.rail-rules li { margin: .4rem 0; color: var(--muted); font-family: var(--text); font-size: .72rem; line-height: 1.45; }
.rail-empty { margin: 0; padding: .9rem .85rem; color: var(--muted); font-family: var(--text); font-size: .75rem; }
/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 1080px) {
  /* The rail is supporting information, so it moves below the listing rather
     than squeezing the titles it is meant to support. */
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-rail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  /* Counts go before titles do. A row still has to answer "what is this and
     has anything happened", which is the title and the last post. */
  .node { grid-template-columns: 6px minmax(0, 1fr) 60px; row-gap: .5rem; }
  .node__stat:last-of-type { display: none; }
  .node__last { grid-column: 2 / -1; padding-left: 0; border-left: 0; border-top: 1px dashed var(--line); padding-top: .5rem; }
  .node__last--empty { grid-column: 2 / -1; padding-left: 0; }
  .thread-table__head { display: none; }
  .thread-table__row { grid-template-columns: 34px minmax(0, 1fr); row-gap: .45rem; }
  .thread-table__stat { grid-column: 2; display: flex; gap: .3rem; align-items: baseline; text-align: left; }
  .thread-table__stat:nth-of-type(1) { grid-row: 3; }
  .thread-table__stat:nth-of-type(2) { grid-row: 3; grid-column: 2; justify-self: end; }
  .thread-table__last { grid-column: 2; padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .forum-compose-panel__head { align-items: start; }
  .forum-composer__fields { grid-template-columns: 1fr; }
  .forum-composer__body { grid-column: auto; }
  .forum-bar { grid-template-columns: minmax(0, 1fr); }
  .forum-bar__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .forum-rail { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Theme plumbing
   Two jobs. First: anything painted with a bright accent keeps dark ink in
   both themes, so a chip or a seal never ends up light-on-light. Second: the
   full-bleed pastel regions (category and card heroes, newsletter) are mixed
   down into the page colour in the dark theme instead of glaring.
   ========================================================================== */
.brand-mark,
.header-cta:hover,
.finder-control button,
.intent-pill:hover, .intent-pill.is-active,
.ranking-seal,
.query-readback strong,
.deck-note,
.article-art,
.newsletter,
.category-hero,
.detail-hero,
.pros-cons li span,
.source-box > span,
.related-grid > a > span,
.related-item__main > span,
.info-page aside,
.status--verified, .status--active, .status--review, .status--unknown,
.status--invite-only, .status--temporarily-unavailable, .status--discontinued,
.status--listing, .status--partial,
.issuer-index a:hover,
.research-detail__hero,
.research-detail__compare:hover,
.import-note,
.shortlist-submit,
.compare-check.is-selected,
.compare-tray__go,
.compare-tray__remove:hover,
.compare-notice,
.compare-jump a:hover,
.picker-option.is-selected,
.compare-picker__submit button:hover,
.bank-panel__official:hover,
.forum-hero__cta,
.forum-hero--category,
.forum-disclaimer,
.forum-btn:hover,
.forum-btn--primary:hover,
.thread-row__flag,
.thread-flag--pin,
.thread-flag--answered,
.account-chip__inbox:hover,
.account-chip__link:hover,
.account-chip__badge,
.role-chip--moderator,
.role-chip--admin,
.auth-approval,
.auth-submit:hover,
.admin-links a:hover,
.admin-approve,
.admin-reject:hover,
.mod-strip button:hover,
.rail-card__more:hover,
.post__op,
.composer__reminder,
.profile-avatar,
.react__btn.is-on,
.react__btn--accept.is-on {
  color: var(--on-accent);
}

/* Pastel full-bleed regions, mixed into the page in the dark theme. The plain
   declaration before each mix is the fallback for engines without color-mix. */
:root[data-theme="dark"] .category-hero {
  background: var(--paper-deep);
  background: color-mix(in oklab, var(--category-accent) 20%, var(--paper));
  color: var(--ink);
}
:root[data-theme="dark"] .detail-hero {
  background: var(--paper-deep);
  background: color-mix(in oklab, var(--detail-accent) 20%, var(--paper));
  color: var(--ink);
}
:root[data-theme="dark"] .forum-hero--category {
  background: var(--paper-deep);
  background: color-mix(in oklab, var(--hero-accent) 20%, var(--paper));
  color: var(--ink);
}
:root[data-theme="dark"] .newsletter,
:root[data-theme="dark"] .article-art,
:root[data-theme="dark"] .info-page aside {
  background: var(--paper-deep);
  background: color-mix(in oklab, var(--accent) 18%, var(--paper));
  color: var(--ink);
}
:root[data-theme="dark"] .research-detail__hero,
:root[data-theme="dark"] .auth-approval {
  background: var(--brand-soft);
  color: var(--ink);
}
:root[data-theme="dark"] .article-art::before { border-color: var(--ink); }
/* Card artwork is drawn for a light page; a hair less contrast stops it
   burning a hole in the dark one. */
:root[data-theme="dark"] .card-art img,
:root[data-theme="dark"] .deck-card img,
:root[data-theme="dark"] .detail-hero figure img { filter: brightness(.94) saturate(.96); }

/* ------------------------------ Theme toggle ------------------------------ */
/* Small, but a real control: solid surface, full-strength border, and the icon
   shows the theme you would switch *to* (moon on light, sun on dark). */
.header-actions { justify-self: end; display: inline-flex; align-items: center; gap: clamp(.5rem, 1vw, .8rem); }
.theme-toggle {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.theme-toggle:hover { border-color: var(--ink); background: var(--accent); color: var(--on-accent); }
.theme-toggle__icon { display: grid; place-items: center; }
.theme-toggle__icon--dark { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--dark { display: grid; }
:root[data-theme="dark"] .theme-toggle__icon--light { display: none; }

/* Shared by the theme toggle and the notifications bell: the same drawn-outline
   treatment as `.nav-icon`, one size up because these sit alone inside a 36px
   circle rather than beside a word. `stroke-width: 1.8` on the 24-unit grid
   renders at the same 1.3px as the nav glyphs do on their 18-unit grid, so the
   header reads as one set of icons rather than two. */
.action-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The crescent is a closed shape, not a line: filling it stops the two tapered
   tips from collapsing into a blob at 18px, which is exactly where a stroked
   crescent falls apart. */
.theme-toggle__icon--light .action-icon { fill: currentColor; stroke: none; }

/* The toggle keeps the actions cluster company, so the header lays out as
   brand | nav | actions | menu, and drops to brand | actions | menu on narrow
   viewports where the nav collapses into the sheet. */
@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto auto; column-gap: .55rem; }
}

/* Generated per-card artwork placeholder for machine-read facts pages: no
   issuer imagery exists for these ~490 cards, so this renders a small,
   consistent identity card from data already on the page (issuer accent,
   initials, card name) rather than a broken image or a borrowed graphic. */
.fact-art { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--ink); background: var(--paper-deep); }
.fact-art__badge { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--ink); border-radius: 999px; font-weight: 900; font-size: .85rem; background: var(--badge-accent, #d8f37b); color: #10131a; }
.fact-art__badge--lime { --badge-accent: #d8f37b; }
.fact-art__badge--blue { --badge-accent: #9db8ff; }
.fact-art__badge--coral { --badge-accent: #ffab93; }
.fact-art__badge--violet { --badge-accent: #cdb8ff; }
.fact-art__badge--amber { --badge-accent: #ffd876; }
.fact-art__badge--teal { --badge-accent: #8be9d1; }
.fact-art__badge--indigo { --badge-accent: #b3c0ff; }
.fact-art__badge--sky { --badge-accent: #a3e8ff; }
.fact-art__name { font-weight: 820; font-size: .9rem; line-height: 1.25; }
.fact-art__issuer { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Homepage joining-fee browser: one category is visible at a time and its
   cards form a snap-scrolling, button-controlled slider. */
.fee-browser { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.fee-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); background: var(--surface); }
.fee-tab { display: grid; gap: .2rem; min-height: 76px; padding: .8rem 1rem; border: 0; border-right: 1px solid var(--ink); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.fee-tab:last-child { border-right: 0; }
.fee-tab:hover { background: var(--tint); }
.fee-tab.is-active { background: var(--fill); color: var(--on-fill); box-shadow: inset 0 -5px 0 var(--accent); }
.fee-tab span { font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 900; letter-spacing: -.025em; }
.fee-tab small { color: inherit; font-size: .58rem; font-weight: 760; letter-spacing: .045em; opacity: .72; text-transform: uppercase; }
.fee-tab:focus-visible, .fee-slider__controls button:focus-visible { position: relative; z-index: 2; outline: 3px solid var(--brand); outline-offset: 3px; }
.fee-tier { margin-top: 1.2rem; }
.fee-tier[hidden] { display: none; }
.fee-tier__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ink); }
.fee-tier__head .kicker { margin: 0 0 .25rem; }
.fee-tier__head h3 { margin: 0; font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 900; letter-spacing: -.035em; }
.fee-tier__empty { color: var(--muted); font-size: .8rem; }
.fee-slider__controls { display: flex; align-items: center; gap: .5rem; }
.fee-slider__controls button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer; }
.fee-slider__controls button:hover:not(:disabled) { background: var(--accent); }
.fee-slider__controls button:disabled { cursor: default; opacity: .32; }
.fee-slider__controls span { min-width: 74px; color: var(--muted); font-size: .64rem; font-weight: 780; text-align: center; font-variant-numeric: tabular-nums; }
.fee-slider { --fee-columns: 3; display: grid; grid-auto-columns: calc((100% - 1.7rem) / var(--fee-columns)); grid-auto-flow: column; gap: .85rem; padding: .15rem .05rem 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.fee-slider > .product-card { scroll-snap-align: start; }
.fee-slider:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
/* Retained for facts detail pages, never used in the homepage recommendation slider. */
.card-art--fallback { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; aspect-ratio: 480 / 300; padding: 1rem; background: var(--paper-deep); text-decoration: none; color: inherit; }
.card-art--fallback .fact-art__badge { width: 2.4rem; height: 2.4rem; }
.card-art--fallback .fact-art__name { font-weight: 820; font-size: .95rem; line-height: 1.2; }
.product-card--fact { --card-accent: #4e78ff; }
@media (max-width: 980px) { .fee-slider { --fee-columns: 2; } }
@media (max-width: 680px) {
  .fee-tabs { grid-template-columns: 1fr; }
  .fee-tab { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .fee-tab:last-child { border-bottom: 0; }
  .fee-tab.is-active { box-shadow: inset 5px 0 0 var(--accent); }
  .fee-tier__head { align-items: flex-start; flex-direction: column; }
  .fee-slider__controls { align-self: stretch; justify-content: space-between; }
  .fee-slider { --fee-columns: 1; grid-auto-columns: 91%; }
}

/* ==========================================================================
   Editorial articles
   The listing rows reuse `.home-forum-card` wholesale rather than getting a
   parallel set of classes. An article and a discussion are the same kind of
   object to a reader — a title, a subject, a byline — so giving them two
   layouts would be inventing a distinction the reader does not have. The
   `--editorial` modifiers change the artwork accent and nothing else, which is
   enough to say "we wrote this" without a second design.
   ========================================================================== */
.home-forum--editorial { background: var(--surface-hi); }
.home-forum-card--editorial .home-forum-card__art { background: var(--yellow); color: var(--on-accent); }
.home-forum-card--editorial .home-forum-card__art::before { border-color: var(--on-accent); }
.home-forum-card--editorial .home-forum-card__art small { color: var(--on-accent); opacity: .62; }
/* Present on listing pages, absent on the homepage: four cards on the homepage
   are a teaser, and a standfirst on each would turn the section into a wall. */
.home-forum-card__standfirst { margin: .3rem 0 .35rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }

/* Section rail. Every section is listed, including empty ones, so the shape of
   what we publish is visible before it is all written. */
.article-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 5vw, 5.5rem); border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.article-sections a { display: grid; gap: .3rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.article-sections a:hover { border-color: var(--ink); transform: translateY(-2px); }
.article-sections strong { color: var(--ink); font-size: .84rem; letter-spacing: -.02em; }
.article-sections span { color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.article-sections a.is-active { border-color: var(--ink); background: var(--accent); }
.article-sections a.is-active strong, .article-sections a.is-active span { color: var(--on-accent); }
/* A section with nothing published is still a link, just a quieter one. */
.article-sections a.is-empty { opacity: .62; }

/* Numbered pager. Newer and Older keep the outer columns because they are the
   two controls used most and the two big enough to hit on a phone; the numbers
   take the middle so archive depth is visible at a glance. */
.article-pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem 1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.article-pager__step { justify-self: start; padding: .55rem .8rem; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: .7rem; font-weight: 820; text-decoration: none; white-space: nowrap; }
.article-pager__step:hover { background: var(--accent); color: var(--on-accent); }
.article-pager__step:last-of-type { justify-self: end; }
/* Kept in the layout rather than removed so the numbers stay centred on the
   first and last page instead of sliding sideways. */
.article-pager__step.is-disabled { border-color: var(--line); color: var(--muted); opacity: .55; }
.article-pager__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.article-pager__page { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: 0 .45rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); font-family: var(--text); font-size: .72rem; font-style: normal; font-weight: 820; font-variant-numeric: tabular-nums; text-decoration: none; }
a.article-pager__page:hover { border-color: var(--ink); background: var(--fill); color: var(--accent); }
/* `--paper` rather than a literal: it is the page background, so it is the light
   value in light mode and the dark value in dark mode, which is exactly the
   contrast an `--ink` fill needs in both. A literal white here rendered the
   current page as dark-on-dark once the theme flipped. */
.article-pager__page.is-current { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.article-pager__gap { min-width: 1.2rem; color: var(--muted); font-size: .72rem; font-weight: 800; text-align: center; }
/* The count is a caption for the numbers, so it sits under them across the full
   width rather than competing for a column. */
.article-pager__of { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--muted); font-family: var(--text); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; }

/* ------------------------------ Article page ------------------------------ */
/* One column, capped for line length. A sidebar was considered and dropped:
   these pieces are read top to bottom, and the "read next" rail at the end does
   the job a sidebar would have done without competing with the prose. */
.article-page { max-width: 820px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem); }
.article-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 0 1.5rem; color: var(--muted); font-size: .66rem; }
.article-crumbs a { color: var(--muted); text-decoration: none; }
.article-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.article-hero { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line-strong); }
.article-hero .kicker a { color: var(--brand); text-decoration: none; }
.article-hero .kicker a:hover { text-decoration: underline; }
.article-hero h1 { margin: .7rem 0 1rem; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 930; letter-spacing: -.055em; line-height: .92; }
.article-hero__standfirst { max-width: 700px; margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; }
.article-byline { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; }
.article-byline__mark { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--on-accent); font-family: var(--display); font-size: 1.05rem; font-weight: 950; letter-spacing: -.06em; }
.article-byline p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.article-byline strong { color: var(--ink); font-size: .78rem; }

/* Prose. Uses the reading face rather than the condensed display face, which is
   built for poster sizes and gets cramped at body-copy sizes. */
.article-body { max-width: 720px; margin-top: 2.2rem; font-family: var(--text); }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { margin: 2.6rem 0 .7rem; font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.05; }
.article-body h3 { margin: 2rem 0 .6rem; font-size: 1.15rem; letter-spacing: -.025em; }
.article-body h4 { margin: 1.6rem 0 .5rem; font-size: 1rem; }
.article-body p { margin: 0 0 1.15rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.article-body a { color: var(--brand); text-underline-offset: .18em; }
.article-body ul, .article-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.article-body li { margin-bottom: .5rem; }
.article-body blockquote { margin: 1.6rem 0; padding: .3rem 0 .3rem 1.1rem; border-left: 3px solid var(--accent-deep); color: var(--ink); font-family: var(--serif); font-size: 1.1rem; font-style: italic; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body code { padding: .1rem .3rem; border-radius: 5px; background: var(--tint); font-size: .88em; }
.article-body pre { margin: 0 0 1.3rem; padding: 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); }
.article-body pre code { padding: 0; background: none; }
.article-body hr { margin: 2.4rem 0; border: 0; border-top: 1px solid var(--line-strong); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.article-body figure { margin: 1.8rem 0; }
.article-body figcaption { margin-top: .5rem; color: var(--muted); font-size: .72rem; }
/* Fee and reward comparisons are tabular. Scrolls rather than reflows on a
   phone: a squeezed comparison table is worse than one you swipe. */
.article-body table { display: block; width: 100%; margin: 0 0 1.4rem; overflow-x: auto; border-collapse: collapse; font-size: .82rem; }
.article-body th, .article-body td { padding: .6rem .7rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body thead th { background: var(--fill); color: var(--on-fill); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }

.article-note { margin-top: 2.8rem; padding: 1.1rem 1.2rem; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--wash); }
.article-note p { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.6; }
.article-note p:last-child { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 0; }
.article-note a { color: var(--brand); font-size: .74rem; font-weight: 780; text-decoration: none; }
.article-note a:hover { text-decoration: underline; }

/* --------------------------- Article editor bits -------------------------- */
/* Publish and save-as-draft sit side by side so the consequence of the click is
   written on the button rather than selected in a dropdown above it. */
.composer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .5rem; }
.auth-field--check label { display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 600; }
.auth-field--check input { width: 17px; height: 17px; accent-color: var(--brand); }

@media (max-width: 760px) {
  .article-sections { padding-inline: 1rem; }
  .article-hero h1 { font-size: 2.5rem; }
  /* Numbers move onto their own full-width row above the two arrows, which then
     split the width. Nine numbers plus two arrows do not fit on one 375px line,
     and wrapping them inside a narrow middle column stacks them one per line. */
  .article-pager { grid-template-columns: 1fr 1fr; }
  .article-pager__pages { grid-column: 1 / -1; grid-row: 1; }
  .article-pager__step { grid-row: 2; }
  .article-pager__of { grid-row: 3; }
  .article-byline { align-items: start; }
}

/* Article visual explainers. Seeded articles use the same diagram as a full
   teaching aid on the detail page and as a cropped preview in every listing.
   Unmapped editor-authored posts continue to use the monogram artwork above. */
.home-forum-card__art--image { display: block; background: var(--wash); }
.home-forum-card__art--image::before { display: none; }
.home-forum-card__art--image img { display: block; width: 100%; height: 112px; object-fit: cover; object-position: center; transition: transform 220ms ease; }
.home-forum-card:hover .home-forum-card__art--image img { transform: scale(1.035); }
.article-visual { margin: 1.6rem 0 0; }
.article-visual img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--wash); box-shadow: var(--shadow-sm); }
.article-visual figcaption { margin-top: .65rem; padding-left: .8rem; border-left: 3px solid var(--accent-deep); color: var(--muted); font-size: .76rem; line-height: 1.55; }
@media (max-width: 760px) {
  .home-forum-card__art--image img { height: 92px; }
  .article-visual { margin-top: 1.25rem; }
  .article-visual figcaption { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-forum-card__art--image img { transition: none; }
  .home-forum-card:hover .home-forum-card__art--image img { transform: none; }
}

/* ---------------------------------------------------------------------------
   Contact widget

   Fixed bottom-right on every page. Sits below the compare tray in the stacking
   order and lifts clear of it when the tray is up, reusing the same `:has()`
   rule and `--tray-height` variable the footer already uses, so the two never
   overlap without any JavaScript coordinating them.
--------------------------------------------------------------------------- */
.contact-widget {
  position: fixed;
  right: clamp(.75rem, 2.5vw, 1.75rem);
  bottom: clamp(.75rem, 2.5vw, 1.75rem);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
body:has(.compare-tray:not([hidden])) .contact-widget { bottom: calc(var(--tray-height) + .75rem); }

.contact-widget__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.05rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--text);
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--stamp);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.contact-widget__toggle:hover { background: var(--surface); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--stamp); }
.contact-widget__toggle:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--stamp); }
.contact-widget__toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Stroke-based like the nav glyphs, so it inherits the link colour and needs no
   per-theme variant. */
.contact-widget__icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-widget__icon .contact-widget__dot { fill: currentColor; stroke: none; }
/* The label is the affordance on a desktop; on a phone the icon carries it and
   the button becomes a circle, which is what the thumb expects down there. */
@media (max-width: 560px) {
  .contact-widget__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .contact-widget__toggle { padding: .85rem; border-radius: 50%; }
}
/* While the panel is open the button is a close control, so it stops shouting. */
.contact-widget__toggle[aria-expanded="true"] { background: var(--surface); }

.contact-panel {
  width: min(23rem, calc(100vw - 1.5rem));
  max-height: min(32rem, calc(100vh - 8rem));
  padding: 1.1rem 1.15rem 1.25rem;
  overflow-y: auto;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--stamp);
  overscroll-behavior: contain;
}
.contact-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.contact-panel__head h2 { margin: .25rem 0 0; font-size: 1.15rem; line-height: 1.2; }
.contact-panel__close {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--wash);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.contact-panel__close:hover { border-color: var(--ink); background: var(--surface-hi); }
.contact-panel__lead { margin: .55rem 0 1rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }

.contact-form { display: grid; gap: .7rem; }
.contact-field { display: grid; gap: .28rem; }
.contact-field label { font-size: .72rem; font-weight: 820; letter-spacing: .02em; }
.contact-field input, .contact-field textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1.5px solid var(--ink);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--text);
  font-size: .85rem;
}
.contact-field textarea { resize: vertical; min-height: 5rem; line-height: 1.45; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.contact-field input[aria-invalid="true"], .contact-field textarea[aria-invalid="true"] { border-color: var(--warn); }
.contact-field small { color: var(--muted); font-size: .66rem; }
.contact-field small:has(> [data-contact-count]) { justify-self: end; font-variant-numeric: tabular-nums; }

.contact-form__submit {
  padding: .75rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-family: var(--text);
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.contact-form__submit:hover:not([disabled]) { background: var(--accent); color: var(--ink); }
.contact-form__submit[disabled] { cursor: progress; opacity: .7; }
.contact-form__note { color: var(--muted); font-size: .64rem; text-align: center; }
.contact-form__status { margin: 0; padding: .55rem .7rem; border-radius: 9px; font-size: .74rem; font-weight: 700; line-height: 1.4; }
.contact-form__status--bad { background: var(--warn-soft); color: var(--warn); }
.contact-form__status--good { background: var(--best-soft); color: var(--best-ink, var(--best)); }
/* Sent: the form is replaced by its own confirmation rather than sitting there
   inviting a second identical message. */
.contact-form.is-sent .contact-field,
.contact-form.is-sent .contact-form__submit,
.contact-form.is-sent .contact-form__note { display: none; }

@media (prefers-reduced-motion: reduce) {
  .contact-widget__toggle { transition: none; }
}

/* ---------------------------------------------------------------------------
   Admin: contact inbox and traffic

   Reuses the existing .admin-* language — same 4-up stat grid, same pill nav,
   same approve/reject buttons — so the new sections read as part of the same
   dashboard rather than a bolted-on panel.
--------------------------------------------------------------------------- */
.admin-traffic { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.admin-traffic__note { margin: 0 0 1.2rem; color: var(--muted); font-family: var(--text); font-size: .76rem; line-height: 1.5; }
.admin-traffic__cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.admin-traffic h3 { margin: 0 0 .8rem; font-size: .74rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.admin-traffic__subhead { margin-top: 1.4rem; }
.admin-traffic h4 { margin: 0 0 .55rem; color: var(--muted); font-size: .62rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }

/* Horizontal bars, sized as a share of the busiest row. Plain CSS widths from a
   server-computed percentage: no charting library, and it degrades to a readable
   list of numbers if the style sheet never loads. */
.admin-bars { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.admin-bars--compact { gap: .35rem; }
.admin-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; gap: .6rem; align-items: center; font-family: var(--text); font-size: .76rem; }
.admin-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-bars__label a { text-decoration: none; }
.admin-bars__label a:hover { text-decoration: underline; }
.admin-bars__track { height: .55rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); overflow: hidden; }
.admin-bars__track i { display: block; height: 100%; background: var(--accent); }
.admin-bars__value { font-variant-numeric: tabular-nums; font-weight: 820; }

/* Vertical day bars: unique visitors are the foreground column, views a lighter
   back column, so both metrics stay readable without a second chart library. */
.admin-daybars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.4rem, 1fr); gap: .45rem; align-items: end; margin: 0 0 1rem; padding: 0; list-style: none; min-height: 9rem; }
.admin-daybars li { display: grid; grid-template-rows: auto 1fr auto; gap: .35rem; align-items: end; min-width: 0; }
.admin-daybars__label { overflow: hidden; color: var(--muted); font-family: var(--text); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-daybars__track { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: .15rem; height: 6.5rem; padding: 0 .1rem; border-bottom: 1px solid var(--line); }
.admin-daybars__track i { display: block; width: .55rem; min-height: 2px; border-radius: 3px 3px 0 0; }
.admin-daybars__views { background: color-mix(in srgb, var(--brand) 35%, transparent); }
.admin-daybars__visitors { background: var(--coral); }
.admin-daybars__value { display: grid; gap: .1rem; font-family: var(--text); text-align: center; }
.admin-daybars__value strong { font-size: .72rem; font-variant-numeric: tabular-nums; }
.admin-daybars__value small { color: var(--muted); font-size: .58rem; font-variant-numeric: tabular-nums; }

.admin-days { width: 100%; border-collapse: collapse; font-family: var(--text); font-size: .76rem; }
.admin-days th { color: var(--muted); font-size: .6rem; font-weight: 820; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.admin-days th, .admin-days td { padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--line); }
.admin-days td:not(:first-child) { font-variant-numeric: tabular-nums; text-align: right; }
.admin-days tr:last-child td { border-bottom: 0; }

.admin-ips { margin-top: 0; padding-top: 0; border-top: 0; }
.admin-ips__list { display: grid; gap: .55rem; }
.admin-ip { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--wash); }
.admin-ip[open] { background: var(--forum-surface); }
.admin-ip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .55rem .9rem; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.admin-ip__head::-webkit-details-marker { display: none; }
.admin-ip__head::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 800; }
.admin-ip[open] > .admin-ip__head::after { content: "–"; }
.admin-ip__who { display: grid; gap: .15rem; min-width: 0; }
.admin-ip__addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; font-weight: 780; letter-spacing: -.01em; }
.admin-ip__place { color: var(--muted); font-family: var(--text); font-size: .72rem; font-weight: 700; }
.admin-ip__meta { display: flex; flex-wrap: wrap; gap: .55rem; color: var(--muted); font-family: var(--text); font-size: .72rem; font-variant-numeric: tabular-nums; }
.admin-ip__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem 1.4rem; align-items: start; padding: 0 .9rem 1rem; }
.admin-ip__client { color: var(--muted); font-family: var(--text); font-size: .68rem; font-weight: 700; }
.admin-ip__source { margin: .7rem 0 0; color: var(--muted); font-family: var(--text); font-size: .7rem; }
.admin-traffic h5 { margin: 0 0 .5rem; color: var(--muted); font-size: .6rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
/* A crawler is not an audience. Dashed edge and a muted body so the eye skips
   them when scanning for people, without hiding them. */
.admin-ip.is-bot { border-style: dashed; opacity: .82; }

/* Here right now. The one panel that is genuinely live — everything else is on
   the 60-second flush — so it sits directly under the tiles. */
.admin-here { margin-top: 1.2rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--wash); }
.admin-here__head h3 { margin: 0 0 .35rem; }
.admin-here__head .admin-traffic__note { margin: 0 0 .8rem; }
.admin-here__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .85rem; }
.admin-here__tally { display: grid; gap: .15rem; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); }
.admin-here__tally small { color: var(--muted); font-size: .58rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.admin-here__tally strong { font-family: var(--display); font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.admin-here__tally.is-bot strong { color: var(--muted); }
.admin-here__list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.admin-here__row { display: grid; grid-template-columns: minmax(9rem, .8fr) minmax(0, 1.6fr); gap: .5rem 1rem; align-items: baseline; padding: .45rem .6rem; border-left: 3px solid var(--coral); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--forum-surface); }
.admin-here__row.is-bot { border-left-color: var(--line-strong); opacity: .78; }
.admin-here__place { display: grid; gap: .1rem; min-width: 0; }
.admin-here__place strong { font-family: var(--text); font-size: .78rem; font-weight: 800; }
.admin-here__place small { color: var(--muted); font-family: var(--text); font-size: .66rem; font-variant-numeric: tabular-nums; }
.admin-here__pages { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-family: var(--text); font-size: .72rem; }
.admin-here__pages a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.admin-here__pages a:hover { border-bottom-style: solid; }

/* Views / visitors / pages, side by side for two windows. A table because the
   comparison is the content: reading three numbers against each other is what
   tells a refresh loop from an audience. */
.admin-quality { margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.admin-quality h3 { margin: 0 0 .45rem; }
.admin-quality .admin-traffic__note { margin: 0 0 .9rem; max-width: 60ch; }
.admin-quality__table { width: 100%; border-collapse: collapse; font-family: var(--text); font-size: .78rem; }
.admin-quality__table thead th { color: var(--muted); font-size: .6rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.admin-quality__table th, .admin-quality__table td { padding: .45rem .6rem .45rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.admin-quality__table thead th:not(:first-child), .admin-quality__table tbody td { text-align: right; font-variant-numeric: tabular-nums; }
.admin-quality__table tbody th { font-weight: 700; }
.admin-quality__table tbody th small { display: block; color: var(--muted); font-size: .64rem; font-weight: 600; }
.admin-quality__table tbody td small { color: var(--muted); font-size: .66rem; }
/* The two rows that answer the question the panel is named after. */
.admin-quality__table tr.is-emphasis { background: var(--wash); }
.admin-quality__table tr.is-emphasis td { font-weight: 820; }
.admin-quality__table tr:last-child th, .admin-quality__table tr:last-child td { border-bottom: 0; }

/* Referrer and client panels, side by side. */
.admin-facets { display: grid; gap: 1.4rem; align-content: start; }
.admin-facet__list { display: grid; gap: .45rem; }
.admin-facet { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--wash); }
.admin-facet[open] { background: var(--forum-surface); }
.admin-facet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .8rem; padding: .55rem .75rem; cursor: pointer; list-style: none; }
.admin-facet__head::-webkit-details-marker { display: none; }
.admin-facet__label { font-family: var(--text); font-size: .78rem; font-weight: 820; }
.admin-facet__meta { display: flex; flex-wrap: wrap; gap: .55rem; color: var(--muted); font-family: var(--text); font-size: .7rem; font-variant-numeric: tabular-nums; }
.admin-facet[open] > .admin-facet__head { border-bottom: 1px solid var(--line); }
.admin-facet .admin-bars { padding: .6rem .75rem .7rem; }
/* Arrivals from an assistant are the newest and least expected channel, so they
   are the one class marked out rather than left to the ordering. */
.admin-facet.is-ai { border-left: 3px solid var(--coral); }
.admin-facet.is-internal, .admin-facet.is-bot { border-style: dashed; }
.admin-facet.is-internal .admin-facet__label, .admin-facet.is-bot .admin-facet__label { color: var(--muted); }

/* Countries, with their addresses folded inside. */
.admin-places { margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.admin-places h3 { margin: 0 0 .45rem; }
.admin-places .admin-traffic__note { margin: 0 0 .9rem; max-width: 78ch; }
.admin-places__list { display: grid; gap: .6rem; }
.admin-place { border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--wash); }
.admin-place[open] { background: var(--forum-surface); }
.admin-place__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .8rem .95rem; cursor: pointer; list-style: none; }
.admin-place__head::-webkit-details-marker { display: none; }
.admin-place__who { display: grid; gap: .2rem; min-width: 0; }
.admin-place__who strong { font-family: var(--display); font-size: 1.02rem; font-weight: 880; letter-spacing: -.02em; }
.admin-place__areas { display: flex; flex-wrap: wrap; gap: .3rem .5rem; color: var(--muted); font-family: var(--text); font-size: .68rem; }
.admin-place__meta { display: flex; flex-wrap: wrap; gap: .6rem; font-family: var(--text); font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 780; }
.admin-place__meta .is-bot { color: var(--muted); font-weight: 600; }
.admin-place__body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem 1.4rem; align-items: start; padding: 0 .95rem .9rem; }
.admin-place__addresses { padding: .9rem .95rem 1rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; }
.admin-place__addresses > h4 { grid-column: 1 / -1; }

/* The flat address list, now collapsed by default. */
.admin-ips > summary { cursor: pointer; list-style: none; }
.admin-ips > summary::-webkit-details-marker { display: none; }
.admin-ips > summary h3 { display: inline; }
.admin-ips > summary::after { content: " +"; color: var(--muted); font-weight: 800; }
.admin-ips[open] > summary::after { content: " –"; }

.admin-enquiries { display: grid; gap: .8rem; margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; padding: 0; list-style: none; }
.admin-enquiry { padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); }
/* An answered enquiry stays readable but stops competing for attention. */
.admin-enquiry.is-handled { border-style: dashed; background: var(--wash); opacity: .78; }
.admin-enquiry__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.admin-enquiry__head strong { display: block; font-size: .92rem; }
.admin-enquiry__head small { color: var(--muted); font-family: var(--text); font-size: .72rem; }
.admin-enquiry__head small a { color: inherit; }
.admin-enquiry__flags { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-enquiry__body { margin: .8rem 0 0; font-family: var(--text); font-size: .86rem; line-height: 1.55; }
.admin-enquiry__body p { margin: 0 0 .6rem; }
.admin-enquiry__body p:last-child { margin-bottom: 0; }
/* The case the whole page exists for: an enquiry that never reached the inbox. */
.admin-enquiry__problem { margin: .8rem 0 0; padding: .6rem .7rem; border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--warn); font-family: var(--text); font-size: .76rem; line-height: 1.5; }
.admin-enquiry__error { display: block; margin-top: .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; opacity: .85; word-break: break-word; }
.admin-enquiry__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.admin-enquiry__actions a, .admin-enquiry__actions button { padding: .5rem .8rem; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--text); font-size: .72rem; font-weight: 820; text-decoration: none; cursor: pointer; }

@media (max-width: 960px) {
  .admin-traffic__cols,
  .admin-ip__cols,
  .admin-place__body { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .admin-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-bars__track { display: none; }
  .admin-daybars { grid-auto-columns: minmax(2rem, 1fr); overflow-x: auto; }
  .admin-here__row { grid-template-columns: 1fr; }
  /* Two windows of figures cannot both keep their own column on a phone, so the
     table scrolls rather than reflowing into an unreadable stack. */
  .admin-quality__table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Admin dashboard: wide layout, live badge, chart
--------------------------------------------------------------------------- */
/* The stat rows stack into one grid on a wide screen instead of three separate
   four-up bands, so a desktop reads as one board rather than three. */
.admin-dash__hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* Live badge. Renders as a plain snapshot label with scripting off, gains the
   pulsing dot only once polling is actually running. */
.admin-live { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-family: var(--text); font-size: .68rem; font-weight: 780; white-space: nowrap; }
.admin-live__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.admin-live.is-live { border-color: var(--best); color: var(--best-ink, var(--best)); }
.admin-live.is-live .admin-live__dot { background: var(--best); animation: admin-pulse 2s ease-in-out infinite; }
.admin-live.is-stalled { border-color: var(--warn); color: var(--warn); }
.admin-live.is-stalled .admin-live__dot { background: var(--warn); }
@keyframes admin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* A figure that just changed. Brief and low-contrast: this is a hint that a
   number moved, not an alert. */
.admin-stats strong.is-changed,
.admin-attention__item strong.is-changed,
.admin-kpis strong.is-changed,
.admin-pulse__grid strong.is-changed { animation: admin-flash 1.1s ease-out; }
@keyframes admin-flash {
  0% { background: var(--accent); box-shadow: 0 0 0 .3rem var(--accent); }
  100% { background: transparent; box-shadow: 0 0 0 .3rem transparent; }
}

.admin-chart { margin: 0; }
.admin-chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: .7rem; color: var(--muted); font-family: var(--text); font-size: .7rem; font-weight: 780; }
.admin-chart__key { display: inline-flex; align-items: center; gap: .35rem; }
.admin-chart__swatch { display: inline-block; width: .8rem; height: .18rem; border-radius: 999px; }
.admin-chart__swatch--views { background: var(--brand); }
.admin-chart__swatch--visitors { background: var(--coral); }
.admin-chart__plot { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .5rem; }
.admin-chart__axis { display: flex; flex-direction: column; justify-content: space-between; height: 220px; color: var(--muted); font-size: .6rem; font-variant-numeric: tabular-nums; text-align: right; }
.admin-chart__stage { position: relative; min-width: 0; }
.admin-chart__svg { width: 100%; height: 220px; overflow: visible; cursor: crosshair; }
.admin-chart__grid { stroke: var(--line); stroke-width: .5; vector-effect: non-scaling-stroke; }
.admin-chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.admin-chart__line--views { stroke: var(--brand); }
.admin-chart__line--visitors { stroke: var(--coral); stroke-dasharray: 4 3; }
.admin-chart__area { fill: var(--brand); opacity: .1; stroke: none; }
.admin-chart__dot { vector-effect: non-scaling-stroke; stroke: var(--surface); stroke-width: .6; transition: r .12s ease; }
.admin-chart__dot--views { fill: var(--brand); }
.admin-chart__dot--visitors { fill: var(--coral); }
.admin-chart__dot.is-active { r: 2.2; }
.admin-chart__crosshair { stroke: var(--ink); stroke-width: .4; stroke-dasharray: 1.5 1.5; opacity: .35; vector-effect: non-scaling-stroke; pointer-events: none; }
.admin-chart__tip { position: absolute; z-index: 2; top: .4rem; left: .4rem; min-width: 8.5rem; padding: .55rem .65rem; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--forum-surface); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 12%, transparent); display: grid; gap: .25rem; font-family: var(--text); font-size: .68rem; pointer-events: none; }
.admin-chart__tip strong { font-size: .72rem; }
.admin-chart__tip span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-chart__tip b { color: var(--ink); font-weight: 820; }
.admin-chart__dates { display: flex; justify-content: space-between; margin-left: 3.1rem; margin-top: .35rem; color: var(--muted); font-family: var(--text); font-size: .62rem; }

@media (prefers-reduced-motion: reduce) {
  .admin-live.is-live .admin-live__dot { animation: none; }
  .admin-stats strong.is-changed,
  .admin-attention__item strong.is-changed,
  .admin-kpis strong.is-changed,
  .admin-pulse__grid strong.is-changed { animation: none; }
  .admin-attention__item:hover { transform: none; }
}
@media (max-width: 680px) {
  .admin-chart__axis, .admin-chart__svg { height: 170px; }
  .admin-chart__dates { margin-left: 3.1rem; }
}

/* ---------------------------------------------------------------------------
   Member activity and admin community records
--------------------------------------------------------------------------- */
.member-activity { grid-column: 1 / -1; margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.member-activity__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.member-activity__head .kicker { margin: 0 0 .35rem; }
.member-activity__head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -.055em; }
.member-activity__note { max-width: 72ch; margin: .7rem 0 1.2rem; color: var(--muted); font-family: var(--text); font-size: .78rem; line-height: 1.55; }
.member-posts { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.member-post { padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); }
.member-post.is-removed { border-style: dashed; background: var(--wash); }
.member-post__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; }
.member-post__head > div { display: grid; gap: .2rem; }
.member-post__head a { text-decoration: none; }
.member-post__head a:hover { text-decoration: underline; }
.member-post__kind { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.member-post__status, .admin-state { align-self: start; padding: .2rem .48rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); color: var(--muted); font-size: .6rem; font-weight: 840; text-transform: capitalize; }
.member-post__meta { margin: .35rem 0 0; color: var(--muted); font-size: .68rem; }
.member-post__excerpt { margin: .7rem 0 0; font-family: var(--text); font-size: .82rem; line-height: 1.5; }
.member-post__decision { margin: .6rem 0 0; padding: .55rem .65rem; border-left: 3px solid var(--brand); background: var(--wash); color: var(--muted); font-size: .72rem; }
.member-post__remove { display: grid; gap: .35rem; margin-top: .85rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.member-post__remove label { color: var(--muted); font-size: .68rem; font-weight: 760; }
.member-post__remove > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.member-post__remove input { min-width: 0; padding: .6rem .7rem; border: 1px solid var(--ink); border-radius: 8px; background: var(--surface); font-family: var(--text); }
.member-post__remove button { padding: .55rem .8rem; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; }

.admin-data { margin-top: clamp(2rem, 4vw, 3rem); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); background: var(--forum-surface); }
.admin-table { width: 100%; min-width: 980px; border-collapse: collapse; font-family: var(--text); font-size: .75rem; }
.admin-table--compact { min-width: 700px; }
.admin-table th { padding: .65rem .75rem; border-bottom: 1px solid var(--ink); background: var(--wash); color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.admin-table td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td > strong, .admin-table td > span, .admin-table td > small { display: block; }
.admin-table td small { margin-top: .2rem; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.admin-state--active, .admin-state--approved { border-color: var(--best); background: var(--best-soft); color: var(--best-ink); }
.admin-state--pending { border-color: var(--amber); background: var(--yellow); color: var(--ink); }
.admin-state--suspended, .admin-state--rejected { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

.admin-member-posts { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.admin-member-posts > li { padding: .9rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); }
.admin-member-posts > li.is-removed { border-style: dashed; opacity: .75; }
.admin-member-posts__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; font-size: .75rem; }
.admin-member-posts__head > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.admin-member-posts__head > span { color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.admin-member-posts__context { margin: .3rem 0 0; color: var(--muted); font-size: .68rem; }
.admin-member-posts > li > p:last-child { margin: .65rem 0 0; font-family: var(--text); font-size: .8rem; line-height: 1.5; }

.removal-queue { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.removal-request { padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); }
.removal-request--approved, .removal-request--rejected { border-style: dashed; background: var(--wash); }
.removal-request__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; }
.removal-request__head > div { display: flex; align-items: center; gap: .55rem; }
.removal-request__head > span { color: var(--muted); font-size: .68rem; }
.removal-request__member { margin: .65rem 0 0; color: var(--muted); font-size: .72rem; }
.removal-request h2 { margin: .55rem 0 0; font-size: 1.1rem; }
.removal-request h2 a { text-decoration: none; }
.removal-request h2 a:hover { text-decoration: underline; }
.removal-request__excerpt { margin: .65rem 0 0; padding: .65rem .75rem; background: var(--wash); font-family: var(--text); font-size: .78rem; line-height: 1.5; }
.removal-request__reason { margin: .65rem 0 0; font-family: var(--text); font-size: .76rem; }
.removal-request__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.removal-request__actions form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.removal-request__actions label { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; font-weight: 760; }
.removal-request__actions label span { font-weight: 500; }
.removal-request__actions input { min-width: 0; padding: .55rem .65rem; border: 1px solid var(--ink); border-radius: 8px; background: var(--surface); }
.removal-request__actions button { padding: .5rem .75rem; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; }
.removal-request__decision { margin: .8rem 0 0; color: var(--muted); font-size: .7rem; font-style: italic; }

@media (max-width: 760px) {
  .member-post__remove > div { grid-template-columns: 1fr; }
  .member-post__remove button { justify-self: start; }
  .removal-request__actions { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Admin: grouped header menus

   Five top-level items instead of eight, with the rest of each group one hover
   away. CSS only: `:hover` for the mouse and `:focus-within` for the keyboard,
   so navigating the admin area never depends on a script having loaded.

   The panel is hidden with `opacity` and `pointer-events` rather than
   `display: none` or `visibility: hidden` — both of those take its links out of
   the tab order, which would mean tabbing off the group label skipped the group
   entirely and `:focus-within` could never fire. Left focusable, the first Tab
   into the panel is what reveals it.
--------------------------------------------------------------------------- */
/* The section links are inside a wrapper span, so the nav's own `gap` applies
   between that wrapper and "Exit admin" — not between the links within it. The
   wrapper has to carry the same gap itself, or every group label runs into the
   next one. */
.desktop-nav__sections {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  gap: clamp(0.55rem, 1.1vw, 1.25rem);
}
.desktop-nav__sections.nav-divider { display: inline-block; }
.admin-menu { position: relative; display: inline-flex; align-items: center; }
/* An inline element rather than an absolutely-positioned pseudo-element: a caret
   hanging outside its own label's box collides with whatever the flex gap puts
   next to it. Inline, it is part of the label and cannot. */
.admin-menu__caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .32rem;
  border: 3.5px solid transparent;
  border-top-color: currentColor;
  opacity: .5;
  vertical-align: middle;
}
.admin-menu__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 90;
  display: grid;
  gap: .1rem;
  min-width: 12rem;
  margin-top: .35rem;
  padding: .45rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--accent-wash);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .14s ease, transform .14s ease;
}
.admin-menu:hover .admin-menu__panel,
.admin-menu:focus-within .admin-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* A hover gap between the label and the panel would close the menu as the
   pointer crossed it. This bridges it without moving the panel. */
.admin-menu__panel::before {
  content: "";
  position: absolute;
  top: -.45rem;
  left: 0;
  right: 0;
  height: .45rem;
}
.desktop-nav .admin-menu__panel a {
  padding: .4rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
/* The header's sliding underline is for the top strip; inside the panel a
   background is the clearer hover. */
.desktop-nav .admin-menu__panel a::after { display: none; }
.desktop-nav .admin-menu__panel a:hover { background: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .admin-menu__panel { transition: none; }
}

/* ---------------------------------------------------------------------------
   Admin: widget cards

   Shared chrome for every dashboard panel — title, info affordance, when it was
   measured, and a link to the detail. One vocabulary so a new widget cannot
   invent its own header.
--------------------------------------------------------------------------- */
.widget-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.4rem); align-items: start; margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.widget { display: grid; align-content: start; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--forum-surface); overflow: hidden; }
/* Widgets that need the full width: the ones carrying a wide table, and the
   headline. The order in the template is what makes the rest pack — the tall
   findings widget sits in the left column with the two narrow ones beside it,
   rather than next to a column of white space. */
.widget--health, .widget--visibility, .widget--pages { grid-column: 1 / -1; }
.widget__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .9rem 1rem .8rem; border-bottom: 1px solid var(--line); }
.widget__title { display: flex; align-items: center; gap: .4rem; margin: 0; font-family: var(--display); font-size: 1rem; font-weight: 880; letter-spacing: -.02em; }
/* A real <abbr>, so the definition is reachable by keyboard and by a screen
   reader rather than being a hover-only decoration. */
.widget__info { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); cursor: help; font-family: var(--text); font-size: .6rem; font-weight: 820; text-decoration: none; }
.widget__info:hover, .widget__info:focus-visible { border-color: var(--ink); background: var(--accent); color: var(--ink); }
.widget__meta { margin: .25rem 0 0; color: var(--muted); font-family: var(--text); font-size: .7rem; }
.widget__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.widget__link { padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-family: var(--text); font-size: .72rem; font-weight: 780; text-decoration: none; white-space: nowrap; }
.widget__link:hover { border-color: var(--ink); background: var(--accent); }
.widget__body { padding: 1rem; }
.widget__subhead { margin: 1.2rem 0 .6rem; color: var(--muted); font-size: .62rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.widget__note { margin: .6rem 0 0; color: var(--muted); font-family: var(--text); font-size: .72rem; line-height: 1.5; }

@media (max-width: 1000px) {
  .widget-grid { grid-template-columns: 1fr; }
  .widget--health, .widget--visibility, .widget--pages { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   SEO dashboard
--------------------------------------------------------------------------- */
:root {
  /* Eight categorical hues for the findings donut, built out from the existing
     brand blue and coral rather than sampled from a generic palette. Every one is
     also labelled with its count in the legend, so colour is never the only
     channel carrying the data. */
  --seo-1: #2f4f9e;
  --seo-2: #e2694c;
  --seo-3: #2f8f83;
  --seo-4: #d99a2b;
  --seo-5: #7a5cc4;
  --seo-6: #4a8f45;
  --seo-7: #c2517f;
  --seo-8: #6b7280;
  --seo-error: #a63c1a;
  --seo-warning: #b8791b;
  --seo-notice: #5d616a;
  --seo-good: #2f8f5b;
}
:root[data-theme="dark"] {
  --seo-1: #93aaf5;
  --seo-2: #e58a72;
  --seo-3: #5fc0b2;
  --seo-4: #e5bb63;
  --seo-5: #a98ae0;
  --seo-6: #7cc275;
  --seo-7: #e086ab;
  --seo-8: #9ca3af;
  --seo-error: #f08a63;
  --seo-warning: #e0b45f;
  --seo-notice: #9aa0ab;
  --seo-good: #6fc994;
}

.admin-dash__aside { display: grid; gap: .6rem; justify-items: end; align-content: start; }
.seo-run { margin: 0; }
.seo-run__button { padding: .5rem .95rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--accent); color: var(--ink); cursor: pointer; font-family: var(--text); font-size: .78rem; font-weight: 820; }
.seo-run__button:hover:not(:disabled) { background: var(--ink); color: var(--surface); }
.seo-run__button:disabled { border-color: var(--line-strong); background: var(--wash); color: var(--muted); cursor: default; }
.seo-empty { margin: 1.2rem 0 0; padding: .9rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--wash); color: var(--ink-soft); font-family: var(--text); font-size: .82rem; line-height: 1.6; }

/* Health: gauge on the left, the counts and the trend on the right. */
.seo-health { display: grid; grid-template-columns: minmax(11rem, .8fr) minmax(0, 1.6fr); gap: 1.2rem 1.6rem; align-items: center; }
.seo-gauge { display: grid; justify-items: center; margin: 0; }
.seo-gauge svg { width: 100%; max-width: 13rem; overflow: visible; }
.seo-gauge__track, .seo-gauge__fill { fill: none; stroke-width: 11; stroke-linecap: round; }
.seo-gauge__track { stroke: var(--line); }
.seo-gauge__fill { stroke: var(--seo-good); transition: stroke-dasharray .5s ease; }
.seo-gauge__fill.is-fair { stroke: var(--seo-4); }
.seo-gauge__fill.is-needs-work { stroke: var(--seo-warning); }
.seo-gauge__fill.is-poor { stroke: var(--seo-error); }
.seo-gauge figcaption { display: grid; justify-items: center; margin-top: -1.6rem; text-align: center; }
.seo-gauge figcaption strong { font-family: var(--display); font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; }
.seo-gauge__unit { margin-top: -1.6rem; color: var(--muted); font-family: var(--display); font-size: .9rem; font-weight: 820; }
.seo-gauge figcaption small { color: var(--muted); font-family: var(--text); font-size: .74rem; font-weight: 780; }
.seo-delta { margin-top: .3rem; font-family: var(--text); font-size: .68rem; font-weight: 780; }
.seo-delta.is-up { color: var(--seo-good); }
.seo-delta.is-down { color: var(--seo-error); }

.seo-health__side { display: grid; gap: .7rem; }
.seo-tiles { display: grid; gap: .5rem; }
.seo-tiles--severity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seo-tiles--channels { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.seo-tile { display: grid; gap: .2rem; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--wash); color: inherit; text-decoration: none; }
.seo-tile small { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--text); font-size: .58rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.seo-tile strong { font-family: var(--display); font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
a.seo-tile:hover { border-color: var(--ink); background: var(--forum-surface); }
.seo-tile.is-error { border-left-color: var(--seo-error); }
.seo-tile.is-error strong { color: var(--seo-error); }
.seo-tile.is-warning { border-left-color: var(--seo-warning); }
.seo-tile.is-notice { border-left-color: var(--seo-notice); }
.seo-tile.is-search { border-left-color: var(--seo-1); }
.seo-tile.is-ai { border-left-color: var(--seo-2); }
.seo-tile.is-social { border-left-color: var(--seo-5); }
.seo-tile.is-referral { border-left-color: var(--seo-3); }
.seo-tile.is-direct { border-left-color: var(--seo-8); }

.seo-stack { display: flex; height: .5rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); overflow: hidden; }
.seo-stack__band.is-error { background: var(--seo-error); }
.seo-stack__band.is-warning { background: var(--seo-warning); }
.seo-stack__band.is-notice { background: color-mix(in srgb, var(--seo-notice) 45%, transparent); }
.seo-spark { width: 100%; height: 3rem; }
.seo-spark__line { fill: none; stroke: var(--seo-good); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.seo-spark__area { fill: color-mix(in srgb, var(--seo-good) 14%, transparent); stroke: none; }

.seo-shape { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; padding: 0 1rem 1rem; }
.seo-shape > div { display: grid; gap: .15rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.seo-shape small { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--text); font-size: .58rem; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.seo-shape strong { font-family: var(--display); font-size: 1.15rem; font-weight: 880; font-variant-numeric: tabular-nums; }

/* Findings: donut plus a legend that carries the numbers as text. */
.seo-issues { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: center; }
.seo-donut { display: grid; place-items: center; margin: 0; }
/* Both children occupy the same cell, so the label is centred on the ring rather
   than on the figure. The figure is wider than the capped SVG, and centring the
   caption on it put the text off to the right of the hole. */
.seo-donut svg { grid-area: 1 / 1; width: 100%; max-width: 10.5rem; transform: rotate(-90deg); }
.seo-donut circle { fill: none; stroke-width: 3.4; }
.seo-donut__track { stroke: var(--line); }
.seo-donut__slice--0 { stroke: var(--seo-1); }
.seo-donut__slice--1 { stroke: var(--seo-2); }
.seo-donut__slice--2 { stroke: var(--seo-3); }
.seo-donut__slice--3 { stroke: var(--seo-4); }
.seo-donut__slice--4 { stroke: var(--seo-5); }
.seo-donut__slice--5 { stroke: var(--seo-6); }
.seo-donut__slice--6 { stroke: var(--seo-7); }
.seo-donut__slice--7 { stroke: var(--seo-8); }
.seo-donut figcaption { grid-area: 1 / 1; display: grid; gap: .1rem; place-content: center; justify-items: center; pointer-events: none; }
.seo-donut figcaption strong { font-family: var(--display); font-size: 1.55rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.seo-donut figcaption small { color: var(--muted); font-family: var(--text); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }

.seo-legend { display: grid; gap: .22rem; margin: 0; padding: 0; list-style: none; }
.seo-legend__row { display: grid; grid-template-columns: .6rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; font-family: var(--text); font-size: .74rem; }
.seo-legend__row.is-clean { color: var(--muted); }
.seo-legend__swatch { width: .6rem; height: .6rem; border-radius: 2px; }
.seo-legend__swatch.seo-donut__slice--0 { background: var(--seo-1); }
.seo-legend__swatch.seo-donut__slice--1 { background: var(--seo-2); }
.seo-legend__swatch.seo-donut__slice--2 { background: var(--seo-3); }
.seo-legend__swatch.seo-donut__slice--3 { background: var(--seo-4); }
.seo-legend__swatch.seo-donut__slice--4 { background: var(--seo-5); }
.seo-legend__swatch.seo-donut__slice--5 { background: var(--seo-6); }
.seo-legend__swatch.seo-donut__slice--6 { background: var(--seo-7); }
.seo-legend__swatch.seo-donut__slice--7 { background: var(--seo-8); }
.seo-legend__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-legend__count { font-variant-numeric: tabular-nums; font-weight: 820; }

/* One finding: what failed, why it matters, and an example. The "why" is not
   optional — a code with a count and no explanation is not actionable. */
.seo-findings { display: grid; gap: .5rem; margin: 0; padding: 0 1rem 1rem; list-style: none; }
.seo-finding { padding: .6rem .75rem; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--wash); }
.seo-finding.is-error { border-left-color: var(--seo-error); }
.seo-finding.is-warning { border-left-color: var(--seo-warning); }
.seo-finding.is-notice { border-left-color: var(--seo-notice); }
.seo-finding__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; }
.seo-finding__head strong { font-family: var(--text); font-size: .82rem; font-weight: 820; }
.seo-finding__badge { padding: .1rem .4rem; border-radius: 999px; background: var(--fill); color: var(--surface); font-family: var(--text); font-size: .56rem; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.seo-finding.is-error .seo-finding__badge { background: var(--seo-error); color: #fff; }
.seo-finding.is-warning .seo-finding__badge { background: var(--seo-warning); color: #fff; }
.seo-finding.is-notice .seo-finding__badge { background: var(--seo-notice); color: #fff; }
.seo-finding__count { margin-left: auto; color: var(--muted); font-family: var(--text); font-size: .7rem; font-variant-numeric: tabular-nums; font-weight: 780; }
.seo-finding__code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; }
.seo-finding__why { margin: .35rem 0 0; color: var(--ink-soft); font-family: var(--text); font-size: .74rem; line-height: 1.55; }
.seo-finding__example { margin: .35rem 0 0; color: var(--muted); font-family: var(--text); font-size: .7rem; overflow-wrap: anywhere; }
.seo-finding__example a { color: inherit; }

.seo-table { margin-top: .2rem; }
.seo-table th:not(:first-child), .seo-table td:not(:first-child) { text-align: right; }
.seo-table__path { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-table__path a { text-decoration: none; }
.seo-table__path a:hover { text-decoration: underline; }
.seo-table td.is-error { color: var(--seo-error); font-weight: 820; }
.seo-table td.is-warning { color: var(--seo-warning); font-weight: 780; }

.seo-coverage { display: grid; gap: .5rem; }
.seo-coverage__figure { display: flex; align-items: baseline; gap: .2rem; }
.seo-coverage__figure strong { font-family: var(--display); font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.seo-coverage__figure span { color: var(--muted); font-family: var(--display); font-size: 1rem; font-weight: 820; }
.seo-coverage__figure small { margin-left: .5rem; color: var(--muted); font-family: var(--text); font-size: .7rem; }
.seo-coverage__bar { height: .55rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); overflow: hidden; }
.seo-coverage__bar i { display: block; height: 100%; background: var(--seo-1); }

.seo-paths { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; font-family: var(--text); font-size: .74rem; }
.seo-paths a { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; }
.seo-paths a:hover { color: var(--ink); text-decoration: underline; }
.seo-count { display: inline-grid; place-items: center; min-width: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: .62rem; font-variant-numeric: tabular-nums; }

.seo-chip { display: inline-block; padding: .1rem .4rem; border-radius: 999px; background: var(--wash); border: 1px solid var(--line-strong); font-family: var(--text); font-size: .6rem; font-weight: 780; white-space: nowrap; }
.seo-chip.is-search { border-color: var(--seo-1); color: var(--seo-1); }
.seo-chip.is-ai { border-color: var(--seo-2); color: var(--seo-2); }
.seo-chip.is-social { border-color: var(--seo-5); color: var(--seo-5); }
.seo-chip.is-referral { border-color: var(--seo-3); color: var(--seo-3); }
.seo-chip.is-internal, .seo-chip.is-direct { color: var(--muted); }
.seo-new { margin-left: .35rem; padding: .05rem .35rem; border-radius: 999px; background: var(--coral); color: var(--on-accent); font-family: var(--text); font-size: .56rem; font-weight: 820; text-transform: uppercase; }

@media (max-width: 760px) {
  .seo-health, .seo-issues { grid-template-columns: 1fr; }
  .seo-tiles--severity { grid-template-columns: 1fr; }
  .admin-dash__aside { justify-items: start; }
  .seo-table { display: block; overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   SEO report
--------------------------------------------------------------------------- */
.seo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.seo-filter { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-family: var(--text); font-size: .76rem; font-weight: 780; text-decoration: none; }
.seo-filter:hover { border-color: var(--ink); }
.seo-filter span { font-variant-numeric: tabular-nums; }
.seo-filter.is-current { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.seo-filter.is-error.is-current { background: var(--seo-error); border-color: var(--seo-error); }
.seo-filter.is-warning.is-current { background: var(--seo-warning); border-color: var(--seo-warning); }
.seo-filters__count { margin-left: auto; color: var(--muted); font-family: var(--text); font-size: .74rem; }

.seo-report { display: grid; gap: .8rem; margin-top: 1.2rem; }
.seo-page { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--forum-surface); scroll-margin-top: 6rem; }
.seo-page__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .8rem .95rem; border-bottom: 1px solid var(--line); }
.seo-page__who { min-width: 0; }
.seo-page__who h2 { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; font-weight: 780; overflow-wrap: anywhere; }
.seo-page__who h2 a { color: inherit; text-decoration: none; }
.seo-page__who h2 a:hover { text-decoration: underline; }
.seo-page__title { margin: .25rem 0 0; color: var(--muted); font-family: var(--text); font-size: .76rem; }
.seo-page__len { color: var(--muted); font-size: .66rem; font-variant-numeric: tabular-nums; }
.seo-page__tally { display: flex; flex-wrap: wrap; gap: .35rem; }
.seo-page__count { padding: .15rem .5rem; border-radius: 999px; font-family: var(--text); font-size: .66rem; font-weight: 820; white-space: nowrap; }
.seo-page__count.is-error { background: var(--seo-error); color: #fff; }
.seo-page__count.is-warning { background: var(--seo-warning); color: #fff; }
.seo-page__count.is-notice { background: var(--wash); border: 1px solid var(--line-strong); color: var(--muted); }
.seo-page__count.is-clean { background: color-mix(in srgb, var(--seo-good) 18%, transparent); color: var(--seo-good); }
.seo-page__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem 1rem; margin: 0; padding: .85rem .95rem; }
.seo-page__facts > div { min-width: 0; }
.seo-page__facts-wide { grid-column: 1 / -1; }
.seo-page__facts dt { color: var(--muted); font-family: var(--text); font-size: .58rem; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.seo-page__facts dd { margin: .15rem 0 0; font-family: var(--text); font-size: .78rem; overflow-wrap: anywhere; }
.seo-page__facts dd.is-error, .seo-page__facts .is-error { color: var(--seo-error); font-weight: 780; }
.seo-page__findings { display: grid; gap: .45rem; margin: 0; padding: 0 .95rem .95rem; list-style: none; }