/* ==========================================================================
   Sentinel: design system

   The rules this file holds itself to, and why:

   - The page is almost entirely achromatic so that the four SEVERITY colours
     are the only saturated thing a researcher sees. On a bug bounty site red
     means Critical; it cannot also mean a logo, a button or a 404.
   - Exactly one accent hue (#12558f / #7db4e8), used for three things only:
     link text, focus rings, active nav. Never a fill, never decoration.
   - Three font weights: 400 / 500 / 600. Values like 570 do not exist: on a
     static UI face everything from 560 up resolves to Bold, so a 15-weight
     scale silently renders as two.
   - Borders, not shadows. One shadow token, permitted on overlays only.
   - Two radii: 3px and 6px.
   - No transform on hover, no keyframes, no smooth scroll. A reference
     document should jump to an anchor, not animate to it.
   - Micro-caps (uppercase + tracking) is two roles: table headers and stat
     labels. Not eleven.

   1. Tokens        5. Program table      9. Hall of fame
   2. Base          6. Home              10. Updates
   3. Layout        7. Directory         11. Docs & prose
   4. Controls      8. Program page      12. Footer · Responsive · Print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Self-hosted, subset to the Latin range this site uses: 4.7 KB + 4.8 KB.
   Same-origin, so the "no external requests" promise holds. Mono is used for
   technical data only (identifiers, CVSS, money, table numerals), where a
   consistent face across platforms is worth more than the default stack. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jbmono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jbmono-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* surfaces */
  --bg:       #ffffff;
  --bg-2:     #f6f7f8;
  --bg-3:     #eceef0;

  /* lines: border-2 is the interactive edge and meets WCAG 1.4.11 (3.32:1) */
  --border:   #d8dbdf;
  --border-2: #868e97;

  /* ink */
  --text:     #14181c;   /* 17.84:1 */
  --text-2:   #474d54;   /*  8.55:1 */
  --text-3:   #646b73;   /*  5.39:1 on bg, 4.64:1 on bg-3 */

  /* the one accent */
  --accent:    #12558f;  /* 7.72:1 */
  --accent-2:  #0c3f6d;
  --accent-bg: #e8f0f7;

  /* program status */
  --ok:     #146c43;
  --ok-bg:  #e6f2ec;
  --warn:   #8a5200;
  --warn-bg:#f7efe2;

  /* severity: the only saturated colour on the page. Fixed fills, not
     color-mix over transparent, so contrast does not drift on row hover. */
  --sev-critical:    #a3122b;  --sev-critical-bg: #f7e7ea;
  --sev-high:        #b93c0b;  --sev-high-bg:     #f9ece6;
  --sev-medium:      #8a5f05;  --sev-medium-bg:   #f5efe2;
  --sev-low:         #556069;  --sev-low-bg:      #e3e6e9;
  --sev-none:        var(--text-3);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  --r-1: 3px;
  --r-2: 6px;

  --shadow-overlay: 0 8px 24px -6px rgba(8, 12, 20, .18),
                    0 2px 6px -2px rgba(8, 12, 20, .10);

  --wrap: 1200px;
  --gutter: 20px;
  --header-h: 52px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

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

  --bg:       #0e1013;
  --bg-2:     #16191d;
  --bg-3:     #1e2227;

  --border:   #2a2f35;
  --border-2: #626a72;   /* 3.47:1 */

  --text:     #e7e9ec;
  --text-2:   #a5acb4;
  --text-3:   #838b93;

  --accent:    #7db4e8;
  --accent-2:  #a8cdf2;
  --accent-bg: #15212c;

  --ok:     #4bbd80;
  --ok-bg:  #13221b;
  --warn:   #d9a13a;
  --warn-bg:#241e13;

  --sev-critical:    #f0798c;  --sev-critical-bg: #2a1a1e;
  --sev-high:        #f09155;  --sev-high-bg:     #2a1f19;
  --sev-medium:      #d9b04a;  --sev-medium-bg:   #262117;
  --sev-low:         #9aa4ae;  --sev-low-bg:      #252a30;

  --shadow-overlay: 0 8px 24px -6px rgba(0, 0, 0, .6),
                    0 2px 6px -2px rgba(0, 0, 0, .45);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Where an anchor lands: clear of the sticky header, and of the sticky
     section bar a program page puts under it. Stated once, here. A
     `scroll-margin-top` on the target would ADD to this rather than replace
     it, which is how a tab click used to land 204px down the page with the
     tail of the previous section still wedged under the bar. The scroll spy
     reads this value back, so the two cannot drift apart. */
  scroll-padding-top: calc(var(--header-h) + 48px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;       /* 14px: app chrome, tables, rows, controls */
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text); }
h1 { font-size: 1.625rem; line-height: 1.25; letter-spacing: -0.012em; }
h2 { font-size: 1.125rem; line-height: 1.30; letter-spacing: -0.008em; }
h3 { font-size: 0.9375rem; line-height: 1.40; }

