/* ChangeIntel console. Tokens first; components only reference tokens. */
.environment-evidence { margin-bottom: 16px; min-width: 0; overflow-wrap: anywhere; }
.environment-evidence code { white-space: normal; overflow-wrap: anywhere; }
:root {
  color-scheme: light;
  --bg: #f1f3f6;
  --surface: #ffffff;
  --raised: #f7f8fa;
  --ink: #0d1520;
  --ink-2: #334052;
  --muted: #5f6a7c;
  --faint: #666e7c;
  --line: #e1e5eb;
  --line-2: #edf0f3;
  --accent: #2c5ff0;
  --accent-ink: #ffffff;
  --rm: #7657e6;
  --wn: #0a8f81;
  --kb: #1668b8;
  --sn: #b87308;
  --ms: #d23445;
  --ot: #5f6a7c;
  --pn: #c0417b;
  --az: #0a82a3;
  --cm: #5d7a12;
  --ok: #0e7d4d;
  --warn: #9c5f05;
  --crit: #c22b3c;
  --soft: 11%;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
  --pop: 0 12px 32px -12px rgba(16, 24, 40, .24);
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;
  --topbar: 56px;
  --scroll-thumb: #c4cad4;
  --scroll-thumb-hover: #a3abb8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    color-scheme: dark;
    --bg: #0a0d12; --surface: #11151c; --raised: #161b24; --ink: #e8ecf3; --ink-2: #c3cad6;
    --muted: #939cad; --faint: #7b8595; --line: #232b38; --line-2: #1a202a;
    --accent: #7399ff; --accent-ink: #0a0d12;
    --rm: #a38bff; --wn: #3bcbb5; --kb: #5eb0f6; --sn: #eeb446; --ms: #ff6d7a; --ot: #939cad;
    --pn: #f27bb5; --az: #43c6ea; --cm: #a6cb4a;
    --ok: #3ccf8e; --warn: #eeb446; --crit: #ff6d7a; --soft: 16%;
    --shadow: 0 0 0 1px rgba(0, 0, 0, .2); --pop: 0 16px 40px -12px rgba(0, 0, 0, .6);
    --scroll-thumb: #2c3444; --scroll-thumb-hover: #3d475a;
  }
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0a0d12; --surface: #11151c; --raised: #161b24; --ink: #e8ecf3; --ink-2: #c3cad6;
  --muted: #939cad; --faint: #7b8595; --line: #232b38; --line-2: #1a202a;
  --accent: #7399ff; --accent-ink: #0a0d12;
  --rm: #a38bff; --wn: #3bcbb5; --kb: #5eb0f6; --sn: #eeb446; --ms: #ff6d7a; --ot: #939cad;
  --pn: #f27bb5; --az: #43c6ea; --cm: #a6cb4a;
  --ok: #3ccf8e; --warn: #eeb446; --crit: #ff6d7a; --soft: 16%;
  --shadow: 0 0 0 1px rgba(0, 0, 0, .2); --pop: 0 16px 40px -12px rgba(0, 0, 0, .6);
  --scroll-thumb: #2c3444; --scroll-thumb-hover: #3d475a;
}

/* ---------- themes ----------
   A theme is a light or dark base (data-scheme) plus its own surfaces, text, and lines (data-theme); kind and status
   colours come from the base, so red still means critical everywhere. An accent (data-accent) overrides the theme's
   and uses light-dark(), so one choice suits every theme. app.js sets all three from the reader's saved choice. */
:root[data-theme="paper"] {
  --bg: #f3eee5; --surface: #fffdf8; --raised: #f8f3ea; --ink: #2a2118; --ink-2: #463b2f;
  --muted: #65584a; --faint: #6c5f51; --line: #e4dacb; --line-2: #eee6d9; --accent: #9a4f1c; --accent-ink: #ffffff;
  --scroll-thumb: #d2c6b3; --scroll-thumb-hover: #b9ab96;
}
:root[data-theme="solarized-light"] {
  --bg: #eee8d5; --surface: #fdf6e3; --raised: #f5efdb; --ink: #073642; --ink-2: #264b55;
  --muted: #4d6269; --faint: #53686e; --line: #e0d9c3; --line-2: #ebe4cf; --accent: #1d6aa8; --accent-ink: #fdf6e3;
  --ok: #0b6f44;
  --scroll-thumb: #d6cfb8; --scroll-thumb-hover: #bdb59c;
}
:root[data-theme="contrast"] {
  --bg: #ffffff; --surface: #ffffff; --raised: #f0f0f0; --ink: #000000; --ink-2: #111111;
  --muted: #2e2e2e; --faint: #3a3a3a; --line: #767676; --line-2: #a6a6a6; --accent: #0033b3; --accent-ink: #ffffff;
  --ok: #075c35; --warn: #7a4900; --crit: #a3162a; --soft: 14%;
  --shadow: none; --scroll-thumb: #767676; --scroll-thumb-hover: #4a4a4a;
}
:root[data-theme="dim"] {
  --bg: #1c2027; --surface: #22272e; --raised: #2a3039; --ink: #e3e8ef; --ink-2: #c4ccd7;
  --muted: #a2acb9; --faint: #96a0ae; --line: #363d48; --line-2: #2e343e;
  --accent: #86a7ff; --crit: #ff8792; --ms: #ff8792; --soft: 10%;
  --scroll-thumb: #3a414d; --scroll-thumb-hover: #4a525f;
}
:root[data-theme="midnight"] {
  --bg: #000000; --surface: #0a0a0c; --raised: #121216; --ink: #f2f2f5; --ink-2: #cfcfd6;
  --muted: #9d9da8; --faint: #8e8e99; --line: #202027; --line-2: #17171c;
  --shadow: none; --scroll-thumb: #26262d; --scroll-thumb-hover: #33333c;
}
:root[data-accent="blue"] { --accent: light-dark(#2c5ff0, #86a7ff); --accent-ink: light-dark(#ffffff, #0a0d12); }
:root[data-accent="teal"] { --accent: light-dark(#0b766c, #3bcbb5); --accent-ink: light-dark(#ffffff, #04201c); }
:root[data-accent="violet"] { --accent: light-dark(#6a45d6, #b09bff); --accent-ink: light-dark(#ffffff, #140d2a); }
:root[data-accent="amber"] { --accent: light-dark(#955800, #eeb446); --accent-ink: light-dark(#ffffff, #1a1204); }
:root[data-accent="rose"] { --accent: light-dark(#bd2a5a, #f58fc2); --accent-ink: light-dark(#ffffff, #2a0716); }

* { box-sizing: border-box; }
/* The scrollbar's room is always kept, so switching between a long and a short page or tab does not shift the layout. */
html { min-width: 320px; background: var(--bg); scrollbar-color: var(--scroll-thumb) var(--bg); scrollbar-gutter: stable; }
.rail, .tbl-wrap, .chips, .mobile-nav-panel { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* The skip link moves focus to the content; the region itself needs no ring. */
main[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -40px; z-index: 100; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 12px; }
[id] { scroll-margin-top: calc(var(--topbar) + 12px); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 18px 12px 16px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; width: fit-content; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-name { display: block; font: 700 18px/1 var(--display); letter-spacing: -.02em; }
.brand-tag { display: block; margin-top: 4px; color: var(--faint); font: 500 10.5px/1 var(--mono); }
.nav-group { display: grid; gap: 2px; }
.nav-label { padding: 0 10px 6px; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border-radius: 7px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.nav-item:hover { background: var(--raised); color: var(--ink); }
.nav-item.active { background: color-mix(in srgb, var(--accent) var(--soft), transparent); color: var(--accent); font-weight: 600; }
.nav-item .count { margin-left: auto; color: var(--faint); font: 500 11px var(--mono); }
.nav-item.active .count { color: var(--muted); }
.nav-item .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font: 500 10.5px var(--mono); }
.nav-item .lock svg { width: 12px; height: 12px; }
.nav-item.is-off { color: var(--muted); }
.nav-item.is-off.active { color: var(--accent); }
.nav-item .on { margin-left: auto; color: var(--ok); font: 600 10.5px var(--mono); }
/* Sections the reader moved out of the menu stay one click away, folded under "More". */
.nav-more > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.nav-more[open] > summary::after { transform: rotate(45deg); }
.nav-more > summary .n { font: 500 10.5px var(--mono); letter-spacing: 0; }
.pref-menu { display: grid; gap: 16px; }
.menu-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.menu-presets legend, .menu-tabs legend { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.menu-preset { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); text-align: left; }
.menu-preset:hover { border-color: var(--accent); }
.menu-preset b { font-size: 13px; }
.menu-preset span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.menu-tabs { margin: 0; padding: 0; border: 0; }
.menu-tab-row { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-tab-row select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.nav-arrange { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 0 10px; color: var(--faint); font-size: 12px; }
.nav-arrange:hover { color: var(--accent); }
.nav-arrange svg { width: 13px; height: 13px; }
.rail-foot { margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); font-size: 12px; color: var(--muted); }
.rail-foot strong { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12.5px; }
.rail-foot p { margin: 6px 0 0; line-height: 1.45; }

.main { min-width: 0; display: flex; flex-direction: column; }
/* Short pages keep the footer at the bottom of the window instead of a bare band under it. */
.main > .content { flex: 1 0 auto; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--topbar); padding: 0 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1; max-width: 520px; margin: 0; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search input { width: 100%; height: 36px; padding: 0 44px 0 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; outline: none; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.topbar .search-link { display: none; }
.also-in { color: var(--muted); font-size: 12px; }
.status-since { display: block; margin-top: 2px; font-size: 11.5px; }
.fold-more { margin: 0; padding: 10px 16px 12px; color: var(--muted); font-size: 12px; }
.observing-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.observing-note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--faint); }
.observing-note b { color: var(--ink-2); font-weight: 600; }
.panel > .observing-note { padding: 10px 16px 0; }
.also-in a { color: var(--ink-2); }
.also-in a:hover { color: var(--accent); }
.also-in svg { width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; color: var(--faint); }
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); color: var(--faint); font: 500 10.5px var(--mono); }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fresh { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; white-space: nowrap; }
.fresh b { color: var(--ink); font-weight: 600; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); flex: none; }
.dot.is-warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.dot.is-crit { background: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 20%, transparent); }
.dot.is-idle { background: var(--faint); box-shadow: none; }
.fresh.mode { gap: 6px; }
.mode svg { width: 13px; height: 13px; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); list-style: none; }
.icon-btn:hover { color: var(--ink); }
.icon-btn::-webkit-details-marker { display: none; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { cursor: pointer; }
/* The panel scrolls on its own: thirty-odd entries are taller than a phone, and the page behind it must not move. Its
   height stops above the tab bar, and the top bar rises above the tab bar while the menu is open, since the panel's
   own z-index only counts inside the top bar. */
.mobile-nav-panel { position: absolute; left: 0; top: 42px; z-index: 40; display: grid; align-content: start; gap: 14px; width: min(290px, calc(100vw - 32px)); max-height: calc(100dvh - var(--topbar) - 72px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--pop); }
.topbar:has(.mobile-nav[open]) { z-index: 30; }

.content { width: 100%; max-width: 2200px; margin: 0 auto; padding: 22px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 4px 0 2px; }
.page-head h1 { margin: 0; font: 650 26px/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.page-head p { margin: 5px 0 0; max-width: 72ch; color: var(--muted); font-size: 13px; }
.page-head p.site-intro { max-width: 96ch; color: var(--ink-2); }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.seg a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"], .seg a[aria-current="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.seg svg { width: 14px; height: 14px; }

.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.panel-head.ruled { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.panel-head h2 svg { color: var(--faint); }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.link svg { width: 13px; height: 13px; }
/* A link inside a sentence or a fact flows and wraps with the text around it; as a box it would strand a bracket or run past a narrow column. */
.site-intro .link, .facts dd .link { display: inline; white-space: normal; font-size: inherit; }
.panel-body { padding: 14px 16px 16px; }
.sub { color: var(--muted); font-size: 12px; }
.eyeline { color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.big { font: 700 34px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big small { margin-left: 6px; color: var(--muted); font: 500 14px var(--sans); letter-spacing: 0; }
.panel-empty { margin: 0; color: var(--muted); font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: var(--faint); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.06); }
.btn svg { width: 14px; height: 14px; }

/* ---------- category + cadence marks ---------- */
.k-rm { --c: var(--rm); } .k-wn { --c: var(--wn); } .k-kb { --c: var(--kb); } .k-sn { --c: var(--sn); } .k-ms { --c: var(--ms); } .k-ot { --c: var(--ot); } .k-pn { --c: var(--pn); } .k-az { --c: var(--az); } .k-cm { --c: var(--cm); }
.kglyph { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 7px; color: var(--c); background: color-mix(in srgb, var(--c) var(--soft), transparent); }
.kglyph svg { width: 15px; height: 15px; }
.kdot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--c); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tag svg { width: 11px; height: 11px; color: var(--faint); }
a.tag:hover { border-color: var(--faint); color: var(--accent); }
.rt { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 4px; font: 600 10.5px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.rt-b { color: var(--kb); background: color-mix(in srgb, var(--kb) var(--soft), transparent); }
.rt-d, .rt-other { color: var(--muted); background: var(--raised); border: 1px solid var(--line); }
.rt-oob { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--soft), transparent); }

/* ---------- notices ---------- */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--ink-2); font-size: 13px; }
.notice svg { margin-top: 1px; color: var(--warn); }
.notice p { margin: 0; }
.notice a { color: var(--accent); font-weight: 600; }
.about { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.5; }
.about svg { margin-top: 2px; color: var(--faint); }
.about p { margin: 0; }
.about b { color: var(--ink-2); }

/* ---------- overview lead ---------- */
.lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cycle-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.cycle-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--muted); font-size: 12px; }
.cycle-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cycle-track { position: relative; height: 92px; margin: 14px 8px 12px; }
.cycle-track::before { content: ""; position: absolute; left: 0; right: 0; top: 38px; height: 2px; border-radius: 2px; background: var(--line); }
.cycle-past { position: absolute; left: 0; top: 38px; height: 2px; border-radius: 2px; background: var(--ink-2); }
.cycle-mark { position: absolute; top: 0; display: grid; justify-items: center; gap: 6px; transform: translateX(-50%); }
.cycle-mark .when { color: var(--ink-2); font: 600 10.5px/1 var(--mono); white-space: nowrap; }
.cycle-mark .pt { width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--c, var(--kb)); box-shadow: 0 0 0 2px var(--surface); }
.cycle-mark.is-future .when { color: var(--faint); }
.cycle-mark.is-future .pt { background: var(--surface); border: 2px dashed var(--kb); box-shadow: none; }
.cycle-mark .codes { display: flex; gap: 3px; }
.cycle-mark.c-b { --c: var(--kb); } .cycle-mark.c-oob { --c: var(--warn); } .cycle-mark.c-d { --c: var(--faint); }
.cycle-today { position: absolute; top: 24px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.cycle-today span { position: absolute; bottom: 0; left: 6px; color: var(--accent); font: 700 10.5px/1 var(--mono); letter-spacing: .04em; }
.cycle-edge { position: absolute; bottom: 0; color: var(--faint); font: 600 10.5px/1 var(--mono); }
.cycle-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cstat { display: block; padding: 9px 10px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-2); }
a.cstat:hover { border-color: var(--line); }
.cstat b { display: block; font: 650 18px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cstat span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; color: var(--muted); font-size: 11.5px; }

.msrc-title { margin: 0; font: 650 19px/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.msrc-title a:hover { color: var(--accent); }
.months { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--line-2); }
.months li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.months a:hover { color: var(--accent); }
.months li > span { color: var(--muted); }
.panel-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
/* A footer straight under a panel's list or table: its own padded, ruled strip. Inside .panel-body it stays a plain row. */
.panel > .panel-foot { display: block; margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 400; }

.bars { display: grid; gap: 9px; margin-top: 14px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bar-row a:hover { color: var(--accent); }
.bar-row a[aria-current="page"] { color: var(--rm); font-weight: 600; }
.track { height: 8px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 3px; background: var(--rm); }
.bar-row .n { text-align: right; color: var(--muted); font: 500 12px var(--mono); }

/* ---------- activity chart (HTML bars keep labels readable at any width) ---------- */
.chart { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 12px 16px 14px; }
.chart-y { position: relative; height: 150px; color: var(--faint); font: 500 10.5px var(--mono); }
.chart-y span { position: absolute; right: 0; transform: translateY(-50%); }
.chart-plot { position: relative; height: 150px; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; align-items: end; }
.chart-grid { position: absolute; inset: 0; pointer-events: none; }
.chart-grid i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-2); }
.chart-day { position: relative; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 3px; }
.chart-day:hover { background: var(--raised); }
.chart-day i { display: block; width: 100%; min-height: 2px; border-radius: 2px; background: var(--c); }
.chart-day.is-today::after { content: ""; position: absolute; inset: 0 -2px; border: 1px dashed var(--faint); border-radius: 4px; }
.chart-x { grid-column: 2; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; color: var(--faint); font: 500 10.5px var(--mono); }
.chart-x span { display: flex; justify-content: center; white-space: nowrap; }
.chart-x span:last-child { justify-content: flex-end; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.legend a { min-height: 24px; }
.legend span, .legend a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.legend a:hover { color: var(--ink); }
a.chart-day { color: inherit; }
a.chart-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- stream ---------- */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.side { display: grid; gap: 16px; position: sticky; top: calc(var(--topbar) + 16px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip:hover { border-color: var(--faint); }
.chip .n { color: var(--faint); font: 500 11px var(--mono); }
.chip[aria-current="page"] { border-color: var(--c, var(--ink)); background: color-mix(in srgb, var(--c, var(--ink)) var(--soft), transparent); color: var(--ink); }
.chip[aria-current="page"] .n { color: var(--ink-2); }
.filters { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 180px) minmax(0, 175px) auto; gap: 8px; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.filters input, .filters select { min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--raised); font-size: 12.5px; outline: none; }
.filters input:focus, .filters select:focus { border-color: var(--accent); background: var(--surface); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line-2); background: var(--raised); color: var(--muted); font-size: 12px; }
.active-filters b { color: var(--ink); font-weight: 600; }
.day-head { position: sticky; top: var(--topbar); z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 7px 16px; background: color-mix(in srgb, var(--raised) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.day-head span:last-child { color: var(--faint); font: 500 11px var(--mono); }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.row:hover { background: var(--raised); }
.row-title { display: block; color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.38; overflow-wrap: anywhere; }
a.row-title:hover { color: var(--accent); }
.row-body { min-width: 0; padding-right: 6px; }
.row-title .ext { display: inline-block; vertical-align: -2px; width: 12px; height: 12px; margin: 0 -16px 0 4px; color: var(--faint); opacity: 0; transition: opacity .12s; }
.row:hover .ext, .row-title:focus-visible .ext { opacity: 1; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.row-meta .sep { color: var(--faint); }
.row-meta .kbid { color: var(--ink-2); font: 500 12px var(--mono); }
.row-meta .build { font: 500 11.5px var(--mono); }
.row-date { color: var(--faint); font: 500 11.5px var(--mono); white-space: nowrap; padding-top: 2px; }
.row-end { display: grid; justify-items: end; align-content: start; gap: 6px; }
.stream.is-compact .row { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; padding-block: 7px; }
.stream.is-compact .kglyph { width: 22px; height: 22px; border-radius: 5px; }
.stream.is-compact .kglyph svg { width: 12px; height: 12px; }
.stream.is-compact .row-body { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stream.is-compact .row-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.stream.is-compact .row-meta { flex: none; flex-wrap: nowrap; margin-top: 0; }
.stream.is-compact .row-meta .src, .stream.is-compact .row-meta .sep, .stream.is-compact .row-meta .build { display: none; }
.stream-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; color: var(--muted); font-size: 12px; }
.stream-foot div { display: flex; gap: 6px; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 46px 16px; text-align: center; color: var(--muted); }
.empty svg { width: 22px; height: 22px; color: var(--faint); }
.empty h3 { margin: 4px 0 0; color: var(--ink); font-size: 15px; }
.empty p { margin: 0; max-width: 52ch; font-size: 13px; }

/* ---------- tables ---------- */
.tbl-wrap { position: relative; overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { padding: 8px 12px; text-align: left; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.stack { white-space: normal; }
.tbl td.stack .line { display: inline-flex; align-items: center; gap: 6px; }
.tbl td.stack .sub { display: block; margin-top: 3px; font-size: 11.5px; overflow-wrap: anywhere; }
.tbl td:has(.cve-count) { white-space: normal; }
.tbl tbody th.name { white-space: normal; min-width: 170px; }
.cve-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 230px; }
.cve-count:hover .num-strong { color: var(--accent); }
.tbl tbody th { padding: 8px 12px; text-align: left; text-transform: none; letter-spacing: 0; font-size: 12.5px; border-bottom: 1px solid var(--line-2); }
.tbl tr.fam td { padding-top: 12px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--line); }
.tbl tbody tr:not(.fam):hover td { background: var(--raised); }
.tbl .name { color: var(--ink); font-weight: 500; }
.tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl a.kbl { color: var(--ink-2); font: 500 12px var(--mono); border-bottom: 1px dotted var(--faint); }
.tbl a.kbl:hover { color: var(--accent); border-color: var(--accent); }
.tbl .age { color: var(--faint); font: 500 11.5px var(--mono); }
.tbl tr.is-dormant td { color: var(--muted); }
.tbl tr.is-dormant .name { color: var(--muted); }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.flag svg { width: 13px; height: 13px; }
.flag.is-warn { color: var(--warn); }
.flag.is-ok { color: var(--faint); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.status.is-ok { color: var(--ok); } .status.is-warn { color: var(--warn); } .status.is-crit { color: var(--crit); }

/* ---------- data layers ---------- */
.layers { display: grid; gap: 8px; }
.layer { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--raised); }
.layer .lv { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font: 600 11px var(--mono); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.layer.is-on .lv { background: color-mix(in srgb, var(--ok) var(--soft), transparent); border-color: transparent; color: var(--ok); }
.layer b { display: block; font-size: 12.5px; font-weight: 600; }
.layer .d { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.layer .state { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.layer.is-on .state { color: var(--ok); }
.layer .state svg { width: 13px; height: 13px; }
.layer-cards { display: grid; gap: 16px; }
.layer-card { scroll-margin-top: calc(var(--topbar) + 16px); padding: 20px 22px; }
.layer-card header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.layer-card h2 { margin: 0; font: 650 18px/1.2 var(--display); letter-spacing: -.01em; }
.layer-card p { margin: 10px 0 0; max-width: 70ch; color: var(--muted); line-height: 1.55; }
.layer-card ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.layer-card li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); font-size: 13px; }
.layer-card li svg { flex: none; margin-top: 2px; color: var(--faint); }
.layer-card li > span { min-width: 0; overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--muted); font: 600 11.5px var(--mono); white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.pill.is-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }

/* ---------- secondary pages ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.timeline { list-style: none; margin: 0; padding: 6px 16px 10px; }
.timeline li { display: grid; grid-template-columns: 94px 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; }
.timeline .when { color: var(--muted); font: 500 12px var(--mono); }
.timeline .pin { width: 10px; height: 10px; justify-self: center; border-radius: 50%; border: 2px solid var(--ms); background: var(--surface); }
.timeline li:first-child .pin { background: var(--ms); }
.timeline .what { font-size: 13px; font-weight: 500; }
.timeline .what:hover { color: var(--accent); }
.timeline .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.timeline .ok svg { width: 13px; height: 13px; }

.doc { width: 100%; padding: 34px 40px 40px; }
/* Columns rather than a grid: sections of very different lengths pack without row gaps, on screen and in print. */
.doc-sections { columns: 2 460px; column-gap: 44px; margin-top: 18px; }
.doc-sections > .doc-section:first-child > h2:first-child { margin-top: 0; }
.doc-section { min-width: 0; break-inside: avoid; }
.doc-kicker { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font: 500 12px var(--mono); letter-spacing: .02em; }
.doc h1 { margin: 16px 0 10px; font: 650 30px/1.14 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.doc .lede { margin: 0; max-width: 90ch; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.doc .keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 22px 0 6px; }
.doc .key { padding: 12px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-2); }
.doc .key b { display: block; font: 650 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.doc .key span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.doc h2 { display: flex; align-items: center; gap: 9px; margin: 28px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.doc h2 .n { margin-left: auto; color: var(--faint); font: 500 12px var(--mono); }
.doc ul { margin: 0; padding: 0; list-style: none; }
.doc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; }
.doc li a { overflow-wrap: anywhere; }
.doc li a:hover { color: var(--accent); }
.doc li .mono { color: var(--faint); font-size: 11.5px; }
.doc .grp { margin: 14px 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.doc .doc-foot { margin: 26px 0 0; color: var(--muted); font-size: 12px; }

.status-page { max-width: 620px; padding: 40px 0; }
.status-page h1 { margin: 10px 0 12px; font: 650 34px/1.1 var(--display); letter-spacing: -.03em; }
.status-page p { color: var(--muted); line-height: 1.6; }
.status-page .request-id { margin-top: 24px; font-size: 12px; }
.not-found-search { margin: 18px 0 16px; padding: 0; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- team + tenant ---------- */
.decision { border-bottom: 1px solid var(--line); }
.decision .row { border-bottom: 0; }
.decision-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 16px 14px 56px; }
.decision-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.decision-form input, .decision-form select, .decision-form textarea { min-width: 0; width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--raised); color: var(--ink); font-size: 12.5px; font-weight: 400; }
.decision-form input:focus, .decision-form select:focus, .decision-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.decision-note, .decision-actions { grid-column: 1 / -1; }
.decision-metadata { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.decision-links { display: flex; flex-wrap: wrap; gap: 12px; }
.decision-history-title { overflow-wrap: anywhere; }
.decision-history-list { display: grid; gap: 16px; }
.decision-history-entry { padding: 20px; min-width: 0; overflow-wrap: anywhere; }
.decision-history-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.decision-history-heading h3 { margin: 0; }
.decision-history-heading time { color: var(--muted); font-size: 12px; }
.decision-history-entry dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.decision-history-entry dt { color: var(--muted); font-size: 12px; }
.decision-history-entry dd { margin: 4px 0 0; }
.decision-history-note { white-space: pre-wrap; margin-bottom: 0; }
.decision-history-paging { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.decision-form textarea { resize: vertical; }
.decision-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 11.5px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; }
.stat b { display: block; font: 650 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.health-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.health-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.health-item span { color: var(--muted); text-align: right; }

/* ---------- security ---------- */
.sev { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); background: var(--raised); border: 1px solid var(--line); }
.sev-critical { color: var(--crit); background: color-mix(in srgb, var(--crit) var(--soft), transparent); border-color: transparent; }
.sev-important { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--soft), transparent); border-color: transparent; }
.cve-flag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cve-flag svg { width: 12px; height: 12px; }
.cve-flag.is-exploited { color: #fff; background: var(--crit); }
.cve-flag.is-kev { color: var(--crit); background: color-mix(in srgb, var(--crit) var(--soft), transparent); }
.cve-flag.is-disclosed { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--soft), transparent); }
.cve-flag.is-exploit-code { color: var(--crit); background: color-mix(in srgb, var(--crit) var(--soft), transparent); border: 1px dashed color-mix(in srgb, var(--crit) 45%, transparent); }
.cve-flag.is-revised { color: var(--muted); background: var(--raised); border: 1px solid var(--line); }
:root[data-scheme="dark"] .cve-flag.is-exploited { color: #1a0a0c; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme]) .cve-flag.is-exploited { color: #1a0a0c; } }
.cve-id { font: 600 12.5px var(--mono); color: var(--ink); white-space: nowrap; }
a.cve-id:hover { color: var(--accent); }
.cve-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--raised); color: var(--ink-2); font: 500 11px var(--mono); white-space: nowrap; }
a.kb-chip:hover { border-color: var(--accent); color: var(--accent); }
.tbl td.wrap { white-space: normal; min-width: 260px; }
.tbl td.wrap .sub { display: block; margin-top: 2px; }
.tbl .num-strong { font: 650 13px var(--mono); color: var(--ink); }
.stat-row.security-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat.is-alert b { color: var(--crit); }
.stat.is-warn b { color: var(--warn); }
a.stat:hover { border-color: var(--faint); }
.priority { display: grid; }
.priority-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.priority-row:last-child { border-bottom: 0; }
.priority-row:hover { background: var(--raised); }
.priority-row .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.priority-row .title { display: block; margin-top: 4px; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.priority-row .title:hover { color: var(--accent); }
.priority-row .side-meta { display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: 11.5px; text-align: right; }
.filters.security-filters { grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(0, 150px)) auto auto; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.filters .check input { height: 15px; padding: 0; grid-column: auto; border: 0; }
/* Lines come from each cell, not from a background showing through the gaps, so a short last row leaves no grey block. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.facts div { padding: 12px 16px; background: var(--surface); box-shadow: 1px 0 0 var(--line-2), 0 1px 0 var(--line-2); }
.facts dt { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.facts dd { margin: 4px 0 0; color: var(--ink); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.facts dd .mono { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.facts dd .note { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cve-head { display: grid; gap: 10px; }
.cve-head h1 { margin: 0; font: 650 24px/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.cve-head .cve-id { font-size: 14px; }
.prose { margin: 0; max-width: 75ch; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.kev-box { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--crit) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--crit) 6%, var(--surface)); }
.kev-box strong { display: flex; align-items: center; gap: 8px; color: var(--crit); font-size: 13.5px; }
.kev-box p { margin: 0; color: var(--ink-2); font-size: 13px; }
details.more summary { cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 600; }
details.more ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 12.5px; columns: 2 260px; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cve-matches { display: grid; gap: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ms) 4%, var(--surface)); }
.cve-matches .head { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.msrc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.msrc-stats a { display: block; padding: 8px 9px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-2); }
.msrc-stats a:hover { border-color: var(--line); }
.msrc-stats b { display: block; font: 650 18px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.msrc-stats b.is-alert { color: var(--crit); }
.msrc-stats span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.zero-days { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.zero-days li { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.zero-days a.t { color: var(--ink); font-size: 12.5px; font-weight: 500; }
.zero-days a.t:hover { color: var(--accent); }
.zero-days .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- roadmap, known issues, lifecycle, community ---------- */
.status-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--muted); background: var(--raised); border: 1px solid var(--line); }
.st-active { color: var(--ok); background: color-mix(in srgb, var(--ok) var(--soft), transparent); border-color: transparent; }
.st-planned { color: var(--rm); background: color-mix(in srgb, var(--rm) var(--soft), transparent); border-color: transparent; }
.st-done { color: var(--kb); background: color-mix(in srgb, var(--kb) var(--soft), transparent); border-color: transparent; }
.st-alert { color: var(--crit); background: color-mix(in srgb, var(--crit) var(--soft), transparent); border-color: transparent; }
.st-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--soft), transparent); border-color: transparent; }
.cloud-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; border: 1px dashed var(--line); color: var(--muted); font: 600 10.5px var(--mono); white-space: nowrap; }
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { display: grid; gap: 5px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.issue-list li:last-child { border-bottom: 0; }
.issue-list .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); font-size: 11.5px; }
.issue-list a.t { color: var(--ink); font-size: 13px; font-weight: 500; }
.issue-list a.t:hover { color: var(--accent); }
.milestones { list-style: none; margin: 0; padding: 0; }
.milestones li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line-2); }
.milestones li:last-child { border-bottom: 0; }
.milestones .when { color: var(--ink-2); font: 600 12px var(--mono); }
.milestones .what { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 500; }
.milestones .what:hover { color: var(--accent); }
.milestones .kind { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.month-head { padding: 8px 16px; background: var(--raised); border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.source-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.source-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; }
.source-card .name { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.source-card .name span { color: var(--faint); font: 500 11px var(--mono); white-space: nowrap; }
.source-card a.latest { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.source-card a.latest:hover { color: var(--accent); }
.source-card .sub { font-size: 11.5px; }

/* ---------- my view ---------- */
.view-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink-2); font-size: 13px; }
.view-banner svg { color: var(--accent); }
.view-banner p { flex: 1; min-width: 220px; margin: 0; }
.view-hidden b { color: var(--ink); }
.fresh.my-view { color: var(--ink-2); }
.fresh.my-view svg { width: 14px; height: 14px; }
.fresh.my-view.is-on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); font-weight: 600; }
.notice.is-ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.notice.is-ok svg { color: var(--ok); }
.prefs { display: grid; gap: 16px; }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.pref-grid fieldset.wide { grid-column: 1 / -1; }
.prefs fieldset, .pref-menu fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 7px; align-content: start; }
.prefs legend, .pref-menu legend { margin-bottom: 8px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.check-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px 18px; }
.check-columns .n { color: var(--faint); font: 500 11px var(--mono); }
.pref-note { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 12px; }
.pref-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-fine { display: grid; gap: 14px; }
.pref-fine > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); color: var(--muted); font-size: 13px; cursor: pointer; }
.pref-fine > summary b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.pref-fine > summary .n { font-family: var(--mono); font-size: 12px; }
.pref-fine[open] > summary { color: var(--ink); }
.src-link { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); font-size: 11.5px; }
.src-link:hover { color: var(--accent); }
.src-link svg { width: 11px; height: 11px; }
.issue-list .summary { color: var(--muted); font-size: 12px; line-height: 1.45; }
.issue-list a.kbid:hover { color: var(--accent); }
svg.ext-inline { width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px; color: var(--faint); }

