/* Flawharbor web UI. The light theme takes the marketing site's palette (paper and cream
   grounds, forest ink and actions, an orange accent); the dark theme keeps its chart-paper
   night colors. Signal-flag severities are the same in both. The one strong element is the
   passage track (a finding's route to verified closure); everything else stays quiet.
   The chooser in the top bar (theme.js) sets data-theme on <html>; without it, the OS decides. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/ui/dm-sans-400-700.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/ui/manrope-400-800.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/ui/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/ui/ibm-plex-mono-500.woff2) format("woff2"); }
:root {
  --paper: #f7f8f2; --surface: #fff; --ink: #183d34; --muted: #68736b; --line: #dce2d6; --tide: #f0f2e9;
  --harbor: #163e35; --harbor-ink: #fff; --bad: #b42318; --bad-tint: #fdecea; --good: #294a35; --good-tint: #e6f0d4;
  --focus: #b6754d; --accent: #b6754d;
  --sev-critical: #b42318; --sev-high: #c4560f; --sev-medium: #9a6b00; --sev-low: #2c64a6; --sev-info: #6a7883;
  --r-control: 6px; --r-panel: 10px;
  --display: "Manrope", "DM Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", var(--mono);
  color-scheme: light;
  font: 15px/1.5 "DM Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* The dark palette, unchanged: for the OS preference unless the chooser says light, and for the chooser's dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1820; --surface: #15232d; --ink: #e4ecf0; --muted: #93a5b0; --line: #2b3d49; --tide: #1b2f3b;
    --harbor: #7db8d6; --harbor-ink: #0e1820; --bad: #f2877c; --bad-tint: #3a1e1c; --good: #7cc4a0; --good-tint: #17302a;
    --focus: #e09f1f; --accent: #e8a276;
    --sev-critical: #f2877c; --sev-high: #f0a35e; --sev-medium: #d9b45a; --sev-low: #82b0e3; --sev-info: #93a5b0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1820; --surface: #15232d; --ink: #e4ecf0; --muted: #93a5b0; --line: #2b3d49; --tide: #1b2f3b;
  --harbor: #7db8d6; --harbor-ink: #0e1820; --bad: #f2877c; --bad-tint: #3a1e1c; --good: #7cc4a0; --good-tint: #17302a;
  --focus: #e09f1f; --accent: #e8a276;
  --sev-critical: #f2877c; --sev-high: #f0a35e; --sev-medium: #d9b45a; --sev-low: #82b0e3; --sev-info: #93a5b0;
  color-scheme: dark;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: var(--harbor); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num, .ref, time { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 6px 10px; z-index: 3; }

/* ---------- top bar ---------- */
.top { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 8px; align-items: center; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); text-decoration: none; letter-spacing: -.04em; line-height: 1; }
.brand-mark { width: 26px; height: 26px; color: var(--ink); }
.brand-period { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); }
.me select { padding: 3px 6px; font-size: .85rem; }
nav { display: flex; flex: 1; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
nav a { color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--ink); }
nav a[aria-current=page] { color: var(--ink); border-bottom-color: var(--harbor); font-weight: 600; }
.me { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: .9rem; }

/* ---------- status line ---------- */
#status { margin: 0; }
#status:not(:empty) { padding: 8px 24px; background: var(--good-tint); color: var(--good); border-bottom: 1px solid var(--line); }
#status.error:not(:empty) { background: var(--bad-tint); color: var(--bad); }