p { margin: 0 0 0.85rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg { max-width: 100%; }
svg { vertical-align: middle; flex-shrink: 0; }

/* Absolute, not em: 0.875em compounds inside a 14px cell and renders the
   scope table's asset identifiers (the primary content) at ~12px. */
code, pre, .mono { font-family: var(--mono); font-size: 0.8125rem; }
.tnum { font-variant-numeric: tabular-nums; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--text); color: var(--bg); }

/* The filter JS toggles `hidden`; components below set an explicit display,
   which would otherwise beat the UA rule and leave filtered-out rows on screen. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 8px 14px; border-radius: var(--r-2); font-weight: 500;
}
.skip-link:focus { top: 10px; text-decoration: none; }
.skip-link:hover, .skip-link:focus { color: var(--bg); }

.muted { color: var(--text-3); }
.small { font-size: 0.8125rem; }
.nowrap { white-space: nowrap; }

/* The one label/value primitive. Replaces four near-identical components. */
/* minmax(0,1fr), not auto: a long contact address in a 260px sidebar
   otherwise overflows the panel instead of wrapping inside it. */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr);
      gap: var(--s-1) var(--s-4); margin: 0; }
.kv dt { font-size: 0.8125rem; color: var(--text-3); }
.kv dd { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--text);
         text-align: right; font-variant-numeric: tabular-nums;
         min-width: 0; overflow-wrap: anywhere; }
.kv-stack { grid-template-columns: auto; gap: 2px; }
.kv-stack dt {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.2;
}
.kv-stack dd { font-size: 1.0625rem; text-align: left; font-family: var(--mono); }

/* 3. Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding: var(--s-7) 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--border); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--border);
}
.section-head p { margin: var(--s-1) 0 0; max-width: 64ch; font-size: 0.8125rem; color: var(--text-3); }

.page-head { padding: var(--s-5) 0 18px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.page-head h1 { margin-bottom: 6px; }

.lede { font-size: 0.9375rem; color: var(--text-2); max-width: 70ch; }

.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--text-3); margin-bottom: var(--s-3);
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text-2); }

.two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-9); }

.link-arrow { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.link-arrow:hover { text-decoration: none; }

/* 4. Header, controls, chips ----------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--s-6); }

.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; font-size: 0.9375rem; }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark { color: var(--text); }

.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav > a, .nav-menu > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r-1);
  color: var(--text-2); font-size: 0.875rem; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.site-nav > a:hover, .nav-menu > summary:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.site-nav > a[aria-current] { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { color: var(--text-3); }
.nav-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 110;
  width: 300px; padding: var(--s-1);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-2); box-shadow: var(--shadow-overlay);
  display: grid; gap: 1px;
}
.nav-menu-panel a { display: grid; gap: 1px; padding: 7px 10px; border-radius: var(--r-1); color: var(--text); }
.nav-menu-panel a:hover { background: var(--bg-2); text-decoration: none; }
.nav-menu-panel strong { font-size: 0.8125rem; font-weight: 500; }
.nav-menu-panel span { font-size: 0.75rem; color: var(--text-3); line-height: 1.4; }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-2); }

.theme-toggle {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  cursor: pointer; background: transparent; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--r-1);
  transition: background-color .12s ease, color .12s ease;
}
.theme-toggle:hover { background: var(--bg-2); color: var(--text); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none; margin-left: auto; width: 34px; height: 34px; padding: 0;
  cursor: pointer; background: transparent; color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-1);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border: 1px solid transparent; border-radius: var(--r-2);
  cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500;
  white-space: nowrap; transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }
/* Primary is ink, not a hue: if the loudest colour on a program page were a
   CTA, the severity ramp would be permanently in second place. */
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--text-2); color: var(--bg); }
.btn-ghost { background: var(--bg); color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--text); }
.btn-sm { padding: 5px 11px; font-size: 0.8125rem; }
.btn-lg { padding: 9px 16px; }

