/* NYPD Officer Info, round 7 (2026-10-15).
   Bright in light, deep and rich in dark; round 9 moved the rank hues to
   material colours (steel, ochre, chevron blue, forest, copper, oak,
   aubergine, crimson). Rank is the colour
   system: every officer wears their tier's hue on a hairline insignia tile,
   so a list reads by rank before a word is read. One user accent (the
   family's) for controls. Hairline rows, never boxed cards. One scroller per
   screen (house §2A): the page itself never scrolls, rubber-bands or
   pull-refreshes, and there is no pull-to-refresh of our own (round 10). */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "Inter Variable", "Segoe UI", system-ui, Roboto, sans-serif;
  /* No serif anywhere (owner, round 11): display type is the UI face. */
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --bg: #f6f7fc;
  --bg-2: #ffffff;
  --surface-3: #eef1f9;
  --ink: #0c1324;
  --ink-2: #48526b;
  --ink-3: #636d88;
  --line: #e2e6f0;
  --line-2: #cfd6e5;
  --scrim: rgba(12, 16, 32, .36);
  --shadow-pop: 0 18px 48px rgba(20, 28, 60, .16), 0 3px 10px rgba(20, 28, 60, .08);

  --accent: #1e3a78;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  --edge-top: var(--bg);

  /* rank tiers, round 9: material colours, not a rainbow. Steel for the
     silver shield, ochre for the gold one, chevron blue, then forest,
     copper, oak, aubergine and crimson up the ladder. Each AA on white. */
  --t-officer: #4a5f78;
  --t-detective: #8a6110;
  --t-sergeant: #2856a3;
  --t-lieutenant: #2d6a4c;
  --t-captain: #a3531e;
  --t-di: #1d6b73;
  --t-inspector: #74405f;
  --t-chief: #b02a2a;
  --tile: #1c2a47;
  --tile-line: rgba(255, 255, 255, .06);
  --metal-gold: #dcb453;
  --metal-silver: #cdd6e2;

  /* arrest categories */
  --a-felony: #b8352b;
  --a-misdemeanor: #c98419;
  --a-violation: #3f8a5f;
  --a-infraction: #3c6fb4;
  --a-other: #8a90a0;

  --radius: 16px;
  --radius-sm: 11px;
  --tap: 44px;
  --head: 60px;
  --gutter: 20px;
  --maxw: 1040px;
  --sbw: 0px; /* the scroller's scrollbar, where it takes room (below) */
  --si-t: env(safe-area-inset-top, 0px);
  --si-b: env(safe-area-inset-bottom, 0px);
  --si-l: env(safe-area-inset-left, 0px);
  --si-r: env(safe-area-inset-right, 0px);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 340ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060913;
  --bg-2: #0c1122;
  --surface-3: #141b34;
  --ink: #eef2ff;
  --ink-2: #aab4d2;
  --ink-3: #8994b6;
  --line: #1b2341;
  --line-2: #29345d;
  --scrim: rgba(2, 4, 12, .62);
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, .6), 0 3px 12px rgba(0, 0, 0, .4);
  --accent: #93b2ec;
  --accent-ink: #0a0d1c;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  --edge-top: var(--bg);
  --t-officer: #a3b4c9;
  --t-detective: #dcb560;
  --t-sergeant: #8fb0ec;
  --t-lieutenant: #86c4a2;
  --t-captain: #e39a6c;
  --t-di: #7cc8cf;
  --t-inspector: #d79bbd;
  --t-chief: #f08a7a;
  --tile: #18233d;
  --tile-line: rgba(255, 255, 255, .08);
  --a-felony: #ee7f72;
  --a-misdemeanor: #e3ad58;
  --a-violation: #7cc79a;
  --a-infraction: #84a8e8;
  --a-other: #8d97b8;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Seamless Safari (round 13, house §2A; round 16 on the owner's device):
   iOS 26 paints the strip above the page with the page's own ground, so a
   tinted header read as a band under a darker strip. Every edge is now the
   one ground colour: html, body, the header and theme-color, so whatever
   Safari samples, it matches. */
html { background: var(--bg); }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No optimizeLegibility (round 24): it shapes every line of a long list
     with kerning and ligatures, a cost paid again on each new batch. */
  font-kerning: normal;
  font-optical-sizing: auto;
  display: flex;
  flex-direction: column;
}
.edge-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--si-t); /* the status bar's own band: >=20px wherever it exists, nothing on desktop */
  z-index: 71;
  background-color: var(--edge-top);
  pointer-events: none;
}
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.doc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: transparent; border: none; padding: 0; cursor: pointer; }
select { cursor: pointer; }
@media (hover: hover) { select.select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); } }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
/* Round 22 (owner: proper anti-aliasing on edges and circles). Vector art is
   drawn for geometric precision; images scale with the smooth filter; and a
   clipped, rounded box gets its own compositing layer edge (isolation), so
   its corner is anti-aliased once instead of showing the child's square
   corner through the curve. */
svg { shape-rendering: geometricPrecision; }
img { image-rendering: auto; }
.insignia, .tap-ic, .pod-medal, .shield-badge, .share-preview, .overlay-card { isolation: isolate; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: tabular-nums; }
html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: none !important; }

/* ── Header (wordmark, Text Share's buttons; no eyebrow, owner round 26) ── */
.top {
  flex: none;
  position: relative;
  z-index: 70; /* the open menu sits over everything, trays aside */
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--head) + var(--si-t));
  /* Lined up with .page (round 22): its column is centred in the scroller,
     which is narrower than the window by the scrollbar (--sbw). */
  padding: var(--si-t) calc(max(0px, (100vw - var(--sbw) - var(--maxw)) / 2) + var(--gutter) + var(--sbw) + var(--si-r)) 0 calc(max(0px, (100vw - var(--sbw) - var(--maxw)) / 2) + var(--gutter) + var(--si-l));
  background: var(--edge-top);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.brand { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.word {
  align-self: flex-start;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: var(--tap); /* the whole header line is the tap target */
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--tap);
  margin-left: -8px;
  padding: 0 6px 0 2px;
  border-radius: 10px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 500;
}
.back-btn svg { width: 22px; height: 22px; }
.back-btn:active { opacity: .55; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr-btn {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  transition: border-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hdr-btn::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; }
.hdr-btn:active { transform: scale(.9); }
.theme-btn { overflow: hidden; }
.theme-btn svg { position: absolute; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-slow) var(--ease-spring); }
.theme-btn .ic-sun { opacity: 0; transform: rotate(-70deg) scale(.5); }
.theme-btn .ic-moon { opacity: 1; transform: none; }
[data-theme="light"] .theme-btn .ic-sun { opacity: 1; transform: none; }
[data-theme="light"] .theme-btn .ic-moon { opacity: 0; transform: rotate(70deg) scale(.5); }
.nav-toggle { color: var(--ink); z-index: 52; }
.icon-dot {
  position: absolute;
  width: 15px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}