/* ---------- page ---------- */
main { padding: 20px 24px 64px; }
main:focus { outline: none; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.015em; font-weight: 700; }
h2 { font-size: 1.1rem; margin: 28px 0 10px; }
h3 { font-size: 1rem; margin: 16px 0 8px; }
.lede { color: var(--muted); margin: 0 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.bad { color: var(--bad); }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px 18px; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.stack > * + * { margin-top: 16px; }
.scroll { overflow-x: auto; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: 10px 0 4px; }
label.inline { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; margin: 4px 16px 4px 0; }
.hint { color: var(--muted); font-size: .82rem; margin-top: 4px; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--muted); }
textarea { min-height: 5.5em; resize: vertical; }
textarea.code, .code { font-family: var(--mono); font-size: .86rem; }
button { padding: 8px 14px; border: 1px solid var(--harbor); border-radius: var(--r-control); background: var(--harbor); color: var(--harbor-ink); cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.08); }
button.secondary { background: transparent; color: var(--harbor); }
button.quiet { background: transparent; border-color: var(--line); color: var(--ink); font-weight: 500; }
button.link { border: 0; background: none; color: var(--harbor); padding: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; filter: none; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.row > * { flex: 1 1 180px; }
.row > button, .row > .shrink { flex: 0 0 auto; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
fieldset { border: 0; padding: 0; margin: 8px 0; }
legend { font-weight: 600; font-size: .9rem; padding: 0; }
details > summary { cursor: pointer; font-weight: 600; color: var(--harbor); }
details[open] > summary { margin-bottom: 10px; }

/* ---------- sign in ---------- */
.signin { min-height: 70vh; display: grid; place-items: center; }
.signin .panel { width: min(400px, 100%); padding: 28px; }
.signin h1 { font-size: 1.4rem; margin-bottom: 4px; }
.signin button[type=submit] { width: 100%; margin-top: 18px; padding: 10px; }
.sso { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.sso a { display: block; text-align: center; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-control); text-decoration: none; color: var(--ink); font-weight: 500; }

/* ---------- severity flag ---------- */
.sev { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.sev::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.sev-critical { color: var(--sev-critical); } .sev-high { color: var(--sev-high); } .sev-medium { color: var(--sev-medium); }
.sev-low { color: var(--sev-low); } .sev-info { color: var(--sev-info); }

/* severity summary: counts that filter the list */
.tally { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.tally button { display: inline-flex; gap: 8px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 500; padding: 6px 12px; border-radius: 999px; }
.tally button[aria-pressed=true] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; background: var(--tide); }
.tally button .sev { font-weight: 500; }
.tally b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ---------- the passage: route to verified closure ---------- */
.passage { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: none; }
.passage li { position: relative; padding-top: 22px; font-size: .85rem; color: var(--muted); }
.passage li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px; background: var(--line); }
.passage li::after { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.passage li.done::before, .passage li.here::before { background: var(--harbor); }
.passage li.done::after { background: var(--harbor); border-color: var(--harbor); }
.passage li.here { color: var(--ink); font-weight: 700; }
.passage li.here::after { border-color: var(--harbor); box-shadow: 0 0 0 4px var(--tide); }
.passage li:last-child::before { right: auto; width: 13px; }
.offroute { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 0; padding: 4px 10px; border-radius: var(--r-control); background: var(--tide); font-size: .88rem; }
@media (max-width: 560px) {
  .passage { grid-template-columns: 1fr; gap: 0; }
  .passage li { padding: 0 0 10px 26px; }
  .passage li::before { top: 0; bottom: 0; left: 5px; right: auto; width: 3px; height: auto; }
  .passage li::after { top: 4px; }
  .passage li:last-child::before { display: none; }
}
/* compact form in tables */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.pips i { width: 12px; height: 4px; border-radius: 2px; background: var(--line); }
.pips i.on { background: var(--harbor); }
.pips.off i.on { background: var(--muted); }
.state, td.c-sla { white-space: nowrap; }
td.summary { min-width: 24ch; max-width: 52ch; overflow-wrap: anywhere; }

/* ---------- findings ---------- */
.with-rail { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .with-rail { grid-template-columns: 1fr; } .rail { order: 2; } }
.rail h2 { font-size: .95rem; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.views { list-style: none; margin: 0 0 18px; padding: 0; }
.views a { display: block; padding: 6px 10px; border-radius: var(--r-control); text-decoration: none; color: var(--ink); }
.views a:hover { background: var(--tide); }
.views a[aria-current=page] { background: var(--tide); font-weight: 600; box-shadow: inset 3px 0 0 var(--harbor); }
.repos { list-style: none; margin: 0 0 14px; padding: 0; }
.repos > li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.repos details { margin-top: 6px; }
.asset-list select { min-width: 4.5rem; }
.asset-list td:first-child { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .asset-list th { white-space: normal; }
  .asset-list :is(th, td):is(:nth-child(2), :nth-child(5)) { display: none; }
}
.views small { display: block; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; }
.tools { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: start; margin: 8px 0 16px; font-size: .88rem; }
.tools > details { flex: 0 1 auto; }
.tools > details[open] { flex: 1 1 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 14px; }
.search-help { font-size: .85rem; }
.search-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 8px 0 0; }

table { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--surface); }
.list { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
/* A wide table scrolls inside its frame instead of being clipped by it. */
.list.scroll { overflow-x: auto; }
.list table { border: 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: .82rem; color: var(--muted); white-space: nowrap; background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--tide); }
td.flag { width: 4px; padding: 0; }
td.flag i { display: block; width: 4px; min-height: 100%; height: 3.2em; }
.f-title a { font-weight: 600; text-decoration: none; color: var(--ink); }
.f-title a:hover { text-decoration: underline; }
.f-title small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; overflow-wrap: anywhere; }
.due-bad { color: var(--bad); font-weight: 600; }
.count { color: var(--muted); font-size: .88rem; margin: 0 0 8px; }
/* bulk disposition (REM-8): the checkbox column and the bar above the list */
td.pick { width: 1.4em; padding-right: 0; }
td.pick input { margin: 0; vertical-align: middle; }
.bulk { margin: 0 0 14px; }
.bulk > p { margin: 0 0 10px; }
.bulk .fields { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; }
.bulk .fields > div { flex: 1 1 220px; }
.bulk .fields > .wide { flex-basis: 100%; }
.bulk .fields textarea { min-height: 3.5em; }
.bulk-outcome:not(:empty) { margin: 0 0 14px; }
.bulk-outcome p { margin: 0; }
.skips { margin: 6px 0 0; padding-left: 1.2em; font-size: .88rem; }
.empty { padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-panel); color: var(--muted); }
.empty p { margin: 4px 0; }