.btn-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.8125rem; color: var(--accent); }
.btn-link:hover { text-decoration: underline; }

input[type="search"], input[type="text"], select {
  font: inherit; font-size: 0.875rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--r-2); padding: 6px 10px; width: 100%;
  transition: border-color .12s ease;
}
/* Never `outline: none` here: this selector outranks the global
   :focus-visible rule, and the soft halo it replaced the outline with measures
   1.15:1: invisible, and ignored outright by native checkboxes and radios. */
input:focus, select:focus { border-color: var(--accent); }
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
input::placeholder { color: var(--text-3); }
input[type="search"]::-webkit-search-cancel-button { display: none; }
select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}

/* Inert chip: says what a thing is. Carries no colour; colour is severity. */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--r-1);
  background: var(--bg-3); color: var(--text-2);
  font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.chip-managed { background: transparent; color: var(--text-3); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem;
          color: var(--text-2); white-space: nowrap; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.status-active { color: var(--ok); }
.status-active .dot { background: var(--ok); }
.status-paused { color: var(--warn); }
.status-paused .dot { background: var(--warn); }

/* One avatar treatment. The fill is the program's own brand colour, which is
   legitimate identity; researcher avatars are gone, and their colour was derived
   from a loop index, so the same person changed colour between pages. */
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r-1);
  background: var(--avatar-color, var(--text-2));
  color: #fff; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
}
.avatar-xs { width: 18px; height: 18px; font-size: 0.5625rem; }
.avatar-lg { width: 44px; height: 44px; border-radius: var(--r-2); font-size: 0.9375rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tag {
  display: inline-block; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: var(--r-1);
  font-family: var(--mono); font-size: 0.6875rem; color: var(--text-2);
}
a.tag:hover { border-color: var(--border-2); color: var(--text); text-decoration: none; }
.tag-more { border-color: transparent; color: var(--text-3); padding-inline: 2px; }

/* Severity: fill + label, no border. The word carries the meaning, so the
   chip never relies on colour alone (SC 1.4.1). */
.sev {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-1);
  font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
  color: var(--sev-fg, var(--sev-none)); background: var(--sev-bg, transparent);
}
/* VRT tier label. Deliberately colourless: the tier is an ordering, the
   colour belongs to severity. */
.sev-cell { white-space: nowrap; }
.prio {
  display: inline-block; margin-right: 6px; min-width: 2ch;
  font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3);
}
.sev-critical { --sev-fg: var(--sev-critical); --sev-bg: var(--sev-critical-bg); }
.sev-high     { --sev-fg: var(--sev-high);     --sev-bg: var(--sev-high-bg); }
.sev-medium   { --sev-fg: var(--sev-medium);   --sev-bg: var(--sev-medium-bg); }
.sev-low      { --sev-fg: var(--sev-low);      --sev-bg: var(--sev-low-bg); }


.notice {
  display: flex; align-items: flex-start; gap: var(--s-2); text-align: left;
  padding: 8px 11px; border-radius: var(--r-2); font-size: 0.8125rem; line-height: 1.5;
}
.notice svg { margin-top: 2px; }
.notice-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--border); }

/* 5. Program table --------------------------------------------------------- */
/* A directory exists so programs can be compared on reward, response and
   scope. Comparison is a vertical scan down one column, which is what a table
   is for; a card grid turns every comparison into a two-axis saccade. */
.ptable-wrap {
  border: 1px solid var(--border); border-radius: var(--r-2); overflow-x: auto;
  container-type: inline-size;
}
/* The org name is context, the program name is identity. When the table is
   narrow (the directory page gives up 240px to the filter rail), drop the org
   rather than truncate both. Keyed to the table's own width, so the home page
   and the directory behave correctly without page-specific rules. */