.dot-1 { transform: translateY(-5px); }
.dot-3 { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .dot-1 { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .dot-2 { transform: scaleX(0); opacity: 0; }
.nav-toggle[aria-expanded="true"] .dot-3 { transform: rotate(-45deg); }

/* ── Nav menu: ported from /mortgage (round 11, owner: "fully imitate the
   family"). Compact rows with no hairlines between them, one rule above the
   Other Tools fold and one above the way home. The header is raised above
   the tab bar (z-index below), so an open menu, fold and all, sits over
   everything and scrolls inside itself when it is taller than the screen. */
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: calc(max(0px, (100vw - var(--sbw) - var(--maxw)) / 2) + var(--gutter) + var(--sbw) + var(--si-r));
  width: 230px;
  max-height: calc(100dvh - var(--head) - var(--si-t) - var(--si-b) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 14px 44px rgba(16, 20, 30, .22), 0 3px 10px rgba(16, 20, 30, .12);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
[data-theme="dark"] .nav-menu { box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); }
.nav-menu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  background: transparent;
}
.nav-item:active { background: var(--accent-soft); }
.nav-item-label { flex: 1; }
.nav-item-ic { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; }
.nav-item-ic svg { width: 18px; height: 18px; display: block; }
.nav-item.current { cursor: default; }
.nav-sep-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; margin-top: 4px; border-radius: var(--radius-sm);
  background: transparent; border-top: 1px solid var(--line); color: var(--ink-3);
}
.nav-sep-btn .nav-item-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-sep-chev { font-size: 15px; line-height: 1; margin-left: auto; transition: transform var(--dur-fast) var(--ease-out); }
.nav-sep-btn[aria-expanded="true"] .nav-sep-chev { transform: rotate(90deg); }
#nav-tools { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 2px; }
#nav-tools .nav-item-label { color: var(--ink-2); font-weight: 500; }
#nav-tools .nav-item.current .nav-item-label { color: var(--ink); font-weight: 600; }
.nav-home { border-top: 1px solid var(--line); margin-top: 4px; }
.nav-home .nav-item-label { font-weight: 600; letter-spacing: .02em; }
.nav-badge { font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.badge-active { background: var(--accent-soft); color: var(--accent); }
.badge-soon { background: color-mix(in srgb, var(--ink-3) 18%, transparent); color: var(--ink-3); }
@media (hover: hover) {
  .hdr-btn:hover { color: var(--ink); border-color: var(--ink-3); }
  a.nav-item:hover, button.nav-item:hover { background: var(--accent-soft); }
  .nav-item.current:hover { background: transparent; }
  .nav-sep-btn:hover { color: var(--ink-2); }
  #nav-tools a.nav-item:hover .nav-item-label { color: var(--ink); }
}

/* ── The one scroller ──────────────────────────────────────────────── */
.scroller {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
/* Scrollbars (round 22, owner: Edge on Windows drew its native bar with
   arrows). Chromium and Safari get a slim rounded thumb with no buttons or
   track; scrollbar-width / scrollbar-color are reset for them, because when
   those are set Chromium ignores the ::-webkit-scrollbar rules and falls back
   to its own bar. Firefox keeps the standard thin, coloured bar. */
@supports selector(::-webkit-scrollbar) {
  *, .scroller { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
  @media (hover: hover) and (pointer: fine) { :root { --sbw: 12px; } }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-3) 45%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; }
  ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink-3) 75%, transparent); }
  ::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
}
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px calc(var(--gutter) + var(--si-r)) calc(64px + var(--si-b)) calc(var(--gutter) + var(--si-l));
}


/* ── Type ──────────────────────────────────────────────────────────── */
.title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
.lede { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.h2 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.h2 .h2-aside { margin-left: auto; font-weight: 500; font-size: 14px; color: var(--ink-3); }
.h2 .btn-text.h2-aside { color: var(--accent); font-weight: 600; }
.muted { color: var(--ink-3); }
.section { margin-top: 40px; }
.section:first-child { margin-top: 0; }
/* This Month sits in its own slot (it arrives late), so it is that slot's
   first child; it still keeps the gap a section has (round 15, owner). */
#month-slot > .section { margin-top: 40px; }

/* ── Insignia tile ─────────────────────────────────────────────────── */
/* Round 11 (owner): the tile is NYPD navy and the insignia is metal, as worn:
   the Police Officer's shield is silver, every other rank's shield and collar
   brass gold. The tier hues stay on the composition bars; the tiles no
   longer wear tinted pastels. */
.insignia {
  --tc: var(--t-officer);
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--metal-gold);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-line);
}
.insignia[data-tier="officer"] { color: var(--metal-silver); }
.insignia svg { width: 76%; height: 76%; overflow: visible; }
.insignia .d, .insignia svg use { stroke-opacity: 1; }
/* Round 18: Police Officer and Detective wear the metal shield (a file, not
   the sprite); the engraved number rides on top in the same viewBox. */
.metal { position: relative; display: block; }
.insignia .metal { height: 80%; width: auto; }
.metal img, .metal svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.insignia .metal svg { overflow: visible; }
[data-tier="officer"] { --tc: var(--t-officer); }
[data-tier="detective"] { --tc: var(--t-detective); }
[data-tier="sergeant"] { --tc: var(--t-sergeant); }
[data-tier="lieutenant"] { --tc: var(--t-lieutenant); }
[data-tier="captain"] { --tc: var(--t-captain); }
[data-tier="di"] { --tc: var(--t-di); }
[data-tier="inspector"] { --tc: var(--t-inspector); }
[data-tier="chief"] { --tc: var(--t-chief); }
#insignia-sprite .d { stroke-opacity: .55; }
.insignia-lg { width: 96px; height: 96px; border-radius: 24px; }
.insignia-sm { width: 30px; height: 30px; border-radius: 9px; }

/* ── Search ────────────────────────────────────────────────────────── */
.search-head { padding-top: 6px; }
.sticky-sentinel { height: 0; }
/* Round 22 (owner: the bar slid up, then locked in late with a jolt): it
   starts at the very top of the scroller, so it never moves. Its ground is
   there from the first frame and runs edge to edge (a pseudo-element, not the
   old 100vmax spread shadow, which repainted a huge area); the hairline under
   it fades in over the first 24px of scroll, on the scroller's own timeline
   (no JavaScript). Browsers without scroll-driven animations get the
   hairline from the .stuck class the page still sets. */
.search-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(-1 * var(--gutter));
  padding: 20px var(--gutter) 12px;
}
.search-sticky::before, .search-sticky::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
}
.search-sticky::before { top: 0; bottom: 0; z-index: -1; background: var(--bg); }
.search-sticky::after { bottom: -1px; height: 1px; background: var(--line); opacity: 0; }
.search-sticky.stuck::after { opacity: 1; }
@keyframes hairline-in { to { opacity: 1; } }
@supports (animation-timeline: scroll()) {
  .search-sticky::after { animation: hairline-in linear both; animation-timeline: scroll(nearest block); animation-range: 0 24px; }
}
body[data-page="home"] .page { padding-top: 0; }
.field.flash { animation: field-flash 1.1s var(--ease-out); }
@keyframes field-flash {
  0%, 40% { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); }
  100% { background: var(--bg-2); }
}
@media (prefers-reduced-motion: reduce) { .field.flash { animation: none; } }
.search-bar { display: flex; gap: 10px; align-items: stretch; }
.field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 48, .04);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field:focus-within { border-color: var(--accent); }
.field > svg { position: absolute; left: 15px; width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; }
.field input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 14px 0 44px;
  border: none;
  background: transparent;
  font-size: 17px;
  color: var(--ink);
  caret-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus-visible { outline: none; }
.field:has(.clear-btn:not([hidden])) input { padding-right: 44px; }
.field input::placeholder { color: var(--ink-3); }
.field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.clear-btn {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
.clear-btn svg { width: 18px; height: 18px; }
.clear-btn:active { transform: scale(.9); }
.btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-quiet { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); }
.btn-quiet[aria-expanded="true"], .btn-quiet.on { border-color: var(--accent); color: var(--accent); }
.btn-text { min-height: 36px; padding: 0 4px; color: var(--accent); font-weight: 600; font-size: 14px; }
.btn-text:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.filter-btn { height: 52px; width: 52px; padding: 0; position: relative; }
.filter-btn .dot {
  position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg-2);
}
@media (hover: hover) {
  .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
  .btn-quiet:hover { border-color: var(--ink-3); }
  .clear-btn:hover { color: var(--ink); }
}

/* Filters: a calm panel under the bar, never faceted boxes. */
.filters {
  margin-top: 10px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--ink-3); letter-spacing: .02em; }