/* ---------- review fixes ---------- */
.stat .stat-sub { margin-top: 2px; color: var(--faint); font-size: 11.5px; }
.subhead { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); background: var(--raised); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink); font-size: 13.5px; }
.jump svg { color: var(--accent); }
.jump:hover b { color: var(--accent); }
.site-footer .made-by { color: var(--muted); }
.policy { display: grid; gap: 14px; max-width: 920px; }
.policy > .panel { padding: 16px 20px; }
.policy h2 { margin: 0 0 8px; font-size: 15px; }
.policy p, .policy li { margin: 0 0 8px; color: var(--ink-2); line-height: 1.6; }
.policy ul { margin: 0; padding-left: 20px; }
.policy .address { color: var(--ink); }
.policy .tbl-wrap { margin: 4px 0 12px; }
.policy .tbl td { white-space: normal; vertical-align: top; }
.site-footer { width: 100%; margin: 24px 0 0; padding: 26px 24px 22px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.sf-main { display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(220px, 1fr) minmax(240px, 1fr); gap: 20px 32px; max-width: 1400px; }
.sf-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 14px; }
.sf-brand svg, .sf-brand img { width: 22px; height: 22px; }
.sf-about p { margin: 8px 0 0; max-width: 56ch; }
.sf-fresh { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 11.5px; }
.sf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-links div, .sf-host { display: grid; align-content: start; gap: 6px; }
.site-footer h2 { margin: 0 0 2px; color: var(--ink-2); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.sf-links a { color: var(--ink-2); width: fit-content; }
.sf-links a:hover { color: var(--accent); }
.sf-host { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
.sf-host p { margin: 0; }
.sf-host .btn { width: fit-content; }
.sf-evotec { color: var(--faint); font-size: 12px; }
.sf-legal { max-width: 1400px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
@media (max-width: 1000px) { .sf-main { grid-template-columns: 1fr 1fr; } .sf-host { grid-column: 1 / -1; } }
@media (max-width: 640px) { .sf-main { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .content { padding-bottom: 24px; } }

.epss { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.epss.is-high { color: var(--warn); font-weight: 700; }
abbr[title] { text-decoration: none; cursor: help; }

.service-side { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px dashed var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }

.doc-section ul.grouped li { align-items: baseline; }
.doc-section ul.grouped .what { line-height: 1.55; }
.doc-section ul.grouped .what b { color: var(--ink); font-weight: 650; }
.doc-section ul.grouped .what a { color: var(--ink-2); }
.doc-section ul.grouped .what a:hover { color: var(--accent); }

.tbl th.name .edition { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.more-issues > summary { padding: 10px 16px; border-top: 1px solid var(--line-2); color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none; }
.more-issues > summary::-webkit-details-marker { display: none; }
.more-issues[open] > summary { color: var(--muted); }

.tbl tr.fam .fam-n { margin-left: 10px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; }

.prose-block { display: grid; gap: 8px; }
.prose-block .prose { margin: 0; }
.para-head { margin: 6px 0 -2px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.para-head:first-child { margin-top: 0; }

.tbl td.age.is-quiet { color: var(--warn); }
.quiet-tag { margin-left: 6px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: 4px; font: 600 10px var(--mono); text-transform: uppercase; }

/* ---------- needs attention ---------- */
.attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.attn { --tone: var(--accent); display: flex; gap: 11px; align-items: flex-start; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--tone); border-radius: 10px; background: var(--surface); color: var(--ink-2); transition: border-color .12s, background .12s; }
.attn:hover { background: color-mix(in srgb, var(--tone) 6%, var(--surface)); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); border-left-color: var(--tone); }
.attn-critical { --tone: var(--crit); }
.attn-warning { --tone: var(--warn); }
.attn-info { --tone: var(--accent); }
.attn-icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--tone) var(--soft), transparent); color: var(--tone); }
.attn-icon svg { width: 16px; height: 16px; }
.attn-body { display: grid; gap: 3px; min-width: 0; }
.attn-title { color: var(--ink); font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.attn-detail { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- key dates ---------- */
.key-dates { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.key-dates li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line-2); }
.kd-when { display: grid; justify-items: center; padding: 4px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); line-height: 1.1; }
.kd-when b { color: var(--ink); font: 700 15px var(--display); }
.kd-when span { color: var(--muted); font: 600 10px var(--mono); text-transform: uppercase; }
.kd-what { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.kd-title { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.kd-title svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--muted); }
.kd-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kd-what:hover .kd-title { color: var(--accent); }
.kd-detail { overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.kd-in { color: var(--faint); font: 500 11px var(--mono); white-space: nowrap; }
.kd-patchtuesday .kd-when { border-color: color-mix(in srgb, var(--kb) 45%, var(--line)); }
.kd-patchtuesday .kd-title svg { color: var(--kb); }
.kd-knownexploiteddue .kd-title svg { color: var(--crit); }
.kd-lifecycle .kd-title svg { color: var(--warn); }
.kd-roadmapavailability .kd-title svg { color: var(--rm); }

/* ---------- roadmap changes ---------- */
.rm-changes { display: grid; margin: 0; padding: 0; list-style: none; }
.rm-changes li { display: grid; gap: 3px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.rm-changes.is-compact li { padding: 7px 0; border-top: 1px dashed var(--line-2); }
.rm-change { justify-self: start; padding: 1px 7px; border-radius: 5px; background: var(--raised); color: var(--ink-2); font: 600 11.5px var(--mono); }
.rm-change.is-late { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.rm-change.is-good { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.rm-title { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.35; }
.rm-title:hover { color: var(--accent); }
.rm-changes.is-compact .rm-title { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.rm-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--faint); font-size: 11.5px; }
.subhead-mini { margin: 14px 0 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card-foot-link { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; }
.card-foot-link b { color: var(--ink); }
.card-foot-link svg { margin-left: auto; width: 13px; height: 13px; }
.card-foot-link:hover { color: var(--accent); }
.cycle-week { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; }
.cycle-week svg { width: 13px; height: 13px; }
.cycle-week svg:last-child { margin-left: auto; }
.cycle-week:hover { color: var(--accent); }
.active-filters.is-range { display: flex; align-items: center; gap: 8px; }
.active-filters.is-range svg { width: 14px; height: 14px; color: var(--accent); }

/* ---------- patch readiness ---------- */
.v-now { --v: var(--crit); } .v-test { --v: var(--warn); } .v-pilot { --v: var(--accent); } .v-ready { --v: var(--ok); } .v-super { --v: var(--muted); }
.verdict { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--v) 16%, transparent); color: var(--v); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.verdict svg { width: 13px; height: 13px; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; color: var(--ink); font: 650 16px/1.3 var(--display); }
.section-title svg { width: 16px; height: 16px; color: var(--muted); }
.readiness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.readiness { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-top: 3px solid var(--v); border-radius: 12px; background: var(--surface); }
.readiness-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.readiness-kb { font-size: 13px !important; }
.readiness-for { flex-basis: 100%; color: var(--ink); font-size: 13.5px; font-weight: 650; }
.readiness-summary { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.readiness-meters { display: flex; flex-wrap: wrap; gap: 6px; }
.meter { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); font-size: 11.5px; }
.meter b { color: var(--faint); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 10.5px; }
.meter.u-critical, .meter.r-high { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); color: var(--crit); }
.meter.u-elevated, .meter.r-moderate { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.meter.r-low { color: var(--ok); }
.readiness-reasons { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.readiness-reasons li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.readiness-reasons li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.readiness-reasons li.t-urgent::before { background: var(--crit); }
.readiness-reasons li.t-caution::before { background: var(--warn); }
.readiness-reasons li.t-good::before { background: var(--ok); }
.readiness-reasons li.t-info::before { background: var(--accent); }
.kb-readiness { display: grid; gap: 8px; }
.kb-readiness .readiness { padding: 18px 20px; }
.cycle-readiness { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--v) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--v) 7%, var(--surface)); color: var(--ink-2); font-size: 12.5px; }
.cycle-readiness svg:last-child { margin-left: auto; width: 13px; height: 13px; }
.cycle-readiness:hover { color: var(--ink); border-color: var(--v); }
.pt-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--v) 40%, var(--line)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--v) 12%, var(--surface)), var(--surface) 70%); }
.pt-hero-main { display: grid; gap: 8px; justify-items: start; }
.pt-hero h2 { margin: 0; color: var(--ink); font: 700 clamp(19px, 2vw, 25px)/1.25 var(--display); letter-spacing: -.01em; }
.pt-hero p { margin: 0; max-width: 80ch; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.pt-hero-facts { display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); gap: 10px 22px; margin: 0; }
.pt-hero-facts div { display: grid; gap: 2px; }
.pt-hero-facts dt { color: var(--muted); font-size: 11.5px; }
.pt-hero-facts dd { margin: 0; color: var(--ink); font: 700 22px var(--display); }
.pt-trend { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 210px; padding: 16px 20px 14px; }
.pt-trend-bar { display: grid; grid-template-rows: 1fr auto auto auto; justify-items: center; gap: 3px; flex: 0 1 132px; height: 100%; color: var(--ink-2); }
.pt-trend-bar .bar { display: flex; flex-direction: column-reverse; align-self: end; width: min(56px, 70%); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--ms) 30%, transparent); overflow: hidden; }
.pt-trend-bar .bar .crit { display: block; width: 100%; background: var(--ms); }
.pt-trend-bar.is-current .bar { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-trend-bar b { color: var(--ink); font: 700 13px var(--mono); }
.pt-trend-bar .lbl { color: var(--muted); font-size: 11.5px; }
.pt-trend-bar .expl { color: var(--crit); font-size: 10.5px; font-weight: 600; }
.pt-trend-bar:hover .lbl { color: var(--accent); }
.pt-months { flex-wrap: wrap; }
@media (max-width: 860px) { .pt-hero { grid-template-columns: 1fr; } .pt-trend { gap: 6px; padding: 12px; } }

/* ---------- what I run ---------- */
.stack-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .stack-layout { grid-template-columns: 1fr; } }
.stack-list { display: grid; margin: 0; padding: 0; list-style: none; }
.stack-item { --s: var(--ok); display: grid; min-width: 0; overflow-wrap: anywhere; gap: 7px; padding: 13px 16px; border-top: 1px solid var(--line-2); border-left: 3px solid var(--s); }
.stack-list .stack-item:first-child { border-top: 0; }
.stack-item.s-exposed, .stack-item.s-unsupported { --s: var(--crit); }
.stack-item.s-behind { --s: var(--warn); }
.stack-item.s-unknown { --s: var(--faint); }
.stack-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack-status { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--s) 16%, transparent); color: var(--s); font-size: 11.5px; font-weight: 700; }
.stack-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; }
.stack-remove { margin: 0 0 0 auto; }
.stack-versions { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--ink-2); font-size: 12.5px; }
.stack-versions code, .stack-help code { padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); font: 12px var(--mono); }
.stack-missing { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; }
.stack-missing .sub { font-size: 12px; }
.sub.is-alert { color: var(--crit); font-weight: 600; }
.stack-note { margin: 0; color: var(--muted); font-size: 12px; }
.stack-help { padding: 0 16px 16px; }
.stack-help p { margin: 12px 0 0; }
.readiness.is-mine { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.mine-tag { display: inline-flex; align-items: center; gap: 5px; flex-basis: 100%; color: var(--accent); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mine-tag svg { width: 13px; height: 13px; }

/* ---------- announced retirements ---------- */
.retirements { display: grid; margin: 0; padding: 0; list-style: none; }
.retirements li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 11px 16px; border-top: 1px solid var(--line-2); }
.ret-when { display: grid; justify-items: center; padding: 5px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--muted); font-size: 11px; line-height: 1.2; text-align: center; }
.ret-when b { color: var(--ink); font: 700 13px var(--display); }
.ret-when.is-soon { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.ret-when.is-soon b { color: var(--warn); }
.ret-body { display: grid; gap: 4px; min-width: 0; }
.ret-title { color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.ret-title:hover { color: var(--accent); }
.ret-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }

/* ---------- feeds page ---------- */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.feed-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.feed-card header { display: flex; gap: 14px; align-items: flex-start; }
.feed-card h2 { margin: 0; font: 650 16px/1.25 var(--display); }
.feed-card header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.feed-card .feed-note { margin-top: 8px; color: var(--faint); font-size: 12px; }
.feed-url { display: flex; gap: 8px; margin-top: auto; }
.feed-url input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink-2); font: 12px var(--mono); }