@container (max-width: 1000px) {
  .prog-org, .prog-sep { display: none; }
}
/* Fixed layout: a long org name must not be allowed to widen the table and
   push the Technology column off the right edge. It ellipsises instead. */
.ptable { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 880px; }
.ptable .col-model  { width: 66px; }
.ptable .col-status { width: 132px; }
.ptable .col-triage { width: 72px; }
.ptable .col-reward { width: 120px; }
.ptable .col-resp   { width: 132px; }
.ptable .col-tech   { width: 116px; }
.ptable thead th {
  padding: 7px var(--s-3); text-align: left; white-space: nowrap;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
}
.ptable th.col-num { text-align: right; }
.ptable tbody tr { border-bottom: 1px solid var(--border); }
.ptable tbody tr:last-child { border-bottom: 0; }
.ptable tbody tr:hover { background: var(--bg-2); }
.ptable tbody tr:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.ptable td, .ptable tbody th {
  padding: 8px var(--s-3); vertical-align: middle; font-weight: 400; text-align: left;
}

.prog-cell { position: relative; }
.prog-id { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.prog-id > .avatar { width: 20px; height: 20px; font-size: 0.5625rem; }
.prog-name {
  flex: 0 1 auto; min-width: 9ch; font-size: 0.875rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-name:hover { color: var(--text); text-decoration: underline; }
.prog-org { flex: 0 999 auto; font-size: 0.8125rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-sep { color: var(--border-2); }
.stretched::after { content: ""; position: absolute; inset: 0; }

/* Qualified with .ptable td to outrank `.ptable td { text-align: left }`;
   without it the numbers sat left under right-aligned headers. */
.ptable td.cell-reward {
  text-align: right; white-space: nowrap; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ptable td.cell-resp {
  text-align: right; white-space: nowrap; color: var(--text-2);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
}
.cell-triage { color: var(--text-3); font-size: 0.8125rem; white-space: nowrap; }
.cell-tech .tag-list { flex-wrap: nowrap; }
.cell-tech .tag { white-space: nowrap; }

.result-count { margin: 0 0 var(--s-3); font-size: 0.8125rem; color: var(--text-3); }
.empty-state {
  display: grid; justify-items: center; gap: var(--s-2); text-align: center;
  padding: var(--s-9) var(--s-5); color: var(--text-3);
  border: 1px dashed var(--border-2); border-radius: var(--r-2);
}
.empty-state h2 { font-size: 1rem; color: var(--text); }
.empty-state p { margin: 0; font-size: 0.875rem; }

/* 6. Home ------------------------------------------------------------------ */
/* No hero. Say what the site is, give the search, and show the directory. */
.home-head { background: var(--bg-2); border-bottom: 1px solid var(--border); padding: var(--s-6) 0 var(--s-5); }
.home-head h1 { margin-bottom: 6px; max-width: 40ch; }
.home-head .lede { margin-bottom: var(--s-3); }

/* The six numbers that used to need a 350px floating panel, in one line. */
.stat-line { font-size: 0.8125rem; color: var(--text-3); margin-bottom: var(--s-4); }
.stat-line b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-line span { white-space: nowrap; }

.home-search { position: relative; display: flex; gap: var(--s-2); max-width: 420px; }
.home-search input { padding-left: 32px; }
.home-search-icon { position: absolute; left: 10px; top: 15px; color: var(--text-3); pointer-events: none; z-index: 1; }

.update-list > li { display: grid; grid-template-columns: 58px 1fr; gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--border); }
.update-list > li:last-child { border-bottom: 0; }
.update-list time { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); padding-top: 2px; }
.update-list a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-2); }
.update-list p { margin: 2px 0 0; font-size: 0.875rem; color: var(--text); }

.leader-list > li { display: flex; align-items: baseline; gap: var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.leader-list > li:last-child { border-bottom: 0; }
.leader-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.leader-name strong { font-size: 0.875rem; font-weight: 500; }
.leader-name span { font-size: 0.75rem; color: var(--text-3); }
.points { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
/* Rank is an ordinal, not a medal. */
.rank { display: inline-block; min-width: 18px; font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); text-align: right; }

/* 7. Directory ------------------------------------------------------------- */
.directory { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-6) var(--s-9); }
.filters { position: sticky; top: calc(var(--header-h) + var(--s-4)); align-self: start; }
.filters-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); }
.filters-head h2 { font-size: 0.875rem; }

