/* ==========================================================================
   True North Defender — "Dispatch" design system
   --------------------------------------------------------------------------
   An editorial/archival treatment: paper ground, serif display type,
   monospaced micro-labels, hairline rules instead of shadows, and Canadian
   red used as an accent rather than a field. Light and dark are peers —
   every colour is a token, redefined once per theme.
   ========================================================================== */

/* ---------- Web fonts ----------
   Self-hosted so the site makes no third-party request and works offline.
   All three are SIL Open Font License 1.1; see assets/fonts/README.md and
   assets/fonts/OFL-1.1.txt. Only latin and latin-ext ship; latin covers
   U+0000-00FF, which carries the French accents in the data.
   ---------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight: var(--fw-regular) 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: var(--fw-regular) 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-latin-ext.woff2") format("woff2");
  font-weight: var(--fw-regular) 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-latin.woff2") format("woff2");
  font-weight: var(--fw-regular) 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: var(--fw-regular);
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: var(--fw-regular);
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plex-mono-600-latin-ext.woff2") format("woff2");
  font-weight: var(--fw-semibold);
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plex-mono-600-latin.woff2") format("woff2");
  font-weight: var(--fw-semibold);
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks. Measured against the real faces at 100px:
   Newsreader is 102.9% of Georgia, Public Sans 105.2% of Arial, and
   IBM Plex Mono 109.1% of Consolas. Scaling the fallback to match means the
   line breaks in roughly the same place before and after the swap, so text
   does not reflow as the fonts land. */

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 102.9%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 105.2%;
}

@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Consolas"), local("DejaVu Sans Mono"), local("Courier New");
  size-adjust: 109.1%;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  /* Ground and surfaces */
  --paper: #f7f5f0;
  --bg: var(--paper);
  --bg-soft: #edeae2;
  --surface: #ffffff;
  --card: var(--surface);
  --surface-2: #f1eee7;

  /* Ink */
  --text: #15181d;
  --text-muted: #5b6068;
  --text-faint: #676d75;

  /* Rules */
  --rule: #ded8cc;
  --border: var(--rule);
  --rule-strong: #c6bfb0;

  /* Accent — maple red */
  --red: #b3121f;
  --red-btn: #b3121f;
  --red-btn-hover: #8d0c17;
  --red-hover: #8d0c17;
  --red-text: #ffffff;
  --link: #a5101c;
  --accent-wash: #f7e9e8;

  /* Status */
  --ok: #1c6b34;
  --info: #17558f;
  --warn: #86590c;

  /* Ink band (footer, deep panels) — shared by both themes */
  --band: #14171c;
  --band-deep: #0d1014;
  --band-text: #eceae5;
  --band-muted: #9aa1aa;

  /* Hero */
  --hero-from: #14171c;
  --hero-to: #14171c;
  --hero-text: #f4f2ed;
  --hero-muted: #a8afb8;

  /* Type — self-hosted, so what you design is what every visitor sees. The
     stack previously resolved to Palatino on Windows, Iowan on macOS and a
     generic serif everywhere else, which meant the identity was whatever the
     operating system happened to own. */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-ui: "Public Sans", "Public Sans Fallback", system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Consolas,
    monospace;

  /* Geometry */
  --radius: 4px;
  --radius-lg: 8px;
  --container: 1140px;

/* ---------- Type scale ----------
   Eleven steps, and nothing off them. Before this the stylesheet carried 46
   distinct rem sizes including 0.92, 0.93, 0.94, 0.95, 0.96 and 0.97 — six
   values inside a single pixel, none of which anyone could see. Each step
   below is a real, visible increment.

   Line height and letter-spacing get the same treatment: four heights for
   four jobs, and one tracking value for the uppercase mono labels that
   previously used six.
   ---------------------------------------------------------------- */

  --fs-micro: 0.6875rem;   /* 11px — mono eyebrows, status chips */
  --fs-label: 0.75rem;     /* 12px — table headers, cite lines */
  --fs-caption: 0.8125rem; /* 13px — meta, footnotes, keys */
  --fs-small: 0.875rem;    /* 14px — nav, secondary UI, panel notes */
  --fs-body-s: 0.9375rem;  /* 15px — dense body: cards, panels, tables */
  --fs-body: 1rem;         /* 16px — reading text */
  --fs-lead: 1.125rem;     /* 18px — card headings, lead paragraphs */
  --fs-h3: 1.375rem;       /* 22px */
  --fs-h2: 1.625rem;       /* 26px */
  --fs-h1: 2rem;           /* 32px */
  --fs-display: 2.5rem;    /* 40px — page titles, hero */

  --lh-flat: 1;            /* icons and single-line controls */
  --lh-tight: 1.2;         /* display headings */
  --lh-snug: 1.35;         /* subheads, card titles, dense table cells */
  --lh-body: 1.6;          /* interface text */
  --lh-prose: 1.7;         /* long-form reading */

  --ls-label: 0.12em;      /* uppercase mono labels — the one tracking value */
  --ls-display: -0.015em;  /* large headings, optical correction */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Measure and tracks ----------
     One reading width, applied everywhere prose appears. The stylesheet
     previously carried 52, 55, 68, 70 and 72ch caps and left some blocks
     uncapped entirely — the occupation note ran to 139 characters a line on
     30 pages, nearly double everything around it.

     Heading caps (18-24ch) are deliberately NOT on this scale: they exist to
     balance a two-line title, which is a different job from setting a
     comfortable reading width. */

  --measure: 66ch;         /* body prose */
  --measure-narrow: 52ch;  /* lead paragraphs, where the type is larger */

  /* Card grid minimums. Eight arbitrary values became four steps, chosen so
     every existing grid keeps the column count it was tuned for. */
  --track-sm: 150px;
  --track-md: 200px;
  --track-lg: 250px;
  --track-xl: 300px;
}

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

  --paper: #0e1116;
  --bg-soft: #161b22;
  --surface: #151a21;
  --surface-2: #1c232c;

  --text: #e7e9ec;
  --text-muted: #a3abb5;
  --text-faint: #828b96;

  --rule: #262e39;
  --rule-strong: #38424f;

  --red: #e23c48;
  --red-btn: #c9202c;
  --red-btn-hover: #e0303d;
  --red-hover: #f2606a;
  --red-text: #ffffff;
  --link: #f0626c;
  --accent-wash: #2a1519;

  --ok: #4cb96a;
  --info: #6fa8e6;
  --warn: #d9a441;

  --band: #090c10;
  --band-deep: #06080b;
  --band-text: #e7e9ec;
  --band-muted: #98a0aa;

  --hero-from: #171d25;
  --hero-to: #171d25;
  --hero-text: #eef0f3;
  --hero-muted: #a3abb5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #0e1116;
    --bg-soft: #161b22;
    --surface: #151a21;
    --surface-2: #1c232c;

    --text: #e7e9ec;
    --text-muted: #a3abb5;
    --text-faint: #828b96;

    --rule: #262e39;
    --rule-strong: #38424f;

    --red: #e23c48;
    --red-btn: #c9202c;
    --red-btn-hover: #e0303d;
    --red-hover: #f2606a;
    --link: #f0626c;
    --accent-wash: #2a1519;

    --ok: #4cb96a;
    --info: #6fa8e6;
    --warn: #d9a441;

    --band: #090c10;
    --band-deep: #06080b;

    --hero-from: #171d25;
    --hero-to: #171d25;
    --hero-text: #eef0f3;
    --hero-muted: #a3abb5;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-prose);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text);
}

/* A serif at 32px and up does not need the weight a 14px label does — the size
   is already the emphasis. The system stack could not express this, because it
   only ever had one usable weight; the variable faces can. */
h1,
h2 {
  font-weight: var(--fw-medium);
}

h1 { font-size: clamp(var(--fs-h1), 4.6vw, var(--fs-display)); }
h2 { font-size: clamp(var(--fs-h2), 2.6vw, var(--fs-h1)); }
h3 { font-size: var(--fs-lead); }

a {
  color: var(--link);
  text-decoration: none;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; }