/* ---------- team notices ---------- */
.notices { display: grid; margin: 0; padding: 0; list-style: none; }
.notice-item { --tone: var(--accent); display: grid; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line-2); border-left: 3px solid var(--tone); }
.notices .notice-item:first-child { border-top: 0; }
.notice-item.lvl-urgent { --tone: var(--crit); }
.notice-item.lvl-notice { --tone: var(--warn); }
.notice-item.is-past { opacity: .6; border-left-color: var(--line); }
.notice-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.notice-top .lvl { padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--tone) var(--soft), transparent); color: var(--tone); font: 700 11px var(--mono); text-transform: uppercase; }
.notice-top .pin { padding: 1px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.notice-meta { color: var(--faint); font-size: 11.5px; }
.notice-title { margin: 0; color: var(--ink); font: 650 14.5px/1.35 var(--display); }
.notice-body { margin: 0; max-width: 90ch; color: var(--ink-2); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-actions { margin: 2px 0 0; }
.notice-ack-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.notice-ack-status form { margin: 0; }
.notice-ack-status .btn { font-size: 12px; }
.notice-ack-help { padding: 12px 16px; margin: 0; color: var(--muted); font-size: 12px; }
.team-notices .notices { margin-top: 0; }
.notice-form { display: grid; gap: 8px; padding: 16px; }
.notice-form label { color: var(--muted); font-size: 12px; font-weight: 600; }
.notice-form input:not([type="checkbox"]), .notice-form textarea, .notice-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); font: inherit; font-size: 13px; }
.notice-form textarea { resize: vertical; min-height: 110px; }
.notice-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.notice-form-row > div { display: grid; gap: 6px; }
.notice-form .check { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.notice-form .btn { justify-self: start; margin-top: 4px; }

/* ---------- stories and mentions ---------- */
.story { border-bottom: 1px solid var(--line-2); }
.story > .row { border-bottom: 0; }
.story-related { display: grid; gap: 2px; margin: -4px 16px 10px 56px; padding: 6px 0 2px 12px; border-left: 2px solid var(--line); }
.story-label { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.story-link { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; color: var(--ink-2); font-size: 12.5px; }
.story-link .kdot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
.story-link .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.story-link .src { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.story-link:hover .t { color: var(--accent); }
.stream.is-compact .story-related { margin-left: 50px; }
.mention { padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-2); font: 500 11px var(--mono); }
.mention:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .story-related { margin-left: 16px; } .story-link { grid-template-columns: 8px minmax(0, 1fr); } .story-link .src { grid-column: 2; } }

/* ---------- exports, feed, and visit marker ---------- */
.head-tools { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.export-links { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; font-weight: 600; }
.export-links svg { width: 13px; height: 13px; }
.export-links a { color: var(--accent); }
.export-links a:hover { text-decoration: underline; }
.feed-link { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 10px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.feed-link svg { width: 13px; height: 13px; color: var(--sn); }
.feed-link:hover { border-color: var(--accent); color: var(--accent); }
.visit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; }
.visit-bar svg { width: 14px; height: 14px; color: var(--faint); }
.visit-bar .sub { color: var(--faint); font-size: 11.5px; }
.visit-bar.is-on { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink-2); }
.visit-bar.is-on svg { color: var(--accent); }
.visit-bar.is-on b { color: var(--ink); }
.visit-bar form { display: inline; margin: 0 0 0 auto; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.seen-divider { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.seen-divider::before, .seen-divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- folded bursts in the change stream ---------- */
.burst > summary { cursor: pointer; list-style: none; }
.burst > summary::-webkit-details-marker { display: none; }
.burst > summary .row-title { color: var(--ink); }
.burst > summary:hover .row-title { color: var(--accent); }
.burst-peek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.burst-toggle { align-self: center; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.burst > summary:hover .burst-toggle { border-color: var(--accent); color: var(--accent); }
.burst .when-open, .burst[open] .when-closed { display: none; }
.burst[open] .when-open { display: inline; }
.burst[open] > summary { background: var(--raised); }
.burst-items { border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent); margin-left: 29px; }
.burst-items .row { padding-left: 14px; }
.stream.is-compact .burst-items { margin-left: 26px; }

/* ---------- versions ---------- */
.stat b.ver { font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.stat b.ver.is-long { font-size: clamp(14px, 1.15vw, 17px); padding-top: 5px; }
.version-panel { scroll-margin-top: calc(var(--topbar) + 16px); }
.version-tbl .ver-now { color: var(--ink); font: 650 13px var(--mono); }
.version-tbl .is-recent { color: var(--ok); font-weight: 600; }
.version-tbl th.name .src { margin-left: 4px; color: var(--faint); vertical-align: -2px; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.version-tbl th.name .src:hover { color: var(--accent); }
.version-tbl th.name .src svg { width: 13px; height: 13px; }
.version-tbl .deadline-soon { color: var(--crit); font-weight: 600; }
.version-tbl .ver-kept { display: block; margin-top: 2px; color: var(--warn); font-size: 11px; }
.status-note { display: block; max-width: 36ch; margin-top: 2px; color: var(--muted); font-size: 11.5px; white-space: normal; }
.history summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ink-2); font-size: 12.5px; cursor: pointer; list-style: none; }
.history summary::-webkit-details-marker { display: none; }
.history summary::after { content: "▾"; color: var(--faint); font-size: 10px; }
.history[open] summary::after { content: "▴"; }
.history summary:hover { color: var(--accent); }
.history ol { display: grid; gap: 5px; margin: 8px 0 2px; padding: 0; list-style: none; }
.history li { display: grid; gap: 1px; font-size: 12px; }
.history li .sub { margin: 0; color: var(--muted); white-space: normal; }
.cve-links { display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: 520px; margin-top: 8px; white-space: normal; }

/* ---------- install & host ---------- */
.install-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.install-card { display: grid; align-content: start; gap: 14px; padding: 20px 22px; }
.install-card header { display: flex; gap: 14px; align-items: flex-start; }
.install-card h2 { margin: 0; font: 650 18px/1.2 var(--display); letter-spacing: -.01em; }
.install-card header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.install-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) var(--soft), transparent); color: var(--accent); }
.steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.5; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); color: var(--muted); font: 600 11px var(--mono); }
.steps li > .code { grid-column: 2; }
pre.code { margin: 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); font: 12px/1.55 var(--mono); white-space: pre; }
pre.code code { font: inherit; }
:is(.install-card, .layer-card, .level-steps) code:not(pre code) { padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); font: 12px var(--mono); overflow-wrap: anywhere; }
.host-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px !important; }
.host-list li { display: block !important; }
.level-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.level-steps article { display: grid; align-content: start; gap: 10px; padding: 18px 20px; border-right: 1px solid var(--line-2); }
.level-steps article:last-child { border-right: 0; }
.level-steps h3 { margin: 0; font: 650 15px/1.3 var(--display); }
.level-steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.level-tag { justify-self: start; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) var(--soft), transparent); color: var(--accent); font: 700 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.install-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.install-help h2 { margin: 0; font: 650 17px/1.25 var(--display); }
.install-help p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 860px) { .level-steps article { border-right: 0; border-bottom: 1px solid var(--line-2); } .level-steps article:last-child { border-bottom: 0; } }