.filter-group { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.filter-group legend { padding: 0 0 6px; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.radio, .check {
  display: flex; align-items: center; gap: var(--s-2); height: 26px;
  padding: 0 6px; margin: 0 -6px; border-radius: var(--r-1);
  font-size: 0.8125rem; color: var(--text-2); cursor: pointer;
}
.radio:hover, .check:hover { background: var(--bg-2); color: var(--text); }
.radio input, .check input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.radio span, .check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio em, .check em { font-style: normal; font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.filter-scroll { max-height: 260px; overflow-y: auto; scrollbar-width: thin; }

.toolbar { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.search-field { position: relative; flex: 1; min-width: 200px; }
.search-field > svg:first-child { position: absolute; left: 10px; top: 9px; color: var(--text-3); pointer-events: none; }
.search-field input { padding-left: 32px; padding-right: 30px; }
.search-clear {
  position: absolute; right: 6px; top: 7px;
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  background: var(--bg-3); border: 0; border-radius: var(--r-1);
  color: var(--text-3); cursor: pointer;
}
.search-clear:hover { color: var(--text); }
.toolbar-right { display: flex; align-items: center; gap: var(--s-2); }
.toolbar-right select { width: auto; min-width: 160px; }
.filters-toggle { display: none; }

/* 8. Program page ---------------------------------------------------------- */
.program-hero { padding: var(--s-5) 0 var(--s-5); background: var(--bg-2); border-bottom: 1px solid var(--border); }
.program-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr) 210px; gap: var(--s-5); align-items: start; }
.program-hero-title { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: 2px; }
.program-hero-title h1 { font-size: 1.5rem; }
.program-org { margin: 0 0 var(--s-2); font-size: 0.8125rem; color: var(--text-3); }
.program-hero-copy .lede { margin-bottom: var(--s-3); }

.program-facts { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); font-size: 0.8125rem; color: var(--text-2); }
.program-facts li { display: inline-flex; align-items: center; gap: 6px; }
.program-facts svg { color: var(--text-3); }

.program-hero-actions { display: grid; gap: var(--s-2); justify-items: stretch; }
.program-hero-actions p { margin: 0; font-size: 0.75rem; color: var(--text-3); }

.metrics-band { border-bottom: 1px solid var(--border); }
.metrics-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.metric-group { padding: var(--s-4) 0; }
.metric-group + .metric-group { border-left: 1px solid var(--border); padding-left: var(--s-6); }
.metric-group > h2 { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); margin-bottom: var(--s-3); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }

.section-nav { position: sticky; top: var(--header-h); z-index: 60; background: var(--bg); border-bottom: 1px solid var(--border); }
.section-nav-inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav a {
  padding: 9px 11px; white-space: nowrap; font-size: 0.8125rem;
  color: var(--text-2); border-bottom: 2px solid transparent;
}
.section-nav a:hover { color: var(--text); text-decoration: none; }
.section-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.program-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-8); padding-block: var(--s-7) var(--s-9); align-items: start; }
.doc-section { margin-bottom: var(--s-8); }
.doc-section:last-child { margin-bottom: 0; }
.doc-section > h2 { margin-bottom: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.doc-section > h3 { margin: var(--s-5) 0 var(--s-2); }
.doc-section > .muted { margin: var(--s-2) 0 var(--s-3); font-size: 0.8125rem; }

.exclusion-list { display: grid; gap: 6px; }
.exclusion-list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: 0.875rem; color: var(--text-2); line-height: 1.5; }
.exclusion-list svg { color: var(--text-3); margin-top: 3px; }

/* A changelog is a list of dated entries. It does not need a rail or a card. */
.timeline li { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: 0; }
.timeline time { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.timeline h2, .timeline h3 { margin: 3px 0 4px; font-size: 0.9375rem; }
.timeline p { margin: 0; font-size: 0.875rem; color: var(--text-2); line-height: 1.55; }

.program-side, .doc-side {
  position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: var(--s-4);
  align-self: start; max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; scrollbar-width: thin;
}
.side-card { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-2); }
.side-card + .side-card { margin-top: calc(var(--s-4) * -1); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); }
.side-card:has(+ .side-card) { border-radius: var(--r-2) var(--r-2) 0 0; }
.side-card > h2 { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); margin-bottom: var(--s-3); }
.side-card .kv { margin-bottom: var(--s-3); }
.side-card .kv dd { font-weight: 400; }