.builder-row { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 8px; margin: 6px 0; align-items: end; }
.builder-row label { margin: 0 0 2px; font-size: .8rem; }
@media (max-width: 600px) { .builder-row { grid-template-columns: 1fr 1fr; } }
pre { background: var(--paper); border: 1px solid var(--line); padding: 10px; border-radius: var(--r-control); font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- finding detail ---------- */
.crumb { margin: 0 0 14px; font-size: .9rem; }
.f-head .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); margin: 6px 0 0; font-size: .92rem; }
.f-head .ref { color: var(--muted); font-weight: 600; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; margin-top: 18px; }
.detail aside { display: grid; gap: 16px; }
@media (max-width: 960px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  /* on one column, the next step comes before the long reading */
  .detail aside { display: contents; }
  .detail .next { order: -2; } .detail .review { order: -1; }
}
.next button { display: block; width: 100%; text-align: left; margin-top: 8px; }
.next button.secondary { background: var(--surface); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 2px 8px; border-radius: 999px; background: var(--tide); font-size: .82rem; }
.activity { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.activity > li { position: relative; padding: 0 0 16px 18px; }
.activity > li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.activity > li.c::before { border-color: var(--harbor); }
.activity time { color: var(--muted); font-size: .82rem; margin-left: 6px; }
.activity .body { margin-top: 2px; }
.activity ul { list-style: none; padding-left: 14px; border-left: 2px solid var(--line); margin: 8px 0 0; }
.evidence { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.evidence li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.review-state { display: inline-block; padding: 2px 8px; border-radius: var(--r-control); background: var(--tide); font-size: .85rem; }
.review-state.approved { background: var(--good-tint); color: var(--good); }
.review-state.changes_requested { background: var(--bad-tint); color: var(--bad); }

/* ---------- admin and account ---------- */
.yes { color: var(--good); } .no { color: var(--muted); }
.secret { font-family: var(--mono); letter-spacing: .04em; }
img.qr { display: block; width: 200px; height: 200px; border-radius: 4px; }

@media (max-width: 560px) {
  .top, main { padding-left: 16px; padding-right: 16px; }
  nav { flex: 1 1 100%; gap: 4px 16px; }
  .me { margin-left: auto; }
  #status:not(:empty) { padding: 8px 16px; }
  h1 { font-size: 1.45rem; }
  .search { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .passage li.here::after { transition: box-shadow .3s; }
}
.bg-critical { background: var(--sev-critical); } .bg-high { background: var(--sev-high); } .bg-medium { background: var(--sev-medium); }
.bg-low { background: var(--sev-low); } .bg-info { background: var(--sev-info); }
/* findings list as compact cards on phones */
@media (max-width: 640px) {
  .findings { overflow: visible; }
  .findings thead { display: none; }
  .findings tr { display: grid; grid-template-columns: 4px 1fr auto; grid-template-areas: "flag ref sla" "flag title title" "flag sev rev" "flag state state"; column-gap: 12px; row-gap: 4px; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
  .findings tbody tr:last-child { border-bottom: 0; }
  .findings td { border: 0; padding: 0; }
  .findings td.flag { grid-area: flag; } .findings td.flag i { height: 100%; }
  .findings .ref { grid-area: ref; color: var(--muted); font-size: .85rem; }
  .findings .f-title { grid-area: title; } .findings .c-sev { grid-area: sev; } .findings .c-state { grid-area: state; }
  .findings .c-rev { grid-area: rev; justify-self: end; } .findings .c-sla { grid-area: sla; justify-self: end; font-size: .85rem; }
  .findings .c-client { display: none; }
  .findings.pickable tr { grid-template-columns: 4px auto 1fr auto; grid-template-areas: "flag pick ref sla" "flag pick title title" "flag pick sev rev" "flag pick state state"; }
  .findings td.pick { grid-area: pick; align-self: start; }
}

/* ---------- shared: links that act as buttons, heading rows ---------- */
a.button { display: inline-block; padding: 8px 14px; border: 1px solid var(--harbor); border-radius: var(--r-control); background: var(--harbor); color: var(--harbor-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap; }
a.button:hover { filter: brightness(1.08); }
a.button.secondary { background: transparent; color: var(--harbor); }
a.button.quiet { background: transparent; border-color: var(--line); color: var(--ink); font-weight: 500; }
button.danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.head-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.head-row > h1, .head-row > h2, .head-row > h3 { margin-right: auto; }
section > .head-row > h2 { margin: 28px 0 10px; }
.actions.tight { margin-top: 0; gap: 8px; }
.later { margin-top: 28px; }
.row.narrow > * { flex: 0 1 260px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.sub { padding: 4px 0 4px 14px; border-left: 2px solid var(--line); margin-top: 6px; }
.result { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-panel); background: var(--good-tint); }
.result h3 { margin-top: 0; }
.once { padding: 12px 14px; border-radius: var(--r-panel); background: var(--good-tint); border: 1px solid var(--good); }
.once h3 { margin-top: 0; }
fieldset.panel { padding: 16px 18px; margin-inline: 0; }
fieldset.panel > legend { float: left; width: 100%; font-size: 1.1rem; margin-bottom: 4px; }
fieldset.panel > legend + * { clear: both; }
.f-head .head-row h1 { margin-bottom: 0; }

/* asset checkboxes */
.checks { max-height: 15em; overflow-y: auto; display: grid; gap: 2px; padding: 6px 10px; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.checks label.inline { margin: 2px 0; overflow-wrap: anywhere; }
.dread { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 12px; }

/* library */
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.entry > summary { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; color: var(--ink); font-weight: 400; }
.entry > summary .e-title { font-weight: 600; color: var(--ink); }
.entry[open] > summary { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.entry h3 { font-size: .95rem; }
.entries > li.panel h3 { margin: 0; }

/* admin */
.jump ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.jump a { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .88rem; }
.jump a:hover { background: var(--tide); }
.admin-sec { scroll-margin-top: 12px; padding-top: 4px; }
.admin-sec:focus { outline: none; }
.admin-sec > h2 { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 4px 0 0 24px; font-size: .88rem; }
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 12px; }
.rule-row { display: grid; grid-template-columns: 1.2fr 2fr .7fr 1.1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rule-row label { margin-top: 0; }
.rule-row .q { margin-top: 4px; font-family: var(--mono); overflow-wrap: anywhere; }
.rule-tools { display: flex; gap: 6px; align-self: end; }
.rule-tools button { padding: 6px 10px; }
@media (max-width: 760px) {
  .rule-row { grid-template-columns: 1fr 1fr; }
  .rule-row > :first-child, .rule-row > :nth-child(2), .rule-tools { grid-column: 1 / -1; }
}
table.matrix { width: auto; border: 1px solid var(--line); margin: 8px 0; }
table.matrix caption { text-align: left; padding: 0 0 6px; }
table.matrix th, table.matrix td { padding: 6px 8px; }
table.matrix tbody th { color: var(--ink); font-size: .85rem; }
table.matrix select { width: auto; min-width: 7.5em; padding: 4px 6px; font-weight: 600; }
.detail-cell { max-width: 48ch; overflow-wrap: anywhere; color: var(--muted); }
.detail-cell summary { color: var(--muted); font-weight: 400; }
.detail-cell pre { margin: 6px 0 0; }
.row > div:has(> .shrink-input) { flex: 0 0 7em; }
form[role=search] { margin-bottom: 12px; }
.upload { margin-top: 12px; }
ul.bad.small { padding-left: 18px; }

/* ---------- CodeRed evidence: markers, deliveries, attempts, keys ---------- */
.marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mark { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; font-size: .76rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.mark.verified { background: var(--tide); color: var(--harbor); border-color: var(--harbor); }
.mark.flagged { background: var(--bad-tint); color: var(--bad); }
.mark.unverified { color: var(--muted); border: 1px dashed var(--muted); }
.unverified-note { margin: 0; padding: 10px 12px; border: 1px dashed var(--muted); border-radius: var(--r-panel); max-width: 72ch; }
h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.delivery .head-row h3 { margin: 0; }
.delivery .grid2 { gap: 0 28px; }
.hash { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.hash code, td.code, .code.small { font-family: var(--mono); font-size: .84rem; }
.attempts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.attempt { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--r-control); padding: 10px 14px; background: var(--surface); }
.attempt.reproduced_synthetic_harness { border-left-color: var(--harbor); }
.attempt.supported_by_source_citations { border-left-color: var(--sev-low); }
.attempt.inconclusive { border-left-color: var(--sev-medium); }
.attempt.context_unknown { border-left-style: dashed; }
.a-head { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.a-head .seq { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.attempt .means { margin: 4px 0 10px; font-size: .9rem; max-width: 72ch; }
.attempt .note { margin: 0 0 10px; padding: 6px 10px; border-radius: var(--r-control); background: var(--tide); font-size: .88rem; max-width: 72ch; }
.attempt dl.facts { font-size: .86rem; }
.ev { margin-top: 10px; }
.ev .actions { margin-top: 8px; }
pre.payload { max-height: 28em; overflow: auto; margin: 0; }
.key-state { display: inline-block; padding: 1px 8px; border-radius: var(--r-control); background: var(--tide); font-size: .82rem; font-weight: 600; }
.key-state.active { background: var(--good-tint); color: var(--good); }
.key-state.retired { color: var(--muted); }
.key-state.revoked { background: var(--bad-tint); color: var(--bad); }
.flags { border-left: 4px solid var(--sev-medium); }
.flags .flag + .flag { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 2px; }
.flags .flag p { margin: 8px 0 0; }
.flags .actions { margin-top: 10px; }
.result.refused { background: var(--bad-tint); }
table.deliveries td.code, table.deliveries td:first-child { white-space: nowrap; }
.result.refused p.code { overflow-wrap: anywhere; }
.repo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px 14px; align-items: start; padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.repo-row > button { margin-top: 34px; }
.keys .head-row { margin-bottom: 8px; }
.keys .k-head { font-weight: 600; }
.keys li > .stack { margin-top: 12px; }
.fingerprint { font-size: 1.15rem; font-weight: 700; word-spacing: .35em; overflow-wrap: anywhere; margin: 4px 0 12px; }
.confirm { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-panel); background: var(--bad-tint); border: 1px solid var(--bad); }
.confirm p { margin: 0; }
@media (max-width: 960px) { .detail .flags { order: -3; } }
@media (max-width: 640px) {
  .repo-row { grid-template-columns: 1fr; }
  .repo-row > button { margin-top: 0; justify-self: start; }
}

/* ---------- vulnerability data: KEV, EPSS, NVD provenance ---------- */
.mark.kev { background: var(--bad); color: var(--surface); }
.mark.epss { background: var(--tide); color: var(--ink); font-variant-numeric: tabular-nums; }
.mark.epss.hot { background: var(--bad-tint); color: var(--bad); border-color: var(--bad); }
.mark.nvd { color: var(--sev-low); border: 1px solid currentColor; font-weight: 500; vertical-align: middle; }
.mark.pack { background: var(--tide); color: var(--muted); font-weight: 500; }
.f-head .meta .marks { margin-top: 0; align-items: center; }
.kev-fact .mark { margin-right: 2px; }
button.chip { border: 1px solid transparent; color: var(--harbor); font-weight: 500; padding: 2px 8px; }
button.chip:hover { border-color: var(--harbor); filter: none; }
button.chip[aria-expanded=true] { border-color: var(--harbor); background: var(--surface); }
.cve-view { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.cve-view h3 { margin-top: 0; }
.cve-view .prose { display: block; }
ul.refs { margin: 0; padding-left: 18px; font-size: .88rem; }
ul.refs li { overflow-wrap: anywhere; }
.suggest { border-left: 4px solid var(--sev-low); margin-top: 18px; }
.sug-list { list-style: none; margin: 0; padding: 0; }
.sug-list > li + li { border-top: 1px solid var(--line); margin-top: 12px; }
.sug-list h3 { margin: 10px 0 6px; }
.sug-list p { margin: 4px 0 0; }
.vdb-state { padding: 10px 14px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); }
.vdb-state.off { border-style: dashed; color: var(--muted); }
.vdb-state.off strong { color: var(--ink); }
.vdb-state.on { background: var(--good-tint); border-color: var(--good); }
label.choice { display: flex; gap: 10px; align-items: baseline; font-weight: 400; margin: 8px 0; }
label.choice > span { display: grid; gap: 1px; }
label.choice strong { font-weight: 600; }
.notices p { margin: 4px 0; max-width: 80ch; overflow-wrap: anywhere; }

/* ---------- library: packs, tag filters, proposal comparison ---------- */
.tagfilters { display: grid; gap: 6px; margin: 0 0 14px; }
.tagfilters > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tagfilters > div > span { min-width: 7.5em; }
button.tagchip { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: .84rem; padding: 3px 10px; border-radius: 999px; }
button.tagchip[aria-pressed=true] { border-color: var(--harbor); background: var(--tide); box-shadow: inset 0 0 0 1px var(--harbor); font-weight: 600; }
.pack .head-row h3 { margin: 0; }
.pack > p { margin: 8px 0; }
ul.skipped { margin: 4px 0 0; padding-left: 18px; font-size: .88rem; }
.entry .vector { overflow-wrap: anywhere; margin: 0 0 4px; }
.compare { margin-top: 6px; }
.cmp-field .grid2 { gap: 10px 16px; }
.compare .was, .compare .now { padding: 8px 12px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--paper); }
.compare .now { border-color: var(--harbor); background: var(--tide); }
.cmp-label { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 560px) { .tagfilters > div > span { flex: 1 1 100%; } }
.panel > .head-row:first-child > h3 { margin: 0; }
.btn-row { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sync-progress { margin: 4px 0 12px; }
.sync-progress progress { width: 100%; height: 8px; accent-color: var(--harbor); }

/* ---------- CVE pages ---------- */
.code-title { font-family: var(--mono); letter-spacing: -0.01em; }
.cve-head .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }
.cve-desc { max-width: 75ch; margin: 12px 0 20px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; }
.clamp.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.cve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: start; }
.cve-grid .panel h2 { margin-top: 0; font-size: 1rem; }
.cvss-score { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.cvss-score strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.metrics { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.metrics li { display: flex; flex-direction: column; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-control); font-size: .85rem; }
.metrics li .muted { font-size: .75rem; }
code.vector { font-size: .8rem; overflow-wrap: anywhere; }
.epss-fact { display: flex; flex-direction: column; gap: 2px; }
.epss-fact meter { width: 100%; max-width: 220px; height: 8px; }
.ref-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.ref-list a { display: inline-flex; flex-wrap: wrap; gap: 0 6px; overflow-wrap: anywhere; text-decoration: none; }
.ref-list a:hover strong { text-decoration: underline; }
.mark.cvss { background: var(--tide); color: var(--ink); }
a.chip { text-decoration: none; }
/* A CVSS vector on one line in narrow spaces; the full text is in the title and on the CVE page. */
code.vector-line { display: block; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); max-width: 100%; }

/* ---------- risk acceptance approvals (REM-3) and people pickers ---------- */
.waiting { margin: 6px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--harbor); border-radius: var(--r-panel); background: var(--surface); }
.asked { border-left: 4px solid var(--harbor); }
.asked p { margin: 8px 0 0; }
.asked blockquote { margin: 8px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); }
.asked .actions { margin-top: 12px; }
.asked details { margin-top: 12px; }
ul.asks { list-style: none; padding: 0; margin: 0; }
.asks .head-row h2 { margin: 0; font-size: 1.05rem; }
.approver-me { margin: 8px 0 4px; }
.next button.link { display: inline; width: auto; margin: 0; text-align: inherit; }
ul.picked { list-style: none; padding: 0; margin: 4px 0 8px; }
.picked .chip { display: inline-flex; align-items: center; font-size: .88rem; padding: 3px 4px 3px 10px; }
button.unpick { border: 0; background: none; color: var(--muted); padding: 0 6px; font-weight: 600; line-height: 1.2; }
button.unpick:hover { color: var(--bad); filter: none; }
@media (max-width: 960px) { .detail .asked { order: -3; } }

/* ---------- image viewer: a screenshot opens here, fit to the window, zoomable, scrollable ---------- */
dialog.viewer { width: min(96vw, 1600px); height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); }
dialog.viewer[open] { display: flex; flex-direction: column; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, .55); }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.viewer-bar strong { margin-right: auto; overflow-wrap: anywhere; }
.viewer-bar a.button { padding: 6px 12px; }
.viewer-area { flex: 1; overflow: auto; background: var(--paper); padding: 12px; }
.viewer-area.fitting { display: grid; place-items: center; }
.viewer-area img { display: block; max-width: none; }
.viewer-area img.fit { max-width: 100%; max-height: calc(92vh - 80px); width: auto; }
/* ENG-6 and the header: a confirmation dialog, the icon sign-out, the archived badge. */
dialog.confirm { width: min(92vw, 460px); padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); }
dialog.confirm::backdrop { background: rgba(0, 0, 0, .45); }
dialog.confirm h2 { margin: 0 0 8px; font-size: 1.1rem; }
dialog.confirm .row.end { justify-content: flex-end; gap: 10px; margin-top: 16px; }
button.icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted); cursor: pointer; }
button.icon:hover, button.icon:focus-visible { color: var(--ink); border-color: var(--line); }
.badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--muted); vertical-align: middle; }