/* ---------- level 2 / level 3 ---------- */
.preview-banner { display: grid; gap: 10px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--warn) 60%, var(--line)); border-radius: 10px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 6%, var(--surface)) 0 12px, var(--surface) 12px 24px); color: var(--ink-2); font-size: 13px; }
.preview-banner p { margin: 0; max-width: 100ch; }
.preview-tag { width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--warn); color: var(--accent-ink); font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
:root[data-scheme="dark"] .preview-tag { color: #1a1204; }
.preview-frame { position: relative; display: grid; gap: 16px; padding: 14px; border: 2px dashed color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 14px; }
.preview-frame::before { content: "SAMPLE DATA"; position: absolute; top: -11px; right: 18px; padding: 1px 8px; border-radius: 6px; background: var(--bg); color: var(--warn); font: 700 11px var(--mono); letter-spacing: .08em; }
.stat b .of { margin-left: 2px; color: var(--faint); font: 500 14px var(--sans); }
.st-muted { color: var(--muted); }
.deadline { color: var(--ink-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.deadline.is-soon { color: var(--crit); }
.health-grid { list-style: none; margin: 8px 0 0; padding: 0; }
.health-grid li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line-2); font-size: 13px; }
.health-grid .name { color: var(--ink); font-weight: 500; }
.health-grid .state { color: var(--muted); font-size: 12px; }
.build-bars { list-style: none; margin: 8px 0 12px; padding: 0 16px; display: grid; gap: 10px; }
.build-bars li { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; }
.build-bars .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-bars .split { display: flex; height: 10px; overflow: hidden; border-radius: 4px; background: var(--raised); }
.build-bars .split i { background: var(--ok); }
.build-bars .split b { background: var(--warn); }
.build-bars .n { text-align: right; color: var(--muted); font: 500 12px var(--mono); }

/* ---------- cached Microsoft text (internal hosts only) ---------- */
.article-text { display: grid; gap: 8px; }
.article-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }
.article-source svg { color: var(--faint); }
.article-source span { flex: 1; min-width: 220px; }
.article-section { border-top: 1px solid var(--line-2); padding: 8px 0; }
.article-section summary { cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 600; }
.article-section p, .article-section li { max-width: 95ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.article-section p { margin: 8px 0; }
.article-section ul { margin: 6px 0; padding-left: 20px; }
.article-section h4 { margin: 14px 0 4px; color: var(--ink); font-size: 13.5px; }
.article-section pre { overflow-x: auto; margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-2); color: var(--ink); font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.article-section .table-row { font: 12px var(--mono); color: var(--muted); }
.article-text.is-compact .article-section { border-top: 0; padding: 0; }
.article-text.is-compact .article-source { font-size: 11.5px; }
.issue-details summary { cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; }
.issue-details[open] summary { margin-bottom: 8px; }

/* ---------- reader marks ---------- */
.mark { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.mark-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mark-btn svg { width: 13px; height: 13px; }
.mark-btn.is-done:hover { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: var(--ok); }
.mark-btn.is-skip:hover { border-color: var(--faint); color: var(--ink); }
.mark-btn.is-undo { height: 22px; padding: 0 5px; border-color: transparent; background: none; color: var(--accent); }
.mark-btn.is-undo:hover { text-decoration: underline; }
.mark-state { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mark-state svg { width: 12px; height: 12px; }
.mark.is-marked-done .mark-state { background: color-mix(in srgb, var(--ok) var(--soft), transparent); color: var(--ok); }
.mark.is-marked-skip .mark-state { border: 1px solid var(--line); background: var(--raised); color: var(--muted); }
.mark.is-compact .mark-btn { width: 26px; height: 24px; padding: 0; }
.mark.is-compact .mark-btn span { display: none; }
.mark.is-compact .mark-btn.is-undo { width: 22px; }
.mark.is-compact .mark-state { height: 20px; padding: 0 7px; font-size: 11px; }
/* Marked items step back; not-relevant ones fade until hovered. */
:is(.row, .priority-row, .issue-list li, .milestones li, .retirements li, .readiness, .tbl tbody tr):has(.mark.is-marked-done) :is(.row-title, .title, a.t, .what, .ret-title, .readiness-for) { color: var(--muted); }
:is(.row, .priority-row, .issue-list li, .milestones li, .retirements li, .readiness, .tbl tbody tr):has(.mark.is-marked-skip) { opacity: .55; transition: opacity .12s; }
:is(.row, .priority-row, .issue-list li, .milestones li, .retirements li, .readiness, .tbl tbody tr):has(.mark.is-marked-skip):is(:hover, :focus-within) { opacity: 1; }
.readiness:has(.mark.is-marked-done) { border-top-color: var(--ok); background: color-mix(in srgb, var(--ok) 4%, var(--surface)); }
.readiness-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); }
.issue-list .top .mark { margin-left: auto; }
.issue-list .top .upd { color: var(--faint); }
.status-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* In dense lists the buttons appear with the row on pointer devices; a mark, once set, always shows. */
@media (hover: hover) {
  :is(.row, .priority-row, .issue-list li, .milestones li, .retirements li, .tbl tbody tr) .mark:not(.is-marked-done, .is-marked-skip) .mark-btn { opacity: 0; transition: opacity .12s; }
  :is(.row, .priority-row, .issue-list li, .milestones li, .retirements li, .tbl tbody tr):is(:hover, :focus-within) .mark .mark-btn { opacity: 1; }
}
.marks-bar .link-btn { margin-left: auto; }
.section-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin: 4px 0 10px; }
.section-bar .section-title { margin: 0; }
.checklist { display: grid; gap: 6px; width: min(100%, 440px); color: var(--muted); font-size: 12px; }
.checklist b { color: var(--ink); }
.checklist-bar { display: flex; height: 6px; overflow: hidden; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.checklist-bar i { display: block; height: 100%; }
.checklist-bar .is-done { background: var(--ok); }
.checklist-bar .is-skip { background: var(--faint); }
.mark-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 14px 16px; }
.mark-scope { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--raised); }
.mark-scope b { font: 650 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.mark-scope > span:not(.sub) { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mark-scope form { margin: 4px 0 0; }
.marks-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.marks-foot form { margin: 0; }
.marks-empty { max-width: 95ch; padding-top: 14px; line-height: 1.55; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- layout fixes ---------- */
@media (min-width: 1200px) {
  /* Five feeds: three across, then two wider cards, instead of a row with a gap. */
  .feed-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feed-grid > * { grid-column: span 2; }
  .feed-grid > :nth-child(4):nth-last-child(2), .feed-grid > :nth-child(5):nth-last-child(1) { grid-column: span 3; }
}
/* In narrow cards the address gets its own line, so more of it stays readable. */
.feed-card { container-type: inline-size; }
@container (max-width: 460px) { .feed-url { flex-wrap: wrap; } .feed-url input { flex-basis: 100%; } }
.facts dd .vector { overflow-wrap: normal; }
.version-tbl { table-layout: fixed; min-width: 760px; }
.version-tbl td { white-space: normal; }
.version-tbl .c-name { width: 21%; } .version-tbl .c-ver { width: 15%; } .version-tbl .c-date { width: 11%; }
.version-tbl .c-release { width: 18%; } .version-tbl .c-support { width: 24%; } .version-tbl .c-more { width: 11%; }
.tbl.is-fluid td, .tbl.is-fluid td.stack .sub { white-space: normal; }
/* Inline code chips keep a little air from the words and punctuation around them. */
:is(.install-card, .layer-card, .level-steps, .stack-help, .stack-versions) code:not(pre code) { margin-inline: 2px; }
.params { display: grid; gap: 0; margin: 14px 0 12px; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.params > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 12px; border-top: 1px solid var(--line-2); }
.params > div:first-child { border-top: 0; }
.params dt { margin: 0; }
.params dt code { margin-inline: 0 !important; color: var(--accent); font-weight: 600; }
.params dd { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.param-values { display: inline-flex; flex-wrap: wrap; gap: 5px 6px; vertical-align: baseline; }
.param-values code { margin-inline: 0 !important; }
/* Readiness cards: the title, KB, reasons, and a Details link lead to the KB page. */
.readiness .readiness-kb { height: 22px; padding: 0 7px; font-size: 12px !important; }
a.readiness-for { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .12s; }
a.readiness-for:hover { color: var(--accent); text-decoration-color: currentColor; }
.readiness-reasons a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--faint) 60%, transparent); text-decoration-style: dotted; text-underline-offset: 3px; }
.readiness-reasons a:hover { color: var(--accent); text-decoration-color: currentColor; text-decoration-style: solid; }
.readiness-reasons li.more { padding-left: 16px; }
.readiness-reasons li.more::before { display: none; }
.readiness-reasons li.more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.readiness-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.readiness-more { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.readiness-more svg { width: 13px; height: 13px; transition: transform .12s; }
.readiness-more:hover svg { transform: translateX(2px); }
.readiness-changed { display: grid; gap: 4px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--ink-2); font-size: 12px; }
.readiness-changed b { display: flex; align-items: center; gap: 6px; color: var(--warn); }
.readiness-changed b svg { width: 13px; height: 13px; }
.readiness-changed ul { margin: 0; padding-left: 19px; }
.readiness:has(.readiness-changed) { border-top-color: var(--warn); }
.checklist-changed { color: var(--warn); font-weight: 600; }
.cycle-progress { padding: 1px 8px; border-radius: 999px; background: var(--raised); color: var(--ink-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cycle-progress.is-complete { background: color-mix(in srgb, var(--ok) var(--soft), transparent); color: var(--ok); }

/* Long pill labels wrap on narrow screens instead of widening the page. */
.pill { max-width: 100%; height: auto; min-height: 24px; padding-block: 2px; white-space: normal; line-height: 1.35; }

/* ---------- mobile tab bar ---------- */
.tabbar { display: none; }

@media (max-width: 1280px) {
  .work { grid-template-columns: minmax(0, 1fr) 360px; }
  .lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lead > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1060px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .filters input { grid-column: 1 / -1; }
  .filters.security-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav-panel .nav-group { gap: 0; }
  .topbar { padding: 0 16px; gap: 8px; }
  .fresh .long, .mode .long, .search kbd { display: none; }
  .search input { padding-right: 10px; }
  .content { padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--muted); font-size: 10.5px; font-weight: 600; }
  .tabbar a.active { color: var(--accent); }
  .tabbar svg { width: 19px; height: 19px; }
  .doc { padding: 22px 18px 26px; }
  .decision-form { padding-left: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .topbar .search { display: none; }
  .topbar .search-link { display: grid; }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .mode { display: none; }
  .fresh .fresh-time { display: none; }
  .page-head h1 { font-size: 22px; }
  .big { font-size: 30px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filters .btn { grid-column: 1 / -1; }
  .row { grid-template-columns: 28px minmax(0, 1fr); }
  .row-end { grid-column: 2; grid-auto-flow: column; justify-content: start; align-items: center; margin-top: -4px; }
  .row-date { padding-top: 0; }
  .stream.is-compact .row { grid-template-columns: 22px minmax(0, 1fr); }
  .stream.is-compact .row-end, .stream.is-compact .row-meta { display: none; }
  .cstat span { display: grid; justify-items: start; }
  .chart { grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
  .chart-plot, .chart-x { gap: 2px; }
  .timeline li { grid-template-columns: 84px 14px minmax(0, 1fr); }
  .timeline .ok { display: none; }
  .filters.security-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filters.security-filters input[type="search"] { grid-column: 1 / -1; }
  .priority-row { grid-template-columns: minmax(0, 1fr); }
  .priority-row .side-meta { justify-items: start; text-align: left; }
  .msrc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milestones li { grid-template-columns: 74px minmax(0, 1fr); }
  .milestones .kind, .milestones .mark { grid-column: 2; }
  .retirements li { grid-template-columns: 64px minmax(0, 1fr); }
  .retirements .mark { grid-column: 2; }
  .decision-form { grid-template-columns: minmax(0, 1fr); }
  .decision-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .rail, .topbar, .tabbar, .skip-link, .no-print { display: none !important; }
  .app { display: block; }
  body, html { background: #fff; }
  .content { padding: 0; }
  .panel, .doc { border: 0; box-shadow: none; }
  .day-head { position: static; }
}

/* Overview: period switch, area timeline, threads, what you run, key dates by day, and the end of the page. */
.overview-head { align-items: flex-end; }
.page-head p.period-note { color: var(--ink-2); font-size: 13px; }
.period-switch form { display: contents; }
.period-switch button { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.period-switch button:hover { color: var(--ink); }

.area-timeline .panel-head { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; }
.tl-sub { color: var(--muted); font-size: 12px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 0 auto; padding: 0; list-style: none; color: var(--muted); font-size: 11.5px; }
.tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tl-glyph { --c: var(--muted); --d: 10px; position: relative; display: inline-block; width: 14px; height: 14px; flex: none; }
.tl-glyph::before, .tl-mark::before { content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box; transform: translate(-50%, -50%); background: var(--c); }
.s-release::before { width: var(--d); height: var(--d); border-radius: 50%; }
.s-issue::before { width: calc(var(--d) * .78); height: calc(var(--d) * .78); border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.s-urgent::before { width: calc(var(--d) * 1.15); height: var(--d); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.s-revised::before { width: var(--d); height: var(--d); border: 2px solid var(--c); border-radius: 50%; background: transparent; }
.s-deadline::before { width: 3px; height: calc(var(--d) * 1.8); border-radius: 2px; }
.tl-mark.t-routine { --d: 7px; }
.tl-mark.t-routine::before { opacity: .5; }
.tl-mark.t-notable { --d: 11px; }
.tl-mark.t-critical { --d: 15px; }
.tl-mark.t-critical:not(.s-urgent)::before { box-shadow: 0 0 0 3px var(--surface); }
.tl-mark.is-marked::before { opacity: .25; }
.tl-mark.is-ahead.s-release::before { border: 2px dashed var(--c); background: transparent; }

.tl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; }
.tl-rows { position: relative; }
.tl-lane { min-height: 56px; border-top: 1px solid var(--line-2); }
/* A row the reader's view emptied: one short line that says so, with its track hatched instead of looking quiet. */
.tl-lane.is-folded { min-height: 38px; }
.tl-lane.is-folded .tl-label b { color: var(--ink-2); font-weight: 500; }
.tl-lane.is-folded .tl-label small { display: none; }
.tl-lane.is-folded .tl-track { background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--line) 55%, transparent) 7px 8px); }
.tl-count .tl-hidden { color: var(--accent); font-weight: 500; }
.tl-count .tl-hidden:hover { text-decoration: underline; }
.tl-label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 16px; color: var(--ink); }
.tl-label .kdot { width: 10px; height: 10px; border-radius: 3px; }
.tl-label > span:last-child { min-width: 0; }
.tl-label b { display: block; font-size: 13px; font-weight: 600; }
.tl-label small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
a.tl-label:hover b { color: var(--accent); }
.tl-track { position: relative; min-width: 0; }
.tl-marks { margin: 0; padding: 0; list-style: none; }
.tl-mark { position: absolute; top: 62%; width: 24px; height: 24px; border-radius: 6px; transform: translate(-50%, -50%); }
.tl-mark:hover, .tl-mark:focus-visible { z-index: 3; background: color-mix(in srgb, var(--c) 16%, transparent); }
.tl-note { position: absolute; top: 5px; z-index: 1; max-width: 20%; overflow: hidden; padding: 0 5px; border-radius: 4px; background: var(--surface); color: var(--ink-2); font-size: 11px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; transform: translateX(-6px); pointer-events: none; }
.tl-note.is-flipped { transform: translateX(calc(-100% + 6px)); }
.tl-count { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 6px 14px; border-left: 1px solid var(--line-2); color: var(--ink-2); font-size: 12px; }
.tl-count b { color: var(--ink); font-weight: 600; }
.tl-count .is-crit { color: var(--crit); font-weight: 600; }
.tl-count .is-warn { color: var(--warn); font-weight: 600; }
.tl-gap { position: absolute; inset: 6px 0; border-radius: 6px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 12%, transparent) 0 6px, transparent 6px 12px); }
.tl-overlay { position: absolute; top: 0; bottom: 0; left: 200px; right: 150px; pointer-events: none; }
.tl-week { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.tl-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tl-line { position: absolute; top: 0; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.tl-line-historystart { border-left-color: var(--faint); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .7; }
.tl-axis { height: 30px; }
.tl-axis:last-child { border-top: 1px solid var(--line-2); }
.tl-colhead { padding: 9px 16px 0; color: var(--faint); font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tl-colhead.tl-count { display: block; padding: 9px 14px 0; }
.tl-tag { position: absolute; top: 6px; padding: 1px 7px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.tl-tag-today { background: var(--ink); color: var(--bg); }
.tl-tag-historystart { background: var(--raised); color: var(--muted); }
/* Which side of its line a tag sits on, and a second line for tags that would touch another (AreaTimeline.HeaderTags). */
.tl-tag.is-before { transform: translateX(calc(-100% - 4px)); }
.tl-tag.is-start { transform: none; }
.tl-tag.is-end { transform: translateX(-100%); }
.tl-tag.tag-row-1 { top: 27px; }
.tl-tag.tag-row-2 { top: 48px; }
.tl-axis-top.tag-rows-2 { height: 52px; }
.tl-axis-top.tag-rows-3 { height: 73px; }
.tl-lane-now { display: none; }
.tl-week-label { position: absolute; top: 8px; color: var(--muted); font: 500 11px var(--mono); white-space: nowrap; transform: translateX(-50%); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel-more { display: flex; align-items: center; gap: 4px; padding: 10px 16px 12px; border-top: 1px solid var(--line-2); color: var(--accent); font-size: 12px; font-weight: 600; }
.panel-more:hover { text-decoration: underline; }
.panel-more svg { width: 13px; height: 13px; }
.threads-empty, .stack-empty { padding: 14px 16px 16px; }

.threads { margin: 0; padding: 0; list-style: none; }
.thread { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.thread:first-child { border-top: 0; }
.thread-title { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.thread-title:hover .t { color: var(--accent); }
.thread-tier { flex: none; margin-top: 1px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 10.5px; font-weight: 700; }
.thread-tier.t-critical { border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); background: color-mix(in srgb, var(--crit) 10%, var(--surface)); color: var(--crit); }
.thread-tier.t-notable { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent); }
.thread-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.thread-steps li { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--ink-2); font-size: 12px; }
.thread-steps li + li::before { content: "\2192"; position: absolute; left: -14px; color: var(--faint); }
.thread-steps time { color: var(--muted); font: 500 11px var(--mono); }
.thread-steps li.t-critical { border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); color: var(--crit); }
.thread-steps li.more { border-style: dashed; background: none; color: var(--muted); }
.thread-areas { color: var(--muted); font-size: 11.5px; }

.stack-rows { margin: 0; padding: 0; list-style: none; }
.stack-rows a { display: grid; gap: 1px; padding: 10px 16px; border-top: 1px solid var(--line-2); color: var(--ink); }
.stack-rows li:first-child a { border-top: 0; }
.stack-rows a:hover b { color: var(--accent); }
.stack-rows b { font-size: 13px; font-weight: 600; }
.stack-rows span { color: var(--muted); font-size: 12px; }
.stack-rows .st-exposed span, .stack-rows .st-unsupported span { color: var(--crit); }
.stack-rows .st-behind span { color: var(--warn); }
.stack-rows .st-current span { color: var(--ok); }

.key-days { margin: 0; padding: 0; list-style: none; }
.key-days > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.key-days > li:first-child { border-top: 0; }
.key-days ul { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.key-days > li.is-today .kd-when { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
.key-days > li.is-today .kd-when span { color: var(--crit); }

.page-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: 10px; }
.page-end > div { display: grid; flex: 1 1 320px; gap: 2px; min-width: 0; }
.page-end b { color: var(--ink); font-size: 14px; }
.page-end > div span { color: var(--muted); font-size: 12.5px; }
.page-end-icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--ok) var(--soft), transparent); color: var(--ok); }

@media (max-width: 1200px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid .threads-panel { grid-column: 1 / -1; }
  .tl-legend { margin-left: 0; }
}
@media (max-width: 760px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-grid > article { order: -1; }
  .area-timeline .tl-legend, .tl-axis, .tl-overlay, .tl-note, .tl-label small { display: none; }
  .tl-lane { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label count" "track track"; min-height: 0; }
  .tl-lane .tl-label { grid-area: label; padding: 10px 12px 4px 14px; }
  .tl-lane .tl-count { grid-area: count; align-items: flex-end; padding: 10px 14px 4px; border-left: 0; text-align: right; }
  .tl-lane.is-folded .tl-track { display: none; }
  .tl-lane.is-folded .tl-label, .tl-lane.is-folded .tl-count { padding-bottom: 10px; }
  .tl-lane .tl-track { grid-area: track; height: 28px; margin: 0 14px 10px; border-radius: 6px; background: var(--raised); }
  .tl-mark { top: 50%; }
  .tl-lane-now { display: block; position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .45; }
}

/* Timeline page: filters, selected week, week labels as links, and the week summary. */
.tl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-filters .chip[aria-current="true"] { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) var(--soft), transparent); color: var(--ink); font-weight: 600; }
.tl-filters .chip[aria-current="true"]::before { content: "\2713"; color: var(--c, var(--accent)); font-size: 11px; }
.tl-filters-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.tl-history-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.tl-history-note svg { flex: none; margin-top: 2px; color: var(--faint); }
.tl-hint { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.tl-selected { position: absolute; top: 0; bottom: 0; border-right: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-left: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: color-mix(in srgb, var(--ink) 5%, transparent); }
a.tl-week-label { padding: 1px 4px; border-radius: 4px; }
a.tl-week-label:hover { background: var(--raised); color: var(--accent); }
a.tl-week-label[aria-current="true"] { background: var(--ink); color: var(--bg); }

.week-summary .panel-head { flex-wrap: wrap; justify-content: flex-start; }
.week-summary .head-tools { margin-left: auto; }
.week-empty { padding: 14px 16px 16px; }
.week-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.week-area { display: grid; align-content: start; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
.week-area h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 13px; }
.week-area h3 .kdot { width: 10px; height: 10px; border-radius: 3px; }
.week-area h3 .sub { margin-left: auto; font-weight: 500; }
.week-area ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.week-area li { display: grid; gap: 2px; min-width: 0; }
.week-area li a { display: grid; gap: 1px; color: var(--ink); }
.week-area li a:hover .t { color: var(--accent); }
.week-area .t { overflow: hidden; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.week-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.week-label time { color: var(--faint); font: 500 11px var(--mono); }
.week-area li.t-critical .week-label { color: var(--crit); font-weight: 600; }
.week-area li.t-notable .week-label { color: var(--ink-2); font-weight: 600; }
.week-area .panel-more { margin: 0 -16px -14px; }
.tl-weeks-phone { display: none; }
@media (max-width: 760px) {
  .tl-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tl-filters-sep { flex: none; }
  .tl-weeks-phone { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tl-hint { text-align: left; }
}

/* Watch buttons, My radar, and the overview's radar panel. */
.watch { display: inline-flex; margin: 0; }
.watch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.watch-btn svg { width: 14px; height: 14px; }
.watch-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
.watch-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) var(--soft), var(--surface)); color: var(--accent); }
.watch.is-compact .watch-btn, .mark.is-compact .watch-btn { width: 26px; height: 24px; padding: 0; }
.watch.is-compact .watch-btn span, .mark.is-compact .watch-btn span { display: none; }
.link-row .watch-btn, .cve-head .watch-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }

.radar-summary { margin: 0; color: var(--muted); font-size: 13px; }
.radar-summary b { color: var(--ink); }
.radar-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.radar-item { display: grid; gap: 8px; padding: 14px 16px; }
.radar-item.is-changed { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.radar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.radar-kind { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.radar-title { flex: 1 1 280px; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.35; }
.radar-title:hover { color: var(--accent); }
.radar-changes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.radar-changes li { display: grid; grid-template-columns: 52px minmax(120px, auto) minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 12.5px; }
.radar-changes time { color: var(--faint); font: 500 11px var(--mono); }
.radar-label { color: var(--ink-2); font-weight: 600; }
.radar-changes li.t-critical .radar-label { color: var(--crit); }
.radar-changes a { overflow: hidden; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.radar-changes a:hover { color: var(--accent); }
.radar-changes li.more { display: block; color: var(--muted); }
.radar-quiet, .radar-missing, .radar-next { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; }
.radar-missing { color: var(--warn); }
.radar-next svg { width: 13px; height: 13px; }
.radar-next.t-critical { color: var(--crit); }
.radar-products .panel-head { flex-wrap: wrap; justify-content: flex-start; }
.radar-product-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px 16px; }
.radar-product-form label { color: var(--muted); font-size: 12.5px; }
.radar-product-form select { min-width: 220px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.stack-rows .st-changed span { color: var(--accent); }
.stack-subhead { margin: 4px 16px 0; }
@media (max-width: 760px) {
  .radar-changes li { grid-template-columns: 52px minmax(0, 1fr); }
  .radar-changes a { grid-column: 1 / -1; white-space: normal; }
}

/* Accounts on self-hosted installations: sign-in, account, administration, and moving browser state into an account. */
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.account-card { min-width: 0; overflow-wrap: anywhere; }
.account-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.account-form { display: grid; gap: 8px; padding: 14px 16px 16px; }
.account-form p { margin: 0; color: var(--ink-2); font-size: 13px; }
.account-form label { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.account-form input[type="text"], .account-form input:not([type]), .account-form input[type="password"], .account-inline input {
  height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13px; }
.account-form input:focus-visible, .account-inline input:focus-visible { border-color: var(--accent); }
.account-form .btn { justify-self: start; margin-top: 4px; }
.notification-page { display: grid; gap: 16px; min-width: 0; }
.notification-page .page-head { margin-bottom: 0; }
.notification-page .panel-head { flex-wrap: wrap; }
.notification-page .account-form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.notification-page .account-form > label:not(.check), .notification-policy .pref-grid > label { display: grid; gap: 6px; min-width: 0; }
.notification-page .check, .notification-policy .check { white-space: normal; align-items: flex-start; line-height: 1.5; }
.notification-page .check input, .notification-policy .check input { flex: 0 0 15px; margin-top: 2px; }
.notification-page .btn { max-width: 100%; white-space: normal; text-align: left; }
.notification-page input[type="email"], .notification-policy input:not([type="checkbox"]) {
  width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink); font-size: 13px; }
.notification-policy { display: grid; gap: 12px; }
.notification-policy .pref-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.notification-policy .pref-note { padding: 0; }
.account-note { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 12px; }
.account-form .account-note { padding: 0; }
.account-check { display: flex; align-items: center; gap: 8px; font-weight: 500 !important; }
.account-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.account-facts a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 12px; }
.account-facts a:hover { border-color: var(--faint); color: var(--ink); }
.account-table th .sub { display: block; font-weight: 500; }
.account-inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.account-inline input { width: 140px; height: 30px; }
/* The accounts table fits a tablet-width page: headers may wrap and the name column gives way. */
.account-table thead th { white-space: normal; }
.account-table tbody th.name { min-width: 120px; }
.account-actions { display: inline-flex; gap: 6px; }
.account-actions form { margin: 0; }
.account-import { flex-wrap: wrap; align-items: center; }
.account-import p { flex: 1 1 320px; }
.account-import form { margin: 0; }
.account-link svg { width: 14px; height: 14px; }
.account-link .long { min-width: 0; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Product pages ---------- */
.product-sources ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.psrc a { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; }
.psrc a:hover { border-color: var(--faint); }
.psrc i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.psrc b { font-weight: 500; }
.psrc span { color: var(--muted); white-space: nowrap; }
.psrc.is-quiet i, .psrc.is-partial i { background: var(--warn); }
.psrc.is-quiet span { color: var(--warn); }
.psrc.is-down i { background: var(--crit); }
.psrc.is-down span { color: var(--crit); }
.product-stats a.stat { color: var(--ink); }
.product-stats a.stat:hover { border-color: var(--faint); }
/* Short lists flow into two columns without sharing row heights, so a short panel never leaves a gap beside a tall one. */
.product-cols { columns: 2 420px; column-gap: 16px; }
/* One panel alone takes the whole width rather than half of it beside nothing. */
.product-cols:has(> .panel:only-child) { columns: 1; }
.product-cols > .panel { display: block; break-inside: avoid; margin: 0 0 16px; }
.product-cols > .panel > .panel-empty { padding: 14px 16px 16px; }
.product-list { margin: 0; padding: 0; list-style: none; }
.product-list li { display: grid; gap: 3px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.product-list li:first-child { border-top: 0; }
.product-list li.is-ended { opacity: .65; }
.product-list a { color: var(--ink); }
.product-list a:hover { color: var(--accent); }
.product-dates time { color: var(--ink-2); font: 600 12px var(--mono); }
.product-dates li.t-critical time { color: var(--crit); }
.product-dates li.t-notable time { color: var(--warn); }
.revision-tbl td .sub { display: block; margin-top: 2px; }
.revision-tbl td.t-notable, .revision-tbl td.t-critical { color: var(--ink); }
.product-area .section-title .kdot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.product-grid li { min-width: 0; }
.product-card { display: grid; gap: 5px; align-content: start; height: 100%; padding: 14px 16px; color: var(--ink); }
.product-card:hover { border-color: var(--faint); }
.product-card:hover b { color: var(--accent); }
.product-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-name b { font-size: 14px; font-weight: 600; }
.product-flag { color: var(--muted); font-size: 12px; }
.product-flag.is-warn, .product-flag.t-notable { color: var(--warn); }
.product-flag.t-critical { color: var(--crit); }
@media (max-width: 900px) {
  .product-cols { columns: 1; }
}
.psrc-more { margin-top: 8px; }
.psrc-more summary { width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; }
.psrc-more ul { margin-top: 8px; }

/* ---------- Curated signals ---------- */
.signal-list { margin: 0; padding: 0; list-style: none; }
.signal { display: grid; gap: 4px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.signal-list > .signal:first-child { border-top: 0; }
.signal.is-resolved { opacity: .75; }
.elsewhere-list .signal > a { color: var(--ink); font-weight: 600; }
.elsewhere-list .signal > a:hover { color: var(--accent); }
.elsewhere-list .signal > .sub { color: var(--muted); font-size: 12px; }
.signal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.signal-head a { color: var(--ink); font-weight: 600; }
.signal-head a:hover { color: var(--accent); }
.signal-head .ext { width: 11px; height: 11px; margin-left: 4px; color: var(--faint); }
.signal-version { color: var(--ink-2); font-size: 12px; }
.signal-summary { margin: 0; max-width: 90ch; color: var(--muted); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.signal-rev { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--accent); font-size: 12px; }
.signal-rev svg { width: 13px; height: 13px; }
.signal-more { border-top: 1px solid var(--line); }
.signal-more > summary { padding: 10px 16px; color: var(--muted); font-size: 12px; cursor: pointer; }
.signal-history > .panel-foot { display: block; margin: 0; padding: 10px 16px 12px; color: var(--muted); font-size: 12px; }
.panel > .panel-empty { padding: 14px 16px 16px; }
.release-tbl .name .sub, .release-tbl td .sub { display: block; }
.release-tbl a { color: var(--ink); }
.release-tbl a:hover { color: var(--accent); }
.release-tbl .ext { width: 11px; height: 11px; margin-left: 4px; color: var(--faint); }

/* ---------- Message Center ---------- */
.mc-search { display: flex; gap: 8px; max-width: 560px; }
.mc-search input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.mc-list { margin: 0; padding: 0; list-style: none; }
.mc-row { display: grid; gap: 4px; padding: 11px 16px; border-top: 1px solid var(--line); border-left: 3px solid transparent; font-size: 13px; }
.mc-list > .mc-row:first-child { border-top: 0; }
.mc-row.mc-preventorfix { border-left-color: var(--crit); }
.mc-row.mc-actionrequired { border-left-color: var(--warn); }
.mc-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mc-row-head a { color: var(--ink); font-weight: 600; }
.mc-row-head a:hover { color: var(--accent); }
.mc-id { color: var(--muted); font-size: 12px; }
.mc-updated { color: var(--accent); }
.mc-due { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--ink-2); font-size: 12px; }
.mc-due svg { width: 13px; height: 13px; color: var(--faint); }
.mc-due.is-soon { color: var(--warn); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.mc-lead { padding: 0; }
.mc-countdown { display: grid; gap: 4px; padding: 16px; }
.mc-countdown b { font: 650 26px/1.1 var(--display); }
.mc-countdown span { color: var(--muted); font-size: 13px; }
.mc-countdown.is-soon b { color: var(--warn); }
.mc-countdown.is-past b { color: var(--muted); }
.mc-lead .facts { border-top: 0; }
.mc-lead .panel-foot { display: block; margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.mc-facts { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.mc-body { max-width: 90ch; padding: 14px 16px 16px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-links, .mc-docs, .mc-open { display: grid; gap: 8px; margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line); list-style: none; font-size: 13px; }
.mc-links a, .mc-docs a { color: var(--accent); overflow-wrap: anywhere; }
.mc-links .ext, .mc-docs .ext { width: 11px; height: 11px; margin-left: 4px; }
.mc-docs li { display: grid; gap: 4px; }
.mc-callout { padding: 8px 10px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-radius: 0 6px 6px 0; }
.mc-callout p { margin: 4px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.mc-open li { color: var(--ink-2); }
.mc-open { list-style: disc; padding-left: 34px; }
.mc-versions { margin: 0; padding: 0; list-style: none; }
.mc-versions > li { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.mc-versions > li:first-child { border-top: 0; }
.mc-version-date { color: var(--muted); font: 600 12px var(--mono); }
.mc-fields { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.mc-fields b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.mc-diff { margin: 0; max-width: 90ch; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Text stays in the ink color for contrast; strike-through and underline carry the meaning, the tint only helps. */
.mc-fields del, .mc-diff del { color: var(--ink-2); background: color-mix(in srgb, var(--crit) 12%, transparent); text-decoration: line-through; text-decoration-color: var(--crit); }
.mc-fields ins, .mc-diff ins { color: var(--ink); background: color-mix(in srgb, var(--ok) 14%, transparent); text-decoration: underline; text-decoration-color: var(--ok); text-underline-offset: 3px; font-weight: 600; }
.mc-diff del + ins { margin-left: 4px; }

/* ---------- Lifecycle by month ---------- */
.ms-month > summary.month-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; list-style: none; }
.ms-month > summary.month-head::-webkit-details-marker { display: none; }
.ms-month > summary.month-head::before { content: "▸"; color: var(--faint); }
.ms-month[open] > summary.month-head::before { content: "▾"; }
.ms-month-kinds { color: var(--faint); font-weight: 500; letter-spacing: 0; text-transform: none; }
.milestones li.ms-day { display: block; padding: 0; }
.ms-day > details > summary { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 16px; cursor: pointer; }
.ms-day-what { display: grid; gap: 2px; min-width: 0; }
.ms-day-what b { color: var(--ink); font-size: 13px; font-weight: 600; }
.ms-day-what .sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-day .milestones { border-top: 1px solid var(--line-2); background: var(--raised); }
.ms-past { border-top: 1px solid var(--line); }
.ms-past > summary { display: flex; align-items: center; gap: 8px; padding: 11px 16px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.ms-past > summary svg { width: 14px; height: 14px; }

/* ---------- Briefing: week archive, index, folded lists ---------- */
.doc-weeks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 12.5px; }
.doc-weeks a { color: var(--accent); }
.doc-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.doc-index a { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 12px; }
.doc-index a:hover { border-color: var(--faint); color: var(--ink); }
.doc-index .n { color: var(--faint); font: 500 11px var(--mono); }
.doc-more { margin: 2px 0 8px; }
.doc-more > summary { width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; }
.doc-more-link { margin: 4px 0 8px; font-size: 12px; }
@media print {
  .doc-weeks, .doc-index { display: none; }
  details::details-content { content-visibility: visible; display: block; }
  details > summary { display: none; }
}
.row-meta .tag { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 18px; vertical-align: middle; }
.pt-more { margin-top: 12px; }
.pt-more > summary { width: fit-content; max-width: 100%; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.pt-more[open] > summary { margin-bottom: 12px; }
.check-columns .check { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.doc-fold > summary { cursor: pointer; list-style: none; }
.doc-fold > summary::-webkit-details-marker { display: none; }
.doc-fold > summary h2::after { content: "Show"; margin-left: 10px; color: var(--accent); font-size: 12px; font-weight: 500; }
.doc-fold[open] > summary h2::after { content: "Hide"; }
@media (max-width: 700px) { .security-bars { display: none; } }
.radar-earlier > summary { width: fit-content; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.radar-earlier[open] > summary { margin-bottom: 6px; }
.product-empty { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.product-empty svg { width: 14px; height: 14px; color: var(--faint); }
.verdict-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.release-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.release-preview { margin-top: 4px; }
.release-preview a { color: var(--ink-2); }
.row-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* Phones: two fact columns instead of one tall list, and a panel's description under its heading instead of squeezing it. */
@media (max-width: 600px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head.ruled { flex-wrap: wrap; row-gap: 4px; }
  .panel-head.ruled > .sub { flex-basis: 100%; }
}
/* Phones: a product's sources are one row that scrolls sideways instead of filling the first screen. */
@media (max-width: 600px) {
  .product-sources > ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .product-sources .psrc a { white-space: nowrap; }
}

/* Search: one box, results grouped by what they are, each linking to its page */
.search-page-form { display: flex; gap: 8px; padding: 12px; }
.search-page-form input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--raised); color: var(--ink); font-size: 14px; outline: none; }
.search-page-form input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.search-page-form .btn { height: 36px; }
.search-best { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink); }
.search-best > svg { flex: none; margin-top: 20px; color: var(--accent); }
.search-best-text { display: grid; gap: 3px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.search-best:hover b { color: var(--accent); }
.search-label { margin-right: 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.search-jumps { padding: 0; }
.search-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; }
.search-shortcuts .sub { margin-right: 4px; }
.search-shortcuts .chip svg { width: 13px; height: 13px; color: var(--faint); }
.search-group h2 .count { color: var(--faint); font: 500 11px var(--mono); }
.search-hits { margin: 0; padding: 0; list-style: none; }
.search-hit { display: grid; gap: 3px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.search-hit:first-child { border-top: 0; }
.search-hit a { color: var(--ink); }
.search-hit a:hover .search-title { color: var(--accent); }
.search-hit .ext { width: 11px; height: 11px; margin-left: 4px; color: var(--faint); vertical-align: -1px; }
.search-try { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; }
.search-group > .panel-foot { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .search-page-form { padding: 10px; }
  .search-best { padding: 12px; }
  .search-hit { padding: 10px 12px; }
}

/* Theme menu: a small panel under the palette button */
.theme-menu { position: relative; }
.theme-menu > summary { cursor: pointer; }
.theme-menu[open] > summary { color: var(--ink); border-color: var(--faint); }
.theme-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--pop); }
.theme-label { margin: 0 0 8px; color: var(--muted); font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.theme-label + .theme-grid { margin-bottom: 12px; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.theme-choice { display: grid; justify-items: start; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink-2); font-size: 11.5px; font-weight: 600; text-align: left; }
.theme-choice:hover { border-color: var(--faint); color: var(--ink); }
.theme-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.theme-swatch { position: relative; display: block; width: 100%; height: 30px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 5px; background: var(--s-bg); overflow: hidden; }
.theme-swatch i:first-child { position: absolute; left: 6px; right: 6px; top: 6px; height: 12px; border-radius: 3px; background: var(--s-surface); box-shadow: inset 3px 0 0 var(--s-accent); }
.theme-swatch i:last-child { position: absolute; left: 12px; top: 10px; width: 45%; height: 3px; border-radius: 2px; background: var(--s-ink); opacity: .75; }
.accent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-choice { width: 26px; height: 26px; padding: 0; border: 2px solid var(--surface); border-radius: 999px; background: var(--dot); box-shadow: 0 0 0 1px var(--line); }
.accent-choice.is-default { background: conic-gradient(#4f7cf5 0 20%, #1f9e90 0 40%, #8566ea 0 60%, #c98a1e 0 80%, #d94f85 0); }
.accent-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 600px) { .theme-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar) + 4px); width: auto; } }

/* First-visit setup and the overview's own-products block */
.welcome-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.welcome-card > svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
.welcome-body { flex: 1 1 320px; min-width: 0; }
.welcome-body h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.welcome-body p { margin: 3px 0 0; color: var(--ink-2); font-size: 13px; }
.welcome-actions { display: flex; align-items: center; gap: 14px; }
.welcome-actions form { margin: 0; }
.your-products .panel-head .sub { margin-right: auto; }
.your-product-grid { padding: 12px 16px 16px; }
.pref-products p { margin: 0; color: var(--ink-2); }
.version-tbl .ver-product { display: block; margin-bottom: 2px; font-weight: 600; }
.version-tbl .ver-product a { display: inline-flex; align-items: center; min-height: 24px; }
.version-tbl .ver-channel { display: block; }
.version-tbl tr.ver-group > * { border-top: 1px solid var(--line); }
.version-retired { margin: 0; padding: 10px 16px 14px; }
.pref-product-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.pref-product-list a { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; }
.pref-product-list a:hover { border-color: var(--accent); color: var(--accent); }
.keep-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.keep-options > article:only-of-type { grid-column: 1 / -1; }
details.version-panel > summary { list-style: none; cursor: pointer; }
details.version-panel > summary::-webkit-details-marker { display: none; }
details.src-group > summary h2::after, details.version-panel > summary h2::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px;
    border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
details.src-group:not([open]) > summary h2::after, details.version-panel:not([open]) > summary h2::after { transform: rotate(-45deg); }
details.src-group { margin: 0; }
.src-groups > details.src-group + details.src-group { border-top: 1px solid var(--line); }
details.src-group > summary h2 { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
details.src-group > summary { list-style: none; cursor: pointer; flex-wrap: wrap; }
details.src-group > summary::-webkit-details-marker { display: none; }
details.src-group > summary, details.version-panel:not([open]) > summary { padding-bottom: 14px; }
details.src-group[open] > summary { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.src-tbl { table-layout: fixed; min-width: 900px; }
.src-tbl .c-src { width: 20%; } .src-tbl .c-status { width: 11%; } .src-tbl .c-type { width: 9%; } .src-tbl .c-method { width: 15%; }
.src-tbl .c-host { width: 15%; } .src-tbl .c-items { width: 10%; } .src-tbl .c-newest { width: 13%; } .src-tbl .c-link { width: 7%; }
.src-tbl td.mono { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.src-tbl td.num { padding-right: 12px; }
.src-tbl td.num .sub, .src-tbl td.age .sub { display: block; margin-top: 3px; white-space: normal; }
.src-tbl td.age { white-space: normal; }
.src-tbl .quiet-tag { display: table; margin: 3px 0 0; }
details.version-panel:not([open]) > summary.ruled { border-bottom: 0; }
.keep-intro { grid-column: 1 / -1; margin: 0; color: var(--ink-2); }
.keep-option { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
.keep-option h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.keep-option h3 svg { width: 16px; height: 16px; color: var(--accent); }
.keep-option p { margin: 0; color: var(--ink-2); font-size: 13px; }
.keep-option .feed-url { margin-top: 0; }
.keep-option .feed-url input { background: var(--surface); }
.keep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.keep-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.keep-join label, .keep-name label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--ink-2); font-size: 13px; }
.keep-join input, .keep-name input, .sync-code-field input { min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 13px var(--mono); }
.keep-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sync-code { padding: 1px 6px; border-radius: 6px; background: var(--surface); color: var(--ink); font: 12.5px var(--mono); overflow-wrap: anywhere; }
.sync-join { display: grid; gap: 14px; padding: 16px; }
.sync-code-field { display: grid; gap: 6px; color: var(--ink-2); font-size: 13px; }
.sync-code-field input { width: 100%; max-width: 380px; font-size: 15px; letter-spacing: .04em; }
.shared-note { margin: 0; color: var(--ink-2); }
.shared-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.shared-counts b { color: var(--ink); }
.shared-actions form { display: inline-flex; }
.settings-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-2); font-size: 13px; }
.settings-file input { max-width: 100%; color: var(--ink-2); font: inherit; }
.your-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 16px 12px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-2); font-size: 13px; }
.your-suggestion > svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.your-suggestion > span { flex: 1; min-width: 200px; }
.your-suggestion b { color: var(--ink); font-weight: 600; }
.setup-form { display: grid; gap: 12px; }
.setup-area { display: grid; gap: 10px; margin: 0; padding: 14px 16px 16px; min-width: 0; }
.setup-area .section-title { flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.setup-hint { color: var(--muted); font: 400 12.5px/1.4 var(--sans); }
.setup-area .section-title { margin: 0; }
.setup-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-sub { margin: 4px 0 -2px; color: var(--muted); font-size: 12.5px; }
.setup-choices.is-versions .setup-chip span { height: 28px; font-size: 12.5px; }
.setup-chip { position: relative; display: inline-flex; }
.setup-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.setup-chip span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.setup-chip span::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--faint); border-radius: 4px; }
.setup-chip:hover span { border-color: var(--faint); color: var(--ink); }
.setup-chip input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); }
.setup-chip input:checked + span::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.setup-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 4px 0 8px; }

/* Service status: providers in their own terms, then incidents with what else was happening. */
.nav-item .count.is-warn { color: var(--warn); font-weight: 700; }
/* Every provider in one glance: a pill each, its read times in the tooltip. */
.status-providers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 16px 14px; list-style: none; }
.status-providers a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); }
.status-providers a:hover { border-color: var(--faint); }
.status-providers i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status-providers b { font-size: 12.5px; font-weight: 600; }
.status-providers span { font-size: 12px; color: var(--muted); }
.status-providers span.partly { padding: 0 6px; border: 1px dashed var(--warn); border-radius: 999px; color: var(--warn); font-size: 11px; }
.status-providers .is-ok i { background: var(--ok); }
.status-providers .is-warn i { background: var(--warn); }
.status-providers .is-warn span:not(.sub) { color: var(--warn); font-weight: 600; }
.status-providers .is-crit i, .status-providers .is-down i { background: var(--crit); }
.status-providers .is-crit span:not(.sub), .status-providers .is-down span:not(.sub) { color: var(--crit); font-weight: 600; }
.status-provider { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--raised); color: var(--ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.incident { padding: 14px 16px; }
.incident.is-open { border-left: 3px solid var(--warn); }
.incident-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.incident-head h3 { flex-basis: 100%; margin: 4px 0 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.incident-head h3 a { color: var(--ink); }
.incident-head h3 a:hover { color: var(--accent); }
.incident-times { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.incident-times b { color: var(--ink-2); font-weight: 600; }
.incident-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.tag-region { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.incident-text { margin: 10px 0 0; max-width: 80ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.incident-trail { margin-top: 10px; }
.incident-trail summary { width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; }
.incident-trail ol { display: grid; gap: 6px; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); list-style: none; font-size: 12.5px; color: var(--ink-2); max-width: 90ch; }
.incident-trail .mono { margin-right: 6px; color: var(--faint); font-size: 11px; }
.incident-trail .is-revision { color: var(--muted); font-style: italic; }
.incident-more { margin-top: 12px; border-top: 1px solid var(--line); }
.incident-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0 0; font-size: 12.5px; cursor: pointer; }
.incident-more > summary b { color: var(--ink-2); font-weight: 600; }
/* Summaries laid out with flex lose the browser's marker; one chevron for every folded line of this kind. */
.incident-more > summary, .choice-step > summary { list-style: none; }
.incident-more > summary::-webkit-details-marker, .choice-step > summary::-webkit-details-marker { display: none; }
.incident-more > summary::before, .choice-step > summary::before { content: ""; align-self: center; width: 6px; height: 6px; margin-right: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.incident-more[open] > summary::before, .choice-step[open] > summary::before { transform: rotate(45deg); }
.incident-more > summary .is-related { color: var(--warn); font-weight: 600; }
.incident-more[open] > summary { padding-bottom: 4px; }
.incident-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 28px; margin-top: 8px; }
.incident-context > div { min-width: 0; }
.incident-context h3 { margin: 0 0 6px; color: var(--muted); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.incident-context ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.45; }
.incident-context li { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.incident-context li .status-provider { margin-right: 4px; vertical-align: 1px; }
.incident-context li a { color: var(--ink); }
.incident-context li a:hover { color: var(--accent); }
.incident-context li.is-related .sub { color: var(--warn); }
.status-ended { margin: 0; padding: 0; list-style: none; }
.status-ended > li { border-top: 1px solid var(--line); }
.status-ended > li:first-child { border-top: 0; }
.status-ended summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 16px; cursor: pointer; font-size: 13px; }
.status-ended summary b { font-weight: 500; }
.status-ended .incident { border: 0; border-radius: 0; background: transparent; padding-top: 0; }
.status-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 6%, var(--surface)); color: var(--ink-2); font-size: 13px; }
.status-line > svg { align-self: center; color: var(--warn); }
.status-line > span { flex: 1 1 420px; }
.status-line .status-provider { height: 18px; font-size: 10.5px; }

/* Support chart: version lines from preview to end of support, dependent lines under their platform. */
.sc-notes { display: grid; gap: 4px; margin: 0; padding: 12px 16px 4px 34px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.sc-grid { display: grid; padding: 6px 16px 10px; }
.sc-row { display: grid; grid-template-columns: minmax(190px, 320px) 1fr; align-items: center; gap: 14px; min-height: 40px; padding: 5px 0; border-top: 1px solid var(--line); }
.sc-row.sc-axis { min-height: 24px; padding: 0; border-top: 0; }
.sc-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 7px; min-width: 0; font-size: 13px; line-height: 1.35; }
.sc-name .sub { flex-basis: 100%; font-size: 11.5px; }
.sc-kind { justify-self: start; padding: 0 5px; border-radius: 4px; font: 600 10px var(--mono); color: var(--muted); background: var(--raised); }
.sc-kind.k-lts { color: var(--ok); background: color-mix(in srgb, var(--ok) var(--soft), transparent); }
.sc-kind.k-preview { color: var(--rm); background: color-mix(in srgb, var(--rm) var(--soft), transparent); }
.sc-row.is-nested .sc-name { padding-left: 16px; border-left: 2px solid var(--line); }
.sc-row.is-context .sc-name b { font-weight: 500; color: var(--muted); }
.sc-row.is-ended { opacity: .55; }
.sc-track { position: relative; height: 22px; }
.sc-axis .sc-track { height: 18px; }
.sc-year, .sc-today-label { position: absolute; top: 0; transform: translateX(-50%); color: var(--faint); font: 500 10.5px var(--mono); white-space: nowrap; }
.sc-today-label { color: var(--ink-2); font-weight: 700; }
.sc-grid-line { position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--line); }
.sc-today { position: absolute; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; background: var(--ink-2); opacity: .7; }
.sc-bar { position: absolute; top: 6px; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.sc-bar.k-lts { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.sc-bar.k-sts, .sc-bar.k-standard { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.sc-bar.is-soon { box-shadow: inset 0 0 0 2px var(--warn); }
.sc-bar.is-open { border-top-right-radius: 0; border-bottom-right-radius: 0; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.sc-bar.is-preview { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--rm) 70%, transparent); height: 10px; box-sizing: border-box; }
.sc-tick { position: absolute; top: 4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); opacity: .45; }
.sc-tick.is-security { background: var(--crit); opacity: .85; }
@media (max-width: 700px) {
  .sc-row { grid-template-columns: 1fr; gap: 4px; padding: 6px 0; }
  .sc-axis .sc-name, .sc-axis > span { display: none; }
  /* Today gets its own line so nearby year labels remain legible on narrow charts. */
  .sc-row.sc-axis { min-height: 36px; }
  .sc-axis .sc-track { height: 32px; }
  .sc-today-label { top: 16px; }
}
.support-chart > .panel-foot { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 400; }
.product-versions > .panel-foot { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 400; }
.version-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.version-lines li, .version-lines li:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
.version-lines .release-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Status board: providers and their services over 90 days. */
.sb-head, .sb-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) 92px minmax(270px, 2fr) 96px 72px 48px 78px; align-items: center; gap: 10px; padding: 0 16px; }
.sb-head { padding-top: 10px; padding-bottom: 6px; color: var(--faint); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.sb-axis { display: flex; justify-content: space-between; }
.sb-row { min-height: 34px; border-top: 1px solid var(--line); font-size: 12.5px; }
.sb-row .num, .sb-head .num { text-align: right; font-variant-numeric: tabular-nums; }
.sb-row .num .sub { font-size: 10.5px; }
.sb-row.is-provider { font-weight: 600; font-size: 13px; }
.sb-detail-link { display: block; color: inherit; text-decoration: none; }
.sb-detail-link:hover, .sb-detail-link[aria-current="page"] { background: var(--raised); }
.sb-detail-link[aria-current="page"] .sb-name::before { transform: rotate(45deg); }
.sb-provider > summary { list-style: none; cursor: pointer; }
.sb-provider > summary::-webkit-details-marker { display: none; }
.sb-provider > summary .sb-name::before, .sb-detail-link .sb-name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); vertical-align: 2px; }
.sb-provider[open] > summary .sb-name::before { transform: rotate(45deg); }
.sb-provider[open] > summary .sb-row { background: var(--raised); }
.sb-provider .sb-row:not(.is-provider) .sb-name { padding-left: 16px; color: var(--ink-2); }
.sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-now { font-size: 11.5px; font-weight: 600; }
.sb-now.is-ok { color: var(--ok); } .sb-now.is-warn { color: var(--warn); } .sb-now.is-crit { color: var(--crit); } .sb-now.is-quiet { color: var(--faint); font-weight: 500; }
.sb-days { display: grid; grid-template-columns: repeat(90, 1fr); gap: 1px; height: 18px; }
.sb-days i, .sb-legend i { display: block; border-radius: 1px; }
.sb-legend i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; vertical-align: -1px; }
.sb-legend i:first-child { margin-left: 0; }
.d-0 { background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 4px); }
.d-1 { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.d-2 { background: var(--warn); }
.d-3 { background: var(--crit); }
.sb-more > summary, .sb-empty, .sb-note { padding: 8px 16px 8px 32px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.sb-more > summary { cursor: pointer; }
.sb-note { margin: 0; color: var(--faint); font-size: 11.5px; }
.sb-empty { margin: 0; }
.status-board > .panel-foot { display: grid; gap: 6px; margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 400; }
@media (max-width: 900px) {
  .sb-head { display: none; }
  .sb-row { grid-template-columns: 1fr auto; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
  .sb-days { grid-column: 1 / -1; }
  .sb-row .num { display: none; }
}
.sc-kind.k-deprecated { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--soft), transparent); }
.sc-bar.k-deprecated { background: color-mix(in srgb, var(--warn) 45%, transparent); }
.model-tbl th.mono, .model-tbl td.mono { font-size: 12px; }
.model-tbl tr.is-soon td:nth-child(2), .model-tbl tr.is-soon td:nth-child(3) { color: var(--warn); }
.model-tbl tr.is-ended { opacity: .6; }
.model-retirements > .signal-more { border-top: 1px solid var(--line); }

/* Status choices and what they change. */
.status-for > summary { list-style: none; cursor: pointer; flex-wrap: wrap; padding-bottom: 14px; }
.status-for > summary::-webkit-details-marker { display: none; }
.incident:target, .status-ended > li:target { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius, 10px); }
.status-for[open] > summary { border-bottom: 1px solid var(--line); }
.status-choices { display: grid; gap: 8px; padding: 14px 16px 16px; }
.status-choices fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.status-choices legend { margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--ink); }
.status-choices legend .sub { margin-left: 6px; font-weight: 400; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.status-choices .check { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.status-choices .check input { flex: 0 0 15px; }
.choice-step { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.choice-step > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; cursor: pointer; font-size: 13px; }
.choice-step > summary b { color: var(--ink); font-weight: 600; }
.choice-step > summary .sub { font-size: 12px; }
.choice-step[open] > summary { border-bottom: 1px solid var(--line); }
.choice-step > fieldset { padding: 12px 14px 14px; }
.choice-hint { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.choice-group > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); padding: 4px 0; }
.choice-group > summary .n { margin-left: 8px; color: var(--faint); font: 500 11px var(--mono); }
.choice-group .choice-grid { padding: 6px 0 8px 14px; }
.choice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.status-section { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 15px; }
.status-section .sub { font-weight: 400; font-size: 12.5px; }
.status-clear { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--ok) 6%, var(--surface)); color: var(--ink-2); font-size: 13px; }
.status-clear svg { color: var(--ok); }
.status-elsewhere, .status-group { display: grid; gap: 12px; }
.tag-more { color: var(--muted); border-style: dashed; cursor: help; }
/* A long page's sections as anchors, in view under the top bar. Read-through and look-up pages get this; a page of
   alternative views gets page-tabs below. Filters that change the data stay a .seg. */
