/* Kennel UI chassis — the ported SUBSET of the old app's Fjord design system
   (watchdog.canine.dev saas/Watchdog.Api/wwwroot/app.css). No new design language: tokens, rail,
   cards, tabs, page-head, dialogs, band vars, cai-ladder and the light/dark themes are copied;
   only the dev-auth banner and the chassis auth cards are new rules. theme.js flips data-theme
   before first paint. Served as RCL static web assets (_content/Kennel.Ui/app.css). */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}
:root {
  /* neutrals — dark "graphite" */
  --bg:#15191E; --surface:#1C2127; --surface-2:#232A31;
  --border:#2D353E; --border-strong:#3A444F;
  --ink:#E4E9ED; --ink-soft:#B9C2CB; --muted:#8694A1; --heading:#F2F5F8;
  /* steel */
  --accent:#7FAACE; --accent-ink:#9BBEDB; --accent-wash:#1E2C39; --accent-strong:#B7D2E8;
  --on-accent:#15191E;
  /* bands: strong / wash / on-wash */
  --band-exemplary:#4D9B74; --band-exemplary-wash:#16352A; --band-exemplary-ink:#A9D9C2;
  --band-healthy:#6FAE85;  --band-healthy-wash:#1A3326;  --band-healthy-ink:#B5DCC4;
  --band-fair:#CFA53C;     --band-fair-wash:#393012;     --band-fair-ink:#E8D49A;
  --band-poor:#CF7858;     --band-poor-wash:#3A2118;     --band-poor-ink:#EFC4B4;
  --band-critical:#D86A60; --band-critical-wash:#3A1A18; --band-critical-ink:#F0BFBA;
  --band-exemplary-solid-ink:#14181D; --band-healthy-solid-ink:#14181D; --band-fair-solid-ink:#14181D;
  --band-poor-solid-ink:#14181D; --band-critical-solid-ink:#14181D;
  /* band TEXT tokens — colour for band-keyed numerals/labels; dark = saturated (already AA on dark) */
  --band-exemplary-text:#4D9B74; --band-healthy-text:#6FAE85; --band-fair-text:#CFA53C; --band-poor-text:#CF7858; --band-critical-text:#D86A60;
  /* CAI ladder marker: THEME-FIXED dark ink + explicit white casing — defined once on :root and
     NOT overridden in the light theme, so the dark-badge-on-white-ring premise holds in BOTH themes. */
  --mk:#1C2522; --mk-on:#FFFFFF;
  /* shape & depth */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;
  --shadow-overlay:0 4px 16px rgb(0 0 0 / .35);
  --shadow-modal:0 16px 48px rgb(0 0 0 / .5);
  /* type */
  --font-ui:"Schibsted Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:25px; --fs-3xl:31px; --fs-4xl:39px; --fs-num:56px;
  --control-h:36px; --control-pad-y:8px; --control-pad-x:10px;
  /* spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  /* legacy aliases (kept so ported component rules recolour from this block alone) */
  --panel: var(--surface); --text: var(--ink); --text-soft: var(--ink-soft);
  color-scheme: dark;
}
:root[data-theme="light"] {
  /* neutrals — light "paper" */
  --bg:#FCFCFD; --surface:#F5F7F9; --surface-2:#EDF0F3;
  --border:#E1E6EB; --border-strong:#CBD3DA;
  --ink:#1C2126; --ink-soft:#434B54; --muted:#616B76; --heading:#14181D;
  --accent:#4682B4; --accent-ink:#2F5D85; --accent-wash:#EAF1F7; --accent-strong:#264B6B;
  --on-accent:#FFFFFF;
  --band-exemplary:#1E6B47; --band-exemplary-wash:#DCEDE4; --band-exemplary-ink:#0E2A1C;
  --band-healthy:#55966B;  --band-healthy-wash:#E2F0E7;  --band-healthy-ink:#16331F;
  --band-fair:#B58A1F;     --band-fair-wash:#F6ECD4;     --band-fair-ink:#3D2E08;
  --band-poor:#B5563A;     --band-poor-wash:#F6E0D7;     --band-poor-ink:#3E1D11;
  --band-critical:#AD3A34; --band-critical-wash:#F5DAD7; --band-critical-ink:#3A1210;
  --band-exemplary-solid-ink:#FCFCFD; --band-healthy-solid-ink:#14181D; --band-fair-solid-ink:#14181D;
  --band-poor-solid-ink:#FCFCFD; --band-critical-solid-ink:#FCFCFD;
  /* band TEXT tokens — darkened so band-keyed numerals clear WCAG AA on light surfaces */
  --band-exemplary-text:#1E6B47; --band-healthy-text:#2E6A43; --band-fair-text:#806012; --band-poor-text:#984530; --band-critical-text:#AD3A34;
  --shadow-overlay:0 4px 16px rgb(20 25 30 / .10);
  --shadow-modal:0 16px 48px rgb(20 25 30 / .16);
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-md)/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); font: 500 var(--fs-xs) var(--font-mono); }
.num, td.num, .t-num { font-variant-numeric: tabular-nums lining-nums; }
/* Icons: Lucide via the inlined sprite. Stroke inherits text colour; never filled. */
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-48 { width: 48px; height: 48px; stroke-width: 1.5; }
/* The Canine badge symbol is a filled mark, not a stroked glyph. */
.icon.icon-badge { fill: currentColor; stroke: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* Brand lockup — badge spanning two rows, product name top-right, byline beneath. */
.brand {
  position: relative;
  display: inline-grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.brand a, .brand .brand-mark, .brand .brand-text { color: inherit; text-decoration: none; }
.brand .brand-mark { grid-row: 1 / 3; display: inline-flex; align-items: center; color: var(--heading); }
.brand .brand-mark .icon { width: 24px; height: 27px; }
.brand .brand-text { grid-column: 2; grid-row: 1; line-height: 1.05; align-self: end; }
.brand .byline { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.6rem; font-weight: 400; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.brand a:hover { opacity: .8; }

/* Ghost-loading skeletons. */
@keyframes wd-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skel { background: linear-gradient(90deg, var(--border) 0px, var(--surface-2) 80px, var(--border) 160px); background-size: 400px 100%; animation: wd-shimmer 1.2s linear infinite; border-radius: var(--r-sm); display: inline-block; }
.skel-line { height: 14px; width: 100%; margin: 6px 0; }
.skel-line.short { width: 40%; }
.skel-box { height: 60px; width: 100%; margin: 8px 0; border-radius: var(--r-sm); }

/* ── Buttons — the ONE system. btn = secondary (outline) by default. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 var(--fs-md)/1.2 var(--font-ui); color: var(--ink);
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 8px 14px; cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }
.btn-danger { border-color: var(--band-critical); color: var(--band-critical); background: transparent; }
.btn-danger:hover { background: var(--band-critical-wash); }
.btn-link { border-color: transparent; background: transparent; color: var(--muted); padding: 2px 4px; font-size: var(--fs-sm); }
.btn-link:hover { color: var(--ink); background: transparent; text-decoration: underline; }
.btn-sm, .btn.sm { padding: 6px 10px; font-size: var(--fs-sm); }
.btn-lg { padding: 12px 20px; font-size: var(--fs-lg); }
.btn-block { display: flex; width: 100%; text-align: center; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.row-actions { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.row-actions form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.theme-toggle { padding: 6px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Chips — the ONE system + band/ink/fill utilities. ── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  border-radius: var(--r-full); padding: 2px 10px; white-space: nowrap;
}
.chip-neutral { background: var(--surface-2); color: var(--muted); }
.band-exemplary { background: var(--band-exemplary-wash); color: var(--band-exemplary-ink); }
.band-healthy   { background: var(--band-healthy-wash);   color: var(--band-healthy-ink); }
.band-fair      { background: var(--band-fair-wash);      color: var(--band-fair-ink); }
.band-poor      { background: var(--band-poor-wash);      color: var(--band-poor-ink); }
.band-critical  { background: var(--band-critical-wash);  color: var(--band-critical-ink); }
.band-neutral   { background: var(--surface-2);           color: var(--muted); }
.chip-solid.band-exemplary, .band-bar.band-exemplary { background: var(--band-exemplary); color: var(--band-exemplary-solid-ink); }
.chip-solid.band-healthy,   .band-bar.band-healthy   { background: var(--band-healthy);   color: var(--band-healthy-solid-ink); }
.chip-solid.band-fair,      .band-bar.band-fair      { background: var(--band-fair);      color: var(--band-fair-solid-ink); }
.chip-solid.band-poor,      .band-bar.band-poor      { background: var(--band-poor);      color: var(--band-poor-solid-ink); }
.chip-solid.band-critical,  .band-bar.band-critical  { background: var(--band-critical);  color: var(--band-critical-solid-ink); }
.ink-exemplary { color: var(--band-exemplary-text); } .ink-healthy { color: var(--band-healthy-text); }
.ink-fair { color: var(--band-fair-text); } .ink-poor { color: var(--band-poor-text); } .ink-critical { color: var(--band-critical-text); }
.ink-neutral { color: var(--muted); } .ink-accent { color: var(--accent-ink); }
.fill-exemplary { background: var(--band-exemplary); } .fill-healthy { background: var(--band-healthy); }
.fill-fair { background: var(--band-fair); } .fill-poor { background: var(--band-poor); }
.fill-critical { background: var(--band-critical); } .fill-accent { background: var(--accent); }

/* ── CAI band ladder + "you are here" marker (old .cai-ladder, verbatim) ──────────────────────────
   A fixed worst→best rail of the five band colours; position on the rail IS the reading. The
   diamond is the compact card marker; the Score pin is the full variant. */
.cai-ladder { --mk-foot: 9px; margin: 6px 0 2px; }
.cai-rail { position: relative; height: 11px; overflow: visible; }
.cai-segs { display: flex; height: 11px; border-radius: 6px; overflow: hidden; }
.cai-segs > i { flex: 1; display: block; }
.cai-segs > i.seg-critical  { background: var(--band-critical); }
.cai-segs > i.seg-poor      { background: var(--band-poor); }
.cai-segs > i.seg-fair      { background: var(--band-fair); }
.cai-segs > i.seg-healthy   { background: var(--band-healthy); }
.cai-segs > i.seg-exemplary { background: var(--band-exemplary); }
.cai-caps { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--muted); margin-top: 9px; }
.cai-mk { position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none; color: var(--mk); }
/* Score pin — diamond on the rail, drop-line, score badge above; all white-cased */
.cai-pin .cai-pin-foot {
  position: absolute; top: 50%; left: 0; width: var(--mk-foot); height: var(--mk-foot);
  transform: translate(-50%, -50%) rotate(45deg); background: var(--mk); box-shadow: 0 0 0 2px var(--mk-on);
}
.cai-pin .cai-pin-line {
  position: absolute; bottom: 50%; left: 0; width: 3px; height: 12px; transform: translateX(-50%);
  background: var(--mk); border-radius: 2px 2px 0 0; box-shadow: 0 0 0 1.5px var(--mk-on);
}
.cai-pin .cai-pin-badge {
  position: absolute; bottom: calc(50% + 12px); left: 0; transform: translateX(-50%);
  min-width: 25px; height: 22px; padding: 0 7px; display: flex; align-items: center; justify-content: center;
  background: var(--mk); color: var(--mk-on); font: 700 13px/1 var(--font-ui); border-radius: 6px; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--mk-on), 0 2px 5px rgb(20 40 30 / .3);
}
.cai-pin .cai-pin-badge::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--mk);
}
/* White diamond (cards) — filled with the SCORE's band colour (--dia) + white outline. */
.cai-diamond .cai-diamond-foot {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--dia, var(--mk-on)); border: 2.5px solid var(--mk-on);
  border-radius: 2px; box-shadow: 0 1px 4px rgb(15 25 20 / .45);
}
.cai-diamond::before {
  content: ""; position: absolute; left: 0; bottom: calc(50% + 6px); width: 2px; height: 10px;
  transform: translateX(-50%); background: var(--dia, var(--mk)); border-radius: 1px 1px 0 0;
  box-shadow: 0 0 0 1px var(--mk-on);
}
.cai-ladder.compact .cai-caps { display: none; }
.wd-card .cai-ladder { margin: 16px 0 16px; }
.wd-card .cai-ladder + .hd-spark { margin-top: 0; }