p.note { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-control); background: var(--tide); }
/* A long table scrolls inside its own box, so its horizontal scrollbar stays on screen; the header stays visible. */
.list.scroll { max-height: 75vh; overflow: auto; }
.list.scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* ---------- public vulnerability pages (PUB-1, PUB-2): Flawharbor's public face, served without the app ---------- */
body.public main, body.public footer { max-width: 76rem; margin: 0 auto; }
body.public main { padding-bottom: 48px; }
body.public footer { padding: 20px 24px 40px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
body.public footer p { margin: 0 0 8px; max-width: 65ch; }
body.public footer .free-service { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.public footer .free-service .brand { gap: 5px; font-size: .95rem; }
body.public footer .free-service .brand-mark { width: 18px; height: 18px; }
body.public .notices { margin: 0; padding-left: 1.2em; }
body.public .notices li { margin: 2px 0; max-width: 80ch; overflow-wrap: anywhere; }
body.public .lede, body.public .cve-desc, body.public main > p, body.public .about :is(p, li, dd) { max-width: 65ch; }
body.public .actions a.button { margin-right: 8px; }
/* the home: a hero with the search and the figures, then the newest records */
.hero { padding: 28px 0 8px; }
.hero h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); font-weight: 800; letter-spacing: -.025em; max-width: 24ch; margin: 0 0 20px; }
.hero.compact { padding: 8px 0 4px; }
body.public form[role=search] { display: flex; gap: 8px; max-width: 40rem; margin: 0; }
body.public form[role=search] input { flex: 1; padding: 11px 14px; font-size: 1.05rem; }
body.public form[role=search] button { padding: 11px 18px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 16px 0 0; color: var(--muted); font-size: .92rem; }
.stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* PUB-6: the home's prompt for AI coding agents, with its Copy button (shown by copy.js) */
.agent-prompt { max-width: 40rem; margin: 18px 0 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.agent-prompt p { margin: 0 0 8px; font-size: .92rem; font-weight: 600; }
.agent-prompt-row { display: flex; gap: 8px; align-items: flex-start; }
.agent-prompt code { flex: 1; min-width: 0; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control); font-family: var(--mono); font-size: .84rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.agent-prompt button { flex: none; padding: 7px 14px; }
.latest { margin-top: 24px; }
.latest > .head-row { margin-bottom: 10px; align-items: baseline; }
.latest > .head-row > :is(h1, h2) { margin: 0; font-size: 1.15rem; }
.latest details { font-size: .92rem; }
.latest details > summary { font-weight: 500; }
.latest details[open] { flex: 1 1 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin: 0; }
.filters label { display: inline-flex; flex-direction: column; gap: 4px; margin: 0; font-size: .9rem; }
.filters label.inline { flex-direction: row; align-items: center; font-weight: 400; }
.filters input[type=number] { width: 6em; }
.filters select { width: auto; min-width: 7em; }
.cve-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.cve-list li { display: grid; grid-template-columns: 4rem max-content minmax(0, 1fr) auto; grid-template-areas: "sev id marks date" "sev title title title"; gap: 3px 14px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cve-list li:last-child { border-bottom: 0; }
.cve-list li:hover { background: var(--tide); }
.cve-list .sev { grid-area: sev; font-variant-numeric: tabular-nums; }
.cve-list .cve-id { grid-area: id; font-family: var(--mono); font-weight: 500; color: var(--ink); text-decoration: none; }
.cve-list .cve-id:hover { text-decoration: underline; }
.cve-list .marks { grid-area: marks; display: flex; flex-wrap: wrap; gap: 4px; align-self: center; }
.cve-list time { grid-area: date; color: var(--muted); font-size: .88rem; white-space: nowrap; }
.cve-list .cve-title { grid-area: title; margin: 0; color: var(--muted); font-size: .92rem; max-width: 80ch; overflow-wrap: anywhere; }
body.public .pager { margin: 14px 0 0; }
/* a record: the id leads, the facts in a grid that stacks */
.cve-head h1.code-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 500; letter-spacing: 0; }
.cve-head .meta .sev { font-size: 1.05rem; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 14px 24px; margin: 20px 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.fact-grid dt { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.fact-grid dd { margin: 0; overflow-wrap: anywhere; }
.fact-grid .num { font-size: 1.15rem; font-weight: 600; }
.fact-grid code { display: block; margin-top: 2px; font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.fact-grid time { white-space: nowrap; }
body.public .chips { padding: 0; margin: 0 0 8px; list-style: none; }
.chip.code { font-size: .8rem; }
/* a record's OSV advisories: a row per affected package, scrolling inside its box when narrow */
body.public .osv-wrap { overflow-x: auto; margin: 0 0 8px; }
table.osv { border: 1px solid var(--line); border-radius: var(--r-panel); }
table.osv td:not(:nth-child(2)) { font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
.exposure { margin-top: 24px; border-left: 4px solid var(--harbor); }
.exposure h2 { font-size: 1rem; }
.exposure p { margin: 6px 0 0; max-width: 65ch; }
/* check your stack: the upload panel and its result table */
body.public form.upload { margin-top: 0; max-width: 48rem; }
body.public form.upload label { margin-top: 0; }
body.public form.upload .hint { margin-top: 10px; }
body.public .signup { margin-top: 28px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); font-weight: 600; max-width: 48rem; }
body.public #result { margin-top: 18px; overflow-x: auto; }
table.cves { border: 1px solid var(--line); border-radius: var(--r-panel); }
/* PUB-5: the result's exports, and when the report window is blocked, the page's own print of the result */
body.public .exports { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 4px 0 16px; }
body.public .exports .muted { flex-basis: 100%; }
@media print {
  body.public .top, body.public .skip, body.public form.upload, body.public .exports, body.public .signup, body.public noscript, body.public main > .muted { display: none !important; }
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --paper: #fff; --surface: #fff; --ink: #183d34; --muted: #68736b; --line: #dce2d6; --tide: #f0f2e9; --harbor: #163e35; --accent: #b6754d;
    --sev-critical: #b42318; --sev-high: #c4560f; --sev-medium: #9a6b00; --sev-low: #2c64a6; --sev-info: #6a7883; color-scheme: light;
  }
  body.public #result { overflow: visible; }
  body.public footer { border-top: 1px solid #dce2d6; }
}
table.cves td:nth-child(-n+2) { font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
table.cves td:last-child { overflow-wrap: anywhere; }
/* about */
.about h2 { margin-top: 32px; }
.about dl.sources { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0 0 16px; }
.about dl.sources dt { font-weight: 600; }
.about dl.sources dd { margin: 0; }
.about dl.sources .fresh { display: block; margin-top: 2px; color: var(--muted); font-size: 0.875em; }
.about pre { max-width: 65ch; }
@media (max-width: 560px) {
  .cve-list li { grid-template-columns: auto 1fr auto; grid-template-areas: "sev id date" "marks marks marks" "title title title"; padding: 10px 12px; }
  body.public form[role=search] { flex-direction: column; }
  .agent-prompt-row { flex-direction: column; align-items: stretch; }
  body.public footer { padding-left: 16px; padding-right: 16px; }
  .about dl.sources { grid-template-columns: 1fr; gap: 2px 0; }
  .about dl.sources dd { margin-bottom: 10px; }
}

/* ---------- in-product help (VIEW-15): the Help button, the slide-out panel and term tips ---------- */
button.help-btn { padding: 3px 10px; font-size: .85rem; font-weight: 500; background: transparent; color: var(--ink); border-color: var(--line); }
button.help-btn[aria-expanded=true] { background: var(--tide); border-color: var(--harbor); }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(440px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); padding: 0 22px 32px; }
.help-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.help-kicker { margin: 0; font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
button.help-close { padding: 4px 12px; font-size: .85rem; font-weight: 500; background: transparent; color: var(--ink); border-color: var(--line); }
.help-page { max-width: 62ch; }
.help-page h2 { font-size: 1.3rem; margin: 18px 0 8px; }
.help-page h2:focus { outline: none; }
.help-page h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.help-page h3 { font-size: 1rem; margin: 20px 0 6px; }
.help-page h4 { font-size: .95rem; margin: 16px 0 4px; }
.help-page p, .help-page li { line-height: 1.55; }
.help-page ul, .help-page ol { padding-left: 1.3em; margin: 8px 0; }
.help-page li + li { margin-top: 4px; }
.help-page code { font-family: var(--mono); font-size: .88em; background: var(--tide); padding: 0 4px; border-radius: 4px; overflow-wrap: anywhere; }
.help-page pre { background: var(--tide); padding: 10px 12px; border-radius: var(--r-control); overflow-x: auto; }
.help-page pre code { background: none; padding: 0; }
.help-index { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.help-index h2 { font-size: .9rem; margin: 0 0 8px; color: var(--muted); }
.help-index ul { list-style: none; padding: 0; margin: 0; columns: 2 12rem; column-gap: 20px; }
.help-index li { padding: 3px 0; break-inside: avoid; }
.help-index a[aria-current=page] { font-weight: 700; color: var(--ink); text-decoration: none; }
@media (min-width: 1240px) { body.help-open .top, body.help-open main, body.help-open #status { margin-right: 440px; } }
@media (max-width: 600px) { .help-panel { width: 100vw; border-left: 0; padding: 0 16px 28px; } }
.term { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
.has-tip { cursor: help; }
.fh-tip { position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border-radius: var(--r-control);
  background: var(--ink); color: var(--surface); font-size: .84rem; font-weight: 400; line-height: 1.4; border: 1px solid var(--line); text-transform: none; letter-spacing: normal; }
@media (prefers-reduced-motion: no-preference) {
  .help-panel:not([hidden]) { animation: help-in .18s ease-out; }
  .fh-tip:not([hidden]) { animation: tip-in .12s ease-out; }
}
@keyframes help-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
@media (forced-colors: active) { .fh-tip, .help-panel { border: 1px solid CanvasText; } }