::selection { background: var(--red-btn); color: #ffffff; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* Monospaced micro-label — the connective tissue of the whole design */
.kicker,
.equip-status,
.trade-fact-label,
.dash-tile-label,
.search-group,
.pay-range-label,
.pay-step-label,
.forecast-when,
.stat-label,
.post-meta,
.branch-trade-tag,
.compare-count,
.milestone-tag,
.trade-area-count,
.equip-relation-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  /* Uppercase, tracked and mono is already loud. Medium keeps these legible
     without letting every label compete with the heading above it. */
  font-weight: var(--fw-medium);
}

.kicker { color: var(--red); }

/* ---------- Accessibility ---------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--red-btn);
  color: #ffffff;
  padding: 0.65rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: var(--fw-semibold);
  transition: top 0.15s ease;
}

.skip-link:focus { top: 0; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main:focus { outline: none; }

body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Masthead ---------- */

.utility-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

/* The flag stripe: a red hairline across the top of every page */
.utility-bar::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--red);
}

.utility-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 68px;
  padding-block: 0.55rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  margin-right: auto;
}

.brand:hover { text-decoration: none; }

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.2rem;
}

.utility-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
}

.utility-links a,
.dropdown-toggle {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius);
  position: relative;
}

.utility-links a:hover,
.dropdown-toggle:hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}

/* Current section is marked by a red rule beneath the label, not a fill */
.utility-links a[aria-current="page"],
.dropdown-toggle[aria-current="page"] {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.utility-links a[aria-current="page"]::after,
.dropdown-toggle[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.12rem;
  height: 2px;
  background: var(--red);
}

/* ---------- Nav dropdown ---------- */

.nav-dropdown { position: relative; }

.dropdown-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.dropdown-toggle .caret {
  font-size: var(--fs-micro);
  transition: transform 0.15s ease;
  color: var(--text-faint);
}

.dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
  padding: 0.35rem;
  list-style: none;
  display: none;
  z-index: 70;
}

.nav-dropdown.open .dropdown-menu { display: block; }

.dropdown-menu a {
  display: block;
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-small);
  color: var(--text);
  border-radius: 3px;
}

.dropdown-menu a:hover {
  background: var(--surface-2);
  color: var(--link);
  text-decoration: none;
}

.dropdown-menu a:focus-visible { outline-offset: -2px; }

/* ---------- Theme switch ---------- */

.theme-switch {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 28px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.34rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-switch.is-dark { background: var(--band); }

.switch-icon {
  font-size: var(--fs-label);
  line-height: var(--lh-flat);
  z-index: 1;
  transition: opacity 0.2s ease;
}

.switch-sun { color: #b8860b; }
.switch-moon { color: #cbd3dd; opacity: 0.45; }
.theme-switch.is-dark .switch-sun { opacity: 0.35; }
.theme-switch.is-dark .switch-moon { opacity: 1; }

.switch-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  transform: translateY(-50%);
  transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.theme-switch.is-dark .switch-knob {
  transform: translate(22px, -50%);
  background: #2b333d;
}

.theme-switch:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Search trigger ---------- */

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.search-trigger:hover { border-color: var(--rule-strong); color: var(--text); }

.search-trigger svg { width: 15px; height: 15px; flex-shrink: 0; }

.search-trigger-key {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 0.3rem;
  color: var(--text-faint);
  background: var(--bg-soft);
}

/* ---------- Mobile nav toggle ---------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.55rem;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
}

/* ---------- Announcement strip ---------- */

.strip {
  background: var(--band);
  color: var(--band-text);
  font-size: var(--fs-caption);
}

.strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
}

.strip-inner > a {
  color: var(--band-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.strip-inner > a::before {
  content: "New";
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #ffffff;
  background: var(--red-btn);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.strip .chev { color: var(--band-muted); }

.strip-close {
  background: none;
  border: 0;
  color: var(--band-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-flat);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.strip-close:hover { color: var(--band-text); background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-pill,
.btn-solid,
.btn-outline,
.digest-btn,
.equiv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  padding: 0.62rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-pill:hover,
.btn-solid:hover,
.btn-outline:hover,
.digest-btn:hover,
.equiv-btn:hover { text-decoration: none; }

/* Solid — one per view, reserved for the primary action */
/* --red-btn is a touch deeper than --red so white label text clears AA on it
   in both themes; --red stays the brighter accent used for rules and type. */
.btn-pill,
.btn-solid,
.digest-btn {
  background: var(--red-btn);
  border-color: var(--red-btn);
  color: #ffffff;
}

.btn-pill:hover,
.btn-solid:hover,
.digest-btn:hover {
  background: var(--red-btn-hover);
  border-color: var(--red-btn-hover);
  color: #ffffff;
}

/* Secondary actions in the same row read as hairline buttons */
.slide-actions .btn-pill + .btn-pill {
  background: transparent;
  border-color: color-mix(in srgb, var(--hero-text) 35%, transparent);
  color: var(--hero-text);
}

.slide-actions .btn-pill + .btn-pill:hover {
  background: color-mix(in srgb, var(--hero-text) 12%, transparent);
  border-color: var(--hero-text);
}

.btn-outline,
.equiv-btn {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--text);
}

.btn-outline:hover,
.equiv-btn:hover {
  border-color: var(--red);
  color: var(--link);
  background: var(--accent-wash);
}

/* ==========================================================================
   Section rhythm — every band gets the same eyebrow-rule-title structure
   ========================================================================== */

main { padding-bottom: 4rem; }

.branch-section,
.news,
.finder,
.digest,
.profile,
.info-cards,
.stats-band,
.faq,
.prose,
.trade-tool,
.rank-tool,
.equip-tool,
.equip-dash,
.equip-forecast {
  margin-top: 4rem;
}

.branch-section > h2,
.news > h2,
.finder h2,
.faq h2 {
  position: relative;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(var(--fs-h3), 2.2vw, var(--fs-h2));
}

/* The red tick above each section heading */
.branch-section > h2::before,
.news > h2::before,
.finder h2::before,
.faq h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--red);
}

.branch-lede,
.section-lede,
.finder-hint,
.panel-note {
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  margin-top: 0.55rem;
  max-width: var(--measure);
}

.section-heading { font-size: var(--fs-h2); }

/* Page mastheads on interior pages */
.page-head {
  padding-top: 3.25rem;
  margin-top: 0;
}

.page-head h1 {
  font-size: clamp(var(--fs-h1), 4.2vw, var(--fs-display));
  max-width: 20ch;
}

.page-head h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--red);
  margin-top: 1.1rem;
}

.page-head p {
  color: var(--text-muted);
  margin-top: 1.1rem;
  font-size: var(--fs-body);
  max-width: var(--measure);
}

/* ==========================================================================
   Featured block (homepage hero / 404 / about intro)
   ========================================================================== */

.featured { margin-top: 2.5rem; }

.featured-card {
  position: relative;
  background: var(--hero-from);
  color: var(--hero-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}

/* Corner rules — the "dossier" frame */
.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 3;
}

.featured-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 3px;
  background: var(--red);
  z-index: 3;
}

.slide {
  display: none;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  min-height: 400px;
}

.slide.is-active { display: grid; }

.slide-text {
  padding: 3.25rem 3rem 3.25rem 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
}

.slide-text .kicker {
  color: var(--red);
  filter: brightness(1.45);
}

.slide-text h1,
.slide-text h2 {
  color: var(--hero-text);
  font-size: clamp(var(--fs-h1), 3.4vw, var(--fs-display));
  max-width: 18ch;
}

.slide-sub {
  color: var(--hero-muted);
  font-size: var(--fs-body);
  max-width: var(--measure-narrow);
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.35rem;
}

/* A faint plotted grid behind the mark — the archive's graph-paper ground */
.slide-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: var(--hero-to);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

/* Vignette so the grid fades out at the edges rather than stopping dead */
.slide-media:not(.slide-media-thumb)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 25%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
}

.slide-media img {
  position: relative;
  z-index: 1;
  width: 168px;
  height: auto;
}

/* Video-thumbnail variant fills its half of the panel */
.slide-media-thumb { padding: 0; }

