/* BaselineWatch: two looks, each light and dark. The Register look: paper, ink, one green accent,
   a serif masthead, content in a wide column with a narrow aside. The Console look (at the end of
   this file): the dense face of a security console, panels on a near-black or paper ground. Both
   draw the same markup; data-look and data-scheme on <html> choose (src/look.ts). */
@font-face { font-family: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/newsreader/newsreader-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader Variable"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/newsreader/newsreader-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/public-sans/public-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans Variable"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/public-sans/public-sans-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }
/* Tokens: four palettes, every one defining the same names (test/palettes.test.ts holds them to it).
   With no data-scheme the device decides through prefers-color-scheme; data-scheme="dark" or
   "light" overrides it. The tone names (cyan, amber, red, green, purple) are what the marks use:
   cyan is what is measured, amber what to act on, red what is critical. */
:root {
  --paper: #f3f4f1; --card: #ffffff; --panel-2: #f7f8f6; --ink: #1b1f23; --mute: #5f6b70; --rule: #cfd5d2; --rule-2: #b9c1bd;
  --acc: #0f6e56; --acc-ink: #ffffff;
  --warn: #8a5a00; --warn-bg: #fbf2df; --del: #b3261e; --del-bg: #fbe9e7; --ins: #1b6e3a; --ins-bg: #e3f3e8; --gen: #7a4fb3;
  --cyan: #0b6f8f; --amber: #8a5a00; --red: #b3261e; --green: #1b6e3a; --purple: #7a4fb3; --grid: #e2e6e3;
  --display: var(--serif);
  --serif: "Newsreader Variable", "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Public Sans Variable", "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
  --paper: #15181a; --card: #1d2124; --panel-2: #22272b; --ink: #e7eae6; --mute: #9aa6a3; --rule: #333a3d; --rule-2: #46504f;
  --acc: #4cc9a6; --acc-ink: #06211a;
  --warn: #e2b55a; --warn-bg: #2d2615; --del: #ff8a80; --del-bg: #3a1f1d; --ins: #7fd99a; --ins-bg: #173123; --gen: #c2a6f0;
  --cyan: #5fd0f3; --amber: #e2b55a; --red: #ff8a80; --green: #7fd99a; --purple: #c2a6f0; --grid: #2a3134;
  --display: var(--serif);
  color-scheme: dark;
  }
}
:root[data-scheme="dark"] {
  --paper: #15181a; --card: #1d2124; --panel-2: #22272b; --ink: #e7eae6; --mute: #9aa6a3; --rule: #333a3d; --rule-2: #46504f;
  --acc: #4cc9a6; --acc-ink: #06211a;
  --warn: #e2b55a; --warn-bg: #2d2615; --del: #ff8a80; --del-bg: #3a1f1d; --ins: #7fd99a; --ins-bg: #173123; --gen: #c2a6f0;
  --cyan: #5fd0f3; --amber: #e2b55a; --red: #ff8a80; --green: #7fd99a; --purple: #c2a6f0; --grid: #2a3134;
  --display: var(--serif);
  color-scheme: dark;
}
:root[data-look="console"] {
  --paper: #eef0ed; --card: #ffffff; --panel-2: #f5f6f4; --ink: #1b1f23; --mute: #5f6b70; --rule: #d7dcd9; --rule-2: #c3cac6;
  --acc: #0f6e56; --acc-ink: #ffffff;
  --warn: #a16207; --warn-bg: #fbf2df; --del: #c62828; --del-bg: #fbe9e7; --ins: #1b6e3a; --ins-bg: #e3f3e8; --gen: #6d3fb5;
  --cyan: #0b7fa3; --amber: #a16207; --red: #c62828; --green: #1b6e3a; --purple: #6d3fb5; --grid: #e2e6e3;
  --display: var(--sans);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="console"]:not([data-scheme="light"]) {
  --paper: #0d0f12; --card: #17191d; --panel-2: #1e2126; --ink: #e9ecef; --mute: #98a2ad; --rule: #2a2f36; --rule-2: #363c45;
  --acc: #4cc9a6; --acc-ink: #06211a;
  --warn: #f2b134; --warn-bg: #2b2412; --del: #ef5350; --del-bg: #3a1f1f; --ins: #7fd99a; --ins-bg: #173123; --gen: #b48bf5;
  --cyan: #38c6f4; --amber: #f2b134; --red: #ef5350; --green: #7fd99a; --purple: #b48bf5; --grid: #272c33;
  --display: var(--sans);
  color-scheme: dark;
  }
}
:root[data-look="console"][data-scheme="dark"] {
  --paper: #0d0f12; --card: #17191d; --panel-2: #1e2126; --ink: #e9ecef; --mute: #98a2ad; --rule: #2a2f36; --rule-2: #363c45;
  --acc: #4cc9a6; --acc-ink: #06211a;
  --warn: #f2b134; --warn-bg: #2b2412; --del: #ef5350; --del-bg: #3a1f1f; --ins: #7fd99a; --ins-bg: #173123; --gen: #b48bf5;
  --cyan: #38c6f4; --amber: #f2b134; --red: #ef5350; --green: #7fd99a; --purple: #b48bf5; --grid: #272c33;
  --display: var(--sans);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* The sheet is tuned in px against a desktop monitor; a laptop's built-in display draws a CSS
   pixel physically smaller, so at laptop widths the whole page steps up uniformly instead of
   making the reader reach for ⌘+. Wider desktops and small windows stay 1:1. */
@media (min-width: 1200px) and (max-width: 1800px) { html { zoom: 1.1; } }
body { background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: var(--acc); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.005em; text-wrap: balance; margin: 0; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 19px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.small { font-size: 13px; color: var(--mute); }
.lede { color: var(--mute); max-width: 68ch; margin: 8px 0 18px; }

/* Masthead */
.mast { background: var(--card); border-bottom: 1px solid var(--rule); }
.mast-inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.mast .name { font: 500 17px var(--serif); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.mast .name .brand-logo { display: block; height: 24px; width: auto; }
.mast nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13.5px; }
.mast nav a { color: var(--mute); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.mast nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--acc); }
.mast nav a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.mast .meta { margin-left: auto; color: var(--mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* The grouped menus (Standards, Desk): plain <details>, no script, closed until asked. */
.mast details.group { position: relative; }
.mast details.group > summary { list-style: none; cursor: pointer; color: var(--mute); padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13.5px; }
.mast details.group > summary::-webkit-details-marker { display: none; }
.mast details.group > summary::after { content: " ▾"; font-size: 10px; }
.mast details.group.on > summary { color: var(--ink); border-bottom-color: var(--acc); }
.mast details.group > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.mast .menu { position: absolute; left: -10px; top: calc(100% + 8px); min-width: 200px; background: var(--card); border: 1px solid var(--rule); border-radius: 9px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); padding: 6px; z-index: 30; }
.mast .menu.right { left: auto; right: 0; }
.mast .menu a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--ink); border-bottom: 0; }
.mast .menu a:hover { background: var(--panel-2); }
.mast .menu a[aria-current="page"] { color: var(--acc); font-weight: 600; }
.mast .menu .cap { display: block; padding: 7px 10px 2px; font: 600 10px var(--sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.mast .menu hr { border: 0; border-top: 1px solid var(--rule); margin: 5px 4px; }
.mast .menu form.inline { display: block; padding: 2px 10px 5px; }
.mast .menu > a[href="/login"] { color: var(--acc); }
.mast details.desk > summary { border: 1px solid var(--rule); border-radius: 7px; padding: 4px 10px; font-size: 13px; }
.mast details.desk.on > summary { border-color: var(--acc); color: var(--ink); }

/* The Register ribbon under the masthead: the latest standards changes ride the page. */
.strip { background: var(--card); border-bottom: 1px solid var(--rule); }
/* The strip scrolls sideways, and used to hide that it did: `scrollbar-width: none` with no
   other affordance meant the releases past the fold were simply gone — nothing said to swipe,
   nothing took keyboard focus, and on a phone it was one truncated line. The fade says there is
   more, the region is focusable so a keyboard can scroll it, and the trailing link is the way
   out for anyone who would rather read the whole thing. */
.strip-inner { max-width: 1180px; margin: 0 auto; padding: 6px 20px; display: flex; gap: 12px; align-items: baseline; font-size: 12.5px; color: var(--mute); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.strip-inner:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.strip .all { flex: none; color: var(--mute); text-decoration: underline; }
.strip .lab { font: 600 10.5px var(--sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--warn); text-decoration: none; flex: none; }
.strip a { color: var(--ink); text-decoration: none; }
.strip a:hover { text-decoration: underline; }
.strip .dot { color: var(--rule-2); }
.strip .when { color: var(--mute); font-size: 11.5px; }

/* Totals strip */
/* Flex, not grid: a grid of auto-fit tracks leaves the last row's tiles at one track's width,
   so seven tiles across six columns left five sixths of a row empty — which both Today and
   Vulnerabilities did. Flex-wrap lets whatever is on the last row grow to fill it. */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }
.stats > div, .stats > a { flex: 1 1 140px; }
.stats > div, .stats > a { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.stats small { display: block; color: var(--mute); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.stats b { display: block; font: 500 24px var(--mono); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Two columns */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-bottom: 40px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.main { min-width: 0; }
/* minmax(0, 1fr): the implicit auto track would otherwise grow to the widest box's
   min-content (the Sources list's nowrap names), pushing every box past the 320px rail. */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.box { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.box h2 { font-size: 16px; margin-bottom: 8px; }
.box h2 a { color: inherit; text-decoration: none; }
.box h2 a:hover { text-decoration: underline; }
/* Every heading, count and figure is a link to where its data lives; they keep their own colour and underline on hover. */
section > h2 a, .tcol h2 a, h2.later a, h3.small a, .count a, .stats > a, .std-meta a.n, .src-list b a { color: inherit; text-decoration: none; }
section > h2 a:hover, .tcol h2 a:hover, h2.later a:hover, h3.small a:hover, .count a:hover, .std-meta a.n:hover, .src-list b a:hover { text-decoration: underline; }
.stats > a:hover { border-color: var(--acc); }
a.state { text-decoration: none; }
.box:target, .std:target { border-color: var(--acc); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--mute); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.plan { margin: 0; padding-left: 20px; font-size: 13.5px; display: grid; gap: 6px; }

/* Empty Register */
.empty { border-left: 3px solid var(--acc); background: var(--card); border-radius: 0 8px 8px 0; padding: 10px 16px; margin: 0 0 18px; }
.empty b { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.empty p { margin: 4px 0 0; color: var(--mute); max-width: 70ch; }

/* Standards list */
.stds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.std { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; min-width: 0; }
.std-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.std-head b { font-weight: 600; }
.std-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.std-meta .n { font-variant-numeric: tabular-nums; }
.std-note { margin: 6px 0 0; color: var(--mute); font-size: 12.5px; }
.state { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); white-space: nowrap; }
.state.wait { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.state.ok { color: var(--ins); background: var(--ins-bg); border-color: transparent; }

/* Sources tables */
section + section { margin-top: 26px; }
h2 .count { font: 500 12px var(--mono); color: var(--mute); margin-left: 8px; }
.table-wrap { overflow-x: auto; margin-top: 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 720px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); background: var(--paper); }
tr:last-child td { border-bottom: 0; }
tr.off td { color: var(--mute); }
td .note { color: var(--mute); font-size: 12px; margin-top: 2px; max-width: 48ch; }
td .note.err { color: var(--del); }
.status.ok { color: var(--ins); } .status.error { color: var(--del); } .status.unchanged { color: var(--mute); }

/* Register */
del { color: var(--del); background: var(--del-bg); text-decoration: line-through; padding: 0 2px; border-radius: 2px; }
ins { color: var(--ins); background: var(--ins-bg); text-decoration: underline; padding: 0 2px; border-radius: 2px; }
.badge { font: 600 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: var(--card); color: var(--gen); border: 1px dashed var(--gen); }
.std-head a { color: var(--ink); text-decoration: none; }
.std-head a:hover { text-decoration: underline; }
.rel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 20px; margin-top: 22px; }
.rel h1 { font-size: 26px; }
.rel h1 .arrow { color: var(--mute); font-weight: 400; }
.rel h1 .ref { font: 600 18px var(--mono); color: var(--acc); margin-right: 8px; }
.rel .when { color: var(--mute); font-size: 12.5px; text-align: right; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none; }
.pill.ins { border-color: transparent; background: var(--ins-bg); color: var(--ins); }
.pill.del { border-color: transparent; background: var(--del-bg); color: var(--del); }
.pill.mod { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.pill.none { color: var(--mute); }
.chip.ins { color: var(--ins); background: var(--ins-bg); border-color: transparent; }
.chip.del { color: var(--del); background: var(--del-bg); border-color: transparent; }
.chip.mod { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.why { border-left: 3px solid var(--acc); padding: 10px 16px; background: var(--card); border-radius: 0 8px 8px 0; margin: 0 0 16px; }
.why small { display: block; font: 600 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 4px; }
.why p { margin: 0; font: 400 15px/1.55 var(--serif); max-width: 80ch; }
.why cite { display: block; font: 12px var(--sans); color: var(--mute); margin-top: 6px; font-style: normal; }
.why.gen { border-left-style: dashed; border-left-color: var(--gen); }
.why.gen small { color: var(--gen); }
.why.none { border-left-color: var(--rule); }
.why.none small { color: var(--mute); }
.why.none p { font-family: var(--sans); font-size: 13.5px; color: var(--mute); }
tr.added td:first-child a b { color: var(--ins); }
tr.removed td:first-child a b { color: var(--del); }
.field { margin: 18px 0; }
.field h3 { font: 600 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.field .prose { margin: 0; font: 400 15px/1.65 var(--serif); max-width: 80ch; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; }
.field.changed .diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); overflow: hidden; }
.field.changed .diff > div { padding: 10px 14px; min-width: 0; }
.field.changed .diff > div + div { border-left: 1px solid var(--rule); }
.field.changed .diff h5 { margin: 0 0 6px; font: 600 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.field.changed .diff .prose { border: 0; padding: 0; background: none; max-width: none; }
@media (max-width: 760px) { .field.changed .diff { grid-template-columns: 1fr; } .field.changed .diff > div + div { border-left: 0; border-top: 1px solid var(--rule); } }

/* Controls */
button, .btn { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; }
button:hover { border-color: var(--mute); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
button.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
button.link { border: 0; background: none; padding: 0; color: var(--acc); text-decoration: underline; font-size: 12.5px; }
form.inline { display: inline; }
.mast .meta form.inline button.link { font-size: 12.5px; }
.sep { color: var(--rule); margin: 0 2px; }
input[type="search"], input[type="password"], input[type="text"] { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notice { margin: 0 0 16px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); font-size: 13px; }
.notice.ok { border-color: var(--ins); } .notice.error { border-color: var(--del); } .notice.unchanged { color: var(--mute); }

/* News (the Wire, now the front page) */
.wire-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 22px; }
.wire-top h1 small { font: 400 16px var(--sans); color: var(--mute); }
.wire-top h1 small.motto { font: italic 400 14.5px var(--serif); }
.feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0 6px; }
@media (max-width: 1000px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .feat { gap: 10px; } }
.fcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 11; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--card); text-decoration: none; min-width: 0; }
.fcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard .ph { position: absolute; inset: 0; display: grid; place-items: center; font: 600 44px var(--serif); color: var(--rule-2); background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 12px, var(--paper) 12px, var(--paper) 24px); }
.fcard h3 { position: relative; margin: 0; padding: 30px 12px 10px; font: 600 14px/1.3 var(--sans); color: #fff; background: linear-gradient(transparent, rgba(5, 10, 12, 0.88) 60%); }
.fcard h3 span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: initial; }
.fcard.noimg h3 { color: var(--ink); background: linear-gradient(transparent, var(--card) 58%); }
.fcard .fsrc { position: absolute; top: 8px; left: 8px; z-index: 1; font: 600 10.5px var(--sans); color: #fff; background: rgba(5, 10, 12, 0.55); border-radius: 999px; padding: 3px 9px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard.noimg .fsrc { color: var(--mute); background: var(--panel-2); border: 1px solid var(--rule); }
.fcard:hover h3 { text-decoration: underline; }
.search { display: flex; gap: 6px; flex: 1 1 280px; max-width: 460px; }
.search input { flex: 1 1 auto; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 14px; }
.filters a { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); color: var(--mute); text-decoration: none; background: var(--card); }
.filters a.on { color: var(--acc); border-color: var(--acc); }
.filters form { margin-left: auto; }
.wire-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wi { background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 8px; padding: 10px 14px; min-width: 0; display: grid; gap: 4px; }
.wi-body { min-width: 0; display: grid; gap: 4px; }
.wi.with-img { grid-template-columns: 122px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.wi-img { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); }
.wi-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 480px) { .wi.with-img { grid-template-columns: 1fr; } .wi-img { display: none; } }
.wi.unread { border-left-color: var(--acc); }
.wi.kev { border-left-color: var(--del); }
.wi.read .wi-title { font-weight: 400; }
.wi.read .wi-title a { color: var(--mute); }
.wi-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--mute); }
.wi-src { font-weight: 600; letter-spacing: 0.02em; }
.wi-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wi-title { font: 600 15px/1.35 var(--sans); margin: 0; letter-spacing: 0; text-wrap: pretty; }
.wi-title a { color: var(--ink); text-decoration: none; }
.wi-title a:hover { text-decoration: underline; }
.wi-sum { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wi-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font: 500 11px var(--mono); padding: 2px 7px; border-radius: 4px; background: var(--paper); color: var(--mute); text-decoration: none; border: 1px solid var(--rule); }
.chip.kev { color: var(--del); background: var(--del-bg); border-color: transparent; }
.chip.star { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.acts { display: flex; gap: 6px; }
.acts button { font-size: 11.5px; padding: 3px 8px; }
.more { margin: 16px 0; }
.src-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.src-list li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 5px; }
.src-list li.on { background: var(--paper); }
.src-list a { color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-list b { font: 500 11.5px var(--mono); color: var(--mute); }
.kev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.kev-list a { color: var(--ink); text-decoration: none; }
.kev-list a:hover { text-decoration: underline; }
.kev-list .when { display: block; color: var(--mute); font-size: 12px; }
td.n { font-variant-numeric: tabular-nums; text-align: right; }

/* Vulnerabilities */
.chip.sev { font-weight: 600; }
.chip.sev.critical { color: var(--del); background: var(--del-bg); border-color: transparent; }
.chip.sev.high { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip.sev.medium { color: var(--mute); }
.chip.sev.low, .chip.sev.none { color: var(--mute); opacity: 0.8; }
.chip.epss { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip.mine { color: var(--ins); background: var(--ins-bg); border-color: transparent; }
.chip.exploit { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip.exploit.verified { color: var(--del); background: var(--del-bg); }
.chip.news { color: var(--acc); border-color: var(--acc); background: transparent; }
form.save-search { display: flex; gap: 6px; margin: 0 0 10px; }
form.save-search input { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); }
.saved-note { margin: 0 0 10px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--acc); color: var(--acc-ink); padding: 8px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; outline: 2px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }
.chip.also { color: var(--mute); background: transparent; }
.mast-search { margin-left: auto; }
.mast-search input { width: 150px; font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); }
.mast-search input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--acc); }
/* On a phone the masthead's search box took a whole row of its own, and most pages carry their
   own search box two rows below it: a reader met two search fields within a couple of hundred
   pixels, doing different things, looking the same. It becomes a link to the search page there —
   one tap instead of a row, and the page's own box is the one in front of them. */