/* Visually-hidden utility (screen-reader only) — e.g. the sparkline trend summary. */
.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;
}

/* a11y hardening: forced-colors + prefers-contrast fall back to system tokens. */
@media (prefers-contrast: more) {
  .cai-pin .cai-pin-foot, .cai-pin .cai-pin-line, .cai-pin .cai-pin-badge { box-shadow: 0 0 0 2px var(--mk-on); }
}
@media (forced-colors: active) {
  .cai-segs > i { forced-color-adjust: none; }
  .cai-pin .cai-pin-foot, .cai-pin .cai-pin-line, .cai-pin .cai-pin-badge { background: CanvasText; color: Canvas; box-shadow: 0 0 0 2px Canvas; }
  .cai-pin .cai-pin-badge::after { border-top-color: CanvasText; }
}

/* ── In-house confirm/alert dialog (kennel-ui.js provides KennelDialog). ── */
dialog.wd-dialog {
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-modal); padding: 20px;
  max-width: min(440px, 90vw); font: 400 var(--fs-md)/1.5 var(--font-ui);
}
dialog.wd-dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog.wd-dialog .wd-dialog-msg { margin: 0 0 16px; white-space: pre-line; }
dialog.wd-dialog .wd-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }

main { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* Breadcrumb-as-heading: the crumb's active segment IS the page title. */
.crumbs { max-width: 1280px; margin: 0 auto; padding: 14px 24px 0; font-size: 13px; color: var(--muted);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs .sep { margin: 0 8px; opacity: .5; }
.crumbs .here { font-size: 1.45rem; font-weight: 650; color: var(--heading); letter-spacing: -0.01em; }

/* Shared empty / zero-data state (EmptyState.razor). */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 40px 24px; max-width: 440px; margin: 24px auto; }
.empty-state-icon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5;
  color: var(--muted); opacity: .7; }