.page-jump { --jump: 42px; position: sticky; top: var(--topbar); z-index: 6; display: flex; align-items: center; gap: 2px; box-sizing: border-box; min-height: var(--jump); margin: -6px -24px -4px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.page-jump::-webkit-scrollbar { display: none; }
/* A mouse cannot swipe: where the strip overflows, show a thin scrollbar instead of hiding the rest. */
@media (hover: hover) and (pointer: fine) { .page-jump { scrollbar-width: thin; } .page-jump::-webkit-scrollbar { display: block; height: 6px; } }
.page-jump { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.page-jump a:last-child { margin-right: 36px; }
.page-jump a { flex: none; padding: 5px 10px; border-radius: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.page-jump a:hover, .page-jump a:focus-visible { color: var(--ink); background: var(--raised); }
.pj-label { flex: none; margin-right: 6px; color: var(--faint); font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.content { --jump: 42px; }
.content:has(.page-jump) [id] { scroll-margin-top: calc(var(--topbar) + var(--jump) + 12px); }
.content:has(.page-jump) .day-head { top: calc(var(--topbar) + var(--jump)); }
@media (max-width: 860px) { .page-jump { margin-inline: -16px; padding-inline: 16px; } .pj-label { display: none; } }
@media print { .page-jump, .page-tabs { display: none; } }
/* Views of one page, one at a time: links, so each view has its own address and the page stays light. */
.page-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.page-tabs a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 10px 14px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.page-tabs a:hover { color: var(--ink); }
.page-tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.page-tabs svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .page-tabs { mask-image: linear-gradient(90deg, #000 85%, transparent); } .page-tabs a { padding: 10px 10px 11px; } .page-tabs a:last-child { margin-right: 32px; } }
.page-tabs .n { padding: 1px 7px; border-radius: 999px; background: var(--raised); color: var(--ink-2); font: 600 11px var(--mono); }
.page-tabs .n.is-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--soft), transparent); }
.status-elsewhere > summary { cursor: pointer; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.status-elsewhere[open] > summary { margin-bottom: 0; }
.relevance { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.relevance.is-mine { color: var(--accent); background: color-mix(in srgb, var(--accent) var(--soft), transparent); }
.relevance.is-other { color: var(--muted); background: var(--raised); }
.tag-region.is-mine { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.status-providers li.is-other { opacity: .6; }
.sb-provider.is-other { opacity: .7; }
.sb-watch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px; margin-right: 6px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--faint); vertical-align: middle; cursor: pointer; }
.sb-watch svg { width: 13px; height: 13px; }
.sb-watch:hover, .sb-watch:focus-visible { border-color: var(--line); color: var(--ink); }
.sb-watch.is-on { color: var(--accent); }
/* A provider's own grid: services by the reader's regions, in the provider's words. */
.grid-note { margin: 0; padding: 10px 16px 0; color: var(--muted); font-size: 12px; }
.grid-tbl th[scope="row"] { font-weight: 500; }
.grid-tbl tr.is-capability th[scope="row"] { padding-left: 28px; color: var(--muted); font-weight: 400; }
.grid-tbl .gc-head { text-align: center; font-size: 11.5px; }
.grid-tbl .gc { width: 1%; min-width: 64px; text-align: center; font-weight: 700; }
.grid-tbl .gc-Good { color: var(--ok); }
.grid-tbl .gc-Information { color: var(--accent); }
.grid-tbl .gc-Warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.grid-tbl .gc-Critical { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.grid-tbl .gc-none { color: var(--faint); font-weight: 400; }
.grid-tbl tr.grid-category th { padding-top: 12px; color: var(--muted); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.provider-grid .chip.is-warn { border-color: var(--warn); }
.provider-grid .chip.is-warn .n { color: var(--warn); }
/* A geography is up to twenty regions wide: the service names stay in view while the regions scroll. */
.grid-tbl th[scope="row"], .grid-tbl thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.grid-tbl tr.grid-category th { position: sticky; left: 0; }
@media (max-width: 640px) {
  .grid-tbl th[scope="row"], .grid-tbl thead th:first-child { width: 160px; min-width: 160px; max-width: 160px; white-space: normal; overflow-wrap: anywhere; }
}

/* Own checks from this server. */
.probe-alert { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--crit) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--crit) 6%, var(--surface)); }
.probe-alert h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.probe-alert ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.probe-alert li .sub { display: block; font-size: 12px; }
.probe-alert li.is-unexplained .sub { color: var(--crit); }
.status-providers span.from-here { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--crit) var(--soft), transparent); color: var(--crit); font-size: 11px; font-weight: 600; }
.panel-note { margin: 0; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 110ch; }
.probe-tbl td .sub, .probe-tbl th .sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; }
.probe-tbl .sub.is-crit { color: var(--crit); }
.probe-state { font-weight: 600; }
.probe-state.is-ok { color: var(--ok); } .probe-state.is-warn { color: var(--warn); } .probe-state.is-crit, .probe-state.is-down { color: var(--crit); } .probe-state.is-none { color: var(--muted); }
.probe-hours { display: inline-grid; grid-template-columns: repeat(24, 6px); gap: 2px; vertical-align: middle; }
.probe-hours i { height: 16px; border-radius: 2px; background: var(--raised); }
.probe-hours i.is-ok { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.probe-hours i.is-warn { background: var(--warn); }
.probe-hours i.is-crit, .probe-hours i.is-down { background: var(--crit); }
.sb-quiet ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 8px 16px 12px 40px; list-style: none; color: var(--ink-2); font-size: 12.5px; }
.sb-quiet li { display: inline-flex; align-items: center; }