/* The link comes first: a later rule of the same specificity beats one inside a media query,
   so `display: none` written after the query would hide the link at every width. */
.mast-search .to-search { display: none; color: var(--mute); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.mast-search .to-search:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (max-width: 720px) { .mast-search { margin-left: auto; width: auto; } .mast-search input { display: none; } .mast-search .to-search { display: inline; } }
.feeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feeds li { display: grid; gap: 2px; }
.feeds code { font-size: 12px; overflow-wrap: anywhere; }
.feeds code a { color: inherit; }
.talked { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.talked li a:first-child { font-family: var(--mono); }
.stats b.date { font-size: 18px; }
form.search.stack-sm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 10px; align-items: end; margin: 0 0 16px; }
form.search.stack-sm label { grid-row: 1; font-size: 12px; color: var(--mute); }
form.search.stack-sm input, form.search.stack-sm button { grid-row: 2; }
@media (max-width: 640px) { form.search.stack-sm { grid-template-columns: 1fr; } form.search.stack-sm label, form.search.stack-sm input, form.search.stack-sm button { grid-row: auto; } }
.check .ev code { font-size: 12px; overflow-wrap: anywhere; }
.seen .kv code { font-size: 12px; overflow-wrap: anywhere; }
.seen .exposure { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.scan h2.rows-head { margin: 22px 0 10px; font-size: 15px; }
table.vulns td.id { white-space: nowrap; }
table.vulns td.id a { font-family: var(--mono); font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--ink); }
table.vulns td.id .chip { margin-left: 6px; }
table.vulns td.desc { max-width: 42ch; }
table.vulns td.desc span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mute); }
/* Vendor and product names are long and full of underscores ("adaptive_security_appliance",
   "goanywhere_managed_file_transfer"). `anywhere` broke them mid-token — "adaptive_sec" /
   "urity_applian" — which is harder to read than a wider column; `break-word` keeps a token whole
   where it can and only breaks one that would overflow on its own. */