.empty-state-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.empty-state-desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.empty-state-desc a { color: var(--accent-strong); }
.empty-state-action { margin-top: 6px; }
.empty-state-bordered { border: 1px dashed color-mix(in srgb, var(--border), var(--text) 18%); border-radius: var(--r-md); background: var(--panel); }
h1 { font-size: 22px; margin: 8px 0 20px; }
h2 { font-size: 16px; margin: 32px 0 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }

/* ── Cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; color: var(--text);
}
a.card:hover { border-color: var(--accent); text-decoration: none; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .repo { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.card .repo strong { color: var(--text); }

/* ---- shared repo card (ScoreCard.razor): the hero-demo anatomy on every surface ---- */
.wd-card .hd-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wd-card .hd-name { min-width: 0; line-height: 1.25; color: var(--text); }
.wd-card .hd-name .repo-name { display: block; font-weight: 600; font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-card .hd-name .owner { display: block; color: var(--muted); font-weight: 400; font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-card .hd-scoreline { margin-top: 4px; }
.wd-card .hd-score { font-size: var(--fs-num); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.wd-card .hd-unit { font-size: var(--fs-lg); color: var(--muted); font-weight: 400; }
.wd-card .hd-bar { height: 6px; border-radius: var(--r-full); margin: 10px 0 12px; }
.wd-card .hd-spark { width: 100%; min-height: 34px; display: block; margin: 2px 0 6px; }
.wd-card .hd-rows { margin-top: 6px; }
.wd-card .hd-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 6px 0; border-bottom: 1px solid var(--border); }
.wd-card .hd-row:last-child { border-bottom: 0; }
.wd-card .hd-row .num { font-weight: 600; }
.wd-card .hd-meta { margin-top: 8px; }
.wd-card .hd-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Server-side SVG sparkline (Sparkline.razor) — replaces the old uPlot canvas stack. */
.hd-spark svg { display: block; width: 100%; height: 100%; }

/* ── Repo wall (W1) — the full card + wall anatomy ported from old-SaaS app.css verbatim ────────── */
/* Card economics row: asset value + bus factor. */
.wd-card .card-econ { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* Urgency action-flags — critical-toned (regression, CVE, secrets, build broken). */
.wd-card .alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wd-card .alert { font-size: 11px; color: var(--band-critical-text); border: 1px solid var(--band-critical);
  border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap; }

/* OSS card wrapper + discrete corner "remove from your wall" control. */
.oss-card { position: relative; display: block; }
.oss-card .wd-card-link { width: 100%; }
.oss-remove {
  position: absolute; top: -8px; right: -8px; z-index: 3;
  width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.oss-card:hover .oss-remove, .oss-card:focus-within .oss-remove, .oss-remove:focus { opacity: 1; }
.oss-remove:hover { color: var(--band-critical-text); border-color: var(--band-critical); }

/* Live filter: search box + toggleable alert-tag chips. */
.repo-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.repo-search { flex: 1 1 260px; max-width: 420px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--bg); color: var(--text); font: inherit; }
.repo-search:focus { outline: none; border-color: var(--accent); }
.repo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.repo-tag { cursor: pointer; border: 1px solid var(--border); background: var(--panel); color: var(--muted); }
.repo-tag.on { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); }

/* Estate-synthesis header: the owned-portfolio €-verdict on the wall (target D4). */
.estate-synthesis { margin-bottom: 16px; }
.estate-synthesis .estate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.estate-synthesis .estate-head h2 { margin: 0; border: 0; padding: 0; }
.estate-synthesis .estate-cai { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-lg); }
.estate-synthesis .estate-stats { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: var(--fs-sm); }

/* Modals + page header. */
dialog.wd-modal { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); padding: 22px 24px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
dialog.wd-modal.wd-modal-wide { max-width: 560px; }
.page-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.page-head h1 { margin: 0; }
.page-head .ph-title h1 { margin: 0; }
.page-head .ph-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; max-width: 70ch; }
.page-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dialog-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dialog-form h3 { margin: 0; }
.dialog-form input, .dialog-form select, .dialog-form textarea { width: 100%; }
.dialog-form > label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: var(--fs-sm); }
.dialog-form .form-label { color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--muted); }