.slide-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

/* Carousel controls — small hairline squares, bottom-right */
.slide-prev,
.slide-next,
.slide-pause {
  position: absolute;
  bottom: 1.1rem;
  z-index: 4;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: var(--hero-text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.slide-pause { right: 1.1rem; }
.slide-next { right: 3.4rem; }
.slide-prev { right: 5.7rem; }

.slide-prev:hover,
.slide-next:hover,
.slide-pause:hover {
  background: var(--red);
  border-color: var(--red);
}

.slide-prev:focus-visible,
.slide-next:focus-visible,
.slide-pause:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.dots {
  display: flex;
  gap: 0.35rem;
  margin-top: 1rem;
  justify-content: center;
}

.dot {
  width: 26px;
  height: 24px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dot::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--rule-strong);
  border-radius: 2px;
  transition: background 0.15s ease;
}

.dot.is-active::before { background: var(--red); }

/* ==========================================================================
   Cards — one card treatment reused everywhere
   ========================================================================== */

.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--track-lg), 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.equip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.35rem;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* The accent tick that appears on hover, top-left */
.equip-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 3px;
  background: var(--red);
  transition: width 0.2s ease;
}

.equip-card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  text-decoration: none;
}

.equip-card:hover::before { width: 56px; }

.equip-card h3 {
  font-size: var(--fs-lead);
  color: var(--text);
}

.equip-card:hover h3 { color: var(--link); }

.equip-type {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.equip-branch {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.card-stat {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Status chips */
.equip-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.equip-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.equip-status-in-service { color: var(--ok); }
.equip-status-entering { color: var(--info); }
.equip-status-sunset { color: var(--warn); }
.equip-status-incoming { color: var(--link); }

.equip-relation {
  font-size: var(--fs-small);
  color: var(--text-muted);
  border-top: 1px dashed var(--rule);
  padding-top: 0.6rem;
  margin-top: 0.2rem;
}

.equip-relation-label {
  display: block;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

/* Info cards — two or three across, used at the foot of most pages */
.info-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.info-cards-three { grid-template-columns: repeat(3, 1fr); }

/* Row-wrap rather than a column: headings and copy claim a full row, so any
   run of buttons after them lines up side by side instead of stacking. */
.info-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-flow: row wrap;
  gap: 0.6rem;
  align-items: flex-start;
  align-content: flex-start;
}

.info-card > h2,
.info-card > p,
.info-card > .prose { flex: 0 0 100%; }

.info-card h2 { font-size: var(--fs-lead); }

.info-card p {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

.info-card .prose { margin-top: 0; }

/* ==========================================================================
   Prose
   ========================================================================== */

.prose > * { max-width: var(--measure); }

.prose h2 {
  font-size: var(--fs-h2);
  margin-top: 2.4rem;
}

.prose h3 {
  font-size: var(--fs-lead);
  margin-top: 1.8rem;
}

.prose p {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.prose p + p { margin-top: 0.9rem; }

.prose ul {
  margin-top: 0.9rem;
  padding-left: 1.15rem;
  color: var(--text-muted);
}

.prose li + li { margin-top: 0.4rem; }

.post-meta {
  color: var(--text-faint);
  margin-top: 1rem;
}

/* ==========================================================================
   Stats band
   ========================================================================== */

/* The band is itself a .container, so the frame lives on each tile — that
   keeps its edges lined up with the body text above and below it. */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--track-md), 1fr));
  gap: 1rem;
}

.stat-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  text-align: left;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 0.6rem;
  color: var(--text-muted);
}

.stats-asof {
  grid-column: 1 / -1;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

/* ==========================================================================
   FAQ / disclosure
   ========================================================================== */

.faq-item {
  border-bottom: 1px solid var(--rule);
  background: none;
}

.faq-item:first-of-type { border-top: 1px solid var(--rule); }

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 2.5rem 1.05rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--link); }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  color: var(--red);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p,
.faq-item ul,
.faq-item ol {
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  padding-bottom: 1.15rem;
  max-width: var(--measure);
}

.faq-item ol,
.faq-item ul { padding-left: 1.3rem; }

.faq-item li + li { margin-top: 0.35rem; }

/* ==========================================================================
   Trade finder (homepage)
   ========================================================================== */

.finder {
  background: var(--bg-soft);
  border-block: 1px solid var(--rule);
  padding-block: 3.25rem;
}

.finder h2 { border-top: 0; padding-top: 0; }
.finder h2::before { display: none; }

.finder-search { margin-top: 1.25rem; max-width: 520px; }

.finder-search input,
.trade-search input,
.rank-search input,
.digest-form input,
.pay-picker select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}

.finder-search input::placeholder,
.trade-search input::placeholder,
.rank-search input::placeholder,
.digest-form input::placeholder { color: var(--text-faint); }

.finder-search input:focus,
.trade-search input:focus,
.rank-search input:focus,
.pay-picker select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.finder-results {
  list-style: none;
  margin-top: 1rem;
  max-width: 640px;
}

.finder-results li {
  border-bottom: 1px solid var(--rule);
  padding: 0.15rem 0;
}

.finder-results a {
  display: block;
  padding: 0.6rem 0.2rem;
  color: var(--text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
}

.finder-results a:hover { color: var(--link); text-decoration: none; }

.finder-meta {
  display: block;
  padding: 0 0.2rem 0.6rem;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.finder-results .no-match {
  padding: 0.75rem 0.2rem;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  border-bottom: 0;
}

.all-link { margin-top: 1.5rem; }

.all-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
  color: var(--link);
}

.chev-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-caption);
  line-height: var(--lh-flat);
}

/* ==========================================================================
   Video list / tabs
   ========================================================================== */

.tabs {
  display: flex;
  gap: 0.35rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  margin-bottom: -1px;
}

.tab:hover { color: var(--text); }

.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--red);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.news-list {
  list-style: none;
  margin-top: 1.75rem;
}

.news-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.35rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.news-list li:first-child { border-top: 1px solid var(--rule); }

.news-thumb {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  aspect-ratio: 16 / 9;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.news-thumb:hover img { transform: scale(1.04); }

.news-thumb .play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 16, 0.28);
  color: #ffffff;
  transition: background 0.15s ease;
}

.news-thumb:hover .play-badge { background: rgba(179, 18, 31, 0.45); }

.play-badge svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.news-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.news-body time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.news-body h3 {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.news-body h3 a { color: var(--text); }
.news-body h3 a:hover { color: var(--link); text-decoration: none; }

.news-note {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  max-width: var(--measure);
}

.panel-note { font-size: var(--fs-small); }

/* ==========================================================================
   Profile + contact
   ========================================================================== */

.profile {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
}

.profile-person,
.profile-contact {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2rem;
}

.profile-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-person h2,
.profile-contact h2 { font-size: var(--fs-h3); }

.profile-person p,
.profile-contact p {
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  margin-top: 0.7rem;
  max-width: var(--measure-narrow);
}

.profile-person > a {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
}

.profile-contact > a {
  display: inline-block;
  margin-top: 0.7rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
  word-break: break-word;
}

.social-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.35rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.social-icons a:hover { color: var(--link); border-color: var(--red); }

.social-icons svg { width: 20px; height: 20px; }

/* Milestones / boards / link columns (secondary layouts) */

.social-milestones,
.link-columns,
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--track-lg), 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.milestones-col h2,
.link-col h2,
.board-col h2 { font-size: var(--fs-lead); margin-bottom: 0.9rem; }

.milestones,
.board-list,
.link-col ul { list-style: none; }

.milestones li,
.board-list li {
  display: flex;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.board-list li:first-child { border-top: 1px solid var(--rule); }

.milestone-date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-align: center;
  color: var(--text-faint);
  flex-shrink: 0;
  line-height: var(--lh-snug);
}

.milestone-date .day { display: block; font-size: var(--fs-lead); color: var(--text); }
.milestone-date .month { display: block; text-transform: uppercase; }
.milestone-date .year { display: block; }

.milestone-body { min-width: 0; font-size: var(--fs-body-s); }
.milestone-body a { font-weight: var(--fw-semibold); }