.team-stack-history { margin-top: 1.5rem; }
.team-stack-history summary, .team-stack-history li, .team-stack-history code { overflow-wrap: anywhere; }

/* Product-scoped versions: selectors replace scrolling subnavigation. */
.filters.version-selector { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,180px) auto; align-items:center; }
.version-filter-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.version-shortcuts { flex-wrap:wrap; overflow:visible; padding:10px 16px 12px; }
.version-shortcuts .chip[aria-current="page"] { --c:var(--accent); }
.version-view-tabs { flex-wrap:wrap; }
.version-result-count { margin:0; padding:0; }
.version-catalog { margin-bottom:18px; }
.version-catalog > .panel-foot { margin:0; padding:12px 16px; color:var(--muted); border-top:0; border-bottom:1px solid var(--line); }
.catalog-tbl { table-layout:fixed; width:100%; }
.catalog-tbl th:first-child { width:23%; }
.catalog-tbl th:nth-child(2) { width:13%; }
.catalog-tbl th:nth-child(3) { width:20%; }
.catalog-tbl th:nth-child(4) { width:15%; }
.catalog-tbl.has-support-dates th:first-child { width:20%; }
.catalog-tbl.has-support-dates th:nth-child(2) { width:10%; }
.catalog-tbl.has-support-dates th:nth-child(3) { width:15%; }
.catalog-tbl.has-support-dates th:nth-child(5) { width:17%; }
.catalog-tbl td, .catalog-tbl th { white-space:normal; overflow-wrap:anywhere; }
.catalog-links { display:flex; flex-wrap:wrap; gap:4px 14px; }
.catalog-links svg { width:12px; height:12px; }
.catalog-notes { margin-top:8px; }
.catalog-notes summary { cursor:pointer; color:var(--ink-2); }
.catalog-notes ul { padding-left:16px; margin:10px 0; }
.catalog-notes li { margin:6px 0; }
.catalog-tbl .ver-kept { display:block; color:var(--warn); }
.version-release-list { list-style:none; padding:0 20px; margin:0; }
.version-release-list > li { display:grid; grid-template-columns:155px minmax(0,1fr); gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.version-release-date { color:var(--muted); font-size:13px; }
.version-release-body { min-width:0; overflow-wrap:anywhere; }
.version-release-body h3 { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 10px; }
.version-release-body p { margin:8px 0; }
.version-note-facts { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.version-note-highlights { margin:12px 0; padding-left:20px; line-height:1.65; }
.version-release-history { margin-bottom:18px; }
.version-release-history > .pref-note { padding:0 20px 16px; }
@media (max-width:650px) {
 .filters.version-selector { grid-template-columns:minmax(0,1fr) auto; }
 .version-selector #version-product, .version-selector #version-query { grid-column:1 / -1; }
 .version-release-list > li { grid-template-columns:minmax(0,1fr); gap:10px; }
 .version-view-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); mask-image:none; }
 .version-view-tabs a { font-size:12px; padding:12px 7px; justify-content:center; white-space:normal; }
 .version-view-tabs a:last-child { margin-right:0; }
 .catalog-tbl, .catalog-tbl tbody { display:block; }
 .catalog-tbl thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .catalog-tbl tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px 16px; border-bottom:1px solid var(--line); gap:8px 12px; }
 .catalog-tbl tr > th, .catalog-tbl tr > td { width:auto; padding:0; border:0; min-width:0; }
 .catalog-tbl tr > th:first-child, .catalog-tbl.has-support-dates tr > th:first-child { width:auto; }
 .catalog-tbl tr > th, .catalog-tbl tr > td:last-child { grid-column:1 / -1; }
 .catalog-tbl td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px; margin-bottom:3px; }
}