/* Stacked settings sections + label-above-control form fields. */
.settings-section { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 16px; }
.settings-section h2 { margin: 0 0 4px; }
.settings-section h3 { margin: 18px 0 4px; font-size: var(--fs-md); }
.settings-subsection { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; }
.settings-subsection:first-of-type { border-top: none; margin-top: 4px; padding-top: 0; }
.msg-banner { margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 14px 0; }
.form-group > label { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.has-rail main .form-group > input:not([type=checkbox]), .has-rail main .form-group > select, .has-rail main .form-group > textarea { width: 100%; max-width: 480px; }
.form-group.chk { flex-direction: row; align-items: center; gap: 8px; }

/* WP-3 provider repo picker: the connected-account repo list on the track page. */
.picker-search-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 6px 0 14px; color: var(--muted); font-size: var(--fs-sm); }
.picker-search-label .form-label { color: var(--text); }
.picker-search-label .repo-search { flex: 0 0 auto; width: 100%; max-width: 420px; }
.picker-table { width: 100%; }
.picker-table td, .picker-table th { vertical-align: middle; }
.picker-track-form { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: 0; }
.picker-track-form select { max-width: 220px; }
.manual-add-fallback { }
.manual-add-fallback > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.manual-add-fallback[open] > summary { margin-bottom: 12px; color: var(--text); }
.form-group.chk > input[type=checkbox] { flex: none; width: auto; }
.form-group.chk > label { color: var(--text); }
input, select, textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--control-pad-y) var(--control-pad-x); font: inherit;
}

/* sec-head: H2 + trailing meta; the rule between a page's acts. */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 12px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; }
.sec-head .meta { color: var(--muted); font-size: var(--fs-xs); }
.rule { height: 1px; background: var(--border); margin: 26px 0; border: 0; }

/* Tables (shared minimal treatment). */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
th { color: var(--muted); font-weight: 600; }