table.vulns td.who { max-width: 22ch; overflow-wrap: break-word; word-break: normal; hyphens: none; }
table.vulns td.when { white-space: nowrap; color: var(--mute); }
table.vulns tr.hit td.id a { color: var(--acc); }
.sort { margin-left: auto; font-size: 12.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; }
.vuln-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; margin-top: 22px; }
.vuln-head h1 { font-family: var(--mono); font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.vuln-head .links { color: var(--mute); font-size: 13px; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hist li { display: grid; grid-template-columns: 130px 1fr; gap: 2px 12px; font-size: 13px; }
.hist time { color: var(--mute); font-family: var(--mono); font-size: 12px; }
.hist b { grid-column: 2; font-weight: 600; }
.hist span, .hist .redline, .hist small { grid-column: 2; }
.hist small { color: var(--mute); }
.redline del, .redline ins { display: block; margin-top: 4px; }
.cpes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cpes code { font-size: 12px; overflow-wrap: anywhere; }
.refs { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.refs a { overflow-wrap: anywhere; }
select { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 100%; }

/* Triage */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .board { grid-template-columns: 1fr; } }
.tcol { min-width: 0; }
.tcol h2 { font-size: 15px; margin-bottom: 8px; display: flex; justify-content: space-between; }
/* A column or a row arrived at by its anchor (the Today and Atlas figures lead here) says so. */
.tcol:target > h2 { color: var(--acc); }
tr:target > td { background: var(--ins-bg); }
.tcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tcard { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: 8px; padding: 9px 11px; display: grid; gap: 5px; min-width: 0; }
.tcard.kev, .tcard.kev-card { border-top-color: var(--del); }
.tcard.vuln { border-top-color: var(--warn); }
.tcard.control, .tcard.release { border-top-color: var(--gen); }
.tcard .k { display: flex; justify-content: space-between; gap: 6px; font: 500 11px var(--mono); color: var(--mute); }
.tcard b { font-weight: 600; font-size: 13px; line-height: 1.35; }
.tcard b a { color: var(--ink); text-decoration: none; }
.tcard b a:hover { text-decoration: underline; }
.tcard p { margin: 0; color: var(--mute); font-size: 12.5px; line-height: 1.4; }
.tcard .note { background: var(--warn-bg); border: 1px solid transparent; border-radius: 5px; padding: 5px 7px; color: var(--warn); font-size: 12px; white-space: pre-wrap; }
.triage-acts { flex-wrap: wrap; }
.triage-acts button { font-size: 11px; padding: 3px 7px; }
.triage-acts button.on { border-color: var(--acc); color: var(--acc); }
.triage-form textarea { font: inherit; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); resize: vertical; }
.triage-form input[type="date"] { font: inherit; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 100%; }
details.triage-box { margin: 14px 0; }
details.triage-box summary { cursor: pointer; font-weight: 600; }
.tcol h3.small { margin: 14px 0 6px; font-family: var(--sans); font-weight: 600; }

/* Digest */
.digest-body p { margin: 0 0 6px; font-weight: 600; }
.digest-body li { font-size: 13.5px; margin: 2px 0 2px 18px; color: var(--ink); }
.digest-body li + p { margin-top: 12px; }
h2.later { margin: 22px 0 8px; font-size: 16px; }
details.box summary { cursor: pointer; }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.alerts li { display: grid; gap: 2px; }
.alerts .when { color: var(--mute); font-size: 11.5px; }
.alerts li.failed .when { color: var(--del); }
.alerts li.unconfigured .when { color: var(--warn); }

/* Today */
.wire-top h1 small { display: block; font: 400 13.5px var(--sans); color: var(--mute); margin-top: 2px; }
.stats.today > div, .stats.today > a { flex-basis: 150px; }
.stats.today .tile { text-decoration: none; color: var(--ink); }
.stats.today .tile span { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.stats.today .tile.bad b { color: var(--del); }
.stats.today .tile.release b { color: var(--gen); }
.need { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.need li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 6px; background: var(--paper); }
.need li.kev { border-left-color: var(--del); }
.need li.std { border-left-color: var(--gen); }
.need .need-main { min-width: 0; display: grid; gap: 2px; }
.need .need-main b { font-weight: 600; font-size: 13.5px; }
.need .need-main b a { color: var(--ink); text-decoration: none; }
.need .need-main b a:hover { text-decoration: underline; }
.need .need-main .small a { color: inherit; }
@media (max-width: 560px) { .need li { grid-template-columns: 1fr; } }
.latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.latest li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.latest .src { color: var(--mute); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest a { color: var(--ink); text-decoration: none; }
.latest a:hover { text-decoration: underline; }
.latest .when { color: var(--mute); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 560px) { .latest li { grid-template-columns: 1fr; } }
.src-fail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }

/* Atlas */
.atlas-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.atlas-svg .label { font-size: 13px; fill: var(--ink); }
.atlas-svg .axis { font-size: 11px; font-family: var(--mono); fill: var(--mute); }
.atlas-svg .grid { stroke: var(--rule); stroke-width: 1; }
.atlas-svg .track { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.atlas-svg .dot { stroke: var(--card); stroke-width: 2; }
.atlas-svg .dot.first { fill: var(--mute); }
.atlas-svg .dot.changed { fill: var(--acc); }
.atlas-svg .dot.quiet { fill: var(--rule); }
.atlas-svg a:hover .dot { stroke: var(--ink); }
/* Every mark on the Atlas is a link; a dot's transparent halo is its real target. */
.atlas-svg a { cursor: pointer; }
.atlas-svg .hit { fill: transparent; }
.atlas-svg a:hover .label, .atlas-svg a:hover .axis { fill: var(--acc); text-decoration: underline; }
.atlas-svg a:hover .cell { stroke: var(--ink); stroke-width: 1.5; }
.atlas-svg a:focus-visible { outline: none; }
.atlas-svg a:focus-visible .dot, .atlas-svg a:focus-visible .cell { stroke: var(--acc); stroke-width: 2; }
.atlas-svg a:focus-visible .label, .atlas-svg a:focus-visible .axis { fill: var(--acc); }
.atlas-svg .cell.l0 { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.atlas-svg .cell.l1 { fill: var(--ins-bg); }
.atlas-svg .cell.l2 { fill: var(--warn-bg); }
.atlas-svg .cell.l3 { fill: var(--warn); }
.atlas-svg .cell.l4 { fill: var(--acc); }
.atlas-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; font-size: 12px; color: var(--mute); }
.atlas-legend .key::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--rule); }
.atlas-legend .key.first::before { background: var(--mute); }
.atlas-legend .key.changed::before { background: var(--acc); }
.stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat div { border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px; }
.stat small { display: block; color: var(--mute); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat b { display: block; font: 600 18px var(--mono); margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat a { display: block; border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px; color: inherit; text-decoration: none; }
.stat a:hover { border-color: var(--acc); }
.due { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.due li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.due li:last-child { border-bottom: 0; }
.due .d { font: 500 12px var(--mono); color: var(--acc); }
.due li > a { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.due li > a:hover b { text-decoration: underline; }

/* Browse a version */
table.browse td.id a { font-family: var(--mono); font-size: 12.5px; text-decoration: none; color: var(--ink); }
table.browse td.desc { max-width: 48ch; }
table.browse td.desc span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mute); }
table.browse tr.changed td.id a { color: var(--acc); }

/* Upload */
.upload input[type="file"] { font: inherit; font-size: 13.5px; }

/* Sign-in */
.login { max-width: 420px; margin: 40px auto; }
.stack { display: grid; gap: 8px; }
.stack label { font-size: 13px; color: var(--mute); }
.form-error { margin: 0; color: var(--del); font-size: 13px; }

/* Footer */
.foot { border-top: 1px solid var(--rule); margin-top: 20px; padding-block: 18px 28px; color: var(--mute); font-size: 12.5px; }
.foot p { margin: 0 0 6px; }
.foot .attrib { max-width: 100ch; }

/* The switch in the masthead (src/look.ts): two rows of buttons, the current one pressed. */
.look { display: flex; flex-wrap: wrap; gap: 6px; }
.look-group { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: var(--card); }
.look-group button { border: 0; border-radius: 0; background: transparent; padding: 3px 9px; font-size: 11.5px; color: var(--mute); }
.look-group button + button { border-left: 1px solid var(--rule); }
.look-group button:hover { color: var(--ink); border-color: var(--rule); }
.look-group button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
.look-group button:focus-visible { outline-offset: -2px; }

.stats.today .tile.warn b { color: var(--warn); }

/* The Console look: the dense face of a security console. The same markup as the Register look,
   drawn as panels with uppercase mono titles, thin large figures, outlined chips, ghost buttons
   and hexagon severity marks. Only what differs from the paper look is here. */
[data-look="console"] body { font-size: 13.5px; }
[data-look="console"] .wrap, [data-look="console"] .mast-inner { max-width: 1600px; padding-inline: 16px; }
[data-look="console"] h1 { font-size: 20px; font-weight: 500; }
[data-look="console"] h2 { font-size: 15px; }
[data-look="console"] .lede { font-size: 13px; margin: 6px 0 14px; }
[data-look="console"] .mast-inner { padding: 6px 16px; min-height: 52px; gap: 8px 18px; }
[data-look="console"] .mast nav { gap: 2px 4px; }
[data-look="console"] .mast nav a { padding: 15px 9px 13px; font-weight: 500; }
[data-look="console"] .mast nav .menu a { padding: 7px 10px; }
[data-look="console"] .mast nav details.group > summary { padding: 15px 9px 13px; font-weight: 500; }
[data-look="console"] .mast details.desk > summary { padding: 4px 10px; border-color: var(--rule-2); border-radius: 5px; font-weight: 500; }
[data-look="console"] .mast .menu { border-radius: 6px; }
[data-look="console"] .mast .meta { font-family: var(--mono); font-size: 11.5px; }
[data-look="console"] .strip-inner { max-width: 1600px; padding-inline: 16px; font-family: var(--mono); font-size: 11.5px; }
[data-look="console"] .fcard { border-radius: 6px; }
[data-look="console"] .fcard h3 { font-size: 13.5px; }
[data-look="console"] .fcard .ph { font-family: var(--mono); }
[data-look="console"] .stats { gap: 12px; margin: 16px 0; }
[data-look="console"] .stats div, [data-look="console"] .stats .tile { border-radius: 6px; padding: 14px 16px 12px; }
[data-look="console"] .stats small { font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
[data-look="console"] .stats b { font: 200 44px/1.05 var(--sans); letter-spacing: -0.02em; margin-top: 8px; }
[data-look="console"] .stats.today .tile.bad { border-left: 3px solid var(--red); }
[data-look="console"] .stats.today .tile.warn { border-left: 3px solid var(--amber); }
[data-look="console"] .stats.today .tile.bad b, [data-look="console"] .stats.today .tile.warn b, [data-look="console"] .stats.today .tile.release b { color: var(--ink); }
[data-look="console"] .box, [data-look="console"] .std, [data-look="console"] .wi, [data-look="console"] .tcard, [data-look="console"] .empty, [data-look="console"] .why, [data-look="console"] .table-wrap, [data-look="console"] .notice, [data-look="console"] .field .prose, [data-look="console"] .field.changed .diff { border-radius: 6px; }
[data-look="console"] .box { padding: 14px 16px; }
[data-look="console"] .box h2, [data-look="console"] .tcol h2, [data-look="console"] section > h2 { font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
[data-look="console"] h2 .count { font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
[data-look="console"] .cols, [data-look="console"] .side { gap: 12px; }
[data-look="console"] .stds { gap: 10px; }
[data-look="console"] .std { padding: 12px 14px; }
[data-look="console"] th { font-family: var(--mono); letter-spacing: 0.1em; background: var(--card); }
[data-look="console"] .chip, [data-look="console"] .state, [data-look="console"] .pill, [data-look="console"] .badge { font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; background: transparent; border: 1px solid var(--rule-2); color: var(--mute); border-radius: 3px; }
[data-look="console"] .state { padding: 2px 7px; }
[data-look="console"] .chip.kev, [data-look="console"] .chip.exploit.verified, [data-look="console"] .chip.sev.critical, [data-look="console"] .chip.del, [data-look="console"] .pill.del { color: var(--red); border-color: var(--red); }
[data-look="console"] .chip.sev.high, [data-look="console"] .chip.exploit, [data-look="console"] .chip.epss, [data-look="console"] .chip.star, [data-look="console"] .chip.mod, [data-look="console"] .pill.mod, [data-look="console"] .state.wait { color: var(--amber); border-color: var(--amber); }
[data-look="console"] .chip.mine, [data-look="console"] .chip.ins, [data-look="console"] .pill.ins, [data-look="console"] .state.ok { color: var(--green); border-color: var(--green); }
[data-look="console"] .chip.sev.medium, [data-look="console"] .chip.news { color: var(--cyan); border-color: var(--cyan); }
[data-look="console"] .badge { color: var(--purple); border-color: var(--purple); border-style: dashed; }
[data-look="console"] .chip.sev::before, [data-look="console"] .chip.kev::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; background: currentColor; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
[data-look="console"] button, [data-look="console"] .btn { background: transparent; border-color: var(--rule-2); border-radius: 5px; font-weight: 500; }
[data-look="console"] button.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
[data-look="console"] button.link { border: 0; background: none; }
[data-look="console"] .filters a { background: transparent; border-color: var(--rule-2); }
[data-look="console"] .filters a.on { color: var(--ink); border-color: var(--acc); background: var(--card); }
[data-look="console"] .need li { background: var(--panel-2); border-radius: 6px; }
[data-look="console"] .need li.kev { border-left-color: var(--red); }
[data-look="console"] .need li.std { border-left-color: var(--purple); }
[data-look="console"] .wi.kev { border-left-color: var(--red); }
[data-look="console"] .wi-title { font-size: 14px; }
[data-look="console"] .kv { font-size: 12.5px; }
[data-look="console"] .kv dd { font-family: var(--mono); font-size: 12px; }
[data-look="console"] input[type="search"], [data-look="console"] input[type="password"], [data-look="console"] input[type="text"], [data-look="console"] select, [data-look="console"] .triage-form textarea, [data-look="console"] .triage-form input[type="date"] { background: var(--paper); border-color: var(--rule-2); border-radius: 5px; font-size: 13px; }
[data-look="console"] .foot { font: 11.5px var(--mono); }
[data-look="console"] .foot .attrib { font-family: var(--sans); font-size: 12px; }
[data-look="console"] .look-group { border-radius: 5px; }
[data-look="console"] .look-group button { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
[data-look="console"] .tcard { border-top-width: 1px; border-left: 3px solid var(--rule); }
[data-look="console"] .tcard.kev, [data-look="console"] .tcard.kev-card { border-left-color: var(--red); border-top-color: var(--rule); }
[data-look="console"] .tcard.vuln { border-left-color: var(--amber); border-top-color: var(--rule); }
[data-look="console"] .tcard.control, [data-look="console"] .tcard.release { border-left-color: var(--purple); border-top-color: var(--rule); }
[data-look="console"] .atlas-svg .dot.changed { fill: var(--cyan); }
[data-look="console"] .wire-top { margin-top: 16px; }
[data-look="console"] .rel h1 { font-size: 22px; }
[data-look="console"] .rel h1 .ref { color: var(--cyan); }
[data-look="console"] .why p, [data-look="console"] .field .prose { font-size: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* STIG pages (M9): rules by CAT with check and fix folded, the CCI mapping line, the CISA aside */
.cat-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.cat-pick label { font-size: 12px; color: var(--mute); }
.cat-pick select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 100%; }
.filters a b { font-weight: 600; margin-left: 4px; }
.rules { list-style: none; margin: 0; padding: 0; }
.rule { padding: 12px 0; border-top: 1px solid var(--rule); }
.rule:first-child { border-top: 0; padding-top: 4px; }
.rule-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.rule-head a { text-decoration: none; color: var(--ink); }
.rule-head .small { color: var(--mute); }
.rule h3 { margin: 4px 0 6px; font-size: 15px; line-height: 1.35; }
.rule-controls { font-size: 12.5px; color: var(--ink); margin: 0 0 6px; }
.rule-controls a, .rule-controls code { margin-right: 2px; }
.rule details { margin: 4px 0; }
.rule details summary { cursor: pointer; font-size: 12.5px; color: var(--mute); }
.rule details .prose, p.prose { margin: 6px 0 0; font: 400 13.5px/1.6 var(--sans); max-width: 90ch; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; overflow-wrap: anywhere; }
.change-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.change-list li { padding: 6px 0; border-top: 1px solid var(--rule); }
.change-list li:first-child { border-top: 0; }
.change-list .note { color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.change-list a { text-decoration: none; }
.box h3.small { margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--mute); }

/* The baseline builder (M9.3): one form drawn a section at a time, a checkbox per item, folded groups, the apply lines folded per item */
.builder fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--card); min-width: 0; }
.builder legend { font: 600 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); padding: 0 4px; }
.builder fieldset label { font-size: 12.5px; color: var(--mute); }
.builder fieldset select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 100%; min-width: 0; }
.builder .inline-check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.builder h2 { margin: 18px 0 6px; }
.ptabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.ptabs button .count { font: 500 11px var(--mono); color: var(--mute); margin-left: 4px; }
.ptabs button.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.ptabs button.on .count { color: inherit; opacity: 0.85; }
details.pgroup { margin: 8px 0; }
details.pgroup summary { cursor: pointer; padding: 2px 0; }
details.pgroup summary .count { margin-left: 6px; }
.pitems { list-style: none; margin: 8px 0 0; padding: 0; }
.pitem { padding: 10px 0; border-top: 1px solid var(--rule); }
.pitem:first-child { border-top: 0; }
.pitem.off { opacity: 0.55; }
.pitem-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }
.pitem-head input { margin: 0; }
.pitem-head a { text-decoration: none; color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.pitem-title { flex: 1 1 24ch; font-size: 14px; overflow-wrap: anywhere; }
.pitem-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 0 24px; font-size: 12.5px; }
.pitem-meta a { margin-right: 2px; }
.pitem-apply { margin: 6px 0 0 24px; font-size: 12.5px; display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
.pitem-apply dt { color: var(--mute); }
.pitem-apply dd { margin: 0; overflow-wrap: anywhere; }
.pitem details { margin: 4px 0 0 24px; }
.pitem details .pitem-apply { margin-left: 0; }
@media (max-width: 560px) { .pitem-apply { grid-template-columns: 1fr; gap: 0; } .pitem-apply dd { margin-bottom: 4px; } .pitem-meta, .pitem details { margin-left: 0; } }
.pitem details summary { cursor: pointer; font-size: 12.5px; color: var(--mute); }
.pitem details h4.small { margin: 8px 0 2px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--mute); }
.export-item { margin: 12px 0; padding: 10px 0; border-top: 1px solid var(--rule); }
.export dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; font-size: 13px; }
.export dl dt { color: var(--mute); }
.export dl dd { margin: 0; }
.export pre { white-space: pre-wrap; font: 12.5px/1.5 var(--mono); }
@media print { .mast, .foot, .builder fieldset, .pitem-head input { display: none; } .pitem details { display: block; } }
.checklist { list-style: none; padding: 0; }
.checklist li label { cursor: pointer; }

/* The Fix panel (M9.5) and the Wire's fix line */
.box.fix h3.small { margin-top: 12px; }
.box.fix .fix-kev p { margin: 4px 0; }
.box.fix .fix-mitigation { margin: 6px 0 10px; }
.box.fix .fix-mitigation cite { font-style: normal; }
.box.empty-fix { border-style: dashed; }
.wi-fix { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); }
.wi-fix b { color: var(--ink); }