/* Shared page furniture: a one-line page note with its method folded away, tag rows, and loose pagers. */
.page-note > div { display: grid; gap: 6px; min-width: 0; }
.page-note p { color: var(--ink-2); font-size: 12.5px; }
.page-note-more > summary { width: fit-content; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.page-note-body { display: grid; gap: 6px; margin-top: 6px; max-width: 90ch; }
.page-note-body p { color: var(--muted); font-size: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.is-loose { padding: 0; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.panel > .stream-foot { border-top: 1px solid var(--line); }
.tbl.is-fluid td .sub, .tbl th .sub { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; }

/* Review queue on My radar. */
.review-list, .commercial-list, .guidance-list { margin: 0; padding: 0; list-style: none; }
.review-item, .guidance-item { --tone: var(--accent); display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line-2); border-left: 3px solid transparent; }
.review-list > li:first-child, .commercial-list > li:first-child, .guidance-list > li:first-child { border-top: 0; }
.review-item.is-needs { border-left-color: var(--tone); }
.review-item.is-changed { --tone: var(--warn); border-left-color: var(--tone); }
.review-item.is-reviewed { --tone: var(--ok); }
.review-state { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone) var(--soft), transparent); color: var(--tone); font-size: 11px; font-weight: 700; white-space: nowrap; }
.review-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 12px; }
.review-meta:empty { display: none; }
.review-due { display: inline-flex; align-items: center; gap: 5px; }
.review-due svg { width: 13px; height: 13px; color: var(--faint); }
.review-due b { color: var(--ink-2); font-weight: 600; }
.review-previous { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; }
.review-previous svg { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--ok); }
.review-previous.is-changed { color: var(--ink-2); }
.review-previous.is-changed svg { color: var(--warn); }
.review-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.review-foot:empty { display: none; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.review-keys { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.review-keys code { color: var(--muted); font: 500 11px var(--mono); overflow-wrap: anywhere; }

/* Commercial announcements and guidance pages. */
.commercial-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line-2); }
.commercial-when { display: grid; align-content: start; gap: 4px; }
.commercial-when time { color: var(--ink-2); font: 600 12px var(--mono); }
.commercial-effective { width: fit-content; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--warn) var(--soft), transparent); color: var(--warn); font-size: 11px; font-weight: 700; }
.commercial-main { display: grid; gap: 8px; min-width: 0; }
.tag-category { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink); }
.tag-source { color: var(--muted); background: transparent; border-style: dashed; }
.guidance-item .radar-changes li.is-two { grid-template-columns: 76px minmax(0, 1fr); color: var(--ink-2); }

/* Incident intervals under the timeline. */
.incident-intervals td.stack { min-width: 280px; }
.panel-foot.interval-legend { display: grid; gap: 8px; margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.interval-legend p { margin: 0; }
.interval-legend dl { display: grid; gap: 4px; margin: 0; }
.interval-legend dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: center; }
.interval-legend dd { margin: 0; }