/* Inline progress spinner. */
.spin {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
  border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
  animation: wd-spin .8s linear infinite;
}
@keyframes wd-spin { to { transform: rotate(360deg); } }

/* ── wd-tabs: the shared tab bar (TabBar.razor). ── */
.wd-tabs {
  display: flex; gap: 2px; align-items: flex-end;
  border-bottom: 1px solid var(--border);
  margin: 22px 0 18px;
}
.wd-tab {
  appearance: none; background: none; border: none; font: inherit;
  padding: 10px 14px 9px; margin-bottom: -1px;
  color: var(--muted); font-weight: 500; font-size: var(--fs-md);
  border-bottom: 2px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.wd-tab:hover { color: var(--text); background: var(--surface); }
.wd-tab[aria-selected="true"], .wd-tab.active {
  color: var(--heading); font-weight: 600;
  border-bottom-color: var(--accent);
}
.wd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wd-tab-badge { color: var(--accent-ink); font-weight: 600; }
.tab-panel[hidden] { display: none; }
/* Repo sibling-nav: anchor tabs on the hub + every repo sub-page; artifact tabs after a faint rule.
   W18: the 12-tab bar wrapped to two ragged rows around 1280px and was hard to scan. Keep it on ONE
   line and let it scroll horizontally when it doesn't fit, rather than wrapping — a single scannable
   row at any width. The scrollbar is thin and only appears when needed. */
.repo-nav {
  flex-wrap: nowrap; margin-top: 4px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.repo-nav::-webkit-scrollbar { height: 6px; }
.repo-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.repo-nav .wd-tab { flex: none; }
.repo-nav-sep { align-self: center; flex: none; width: 1px; height: 18px; background: var(--border); margin: 0 8px -1px; }
.repo-nav .wd-tab.artifact-tab { color: var(--ink-soft); }

/* Report/artifact frame (sandboxed iframe hosts reuse). W21: min/max-height + inner scroll so a short
   report doesn't leave a tall blank band and a long one still fits — the iframe body scrolls. */
.artifact-frame-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.artifact-frame { display: block; width: 100%; height: 78vh; min-height: 320px; max-height: 78vh; border: 0; }

/* W7: copy-paste command/config blocks (agent hub MCP wiring). Long single-line commands must WRAP
   rather than force a page-wide horizontal scroll; a scroll bar inside the block is the fallback. */
pre.copy {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  max-width: 100%; overflow-x: auto; margin: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
}

/* W4/W5: the repo-hub "Produce evidence" header — the delivery explainer + primary Run-a-scan action. */
.repo-run-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.repo-run-head-row .hd-actions { flex: none; }

/* W17: the raw cd_… delivery id as a truncated copy-chip — full value in the title + a Copy button. */
.delivery-id-cell { display: flex; align-items: center; gap: 6px; }
.copy-chip { display: inline-block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ── Icon side rail: always-visible left navigation for signed-in pages. ── */
.side-rail {
  position: fixed; inset: 0 auto 0 0; width: 212px; z-index: 40;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px; background: var(--panel); border-right: 1px solid var(--border);
  overflow-y: auto;
}
.rail-brand {
  padding: 4px 10px 14px; text-decoration: none; font-size: 17px;
}
.rail-brand .icon-badge { width: 22px; height: 25px; flex: none; }
.rail-brand:hover { opacity: .85; text-decoration: none; }
.rail-group { margin-top: 10px; }
.rail-label {
  padding: 0 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted); opacity: .75;
}
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%; position: relative;
  padding: 8px 10px; border-radius: var(--r-sm); border: none; background: none; font: inherit;
  color: var(--muted); text-decoration: none; font-size: var(--fs-md); font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.rail-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; flex: none;
  background: var(--band-critical); color: #fff; font-size: 11px; font-weight: 700;
}
.rail-item .icon { width: 17px; height: 17px; flex: none; }
.rail-item:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.rail-item.on {
  color: var(--accent-strong); background: var(--accent-wash); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.rail-user { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.rail-user .rail-item { flex: 1 1 auto; width: auto; min-width: 0; }
.rail-user .rail-item .rail-text { overflow: hidden; text-overflow: ellipsis; }
.rail-gear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; background: none; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; }
.rail-gear:hover { color: var(--text); background: var(--surface-2); }
.rail-gear .icon { width: 16px; height: 16px; }

/* Content shifts right when the rail is present. */
body.has-rail { padding-left: 212px; }

@media (max-width: 980px) {
  .side-rail { width: 58px; padding: 14px 7px; }
  .side-rail .rail-text, .side-rail .rail-label { display: none; }
  .rail-brand { justify-content: center; padding: 4px 0 14px; }
  .rail-item { justify-content: center; padding: 9px 0; }
  .rail-badge { position: absolute; top: 2px; right: 6px; margin: 0; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; }
  .rail-user { flex-direction: column; gap: 2px; }
  .rail-user .rail-item { width: 100%; flex: none; }
  body.has-rail { padding-left: 58px; }
}

/* ── Chassis auth surfaces (new — the only non-Fjord rules in this file) ── */
/* The unmissable dev-identity banner: fixed, high-contrast, non-dismissable (§4.2). */
.dev-auth-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 16px; background: #B45309; color: #FFF7ED;
  font: 700 var(--fs-sm)/1.2 var(--font-ui); letter-spacing: .4px; text-transform: uppercase;
  border-top: 2px solid #7C2D12;
}
.dev-auth-banner .icon { width: 15px; height: 15px; }
/* The fixed banner must never hide the rail foot or a page's last row — lift both above it. */
body:has(.dev-auth-banner) .side-rail { bottom: 34px; }
body:has(.dev-auth-banner) main { padding-bottom: 58px; }
/* The centered auth cards (sign-in / honest refusal) rendered by the layout guard. */
.auth-card { max-width: 32rem; margin: 3rem auto; }

/* ── W3 scan-history timeline + from→to delta + changelog (ported .run-timeline / .delta-* / .wd-changelog) ── */
.run-history { margin: 18px 0 8px; }
.run-timeline {
  position: relative; height: 62px; margin: 26px 6px 30px;
}
.tl-track {
  position: absolute; top: 30px; left: 0; right: 0; height: 3px; border-radius: 2px;
  background: var(--border);
}
.tl-select {
  position: absolute; top: 27px; height: 9px; border-radius: 5px;
  background: var(--accent-wash); border: 1px solid var(--accent); pointer-events: none;
}
.tl-dot {
  position: absolute; top: 22px; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; border: 2px solid var(--surface); cursor: pointer; padding: 0;
  background: var(--band-fair); box-shadow: 0 0 0 1px var(--border);
  display: flex; align-items: center; justify-content: center; transition: transform .1s;
}
.tl-dot:hover { transform: scale(1.25); z-index: 3; }
.tl-dot.band-exemplary { background: var(--band-exemplary); }
.tl-dot.band-healthy   { background: var(--band-healthy); }
.tl-dot.band-fair      { background: var(--band-fair); }
.tl-dot.band-poor      { background: var(--band-poor); }
.tl-dot.band-critical  { background: var(--band-critical); }
.tl-val {
  font-size: 9px; font-weight: 700; color: #14181D; pointer-events: none; line-height: 1;
}
.tl-handle {
  position: absolute; top: 18px; width: 12px; height: 28px; margin-left: -6px;
  border-radius: 4px; background: var(--accent-strong); border: 2px solid var(--surface);
  cursor: ew-resize; z-index: 4; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.tl-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-date { position: absolute; top: 48px; transform: translateX(-50%); white-space: nowrap; }
.tl-date-from { left: 4%; }
.tl-date-to { left: 96%; }

#delta-panel h3.delta-title { margin: 0 0 2px; font-size: var(--fs-lg); }
.delta-subline { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
/* 2-column card body: Lens movement (left) | New / Reappeared / Resolved stacked (right). */
.delta-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 8px 0 4px; }
.delta-col-findings { display: flex; flex-direction: column; gap: 14px; }
.delta-finding-group h4 { margin: 0 0 6px; font-size: var(--fs-sm); }
.delta-finding-list { list-style: none; margin: 0; padding: 0; }
.delta-finding { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.delta-finding:last-child { border-bottom: none; }
.delta-findings-unavailable { padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-sm); }
.delta-findings-unavailable h4 { margin: 0 0 4px; font-size: var(--fs-sm); }
.delta-persist { margin: 10px 0 0; }
.delta-card {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px;
  background: var(--surface-2);
}
.delta-card-warn { margin-bottom: 14px; border-color: var(--band-fair); background: var(--band-fair-wash); }
.delta-card-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.delta-card-v { display: block; margin-top: 3px; }
.delta-lens-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: var(--fs-sm); }
.delta-lens-table th, .delta-lens-table td { padding: 3px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.delta-lens-table td.num, .delta-lens-table th:not(:first-child) { text-align: right; }
.ink-healthy { color: var(--band-healthy-text); }
.ink-fair { color: var(--band-fair-text); }
.ink-poor { color: var(--band-poor-text); }
.ink-critical { color: var(--band-critical-text); }
.wd-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: .92em; }

.wd-changelog { margin-top: 14px; }
.changelog-subtabs { margin-bottom: 4px; }
.changelog-panel { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 14px 16px; }
.changelog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.changelog-body h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.changelog-body h4 { margin: 12px 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.changelog-body .cl-list { margin: 0 0 8px; padding-left: 18px; }
.changelog-body .cl-list li { padding: 1px 0; }

/* W5 — report sub-tab strip (Executive/Engineering/Security/Audit) + threat-model wizard. */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 8px 0 6px; flex-wrap: wrap; }
.subtab { padding: 6px 12px; border: 1px solid transparent; border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.subtab:hover { color: var(--text); background: var(--panel); }
.subtab.on { color: var(--text); background: var(--panel); border-color: var(--border); font-weight: 600; margin-bottom: -1px; }
.wizard-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 10px 0 16px; flex-wrap: wrap; counter-reset: step; }
.wizard-steps li { position: relative; padding: 4px 12px 4px 30px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: var(--fs-sm); counter-increment: step; }
.wizard-steps li::before { content: counter(step); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: var(--border); color: var(--text); font-size: 11px; font-weight: 700; }
.wizard-steps li.on { color: var(--text); border-color: var(--band-healthy-text); }
.wizard-steps li.on::before { background: var(--band-healthy-text); color: #fff; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 8px 0; }
dl.kv dt { color: var(--muted); font-size: var(--fs-sm); }
dl.kv dd { margin: 0; }

@media (max-width: 760px) {
  .delta-2col { grid-template-columns: 1fr; }
}
.auth-card h1 { margin-top: 0; }

/* ── C4 architecture navigator (W4, ported from old-SaaS app.css). The server-rendered SVG is self-contained; the
   wrapper scrolls a wide diagram; a detail panel is filled on click (kennel-ui.js C4 island). ── */
.c4-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); padding: 12px; }
.c4-wrap svg { max-width: 100%; height: auto; }
/* Side-by-side (diagram + panel) on wide screens, stacked on narrow. */
.c4-stage { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.c4-main { flex: 1 1 auto; min-width: 0; }
.c4-main .c4-wrap { margin-top: 0; }
.c4-stage .c4-wrap { flex: 1 1 auto; min-width: 0; margin-top: 0; }
/* Level breadcrumb: "Containers › {container}" — shows which level you're at; click to zoom out. */
.c4-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; min-height: 26px; }
button.c4-crumb { background: none; border: none; padding: 2px 6px; color: var(--accent-ink, #2f5d85); cursor: pointer; font: inherit; border-radius: 4px; }
button.c4-crumb:hover { background: var(--accent-wash); }
button.c4-crumb.c4-crumb-cur { color: var(--ink); cursor: default; font-weight: 600; }
button.c4-crumb.c4-crumb-cur:hover { background: none; }
.c4-crumb-sep { color: var(--muted); }
.c4-crumb-cur { color: var(--ink); font-weight: 600; }
.c4-panel { flex: 0 0 320px; max-height: 70vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); padding: 12px; font-size: 13px; }
.c4-panel[hidden] { display: none; }
.c4-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.c4-panel-head strong { font-size: 14px; }
.c4-panel-x { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.c4-panel-x:hover { color: var(--ink); }
.c4-coupling-tag { font-size: 11px; color: var(--band-critical, #d4574b); border: 1px solid var(--band-critical, #d4574b); border-radius: 999px; padding: 1px 8px; }
.c4-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.c4-findings li { line-height: 1.4; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.c4-findings li:last-child { border-bottom: none; }
.c4-findings code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.c4-dim { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent-ink, #2f5d85); background: var(--accent-wash); border-radius: 4px; padding: 0 5px; margin-right: 2px; }
@media (max-width: 760px) { .c4-stage { flex-direction: column; } .c4-panel { flex-basis: auto; width: 100%; } }

/* ── W9: live run-progress banner + run-now tracker (ported wd-run-eta.js surfaces) ─────────────
   Rendered by kennel-ui.js off /api/queue/{entryId}/progress; hidden until a run is active. */
.run-banner { background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.run-banner[hidden] { display: none; }
.run-banner .run-spinner { width: 18px; height: 18px; border: 3px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: wd-spin 1s linear infinite; flex: none; }
.run-banner .run-body { flex: 1; }
.run-banner .run-title { font-weight: 700; color: var(--accent-ink); }
.run-banner .run-meta { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.run-now-msg { display: none; margin-top: 10px; font-size: var(--fs-sm); padding: 8px 12px;
  border-radius: var(--r-sm); line-height: 1.4; }
.run-now-msg.ok { display: block; background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--accent); }
.run-now-msg.err { display: block; background: var(--band-critical-wash); color: var(--band-critical-ink); border: 1px solid var(--band-critical); }

/* ── W9: customer scan-queue console — the per-row ETA cell recedes; 'estimating' reads honest. ── */
.queue-eta { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.queue-eta.estimating { font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   W2 — repo hub trends & slop-vs-brilliant (ported from old-SaaS app.css verbatim, retokenised)
   Per-lens trend grid, the slop/brilliant file-quality strip, the Assurance-Depth bar, first-scan
   framing, the top-level overview flag chips, and the per-lens (i) disclosure.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Per-lens trend card + the native <details> (i) disclosure (accessible, zero-JS). */
.dim-trend .hd-top-right { display: inline-flex; align-items: center; gap: 6px; }
.dim-trend .lens-info { position: relative; }
.dim-trend .lens-info > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--r-full); border: 1px solid var(--border);
  color: var(--muted); background: var(--panel); }
.dim-trend .lens-info > summary::-webkit-details-marker { display: none; }
.dim-trend .lens-info > summary:hover { color: var(--accent); border-color: var(--accent); }
.dim-trend .lens-info > summary .icon { width: 12px; height: 12px; }
.dim-trend .lens-info-pop {
  position: absolute; top: 24px; right: 0; z-index: 5; width: 240px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: var(--fs-sm); line-height: 1.45; }
.dim-trend .lens-info-pop > p { margin: 4px 0 0; }

/* Size & economics key/value rows live in a .settings-section (not a .wd-card), so the flex layout
   the card-scoped .hd-row provides must also apply here (label left, value right, gapped). */
.settings-section .hd-rows { margin-top: 6px; }
.settings-section .hd-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-sm);
  padding: 6px 0; border-bottom: 1px solid var(--border); }
.settings-section .hd-row:last-child { border-bottom: 0; }
.settings-section .hd-row .num { font-weight: 600; }

/* First-scan framing — "this is a position, not a grade" + the weakest-lens pointer. */
.first-scan-frame { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 2px; font-size: var(--fs-sm); }
.first-scan-frame > strong { font-size: var(--fs-md); }
.first-scan-floor { line-height: 1.5; }

/* Overview action-flag chips — critical-toned, TOP-LEVEL (not inside a card, so not .wd-card-scoped). */
.alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.alerts > .alert { font-size: 11px; color: var(--band-critical-text); border: 1px solid var(--band-critical);
  border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap; }

/* Assurance Depth bar — an enforcement composition (Prevented ▸ Verified ▸ Documented-only). Uses the
   accent ramp (a completeness axis, deliberately NOT the band palette — it is never a quality grade). */
.assurance-depth { margin: 6px 0 4px; }
.ad-bar { display: flex; width: 100%; height: 22px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.ad-bar > .ad-seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.ad-seg.ad-prevented  { background: var(--accent-strong); color: var(--on-accent); }
.ad-seg.ad-verified   { background: var(--accent); color: var(--on-accent); }
.ad-seg.ad-documented { background: var(--accent-wash); color: var(--accent-ink); }
.ad-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.ad-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ad-legend .ad-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; border: 1px solid var(--border); }
.ad-swatch.ad-prevented  { background: var(--accent-strong); }
.ad-swatch.ad-verified   { background: var(--accent); }
.ad-swatch.ad-documented { background: var(--accent-wash); }
@media (forced-colors: active) {
  .ad-bar > .ad-seg { forced-color-adjust: none; }
  .ad-seg.ad-prevented  { background: CanvasText; color: Canvas; }
  .ad-seg.ad-verified   { background: GrayText;   color: Canvas; }
  .ad-seg.ad-documented { background: Canvas;     color: CanvasText; border-left: 1px solid CanvasText; }
}

/* Governance altitude ladder — the FIXED four rungs (Organisation → Customer → Product → Repository),
   empty rungs included. A left rail + rung-rank badge reads top-to-bottom as an altitude ladder. */
.gov-ladder { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.gov-ladder .gov-rung { margin: 0; position: relative; }
.gov-rung .gov-rung-alt { display: inline-flex; align-items: center; gap: 8px; }
.gov-rung-rank { font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
.gov-rung-empty { opacity: 0.72; border-style: dashed; }
.gov-rung-body { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.gov-rung-bind { font-size: var(--fs-xs); white-space: nowrap; }

/* Bind wizard altitude tiles — the founder-named tile picker (cards, not radios). */
.gov-alt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gov-alt-tile { cursor: pointer; }
.gov-alt-tile-off { opacity: 0.6; cursor: not-allowed; }
.gov-alt-tile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Engagement phase tab strip — the monotonic Tender → Contract → Delivery journey, current highlighted. */
.gov-phase-strip { list-style: none; display: flex; gap: 0; margin: 8px 0; padding: 0; flex-wrap: wrap; }
.gov-phase { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 10px; font-size: var(--fs-sm); color: var(--muted); position: relative; }
.gov-phase:not(:last-child)::after { content: "→"; margin-left: 10px; color: var(--border); }
.gov-phase-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.gov-phase-done .gov-phase-dot { background: var(--band-exemplary); }
.gov-phase-current { color: var(--ink); font-weight: 600; }
.gov-phase-current .gov-phase-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.gov-phase-ahead { opacity: 0.6; }

/* Delivery handover board — status pills + the mint/sign/share/revoke lifecycle row. */
.gov-handover-status.hs-minted    { background: var(--surface-2); color: var(--muted); }
.gov-handover-status.hs-signed    { background: var(--band-exemplary); color: var(--ink); }
.gov-handover-status.hs-published { background: var(--accent-wash); color: var(--accent-ink); }
.gov-handover-status.hs-revoked   { background: var(--band-critical); color: var(--ink); }
.gov-handover-status.hs-superseded { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }

/* File-quality mix strip (brilliant ▸ fine ▸ slop) — one stacked column per scan, pure CSS. */
.band-mix { display: flex; align-items: flex-end; gap: 2px; height: 72px; margin: 6px 0 2px; min-width: 0; overflow: hidden; }
.band-mix-col { flex: 1 1 0; display: flex; flex-direction: column-reverse; height: 100%; border-radius: 2px; overflow: hidden; min-width: 0; }
.band-mix-col > span { display: block; width: 100%; }
.quality-mix .q-brilliant { background: var(--band-exemplary); }
.quality-mix .q-fine      { background: var(--surface-2); }
.quality-mix .q-slop      { background: var(--band-critical); }