/* The guide (M10): a single readable column of boxes */
.guide { display: grid; gap: 14px; max-width: 72ch; margin-bottom: 40px; }
.guide .box p { margin: 0; line-height: 1.55; }
.mast .menu a.cap { white-space: normal; } /* the caption links to /guide and may wrap on narrow screens */

/* Platform engineering (M11): the test plan's release and hardware selects, inapplicable checks, and the Platforms page. */
.pitem.na { opacity: 0.6; }
.pitem.na .pitem-head { cursor: default; }
.chip.na { background: var(--panel-2); color: var(--mute); border: 1px solid var(--rule-2); }
.chip.ok { background: var(--ins); color: #fff; }
.areas-pick label { white-space: nowrap; }
.areas-pick .count { font: 500 11px var(--mono); color: var(--mute); margin-left: 2px; }
.ptabs button.untested { opacity: 0.6; text-decoration: line-through; }
.ptabs button.untested.on { text-decoration: none; }
.builder fieldset select option:disabled { color: var(--mute); }
.platform .std-meta a { margin-right: 10px; }
table.fleet td { vertical-align: top; }
table.fleet tr.ended td { color: var(--mute); }
table.fleet ul.note, .platform ul.note { margin: 4px 0 0; padding-left: 16px; }
table.fleet details summary { cursor: pointer; }
.hw { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.hw li { border-top: 1px solid var(--rule); padding-top: 6px; }
.hw .chip { font-size: 10.5px; }

/* Scan (M12): breadcrumbs, the check rows the script fills, the run line, and the baits it plants. */
.crumbs { font-size: 12.5px; color: var(--mute); margin: 18px 0 8px; }
.crumbs a { color: var(--mute); }
.crumbs span { margin: 0 6px; }
.crumbs b { color: var(--ink); font-weight: 500; }
h1 .arrow { color: var(--mute); font-weight: 400; }
.checks { display: grid; gap: 10px; }
.check { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; min-width: 0; }
.check .n { font: 500 13px var(--mono); color: var(--mute); padding-top: 3px; }
.check .t { font-weight: 600; }
.check .t .chip { margin-left: 6px; font-weight: 500; }
.check .d { color: var(--mute); font-size: 13px; margin: 2px 0 0; }
.check .ev { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.check .ev li { margin: 2px 0; overflow-wrap: anywhere; }
.check .matters { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--rule); font-size: 13px; }
.check.off .t { color: var(--mute); }
.state.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.state.bad { color: var(--del); background: var(--del-bg); border-color: transparent; }
.state.na { color: var(--mute); background: var(--panel-2); border-color: transparent; }
.state.run { color: var(--acc); border-color: var(--acc); }
@media (max-width: 560px) { .check { grid-template-columns: minmax(0, 1fr) auto; } .check .n { display: none; } }
.scan-run { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 14px 0 8px; padding: 10px 14px; background: var(--card); border: 1px solid var(--rule-2); border-radius: 10px; }
.scan-run button { font-size: 13px; padding: 7px 14px; }
.scan-run button[disabled] { opacity: 0.6; cursor: default; }
.scan-run .open-count { margin-left: auto; color: var(--warn); font-weight: 600; }
/* The verdict after a run: one sentence and a tally, toned by whether fixes stay open. */
.verdict { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--warn); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; }
.verdict[data-tone="ok"] { border-left-color: var(--ins); }
.verdict .tally { float: right; text-align: right; margin: 0 0 0 16px; color: var(--warn); }
.verdict[data-tone="ok"] .tally { color: var(--ins); }
.verdict .tally b { display: block; font: 300 36px/1 var(--sans); }
.verdict .tally span { font-size: 11.5px; color: var(--mute); }
.verdict h2 { margin: 0 0 4px; font-size: 20px; }
.verdict p { margin: 0; color: var(--mute); font-size: 13.5px; max-width: 80ch; }
/* The fix panel under an open row, and the folded "how this row is tested". */
.check .how { margin: 2px 0 0; }
.check .how summary { font-size: 12.5px; color: var(--mute); cursor: pointer; }
.check .fix { background: var(--panel-2); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.check .fix h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }
.check .fixways { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.check .fixways li { margin: 0 0 6px; }
.check .fix .proof { margin: 6px 0 0; font-size: 13px; }
.check .fix .small { margin: 6px 0 0; display: block; }
.sources { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--mute); }
.sources li { margin: 3px 0; }
/* The planted baits: real 1px boxes off to the left, so a blocker's display:none reads as no box at all. */
.bw-baits { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
.bw-bait { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; }
[data-look="console"] .check { border-radius: 6px; }
[data-look="console"] .state.warn { color: var(--amber); border-color: var(--amber); }
[data-look="console"] .state.bad { color: var(--red); border-color: var(--red); }
[data-look="console"] .state.na { color: var(--mute); border-color: var(--rule-2); }
[data-look="console"] .state.run { color: var(--acc); border-color: var(--acc); }

/* Scan (M12.2): the manual guide's numbered steps, the script box and the sums beside the links. */
.scan-guide .guide-section { margin-bottom: 14px; }
.scan-guide .guide-section > h2 { font-size: 17px; margin-bottom: 6px; }
.scan-guide .guide-section > p.small { margin: 0 0 8px; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; border-top: 1px solid var(--rule); padding: 10px 0 10px 36px; position: relative; font-size: 13.5px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--rule-2); text-align: center; font: 600 12px/26px var(--mono); color: var(--mute); }
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps li:first-child::before { top: 4px; }
.steps p { margin: 0 0 4px; line-height: 1.5; }
.steps p.small { margin-bottom: 3px; }
.steps p.src { margin-top: 6px; }
.steps code { font-size: 12px; overflow-wrap: anywhere; }
.kv.script { margin: 10px 0 0; }
.kv.script code.sum { font-size: 11px; overflow-wrap: anywhere; }
.scan-guide ol.plan { padding-left: 18px; }
.scan-guide .check .t a { color: var(--ink); text-decoration: none; }
.scan-guide .check .t a:hover { text-decoration: underline; }
[data-look="console"] .steps li::before { border-radius: 4px; }

/* Baseline decisions: the board (three columns of cards) and the decide page (recommendation beside the decision). */
.dboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { .dboard { grid-template-columns: 1fr; } }
.dcol { background: var(--panel-2); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; min-width: 0; }
.dcol h2 { font-size: 16px; margin-bottom: 4px; }
.dcol.apply { border-top: 3px solid var(--ins); }
.dcol.modify { border-top: 3px solid var(--warn); }
.dcol.exclude { border-top: 3px solid var(--del); }
.dcards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.dcard { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--rule-2); border-radius: 8px; padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
.dcard.apply { border-left-color: var(--ins); }
.dcard.modify { border-left-color: var(--warn); }
.dcard.exclude { border-left-color: var(--del); }
.dcard-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.dcard-title { margin: 4px 0 6px; }
.dcard .kv { margin: 0 0 6px; }
.decide-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .decide-cols { grid-template-columns: 1fr; } }
.decide-cols pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; background: var(--panel-2); padding: 8px; border-radius: 6px; }
form.decide { display: grid; gap: 6px; align-content: start; }
form.decide fieldset { border: 0; padding: 0; margin: 0 0 6px; }
form.decide input:not([type="radio"]), form.decide textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--card); color: var(--ink); }
form.decide button { justify-self: start; }