.filters input, .filters select, .select {
  font-weight: 400;
  height: 42px;
  padding: 0 12px;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  min-width: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.filters select, .select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%238892b0' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.filters input:focus, .filters select:focus, .select:focus { border-color: var(--accent); outline: none; }
/* Command field: suggestions that narrow as you type */
.cmd-field { position: relative; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--ink-3); letter-spacing: .02em; }
.suggest {
  /* In the flow (round 22): a floating list covered Done and Clear Filters
     and stayed over the header after a scroll. */
  position: relative;
  max-height: 290px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow-pop); letter-spacing: 0;
}
.suggest button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 8px; text-align: left; font-size: 15px; font-weight: 500; color: var(--ink); }
.suggest button { padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }
.suggest button span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.suggest button small { flex: none; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.suggest button[aria-selected="true"], .suggest button:active { background: var(--accent-soft); }
@media (hover: hover) { .suggest button:hover { background: var(--accent-soft); } }
.filters-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }

/* Active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 13px;
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; color: var(--ink-3); }
.chip:active { transform: scale(.97); }
a.chip { padding-right: 12px; }

/* Status line + sort: one fixed row that never reflows the list */
.statusbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 36px; margin: 10px 0 2px; }
/* One row on a phone too (round 25): the title wraps beside Share and the sort. */
@media (max-width: 430px) { .statusbar { flex-wrap: nowrap; } .statusbar .status { flex: 1 1 auto; min-width: 0; text-wrap: balance; } }
.status { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-variant-numeric: tabular-nums; text-wrap: balance; }
.sort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.sort .select { height: 40px; width: auto; font-size: 14px; padding-left: 10px; background-color: var(--bg-2); border-radius: 999px; }

/* ── Rows (hairline table view) ────────────────────────────────────── */
.list { margin: 0 calc(-1 * var(--gutter)); }
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 11px var(--gutter);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.row::after { content: ""; position: absolute; left: calc(var(--gutter) + 58px); right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.row.plain { min-height: 58px; }
.row.plain::after { left: var(--gutter); }
.row:last-child::after { display: none; }
.row:active, .row.active { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row-main { flex: 1; min-width: 0; }
.row-name {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--ink);
  /* Round 16 (audit): a name is never cut; a long one takes a second line. */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.row-name.ui { font-family: var(--font-ui); font-size: 16px; font-weight: 600; }
.row-sub { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); text-wrap: pretty; }
.row-sub .tier { color: var(--ink); font-weight: 600; }
.nw { white-space: nowrap; }
.row-meta { flex: none; text-align: right; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.35; }
.row-meta b { color: var(--ink); font-weight: 600; font-size: 14px; }
.chev { flex: none; width: 8px; height: 14px; color: var(--line-2); }
mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) {
  .row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .row:hover .chev { color: var(--ink-3); }
}
.more-sentinel { height: 1px; }
.list-end { padding: 18px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }

/* Skeleton rows while data loads: shapes, no shimmer */
.sk { display: flex; align-items: center; gap: 14px; height: 68px; }
.sk i { display: block; border-radius: 8px; background: var(--surface-3); }
.sk i:first-child { width: 44px; height: 44px; border-radius: 13px; }
.sk span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk span i:first-child { width: 46%; height: 13px; border-radius: 6px; }
.sk span i:last-child { width: 70%; height: 10px; border-radius: 6px; }
.skel { animation: fade-in .4s var(--ease-out) .25s both; }
@keyframes fade-in { from { opacity: 0; } }

/* ── Home idle: recents + browse by rank ───────────────────────────── */
.home-hero { padding: 6px 0 0; }
.home-hero .title { font-size: clamp(34px, 5.4vw, 46px); }
.idle { padding-top: 18px; }
.recents .row { min-height: 60px; }
.data-line { margin-top: 36px; font-size: 13px; color: var(--ink-3); }
.data-line p { margin: 0; }
.try { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 26px; }
/* Round 16: "Try" is a label above the examples, and the six examples are
   equal cells, so the rows always come out even. */
.try > span { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); margin-bottom: -2px; }
.try .chip { justify-content: center; font-weight: 500; font-size: 14px; min-height: 38px; padding: 0 10px; white-space: nowrap; }
/* Units, one tap from home (round 13: the tab bar is gone). A full-width
   row in the accent, not a boxed card: the icon tile carries the colour. */