.milestone-tag,
.board-list .board-tag {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.link-col ul a,
.board-list a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
}

.link-col ul a:hover,
.board-list a:hover { color: var(--link); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--band);
  color: var(--band-muted);
  border-top: 3px solid var(--red);
  margin-top: 5rem;
  padding-block: 2.25rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer-inner > span {
  font-size: var(--fs-caption);
  max-width: var(--measure);
  line-height: var(--lh-body);
}

/* Wraps, because this list grows. It held three links when it was written and
   holds six now, and without wrapping the sixth pushed the whole page 113px
   wider than a 360px phone — the entire site scrolled sideways because of the
   footer. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  list-style: none;
}

.footer-links a {
  color: var(--band-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.footer-links a:hover { color: var(--red-hover); }

/* ==========================================================================
   Back to top
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 55;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
  cursor: pointer;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.back-to-top:hover { border-color: var(--red); color: var(--link); }

/* ==========================================================================
   Modals — video lightbox and the shared detail panel
   ========================================================================== */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(8, 10, 13, 0.78);
  backdrop-filter: blur(3px);
  padding: 5vh 1.25rem 1.25rem;
  overflow-y: auto;
  justify-content: center;
  align-items: flex-start;
}

.lightbox.is-open { display: flex; }

.lightbox-inner {
  position: relative;
  width: min(960px, 100%);
}

.lightbox-frame {
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lightbox-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lightbox-close,
.rank-close {
  position: absolute;
  top: -2.6rem;
  right: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  color: #ffffff;
  font-size: var(--fs-lead);
  line-height: var(--lh-flat);
  cursor: pointer;
}

.lightbox-close:hover,
.rank-close:hover { background: var(--red); border-color: var(--red); }

.lightbox-yt {
  position: absolute;
  top: -2.5rem;
  left: 0;
  color: #ffffff;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.lightbox-yt:hover { color: var(--red-hover); }

/* The detail panel shared by ranks, trades and equipment */
.lightbox-panel {
  position: relative;
  width: min(720px, 100%);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 2.25rem;
  color: var(--text);
  max-height: 88vh;
  overflow-y: auto;
}

.lightbox-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 3px;
  background: var(--red);
  border-radius: var(--radius-lg) 0 0 0;
}

.lightbox-panel h2 {
  font-size: var(--fs-h2);
  padding-right: 2.5rem;
}

.lightbox-panel .kicker + h2 { margin-top: 0.35rem; }

.lightbox-panel h3 {
  font-size: var(--fs-body);
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.lightbox-panel .rank-body,
.rank-body {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
}

.rank-body ul { padding-left: 1.2rem; margin-top: 0.7rem; }
.rank-body li + li { margin-top: 0.35rem; }

/* Close button inside the light panel needs dark-on-light treatment */
.lightbox-panel .rank-close,
.lightbox-panel .lightbox-close {
  top: 1rem;
  right: 1rem;
  color: var(--text-muted);
  border-color: var(--rule);
}

.lightbox-panel .rank-close:hover,
.lightbox-panel .lightbox-close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.pay-header {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1.25rem;
}

.pay-green { color: var(--ok); font-weight: var(--fw-semibold); }

.rank-hint {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-top: 0.75rem;
}

.rank-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  background: none;
  border: 0;
  color: var(--link);
  cursor: pointer;
  padding: 0;
}

.rank-link:hover { text-decoration: underline; }

/* ==========================================================================
   Controls shared by the reference tools
   ========================================================================== */

.seg {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.seg-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.seg-btn + .seg-btn { border-left: 1px solid var(--rule); }

.seg-btn:hover { background: var(--surface-2); color: var(--text); }

.seg-btn.is-active {
  background: var(--red-btn);
  color: #ffffff;
}

.seg-btn:focus-visible { outline-offset: -3px; }

@media (max-width: 560px) {
  .seg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .seg-btn { border-left: 0 !important; border-top: 1px solid var(--rule); }
  .seg-btn:nth-child(-n + 2) { border-top: 0; }
  .seg-btn:nth-child(even) { border-left: 1px solid var(--rule) !important; }
}

/* ==========================================================================
   Pay lookup (pay.html)
   ========================================================================== */

.pay-tool { margin-top: 2.5rem; }

.pay-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
}

.pay-picker label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  flex: 1 1 220px;
}

.pay-picker select { cursor: pointer; }

.pay-result {
  margin-top: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.pay-result h2 { font-size: var(--fs-h2); margin-top: 0.3rem; }

.pay-equivalents { margin-top: 1.75rem; }

.pay-equivalents h3 {
  font-size: var(--fs-body);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.equiv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.equiv-btn {
  padding: 0.45rem 0.8rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Rank comparison table (ranks.html)
   ========================================================================== */

.rank-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

.rank-search { flex: 1 1 260px; min-width: 0; }

.rank-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
  min-width: 720px;
}

.rank-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-weight: var(--fw-semibold);
}

.rank-table td,
.rank-table tbody th {
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0.9rem;
  vertical-align: middle;
  text-align: left;
}

.rank-table tbody tr:last-child td,
.rank-table tbody tr:last-child th { border-bottom: 0; }

.rank-row:hover { background: var(--bg-soft); }

.rank-nato {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--text-faint);
  white-space: nowrap;
}

/* Officer and NCM blocks read as two ladders, not one continuous list */
.rank-row-ncm .rank-nato { color: var(--info); }
.rank-row-officer .rank-nato { color: var(--red); }

.rank-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.rank-cell:hover {
  border-color: var(--rule-strong);
  background: var(--surface-2);
}

.rank-cell:hover .rank-cell-name { color: var(--link); }

.rank-cell-name { font-weight: var(--fw-semibold); font-size: var(--fs-body-s); line-height: var(--lh-snug); }

.rank-cell-abbr {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.rank-none,
.rank-empty {
  color: var(--text-faint);
  font-size: var(--fs-small);
  text-align: center;
}

.rank-none { padding: 1.5rem; }

.rank-pay {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.rank-pay-gic { color: var(--text-faint); font-size: var(--fs-small); }

.rank-pay-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.rank-pay-btn:hover { border-color: var(--rule-strong); background: var(--surface-2); }

.rank-pay-figure {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.rank-pay-hint { font-size: var(--fs-micro); color: var(--text-faint); }
.rank-pay-btn:hover .rank-pay-hint { color: var(--link); }

.rank-modal-equiv { margin-top: 1.5rem; }
.rank-modal-equiv h3 { font-size: var(--fs-body); }

@media (max-width: 700px) {
  .rank-table td, .rank-table tbody th { padding: 0.5rem 0.65rem; }
  .rank-controls { flex-direction: column; align-items: stretch; }
}

/* ---------- Pay breakdown inside the rank modal ---------- */

.pay-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
}

.pay-range-end {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: center;
}

.pay-range-label { display: block; color: var(--text-faint); }

.pay-range-val {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-top: 0.3rem;
}

.pay-range-sub { font-size: var(--fs-caption); color: var(--text-muted); }

.pay-range-arrow {
  width: 34px;
  height: 1px;
  background: var(--rule-strong);
  position: relative;
}

.pay-range-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  border-left: 7px solid var(--rule-strong);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

@media (max-width: 560px) {
  .pay-range { grid-template-columns: 1fr; }
  .pay-range-arrow { display: none; }
}

.pay-steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 1.1rem;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.pay-step {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  padding: 0.6rem 0.9rem;
}

.pay-step-label { color: var(--text-faint); }

.pay-step-val {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.pay-step-sub { font-size: var(--fs-label); color: var(--text-muted); }

.pay-scale {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-top: 0.75rem;
  overflow: hidden;
}

.pay-scale-summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem 0.7rem 1.9rem;
}

.pay-scale-summary::-webkit-details-marker { display: none; }

.pay-scale-summary::before {
  content: "\25B8";
  position: absolute;
  left: 0.8rem;
  color: var(--red);
  transition: transform 0.15s ease;
}

.pay-scale[open] > .pay-scale-summary::before { transform: rotate(90deg); }
.pay-scale-summary:hover { background: var(--bg-soft); }
.pay-scale-summary:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }

.pay-scale-name { font-weight: var(--fw-semibold); font-size: var(--fs-body-s); }
.pay-scale-meta { font-size: var(--fs-label); color: var(--text-faint); }
.pay-scale.is-specialist .pay-scale-name { color: var(--info); }
.pay-scale .pay-steps { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--rule); }