/* Report looks for the printable checklist: the same eleven as the Word, PDF and LaTeX exports (src/report.ts reportStyles). Plain values, so a downloaded checklist keeps its look whatever the app's theme. */
.export[data-report] { padding: 16px; }
.export[data-report] h2 { padding-bottom: 4px; }
.export[data-report] table { border-collapse: collapse; width: 100%; font-size: 13px; }
.export[data-report] th { text-align: left; }
.export[data-report] th, .export[data-report] td { padding: 4px 6px; vertical-align: top; }
.export[data-report] pre { padding: 8px; border-radius: 4px; }
.export[data-report="plain"] { color: #1a1a1a; background: #fff; }
.export[data-report="plain"] h1, .export[data-report="plain"] h2 { color: #1a1a1a; }
.export[data-report="plain"] h2, .export[data-report="plain"] th, .export[data-report="plain"] td, .export[data-report="plain"] .export-item { border-color: #999; }
.export[data-report="plain"] h2 { border-bottom: 1px solid #999; }
.export[data-report="plain"] th, .export[data-report="plain"] td { border: 1px solid #999; }
.export[data-report="plain"] th { background: #e7e6e6; color: #1a1a1a; }
.export[data-report="plain"] pre { background: #f2f2f2; color: #1a1a1a; }
.export[data-report="plain"] a { color: #1a1a1a; }
.export[data-report="formal"] { color: #1a1a1a; background: #fff; font-family: Cambria, Georgia, serif; }
.export[data-report="formal"] h1, .export[data-report="formal"] h2 { color: #1f3a5f; font-family: Cambria, Georgia, serif; }
.export[data-report="formal"] h2, .export[data-report="formal"] th, .export[data-report="formal"] td, .export[data-report="formal"] .export-item { border-color: #9a9a9a; }
.export[data-report="formal"] h2 { border-bottom: 1px solid #9a9a9a; }
.export[data-report="formal"] th, .export[data-report="formal"] td { border: 1px solid #9a9a9a; }
.export[data-report="formal"] th { background: #e9e9e4; color: #1a1a1a; }
.export[data-report="formal"] pre { background: #f4f4f1; color: #1a1a1a; }
.export[data-report="formal"] a { color: #1f3a5f; }
.export[data-report="runbook"] { color: #16181d; background: #fff; }
.export[data-report="runbook"] h1, .export[data-report="runbook"] h2 { color: #2457c5; font-family: var(--mono); }
.export[data-report="runbook"] h2, .export[data-report="runbook"] th, .export[data-report="runbook"] td, .export[data-report="runbook"] .export-item { border-color: #d8dce3; }
.export[data-report="runbook"] h2 { border-bottom: 1px solid #d8dce3; }
.export[data-report="runbook"] th, .export[data-report="runbook"] td { border: 1px solid #d8dce3; }
.export[data-report="runbook"] th { background: #0f1720; color: #d7e3f4; }
.export[data-report="runbook"] pre { background: #0f1720; color: #d7e3f4; }
.export[data-report="runbook"] a { color: #2457c5; }
.export[data-report="executive"] { color: #111827; background: #fff; }
.export[data-report="executive"] h1, .export[data-report="executive"] h2 { color: #0b2545; }
.export[data-report="executive"] h2, .export[data-report="executive"] th, .export[data-report="executive"] td, .export[data-report="executive"] .export-item { border-color: #e5e7eb; }
.export[data-report="executive"] h2 { border-bottom: 1px solid #e5e7eb; }
.export[data-report="executive"] th, .export[data-report="executive"] td { border: 1px solid #e5e7eb; }
.export[data-report="executive"] th { background: #0b2545; color: #fff; }
.export[data-report="executive"] pre { background: #f3f4f6; color: #111827; }
.export[data-report="executive"] a { color: #13838f; }
.export[data-report="checklist"] { color: #000; background: #fff; font-family: Arial, sans-serif; font-size: 12px; }
.export[data-report="checklist"] h1, .export[data-report="checklist"] h2 { color: #000; font-family: Arial, sans-serif; }
.export[data-report="checklist"] h2, .export[data-report="checklist"] th, .export[data-report="checklist"] td, .export[data-report="checklist"] .export-item { border-color: #999; }
.export[data-report="checklist"] h2 { border-bottom: 1px solid #999; }
.export[data-report="checklist"] th, .export[data-report="checklist"] td { border: 1px solid #999; }
.export[data-report="checklist"] th { background: #f0f0f0; color: #000; }
.export[data-report="checklist"] pre { background: #f7f7f7; color: #000; }
.export[data-report="checklist"] a { color: #000; }
.export[data-report="modern"] { color: #0f172a; background: #fff; }
.export[data-report="modern"] h1, .export[data-report="modern"] h2 { color: #5b5bd6; }
.export[data-report="modern"] h2, .export[data-report="modern"] th, .export[data-report="modern"] td, .export[data-report="modern"] .export-item { border-color: #e8ebf2; }
.export[data-report="modern"] h2 { border-bottom: 1px solid #e8ebf2; }
.export[data-report="modern"] th, .export[data-report="modern"] td { border: 1px solid #e8ebf2; }
.export[data-report="modern"] th { background: #eef0ff; color: #0f172a; }
.export[data-report="modern"] pre { background: #f6f7fb; color: #0f172a; }
.export[data-report="modern"] a { color: #5b5bd6; }
.export[data-report="console"] { color: #c9d4e0; background: #0b0f14; font-family: var(--mono); }
.export[data-report="console"] h1, .export[data-report="console"] h2 { color: #67e8f9; font-family: var(--mono); }
.export[data-report="console"] h2, .export[data-report="console"] th, .export[data-report="console"] td, .export[data-report="console"] .export-item { border-color: #1f2a36; }
.export[data-report="console"] h2 { border-bottom: 1px solid #1f2a36; }
.export[data-report="console"] th, .export[data-report="console"] td { border: 1px solid #1f2a36; }
.export[data-report="console"] th { background: #111821; color: #4ade80; }
.export[data-report="console"] pre { background: #111821; color: #c9d4e0; }
.export[data-report="console"] a { color: #4ade80; }
.export[data-report="board"] { color: #172b4d; background: #fff; }
.export[data-report="board"] h1, .export[data-report="board"] h2 { color: #0c66e4; }
.export[data-report="board"] h2, .export[data-report="board"] th, .export[data-report="board"] td, .export[data-report="board"] .export-item { border-color: #dfe1e6; }
.export[data-report="board"] h2 { border-bottom: 1px solid #dfe1e6; }
.export[data-report="board"] th, .export[data-report="board"] td { border: 1px solid #dfe1e6; }
.export[data-report="board"] th { background: #ebecf0; color: #172b4d; }
.export[data-report="board"] pre { background: #f4f5f7; color: #172b4d; }
.export[data-report="board"] a { color: #0c66e4; }
.export[data-report="workpaper"] { color: #111; background: #fbfdf8; font-family: Arial, sans-serif; }
.export[data-report="workpaper"] h1, .export[data-report="workpaper"] h2 { color: #1a3fa0; font-family: Arial, sans-serif; }
.export[data-report="workpaper"] h2, .export[data-report="workpaper"] th, .export[data-report="workpaper"] td, .export[data-report="workpaper"] .export-item { border-color: #9fb8a8; }
.export[data-report="workpaper"] h2 { border-bottom: 1px solid #9fb8a8; }
.export[data-report="workpaper"] th, .export[data-report="workpaper"] td { border: 1px solid #9fb8a8; }
.export[data-report="workpaper"] th { background: #e3efe6; color: #111; }
.export[data-report="workpaper"] pre { background: #f3f8f1; color: #111; }
.export[data-report="workpaper"] a { color: #b00020; }
.export[data-report="markdown"] { color: #1f2328; background: #fff; font-family: -apple-system, "Segoe UI", sans-serif; }
.export[data-report="markdown"] h1, .export[data-report="markdown"] h2 { color: #1f2328; font-family: -apple-system, "Segoe UI", sans-serif; }
.export[data-report="markdown"] h2, .export[data-report="markdown"] th, .export[data-report="markdown"] td, .export[data-report="markdown"] .export-item { border-color: #d1d9e0; }
.export[data-report="markdown"] h2 { border-bottom: 1px solid #d1d9e0; }
.export[data-report="markdown"] th, .export[data-report="markdown"] td { border: 1px solid #d1d9e0; }
.export[data-report="markdown"] th { background: #f6f8fa; color: #1f2328; }
.export[data-report="markdown"] pre { background: #f6f8fa; color: #1f2328; }
.export[data-report="markdown"] a { color: #0969da; }
.export[data-report="word"] { color: #000; background: #fff; font-family: Calibri, Arial, sans-serif; }
.export[data-report="word"] h1, .export[data-report="word"] h2 { color: #2f5496; font-family: "Calibri Light", Calibri, sans-serif; }
.export[data-report="word"] h2, .export[data-report="word"] th, .export[data-report="word"] td, .export[data-report="word"] .export-item { border-color: #8eaadb; }
.export[data-report="word"] h2 { border-bottom: 1px solid #8eaadb; }
.export[data-report="word"] th, .export[data-report="word"] td { border: 1px solid #8eaadb; }
.export[data-report="word"] th { background: #d9e2f3; color: #000; }
.export[data-report="word"] pre { background: #f2f2f2; color: #000; }
.export[data-report="word"] a { color: #4472c4; }
@media print { .export[data-report] { padding: 0; } }
.decide-nav { margin-top: 10px; }

/* Scan (M12.3): the network check's tiles, tones and the owner's settings form. */
.ok-t { color: var(--ins); } .warn-t { color: var(--warn); } .bad-t { color: var(--del); } .mute-t { color: var(--mute); }
.net-tiles { margin: 0 0 16px; }
.net-tiles span { display: block; color: var(--mute); margin-top: 2px; }
.scan-network .checks { margin-bottom: 14px; }
.scan-network .check .row { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.scan-network td .mono, .scan-network td.mono { overflow-wrap: anywhere; }
.kv-form { display: grid; gap: 8px; margin-top: 8px; font-size: 13px; }
.kv-form label { display: grid; gap: 2px; color: var(--mute); }
.kv-form input { font: 13px var(--mono); padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.kv-form button { justify-self: start; }
.box form.row { margin: 8px 0; }

/* Branding (the Desk): the current images and the grid of the repo's marks. */
.brand-preview { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.brand-preview img { display: block; max-height: 48px; max-width: 220px; }
.mark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.mark-grid .mark { margin: 0; padding: 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mark-grid .mark.on { border-color: var(--acc); }
.mark-grid .mark img { display: block; }
.mark-grid .mark figcaption { font-size: 12.5px; color: var(--mute); }
.mark-grid .mark form { display: flex; gap: 6px; }

/* The menus, rebuilt around the ladder (M17): an entry is its label and the line that says what
   it is, so a word is never alone in a menu. The look switch left the masthead for /appearance. */
.mast .menu.wide { min-width: 290px; padding: 8px; }
.mast .menu a.entry { padding: 8px 10px; line-height: 1.3; }
.mast .menu a.entry b { display: block; font-weight: 600; font-size: 13.5px; }
.mast .menu a.entry small { display: block; color: var(--mute); font-size: 11.5px; white-space: normal; margin-top: 2px; }
.mast .menu a.entry[aria-current="page"] b { color: var(--acc); }
.mast .menu a.entry[aria-current="page"] small { color: var(--mute); }

/* The ladder on the guide: standard, baseline, control, setting, each rung with its own line. */
.guide .box.wide { max-width: none; }
.ladder { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: rung; }
.ladder > li { position: relative; margin: 0 0 14px; padding: 0 0 0 34px; counter-increment: rung; }
.ladder > li::before { content: counter(rung); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); color: var(--mute); font: 600 12px var(--mono); display: flex; align-items: center; justify-content: center; }
.ladder > li::after { content: ""; position: absolute; left: 10px; top: 26px; bottom: -12px; width: 2px; background: var(--rule); }
.ladder > li:last-child::after { display: none; }
.ladder > li > b { font-size: 15px; }
.ladder .rung { color: var(--mute); font-size: 13px; }
.ladder .rung::before { content: "— "; }
.ladder > li > p { margin: 4px 0 0; color: var(--ink); }
.ladder-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 12px; }
.ladder-pair > div { background: var(--panel-2); border-radius: 8px; padding: 12px 14px; }
.ladder-pair h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.ladder-pair p { font-size: 13.5px; line-height: 1.6; }

/* Today, rebuilt again (M20): the window's work keyed by the remedy that ends it. The row is the
   update, the CVEs it clears are its contents, and the publisher's own address is on the verb.
   Three groups — install, mitigate, nothing published — in the order a person can act on them. */
.plat-line { margin: 0 0 14px; }
.fixgroup + .fixgroup { margin-top: 14px; }
.remedies { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.remedy { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--card); }
.remedy .top { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; }
.remedy .what { font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.remedy .what a { border-bottom: 0; }
.remedy .verb { font-weight: 600; color: var(--ins); }
.remedy .what code { font: 600 13.5px var(--mono); background: var(--ins-bg); border: 1px solid var(--ins); color: var(--ins); border-radius: 5px; padding: 1px 7px; }
.remedy .said { font-weight: 500; }
.remedy .where { margin-top: 3px; }
.remedy .top button { font-size: 12px; padding: 3px 9px; }
.remedy .clears { border-top: 1px solid var(--rule); background: var(--panel-2); padding: 7px 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.remedy .cve { font: 500 12px var(--mono); border: 1px solid var(--rule); background: var(--card); border-radius: 5px; padding: 1px 6px; color: var(--ink); border-bottom-width: 1px; }
.remedy .cve.kev { border-color: var(--del); color: var(--del); background: var(--del-bg); }
.remedy .cve.watch { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.remedy.advisory { border-left: 3px solid var(--cyan); }
.remedy.advisory .verb { color: var(--cyan); }
.remedy.advisory .what code { background: transparent; border-color: var(--cyan); color: var(--cyan); }
.remedy.upstream { border-left: 3px solid var(--rule-2); }
.remedy.upstream .said { color: var(--mute); font-weight: 400; }
.remedy.mitigate { border-left: 3px solid var(--warn); }
.remedy.mitigate .said { color: var(--warn); }
.remedy.none { border-left: 3px solid var(--rule-2); }
.remedy.none .said { color: var(--mute); font-weight: 400; }
.stats.today .tile.ok b { color: var(--ins); }
/* The instance's own health: five lines, not five tiles. A figure here is a word, not a number. */
.instance { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.instance > li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--rule); }
.instance > li:first-child { border-top: 0; }
.instance b { font-weight: 500; text-align: right; }
.instance b.bad, .instance b.fail { color: var(--del); }
.instance b.warn { color: var(--warn); }
@media (max-width: 560px) {
  .remedy .top { grid-template-columns: 1fr; }
  .remedy .top form { justify-self: start; }
}
/* A sentence, not a label: the wide menus' captions keep their case. */
.mast .menu.wide .cap { text-transform: none; letter-spacing: 0.01em; font-size: 11.5px; line-height: 1.45; padding-bottom: 6px; }

/* Learn (/learn): where a rule comes from. The flow strip is the chain in one picture; the matrix
   is the same chain read across the bodies that answer each step; a body card carries what it
   derives from, what derives from it, and every address its own words live at with the access that
   address asks for. Seven rungs tinted along the same scale the charts use: the upper rungs are
   authority (mute to cyan), the catalogue and baseline the accent, a setting amber, a check purple. */
.flow { width: 100%; height: auto; display: block; margin: 4px 0 14px; }
.flow-box { fill: var(--card); stroke: var(--rule-2); stroke-width: 1; }
.flow-box.r-framework { stroke: var(--cyan); }
.flow-box.r-catalog, .flow-box.r-baseline { stroke: var(--acc); }
.flow-box.r-setting { stroke: var(--amber); }
.flow-box.r-check { stroke: var(--purple); }
.flow-t { fill: var(--ink); font: 600 12px var(--sans); text-anchor: middle; }
.flow-n { fill: var(--mute); font: 500 10px var(--mono); }
.flow-c { fill: var(--mute); font: 400 10.5px var(--sans); text-anchor: middle; }
.flow-arrow { stroke: var(--rule-2); stroke-width: 1.4; fill: none; }
.rung-list { margin: 10px 0 12px; padding-left: 20px; }
.rung-list > li { margin: 0 0 4px; }
.rung-list > li > b a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.rung-list .rung { color: var(--mute); font-size: 13px; }
.rung-list .rung::before { content: "— "; }
.learn-filters .cap { font: 600 10px var(--sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute); margin-left: 8px; }
.learn-filters .cap:first-child { margin-left: 0; }

/* The matrix: rungs down, audiences across, each cell the bodies that answer there. */
table.matrix { table-layout: fixed; }
table.matrix th { vertical-align: top; text-align: left; }
table.matrix th small, table.matrix th a { display: block; }
table.matrix th small { color: var(--mute); font-weight: 400; font-size: 11px; line-height: 1.35; margin-top: 2px; text-transform: none; letter-spacing: 0; }
table.matrix th[scope="row"] { width: 13em; }
table.matrix td { vertical-align: top; }
table.matrix .chips { gap: 4px; }
table.matrix .chip { white-space: normal; }

/* The three traced chains, side by side where there is room. */
.traces { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.trace .ladder { margin-top: 8px; }
.trace .ladder > li { margin-bottom: 10px; }
.trace .ladder > li > b { font-size: 13.5px; }
.trace .ladder > li > p { font-size: 13px; line-height: 1.55; }
.trace h3 { margin: 0; }
.trace h3 a { color: var(--ink); text-decoration: none; }

/* A body's card: the head, the publisher, then the derivation and the addresses. */
.bodies { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.rung-band { margin: 0 0 22px; }
.rung-band .std-head { margin-bottom: 8px; }
.box.body { margin: 0; }
.body-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.body-head h3 { margin: 0; font-size: 16px; }
.body-head h3 a { color: var(--ink); text-decoration: none; }
.body-pub { margin: 2px 0 8px; color: var(--mute); font-size: 12px; font-family: var(--mono); }
.body .why { color: var(--mute); }
dl.derive { margin: 10px 0 0; font-size: 13px; }
dl.derive dt { font: 600 10px var(--sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute); margin-top: 8px; }
dl.derive dd { margin: 2px 0 0; }
ul.srcs { list-style: none; margin: 2px 0 0; padding: 0; }
ul.srcs > li { padding: 2px 0; line-height: 1.5; }
.chip.acc-public { color: var(--ins); background: var(--ins-bg); border-color: transparent; }
.chip.acc-registration { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip.acc-agency { color: var(--mute); background: var(--panel-2); border-color: var(--rule-2); }
.chip.acc-licence { color: var(--gen); background: var(--panel-2); border-color: transparent; }
.chip.sect, .chip.rung-chip { text-decoration: none; }
.chip.rung-chip { color: var(--acc); border-color: var(--acc); background: transparent; }

ul.normal { margin: 8px 0 0; padding-left: 20px; }
ul.normal > li { margin: 0 0 10px; line-height: 1.6; }
dl.collide dt { font-weight: 600; font-family: var(--mono); font-size: 13px; margin-top: 10px; }
dl.collide dd { margin: 2px 0 0; }
dl.collide ul.plain { list-style: none; margin: 0; padding: 0; }
dl.collide ul.plain > li { padding: 3px 0; line-height: 1.55; color: var(--ink); }
[data-look="console"] .flow-box { fill: var(--panel-2); }
[data-look="console"] .box.body, [data-look="console"] .trace { border-radius: 6px; }
@media (max-width: 760px) {
  table.matrix th[scope="row"] { width: auto; }
  .learn-filters .cap { margin-left: 0; }
}
/* Seven boxes squeezed into a phone are seven boxes nobody can read; the numbered list under the
   strip says the same thing in words, so the picture steps aside rather than shrinking to noise. */
@media (max-width: 700px) {
  .flow { display: none; }
  .rung-list { margin-top: 0; }
}

/* What to do about a domain finding (domainfix.ts): collapsed, so a clean report stays a clean
   report, and the lines to copy set in mono with their own border so a reader can see at a glance
   where the record begins and ends. */
.check .fix { margin: 8px 0 0; border-top: 1px dashed var(--rule); padding-top: 6px; }
.check .fix > summary { cursor: pointer; font: 600 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc); }
.check .fix > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.check .fix .lab { margin: 8px 0 2px; color: var(--mute); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.fix-lines { margin: 0 0 6px; padding: 8px 10px; background: var(--card-2, var(--card)); border: 1px solid var(--rule); border-radius: 6px; font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.check .fix .caution { border-left: 2px solid var(--warn); padding-left: 8px; margin: 6px 0; }