/* Change matrix and team services (formerly quality-services.css). */
.matrix-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.radar-product-form.is-inline { padding: 0; }
.tbl.priority-matrix { min-width: 760px; }
.tbl.priority-matrix td { width: 15%; vertical-align: top; white-space: normal; }
.tbl.priority-matrix th.name { vertical-align: top; }
.matrix-none { color: var(--faint); }
.matrix-cell { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border: 1px solid color-mix(in srgb, currentColor 40%, var(--line)); border-radius: 7px; background: color-mix(in srgb, currentColor 7%, transparent); text-decoration: none; cursor: pointer; }
.matrix-cell b { font-size: 12.5px; }
.matrix-cell span { color: var(--muted); font-size: 11.5px; }
.matrix-cell:hover { border-color: currentColor; }
.matrix-cell.tier-critical, .tier-text.tier-critical { color: var(--crit); }
.matrix-cell.tier-notable, .tier-text.tier-notable { color: var(--accent); }
.matrix-cell.tier-routine, .tier-text.tier-routine { color: var(--muted); }
.matrix-details > summary { list-style: none; }
.matrix-details > summary::-webkit-details-marker { display: none; }
.matrix-record { margin: 8px 0 0; font-size: 12.5px; }
.matrix-record .sub { display: block; margin-top: 2px; }
.matrix-evidence { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.matrix-evidence h3 { margin: 0; font-size: 14px; }
.matrix-evidence p { margin: 0; }
.service-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 16px; }
.service-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.service-form .full { grid-column: 1 / -1; }
.service-form input, .service-form select, .service-form textarea { min-width: 0; width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--raised); color: var(--ink); font: inherit; font-size: 12.5px; }
.service-form input:focus, .service-form select:focus, .service-form textarea:focus { border-color: var(--accent); background: var(--surface); outline: 2px solid var(--accent); outline-offset: 1px; }
.service-row { display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.service-row h3, .service-row h4 { margin: 0; font-size: 14px; }
.service-row p { margin: 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.service-row > summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
.service-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; }
.service-reason { white-space: pre-wrap; }

@media (max-width: 600px) {
  .commercial-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .commercial-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .service-form { grid-template-columns: minmax(0, 1fr); }
  .interval-legend dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .matrix-controls { align-items: stretch; }
}

/* Azure's own grid: categories fold like providers on the services board. */
.grid-tbl { table-layout: fixed; }
.grid-tbl col.grid-name { width: 260px; }
.grid-tbl th[scope="row"] { overflow: hidden; text-overflow: ellipsis; }
.grid-tbl .gc-head { white-space: normal; line-height: 1.25; vertical-align: bottom; }

/* Big screens: every page has the same width, so moving between them doesn't make the content jump; long notes and
   footers wrap before their lines get hard to follow. */
.about p, .notice p, .page-head p { max-width: 120ch; }
.panel > .panel-foot, .panel > .panel-empty { padding-right: max(16px, calc(100% - 120ch)); }

/* Touch screens: controls a finger can hit. Inline links inside sentences keep their size. */
@media (pointer: coarse) {
  .btn { height: 38px; }
  .chip, .seg a { height: 34px; }
  a.tag { height: 30px; padding: 0 10px; }
  .sb-watch { width: 34px; height: 32px; }
  .tbl a.kbl { display: inline-block; padding: 6px 0; }
  .history summary, .radar-earlier > summary, .page-note-more > summary, .more-issues > summary { padding-block: 6px; }
}
.tag { max-width: 100%; }
@media (max-width: 600px) { .tag { height: auto; min-height: 22px; padding-block: 2px; white-space: normal; overflow-wrap: anywhere; } }

/* My radar: a count line, long summaries at three lines until opened, and older dates folded at the end. */
.review-summary a { color: inherit; }
.review-summary a:hover { color: var(--accent); }
.clamp-more > summary { list-style: none; cursor: pointer; }
.clamp-more > summary::-webkit-details-marker { display: none; }
.clamp-more .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.clamp-more > summary::after { content: "Show more"; display: block; margin-top: 2px; color: var(--accent); font-size: 12px; font-weight: 600; }
.clamp-more[open] .clamp { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.clamp-more[open] > summary::after { content: "Show less"; }
.review-older-body { display: grid; gap: 8px; padding: 4px 16px 16px; }
.review-older-body .sub { margin: 0; }
.review-older-body h3 { margin: 8px 0 0; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.review-older-body h3 .n { margin-left: 6px; color: var(--faint); font: 500 11px var(--mono); }
.review-older-body .radar-changes li.is-two { grid-template-columns: 92px minmax(0, 1fr); }

/* Horizontal strips (tabs, chips) that run past the edge fade there, so a reader can tell there is more; app.js
   marks them and keeps the current one in view. */
.is-scrollable { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.is-scrollable.is-scrolled { mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 40px), transparent); }
.is-scrollable.is-scrolled.at-end { mask-image: linear-gradient(90deg, transparent, #000 32px); }
.is-scrollable.at-end:not(.is-scrolled) { mask-image: none; }

/* Versions on phones: each version line is a compact card (version and date on one line, the rest below) instead of
   a table that scrolls sideways. */
@media (max-width: 700px) {
  .version-tbl { min-width: 0; table-layout: auto; }
  .version-tbl, .version-tbl tbody { display: block; }
  .version-tbl colgroup { display: none; }
  .version-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .version-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
  .version-tbl tr > th, .version-tbl tr > td { padding: 0; border: 0; min-width: 0; white-space: normal; }
  .version-tbl tbody tr:not(.fam):hover td { background: transparent; }
  .version-tbl tr > th, .version-tbl td.ver-release, .version-tbl td[data-label="Support"], .version-tbl td.ver-earlier { grid-column: 1 / -1; }
  .version-tbl td[data-label="Released"] { text-align: right; font-size: 12px; }
  .version-tbl td.ver-release { color: var(--muted); font-size: 12px; }
  .version-tbl td.ver-release:empty, .version-tbl td:has(> .muted:only-child) { display: none; }
  .version-tbl td[data-label="Support"] { font-size: 12px; }
  .version-tbl td[data-label="Support"] > span:not(.sub)::before { content: "Support: "; color: var(--muted); }
  .version-tbl tr.ver-group { border-top: 1px solid var(--line); }
  .version-tbl tr.ver-group > * { border-top: 0; }
}
/* Status choices on touch screens: rows a finger can hit. */
@media (pointer: coarse) {
  .choice-grid .check, .check-columns .check { min-height: 36px; }
  .check input { width: 20px; height: 20px; }
  .choice-group > summary { padding: 8px 0; }
}

/* My radar: kind chips, the cleared count with its undo, and the older section's clear action. */
.inline-form { display: inline; margin: 0; }
.review-summary .link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.review-older-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.review-older-head form { margin: 0; }

/* Tables marked is-stack become labeled cards on phones: the row heading and .wide cells take the full width, the
   other cells pair up under their column names. */
@media (max-width: 700px) {
  .tbl.is-stack, .tbl.is-stack tbody { display: block; width: 100%; min-width: 0; }
  .tbl.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl.is-stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
  .tbl.is-stack tr > th, .tbl.is-stack tr > td { padding: 0; border: 0; min-width: 0; width: auto; white-space: normal; text-align: left; }
  .tbl.is-stack tr > th, .tbl.is-stack td.wide { grid-column: 1 / -1; }
  .tbl.is-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
  .tbl.is-stack tbody tr:not(.fam):hover td { background: transparent; }
  .tbl.is-stack tr.fam { display: block; padding: 12px 16px 4px; }
  .tbl.is-stack tr.fam td { padding: 0; }
  .tbl.is-stack.priority-matrix td:has(> .matrix-none) { display: none; }
  .tbl.is-stack.priority-matrix td { width: auto; }
}

/* Touch screens: one-line titles, KB links and small chips get a taller hit area without moving anything. */
@media (pointer: coarse) {
  a.row-title, a.kbl, a.src-link, a.cve-id, a.readiness-for, .signal-head a, .bar-row a, .t-info a { padding-block: 4px; }
  .doc-more > summary, .history summary { padding-block: 6px; }
}

/* Change matrix: products with nothing in the period, folded into one row. */
.tbl tr.matrix-quiet > td { padding: 0; white-space: normal; }
.tbl tbody tr.matrix-quiet:hover td { background: transparent; }
.matrix-quiet .more-issues > summary { border-top: 0; }
.matrix-quiet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; margin: 0; padding: 4px 16px 14px; list-style: none; font-size: 12.5px; }
.matrix-quiet-list .sub { display: block; }
@media (max-width: 700px) { .tbl.is-stack tr.matrix-quiet { display: block; padding: 0; } }

/* Azure's grid categories reuse the services board rows: name, state now, a tile per region, and counts. */
.sb-head.ag-row, .sb-row.ag-row { grid-template-columns: minmax(160px, 1.2fr) 92px minmax(200px, 2.4fr) 72px 72px; }
.ag-regions { gap: 2px; height: 16px; }
.ag-regions i { border-radius: 2px; }
.sb-row .num.is-warn { color: var(--warn); font-weight: 600; }
.grid-group.is-problem > summary .sb-name { color: var(--warn); }
.sb-provider.grid-group > .tbl-wrap { border-top: 1px solid var(--line); }
@media (max-width: 700px) { .sb-head.ag-row { display: none; } .sb-row.ag-row { grid-template-columns: 1fr auto; } }

/* Service status, Ended: day groups, and rows that line up provider, title, end time and a duration bar. */
.ended-day { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 14px 16px 6px; color: var(--muted); font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ended-day .n { color: var(--faint); font-weight: 500; }
.ended-day + .status-ended { border-top: 1px solid var(--line); }
.status-ended summary.ended-row { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) 150px 190px; align-items: center; gap: 12px; padding: 9px 16px; list-style: none; }
.ended-row::-webkit-details-marker { display: none; }
.ended-row::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.ended-item[open] > .ended-row::before { transform: rotate(45deg); }
.ended-item[open] > .ended-row, .ended-row:hover { background: var(--raised); }
.ended-title { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ended-when { color: var(--muted); font: 500 11.5px var(--mono); text-align: right; white-space: nowrap; }
.ended-length { display: flex; align-items: center; gap: 10px; }
.ended-bar { position: relative; flex: none; width: 96px; height: 6px; border-radius: 3px; background: var(--line-2); }
.ended-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--warn); }
.ended-bar.is-crit::after { background: var(--crit); }
.ended-bar.is-bound::after { opacity: .5; }
.ended-bar.is-unknown::after { background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 5px); }
.ended-dur { color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.status-ended .ended-item > .incident { padding: 4px 16px 14px 38px; }
@media (max-width: 700px) {
  .status-ended summary.ended-row { grid-template-columns: 10px auto minmax(0, 1fr); row-gap: 6px; }
  .ended-title { white-space: normal; }
  .ended-when { grid-column: 2; text-align: left; }
  .ended-length { grid-column: 3; justify-content: flex-end; }
  .ended-bar { width: 64px; }
  .status-ended .ended-item > .incident { padding-left: 16px; }
}

/* A list's own search and sort: one row, a search box that takes the room, and the controls beside it. */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.list-tools input[type="search"] { flex: 1 1 260px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.list-tools input[type="search"]:focus, .list-tools select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.list-tools select { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
.list-tools label:not(.sr-only) { color: var(--muted); font-size: 12px; }
.list-tools .btn { height: 34px; }

/* Guidance: monitored pages folded by product, like providers on the services board. */
.sb-head.gd-row, .sb-row.gd-row { grid-template-columns: minmax(180px, 1.6fr) 72px 80px minmax(140px, 1fr); }
.gd-pages { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gd-pages > li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(140px, 1fr) minmax(130px, auto) auto; align-items: center; gap: 12px; padding: 8px 16px 8px 34px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.gd-pages > li:last-child { border-bottom: 0; }
.gd-pages > li > a { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.gd-pages > li > a:hover { color: var(--accent); }
.gd-state { color: var(--muted); }
.gd-state.is-changed { color: var(--accent); font-weight: 600; }
.gd-state.is-warn { color: var(--warn); }
@media (max-width: 700px) {
  .sb-head.gd-row { display: none; }
  .sb-row.gd-row { grid-template-columns: 1fr auto auto; }
  .sb-row.gd-row > .sub { display: none; }
  .gd-pages > li { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
  .gd-pages > li > a { white-space: normal; grid-column: 1 / -1; }
  .gd-pages > li > .sub { display: none; }
}

/* Month calendar: a Monday-first grid with up to three items a day; an agenda of busy days on phones. */
.seg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cal-nav { display: flex; gap: 6px; }
.cal-month-only { display: grid; gap: 6px; min-width: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.cal-month-only ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cal-month-only li { min-width: 0; max-width: 100%; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekday { padding: 8px 10px; color: var(--faint); font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.cal-day, .cal-blank { min-height: 108px; padding: 6px 8px 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.cal-grid > :nth-child(7n) { border-right: 0; }
.cal-blank { background: color-mix(in srgb, var(--raised) 50%, transparent); }
.cal-day.is-past { background: color-mix(in srgb, var(--raised) 35%, transparent); }
.cal-day.is-past .cal-num { color: var(--faint); }
.cal-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; color: var(--muted); font: 600 12px var(--mono); }
.cal-dow, .cal-mon { display: none; }
.cal-day.is-today .cal-num { background: var(--accent); color: var(--accent-ink); }
.cal-day ul, .cal-month-only ul ul { display: grid; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
.cal-day li > a, .cal-month-only li > a { display: block; overflow: hidden; padding: 2px 6px; border-left: 3px solid var(--tone, var(--faint)); border-radius: 4px; background: color-mix(in srgb, var(--tone, var(--faint)) 10%, transparent); color: var(--ink-2); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cal-day li > a:hover, .cal-month-only li > a:hover { color: var(--ink); background: color-mix(in srgb, var(--tone, var(--faint)) 20%, transparent); }
.cal-more summary { padding: 0 6px; color: var(--accent); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; }
.cal-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tone, var(--faint)); }
.k-eos, .k-dates { --tone: var(--crit); }
.k-servicing { --tone: var(--warn); }
.k-retire, .k-announced { --tone: #c084fc; }
.k-extended, .k-commercial { --tone: var(--accent); }
.k-roadmap { --tone: var(--ok); }
.k-other { --tone: var(--faint); }
@media (max-width: 700px) {
  .cal-grid { display: block; }
  .cal-weekday, .cal-blank, .cal-day:not(.has-items):not(.is-today) { display: none; }
  .cal-day { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; min-height: 0; padding: 10px 16px; border-right: 0; }
  .cal-num { justify-content: start; height: auto; font-size: 12px; }
  .cal-dow, .cal-mon { display: inline; }
  .cal-day ul { margin: 0; }
  .cal-day li > a { white-space: normal; }
  .cal-month-only > ul { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cal-month-only li > a { white-space: normal; overflow-wrap: anywhere; }
  .cal-nav .btn { padding: 0 8px; }
}

/* Roadmap by month: a row of month cards (targets have no day), with overdue and later items at either end. */
.rm-layout { padding: 10px 16px 0; }
.rm-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding: 14px 16px 16px; }
.rm-month { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
.rm-month header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 650; }
.rm-month header a { color: inherit; }
.rm-month header a:hover { color: var(--accent); }
.rm-month header .n { color: var(--muted); font: 600 11px var(--mono); }
.rm-month.is-current { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rm-month.is-overdue { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rm-month.is-overdue header span:first-child { color: var(--warn); }
.rm-month ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rm-month li { display: grid; gap: 1px; padding: 6px 8px; border-left: 3px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 12.5px; line-height: 1.35; }
.rm-month li.is-rolling { border-left-color: var(--ok); }
.rm-month li > a { color: var(--ink-2); }
.rm-month li > a:hover { color: var(--accent); }
.rm-month li .sub { font-size: 11px; }
.rm-more { font-size: 12px; }
@media (max-width: 700px) { .rm-months { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; } }

/* Patch Tuesday: verdict and numbers in one band, every Windows version in one table, sections paired evenly, and the
   release calendar folded until asked for. */
.pt-hero-facts { grid-template-columns: repeat(3, minmax(96px, auto)); }
.pt-hero-facts dd a { color: inherit; }
.pt-hero-facts dd a:hover { color: var(--accent); }
.pt-hero-facts .is-alert dd { color: var(--crit); }
.pt-pair { align-items: stretch; }
.pt-deploy .panel-head { flex-wrap: wrap; }
.pt-deploy .checklist { width: min(100%, 360px); }
.pt-deploy-tbl th.name { min-width: 150px; white-space: nowrap; }
.pt-deploy-tbl th.name .mine-tag { display: inline-flex; flex-basis: auto; margin-left: 8px; font-size: 10.5px; }
.pt-deploy-tbl th.name .sub { display: block; margin-top: 2px; white-space: normal; font-weight: 600; }
.pt-deploy-tbl tr.is-mine > * { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pt-deploy-tbl td .sub { display: block; margin-top: 2px; }
.pt-deploy-tbl td.pt-why { min-width: 220px; max-width: 420px; white-space: normal; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.pt-deploy-tbl td.pt-why .t-alert, .pt-deploy-tbl td.pt-why .t-critical { color: var(--crit); }
.pt-deploy-tbl td.pt-why .t-warn { color: var(--warn); }
.pt-deploy-tbl td.pt-mark { width: 1%; }
.pt-deploy-tbl .verdict { white-space: nowrap; }
.pt-oob { margin: 0; padding: 0; list-style: none; }
.pt-oob li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.pt-oob li:last-child { border-bottom: 0; }
.pt-oob-for { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.pt-calendar, .fold-panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pt-calendar > summary, .fold-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; list-style: none; cursor: pointer; font-size: 13px; }
.pt-calendar > summary::-webkit-details-marker, .fold-panel > summary::-webkit-details-marker { display: none; }
.pt-calendar > summary::after, .fold-panel > summary::after { content: "Show"; margin-left: auto; color: var(--accent); font-size: 12px; font-weight: 600; }
.pt-calendar[open] > summary::after, .fold-panel[open] > summary::after { content: "Hide"; }
.pt-calendar > summary svg, .fold-panel > summary svg { color: var(--faint); }
.pt-calendar > summary b, .fold-panel > summary b { color: var(--ink); }
.pt-calendar > .calendar, .fold-panel > .panel { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: none; }
@media (max-width: 900px) { .pt-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .pt-deploy-tbl th.name { white-space: normal; }
  .pt-deploy-tbl td.pt-why { max-width: none; min-width: 0; }
  .pt-oob li { grid-template-columns: auto minmax(0, 1fr); }
  .pt-oob li time { grid-column: 2; }
}

/* Calendar cells keep their items inside the day, whatever the title length. */
.cal-day { min-width: 0; overflow: hidden; }
.cal-day ul, .cal-day li { min-width: 0; }
.pt-deploy-tbl td.pt-mark .mark { display: flex; flex-wrap: nowrap; gap: 6px; }
.pt-deploy-tbl td { vertical-align: middle; }
.pt-deploy-tbl td .age { margin-left: 4px; color: var(--faint); font: 500 11.5px var(--mono); }
/* The deploy table is a checklist: its buttons always show, not only on hover. */
.pt-deploy .pt-deploy-tbl tbody tr td.pt-mark .mark .mark-btn { opacity: 1; }
/* Phones: each version is three short lines (version and verdict, the update with urgency and risk, the marks); the
   full reasons stay one tap away on the KB page. */
@media (max-width: 700px) {
  .tbl.is-stack.pt-deploy-tbl td[data-label]::before { display: none; }
  .tbl.is-stack.pt-deploy-tbl tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 16px; }
  .tbl.is-stack.pt-deploy-tbl tr > th.name { flex: 1 1 auto; }
  .tbl.is-stack.pt-deploy-tbl tr > td:nth-of-type(2) { flex: 1 1 100%; }
  .tbl.is-stack.pt-deploy-tbl td.pt-why { display: none; }
  .tbl.is-stack.pt-deploy-tbl td.pt-mark { flex: 1 1 100%; }
  .tbl.is-stack.pt-deploy-tbl .meter { font-size: 11px; }
}
/* Windows branch cards on phones: empty facts drop out instead of taking a labeled line each. */
@media (max-width: 700px) {
  .tbl.is-stack td:has(> .muted:only-child), .tbl.is-stack td.stack:has(> .sub:only-child) { display: none; }
  .tbl.is-stack tr > td:last-child:has(> .muted) { display: none; }
}
.pt-deploy-tbl td.pt-why .t-urgent { color: var(--crit); }
.pt-deploy-tbl td.pt-why .t-caution { color: var(--warn); }
.pt-deploy-tbl td.pt-why .t-good { color: var(--ok); }
.pt-deploy-tbl td.pt-why a:hover { text-decoration: underline; }

/* Versions: one row per product, opening into its version lines. */
.sb-head.vb-row, .sb-row.vb-row { grid-template-columns: minmax(170px, 1.4fr) minmax(120px, 1fr) 110px minmax(170px, 1fr) 56px; }
.vb-current { overflow: hidden; color: var(--ink); font: 600 12.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.vb-row .is-recent { color: var(--ok); font-weight: 600; }
.vb-row .deadline-soon { color: var(--crit); font-weight: 600; }
.vb-product > .tbl-wrap { border-top: 1px solid var(--line); }
.vb-product > .version-retired { margin: 0; padding: 8px 16px 12px; }
@media (max-width: 700px) {
  .sb-head.vb-row { display: none; }
  .sb-row.vb-row { grid-template-columns: minmax(0, 1fr) auto; padding-top: 8px; padding-bottom: 8px; }
  .sb-row.vb-row > .sub:not(.deadline-soon) { display: none; }
  .sb-row.vb-row > .deadline-soon { grid-column: 1 / -1; }
}

/* Windows branches on phones: name and status on one line, the latest KB with its build, then counts; the last
   security release keeps its label because a second KB would be ambiguous. */
@media (max-width: 700px) {
  .tbl.is-stack.branch-tbl tr:not(.fam) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .tbl.is-stack.branch-tbl tr > th.name { flex: 1 1 100%; }
  .tbl.is-stack.branch-tbl td[data-label="Latest release"]::before, .tbl.is-stack.branch-tbl td[data-label="CVEs fixed"]::before,
  .tbl.is-stack.branch-tbl td[data-label="Known issues"]::before, .tbl.is-stack.branch-tbl td[data-label="Status"]::before { display: none; }
  .tbl.is-stack.branch-tbl td[data-label="Latest release"] { flex: 1 1 100%; }
  .tbl.is-stack.branch-tbl td[data-label="Last security release"] { flex: 1 1 100%; font-size: 12px; }
  .tbl.is-stack.branch-tbl td[data-label="Last security release"]::before { display: inline; margin-right: 6px; }
  .tbl.is-stack.branch-tbl td[data-label="Last security release"] .line, .tbl.is-stack.branch-tbl td[data-label="Last security release"] .sub { display: inline; }
}
/* The deploy table keeps its mark buttons in view: below the width their labels need, they show as icons (named by
   their title and aria-label), so the table never scrolls sideways on a laptop screen. */
.pt-deploy .tbl-wrap { container-type: inline-size; }
@container (max-width: 1420px) {
  .pt-deploy-tbl td.pt-mark .mark-btn span { display: none; }
  .pt-deploy-tbl td.pt-mark .mark-btn { padding: 0 7px; }
  .pt-deploy-tbl td.pt-why { min-width: 180px; max-width: 320px; }
}
@media (max-width: 700px) { .tbl.is-stack.pt-deploy-tbl td.pt-mark .mark-btn span { display: inline; } .tbl.is-stack.pt-deploy-tbl td.pt-mark .mark-btn { padding: 0 9px; } }

/* ---------- network: endpoint sets, service tags, lists ---------- */
.net-subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; padding: 14px 16px 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.net-subhead .sub { font-weight: 400; }
.net-notice { margin: 12px 16px 0; }
.net-changes { margin: 0; padding: 0 16px 8px; list-style: none; }
.net-changes > li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.net-changes > li:first-child { border-top: 0; }
.net-changes time { padding-top: 2px; color: var(--muted); font: 500 12px var(--mono); }
.net-change-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.net-change-head a { font-weight: 600; overflow-wrap: anywhere; }
.net-change-head a:hover { color: var(--accent); }
.net-change-head form { margin-left: auto; }
.net-diff { margin: 6px 0 0; }
.net-diff > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
.net-diff > summary b { font-weight: 600; }
.net-add { color: var(--ok); font: 600 12px var(--mono); }
.net-del { color: var(--crit); font: 600 12px var(--mono); }
.net-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2px 18px; margin: 6px 0 0; padding: 0; list-style: none; }
.net-values li { display: flex; gap: 6px; min-width: 0; padding: 2px 0; font-size: 12px; }
.net-values code { font: 12px var(--mono); overflow-wrap: anywhere; }
.net-values .is-add { color: var(--ok); }
.net-values .is-del { color: var(--crit); }
.net-values .is-del code { text-decoration: line-through; text-decoration-thickness: 1px; }
.net-values.is-preview { margin-bottom: 4px; }
.sb-head.net-set-row, .sb-row.net-set-row { grid-template-columns: 90px minmax(140px, 1.2fr) 96px minmax(150px, 1.6fr) 56px 56px 56px; }
.net-set-row .tag { margin-left: 6px; font-weight: 500; }
.net-set-body { padding: 4px 16px 14px; border-top: 1px solid var(--line-2); }
.net-set-body p { margin: 8px 0 0; }
.net-notes { color: var(--ink-2); font-size: 12.5px; }
.net-cat { padding: 1px 7px; border-radius: 999px; background: var(--raised); font-size: 11.5px; font-weight: 600; }
.net-cat-optimize { color: var(--accent); background: color-mix(in srgb, var(--accent) var(--soft), transparent); }
.net-cat-allow { color: var(--ok); background: color-mix(in srgb, var(--ok) var(--soft), transparent); }
.net-lists { display: grid; gap: 14px; }
.net-lists > p { margin: 0; max-width: 100ch; color: var(--ink-2); }
.net-builder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); }
.net-builder h3 { flex: 1 0 100%; margin: 0; font-size: 13px; }
.net-builder label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.net-builder select, .net-builder input:not([type="checkbox"]) { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
.net-builder input:not([type="checkbox"]) { width: 210px; max-width: 100%; }
.net-builder label.check { display: inline-flex; align-items: center; gap: 8px; height: 34px; color: var(--ink-2); }
.net-builder .btn { height: 34px; }
.net-result { display: grid; gap: 6px; }
.net-result p { margin: 0; }
.net-recipes > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.net-recipes dl { display: grid; gap: 8px; margin: 10px 0 0; }
.net-recipes dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; font-size: 12.5px; }
.net-recipes dt { font-weight: 600; }
.net-recipes dd { margin: 0; color: var(--ink-2); }
.sb-head.net-tag-row, .sb-row.net-tag-row { grid-template-columns: minmax(180px, 1.6fr) 80px 90px; }
.list-tools .stacked { display: grid; gap: 4px; }
.list-tools .stacked input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
@media (max-width: 700px) {
  .sb-head.net-set-row, .sb-head.net-tag-row { display: none; }
  .sb-row.net-set-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .sb-row.net-set-row > :nth-child(4), .sb-row.net-set-row > .num { display: none; }
  .net-changes > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .net-recipes dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.changelog-month { margin: 0; padding: 14px 16px 2px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.product-dates.changelog .tag { justify-self: start; white-space: nowrap; }
.product-dates.changelog li { grid-template-columns: 96px 190px minmax(0, 1fr); align-items: baseline; gap: 4px 12px; }
@media (max-width: 700px) { .product-dates.changelog li { grid-template-columns: auto minmax(0, 1fr); } .product-dates.changelog li > a { grid-column: 1 / -1; } }

/* ---------- access bundles ---------- */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.bundle-card { display: grid; align-content: start; gap: 6px; padding: 14px 16px; }
.bundle-card:hover { border-color: var(--accent); }
.bundle-card > b { font-size: 15px; }
.bundle-summary { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.bundle-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.bundle-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.gsa-guide { display: grid; gap: 14px; }
.gsa-steps { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ink-2); }
.gsa-facts { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.bundle-tbl td.stack .tag { margin-right: 6px; }
.bundle-tbl th.name { min-width: 250px; }
.bundle-tbl th.name code { font: 12.5px var(--mono); overflow-wrap: anywhere; }
.bundle-tbl th.name .tag { margin-left: 6px; }
/* ---------- Message Center notice body ---------- */
.mc-body.is-structured { white-space: normal; display: grid; gap: 10px; }
.mc-body.is-structured h3 { margin: 8px 0 0; font-size: 14px; color: var(--ink); }
.mc-body.is-structured p { margin: 0; }
.mc-body.is-structured ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.mc-body.is-structured ul.depth-1 { padding-left: 38px; }
.mc-body.is-structured ul.depth-2, .mc-body.is-structured ul.depth-3 { padding-left: 56px; }
.mc-table th, .mc-table td { white-space: normal; vertical-align: top; }
.mc-moved li { grid-template-columns: 140px minmax(0, 1fr); align-items: baseline; }
.mc-moved del { color: var(--crit); }
.mc-moved ins { color: var(--ok); text-decoration: none; font-weight: 600; }
/* ---------- Microsoft's edits (public source history) ---------- */
.source-edits-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.source-edits-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.source-edits-list time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.source-edit-message { color: var(--ink); overflow-wrap: anywhere; }
.source-edit-live { color: var(--ok); font-size: 12px; font-weight: 600; white-space: nowrap; }
.source-edits-list .link { white-space: nowrap; font-size: 12.5px; }
.source-note .link { overflow-wrap: anywhere; }
@media (max-width: 700px) { .source-edits-list li { grid-template-columns: minmax(0, 1fr) auto; } .source-edit-message { grid-column: 1 / -1; grid-row: 2; } }
/* ---------- allow list check ---------- */
.allow-check { display: grid; gap: 12px; }
.allow-check textarea, .allow-copy textarea { width: 100%; min-height: 140px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 12.5px/1.5 var(--mono); resize: vertical; }
.allow-copy textarea { min-height: 70px; }
.allow-bundles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.allow-bundles legend { margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.allow-copy { margin: 0; padding: 8px 16px 14px; }
.allow-copy > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
/* Instant settings: with script, choices apply as they change, so the Save buttons give way to a short status line.
   Without script the buttons stay and the hint stays hidden. */
.instant-hint, .instant-status { display: none; }
.has-instant [data-instant] [data-instant-save] { display: none; }
.has-instant [data-instant] .instant-hint { display: inline; color: var(--muted); font-size: 12px; }
.has-instant [data-instant] .instant-status { display: inline; margin-left: 4px; color: var(--ok); font-size: 12px; font-weight: 600; }

/* Filter boxes over long tables. */
.tbl-filter { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.tbl-filter[hidden] { display: none; }
.tbl tr[hidden], .tbl.is-stack tr[hidden] { display: none; }
.tbl-filter svg { flex: none; color: var(--faint); }
.tbl-filter input { flex: 1; min-width: 0; padding: 6px 2px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.tbl-filter:focus-within { border-color: var(--accent); }
.tbl-filter .sub { flex: none; white-space: nowrap; }

/* Access bundle groups fold; each row's profile reasoning is one line that opens. */
.fold-groups { display: grid; gap: 12px; }
.fold-group[hidden] { display: none; }
.fold-group > summary .n { padding: 0 7px; border-radius: 999px; background: var(--raised); color: var(--ink-2); font: 600 11.5px var(--mono); }
.fold-group > summary .sub { flex-basis: 100%; order: 9; font-size: 12px; }
.fold-group > .tbl-wrap { border-top: 1px solid var(--line); }
.bundle-tbl th.name code { overflow-wrap: normal; word-break: normal; }
.bundle-tbl td.stack .sub.inline { display: inline; }
.bundle-tbl .why { margin-top: 3px; font-size: 12px; }
.bundle-tbl .why > summary { width: fit-content; color: var(--muted); cursor: pointer; }
.bundle-tbl .why > summary b { color: var(--ink-2); }
.bundle-tbl .why p { margin: 4px 0 0; max-width: 80ch; color: var(--muted); line-height: 1.5; white-space: normal; }