.lightbox-panel .pay-note,
.lightbox-panel .pay-scale-note {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-top: 0.9rem;
}

.lightbox-panel .pay-source { font-size: var(--fs-caption); color: var(--text-faint); }

/* ==========================================================================
   Equipment reference (equipment.html)
   ========================================================================== */

.equip-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* The tag box shares the filter row and takes whatever width is left over */
.equip-tags {
  position: relative;
  flex: 1 1 300px;
  min-width: 260px;
}

.tag-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
  min-height: 46px;
}

.tag-box:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.tag-selected { display: contents; }

#equip-tag-input {
  flex: 1 1 160px;
  min-width: 120px;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  color: var(--text);
  padding: 0.25rem;
}

#equip-tag-input:focus { outline: none; }
#equip-tag-input::placeholder { color: var(--text-faint); }

.tag-chip,
.compare-chip,
.trade-kit-chip,
.branch-trade-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: var(--fs-caption);
  color: var(--text);
  cursor: pointer;
}

.tag-chip:hover,
.compare-chip:hover,
.branch-trade-chip:hover { border-color: var(--red); text-decoration: none; }

.tag-chip .tag-x { color: var(--text-faint); font-size: var(--fs-small); line-height: var(--lh-flat); }
.tag-chip:hover .tag-x { color: var(--link); }

.tag-suggestions {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
  padding: 0.3rem;
}

.tag-suggestions[hidden] { display: none; }

.tag-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
  cursor: pointer;
}

.tag-option:hover,
.tag-option.is-active { background: var(--surface-2); color: var(--link); }

.tag-count,
.equip-taglist {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.equip-taglist { margin-top: 0.75rem; }

.equip-empty {
  margin-top: 2rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}

/* ---------- Dashboard ---------- */

.equip-dash { margin-top: 2.5rem; }

/* Flex, not grid, because the tile count varies by page and a grid leaves a
   dead cell showing the seam whenever the last row is short. Flex items on a
   short row grow to close it. */
.dash-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.dash-tile {
  flex: 1 1 var(--track-sm);
  background: var(--surface);
  padding: 1.15rem 1.2rem;
  border-left: 3px solid transparent;
}

.dash-tile-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.dash-tile-label {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}

.dash-tile.equip-status-in-service { border-left-color: var(--ok); }
.dash-tile.equip-status-entering { border-left-color: var(--info); }
.dash-tile.equip-status-sunset { border-left-color: var(--warn); }
.dash-tile.equip-status-incoming { border-left-color: var(--link); }

.dash-tile.equip-status-in-service .dash-tile-val { color: var(--ok); }
.dash-tile.equip-status-entering .dash-tile-val { color: var(--info); }
.dash-tile.equip-status-sunset .dash-tile-val { color: var(--warn); }
.dash-tile.equip-status-incoming .dash-tile-val { color: var(--link); }

/* Status tiles inherit the chip colours; the dot marker does not apply here */
.dash-tile.equip-status::before { display: none; }

.dash-tile.is-zero { opacity: 0.5; }
.dash-tile.is-zero .dash-tile-val { color: var(--text-muted); }

.dash-splits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--track-xl), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.dash-block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.4rem;
}

.dash-block h3 {
  font-size: var(--fs-body-s);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.9rem;
}

.dash-bars { display: flex; flex-direction: column; gap: 0.5rem; }

.dash-bar {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr auto;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-small);
}

.dash-bar-label { color: var(--text); }

.dash-bar-track {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 2px;
  overflow: hidden;
}

.dash-bar-fill {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: 2px;
}

.dash-bar-fill.is-zero { background: transparent; }

.dash-bar-val {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dash-origin-head { font-size: var(--fs-small); margin-bottom: 0.7rem; color: var(--text-muted); }

.dash-origin-head strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--red);
}

.dash-origin-track { display: block; width: 100%; }

.dash-origin-note { font-size: var(--fs-caption); color: var(--text-faint); margin-top: 0.6rem; }

/* ---------- What's coming ---------- */

.equip-forecast h2 { font-size: var(--fs-h3); }

.forecast-list {
  list-style: none;
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.forecast-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.forecast-item:last-child { border-bottom: 0; }

.forecast-when { color: var(--red); }

.forecast-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.forecast-name { font-weight: var(--fw-semibold); font-size: var(--fs-body-s); color: var(--text); }
.forecast-name:hover { color: var(--link); }

.forecast-meta { font-size: var(--fs-caption); color: var(--text-faint); }

@media (max-width: 620px) {
  .forecast-item { grid-template-columns: 1fr; gap: 0.3rem; }
  .dash-bar { grid-template-columns: minmax(4rem, 6rem) 1fr auto; gap: 0.5rem; }
}

/* ---------- Comparison ---------- */

.equip-cell { position: relative; display: flex; }
.equip-cell .equip-card { width: 100%; padding-bottom: 2.9rem; }

.equip-compare {
  position: absolute;
  left: 1.25rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
}

.equip-compare input { accent-color: var(--red); width: 0.95rem; height: 0.95rem; }
.equip-compare input:disabled { cursor: not-allowed; }
.equip-compare:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.equip-cell.is-comparing .equip-card { border-color: var(--red); }
.equip-cell.is-comparing .equip-card::before { width: 56px; }
.equip-cell.is-comparing .equip-compare { color: var(--link); }

.compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--band);
  color: var(--band-text);
  border-top: 3px solid var(--red);
  padding: 0.85rem 0;
}

.compare-bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.compare-count { color: var(--band-muted); }

.compare-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: 1; }

.compare-chip {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--band-text);
}

.compare-chip::after { content: "\00d7"; opacity: 0.7; }

.compare-open[disabled] { opacity: 0.5; cursor: not-allowed; }

.compare-clear {
  background: none;
  border: 0;
  color: var(--band-muted);
  font-size: var(--fs-small);
  cursor: pointer;
  text-decoration: underline;
}

.compare-clear:hover { color: var(--band-text); }

body.has-compare-bar { padding-bottom: 5.5rem; }

.compare-panel { width: min(920px, 100%); }
.compare-table-wrap { overflow-x: auto; margin-top: 1.25rem; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.compare-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule-strong);
}

.compare-table td,
.compare-table tbody th {
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0.8rem;
  vertical-align: top;
  text-align: left;
}

.compare-table tbody th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.compare-table tbody tr:last-child td { border-bottom: 0; }

.compare-specs { list-style: none; }

.compare-specs li {
  position: relative;
  padding-left: 0.9rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.compare-specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
}

@media (max-width: 620px) {
  .compare-bar-inner { gap: 0.6rem; }
  .compare-count { width: 100%; }
  body.has-compare-bar { padding-bottom: 9.5rem; }
}

/* ==========================================================================
   Site-wide search overlay
   ========================================================================== */

.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(8, 10, 13, 0.7);
  backdrop-filter: blur(3px);
  padding: 8vh 1.25rem 1.25rem;
  justify-content: center;
  align-items: flex-start;
}

.search-overlay.is-open { display: flex; }

.search-panel {
  width: min(640px, 100%);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.search-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--text-faint); }

.search-input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--text);
  min-width: 0;
}

.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--text-faint); }

.search-close {
  background: none;
  border: 0;
  color: var(--text-faint);
  font-size: var(--fs-h3);
  line-height: var(--lh-flat);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.search-close:hover { color: var(--text); }

.search-results { overflow-y: auto; padding: 0.4rem; }

.search-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--text-faint);
  padding: 0.75rem 0.7rem 0.4rem;
}

.search-group-more { font-weight: var(--fw-medium); letter-spacing: var(--ls-label); }

.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  color: var(--text);
}

