/* Sirvan — framed sheet: packages/design/DESIGN.md. No JavaScript, strict CSP (no inline style). Fonts self-hosted (static/fonts, SIL OFL 1.1). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-var-latin.woff2") format("woff2"); }
/* Persian (Vazirmatn, SIL OFL; Arabic blocks only) */
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+066B-066C, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-var-latin.woff2") format("woff2"); }

/* ---- 1. tokens: light-dark() pairs, picked by color-scheme (DESIGN.md §1) */
:root {
  --font: "Inter", "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* surfaces: frame (chrome) > sheet (work) > raised (wells) */
  --frame: light-dark(#eef2f5,#0b0c0d); --sheet: light-dark(#fff,#141516); --raised: light-dark(#f5f7f9,#1b1c1e); --hover: light-dark(#f4f6f8,#1a1c1e); --active: light-dark(#dfe5ea,#26292c);
  --border: light-dark(#e3e7eb,#26282b); --rule: light-dark(#edf0f2,#1f2124); --control: light-dark(#c7cdd3,#45494e);
  --text: light-dark(#121417,#ececed); --text-2: light-dark(#343a40,#cfd2d5); --muted: light-dark(#59616a,#a8adb3); --faint: light-dark(#697079,#91969c);
  --brand: light-dark(#1b6c80,#4fb3c9); --link: light-dark(#155f73,#6cc3d6); --on-brand: light-dark(#fff,#0b0c0d);
  --primary: light-dark(#16191c,#eff1f2); --primary-hover: light-dark(#2c3136,#fff); --on-primary: light-dark(#fff,#121314);
  --data: light-dark(#1b6c80,#4fb3c9); --data-fill: light-dark(rgba(27, 108, 128, .10),rgba(79, 179, 201, .12)); --grid: light-dark(#e9ecef,#25272a);
  --ok: light-dark(#1e7b4f,#4cc685); --warn: light-dark(#8a4a06,#e6a83d); --fail: light-dark(#c0262c,#f07070);
  --ok-dot: light-dark(#1f9d5c,#3fc07a); --warn-dot: light-dark(#d08a0b,#e3a33b); --fail-dot: light-dark(#d6342c,#ef5b5b);
  --ok-bg: light-dark(#e2f5ea,#14281c); --ok-ink: light-dark(#0f4329,#7ad8a3); --warn-bg: light-dark(#fcf1d6,#2c2311); --warn-ink: light-dark(#6e3a05,#f0bf63);
  --fail-bg: light-dark(#fde8e6,#2e1718); --fail-ink: light-dark(#8a1c1f,#ff9690); --neutral-bg: light-dark(#eaedf0,#24262a); --neutral-ink: light-dark(#353a40,#c9ccd0);
  --focus: light-dark(#1b6c80,#6cc3d6); --select: light-dark(rgba(27, 108, 128, .18),rgba(79, 179, 201, .28));
  /* type */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 22px; --fs-kpi: 28px;
  /* space (4px base), radius, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gap: 24px; --pad: 32px; --side: 228px; --inset: 8px;
  --r-sheet: 16px; --r-card: 8px; --r-control: 6px; --r-chip: 4px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --t-fast: 120ms; --t: 160ms; --t-sheet: 180ms;
  --shadow-float: 0 12px 32px light-dark(rgba(16, 24, 32, .16),rgba(0, 0, 0, .5)), 0 2px 6px light-dark(rgba(16, 24, 32, .08),transparent);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- 2. base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--control) transparent; }
body { margin: 0; background: var(--frame); color: var(--text); font-family: var(--font);
  font-size: var(--fs-md); line-height: 20px; caret-color: var(--brand);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--select); }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-chip); }
code, pre, .mono, kbd { font-family: var(--mono); font-size: .92em; font-variant-ligatures: none; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.muted, .dim, td.dim { color: var(--muted); }
.small { font-size: var(--fs-xs); line-height: 16px; }
.nw { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.dot-sep::before { content: "·"; color: var(--faint); }
.warnc { color: var(--warn); font-weight: 600; }
p { margin: 0 0 var(--s3); }

/* ---- 3. shell: tinted frame (sidebar) + white sheet */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s3) var(--s3); overflow-y: auto; scrollbar-width: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px var(--s5); color: var(--text);
  font-weight: 600; font-size: 15px; line-height: 18px; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand .mark-bg { fill: var(--brand); } .brand .mark-fg { stroke: var(--on-brand); }
.brand small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); letter-spacing: 0; }
nav.main { display: flex; flex-direction: column; gap: 2px; }
nav.main details, nav.main details[open] > summary { border: 0; margin: 0; background: none; }
nav.main summary { min-height: 32px; margin-top: var(--s1); padding: 0 10px; font-size: var(--fs-xs); color: var(--muted);
  border-radius: var(--r-control); justify-content: space-between; }
nav.main summary::before { order: 1; }
nav.main a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-control);
  color: var(--text-2); transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
nav.main a svg { color: var(--muted); transition: color var(--t-fast) ease; }
nav.main a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
nav.main a.on { background: var(--active); color: var(--text); font-weight: 600; }
nav.main a.on svg { color: var(--text); }
nav.main a .ncount { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
nav.main a .nq { font-weight: 400; color: var(--muted); }
.side .close { display: none; }
.who { display: flex; align-items: center; gap: 10px; padding: var(--s3) 6px 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--active); color: var(--text-2); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; }
.who-name { min-width: 0; flex: 1; line-height: 16px; }
.who-name a { display: block; color: var(--text); font-weight: 500; font-size: var(--fs-sm); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.who-name span { font-size: var(--fs-xs); color: var(--muted); }
.who form, form.inline { display: inline; margin: 0; }
.mbar { display: none; }
/* theme switch */
form.theme { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0; }
.side-foot { margin-top: auto; padding-top: var(--s3); }
.side form.theme { padding: var(--s3) 6px 0; }
.seg { display: inline-flex; padding: 1px; border: 1px solid var(--border); border-radius: var(--r-control); }
.seg button { width: 30px; height: 26px; padding: 0; border: 0; border-radius: var(--r-chip); background: none; color: var(--muted); }
.seg button[aria-pressed=true] { background: var(--active); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .seg button[aria-pressed=false]:hover { background: var(--hover); color: var(--text); } }

.content { min-width: 0; padding: var(--inset) var(--inset) var(--inset) 0; display: flex; }
.sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--sheet);
  border: 1px solid var(--border); border-radius: var(--r-sheet); }
main { width: 100%; max-width: 1320px; padding: var(--s5) var(--pad) var(--s7); flex: 1; }
footer { padding: 0 var(--pad) var(--s5); color: var(--faint); font-size: var(--fs-xs); }

/* ---- 4. page header: crumb, h1, status line, scan bar */
.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3) var(--s5);
  flex-wrap: wrap; margin: 0 0 var(--s5); }
.phead-t { min-width: 0; flex: 1 1 320px; }
.crumb { display: block; font-size: var(--fs-sm); margin-bottom: var(--s1); }
.crumb a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.crumb a:hover { color: var(--text); text-decoration: none; }
.crumb svg.i { width: 14px; height: 14px; }
.phead-t>h1{display:inline}.help-q{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;margin-left:8px;vertical-align:3px;border:1px solid var(--border);border-radius:50%;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.help-q:hover{color:var(--text);background:var(--hover);text-decoration:none}.help-q::after{content:"";position:absolute;inset:-10px}
h1 { font-size: var(--fs-xl); line-height: 28px; font-weight: 600; letter-spacing: -.015em; margin: 0;
  overflow-wrap: anywhere; text-wrap: balance; }
.sub { margin: 6px 0 0; color: var(--muted); display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.sub strong { color: var(--text); font-weight: 600; }
/* Overview header: finding, then decisions waiting */
.ov-find { display: contents; color: var(--text-2); }
.ov-wait { flex-basis: 100%; display: flex; gap: 6px 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.ov-cat { font-weight: 500; color: var(--text-2); }
.ov-foot { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--muted); }
h2 { font-size: var(--fs-lg); line-height: 22px; font-weight: 600; letter-spacing: -.005em; margin: var(--s6) 0 var(--s3);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
h3 { font-size: var(--fs-md); font-weight: 600; margin: var(--s5) 0 var(--s2); }
.count { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
  background: var(--neutral-bg); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.section-note { color: var(--muted); font-size: var(--fs-sm); margin: -4px 0 var(--s3); max-width: 100ch; }
.more { display: flex; gap: 8px; margin-top: var(--s2); }
details > .section-note { margin: var(--s3) var(--s4); }
.section-note code { font-size: var(--fs-xs); }
p.lead { font-size: 15px; line-height: 24px; color: var(--text); max-width: 80ch; margin: 0 0 var(--s4); }
.narrow { max-width: 440px; }

.scanctl { display: flex; align-items: center; gap: var(--s3); }
.scan-meta { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.scan-meta.warnc { white-space: normal; }
.scanform { display: inline; margin: 0; }
.scan-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.scan-btn .i { width: 15px; height: 15px; }
.scan-btn.busy .i { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 5. controls */
button, .btn { font: inherit; font-weight: 500; font-size: var(--fs-sm); line-height: 18px; height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  border-radius: var(--r-control); border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary);
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t) ease, border-color var(--t) ease, color var(--t) ease, transform var(--t-fast) var(--ease-out); }
button:active:not(:disabled), .btn:active { transform: scale(.97); }
a.btn:hover { text-decoration: none; }
button.secondary, .btn.secondary, button.small, .btn.small, button.icon { background: var(--sheet); color: var(--text); border-color: var(--control); }
button.small, .btn.small { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
button.small.danger { color: var(--fail); }
button.link { background: none; border: 0; color: var(--link); padding: 0; height: auto; }
button.icon { width: 30px; height: 30px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
button:disabled { cursor: not-allowed; background: var(--raised); border-color: var(--border); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled), .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  button.secondary:hover:not(:disabled), .btn.secondary:hover, button.small:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
  button.icon:hover { background: var(--active); color: var(--text); border-color: transparent; }
}
select, input[type=text], input[type=number], input[type=password], input[type=url], input:not([type]), textarea {
  font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--sheet);
  border: 1px solid var(--control); border-radius: var(--r-control); padding: 0 10px; height: 32px; line-height: 18px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
select { padding-right: 28px; min-width: 120px; }
textarea { height: auto; min-height: 64px; padding: 8px 10px; line-height: 20px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--focus); box-shadow: 0 0 0 3px var(--select); }
input[type=number] { width: 88px; font-variant-numeric: tabular-nums; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; vertical-align: middle; }
.filters { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin: 0 0 var(--s3); }
.filters label { display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--muted); gap: 4px; }
.filters .meta { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); align-self: center; }
.actionbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s5); }
.actionbar form.inline { display: inline-flex; gap: var(--s2); align-items: center; }
.actionbar input[type=text] { min-width: 260px; }
.savebar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0 var(--s2); }

/* ---- 6. status: badge (state machine), tag (category), banner (flash) */
.badge { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 20px; padding: 0 8px 0 7px;
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap;
  vertical-align: middle; background: var(--neutral-bg); color: var(--neutral-ink); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); } .badge.ok::before { background: var(--ok-dot); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); } .badge.warn::before { background: var(--warn-dot); }
.badge.fail { background: var(--fail-bg); color: var(--fail-ink); } .badge.fail::before { background: var(--fail-dot); }
.tag { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 6px; border-radius: var(--r-chip);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1; color: var(--neutral-ink); background: var(--neutral-bg);
  white-space: nowrap; vertical-align: middle; }
/* production: named, not alarmed (no red) */
.skip { position: absolute; left: 8px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: 6px; background: var(--primary); color: var(--on-primary); }
.skip:focus { top: 8px; }
main:focus { outline: none; }
.tag.prod { color: var(--text); font-weight: 600; }
a.tag { transition: background-color var(--t-fast) ease; }
a.tag:hover { text-decoration: none; background: var(--active); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s4); }
.chips a.tag { height: 26px; padding: 0 8px; gap: 6px; }
.chips a.tag b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.chips a.tag.on { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.chips a.tag.on b { color: inherit; opacity: .75; }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-card);
  margin: 0 0 var(--s4); font-size: var(--fs-sm); line-height: 20px; background: var(--raised); color: var(--text);
  max-width: 100ch; overflow-wrap: anywhere; }