.side-links { display: grid; gap: 1px; }
.side-links a, .side-links button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 5px 7px; margin: 0 -7px; border: 0; background: none;
  border-radius: var(--r-1); cursor: pointer; font: inherit;
  font-size: 0.8125rem; text-align: left; color: var(--text-2);
}
.side-links a:hover, .side-links button:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.side-links a[aria-current], .side-links button.is-active { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.side-links em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

.toc { display: grid; }
.toc a { display: block; padding: 4px 0 4px 10px; border-left: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-3); line-height: 1.4; }
.toc a:hover { color: var(--text); border-left-color: var(--border-2); text-decoration: none; }
.toc a.is-active { color: var(--accent); border-left-color: var(--accent); }
.toc .toc { margin-left: 10px; }

.check-list { display: grid; gap: 5px; margin-bottom: var(--s-3); }
.check-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 0.8125rem; color: var(--text-2); line-height: 1.45; }
.check-list svg { color: var(--text-3); margin-top: 2px; }

/* Tables ------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table thead th {
  padding: 7px var(--s-3); text-align: left; white-space: nowrap;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
}
.table tbody th, .table tbody td {
  padding: 9px var(--s-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); font-weight: 400;
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-2); }
.table tbody th { font-weight: 500; color: var(--text); }
.table .cell-wide { color: var(--text-2); min-width: 210px; line-height: 1.45; }
.rewards-table td strong, .hof-table td:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }
.hof-table .hof-handle { font-family: var(--mono); font-size: 0.8125rem; }
.mini-programs { display: flex; gap: 3px; flex-wrap: wrap; }

/* 9. Hall of fame ---------------------------------------------------------- */
/* A podium is a game UI; this is a leaderboard, so the table is the page. */
.hof-note { margin: 0 0 var(--s-4); font-size: 0.8125rem; color: var(--text-3); }

/* 10. Updates -------------------------------------------------------------- */
.updates-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: var(--s-8); padding-block: var(--s-6) var(--s-9); align-items: start; }
.timeline-wide li { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); }
.timeline-program { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-3); }
.timeline-wide h2 { font-size: 0.9375rem; margin: 4px 0; }
.updates-side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }

/* 11. Docs & prose --------------------------------------------------------- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: var(--s-8); padding-block: var(--s-6) var(--s-8); align-items: start; }
.doc-main { max-width: 72ch; }

.prose { font-size: 1rem; color: var(--text-2); line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 1.8em 0 .55em; font-size: 1.125rem; color: var(--text); }
.prose h3 { margin: 1.5em 0 .45em; font-size: 1rem; color: var(--text); }
.prose p { margin: 0 0 1em; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.prose li { list-style: disc; margin-bottom: .35em; }
.prose ol > li { list-style: decimal; }
.prose li::marker { color: var(--text-3); }
.prose blockquote { margin: 1.2em 0; padding: 2px 0 2px 15px; border-left: 2px solid var(--border-2); color: var(--text-3); }
.prose code { padding: 1px 4px; border-radius: var(--r-1); background: var(--bg-3); color: var(--text); }
.prose pre { margin: 1.2em 0; padding: 13px 15px; overflow-x: auto; background: var(--bg-3); border-radius: var(--r-2); line-height: 1.55; }
.prose pre code { padding: 0; background: none; }
.prose table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 0.875rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.prose thead th {
  background: var(--bg-2); color: var(--text-3); font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding-bottom: var(--s-9); }
.pager-link { display: grid; gap: 2px; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text); }
.pager-link:hover { border-color: var(--border-2); color: var(--text); text-decoration: none; }
.pager-link span { font-size: 0.8125rem; color: var(--text-3); }
.pager-link strong { font-weight: 500; font-size: 0.875rem; }
.pager-next { text-align: right; }

/* 12. Footer --------------------------------------------------------------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-top: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); padding-bottom: var(--s-7); }
.footer-brand p { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--text-3); max-width: 42ch; }
.footer-note { font-size: 0.75rem !important; }
.footer-grid h2 { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); margin-bottom: var(--s-3); }
.footer-grid ul { display: grid; gap: 6px; }
.footer-grid li a { font-size: 0.8125rem; color: var(--text-3); }
.footer-grid li a:hover { color: var(--accent); }
.footer-bottom { padding: var(--s-3) var(--gutter); border-top: 1px solid var(--border); }
.footer-bottom p { margin: 0; font-size: 0.75rem; color: var(--text-3); }

.error-page { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-9) 0; max-width: 60ch; }

/* Responsive --------------------------------------------------------------- */
@media (min-width: 1200px) { :root { --gutter: 24px; } }