.search-row:hover,
.search-row.is-active { background: var(--surface-2); text-decoration: none; }

.search-row.is-active .search-row-title { color: var(--link); }

.search-row-main { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.search-row-title { font-weight: var(--fw-semibold); font-size: var(--fs-body-s); }
.search-row-sub { font-size: var(--fs-caption); color: var(--text-muted); }

.search-row-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
}

.search-none {
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
}

.search-hint {
  display: flex;
  gap: 1.25rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--bg-soft);
  font-size: var(--fs-label);
  color: var(--text-faint);
}

.search-hint kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0 0.25rem;
  margin-right: 0.15rem;
}

@media (max-width: 760px) {
  .search-trigger-key { display: none; }
  .search-trigger-text { display: none; }
  .search-trigger { padding: 0.45rem; }
  .search-overlay { padding: 4vh 0.6rem 0.6rem; }
  .search-hint { display: none; }
  .search-row { padding: 0.7rem; }
}

/* ==========================================================================
   Trades & occupations (trades.html)
   ========================================================================== */

.trade-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

.trade-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.45rem 0.75rem;
  background: var(--surface);
}

.trade-check input { accent-color: var(--red); width: 1rem; height: 1rem; }

.trade-search { flex: 1 1 240px; min-width: 0; }

.trade-flag,
.trade-flag-note { color: var(--red); font-weight: var(--fw-semibold); }

/* Areas of work — category cards that double as the category filter */

.trade-areas-head {
  font-size: var(--fs-lead);
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.trade-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--track-md), 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.trade-area {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s ease;
}

.trade-area:hover { border-color: var(--rule-strong); }

.trade-area.is-active {
  border-color: var(--red);
  background: var(--accent-wash);
}

.trade-area.is-active .trade-area-name { color: var(--link); }

.trade-area-name { font-weight: var(--fw-semibold); font-size: var(--fs-small); line-height: var(--lh-snug); }

.trade-area-count { color: var(--text-faint); font-size: var(--fs-micro); }

.trade-area.is-empty { opacity: 0.45; }

.trade-grid { margin-top: 1.5rem; }

.trade-card.is-featured { border-left: 3px solid var(--red); }

/* Facts strip at the top of the detail panel */

/* Same treatment as the dashboard tiles: the fact count differs per entity,
   so the strip flexes and the last row fills itself. */
.trade-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.25rem;
}

.trade-fact {
  flex: 1 1 var(--track-sm);
  background: var(--surface);
  padding: 0.85rem 1rem;
}

.trade-fact-label { display: block; color: var(--text-faint); }

.trade-fact-val {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  margin-top: 0.3rem;
}

.trade-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

/* The note that leads a trade panel, ahead of the borrowed summary.
   Capped as a block rather than only its text: this is the most valuable
   writing on the site and it was setting 139 characters to the line, roughly
   double the prose beneath it. Narrowing the whole panel keeps its left edge
   aligned with the body copy instead of leaving a full-width tint with short
   lines floating inside it. */
.trade-note {
  background: var(--accent-wash);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.15rem;
  margin-top: 1.35rem;
  max-width: var(--measure);
}

/* --link rather than --red: this label sits on the tinted wash, not the page
   background, and in dark mode --red only reaches 4.08:1 against it at 11px.
   --link is the accent already tuned to stay readable as text in both themes,
   and in light the two reds are visually indistinguishable. */
.trade-note-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--link);
  display: block;
  margin-bottom: 0.35rem;
}

.trade-note-body { font-size: var(--fs-body-s); color: var(--text); }

/* Kit chips — the trade-to-equipment join */

.trade-kit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.trade-kit-chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  color: var(--text-muted);
}

.trade-kit-chip:hover { border-color: var(--red); color: var(--text); }
.trade-kit-name { font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--text); }
.trade-kit-type { font-size: var(--fs-label); color: var(--text-faint); }

@media (max-width: 620px) {
  .trade-filters { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Branch and CAF overview pages
   ========================================================================== */

.branch-stats { margin-top: 1.5rem; }
.branch-grid { margin-top: 1.5rem; }

.branch-card { display: block; }
.branch-card:hover h3 { color: var(--link); }

.branch-trade-key {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-top: 1rem;
}

.branch-trade-group { margin-top: 1.6rem; }

.branch-trade-cat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-body);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
}

.branch-trade-count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  letter-spacing: var(--ls-label);
}

.branch-trade-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
  list-style: none;
}

.branch-trade-chip { color: var(--text-muted); font-size: var(--fs-caption); }
.branch-trade-chip:hover { color: var(--link); }

.branch-trade-tag { color: var(--red); font-size: var(--fs-micro); }

/* CAF overview cards keep their stat rule pinned to the bottom */
/* Four across at full width so a set of four never strands one on its own row */
.caf-element-grid { grid-template-columns: repeat(auto-fit, minmax(var(--track-lg), 1fr)); }
.caf-element-grid .equip-card { height: 100%; }
.caf-element-grid .equip-type { font-size: var(--fs-body-s); }

.caf-role-card { padding-bottom: 1.5rem; cursor: default; }
.caf-role-card:hover { transform: none; border-color: var(--rule); }
.caf-role-card:hover::before { width: 0; }

/* Values read as label-and-definition pairs rather than stat tiles */
.caf-values .trade-fact { padding: 1.1rem 1.2rem; }
.caf-values .trade-fact-val { font-size: var(--fs-body-s); font-weight: var(--fw-medium); color: var(--text-muted); }

.branch-lede + .board-list { margin-top: 1rem; }

/* ==========================================================================
   Forced colours (Windows High Contrast)
   ========================================================================== */

@media (forced-colors: active) {
  .utility-links a[aria-current="page"]::after,
  .dropdown-toggle[aria-current="page"]::after,
  .equip-card::before,
  .utility-bar::before { forced-color-adjust: none; background: Highlight; }

  .play-badge svg { fill: ButtonText; }

  .btn-solid,
  .btn-pill,
  .digest-btn { border: 1px solid ButtonText; }

  .seg-btn.is-active { border: 2px solid Highlight; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .info-cards,
  .info-cards-three,
  .profile { grid-template-columns: 1fr; }

  .slide { grid-template-columns: 1fr; }

  .slide-text { padding: 2.5rem 2rem 2rem; }

  .slide-media {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    order: -1;
    padding: 1.75rem;
  }

  .slide-media-thumb { padding: 0; max-height: 260px; }
  .slide-media img { width: 120px; }
  .slide-media-thumb img { max-height: 260px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; order: 4; }

  /* Keep brand, search, theme and the menu button on one row; the links
     unfurl underneath when the menu opens. */
  .utility-inner { flex-wrap: wrap; gap: 0.5rem; }
  .search-trigger { order: 2; }
  .theme-switch { order: 3; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-name { font-size: var(--fs-body); }

  .utility-links {
    display: none;
    order: 10;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--rule);
    padding-block: 0.5rem;
  }

  .utility-bar.open .utility-links { display: flex; }

  .utility-links a,
  .dropdown-toggle {
    display: block;
    width: 100%;
    padding: 0.7rem 0.35rem;
    font-size: var(--fs-body-s);
    text-align: left;
  }

  .utility-links a[aria-current="page"]::after,
  .dropdown-toggle[aria-current="page"]::after { left: 0.35rem; right: auto; width: 24px; }

  .nav-dropdown { width: 100%; }

  .dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--rule);
    border-radius: 0;
    margin-left: 0.4rem;
    padding-left: 0.5rem;
    min-width: 0;
  }

  .nav-dropdown.open .dropdown-menu { display: block; }

  .dropdown-menu a { padding: 0.55rem 0.4rem; }

  .brand-sub { display: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 1.15rem; }

  .news-list li { grid-template-columns: 1fr; gap: 0.85rem; }
  .news-thumb { max-width: 320px; }

  .slide-text { padding: 2rem 1.35rem 1.75rem; }
  .slide-prev, .slide-next, .slide-pause { bottom: auto; top: 0.75rem; }
  .slide-pause { right: 0.75rem; }
  .slide-next { right: 3rem; }
  .slide-prev { right: 5.25rem; }

  .digest-box { padding: 2rem 1.35rem; }
  .profile-person, .profile-contact, .info-card { padding: 1.35rem; }
  .lightbox-panel { padding: 1.6rem 1.25rem 1.75rem; }
  .stat-item { padding: 1.25rem 1.1rem; }
}