.units-cta { display: flex; align-items: center; gap: 14px; min-height: 72px; margin: 0 calc(-1 * var(--gutter)) -8px; padding: 12px var(--gutter); color: inherit; text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color var(--dur-fast) var(--ease-out); }
.units-cta:active { background: var(--accent-soft); }
@media (hover: hover) { .units-cta:hover { background: var(--accent-soft); text-decoration: none; } }
.units-cta-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #1c2a47; color: #dcb453; } /* the insignia tiles' navy and gold (round 23) */
.units-cta-ic svg { width: 24px; height: 24px; }
.units-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.units-cta-text b { font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.units-cta-text span { font-size: 13.5px; color: var(--ink-3); }
.units-cta .chev { color: var(--accent); }
.data-line p + p { margin-top: 2px; }
.idle .comp { margin: 0 0 6px; }
.row.static { cursor: default; }
.row.static:hover, .row.static:active { background: none; }
.row.plain.static { padding-right: calc(var(--gutter) + 22px); }

/* Recently viewed: swipe left to delete (iOS), or Edit for a remove button */
.swipe { position: relative; overflow: hidden; touch-action: pan-y; transition: height var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.swipe::after { content: ""; position: absolute; left: calc(var(--gutter) + 58px); right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.swipe:last-child::after { display: none; }
.swipe .row::after { display: none; }
.swipe.leaving { opacity: 0; }
.swipe.open .swipe-del, .swipe.swiping .swipe-del { visibility: visible; }
.swipe-row { position: relative; z-index: 1; display: flex; align-items: center; will-change: transform; }
.swipe.open .swipe-row, .swipe.swiping .swipe-row { background: var(--bg); }
.list.wrap .row-sub { white-space: normal; }
.swipe-row .row { flex: 1; min-width: 0; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.swipe-del {
  visibility: hidden;
  position: absolute; top: 0; right: 0; bottom: 0; width: 84px;
  display: flex; align-items: center; justify-content: center;
  background: #c8372d; color: #fff; font-size: 15px; font-weight: 600;
}
.edit-del { flex: none; width: var(--tap); height: var(--tap); margin-right: calc(var(--gutter) - 10px); display: flex; align-items: center; justify-content: center; }
.edit-del i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #c8372d; }
.edit-del i::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; border-radius: 1px; background: #fff; }
.editing .swipe-row .chev { display: none; }
.recents-foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.btn-text.danger { color: #c8372d; }
[data-theme="dark"] .swipe-del, [data-theme="dark"] .edit-del i { background: #d9473c; }
[data-theme="dark"] .btn-text.danger { color: #ff7b70; }

/* Most carried shields */
/* Most Carried Shields: the shield, number struck across it, in the tiles'
   navy and silver; how many carried it underneath. */
.shield-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 -4px; }
.shield-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 10px; border-radius: 14px; color: var(--ink-3); text-decoration: none; font-size: 12px; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.shield-item:active { transform: scale(.96); background: var(--accent-soft); }
@media (hover: hover) { .shield-item:hover { background: var(--accent-soft); text-decoration: none; } .shield-item:hover .shield-badge { transform: translateY(-2px); } }
.shield-badge { height: 64px; aspect-ratio: 295.8 / 345.7; transition: transform var(--dur-med) var(--ease-out); }

/* The department in numbers: three figures, hairlines between. */
.stat-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px 16px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat b { font-size: clamp(22px, 6.8vw, 40px); font-weight: 720; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.stat span { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }

/* Scroll reveal: removed in round 24. Sections that faded in as they
   entered read as content still loading on scroll (owner). Everything is
   there at rest. */

/* ── Profile ───────────────────────────────────────────────────────── */
.p-head { display: flex; align-items: center; gap: 22px; }
.p-head .title { font-size: clamp(26px, 4.4vw, 38px); }
.p-rank { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--tc); }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.p-actions { margin-left: auto; align-self: flex-start; display: flex; gap: 8px; }
@media (hover: hover) { .copyable:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } } /* the Shield chip beside it is a link and underlines too */
.copyable { cursor: pointer; } /* a hand, like every link (owner, round 22: the copy cursor read as a precision pointer) */
.tenure-live { display: block; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* one line: a wrap point that moved every second (round 22) */
@media (max-width: 420px) { .tenure-live { font-size: 12px; letter-spacing: -.01em; } }
.hashmarks { display: flex; margin-top: 8px; }
.row-hit { color: var(--accent); font-weight: 600; margin-top: 1px; }
.row-hit.now { color: var(--ink-2); font-weight: 500; }
.ranks .row { min-height: 58px; }
.ranks .insignia { width: 38px; height: 38px; border-radius: 11px; }
.hashmarks svg { display: block; height: 24px; width: auto; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 28px; margin: 0; }
.fact dt { font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--ink-3); }
.fact dd { margin: 3px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.timeline li + li::before { content: ""; position: absolute; left: 14.5px; top: -10px; height: 18px; border-left: 1px dashed var(--line-2); }
.timeline .tl-main { flex: 1; min-width: 0; }
.timeline b { font-weight: 600; display: block; }
.timeline .tl-sub { display: block; width: fit-content; font-size: 14px; margin-top: 1px; }
.fact-sub { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.timeline .tl-date { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arrest-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.arrest-bar span { display: block; min-width: 3px; }
.arrest-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 16px 0 0; }
.arrest-legend div { min-width: 0; }
.arrest-legend dt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.arrest-legend dt i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.arrest-legend dd { margin: 3px 0 0; font-size: 22px; font-weight: 680; font-variant-numeric: tabular-nums; }
.awards { list-style: none; margin: 0; padding: 0; }
.awards li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.awards li:last-child { border-bottom: none; }
/* The ribbon bar beside each award (round 15): the size it is worn, sharp. */
.awards .ribbon { flex: none; width: 52px; height: 11px; border-radius: 1.5px; box-shadow: 0 1px 2px rgba(10, 16, 40, .22); }
.awards .ribbon.none { box-shadow: none; }
.awards .aw-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.awards .aw-name { font-weight: 550; }
.awards .aw-count { flex: none; min-width: 2.2em; text-align: center; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.awards .aw-date { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.seg {
  display: flex;
  padding: 3px;
  gap: 2px;
  border-radius: 12px;
  background: var(--surface-3);
  width: max-content;
  max-width: 100%;
}
.seg button {
  flex: 1 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--bg-2); color: var(--ink); font-weight: 650; box-shadow: 0 1px 3px rgba(10, 16, 40, .14); }
[data-theme="dark"] .seg button[aria-pressed="true"], [data-theme="dark"] .seg button[aria-checked="true"] { background: var(--line-2); }
.salary-fig { margin: 18px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.salary-link { margin-top: 18px; }
.salary-link svg { width: 16px; height: 16px; }
.salary-note { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.salary-note .salary-link { margin: 10px 0 0; display: inline-flex; }
.pay-lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 18px 0 0; }
.pay-lines dt { font-size: 12.5px; color: var(--ink-3); }
.pay-lines dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.pay-lines dd small { font-weight: 500; color: var(--ink-3); font-size: 12.5px; }
.salary-prev { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.salary-prev b { color: var(--ink); font-weight: 600; }
.salary-prev .up, .salary-prev .down { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
/* ── Unit pages ────────────────────────────────────────────────────── */
.u-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.u-head .title { flex: 1 1 320px; }
.u-sub { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.comp { margin-top: 22px; }
.comp-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.comp-bar span { background: var(--tc); min-width: 3px; }
.comp-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.comp-legend button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 13px; font-weight: 550; }
.comp-legend button i { width: 9px; height: 9px; border-radius: 3px; background: var(--tc); }
.comp-legend button small { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.comp-legend button[aria-pressed="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, var(--bg-2)); }
.tools-row { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.tools-row .field input { height: 46px; font-size: 16px; }
.boro { margin-top: 24px; }
.boro h3 { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.pct-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pct-grid a { min-width: 52px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 10px; background: var(--surface-3); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.pct-grid a:active { transform: scale(.95); }
@media (hover: hover) { .pct-grid a:hover { background: var(--accent-soft); color: var(--accent); } }
.letter-group > summary { margin-left: 0; margin-right: 0; list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.letter-group > summary::-webkit-details-marker { display: none; }
.letter-group > summary small { font-weight: 600; letter-spacing: 0; color: var(--ink-3); opacity: .8; }
.letter-group > summary svg { margin-left: auto; width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease-out); }
.letter-group:not([open]) > summary svg { transform: none; }
.letter { position: sticky; top: 0; z-index: 2; margin: 18px calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); background: var(--bg); } /* solid, not blurred (round 22: a blur per letter cost every scrolled frame) */

/* ── Notices, empty, error ─────────────────────────────────────────── */
.notice { padding: 40px 16px; text-align: center; color: var(--ink-2); text-wrap: balance; }
.notice p { margin: 0; }
.nowrap { white-space: nowrap; }
.notice .insignia { margin: 0 auto 14px; }
.notice b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.notice .btn { margin-top: 14px; }
.empty-try { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

/* ── Docs (About, Privacy, Settings) ───────────────────────────────── */
.doc { max-width: 680px; }
.doc p { margin: 0 0 14px; color: var(--ink-2); }
p, .salary-note, .muted, .cmp-who { text-wrap: pretty; }
.doc h2:not(.h2) { margin: 36px 0 10px; font-size: 18px; font-weight: 650; color: var(--ink); }
.doc ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
.doc li { margin-bottom: 8px; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--si-b));
  z-index: 900; /* over open trays (800), where picks and Copy Link answer */
  /* Round 16 (owner: "too fat, the word wrap is weird"): left:50% capped
     the width at half the screen, so short lines wrapped. It now sizes to
     its words, up to the screen less the gutters. */
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 4px 14px rgba(8, 12, 30, .18);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden; /* iOS 26 samples fixed elements for its toolbar tint */
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* ── Trays: ported from /mortgage's overlays (round 11). A bottom tray on a
   phone, a centred card from 720px. Settings, About, Privacy and the install
   steps all use it. The overlay is its own scrim: a tap outside the card,
   Escape, Back, the close button or a drag down closes it. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(20px + var(--si-t)) 0 0;
  background: rgba(4, 7, 13, .52);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out); }
.overlay-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 20px - var(--si-t));
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, .28);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  isolation: isolate;
}
[data-theme="dark"] .overlay-card { box-shadow: 0 -12px 48px rgba(0, 0, 0, .5); }
.overlay.open .overlay-card { transform: translateY(0); }
.overlay-card.dragging { transition: none; }
.sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 10px auto 2px; flex-shrink: 0; cursor: grab; touch-action: none; }
.overlay-inner { padding: 8px 22px calc(22px + var(--si-b)); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.overlay-head { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -22px 8px; padding: 8px 22px 6px; background: var(--bg-2); touch-action: none; }
@media (min-width: 720px) { .overlay-head { top: -28px; margin: 0 -26px 8px; padding: 8px 26px 6px; } }
.overlay-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.overlay-close {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2);
  color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.overlay-close:active { transform: scale(.9); }
.overlay-close svg { width: 16px; height: 16px; }
@media (hover: hover) { .overlay-close:hover { border-color: var(--accent); color: var(--ink); } }
.set-group { margin-top: 22px; }
.set-group:first-child { margin-top: 6px; }
.set-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 13px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; }
.set-row-title { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.set-row-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.accent-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; max-width: 360px; }
.accent-swatch { aspect-ratio: 1; border-radius: 50%; padding: 0; background: var(--sw); position: relative; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out); }
.accent-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--sw); }
.accent-swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 11px; border: solid var(--sw-ink); border-width: 0 2.2px 2.2px 0; border-radius: 1px; transform: translateY(-1px) rotate(45deg); }
.accent-swatch:active { transform: scale(.92); }
.set-btn { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-top: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.set-btn:disabled { color: var(--ink-3); }
.set-btn-desc { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 3px; }
@media (hover: hover) { .set-btn:not(:disabled):hover { border-color: var(--line-2); background: var(--surface-3); } }
/* Viewed history, inside Settings */
.hist { margin: 0 -22px; }
.hist-item { display: flex; align-items: center; }
.hist-item .row { flex: 1; min-width: 0; }
.list-more { display: block; margin: 10px 0 0; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.hist .row { min-height: 56px; padding-left: 22px; padding-right: 10px; }
.hist .row-name { font-size: 15px; }
.hist .insignia { width: 36px; height: 36px; border-radius: 10px; }
.hist .row::after { left: 72px; }
.hist .chev { display: none; } /* the row opens; the × removes: one mark each */
.hist-del { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.hist-del svg { width: 15px; height: 15px; }
@media (hover: hover) { .hist-del:hover { color: var(--ink); background: var(--surface-3); } }
.hist-empty { font-size: 14px; color: var(--ink-3); margin: 0; }
.hist-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.set-btn.danger { color: #c2362b; text-align: center; font-weight: 600; }
[data-theme="dark"] .set-btn.danger { color: #f08a7a; }
.set-btn.danger.confirm { background: #c2362b; border-color: #c2362b; color: #fff; }
/* A row that opens a pane: label, value, chevron. 44pt tall (HIG). */
.set-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); text-align: left; transition: background var(--dur-fast) var(--ease-out); }
.set-link-title { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.set-link-val { font-size: 14px; color: var(--ink-3); }
.set-link-chev { width: 16px; height: 16px; color: var(--ink-3); }
.set-link:active { background: var(--surface-3); }
@media (hover: hover) { .set-link:hover { background: var(--surface-3); } }
/* Panes: one view at a time inside a tray; the head's way out is Back
   inside a sequence, Close on its own. */
.tray-back { display: inline-flex; align-items: center; gap: 1px; min-height: 44px; margin-left: -8px; padding: 0 8px 0 2px; border-radius: 10px; color: var(--accent); font-size: 16px; font-weight: 500; flex: none; }
.tray-back svg { width: 22px; height: 22px; }
.tray-back:active { opacity: .55; }
.pane .overlay-head .overlay-title { flex: 1; min-width: 0; }
.tray-back:not([hidden]) + .overlay-title { text-align: center; margin-right: 64px; }
.tray-skirt { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; background: var(--bg-2); transform-origin: bottom; pointer-events: none; }
/* Reading trays (About, Privacy): FAQ rows like /mortgage */
.faq-section { margin-top: 18px; }
.faq-section:first-child { margin-top: 4px; }
.faq-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; margin: 0; }
.faq-a { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 4px 0 0; }
.faq-a a { color: var(--accent); }
.faq-a b { color: var(--ink); font-weight: 600; }
.sheet-steps { margin: 4px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
@media (min-width: 720px) {
  .overlay { align-items: center; padding: calc(20px + var(--si-t)) calc(20px + var(--si-r)) calc(20px + var(--si-b)) calc(20px + var(--si-l)); }
  .overlay-card { max-width: 460px; border-radius: 18px; border-bottom: 1px solid var(--line-2); transform: translateY(14px) scale(.98); box-shadow: 0 24px 64px rgba(0, 0, 0, .3); max-height: calc(100dvh - 40px - var(--si-t) - var(--si-b)); }
  .overlay.open .overlay-card { transform: translateY(0) scale(1); }
  .sheet-handle { display: none; }
  .overlay-inner { padding: 28px 26px 22px; }
  .hist { margin: 0 -26px; }
  .hist .row { padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) { .overlay-card { transition: opacity var(--dur-fast) linear; } }

/* ── Desktop refinements ───────────────────────────────────────────── */
@media (min-width: 900px) {
  .p-head .insignia-lg { width: 112px; height: 112px; border-radius: 30px; }
}

/* ── Phones ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --gutter: 16px; --head: 52px; }
  .word { font-size: 17px; }
  .page { padding-top: 18px; padding-bottom: calc(var(--si-b) + 48px); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .wide { grid-column: 1 / -1; }
  .field input { height: 48px; }
  .filter-btn { height: 48px; width: 48px; }
  .row { min-height: 64px; padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .row::after { left: calc(var(--gutter) + 54px); }
  .row .insignia { width: 42px; height: 42px; }
  .row-name { font-size: 17px; }
  .row-meta { font-size: 12.5px; }
  .row-meta.hide-sm { display: none; }
  .p-head { gap: 14px; align-items: flex-start; }
  .p-head .insignia-lg { width: 64px; height: 64px; border-radius: 18px; }
  .p-head-text { flex: 1; min-width: 0; }
  .p-head .title { font-size: 26px; }
  .p-rank { font-size: 15px; margin-top: 4px; }
  .p-chips { margin-top: 14px; }
  .arrest-legend { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .pay-lines { grid-template-columns: 1fr 1fr; }
  .arrest-legend div { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .arrest-legend div:last-child { border-bottom: none; }
  .arrest-legend dt { font-size: 15px; }
  .arrest-legend dd { margin: 0; font-size: 17px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .seg { width: 100%; }
  .seg button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 13.5px; }



  /* Drill-in pages: the wordmark centres between Back and the buttons. */
  body.has-back .brand { align-items: center; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); max-width: 52vw; }
  body.has-back .word { align-self: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.has-back .top-actions { margin-left: auto; }
}
@media (min-width: 641px) { .back-btn { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Page to page (round 10): the browser's own cross-document transition. The
   header and tab bar are named so they hold still while the page moves. */
@view-transition { navigation: auto; }
header.top { view-transition-name: top; }
::view-transition-group(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
@keyframes vt-in-r { from { transform: translateX(14%); opacity: 0; } }
@keyframes vt-out-l { to { transform: translateX(-6%); opacity: 0; } }
@keyframes vt-in-l { from { transform: translateX(-14%); opacity: 0; } }
@keyframes vt-out-r { to { transform: translateX(6%); opacity: 0; } }
html:active-view-transition-type(forward)::view-transition-old(root) { animation: vt-out-l 220ms cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: vt-in-r 260ms cubic-bezier(.32, .72, 0, 1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-out-r 220ms cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-in-l 260ms cubic-bezier(.32, .72, 0, 1) both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Hit areas (round 13, Apple HIG: 44pt) ─────────────────────────── 
   Small controls keep their look; an invisible box grows what a thumb can
   hit. Prose links inside paragraphs are exempt, as HIG allows. */
.chip, .btn-text, .list-more, .tl-sub, .overlay-close, .comp-legend button, .boro h3 a { position: relative; }
.chip::after, .btn-text::after, .list-more::after, .tl-sub::after, .overlay-close::after, .comp-legend button::after, .boro h3 a::after {
  content: "";
  position: absolute;
  inset: -6px -3px;
}
.overlay-close::after { inset: -5px; border-radius: 50%; }
.tl-sub::after { inset: -12px -6px; }
/* Round 22: profile fact links (a command, a precinct) reach 44px tall. */
.fact dd a { position: relative; }
.fact dd a::after { content: ""; position: absolute; inset: -12px -4px; }
@media (pointer: coarse) { #sort, #usort, #csort, #unit-share { min-height: 44px; } }
.boro h3 a { display: inline-flex; align-items: center; min-height: 32px; }
.pct-grid a { min-height: 44px; }
.nav-item, .nav-sep-btn { min-height: 44px; }
.hist-del { width: 44px; height: 44px; }
.share-btn { min-width: 44px; min-height: 44px; }

/* Time on the Job flips to days until retirement (round 13). Both faces
   share one grid cell; the swap is a short blur cross-fade with a lift, the
   same morph the family uses when a label changes meaning. */
.flip { position: relative; display: grid; width: 100%; padding: 0 30px 0 0; margin: 0; text-align: left; color: inherit; border-radius: 10px; -webkit-user-select: none; user-select: none; }
.flip::after { content: ""; position: absolute; inset: -8px -6px; }
.flip-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), filter 220ms var(--ease-out); }
.flip-face.b { opacity: 0; transform: translateY(6px); filter: blur(4px); pointer-events: none; }
.flip.on .flip-face.a { opacity: 0; transform: translateY(-6px); filter: blur(4px); }
.flip.on .flip-face.b { opacity: 1; transform: none; filter: none; }
.flip-ic { position: absolute; right: 0; top: 2px; width: 20px; height: 20px; padding: 2px; border-radius: 6px; color: var(--accent); background: var(--accent-soft); transition: transform 300ms var(--ease-spring); }
.flip.on .flip-ic { transform: rotate(180deg); }
.flip:active .flip-face { transform: scale(.98); }
.retire-big { font-size: inherit; }
.retire-big b { font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .flip-face { transition: opacity 1ms; filter: none !important; transform: none !important; } }

/* Share tray (round 13): the card as it will be sent, then the actions. */
.share-preview { position: relative; aspect-ratio: 1200 / 630; margin: 4px 0 16px; border-radius: 14px; overflow: hidden; background: #0d1530; box-shadow: 0 0 0 1px var(--line); }
.share-preview[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%) 0 0 / 220% 100%; animation: share-shimmer 1.1s linear infinite; }
@keyframes share-shimmer { to { background-position: -220% 0; } }
.share-preview img { display: block; width: 100%; height: 100%; animation: share-in 360ms var(--ease-out); }
@keyframes share-in { from { opacity: 0; transform: scale(1.02); } }
.share-actions { display: grid; gap: 10px; }
.share-actions .btn { min-height: 50px; font-size: 16px; font-weight: 650; justify-content: center; }
@media (min-width: 720px) { .share-actions { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .share-preview[aria-busy="true"]::after, .share-preview img { animation: none; } }

/* ── Round 14: reasons to come back ───────────────────────────────────
   Follow, This Is Me, milestones, achievements, This Month, Compare,
   the results' Share and a quiet install hint. One accent for controls;
   gold only where the cards are gold (achievements, This Is Me). */
/* Follow, Compare, Share: a labelled bar under the chips, like a contact
   card's actions; the name and rank keep the head to themselves. */
.p-actionbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; max-width: 520px; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--accent); font-size: 13px; font-weight: 650; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
.act svg { width: 21px; height: 21px; }
.act:active { transform: scale(.96); background: var(--accent-soft); }
@media (hover: hover) { .act:hover { background: var(--accent-soft); } }
.follow-btn .ic-star { transition: transform var(--dur-med) var(--ease-spring), fill var(--dur-fast); }
.follow-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.follow-btn[aria-pressed="true"] .ic-star { fill: currentColor; transform: scale(1.06); }
.since { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }
.since b { font-weight: 650; margin-right: 2px; }
.since span { padding: 2px 9px; border-radius: 999px; background: var(--bg-2); font-weight: 600; font-size: 13px; }
.me-chip { border-color: color-mix(in srgb, #c99a2e 55%, var(--line-2)); color: #9a6d12; font-weight: 650; }
[data-theme="dark"] .me-chip { color: #e2b552; }
.milestones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ms { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--accent); background: var(--accent-soft); }
.ms[data-kind="retire"] { color: var(--ink-2); background: var(--surface-3); }

.ach-list { display: grid; gap: 10px; }
.ach { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 6px 8px 10px; border-radius: 14px;
  /* Round 16 (owner: no glows or washes; emphasis by a thicker stroke in
     golds): a 2px rim of struck golds round a plain card. */
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(135deg, #f1d68a, #c9962f 38%, #e8c46a 62%, #a8741f) border-box; }
.ach-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--tile); color: var(--metal-gold); }
.ach-ic svg { width: 22px; height: 22px; }
.ach-text { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.ach-share { width: 44px; height: 44px; flex: none; border-radius: 999px; display: grid; place-items: center; color: var(--ink-3); }
.ach-share svg { width: 19px; height: 19px; }
.ach-share:active { background: var(--surface-3); }
@media (hover: hover) { .ach-share:hover { color: var(--accent); background: var(--surface-3); } }

.row-note { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.chg { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
.chg[data-kind="rank"] { color: #fff; background: var(--accent); }
.new-badge { font-size: 12px !important; padding: 2px 9px; border-radius: 999px; color: var(--accent-ink) !important; background: var(--accent); }

.install-hint { display: flex; align-items: center; gap: 4px; margin: 28px 0 0; padding: 4px 4px 4px 14px; border-radius: 12px; border: 1px dashed var(--line-2); }
.install-go { flex: 1; min-height: 44px; text-align: left; font-size: 14px; color: var(--ink-2); }
.install-go::before { content: "+ "; color: var(--accent); font-weight: 700; }
.install-x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-3); border-radius: 10px; }
.install-x svg { width: 15px; height: 15px; }

.statusbar .status-share { flex: none; width: 40px; height: 40px; border-width: 1px; }
.statusbar .status-share svg { width: 17px; height: 17px; }
.u-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.u-head .title { flex: 1; min-width: 0; }
.u-head .share-btn { flex: none; }
@media (max-width: 640px) { .u-head .share-btn { width: 40px; min-height: 40px; padding: 0; border-radius: 999px; justify-content: center; } .u-head .share-btn span { display: none; } }

.compare-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; padding: 10px 8px 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.compare-banner span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; text-wrap: pretty; }
.compare-banner b { overflow-wrap: anywhere; }
.compare-banner .cb-text { display: block; min-width: 0; }
.compare-banner .btn-text { flex: none; display: inline-flex; align-items: center; align-self: center; line-height: 1.3; padding: 0 4px; }
.compare-banner svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin-top: 6px; }
.cmp-who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: inherit; text-decoration: none; min-width: 0; }
.cmp-who b { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cmp-who .tier { font-size: 14px; font-weight: 650; color: var(--tc, var(--ink-2)); }
.cmp-who small { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.insignia-cmp { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 6px; }
.cmp-vs { align-self: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cmp-verdict { margin: 22px 0 6px; text-align: center; font-size: 16px; font-weight: 600; text-wrap: balance; }
.cmp-table { margin-top: 10px; border-top: 1px solid var(--line); }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--line); }
.cmp-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.cmp-v { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cmp-v.a { text-align: left; }
.cmp-v.b { text-align: right; }
.cmp-v.win { color: var(--accent); font-weight: 750; }
.cmp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.cmp-actions .btn { min-height: 48px; justify-content: center; }

.me-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.me-toggle b { display: block; font-size: 15px; font-weight: 650; }
.me-toggle small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.me-toggle input { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background var(--dur-med) var(--ease-out); }
.me-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--dur-med) var(--ease-spring); }
.me-toggle input:checked { background: #c99a2e; }
.me-toggle input:checked::after { transform: translateX(20px); }

/* ── Insider Mode (round 15) ───────────────────────────────────────── */
.ins-form { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ins-form[hidden], .ins-on[hidden] { display: none; }
.ins-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ins-pw { height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font-size: 17px; caret-color: var(--accent); -webkit-appearance: none; appearance: none; transition: border-color var(--dur-fast) var(--ease-out); }
.ins-pw:focus { outline: none; border-color: var(--accent); }
.ins-err { margin: 0; font-size: 14px; color: #c2362b; }
:root[data-theme="dark"] .ins-err { color: #ff8a80; }
.ins-go { width: 100%; min-height: 50px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.ins-go:disabled { opacity: .55; }
.insider .ins-seg { display: flex; margin: 4px 0 18px; }
.insider .ins-seg button { flex: 1; }
.ins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ins-h3 { margin: 26px 0 6px; font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--ink-3); }
.insider .row.plain .row-sub { white-space: normal; }

/* ── Officers who have left (round 15) ─────────────────────────────── */
.left-badge { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 9%, transparent); vertical-align: 1px; }
.p-left { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); }
.former .row { opacity: .86; }
.u-note { margin: -4px 0 10px; }

/* ── Find within results (round 16) ────────────────────────────────── */
.refine { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.refine-field { flex: 1; }
.refine-field input { height: 42px; font-size: 16px; }
.refine-field > svg { width: 17px; height: 17px; }
.refine-n { flex: none; font-size: 13px; color: var(--ink-3); }
.refine-n:empty { display: none; }

/* ── Share: choose who shows (round 16) ────────────────────────────── */
.pick { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; }
.pick summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; }
.pick summary::-webkit-details-marker { display: none; }
.pick summary small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.pick-find { margin: 0 12px 8px; }
.pick-find input { height: 42px; font-size: 16px; }
.pick-find > svg { width: 17px; height: 17px; }
.pick-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 6px; }
.pick-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.pick-row:has(input:checked) { background: var(--accent-soft); }
.pick-row input { flex: none; width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-text b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-text small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-val { flex: none; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── Awards breakdown (round 16) ───────────────────────────────────── */
.aw-seg { margin: 0 0 6px; }
.awards details.aw-group { width: 100%; }
.awards details.aw-group > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; min-height: 32px; }
.awards details.aw-group > summary::-webkit-details-marker { display: none; }
.awards details.aw-group > summary .chev { flex: none; width: 8px; height: 14px; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.awards details.aw-group[open] > summary .chev { transform: rotate(90deg); }
.awards li:has(> details) { display: block; }
.aw-dates { list-style: none; margin: 8px 0 2px 64px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.aw-dates li { display: flex; gap: 8px; padding: 2px 0; border: none; }

.row-note .ribbon { width: 34px; height: 7.5px; border-radius: 1px; align-self: center; }
.row-note .aw-tag { display: inline-flex; align-items: center; gap: 7px; }

.overlay-card:focus, .overlay-card:focus-visible { outline: none; }

/* ── Reactions: tap buttons on a profile (rounds 17-18) ─────────────── */
.taps .h2-aside:empty { display: none; }
.taps-slot .tap { opacity: .5; }
.tap-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .tap-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.tap {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 104px; padding: 9px 2px 8px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tap:active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (hover: hover) { .tap:hover { border-color: var(--line-2); } }
/* Round 20 (owner): each reaction is a flat cartoon on a tinted circle,
   drawn in its own fixed colours (they read the same on either theme, as
   pictures do). Only the circle, the donut's hole and the coffee's steam
   follow the theme. Parts may swing past the circle for a beat. */
.taps { --rx-tint: #e9eefa; --rx-steam: #a9b7d2; }
[data-theme="dark"] .taps { --rx-tint: #1b2440; --rx-steam: #ffffff; }
.tap-ic { display: block; width: 100%; max-width: 76px; aspect-ratio: 400 / 320; border-radius: 10px; transition: box-shadow var(--dur-fast) linear; }
.tap-ic > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tap.hit .tap-ic { box-shadow: 0 0 0 2px var(--accent); }
.rxb .rx-tile, .rxb .rx-hole { fill: var(--rx-tint); }
.rxb .rx-steam { stroke: var(--rx-steam); }
.tap-name { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.tap-n { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.tap-n[data-n="0"] { color: var(--ink-3); font-weight: 500; }
.tap-fx { position: absolute; left: 50%; top: 34px; width: 0; height: 0; pointer-events: none; z-index: 5; }
.tap-bit { position: absolute; left: 0; top: 0; line-height: 0; will-change: transform, opacity; }
.tap-bit.crumb { border-radius: 1px; }
.tap-bit svg { display: block; }
.taps.locked .tap { opacity: .45; }
.tap-lock { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, #e5484d 45%, var(--line)); background: color-mix(in srgb, #e5484d 7%, var(--bg-2)); }
.tap-lock[hidden] { display: none; }
.tap-lock-msg { font-size: 15px; color: var(--ink); text-wrap: pretty; }
.tap-lock-vac { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.tap-lock-vac:empty { display: none; }
.tap-lock-cd { font-size: 13px; font-weight: 650; color: #c2362b; }
:root[data-theme="dark"] .tap-lock-cd { color: #ff8a80; }
.tap-me { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* Round 19: ethnicity breakdown (home "Who Serves", a unit's in Insider Mode).
   One bar, its segments in steps of the family accent; rows below say it. */
.eth-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 4px 0 14px; }
.eth-bar i, .eth-key { background: color-mix(in srgb, var(--accent) var(--eth-a, 100%), var(--bg-2)); }
.eth-bar i[data-i="0"], .eth-key[data-i="0"] { --eth-a: 100%; }
.eth-bar i[data-i="1"], .eth-key[data-i="1"] { --eth-a: 72%; }
.eth-bar i[data-i="2"], .eth-key[data-i="2"] { --eth-a: 56%; }
.eth-bar i[data-i="3"], .eth-key[data-i="3"] { --eth-a: 40%; }
.eth-bar i[data-i="4"], .eth-key[data-i="4"] { --eth-a: 26%; }
.eth-bar i { min-width: 3px; }
.eth-list { display: grid; }
.eth-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.eth-row:last-child { border-bottom: 0; }
.eth-key { width: 10px; height: 10px; border-radius: 3px; }
/* The pale steps keep a 3:1 edge against the card (round 22). */
.eth-key[data-i="3"], .eth-key[data-i="4"], .eth-bar i[data-i="3"], .eth-bar i[data-i="4"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, var(--bg-2)); }
.eth-name { font-weight: 500; }
.eth-pct { color: var(--ink-3); min-width: 3ch; text-align: right; }
.eth-n { font-weight: 600; min-width: 6ch; text-align: right; }
@media (hover: hover) { .eth-row:hover .eth-name { color: var(--accent); } }

/* Round 19: arrest leaderboards. An Olympic top three on stepped plinths,
   second on the left, first in the middle and highest, third on the right;
   the medals are the only metal here, struck like the shields. */
.lb-seg { margin: 2px 0 18px; }
/* Four periods across a phone: equal columns, room inside each (round 22). */
@media (max-width: 480px) { .lb-seg { width: 100%; } .lb-seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13.5px; } }
@media (pointer: coarse) { .seg button { min-height: 44px; } }
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.pod { min-width: 0; }
.pod-1 { order: 2; }
.pod-2 { order: 1; }
.pod-3 { order: 3; }
.pod > a { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; min-width: 0; }
@media (hover: hover) { .pod > a:hover { text-decoration: none; } .pod > a:hover .pod-name { color: var(--accent); } }
.pod-medal { --m-hi: #fff4c8; --m-mid: #e2b552; --m-lo: #9a6e1c; --m-ink: #4a3208;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px;
  background: radial-gradient(circle at 34% 28%, var(--m-hi) 0 18%, var(--m-mid) 52%, var(--m-lo) 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--m-lo) 70%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--m-hi) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .18); }
.pod-medal span { font-weight: 800; font-size: 17px; color: var(--m-ink); text-shadow: 0 1px 0 color-mix(in srgb, var(--m-hi) 70%, transparent); font-variant-numeric: tabular-nums; }
.pod-1 .pod-medal { width: 54px; height: 54px; }
.pod-1 .pod-medal span { font-size: 21px; }
.pod-2 .pod-medal { --m-hi: #ffffff; --m-mid: #c3c9d1; --m-lo: #6e7782; --m-ink: #2b3138; }
.pod-3 .pod-medal { --m-hi: #ffe0c2; --m-mid: #c9844d; --m-lo: #7a4520; --m-ink: #3b1e08; }
.pod-name { font-weight: 650; font-size: 15px; line-height: 1.25; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pod-1 .pod-name { font-size: 16px; }
.pod-sub { margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.pod-step { margin-top: 10px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding-top: 12px;
  border-radius: 12px 12px 0 0; background: linear-gradient(to bottom, var(--bg-2), color-mix(in srgb, var(--bg-2) 40%, transparent)); box-shadow: inset 0 1px 0 var(--line-2); }
.pod-step b { font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.pod-step small { font-size: 11.5px; color: var(--ink-3); }
.pod-1 .pod-step { height: 100px; }
.pod-1 .pod-step b { font-size: 28px; }
.pod-2 .pod-step { height: 76px; }
.pod-3 .pod-step { height: 60px; }
.lb-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.lb-empty { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.lb-rest { margin-top: 14px; border-top: 1px solid var(--line); }
.lb-rest a.row::before { content: attr(data-place); flex: none; width: 1.6em; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; margin-right: -4px; }
.lb-all { display: inline-block; margin-top: 10px; }
#results.has-podium .podium { margin: 18px var(--gutter) 4px; }
#results.has-podium > a.row:nth-of-type(-n+3),
#results.has-podium > .row-chunk:first-of-type > a.row:nth-of-type(-n+3) { display: none; } /* rows sit in chunks since round 24 */

/* Round 19: a warning before any break (bypass with Keep Reacting), and the
   Test badge while an insider tests Reactions. */
.tap-warn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, #e5a50a 50%, var(--line)); background: color-mix(in srgb, #e5a50a 8%, var(--bg-2)); }
.tap-warn-msg { margin: 0; font-weight: 600; grid-column: 1; }
.tap-warn-n { grid-column: 1; font-size: 13px; color: var(--ink-3); }
.tap-warn-go { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; white-space: nowrap; }
.taps.warned .tap { opacity: .55; }
.tap-test-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; vertical-align: middle;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.taps.testing .tap-n[data-test] { color: var(--accent); }

/* Round 19: five Insider views scroll sideways on a phone; reaction chips. */
.ins-seg { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.ins-seg::-webkit-scrollbar { display: none; }
.ins-seg button { white-space: nowrap; flex: 0 0 auto; }
.ins-chips { margin: 0 0 16px; }
.ins-chips .chip[aria-checked="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ── Round 23: This Is Me and Where You Rank ─────────────────────────── */
.me-claim-chip { color: var(--accent); }
.rank-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 28px; align-items: baseline; min-height: 120px; }
.rank-grid > span { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rank-grid > span:nth-last-child(-n+3) { border-bottom: none; }
.rank-grid .rg-h { padding: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: right; white-space: nowrap; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.rg-k { font-size: 15.5px; font-weight: 600; }
.rg-v { text-align: right; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.rg-v b { font-size: 19px; font-weight: 750; color: #a87a16; }
[data-theme="dark"] .rg-v b { color: #e2b552; }
.rank-share { margin-top: 14px; min-height: 44px; }
.lb-share { display: block; margin: 10px 0 0; }
.ub .h2-aside { font-weight: 500; }

/* ── Round 23: designer pass ─────────────────────────────────────────── */
/* Names break as a whole ("Joseph C" together), never leave a lone initial. */
.row-name { text-wrap: balance; }
/* A row without a chevron keeps its figure in the same column as its neighbours. */
.row.static .row-meta { margin-right: 22px; } /* chevron 8px + row gap 14px */
/* Try: one line that scrolls sideways on a phone instead of three rows of pills. */
@media (max-width: 560px) {
  .try { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 calc(-1 * var(--gutter)) 22px; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .try::-webkit-scrollbar { display: none; }
  .try > span { display: none; }
  .try .chip { flex: none; scroll-snap-align: start; }
}
/* Profile actions: one light row of buttons, icon beside the word, lighter
   than the name above them (round 23: three tall cards outweighed it). */
.p-actionbar { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.act { flex: 0 1 auto; flex-direction: row; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; }
.act svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .act { flex: 1 1 0; padding: 0 10px; } }
/* Desktop profile: the record reads down two columns instead of one long
   strip with a void beside it (round 23). Phones keep one column. */
.p-record { margin-top: 40px; } /* its first section is a first-child */
@media (min-width: 1000px) {
  .p-record { columns: 2; column-gap: 56px; }
  .p-record > .section { break-inside: avoid; }
}
.roster-tier { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 2px; padding: 0 var(--gutter); font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--ink-2); }
.roster-tier:first-child { margin-top: 4px; }
.roster-tier small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pod-name { overflow-wrap: break-word; }
.ub .pod-name { -webkit-line-clamp: 3; }

/* ── Round 23: de-slop. Facts sit apart by space, never "a · b · c". ── */
.row-facts { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 1px; }
.row-facts > * { min-width: 0; }
.row-sub:has(> span + span) { display: flex; flex-wrap: wrap; column-gap: 12px; }
.u-sub { display: flex; flex-wrap: wrap; column-gap: 14px; }
/* Desktop home: pairs of sections side by side, in the same reading order;
   boards, the numbers band and lists that need the width keep it (round 23). */
@media (min-width: 1100px) {
  #idle:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: start; }
  #idle > * { grid-column: 1 / -1; }
  #idle > .half { grid-column: auto; }
}
/* Try: chips size to their words and wrap (round 23: equal grid cells let
   the longer examples run into each other on desktop). */
@media (min-width: 561px) {
  .try { display: flex; flex-wrap: wrap; }
  .try > span { flex-basis: 100%; }
  .try .chip { flex: none; padding: 0 12px; font-size: 13.5px; }
}
#ub-slot > .section { margin-top: 40px; }
/* The phone's chip row scrolls, which would clip each chip's larger tap
   area; padding inside the row keeps it (round 23). */
@media (max-width: 560px) { .try { padding-block: 6px; margin-top: -6px; } }

/* ── Round 24: scroll speed ──────────────────────────────────────────── */
/* A batch of rows drawn ahead is skipped while off screen. */
.row-chunk { content-visibility: auto; }
/* Separators run across batches; only the list's very last row drops it. */
.row-chunk > .row:last-child::after { display: block; }
.row-chunk:last-of-type > .row:last-child::after { display: none; }
/* A row's focus ring sits inside it, so a skipped batch's edge never cuts it. */
.row:focus-visible { outline-offset: -3px; }

/* ── Round 24: good-css.com techniques ───────────────────────────────── */
:root { interpolate-size: allow-keywords; font-synthesis: none; }
/* No double-tap zoom delay on controls. */
a, button, summary, label, select, [role="button"] { touch-action: manipulation; }
/* Find-in-page and focus never land under the sticky search bar. */
.scroller { scroll-padding-block-start: 104px; }
/* Unit letter groups open and close by animating their real height. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .letter-group::details-content { block-size: 0; overflow: clip; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
    .letter-group[open]::details-content { block-size: auto; }
  }
}
/* Labels centred on their letters, not on the font's ascender box. */
@supports (text-box: trim-both cap alphabetic) {
  .chip, .seg button, .btn, .act { text-box: trim-both cap alphabetic; }
}

/* ── Round 24: desktop polish (impeccable pass) ──────────────────────── */
/* The flip's arrows sit beside the figure they flip, not at the cell's end. */
.flip { width: fit-content; max-width: 100%; }
@media (min-width: 720px) {
  /* Hairlines stop at the content column, like the headings and the text. */
  .row::after { right: var(--gutter); }
  .lb-rest { border-top: 0; background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
  /* Text links start on the column edge, not 4px in. */
  .lb-all, .lb-share { margin-inline-start: -4px; }
}
@media (min-width: 1000px) {
  /* Six service facts read three and three, not four and two. */
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  /* The long list (time in rank) runs beside two short ones. */
  #idle > .half.span2 { grid-row: span 2; }
}

/* ── Round 25: phone density ─────────────────────────────────────────── */
/* A row's figure stacks over its unit, so the name and facts keep the width. */
@media (max-width: 430px) {
  .row-meta b { display: block; font-size: 15px; }
  .row-meta { line-height: 1.25; }
}

/* ── Round 27: viral, Reactions resting ── */
.viral-note { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #c9a227 45%, var(--line)); background: color-mix(in srgb, #c9a227 8%, var(--bg-2)); color: var(--ink); font-size: 14.5px; line-height: 1.4; text-wrap: pretty; }
#idle > .viral-note { grid-column: 1 / -1; }
.tap-rest { margin: -2px 0 14px; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
/* No false zeros: unknown counts stay hidden, last-known ones show. */
.taps.resting:not(.known) .tap-n { visibility: hidden; }