@media (max-width: 1080px) {
  .program-hero-main { grid-template-columns: auto minmax(0, 1fr); }
  .program-hero-actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; justify-items: start; }
  .program-body, .doc-layout, .updates-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .program-side, .doc-side, .updates-side { position: static; max-height: none; grid-template-columns: repeat(2, 1fr); }
  .side-card + .side-card { margin-top: 0; border-top: 1px solid var(--border); border-radius: var(--r-2); }
  .side-card:has(+ .side-card) { border-radius: var(--r-2); }
  .side-toc { display: none; }
  .directory { grid-template-columns: 1fr; gap: var(--s-4); }
  .filters { position: static; display: none; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-2); }
  .filters.is-open { display: block; }
  .filters-toggle { display: inline-flex; }
  .two-col { grid-template-columns: 1fr; gap: var(--s-7); }
  .metrics-band .wrap { grid-template-columns: 1fr; }
  .metric-group + .metric-group { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }
}

@media (max-width: 900px) {
  .ptable .col-tech, .ptable .cell-tech,
  .ptable .col-triage, .ptable .cell-triage,
  .ptable .col-model, .ptable .cell-model { display: none; }
  /* Three columns just went away; keeping the 880px floor would scroll the
     table sideways to show width that is no longer used. */
  .ptable { min-width: 0; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; place-items: center; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 1px;
    padding: var(--s-3) var(--s-4); background: var(--bg);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-overlay);
  }
  .site-nav.is-open { display: flex; }
  .nav-menu-panel { position: static; width: auto; box-shadow: none; margin-top: 5px; }
  .nav-actions { margin: var(--s-2) 0 0; justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .doc-pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-wide li { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding: var(--s-6) 0; }
  .home-search { flex-direction: column; }
  .home-search .btn { width: 100%; }
  /* The table stops being a table: columns have no room to align. The
     880px floor and the fixed layout have to go with it, or the stacked
     rows inherit a width the viewport does not have. */
  .ptable { table-layout: auto; }  /* min-width: 0 already set at <=900px */
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tbody tr { padding: var(--s-3); }
  .ptable td { padding: 0; }
  .ptable td.cell-reward, .ptable td.cell-resp { text-align: left; display: inline; white-space: normal; }
  .ptable .cell-status { display: inline-block; width: auto; margin-right: var(--s-3); }
  .ptable .cell-reward::before { content: "Reward "; color: var(--text-3); font-weight: 400; }
  .ptable .cell-resp::before { content: " · 1st response "; color: var(--text-3); }
  .program-hero-main { grid-template-columns: 1fr; }
  .program-hero-actions { grid-auto-flow: row; }
  .program-side, .doc-side, .updates-side { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .toolbar-right { width: 100%; }
  .toolbar-right select { flex: 1; min-width: 0; }
}

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

@media print {
  .site-header, .site-footer, .section-nav, .filters, .toolbar,
  .program-hero-actions, .doc-pager { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .program-body, .doc-layout { grid-template-columns: 1fr; }
  .table-wrap, .ptable-wrap { overflow: visible; border: 1px solid #999; }
  /* (0,0,1) loses to every scoped link rule, and the dark tokens
     were still in force when printing from dark mode. */
  :root, :root[data-theme="dark"] {
    --bg: #fff; --bg-2: #fff; --bg-3: #f2f2f2;
    --text: #000; --text-2: #222; --text-3: #444;
    --border: #bbb; --border-2: #888; --accent: #000;
  }
  a, a:hover { color: #000; text-decoration: underline; }
}