/* ==========================================================================
   Print — the reference tables are the reason anyone prints this site
   ========================================================================== */

@media print {
  .utility-bar,
  .strip,
  .search-trigger,
  .theme-switch,
  .back-to-top,
  .compare-bar,
  .slide-prev,
  .slide-next,
  .slide-pause,
  .dots,
  .digest,
  .lightbox,
  .search-overlay { display: none !important; }

  body { background: #ffffff; color: #000000; }

  .rank-table-wrap { overflow: visible; border: 0; }
  .rank-table { min-width: 0; font-size: 10pt; }
  .rank-table thead th { position: static; }

  a { color: #000000; text-decoration: none; }

  .equip-card,
  .info-card,
  .dash-block,
  .stat-item { break-inside: avoid; }
}

/* ==========================================================================
   Generated entity pages (trades/, equipment/, ranks/)
   ========================================================================== */

/* Breadcrumb — an ordered list because the steps are a hierarchy, styled flat
   so it reads as a trail rather than as numbered content. */
.crumbs {
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.crumbs li { display: flex; align-items: center; gap: 0.5rem; }

.crumbs li + li::before {
  content: "/";
  color: var(--rule-strong);
}

.crumbs a { color: var(--text-faint); }
.crumbs a:hover { color: var(--link); }
.crumbs [aria-current="page"] { color: var(--text-muted); }

/* Entity pages are made of many short sections, so the site-wide 4rem rhythm
   leaves them looking stranded. Tighten it without touching the browse pages. */
.entity .branch-section,
.entity .info-cards {
  margin-top: 2.75rem;
}

.entity .page-head {
  padding-top: 1.75rem;
}

.entity .page-head h1 {
  max-width: 24ch;
}

/* The facts strip sits directly under the heading rule, so it needs less air
   above it than a standalone section would. */
.entity .page-head .trade-facts {
  margin-top: 1.75rem;
}

/* The facts strip is data, not prose, so it ignores the reading measure its
   parent imposes and runs the full width of the page. */
.entity .page-head .trade-facts {
  max-width: none;
}

/* Source line under a trade note — the note makes a claim, this says where it
   can be checked and when it was last looked at. */
/* --text-faint clears 4.5:1 on the page background but only reaches 4.42 on
   the note's tinted wash, and this is 11px text. Muted instead — the tint is
   what separates the block, so the cite line does not need to be fainter too. */
.trade-note-cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.trade-note-cite a { color: var(--link); }

/* ---------- Glossary ---------- */

.glossary-list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 0 2rem;
}

.glossary-term {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}

.glossary-name { font-weight: var(--fw-semibold); font-size: var(--fs-body-s); }

.glossary-full {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.glossary-def {
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  max-width: var(--measure);
}

.glossary-link {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .glossary-list { grid-template-columns: 1fr; gap: 0; }
  .glossary-term { border-top: 1px solid var(--rule); padding-bottom: 0.2rem; }
  .glossary-def { border-top: 0; padding-top: 0.3rem; }
}

/* ---------- Change log ---------- */

.log-list {
  list-style: none;
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.log-entry {
  display: grid;
  grid-template-columns: minmax(0, 8rem) 1fr;
  gap: 0.4rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
}

.log-date {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.log-body { min-width: 0; }

.log-body h3 { font-size: var(--fs-body); margin-top: 0.35rem; }

.log-body p {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  max-width: var(--measure);
}

/* The kind of change is the point, so it is a chip rather than prose. A
   correction should be as visible as a new feature, not quieter. */
.log-kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.log-correction .log-kind { background: var(--accent-wash); color: var(--link); }
.log-feature .log-kind { background: var(--bg-soft); color: var(--ok); }

@media (max-width: 640px) {
  .log-entry { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ---------- Bases ---------- */

.base-card { cursor: default; }
.base-card:hover { transform: none; border-color: var(--rule); }
.base-card:hover::before { width: 0; }

.base-location {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-faint);
}

.base-units {
  font-size: var(--fs-small);
  color: var(--text-muted);
  border-top: 1px dashed var(--rule);
  padding-top: 0.7rem;
  margin-top: 0.3rem;
}

.base-units-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}

.base-trains {
  border-top: 1px dashed var(--rule);
  padding-top: 0.7rem;
  margin-top: 0.3rem;
}

.base-trains .trade-kit { margin-top: 0; gap: 0.35rem; }
.base-trains .trade-kit-chip { padding: 0.3rem 0.6rem; }

/* A base with a lot of tenant units shouldn't stretch its whole row. */
#bases-list .equip-grid { grid-template-columns: repeat(auto-fill, minmax(var(--track-xl), 1fr)); align-items: start; }

/* ==========================================================================
   Touch targets
   ========================================================================== */

/* Pointer-based rather than width-based: a small laptop should not get
   thumb-sized controls, and a large phone should. Anything a finger has to
   hit gets at least ~40px of height, which the carousel dots (24px) and the
   filter buttons (31px) were both under. */
@media (pointer: coarse) {
  .dot {
    height: 40px;
    width: 34px;
  }

  .seg-btn {
    padding-block: 0.7rem;
  }

  .strip-close,
  .search-close,
  .lightbox-close,
  .rank-close {
    min-width: 40px;
    min-height: 40px;
  }

  /* The checkbox itself stays small; the label around it is the target. */
  .trade-check,
  .equip-compare {
    padding-block: 0.6rem;
  }
}

/* compare.html — grouped lists of occupations. The table reuses .compare-table
   from the equipment comparison modal and the tiles reuse .dash-tile, so the
   only new rules here are the ones the grouped lists actually need. */

.group-count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.cmp-blurb {
  max-width: var(--measure);
  margin: 0.35rem 0 0.8rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Occupation names are short, so a wrapping column list reads faster than one
   name per line down the page. */
.cmp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: var(--track-md);
  column-gap: 1.5rem;
}

.cmp-list li {
  break-inside: avoid;
  padding: 0.2rem 0;
  font-size: var(--fs-body-s);
}

.compare-table .cmp-sub {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}

.compare-table .cmp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* operations.html reuses the equipment status chip. Three states rather than
   four, mapped onto the same colour tokens: running is good, ending is a
   warning, concluded is muted. */
.equip-status-active { color: var(--ok); }
.equip-status-winding-down { color: var(--warn); }
.equip-status-concluded { color: var(--text-faint); }

/* Copy 3 visual adaptation: retain the complete site's layouts and content. */
:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-soft: #f6f6f4;
  --card: #ffffff;
  --border: #e3e2de;
  --text: #1c1d21;
  --text-muted: #5d6167;
  --link: #a8181e;
  --red: #c1272d;
  --red-hover: #a8181e;
  --red-text: #ffffff;

  --band: #101218;
  --band-deep: #06070a;
  --band-text: #e8e6e1;
  --band-muted: #9aa0a8;

  /* Status colors — dark enough for AA contrast on white */
  --ok: #1e7a33;
  --info: #1c5da6;
  --warn: #8a5f10;

  --hero-from: #c1272d;
  --hero-to: #5f1013;
  --hero-text: #ffffff;
  --hero-muted: #f7e3e4;

  --radius: 12px;
  --radius-lg: 24px;
  --container: 1100px;
}

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

  --bg: #08090c;
  --bg-soft: #101218;
  --card: #12141b;
  --border: #23262f;
  --text: #e8e6e1;
  --text-muted: #9aa0a8;
  --link: #e05a60;
  --red: #c1272d;
  --red-hover: #d8353c;

  /* Lighter status colors for AA contrast on dark cards */
  --ok: #3ab455;
  --info: #5b9be0;
  --warn: #c98f2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #08090c;
    --bg-soft: #101218;
    --card: #12141b;
    --border: #23262f;
    --text: #e8e6e1;
    --text-muted: #9aa0a8;
    --link: #e05a60;
    --red: #c1272d;
    --red-hover: #d8353c;

    --ok: #3ab455;
    --info: #5b9be0;
    --warn: #c98f2a;
  }
}

/* ---------- Rank details (branch pages) ---------- */

.rank-hint {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-top: 0.4rem;
}

.rank-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--link);
  cursor: pointer;
  text-align: left;
}