.banner svg { margin-top: 2px; }
.banner.fail { background: var(--fail-bg); color: var(--fail-ink); }
.banner.ok { background: var(--ok-bg); color: var(--ok-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* ---- 7. KPI strip: one container split by hairlines */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 0 0 var(--s6);
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.stat { background: var(--sheet); padding: var(--s4) var(--s4) 14px; min-width: 0; color: var(--text); }
a.stat { transition: background-color var(--t-fast) ease; }
a.stat:hover { background: var(--hover); text-decoration: none; }
a.stat[aria-current] { background: var(--active); }
a.stat[aria-current] .k { color: var(--text); font-weight: 500; }
.stat .k { font-size: var(--fs-sm); color: var(--muted); }
.stat .big { font-size: var(--fs-kpi); line-height: 34px; font-weight: 450; letter-spacing: -.02em; margin-top: 6px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .big.fail { color: var(--fail); }
.stat .big small { font-size: var(--fs-md); color: var(--muted); font-weight: 400; letter-spacing: 0; }
.stat .s { font-size: var(--fs-xs); line-height: 16px; color: var(--muted); margin-top: 4px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.stat .s:empty { display: none; }
/* resource strip (VM page): the label carries the state badge; the figure stays ink */
.stat .res-k { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.stat .res-k .badge { height: 18px; font-size: 11px; }

/* ---- 8. blocks: panel, split (main + rail), row lists */
.panel { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--sheet); margin: 0 0 var(--gap); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.panel-h h2, .panel-h h3 { margin: 0; font-size: var(--fs-md); }
.panel-h .go { font-size: var(--fs-sm); }
.panel-b { padding: var(--s4); }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.grid-main > * { min-width: 0; }
.grid-main .panel { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); align-items: start; }
.split > * { min-width: 0; }
.split > .rail { position: sticky; top: var(--s4); }
.split > .rail h2:first-child, .split > div > h2:first-child { margin-top: 0; }

/* rows: a divided list of things with a title line and a meta line */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); }
.rows > li:first-child { border-top: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows .t { display: block; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
a.t:hover { text-decoration: underline; }
.rows .m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: var(--fs-xs);
  line-height: 16px; color: var(--muted); }
.rows .x { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rows .x.one { -webkit-line-clamp: 1; }
.rows .end { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex: none; }
.rows .th { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s2); }
.rows .th .m { margin: 0; }

/* run strip: one tick per run of a check, last 48 h */
svg.strip { display: block; width: 100%; height: 16px; margin-top: 10px; border-radius: 3px; }
.strip .track { fill: var(--raised); }
.strip .mid { stroke: var(--control); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.strip .tk { stroke-width: 2; vector-effect: non-scaling-stroke; stroke: var(--data); }
.strip .tk.warn { stroke: var(--warn-dot); } .strip .tk.fail { stroke: var(--fail-dot); }
.strip-x { display: flex; justify-content: space-between; gap: var(--s2); margin-top: 4px; font-size: 11px; line-height: 14px;
  color: var(--faint); font-variant-numeric: tabular-nums; }
.strip-key { display: inline-flex; align-items: center; gap: 4px 6px; font-size: var(--fs-xs); color: var(--muted); }
.strip-key i { width: 2px; height: 10px; border-radius: 1px; background: var(--data); margin-left: 6px; }
.strip-key i.warn { background: var(--warn-dot); } .strip-key i.fail { background: var(--fail-dot); }

/* incident timeline: one event per row on a thin spine, dot by kind */
ol.timeline { list-style: none; margin: 0 0 var(--s5); padding: 0; }
ol.timeline > li { position: relative; padding: 0 0 var(--s4) 26px; }
ol.timeline > li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sheet); border: 2px solid var(--faint); box-sizing: border-box; }
ol.timeline > li::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: 3px; width: 1px; background: var(--border); }
ol.timeline > li:last-child::after { display: none; }
ol.timeline > li.ev-finding::before { border-color: var(--data); background: var(--data); }
ol.timeline > li.ev-rca::before { border-color: var(--text); }
ol.timeline > li.ev-reopen::before { border-color: var(--warn-dot); background: var(--warn-dot); }
ol.timeline > li.ev-auto-resolve::before, ol.timeline > li.ev-resolve::before { border-color: var(--ok-dot); }
.ev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.ev-h time { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.ev-h a { font-weight: 500; }
.ev-b { margin-top: 3px; color: var(--text-2); overflow-wrap: anywhere; max-width: 90ch; }
.ev-b b { color: var(--text); font-weight: 600; }
.ev-b .badge { margin-left: 4px; }
ol.chat .ev-b { white-space: pre-wrap; }

/* report: article at reading width + rail (facts, outline) */
.split.doc { grid-template-columns: minmax(0, 1fr) 260px; }
.split.doc > article > h2:first-child { display: none; }  /* the report's own title repeats the page h1 */
.split.doc > article > h2:first-child + * { margin-top: 0; }
ol.toc { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
ol.toc li { border-top: 1px solid var(--rule); }
ol.toc li:first-child { border-top: 0; }
ol.toc a { display: block; padding: 6px 0; color: var(--text-2); overflow-wrap: anywhere; }
ol.toc a:hover { color: var(--text); }
.md [id] { scroll-margin-top: var(--s4); }

/* key-value rows (dl) */
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--s4); margin: 0; }
dl.kv dt, dl.kv dd { padding: 7px 0; border-top: 1px solid var(--rule); margin: 0; }
dl.kv dt { color: var(--muted); font-size: var(--fs-sm); }
dl.kv dd { overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
dl.kv > :nth-child(-n+2) { border-top: 0; }

/* ---- 9. tables: rules and alignment */
.tablewrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-card); margin: 0 0 var(--s4);
  background: var(--sheet); overscroll-behavior-x: contain; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { text-align: left; padding: 0 var(--s3); height: 44px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
td { padding-top: 10px; padding-bottom: 10px; }
th { position: sticky; top: 0; z-index: 1; height: 38px; background: var(--sheet); font-size: var(--fs-xs); font-weight: 500;
  color: var(--muted); white-space: nowrap; border-bottom-color: var(--border); }
th a { color: var(--muted); } th a:hover { color: var(--text); }
th:first-child, td:first-child { padding-left: var(--s4); }
th:last-child, td:last-child { padding-right: var(--s4); }
th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { tbody tr:hover td { background: var(--hover); } }
td a, td a b { font-weight: 500; }
td.wrap a, td.summary a { white-space: normal; }
td.path, .path { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.trunc { display: block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trunc.w-lg { max-width: 64ch; } .trunc.w-md { max-width: 40ch; }
td.summary { min-width: 200px; color: var(--text-2); }
td.wrap { min-width: 240px; }
td.empty-cell { color: var(--muted); padding: var(--s5) var(--s4); text-align: left; height: auto; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form + form { margin-left: 4px; }
td div.small { margin-top: 2px; }
td.os { min-width: 140px; }
td.os .trunc { max-width: 19ch; }
td.analysis { min-width: 150px; }
td.analysis form { display: inline-flex; margin: 2px 0; }
td svg.bar { width: 80px; }
/* VM page and inventory list */
.failnum { color: var(--fail); font-weight: 600; } .warnnum { color: var(--warn); font-weight: 600; }
.ready { font-variant-numeric: tabular-nums; color: var(--text-2); } .ready b { font-weight: 600; color: var(--text); }
.ready.fail b { color: var(--fail); }
.unit { overflow-wrap: anywhere; color: var(--text); }
table.svc td:first-child { min-width: 300px; max-width: 420px; }
table.svc td.routes { max-width: 340px; }
td.routes { min-width: 220px; white-space: normal; color: var(--text-2); }
td.routes > div + div { margin-top: 2px; }
td.spark { width: 136px; padding-top: 6px; padding-bottom: 6px; }
table.pressure tr.grp th { position: static; height: auto; padding-top: var(--s4); padding-bottom: 6px; font-size: var(--fs-sm);
  color: var(--text); font-weight: 600; white-space: normal; border-bottom-color: var(--rule); }
table.pressure tr.grp th .badge { margin: 0 6px 0 8px; vertical-align: 1px; }
table.pressure tr.grp th .dim { font-weight: 400; }
table.pressure tbody tr:first-child th { padding-top: var(--s3); }
@media (hover: hover) and (pointer: fine) { table.pressure tbody tr.grp:hover th { background: var(--sheet); } }
/* long tables keep their identity column in view */
.tablewrap.tall th:first-child, .tablewrap.tall td:first-child { position: sticky; left: 0; z-index: 2; background: var(--sheet); }
.tablewrap.tall th:first-child { z-index: 3; }
/* more columns to the right: a 3px edge while scrollable (no overflow, no edge); .tw-hint below 1600px */
@supports (animation-timeline: scroll()) {
  .tablewrap { animation: tw-edge linear both; animation-timeline: scroll(self inline); }
  @keyframes tw-edge { from, 97% { box-shadow: inset -3px 0 0 var(--control); } to { box-shadow: none; } }
}
.tw-hint { display: none; justify-content: flex-end; align-items: center; margin: 0 0 var(--s2); }
.tw-hint .i { width: 14px; height: 14px; }
@media (max-width: 1599px) { .tw-hint { display: flex; } }
@media (hover: hover) and (pointer: fine) { .tablewrap tbody tr:hover td:first-child { background: var(--hover); } }
td .tag + .tag, td .badge + .tag { margin-left: 4px; }
.tbl-kv td:first-child { color: var(--muted); width: 1%; white-space: nowrap; }
.tbl-set td:nth-child(n+2), .tbl-set th:nth-child(n+2) { width: 1%; white-space: nowrap; }
.tbl-set td.range, .tbl-kv td.range { text-align: right; }
.tbl-kv td.range, .tbl-set td.range { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablewrap.tall { max-height: none; }
/* dense: 8px between columns, 16px outer cells */
.tablewrap.dense th, .tablewrap.dense td { padding-left: var(--s2); padding-right: var(--s2); }
.tablewrap.dense th:first-child, .tablewrap.dense td:first-child { padding-left: var(--s4); }
.tablewrap.dense th:last-child, .tablewrap.dense td:last-child { padding-right: var(--s4); }
.tablewrap.dense td:first-child { white-space: normal; min-width: 170px; max-width: 210px; overflow-wrap: anywhere; }
@media (min-width: 701px) { .tablewrap.dense td.nw:first-child { white-space: nowrap; max-width: none; } }

/* meter (days left, disk used) */
.meter { display: flex; align-items: center; gap: var(--s2); }
svg.bar { width: 120px; height: 6px; display: block; border-radius: 3px; flex: none; }
svg.bar .track { fill: var(--rule); } svg.bar .ok { fill: var(--text-2); }
svg.bar .warn { fill: var(--warn-dot); } svg.bar .fail { fill: var(--fail-dot); }
.meter .small { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---- 10. charts (server-side SVG) */
.chartcard { margin: 0 0 var(--gap); }
.chartcard .panel-h { border-bottom: 0; padding-bottom: 0; }
.chartwrap { padding: var(--s2) var(--s3) var(--s3); }
svg.chart { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; }
svg.chart.sm { display: none; }
.chart .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis { stroke: var(--control); stroke-width: 1; shape-rendering: crispEdges; }
.chart .ylab, .chart .xlab { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .area { fill: var(--data-fill); stroke: none; }
.chart .line { fill: none; stroke: var(--data); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { fill: var(--sheet); stroke: var(--data); stroke-width: 1.5; opacity: 0; transition: opacity var(--t-fast) ease; }
.chart .pt:hover { opacity: 1; fill: var(--data); }
.chart .dot { fill: var(--data); }
.chart-legend { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.chart-legend b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
/* mini sparkline: one series in a table cell, threshold as a dashed amber rule */
svg.mini { display: block; width: 120px; height: 28px; overflow: visible; }
svg.mini .line { fill: none; stroke: var(--data); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
svg.mini .area { fill: var(--data-fill); stroke: none; }
svg.mini .thr { stroke: var(--warn-dot); stroke-width: 1; stroke-dasharray: 3 3; }
/* share list: who uses a resource, one meter per unit */
.consumers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: 0 0 var(--s4); }
.consumers h3 { margin-top: 0; }
ul.share { list-style: none; margin: 0; padding: 0; }
ul.share li { padding: var(--s2) 0; border-top: 1px solid var(--rule); }
ul.share li:first-child { border-top: 0; padding-top: 0; }
ul.share .meter { margin-top: 4px; }
ul.share svg.bar { width: 160px; }
ul.share .meter b { color: var(--text); font-weight: 600; }
.vmctl { flex-wrap: wrap; justify-content: flex-end; gap: var(--s2) var(--s3); }
.vmctl form { display: inline-flex; }
.analysis-h { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-lg); line-height: 22px; margin: 0 0 4px; }
.analysis-h b { font-weight: 600; text-wrap: balance; }
details.report > .md { padding: 0 var(--s5) var(--s3); max-width: 1100px; }
details.plain { border: 0; background: none; margin: -8px 0 var(--s3); }
details.plain > summary { padding-left: 0; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
details.plain[open] > summary { border-bottom: 0; }
details.plain > p { margin: 0 0 var(--s2) 22px; }

/* ---- 11. disclosure, prose (md), code */
details { border: 1px solid var(--border); border-radius: var(--r-card); margin: 0 0 var(--s4); background: var(--sheet); }
summary { cursor: pointer; padding: 0 var(--s4); min-height: 40px; font-weight: 500; color: var(--text);
  list-style: none; display: flex; align-items: center; gap: 10px; border-radius: var(--r-card);
  transition: background-color var(--t-fast) ease; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 6px; height: 6px; flex: none; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform var(--t) var(--ease-out); }
details[open] > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
details[open] > summary { border-bottom: 1px solid var(--rule); border-radius: var(--r-card) var(--r-card) 0 0; }
@media (hover: hover) and (pointer: fine) { summary:hover { background: var(--hover); } }
td details { border: 0; background: none; margin: 0; }
td details > summary { min-height: 28px; padding: 0 6px 0 0; border-radius: var(--r-chip); font-weight: 500; }
td details[open] > summary { border-bottom: 0; }
td details > ul { padding: var(--s1) 0 var(--s1) 18px; }
details > .md { padding: 0 var(--s5) var(--s3); }
details > .tablewrap { border: 0; border-radius: 0 0 var(--r-card) var(--r-card); margin: 0; }
details > ul { margin: 0; padding: var(--s3) var(--s5) var(--s3) 36px; }
details > pre.prompt { border-radius: 0 0 var(--r-card) var(--r-card); }

.md { color: var(--text); line-height: 24px; font-size: var(--fs-md); }
.md > p, .md > ul, .md > ol, .md > h2, .md > h3, .md > h4, .md > h5 { max-width: 80ch; }
.md p, .md li { overflow-wrap: anywhere; }
.md p { margin: 0 0 var(--s3); }
.md h2, .md h3, .md h4, .md h5 { color: var(--text); margin: var(--s6) 0 var(--s2); font-size: var(--fs-md); line-height: 22px; font-weight: 600; }
.md h2 { font-size: 18px; line-height: 26px; letter-spacing: -.01em; }
.md h3 { font-size: var(--fs-lg); }
.md > :first-child { margin-top: var(--s4); }
.md ul, .md ol { padding-left: 22px; margin: 0 0 var(--s3); } .md li { margin: 4px 0; } .md li::marker { color: var(--faint); }
.md strong { font-weight: 600; }
.md code, td code { font-size: 12.5px; background: var(--raised); border-radius: var(--r-chip); padding: 1px 4px; overflow-wrap: anywhere; }
.md pre { background: var(--raised); padding: var(--s3) var(--s4); border-radius: var(--r-card); overflow-x: auto;
  line-height: 20px; margin: 0 0 var(--s4); }
.md pre code { background: none; padding: 0; font-size: 12.5px; overflow-wrap: normal; }
.md a { overflow-wrap: anywhere; }
.md .md-table { margin: var(--s3) 0 var(--s5); }
.md .md-table td, .md .md-table th { vertical-align: top; min-width: 14ch; line-height: 20px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.md .md-table td { color: var(--text-2); overflow-wrap: anywhere; }
.md .md-table td:first-child { min-width: 10ch; color: var(--text); }
.md .md-table th { position: static; white-space: normal; }
.md .md-table .badge { margin: 0 6px 2px 0; }
article.md { max-width: none; padding-bottom: var(--s3); }
article.md > :first-child { margin-top: 0; }

.codeblock { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--raised); margin: 0 0 var(--s4); }
.codeblock-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); background: var(--sheet); }
.codeblock-h b { font-family: var(--mono); font-weight: 500; color: var(--text); }
pre.prompt { margin: 0; padding: var(--s4); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--raised);
  font-size: 12.5px; line-height: 20px; color: var(--text); max-height: 560px; overflow-y: auto; }
pre.prompt code { user-select: all; -webkit-user-select: all; }
textarea.fixprompt { width: 100%; height: auto; min-height: 320px; padding: var(--s3) var(--s4); font: 12.5px/20px var(--mono);
  resize: vertical; }

/* ---- 12. lists, empty states */
ul.list { list-style: none; margin: 0 0 var(--s4); padding: 0; border: 1px solid var(--border); border-radius: var(--r-card); }
ul.list li { padding: 10px var(--s4); border-top: 1px solid var(--rule); overflow-wrap: anywhere; color: var(--text-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
ul.list li:first-child { border-top: 0; }
ul.list li a { font-weight: 500; }
ul.list.log li { font-family: var(--mono); font-size: var(--fs-xs); line-height: 18px; padding: 6px var(--s4); display: block; }
ul.list li.empty-li, .empty-li { color: var(--muted); }
.empty { color: var(--muted); overflow-wrap: anywhere; padding: var(--s4); border: 1px dashed var(--control); border-radius: var(--r-card); margin: 0 0 var(--s4); }
.empty b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
ol.steps { margin: 0 0 var(--s4); padding-left: 20px; color: var(--text-2); line-height: 24px; max-width: 90ch; }
ol.steps code { overflow-wrap: anywhere; }
.hostlist { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s3); }
.hostpick, label.check { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--text); min-height: 32px; }

/* ---- 13. admin grid (the sign-in card and the signed-out frame are in auth.css) */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); }
.grid2 > div { min-width: 0; }
/* ---- 14. responsive */
@media (max-width: 1180px) {
  .grid-main, .split { grid-template-columns: minmax(0, 1fr); }
  .split > .rail { position: static; }
  .split.doc { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .split.doc > .rail { order: -1; }
  .split.doc ol.toc, .split.doc .rail h2 + ol.toc, .split.doc .rail h2:nth-of-type(2) { display: none; }
}
@media (max-width: 900px) {
  :root { --pad: 16px; --gap: 16px; }
  body { background: var(--sheet); }
  .shell { display: block; }
  .content { padding: 0; }
  .sheet { border: 0; border-radius: 0; }
  main { padding: var(--s4) var(--pad) var(--s6); }
  footer { padding: 0 var(--pad) var(--s4); }
  .mbar { display: flex; position: sticky; top: 0; z-index: 20; height: 48px; align-items: center; gap: var(--s2);
    padding: 0 var(--s2) 0 var(--s4); background: var(--frame); border-bottom: 1px solid var(--border); }
  .mbar .brand { padding: 0; font-size: 15px; min-width: 40px; min-height: 40px; justify-content: center; }
  .mbar .brand svg { width: 24px; height: 24px; }
  .mbar .here { color: var(--muted); font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbar .menu { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
    border-radius: var(--r-control); color: var(--text); font-weight: 500; }
  .mbar .menu:hover { text-decoration: none; background: var(--active); }
  /* the sidebar becomes a full-height sheet opened by :target (#nav), no JavaScript */
  .side { position: fixed; inset: 0 0 0 auto; z-index: 30; width: min(320px, 86vw); height: 100%; background: var(--frame);
    box-shadow: var(--shadow-float); padding: var(--s3) var(--s3) var(--s4); visibility: hidden;
    transform: translateX(100%); transition: transform var(--t-sheet) var(--ease-out), visibility 0s linear var(--t-sheet); }
  .side:target { visibility: visible; transform: none; transition: transform var(--t-sheet) var(--ease-out), visibility 0s; }
  .side .brand { padding: 6px 8px var(--s4); }
  .side .close { display: inline-flex; position: absolute; top: 12px; right: 12px; height: 36px; align-items: center;
    padding: 0 12px; border-radius: var(--r-control); color: var(--text); font-weight: 500; }
  .side .close:hover { text-decoration: none; background: var(--active); }
  nav.main a, nav.main summary { min-height: 44px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  h1 { font-size: 20px; line-height: 26px; }
  h2 { margin-top: var(--s5); }
  .phead { margin-bottom: var(--s4); }
  .scanctl { width: 100%; justify-content: space-between; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--s3); }
  .stat .big { font-size: 24px; line-height: 30px; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  svg.chart.lg { display: none; } svg.chart.sm { display: block; }
  .chartwrap { padding: var(--s2) var(--s2) var(--s3); }
  td { white-space: nowrap; }
  td.summary, td.wrap, .md-table td { white-space: normal; }
  td.summary { min-width: 260px; }
  td.wrap { min-width: 220px; }
  .trunc, .trunc.w-md, .trunc.w-lg { max-width: 26ch; }
  svg.bar { width: 64px; }
  .c7, th.wide, td.wide { display: none; }
  table.svc td:first-child { min-width: 180px; max-width: 200px; white-space: normal; }
  .consumers { grid-template-columns: minmax(0, 1fr); }
  ul.share svg.bar { width: 120px; }
  .vmctl { justify-content: flex-start; }
  .filters { gap: var(--s2); }
  .filters label { flex: 1 1 140px; } .filters select { width: 100%; }
  .filters .meta { margin-left: 0; flex-basis: 100%; }
  .actionbar input[type=text] { min-width: 0; width: 100%; }
  .actionbar form.inline { flex-wrap: wrap; width: 100%; }
  /* touch targets: every control 40px on phones (DESIGN.md §3.6) */
  button, .btn, button.small, .btn.small, a.tasklink, select, input[type=text], input[type=number], input[type=password],
  input[type=url], input:not([type]) { height: 40px; }
  button.icon { width: 40px; height: 40px; }
  .seg button { width: 44px; height: 40px; }
  .chips a.tag { height: 40px; padding: 0 12px; }
  .crumb a { min-height: 40px; margin: -10px 0; }
  /* small links: a transparent 10px border or padding makes a 40px hit area */
  a.tag { height: 40px; border-block: 10px solid transparent; background-clip: padding-box; margin-block: -10px; }
  .chips a.tag { border: 0; margin-block: 0; }
  a.go, .filters .meta a { display: inline-flex; align-items: center; min-height: 40px; }
  .rows a.t, :is(dl.kv dd, .ev-h, .phead .sub, .banner, .empty) a:not(.tag, .tasklink, .btn) { padding-block: 10px; margin-block: -10px; }
  .rows .m a:not(.tag, .btn) { padding-block: 12px; margin-block: -12px; } /* 16px meta links: a 40px hit area */
  .hostpick, label.check { min-height: 40px; }
  .rows > li { padding: var(--s3); }
  dl.kv { grid-template-columns: minmax(0, 1fr); }
  dl.kv dd { border-top: 0; padding-top: 0; }
  .md .md-table td, .md .md-table th { min-width: 18ch; }
  .tablewrap.tall td:first-child { white-space: normal; max-width: 150px; overflow-wrap: break-word; }
  .tablewrap.tall:not(.dense) td.nw:first-child { white-space: nowrap; max-width: none; } /* a timestamp never breaks */
  .split.doc dl.kv { grid-template-columns: max-content minmax(0, 1fr); }
  .split.doc dl.kv dd { border-top: 1px solid var(--rule); padding-top: 7px; }
  .split.doc dl.kv > :nth-child(-n+2) { border-top: 0; }
  .md .md-table td:first-child { min-width: 12ch; }
  /* form tables: one stacked row per setting */
  .tbl-stack thead { display: none; }
  .tbl-stack, .tbl-stack tbody { display: block; }
  .tbl-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rule); }
  .tbl-stack tr:last-child { border-bottom: 0; }
  .tbl-stack td, .tbl-stack td:first-child, .tbl-stack td:last-child { display: block; height: auto; padding: 0; border: 0;
    width: auto; min-width: 0; max-width: none; white-space: normal; text-align: left; }
  .tbl-stack td:first-child { flex-basis: 100%; color: var(--text); overflow-wrap: anywhere; }
  .tbl-stack.flow td:first-child { flex-basis: auto; }
  .tbl-stack td:empty, .tbl-stack td.wide { display: none; }
  .tbl-stack td.id { flex: 1 1 60%; color: var(--text); overflow-wrap: anywhere; } /* the rest of line 1 */
  .tbl-stack td.summary { order: 1; flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--fs-sm); color: var(--text-2); }
  .tbl-stack tr:has(> td.summary) > td.num { order: 2; }
  .tbl-stack td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: var(--fs-xs); margin-right: var(--s2); }
  .tbl-stack td.range { margin-left: auto; }
  @media (hover: hover) and (pointer: fine) { .tbl-stack tbody tr:hover td { background: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: color, background-color, border-color, opacity !important; }
  button:active:not(:disabled), .btn:active { transform: none; }
  .scan-btn.busy .i { animation: none; }
  .side, .side:target { transform: none; }
}

/* ---- 15. task board: shared bits (the board itself is in board.css) */
.kc-empty .small { display: block; margin-top: 4px; }
.kres b { color: var(--text); }
details.task-ev { margin: 0 0 var(--s4); }
details.task-ev > .codeblock { margin: 0; border: 0; }
.failc { color: var(--fail); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn .i { width: 15px; height: 15px; }
a.tasklink { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: var(--r-control);
  background: var(--neutral-bg); color: var(--text); font-size: var(--fs-xs); font-weight: 500; }
a.tasklink .i { width: 14px; height: 14px; color: var(--brand); }
a.tasklink:hover { text-decoration: none; background: var(--active); }
ul.list.props li .grow { flex: 1; min-width: 0; }
/* mixed Persian / Latin titles take their own direction */
a.kc-t, .task-desc p, .phead h1, .st-t, .cm-b { unicode-bidi: plaintext; text-align: start; }
.taskform textarea { width: 100%; height: auto; padding: var(--s2) 10px; resize: vertical; line-height: 20px; }
/* create form */
.taskform { display: flex; flex-direction: column; gap: var(--s4); max-width: 1000px; }
.taskform label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.taskform label .dim { font-weight: 400; }
.tf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.tf-row select, .tf-row input { width: 100%; }
.tf-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
textarea.mono-area { font: 12.5px/20px var(--mono); }
@media (max-width: 900px) {
  .tf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tf-row, .tf-row.two { grid-template-columns: minmax(0, 1fr); }
}
/* ---- 20. shared by Backups and the other pages (the rest is in backup.css) */
.rail h3 { font-size: var(--fs-sm); margin: var(--s4) 0 var(--s2); }
.rail h3 .dim { font-weight: 400; }
.grid-main + .grid-main, .grid-main + section.panel { margin-top: var(--gap); }
@media (max-width: 640px) {
  a.tasklink { height: 40px; }
  .actionbar form.mv.inline { flex: 1 1 100%; }
  .actionbar form.mv.inline select { flex: 1; min-width: 0; }
  .actionbar > form.inline:not(.mv), .actionbar > a.btn { flex: 1 1 0; }
  .actionbar > form.inline:not(.mv) button, .actionbar > a.btn { width: 100%; }
  /* incidents: identity on its own line, then #, status, severity, env, source */
  table.inc td.inc-t { order: -1; flex-basis: 100%; font-size: 15px; line-height: 20px; font-weight: 500; }
  table.inc td.inc-x { display: none; }
}

/* VM search (vm_search.py) */
mark{background:var(--select);color:inherit;border-radius:2px}
.vmsearch label{flex:0 1 420px}.vmsearch input{width:100%}
form.vmfind{margin:0 2px var(--s3)}form.vmfind input{width:100%}
details.fsx{margin:4px 0 0}details.fsx>summary{min-height:24px;font-size:var(--fs-xs)}
table.fsx td,table.fsx th{height:24px;padding:2px 12px 2px 0;font-size:var(--fs-xs);position:static}
/* board card plan (ADR-0013 P1); here for the board.css budget */
.kc-agent { display: flex; flex-direction: column; gap: 4px; padding-top: var(--s2); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted); }
.kc-plan { margin: 0; color: var(--text); line-height: 18px; overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
ul.kc-writes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.ag-spin { margin-top: var(--s3); }