.rank-link:hover {
  text-decoration: underline;
}

.lightbox-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem 2rem;
}

.lightbox-panel h2 {
  font-size: 1.25rem;
  padding-right: 2.5rem;
}

.lightbox-panel .rank-body {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.rank-body ul {
  margin: 0.5rem 0 0.5rem 1.4rem;
}

.rank-body li + li {
  margin-top: 0.3rem;
}

.pay-header {
  display: block;
  margin-top: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.pay-green {
  color: var(--ok);
  font-weight: 600;
}

.rank-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.rank-close:hover {
  background: var(--border);
}

/* ---------- Pay lookup tool ---------- */

.pay-tool {
  margin-top: 2.5rem;
  max-width: calc(72ch + 3rem);
}

.seg {
  display: inline-flex;
  /* Never clip options. Without this the pill hides whatever does not fit,
     which silently cut labels like "Aircraft" and "Being replaced" on
     narrow screens. */
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.seg-btn {
  background: none;
  border: none;
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.seg-btn + .seg-btn {
  border-left: 1px solid var(--border);
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.is-active {
  background: var(--red);
  color: var(--red-text);
}

/* Wrapped inside a single pill outline the group reads as a broken blob, so
   below this width each option becomes its own chip. */
@media (max-width: 620px) {
  .seg {
    border: none;
    border-radius: 0;
    overflow: visible;
    gap: 0.4rem;
  }

  .seg-btn {
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .seg-btn + .seg-btn { border-left: 1px solid var(--border); }
  .seg-btn.is-active { border-color: var(--red); }
}

.pay-picker {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.pay-picker label {
  font-weight: 600;
  font-size: 0.95rem;
}

.pay-picker select {
  flex: 1;
  max-width: 420px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
}

.pay-picker select:focus {
  border-color: var(--red);
  outline: none;
}

.pay-result {
  margin-top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem 2rem;
}

.pay-result .kicker {
  color: var(--text-muted);
}

.pay-result h2 {
  margin-top: 0.35rem;
  font-size: 1.35rem;
}

.pay-result .rank-body {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.pay-equivalents {
  margin-top: 1.5rem;
}

.pay-equivalents h3 {
  font-size: 1rem;
}

.equiv-links {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.equiv-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.equiv-btn:hover {
  border-color: var(--red);
  background: var(--red);
  color: var(--red-text);
}

/* Rank comparison table (ranks.html)                */
/* ------------------------------------------------ */

.rank-tool {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  /* Matches .pay-tool and .equip-tool so the three tool pages line up. */
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

.rank-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.rank-search {
  flex: 1 1 260px;
  min-width: 0;
}

.rank-search input {
  width: 100%;
  padding: 0.65rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.rank-search input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(193, 39, 45, 0.18);
}

/* The table is wide by nature — let it scroll inside its own box rather
   than pushing the page sideways. */
.rank-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.rank-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.rank-table th,
.rank-table td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.rank-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-soft);
  white-space: nowrap;
}

.rank-table tbody tr:last-child th,
.rank-table tbody tr:last-child td {
  border-bottom: 0;
}

.rank-row:hover { background: var(--bg-soft); }

/* Officer and NCM blocks read as two ladders, not one continuous list. */
.rank-row-ncm .rank-nato { color: var(--info); }
.rank-row-officer .rank-nato { color: var(--red); }

.rank-nato {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  margin: -0.35rem -0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rank-cell:hover {
  border-color: var(--red);
  background: var(--bg);
}

.rank-cell-name {
  font-weight: 600;
  line-height: 1.25;
}

.rank-cell-abbr {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.rank-empty,
.rank-none {
  color: var(--text-muted);
}

.rank-none {
  padding: 1.6rem 1rem;
  text-align: center;
}

.rank-pay {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ok);
}

.rank-pay-gic {
  font-weight: 400;
  font-size: 0.85rem;
  white-space: normal;
  color: var(--text-muted);
}

/* Kicker sits directly above the rank title in the modal — give the pair the
   same rhythm as .pay-result. */
.lightbox-panel .kicker + h2 {
  margin-top: 0.35rem;
}

.rank-modal-equiv {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.rank-modal-equiv h3 {
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
}

@media (max-width: 620px) {
  .rank-table th,
  .rank-table td { padding: 0.6rem 0.75rem; }
  .rank-controls { flex-direction: column; align-items: stretch; }

}

/* Pay breakdown — the monthly-pay cell opens a range explainer */

.rank-pay-btn {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  margin: -0.35rem -0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rank-pay-btn:hover { border-color: var(--red); background: var(--bg); }

.rank-pay-figure {
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank-pay-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.rank-pay-btn:hover .rank-pay-hint { color: var(--link); }

/* Range endpoints, side by side */
.pay-range {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
}

.pay-range-end {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pay-range-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pay-range-val {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.pay-range-sub { font-size: 0.82rem; color: var(--text-muted); }

.pay-range-arrow {
  align-self: center;
  width: 1.6rem;
  height: 2px;
  background: var(--border);
  position: relative;
  flex: 0 0 auto;
}

.pay-range-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border-left: 7px solid var(--border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Per-level steps, when real figures have been entered */
.pay-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0 1.2rem;
}

.pay-step {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pay-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pay-step-val {
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.pay-step-sub { font-size: 0.78rem; color: var(--text-muted); }

.lightbox-panel .pay-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

.lightbox-panel .pay-source { font-size: 0.82rem; }

.lightbox-panel h3 {
  font-size: 0.95rem;
  margin: 1.3rem 0 0.2rem;
}

@media (max-width: 620px) {
  .pay-range-arrow { display: none; }
}



/* Collapsible pay scales inside the pay breakdown */

.pay-scale {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.7rem;
  background: var(--card);
}

.pay-scale-summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}

.pay-scale-summary::-webkit-details-marker { display: none; }

/* Disclosure caret, rotated when open */
.pay-scale-summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.pay-scale[open] > .pay-scale-summary::before { transform: rotate(90deg); }

.pay-scale-summary:hover { background: var(--bg-soft); }
.pay-scale-summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

.pay-scale-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.pay-scale-meta {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pay-scale.is-specialist .pay-scale-name { color: var(--info); }

.pay-scale .pay-steps { margin: 0; padding: 0 0.9rem 0.9rem; }

.lightbox-panel .pay-scale-note {
  margin: 0 0.9rem 0.6rem;
  font-size: 0.85rem;
}

:root {
  --paper: var(--bg);
  --surface: var(--card);
  --surface-2: var(--bg-soft);
  --rule: var(--border);
  --font-display: var(--font-ui);
}
.rank-pay-btn { align-items: flex-start; }
.rank-pay-figure { font-family: var(--font-ui); font-size: 0.95rem; }
.rank-cell-name, .pay-range-val, .pay-scale-name { font-family: var(--font-ui); }
.rank-search { flex-basis: auto; }
.pay-scale-summary { min-height: 44px; }
.rank-close { min-width: 40px; min-height: 40px; }
@media (max-width: 620px) {
  .rank-search { flex: 1 1 auto; }
  .lightbox-panel, .pay-result { padding: 1.5rem 1rem; }
  .pay-picker { flex-wrap: wrap; }
  .pay-picker select { min-width: 0; width: 100%; }
}
@media print {
  .rank-table-wrap { overflow: visible; border: 0; }
  .rank-table { min-width: 0; font-size: 10pt; }
}
/* Reset the newer layout's disclosure positioning for Copy 3's inline caret. */
.pay-scale-summary::before { position: static; }
.pay-step { align-items: flex-start; justify-content: flex-start; }
.pay-steps { background: transparent; }