/* Kritis IPP — appliance UI design layer, built on the Ink+Cyan kit.
 *
 * The kit (k-ui/kritis-ink-cyan.css) is the vendored token + primitive
 * layer (--k-* vars, .k-card, .k-btn, fonts). This file is the appliance
 * application design system: base element styles, the dashboard sidebar
 * shell, the page-header pattern, KPI tiles, refined panels + tables +
 * status pills, and the split-screen auth layout. It is tuned to match
 * the Kritis.io cloud console (see ../kritis frontend) so the on-prem
 * appliance and the cloud feel like one product.
 *
 * Pico is intentionally NOT loaded — this file owns all base styling.
 */

/* ============================================================
   0. Base reset + typography (replaces Pico)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.k-page { margin: 0; min-height: 100vh; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
a { color: var(--k-cyan-deep); text-decoration: none; }
a:hover { color: var(--k-cyan); }
code, pre { font-family: var(--k-mono); }
img { display: block; }
button { font-family: var(--k-font); }
:focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 2px; }

/* Selection in brand cyan */
::selection { background: rgba(var(--k-accent-rgb), 0.22); }

/* Slim, unobtrusive scrollbars (match the cloud feel) */
* { scrollbar-width: thin; scrollbar-color: rgba(11,27,43,0.18) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(11,27,43,0.16); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(11,27,43,0.30); background-clip: content-box; }

/* ============================================================
   1. Minimal fallback layout (raw _base.html, e.g. error pages)
   ============================================================ */
.k-fallback { max-width: 640px; margin: 64px auto; padding: 0 24px; }

/* ============================================================
   2. Dashboard shell — left sidebar + main
   ============================================================ */
.k-shell { display: flex; min-height: 100vh; background: var(--k-bg); }

.k-sidebar {
  position: sticky; top: 0; align-self: flex-start;
  display: flex; flex-direction: column;
  width: 248px; height: 100vh; flex: 0 0 248px;
  background: #fff;
  border-right: 1px solid rgba(11, 27, 43, 0.10);
}
.k-sidebar-head {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 18px;
  border-bottom: 1px solid var(--k-hairline);
}
.k-sidebar-head .mark { width: 28px; height: 28px; flex: 0 0 auto; }
.k-sidebar-word { display: flex; flex-direction: column; line-height: 1.05; }
.k-sidebar-name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--k-ink-deepest); }
.k-sidebar-by { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--k-charcoal-mute); }

.k-nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px; }
.k-nav-group { display: flex; flex-direction: column; gap: 2px; }
.k-nav-group + .k-nav-group { margin-top: 6px; padding-top: 12px; position: relative; }
.k-nav-group + .k-nav-group::before {
  content: ""; position: absolute; top: 0; left: 6px; right: 6px; height: 1px;
  background: linear-gradient(to right, rgba(var(--k-accent-rgb),0.45), transparent);
}
.k-nav-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--k-charcoal-mute); padding: 4px 10px 6px;
}
.k-nav-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--k-radius);
  font-size: 13.5px; font-weight: 600; color: rgba(11, 27, 43, 0.66);
  transition: background-color 130ms, color 130ms;
}
.k-nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.75; opacity: 0.85; }
.k-nav-item:hover { background: rgba(var(--k-accent-rgb), 0.07); color: var(--k-ink); }
.k-nav-item.active { background: rgba(var(--k-accent-rgb), 0.11); color: var(--k-ink); font-weight: 700; }
.k-nav-item.active svg { opacity: 1; color: var(--k-cyan-deep); }
.k-nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--k-ink);
}

.k-sidebar-foot {
  border-top: 1px solid var(--k-hairline); padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.k-appliance-badge {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom right, var(--k-ink), var(--k-navy));
  color: #fff;
}
.k-appliance-badge svg { width: 17px; height: 17px; stroke-width: 1.75; }
.k-sidebar-foot .meta { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.k-sidebar-foot .meta .nm { font-size: 12px; font-weight: 700; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-sidebar-foot .meta .sb { font-size: 10px; color: var(--k-charcoal-mute); }
.k-logout {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; color: var(--k-charcoal-soft);
  border: 0; background: transparent; cursor: pointer; transition: background-color 130ms, color 130ms;
}
.k-logout svg { width: 17px; height: 17px; stroke-width: 1.75; }
.k-logout:hover { background: var(--k-err-bg); color: var(--k-err); }

/* Main column */
.k-main { flex: 1 1 auto; min-width: 0; overflow-x: hidden; }
.k-main-inner { max-width: 1080px; margin: 0 auto; padding: 40px 44px 64px; }

/* ============================================================
   3. Page header pattern (eyebrow -> title -> subtitle -> rule)
   ============================================================ */
.k-pagehead { margin-bottom: 26px; }
.k-pagehead .k-eyebrow { display: block; }
.k-pagehead h1 {
  margin-top: 8px; font-size: 2rem; font-weight: 800; letter-spacing: -0.025em;
  color: var(--k-ink); line-height: 1.1;
}
.k-pagehead .sub { margin-top: 7px; font-size: 14px; color: var(--k-charcoal-soft); max-width: 70ch; line-height: 1.55; }
.k-pagehead .rule { margin-top: 18px; height: 1px; width: 48px; border: 0;
  background: linear-gradient(to right, rgba(var(--k-accent-rgb),0.6), transparent); }

.k-stack > * + * { margin-top: 20px; }  /* vertical rhythm between sections */

/* ============================================================
   4. KPI / metric tiles
   ============================================================ */
.k-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.k-kpi {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--k-hairline); border-radius: 12px;
  padding: 15px 16px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  transition: box-shadow 160ms, transform 160ms;
}
.k-kpi:hover { box-shadow: 0 6px 18px rgba(11,27,43,0.06); transform: translateY(-1px); }
.k-kpi .lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--k-charcoal); }
.k-kpi .val { margin-top: 7px; display: flex; align-items: baseline; gap: 8px; }
.k-kpi .num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.k-kpi .num.ok { color: var(--k-ok); }
.k-kpi .num.warn { color: var(--k-warn); }
.k-kpi .num.err { color: var(--k-err); }
.k-kpi .unit { font-size: 10px; font-weight: 600; color: var(--k-charcoal-mute); }
.k-kpi .foot { margin-top: 9px; font-size: 10.5px; color: var(--k-charcoal-mute); }
/* corner accent bar */
.k-kpi::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(to right, var(--k-cyan), transparent 65%); opacity: 0; transition: opacity 160ms; }
.k-kpi:hover::after { opacity: 1; }

/* ============================================================
   5. Panels (cards with a header) + definition grids + tables
   ============================================================ */
.k-panel { background: #fff; border: 1px solid var(--k-hairline); border-radius: 10px;
  box-shadow: var(--k-shadow-card); overflow: hidden; }
.k-panel-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--k-hairline);
}
.k-panel-head .k-eyebrow { display: block; }
.k-panel-head h2 { margin-top: 3px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--k-ink); }
.k-panel-head .hint { font-size: 11px; color: var(--k-charcoal-mute); }
.k-panel-body { padding: 18px 20px; }
.k-panel-body.flush { padding: 0; }

/* Definition grid (replaces the broken <dl>) */
.k-defs { display: grid; grid-template-columns: max-content 1fr; gap: 11px 28px; align-items: baseline; margin: 0; }
.k-defs dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-charcoal-mute); }
.k-defs dd { margin: 0; font-size: 13.5px; color: var(--k-ink); }
.k-defs dd.mono { font-family: var(--k-mono); font-size: 12px; word-break: break-all; }

/* Tables */
/* horizontal-scroll safety net for dense tables — on a narrow window the table
   scrolls instead of clipping the trailing action column (e.g. Run now). */
.k-tscroll { overflow-x: auto; }
.k-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.k-table thead th {
  text-align: left; padding: 11px 20px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--k-charcoal-mute);
  border-bottom: 1px solid var(--k-hairline); background: rgba(11,27,43,0.015);
}
.k-table tbody td { padding: 12px 20px; border-bottom: 1px solid var(--k-hairline); color: var(--k-ink); vertical-align: middle; }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr { transition: background-color 120ms; }
.k-table tbody tr:hover { background: rgba(var(--k-accent-rgb),0.035); }
.k-table .prov { font-weight: 700; }
.k-table .prov small { display: block; font-weight: 500; font-size: 11px; color: var(--k-charcoal-mute); font-family: var(--k-mono); }
.k-table td.num { font-family: var(--k-mono); font-variant-numeric: tabular-nums; }
/* Run group header (queue held list — 'approve all from this run') */
.k-table tr.k-grouphd td {
  padding: 9px 20px; background: rgba(var(--k-accent-rgb),0.05);
  border-top: 1px solid rgba(var(--k-accent-rgb),0.22); border-bottom: 1px solid var(--k-hairline);
}
.k-table tr.k-grouphd:first-child td { border-top: 0; }
.k-table tr.k-grouphd:hover { background: rgba(var(--k-accent-rgb),0.05); }
.k-grouphd .run { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.k-grouphd .run .lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--k-charcoal-mute);
}
.k-grouphd .run .lbl strong { color: var(--k-ink); font-weight: 800; }

/* ============================================================
   6. Status pills + dots + badges
   ============================================================ */
.k-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap;
}
.k-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.k-pill.ok   { color: var(--k-ok);   background: var(--k-ok-bg);   border-color: var(--k-ok-border); }
.k-pill.warn { color: var(--k-warn); background: var(--k-warn-bg); border-color: var(--k-warn-border); }
.k-pill.err  { color: var(--k-err);  background: var(--k-err-bg);  border-color: var(--k-err-border); }
.k-pill.info { color: var(--k-cyan-deep); background: rgba(var(--k-accent-rgb),0.07); border-color: rgba(var(--k-accent-rgb),0.28); }
.k-pill.mute { color: var(--k-charcoal-soft); background: rgba(11,27,43,0.04); border-color: rgba(11,27,43,0.08); }

/* small uppercase mode/tag chip */
.k-tag {
  display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--k-mono); color: var(--k-cyan-deep); background: rgba(var(--k-accent-rgb),0.07);
  border: 1px solid rgba(var(--k-accent-rgb),0.22);
}

.k-status-line { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.k-status-line .dot { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.k-status-line.ok   { color: var(--k-ok); }   .k-status-line.ok .dot   { background: var(--k-ok); box-shadow: 0 0 0 3px rgba(5,150,105,0.14); }
.k-status-line.warn { color: var(--k-warn); } .k-status-line.warn .dot { background: var(--k-warn); box-shadow: 0 0 0 3px rgba(180,83,9,0.14); }
.k-status-line.err  { color: var(--k-err); }  .k-status-line.err .dot  { background: var(--k-err); box-shadow: 0 0 0 3px rgba(185,28,28,0.14); }

/* Live Run-now status (#3) — extends k-status-line with per-run-state colours
   + a breathing "live" dot while a scan is in flight. The dot vocabulary stays
   consistent with the static status lines above; only the running state adds
   motion, so the table reads calmly until something is actually happening. */
.run-status { font-size: 13px; white-space: nowrap; }
.run-status .dot { background: var(--k-charcoal-mute); flex: none; }
/* the "· 2d ago" recency next to ok — UI font (not mono), muted, no wrap */
.run-status .run-ts { font-weight: 500; color: var(--k-charcoal-soft); white-space: nowrap; }
.run-status.run-ok    { color: var(--k-ok); }
.run-status.run-ok .dot { background: var(--k-ok); box-shadow: 0 0 0 3px rgba(5,150,105,0.14); }
.run-status.run-failed, .run-status.run-csrf { color: var(--k-err); }
.run-status.run-failed .dot, .run-status.run-csrf .dot { background: var(--k-err); box-shadow: 0 0 0 3px rgba(185,28,28,0.14); }
.run-status.run-skipped, .run-status.run-unavailable { color: var(--k-warn); }
.run-status.run-skipped .dot, .run-status.run-unavailable .dot { background: var(--k-warn); box-shadow: 0 0 0 3px rgba(180,83,9,0.14); }
.run-status.run-running { color: var(--k-cyan-deep); }
.run-status .run-err { font-weight: 500; word-break: break-word; }
.run-status .run-muted { color: var(--k-charcoal-mute); font-weight: 500; }
.run-status .run-dot-live {
  background: var(--k-cyan-deep);
  box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb), 0.16);
  animation: run-breathe 1.1s ease-in-out infinite;
}
@keyframes run-breathe { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .run-status .run-dot-live, .conn-live .run-dot-live { animation: none; } }

/* Live deep-audit progress animation (#4) — real analysis feedback while a scan
   runs: the current stage label + real counts + an advancing shimmer bar (a
   stage stepper, 6 steps). Demo-grade but honest — each render reflects the
   engine's actual stage. Refreshed by the run-status htmx poll every 1.5s. */
/* shrinkable: max-width caps it, min-width:0 lets the column give space back to
   the Run-now button when the row is tight (never overflows the panel). */
.run-prog { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 185px; }
.run-prog-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--k-cyan-deep); }
/* the label+detail truncate with an ellipsis inside the cell instead of clipping
   at the table edge (the dot stays put). */
.run-prog-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-prog-detail { color: var(--k-charcoal-mute); font-weight: 500; }
.run-bar { display: block; width: 100%; position: relative; height: 5px; border-radius: 999px; background: rgba(var(--k-accent-rgb), 0.13); overflow: hidden; }
.run-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: linear-gradient(90deg, var(--k-cyan-deep), var(--k-accent)); transition: width 0.6s ease; }
.run-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: run-shimmer 1.2s linear infinite; }
@keyframes run-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.run-step { font-size: 10px; letter-spacing: 0.04em; color: var(--k-charcoal-mute); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .run-bar-fill::after { animation: none; } }

/* Cloud connection uptime chart (#1) — a continuous time-series of the link
   state so a drop is visible at a glance on a no-SSH appliance. Server-rendered
   SVG (geometry from ipp.connection_chart); jade area + line for "up", a soft
   red band for each outage. Refreshed in place by htmx. */
.conn-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.conn-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.conn-live .dot { width: 8px; height: 8px; border-radius: 999px; }
.conn-live.up   { color: var(--k-ok); }  .conn-live.up .dot   { background: var(--k-ok);  box-shadow: 0 0 0 3px rgba(5,150,105,0.14); }
.conn-live.down { color: var(--k-err); } .conn-live.down .dot { background: var(--k-err); box-shadow: 0 0 0 3px rgba(185,28,28,0.14); }
.conn-hb { color: var(--k-charcoal-mute); font-weight: 500; }
.conn-uptime { font-size: 12px; font-weight: 600; color: var(--k-charcoal-soft); }
/* ── Cloud-connection heartbeat (ECG) monitor — light, on-theme ── */
.conn-ecg { display: block; width: 100%; height: 132px; border-radius: 10px;
  border: 1px solid var(--k-hairline);
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(var(--k-accent-rgb),0.05), transparent 72%),
    linear-gradient(180deg, #f5fbfa 0%, #eef6f4 100%); }
.conn-axis { stroke: rgba(11,27,43,0.10); stroke-width: 1; stroke-dasharray: 2 4; }
.conn-out { fill: rgba(220,38,38,0.10); }
.conn-trace { fill: none; stroke: var(--k-cyan-deep); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 1.5px rgba(10,140,124,0.35)); }
.conn-ecg.is-down .conn-trace { stroke: #dc2626; filter: none; }
.conn-tip { fill: var(--k-cyan-deep); animation: ecg-pulse 1.6s ease-out infinite; }
.conn-ecg.is-down .conn-tip { fill: #dc2626; animation: none; }
.conn-scan { opacity: 0.5; animation: ecg-scan 3.4s linear infinite; }
.conn-ecg.is-down .conn-scan { display: none; }
.conn-tick { fill: var(--k-charcoal-mute); font-size: 9px; font-family: var(--k-mono); }
@keyframes ecg-pulse {
  0%   { r: 3.2; opacity: 1; }
  70%  { r: 8;   opacity: 0; }
  100% { r: 3.2; opacity: 0; }
}
@keyframes ecg-scan { from { transform: translateX(-130px); } to { transform: translateX(720px); } }
@media (prefers-reduced-motion: reduce) { .conn-tip, .conn-scan { animation: none; } .conn-scan { display: none; } }
.conn-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 11px; color: var(--k-charcoal-mute); }
.conn-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.conn-legend .sw.up   { background: var(--k-cyan-deep); }
.conn-legend .sw.down { background: rgba(220,38,38,0.45); }
.conn-collecting { margin: 6px 0; }

/* Adapter reachability badge (#2) — passive last-known reachability of the
   on-prem tool, shown under the adapter's Enabled pill so a drop is visible at
   a glance (no manual self-test needed). */
.reach-line { margin-top: 5px; }
.reach { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.reach .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.reach.up { color: var(--k-ok); }
.reach.down { color: var(--k-err); }
.reach.unknown { color: var(--k-charcoal-mute); }

/* ============================================================
   7. Forms (refined, cloud-matched)
   ============================================================ */
.k-form { display: flex; flex-direction: column; gap: 18px; }
.k-field { display: flex; flex-direction: column; gap: 8px; }
.k-field .help { font-size: 11.5px; color: var(--k-charcoal-mute); line-height: 1.5; }
.k-field-row { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--k-ink); }
.k-select {
  width: 100%; font-family: var(--k-font); font-size: 14px; padding: 9px 12px;
  border: 1px solid #e3e8ee; border-radius: var(--k-radius); background: #fff; color: var(--k-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.k-select:focus { outline: none; border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb),0.18); }
.k-check { display: inline-flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--k-ink); cursor: pointer; }
.k-check input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--k-cyan-deep); }
/* Radio cards — vendor picker in the Add-a-source wizard. Selected card gets
   the cyan ring; reuses the input focus token for consistency. */
.k-radio-cards { display: flex; flex-direction: column; gap: 10px; }
.k-radio-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid #e3e8ee; border-radius: var(--k-radius); cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, background-color 140ms; }
.k-radio-card:hover { background: rgba(var(--k-accent-rgb), 0.05); }
.k-radio-card input { width: 16px; height: 16px; accent-color: var(--k-cyan-deep); flex: none; }
.k-radio-card:has(input:checked) { border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb), 0.18); }
.k-radio-card .rc-body { display: flex; flex-direction: column; gap: 2px; }
.k-radio-card .rc-title { font-size: 14px; font-weight: 600; color: var(--k-ink); }
.k-radio-card .rc-sub { font-size: 11.5px; color: var(--k-charcoal-mute); }
.k-btn-lg { height: 46px; padding: 0 22px; font-size: 13.5px; }
.k-btn-block { width: 100%; }
.k-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* Compact inline action (e.g. Run now in a table row) */
.k-btn-sm { padding: 5px 12px; font-size: 12px; gap: 5px; }
.k-btn-sm svg { width: 13px; height: 13px; stroke-width: 2; }

/* Schedule cell — cadence over next-run, tight vertical stack */
.k-sched { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.k-sched .cad { font-family: var(--k-mono); font-size: 12px; font-weight: 600; color: var(--k-ink); }
.k-sched .nxt { font-size: 11px; color: var(--k-charcoal-mute); font-variant-numeric: tabular-nums; }
.k-sched .nxt.due { color: var(--k-cyan-deep); font-weight: 600; }

/* ============================================================
   8. Misc content helpers
   ============================================================ */
.k-lede { font-size: 14px; color: var(--k-charcoal-soft); line-height: 1.6; max-width: 72ch; }
.k-note { font-size: 12px; color: var(--k-charcoal-mute); line-height: 1.6; }
.k-codeblock {
  background: #0c1822; color: #cdd9e5; border-radius: var(--k-radius);
  padding: 12px 14px; font-size: 12px; line-height: 1.5; overflow: auto;
  border: 1px solid rgba(var(--k-accent-rgb),0.18);
}
.k-link-arrow { font-weight: 700; }
hr.k-rule { border: 0; border-top: 1px solid var(--k-hairline); margin: 22px 0; }
details.k-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--k-cyan-deep); }
details.k-details[open] summary { margin-bottom: 8px; }

/* audit feed */
.k-feed { display: flex; flex-direction: column; }
.k-feed-row { padding: 13px 0; border-bottom: 1px solid var(--k-hairline); }
.k-feed-row:last-child { border-bottom: 0; }
.k-feed-row .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-feed-row .evt { font-size: 13px; font-weight: 700; color: var(--k-ink); font-family: var(--k-mono); }
.k-feed-row .ts { font-size: 11px; color: var(--k-charcoal-mute); margin-left: auto; font-variant-numeric: tabular-nums; }
.k-feed-row .chain { margin-top: 7px; font-size: 10.5px; color: var(--k-charcoal-mute); }
.k-feed-row .chain code { color: var(--k-charcoal-soft); }

/* ============================================================
   9. Split-screen auth layout (login + wizard)
   ============================================================ */
.k-auth { display: flex; min-height: 100vh; background: var(--k-bg); }
.k-auth-brand {
  position: relative; flex: 0 0 46%; max-width: 46%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 56px;
  background: var(--k-ink);
  color: #fff;
}
/* fine grid + radial glow atmosphere */
.k-auth-brand::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px; pointer-events: none;
}
.k-auth-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 12%, rgba(var(--k-accent-rgb),0.16), transparent 60%),
    radial-gradient(50% 50% at 12% 92%, rgba(var(--k-accent-rgb),0.10), transparent 60%);
}
.k-auth-brand > * { position: relative; z-index: 1; }

.k-auth-logo { display: flex; align-items: center; gap: 11px; }
.k-auth-logo .nm { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.k-auth-logo .by { font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.5); }

.k-auth-hero { max-width: 460px; }
.k-auth-hero .eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; color: var(--k-cyan); }
.k-auth-hero h1 {
  margin-top: 24px; font-size: 2.9rem; font-weight: 800; line-height: 1.07; letter-spacing: -0.03em; color: #fff;
}
.k-auth-hero h1 .accent {
  background: linear-gradient(to right, var(--k-cyan-light), var(--k-cyan), var(--k-cyan-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.k-auth-hero p { margin-top: 22px; font-size: 15px; font-weight: 400; line-height: 1.7; color: rgba(255,255,255,0.78); }
.k-auth-hero .divider { margin-top: 28px; height: 1px; width: 56px; background: linear-gradient(to right, rgba(var(--k-accent-rgb),0.6), transparent); }
.k-auth-pills { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.k-auth-pills span {
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  border-radius: 999px; padding: 6px 13px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
}
.k-auth-frameworks .lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(var(--k-accent-rgb),0.8); margin-bottom: 13px; }
.k-auth-frameworks .row { display: flex; flex-wrap: wrap; gap: 22px; }
.k-auth-frameworks .row span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.82); }

.k-auth-form { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 32px; }
.k-auth-form .inner { width: 100%; max-width: 408px; }
.k-auth-form h2 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--k-ink); }
.k-auth-form .sub { margin-top: 10px; font-size: 14px; color: var(--k-charcoal-soft); line-height: 1.55; }
.k-auth-form .divider { margin-top: 18px; height: 1px; width: 40px; background: linear-gradient(to right, rgba(var(--k-accent-rgb),0.5), transparent); }
.k-auth-form form { margin-top: 26px; }
.k-auth-input {
  width: 100%; box-sizing: border-box; height: 48px; font-family: var(--k-font); font-size: 14px; font-weight: 500;
  padding: 0 15px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; background: #fff; color: var(--k-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); outline: none; transition: border-color 140ms, box-shadow 140ms;
}
.k-auth-input:focus { border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb),0.16); }
.k-auth-foot { margin-top: 36px; font-size: 12px; color: var(--k-charcoal-mute); text-align: center; }

/* Wizard step rail (in the brand panel) */
.k-steprail { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.k-steprail li { display: flex; align-items: center; gap: 13px; padding: 9px 0; color: rgba(255,255,255,0.5); font-size: 13.5px; font-weight: 600; }
.k-steprail .pip { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-family: var(--k-mono); font-size: 11px; font-weight: 600; border: 1.5px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.55); }
.k-steprail li.done { color: rgba(255,255,255,0.78); }
.k-steprail li.done .pip { background: rgba(var(--k-accent-rgb),0.18); border-color: var(--k-cyan); color: var(--k-cyan-light); }
.k-steprail li.current { color: #fff; }
.k-steprail li.current .pip { background: var(--k-cyan); border-color: var(--k-cyan); color: var(--k-ink); }

/* Wizard "what happens next" steps in the form panel */
.k-flow { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.k-flow li { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; color: var(--k-charcoal-soft); line-height: 1.5; }
.k-flow .n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; background: var(--k-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--k-mono); font-size: 10px; font-weight: 600; margin-top: 1px; }

/* The form panel scrolls if a step is tall (EULA) */
.k-auth-form.scroll { align-items: stretch; overflow-y: auto; }
.k-auth-form.scroll .inner { margin: auto; max-width: 460px; }
.k-eula-box { max-height: 38vh; overflow: auto; padding: 14px 16px; background: var(--k-bg);
  border: 1px solid var(--k-hairline); border-radius: var(--k-radius); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }

/* On small screens the brand panel hides */
@media (max-width: 900px) {
  .k-auth-brand { display: none; }
  .k-sidebar { position: fixed; transform: translateX(-100%); z-index: 40; }
  .k-main-inner { padding: 28px 20px 48px; }
}

/* ============================================================
   10. Motion — restrained staggered reveal
   ============================================================ */
@keyframes k-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.k-anim { opacity: 0; animation: k-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.k-anim-1 { animation-delay: 0.04s; } .k-anim-2 { animation-delay: 0.10s; }
.k-anim-3 { animation-delay: 0.16s; } .k-anim-4 { animation-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) { .k-anim { animation: none; opacity: 1; } }

/* ============================================================
   11. Egress review — the privacy moat made visible
   The per-finding redacted<->full pair-table is the trust moment:
   LEFT = the exact line that uploads, a dashed seam, RIGHT = the
   full rule that stays on the box. Cyan = leaves; ink = stays.
   ============================================================ */

/* full severity palette (crit/high/med/low/info) — P1 scorecard reuses these */
.k-sev {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid transparent; white-space: nowrap;
}
.k-sev::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.k-sev.crit { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.k-sev.high { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
.k-sev.med  { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.k-sev.low  { color: var(--k-accent-deep); background: rgba(var(--k-accent-rgb),0.07); border-color: rgba(var(--k-accent-rgb),0.28); }
.k-sev.info { color: #5b6478; background: rgba(11,27,43,0.04); border-color: rgba(11,27,43,0.10); }
.k-sev.none { color: var(--k-charcoal-mute); background: rgba(11,27,43,0.03); border-color: rgba(11,27,43,0.08); }
.k-sev.none::before { display: none; }

/* ─── P3 kit primitives (_kit.html) ────────────────────────────────
   Reusable cross-source building blocks the fleet UI assembles. Extend the
   established k-ui system; no new aesthetic. */

/* Source identity — label (link) + vendor type / short instance id beneath. */
.k-srcid { display: inline-flex; flex-direction: column; gap: 1px; }
.k-srcid .nm { font-size: 13.5px; font-weight: 600; color: var(--k-ink); }
.k-srcid a.nm { text-decoration: none; }
.k-srcid a.nm:hover { color: var(--k-cyan-deep); }
.k-srcid .ty { font-size: 10px; color: var(--k-charcoal-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.k-srcid .ty .k-mono { text-transform: none; letter-spacing: 0; }

/* Fleet health rollup — big reachable/total + status pills. */
.k-rollup { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.k-rollup .big { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--k-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.k-rollup .big .of { font-size: 16px; font-weight: 600; color: var(--k-charcoal-mute); }
.k-rollup .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--k-charcoal); margin-right: 4px; }

/* Action callout — clickable pending-work banner (cyan-tinted). */
.k-callout { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid rgba(var(--k-accent-rgb), 0.3); border-radius: var(--k-radius);
  background: rgba(var(--k-accent-rgb), 0.06); color: var(--k-ink); text-decoration: none;
  transition: background-color 140ms, border-color 140ms; }
.k-callout:hover { background: rgba(var(--k-accent-rgb), 0.11); border-color: var(--k-cyan); }
.k-callout .ico { width: 18px; height: 18px; color: var(--k-cyan-deep); flex: none; }
.k-callout .msg { font-size: 13px; flex: 1; }
.k-callout .msg strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.k-callout .cta { font-size: 12px; font-weight: 700; color: var(--k-cyan-deep); white-space: nowrap; }

/* Severity bar — stacked proportional bar + count badges. */
.k-sevbar { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(11,27,43,0.06); gap: 1px; }
.k-sevbar .seg { height: 100%; }
.k-sevbar .seg.crit { background: #b91c1c; }
.k-sevbar .seg.high { background: #ea580c; }
.k-sevbar .seg.med  { background: #d97706; }
.k-sevbar .seg.low  { background: var(--k-cyan); }
.k-sevbar .seg.info { background: #94a3b8; }
.k-sevbar .seg.none { background: var(--k-ok); opacity: 0.4; }
.k-sevcounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Score chip — 0..100 posture score with a colour band. */
.k-score { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 800;
  font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  padding: 3px 10px; border-radius: var(--k-radius); border: 1px solid transparent; line-height: 1.1; }
.k-score .max { font-size: 9.5px; font-weight: 600; opacity: 0.65; }
.k-score.ok   { color: var(--k-ok);   background: var(--k-ok-bg);   border-color: var(--k-ok-border); }
.k-score.warn { color: var(--k-warn); background: var(--k-warn-bg); border-color: var(--k-warn-border); }
.k-score.err  { color: var(--k-err);  background: var(--k-err-bg);  border-color: var(--k-err-border); }
.k-score.none { color: var(--k-charcoal-mute); background: rgba(11,27,43,0.03); border-color: rgba(11,27,43,0.08); }

/* Uptime sparkline — tiny inline trend line. */
.k-spark { display: block; }
.k-spark polyline { stroke: var(--k-cyan-deep); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* List controls (_listctl.html + listctl.js) — search/filter/sort + pager. */
.k-lc-bar { margin-bottom: 14px; }
.k-lc-pager { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.k-lc-count { font-size: 12px; color: var(--k-charcoal-mute); }
.k-lc-nav { display: flex; align-items: center; gap: 10px; }
.k-lc-pageinfo { font-size: 12px; font-weight: 600; color: var(--k-charcoal); font-variant-numeric: tabular-nums; }
.k-lc-prev[disabled], .k-lc-next[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.k-lc-empty { margin-top: 14px; }
/* A display:flex/block rule beats the [hidden] UA default — restore it so the
   JS toggling `hidden` actually hides the pager + empty-state. */
.k-lc-pager[hidden], .k-lc-empty[hidden] { display: none; }

/* Sources page — fleet health-rollup header strip above the table. */
.k-srcs-rollup { padding: 4px 2px 16px; }
/* Bulk-action bar — appears when ≥1 source is selected. */
.k-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 14px; border: 1px solid rgba(var(--k-accent-rgb), 0.28);
  border-radius: var(--k-radius); background: rgba(var(--k-accent-rgb), 0.06); }
.k-bulkbar[hidden] { display: none; }
.k-bulkbar .sel { font-size: 12.5px; color: var(--k-charcoal); margin-right: auto; }
.k-bulkbar .sel strong { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--k-ink); }
/* Checkbox column — compact, centred. */
.k-table .cbcol { width: 34px; text-align: center; padding-right: 0; }
.k-table .cbcol input { width: 15px; height: 15px; accent-color: var(--k-cyan-deep); cursor: pointer; }

/* ─── Dashboard (posture-first) ────────────────────────────────── */
/* Band 1 — appliance & cloud, two cards side by side (stack when narrow). */
.k-dash-band { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.k-dash-spark { margin-bottom: 14px; }
.k-dash-spark .k-spark { width: 100%; height: 40px; }
/* compact heartbeat ECG on the dashboard connection card */
.k-dash-ecg { margin-bottom: 14px; }
.k-dash-ecg .conn-ecg { height: 88px; }
/* "Sources needing attention" — clickable rows, worst first. */
.k-attn { display: flex; flex-direction: column; margin-top: 10px; }
.k-attn-row { display: grid; grid-template-columns: 1fr auto auto 14px; align-items: center;
  gap: 14px; padding: 11px 4px; border-top: 1px solid rgba(11,27,43,0.07);
  text-decoration: none; color: inherit; transition: background-color 120ms; }
.k-attn-row:first-child { border-top: none; }
.k-attn-row:hover { background: rgba(var(--k-accent-rgb), 0.05); }
.k-attn-row .sev { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.k-attn-row .go { color: var(--k-charcoal-mute); font-size: 18px; font-weight: 700; text-align: center; }
.k-attn-row:hover .go { color: var(--k-cyan-deep); }

/* Analyzer cross-source landing — per-source posture rows (worst first). The
   same clickable-row language as k-attn, widened to carry score + trend + age. */
.k-anlist { display: flex; flex-direction: column; }
.k-anlist-hd, .k-anrow {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(170px, 1.5fr) 118px minmax(120px, 1fr) 112px 96px 14px;
}
.k-anlist-hd {
  padding: 0 4px 9px; border-bottom: 1px solid var(--k-hairline);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--k-charcoal-mute);
}
.k-anlist-hd .tr, .k-anlist-hd .ag { text-align: right; }
.k-anrow {
  padding: 12px 4px; border-top: 1px solid rgba(11,27,43,0.06);
  text-decoration: none; color: inherit; transition: background-color 120ms;
}
.k-anrow:first-of-type { border-top: none; }
.k-anrow:hover { background: rgba(var(--k-accent-rgb), 0.05); }
.k-anrow.unscanned { opacity: 0.78; }
.k-anrow .posture { display: inline-flex; align-items: center; gap: 8px; }
.k-anrow .sev { display: flex; gap: 6px; flex-wrap: wrap; }
.k-anrow .tr { text-align: right; }
.k-anrow .tr .k-spark { display: inline-block; vertical-align: middle; width: 104px; height: 26px; }
.k-anrow .ag { text-align: right; font-size: 11.5px; color: var(--k-charcoal-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-anrow .go { color: var(--k-charcoal-mute); font-size: 18px; font-weight: 700; text-align: center; }
.k-anrow:hover .go { color: var(--k-cyan-deep); }
/* grade letter beside the score chip */
.k-grade {
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em; color: var(--k-charcoal);
  padding: 1px 7px; border-radius: 6px; background: rgba(11,27,43,0.05); border: 1px solid rgba(11,27,43,0.10);
}

/* cross-source findings list — gap container so list-control [hidden] rows
   don't leave the adjacency-margin gaps the bare .k-finding stack would. */
.k-findlist { display: flex; flex-direction: column; gap: 14px; }
.k-findlist .k-finding + .k-finding { margin-top: 0; }
.k-find-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.k-find-meta .src { text-decoration: none; }
.k-find-meta .src:hover .nm { color: var(--k-cyan-deep); }

@media (max-width: 720px) {
  .k-anlist-hd { display: none; }
  .k-anrow { grid-template-columns: 1fr auto; grid-auto-rows: min-content; row-gap: 8px; }
  .k-anrow .tr, .k-anrow .go { display: none; }
}

/* breadcrumb back to the cross-source analyzer landing (per-source pages) */
.k-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; }
.k-crumb .back { display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-weight: 600; color: var(--k-cyan-deep); }
.k-crumb .back:hover { text-decoration: underline; }
.k-crumb .sep { color: var(--k-charcoal-mute); }
.k-crumb .here { font-weight: 700; color: var(--k-ink); display: inline-flex; align-items: baseline; gap: 8px; }
.k-crumb .here .ty { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--k-charcoal-mute); }

/* audit log — event-group tag (a subtle category accent) + the source ref */
.k-audit-grp { text-transform: uppercase; }
.k-audit-grp.auth     { color: #7c3aed; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.20); }
.k-audit-grp.scan     { color: var(--k-cyan-deep); background: rgba(var(--k-accent-rgb),.08); border-color: rgba(var(--k-accent-rgb),.22); }
.k-audit-grp.approval { color: #0a8c7c; background: rgba(10,140,124,.08); border-color: rgba(10,140,124,.20); }
.k-audit-grp.pairing  { color: #b45309; background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.20); }
.k-audit-grp.conn     { color: var(--k-charcoal-soft); background: rgba(11,27,43,.05); border-color: rgba(11,27,43,.12); }
.k-audit-grp.system   { color: var(--k-charcoal-soft); background: rgba(11,27,43,.05); border-color: rgba(11,27,43,.12); }
.k-audit-src { font-size: 11px; color: var(--k-charcoal-mute); }

/* queue — inline "preview what's sent" row beneath a held payload (subordinate,
   no hover highlight; the cell already carries the row above it). */
.k-table tr.q-prevrow td { padding-top: 0; padding-bottom: 10px; }
.k-table tr.q-prevrow:hover { background: transparent; }
.k-table tr.q-prevrow .k-details summary { font-size: 11.5px; color: var(--k-cyan-deep); font-weight: 600; }
.k-table tr.q-prevrow .k-codeblock { margin-top: 8px; max-height: 300px; overflow: auto; }

/* connection event timeline — connect / disconnect / half-open, beside the chart */
.k-conn-tl { margin-top: 20px; border-top: 1px solid var(--k-hairline); padding-top: 16px; }
.k-timeline { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.k-timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--k-hairline); }
.k-tl-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; padding: 6px 0; position: relative; }
.k-tl-row .dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--k-hairline); z-index: 1; }
.k-tl-row.up .dot   { background: var(--k-ok); box-shadow: 0 0 0 1px var(--k-ok-border); }
.k-tl-row.down .dot { background: var(--k-err); box-shadow: 0 0 0 1px var(--k-err-border); }
.k-tl-row.halfopen .dot { background: var(--k-warn); box-shadow: 0 0 0 1px var(--k-warn-border); }
.k-tl-row .lbl { font-size: 12.5px; color: var(--k-ink); font-weight: 600; }
.k-tl-row.down .lbl, .k-tl-row.halfopen .lbl { font-weight: 500; color: var(--k-charcoal-soft); }
.k-tl-row .ts { font-size: 11.5px; color: var(--k-charcoal-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* OS activity — structured who/action/result table */
.k-actv td { vertical-align: top; }
.k-actv .actv-user { font-weight: 600; color: var(--k-ink); }
.k-actv .actv-support { color: #7c3aed; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.22); }
.k-actv .actv-action { font-size: 13px; color: var(--k-ink); }
.k-actv .actv-detail { font-size: 11.5px; color: var(--k-charcoal-soft); margin-top: 3px; word-break: break-all; max-width: 520px; }
.k-actv .actv-info { color: var(--k-charcoal-mute); }

/* direction chip — which way the data flows */
.k-flow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: 999px;
}
.k-flow-chip svg { width: 13px; height: 13px; stroke-width: 2; }
.k-flow-chip.up    { color: var(--k-cyan-deep); background: rgba(var(--k-accent-rgb),0.08); border: 1px solid rgba(var(--k-accent-rgb),0.30); }
.k-flow-chip.local { color: var(--k-ink); background: rgba(11,27,43,0.05); border: 1px solid rgba(11,27,43,0.12); }

/* finding card with a severity rail down its left edge */
.k-finding { border: 1px solid var(--k-hairline); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--k-shadow-card); }
.k-finding + .k-finding { margin-top: 14px; }
.k-finding.crit { box-shadow: inset 3px 0 0 #b91c1c, var(--k-shadow-card); }
.k-finding.high { box-shadow: inset 3px 0 0 #c2410c, var(--k-shadow-card); }
.k-finding.med  { box-shadow: inset 3px 0 0 #b45309, var(--k-shadow-card); }
.k-finding.low  { box-shadow: inset 3px 0 0 var(--k-cyan), var(--k-shadow-card); }
.k-finding.info { box-shadow: inset 3px 0 0 #8b92a8, var(--k-shadow-card); }
.k-finding-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--k-hairline); }
.k-finding-head .grow { min-width: 0; flex: 1 1 auto; }
.k-finding-head .ttl { font-size: 14.5px; font-weight: 700; color: var(--k-ink); letter-spacing: -0.01em; }
.k-finding-head .sub { margin-top: 4px; font-size: 12px; color: var(--k-charcoal-soft); line-height: 1.5; }
.k-finding-head .cid { font-family: var(--k-mono); font-size: 11px; color: var(--k-charcoal-mute); }

/* the redacted <-> full pairing table (the side-by-side) */
.k-pair { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.k-pair thead th {
  padding: 9px 16px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--k-charcoal-mute); border-bottom: 1px solid var(--k-hairline); background: rgba(11,27,43,0.015); text-align: left;
}
.k-pair thead th.up { color: var(--k-cyan-deep); }
.k-pair tbody td { padding: 10px 16px; border-bottom: 1px solid var(--k-hairline); vertical-align: top; }
.k-pair tbody tr:last-child td { border-bottom: 0; }
.k-pair .seam {
  width: 34px; text-align: center; color: var(--k-charcoal-mute);
  border-left: 1px dashed rgba(var(--k-accent-rgb),0.45); border-right: 1px dashed var(--k-hairline);
  background: linear-gradient(to right, rgba(var(--k-accent-rgb),0.05), transparent);
}
.k-pair .seam svg { width: 14px; height: 14px; stroke-width: 2; opacity: 0.7; }
.k-pair .redname { font-family: var(--k-mono); color: var(--k-cyan-deep); font-weight: 600; word-break: break-all; }
.k-pair .fullname { font-family: var(--k-mono); color: var(--k-ink); font-weight: 600; word-break: break-all; }
.k-pair .pid { font-family: var(--k-mono); color: var(--k-charcoal-soft); font-size: 11.5px; }
.k-pair .local-only { color: var(--k-charcoal-mute); font-style: italic; }

/* per-rule fact flags (any/any, no-inspection, no-log) */
.k-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.k-flag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 4px; font-family: var(--k-mono);
  background: rgba(185,28,28,0.07); color: #b91c1c; border: 1px solid rgba(185,28,28,0.18);
}
.k-flag.ok { background: rgba(5,150,105,0.07); color: var(--k-ok); border-color: rgba(5,150,105,0.18); }
.k-flag.neutral { background: rgba(11,27,43,0.04); color: var(--k-charcoal-soft); border-color: rgba(11,27,43,0.10); }

/* decision bar (approve / decline) */
.k-decide {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; border: 1px solid rgba(var(--k-accent-rgb),0.30); background: rgba(var(--k-accent-rgb),0.045); border-radius: 10px;
}
.k-decide .lead { font-size: 13px; color: var(--k-ink); max-width: 52ch; line-height: 1.5; }
.k-decide .lead strong { font-weight: 700; }
.k-decide .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.k-decide .reason {
  width: 150px; font-size: 12px; padding: 8px 11px; font-family: var(--k-font);
  border: 1px solid #e3e8ee; border-radius: var(--k-radius); background: #fff; color: var(--k-ink);
}
.k-decide .reason:focus { outline: none; border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb),0.16); }

/* back link */
.k-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--k-charcoal-soft); margin-bottom: 14px; }
.k-back svg { width: 14px; height: 14px; stroke-width: 2; }
.k-back:hover { color: var(--k-cyan-deep); }

/* ============================================================
   12. Firewall analyzer — Rules table + facet bar
   ============================================================ */
.k-facetbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k-facet-search {
  font-family: var(--k-font); font-size: 12.5px; padding: 7px 12px; width: 200px;
  border: 1px solid #e3e8ee; border-radius: var(--k-radius); background: #fff; color: var(--k-ink);
}
.k-facet-search:focus { outline: none; border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(var(--k-accent-rgb),0.16); }
.k-facet-action { width: auto; padding: 7px 30px 7px 12px; font-size: 12.5px; }
.k-facet {
  font-family: var(--k-mono); font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--k-hairline);
  background: #fff; color: var(--k-charcoal-soft); transition: background-color 120ms, color 120ms, border-color 120ms;
}
.k-facet:hover { border-color: rgba(var(--k-accent-rgb),0.4); color: var(--k-ink); }
.k-facet.active { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }

/* Rules table — denser than the default k-table */
.k-rules tbody td { padding: 9px 16px; font-size: 12.5px; }
.k-rules thead th { padding: 9px 16px; }
.k-rules .prov small { letter-spacing: 0; text-transform: none; }
.k-rules tr.rule-off { opacity: 0.55; }

/* group-by-scope divider row (ADOM / device-group) in the Rules table —
   the noun label + the scope name + a live rule count, tinted like an eyebrow */
.k-rules tr.k-grouphdr td {
  padding: 8px 16px; background: rgba(var(--k-accent-rgb),0.05);
  border-top: 1px solid var(--k-hairline); border-bottom: 1px solid var(--k-hairline);
}
.k-rules tr.k-grouphdr .lbl {
  font-family: var(--k-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--k-cyan-deep); margin-right: 9px;
}
.k-rules tr.k-grouphdr .nm {
  font-family: var(--k-mono); font-size: 12.5px; font-weight: 700; color: var(--k-ink);
}
.k-rules tr.k-grouphdr .ct {
  float: right; font-family: var(--k-mono); font-size: 11px; color: var(--k-charcoal-mute);
}

/* posture-by-domain grid (Overview) — each row drills into the scoped Rules view */
.k-domtable td { vertical-align: middle; }
.k-domrow { cursor: pointer; transition: background-color 120ms; }
.k-domrow:hover { background: rgba(var(--k-accent-rgb),0.045); }
.k-postcell { display: inline-flex; align-items: center; gap: 8px; }
.k-domtable .dgo { text-align: right; }
.k-domrow .go { color: var(--k-charcoal-mute); font-size: 17px; font-weight: 700; }
.k-domrow:hover .go { color: var(--k-cyan-deep); }

/* any / scoped match chips */
.k-any {
  font-family: var(--k-mono); font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
}
.k-scoped { font-family: var(--k-mono); font-size: 10.5px; color: var(--k-charcoal-mute); }

/* inspect yes/no glyph */
.k-yn { font-weight: 700; font-size: 13px; }
.k-yn.ok { color: var(--k-ok); }
.k-yn.no { color: var(--k-err); }

/* logging level */
.k-log { font-family: var(--k-mono); font-size: 11px; color: var(--k-charcoal-soft); }
.k-log.off { color: var(--k-err); font-weight: 600; }

/* analyzer sub-nav tabs (Rules / NAT / Compare) */
.k-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--k-hairline); }
.k-tab {
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--k-charcoal-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 120ms, border-color 120ms;
}
.k-tab:hover { color: var(--k-ink); }
.k-tab.active { color: var(--k-ink); border-bottom-color: var(--k-cyan); font-weight: 700; }

/* NAT exposure arrow (ext -> int) */
.k-nat-flow { font-family: var(--k-mono); font-size: 12px; white-space: nowrap; }
.k-nat-flow .ext { color: var(--k-err); }
.k-nat-flow .arr { color: var(--k-charcoal-mute); padding: 0 4px; }
.k-nat-flow .int { color: var(--k-ink); }

/* ============================================================
   13. Resolved object chips (Rules src/dst/svc) + Objects view
   ============================================================ */
/* resolved object reference chips — replace the old any/scoped booleans */
.k-objs { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.k-objchip {
  font-family: var(--k-mono); font-size: 10.5px; line-height: 1.5; color: var(--k-ink);
  padding: 1px 7px; border-radius: 5px; background: rgba(11,27,43,0.045);
  border: 1px solid var(--k-hairline); white-space: nowrap;
}
/* a group chip is cyan-tinted + carries its member count (hover lists members) */
.k-objchip.grp {
  color: var(--k-cyan-deep); background: rgba(var(--k-accent-rgb),0.07);
  border-color: rgba(var(--k-accent-rgb),0.24); font-weight: 600; cursor: help;
}
.k-objchip.grp .gc {
  margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 700;
  background: rgba(var(--k-accent-rgb),0.16); color: var(--k-cyan-deep);
}

/* Objects view — in-panel section header (Addresses / Services) */
.k-subhead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 15px 20px 7px;
}
.k-subhead .k-eyebrow { display: block; }
.k-subhead .hint { font-family: var(--k-mono); font-size: 11px; color: var(--k-charcoal-mute); }
/* the definition column (CIDR / port-set / member chips) wraps; cap its width */
.k-objtable td:nth-child(3) { max-width: 460px; }
.k-objtable .k-objs { gap: 3px; }

/* inspection matrix — compact category columns + SSL posture badge */
.k-insp td.cat, .k-insp th.cat { text-align: center; width: 52px; }
.k-insp th.cat { font-size: 10px; }
.k-ssl {
  font-family: var(--k-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 1px 6px; border-radius: 5px; white-space: nowrap;
}
.k-ssl.full { color: var(--k-ok); background: var(--k-ok-bg); border: 1px solid var(--k-ok-border); }
.k-ssl.cert { color: var(--k-warn); background: var(--k-warn-bg); border: 1px solid var(--k-warn-border); }
.k-ssl.none { color: var(--k-err); background: var(--k-err-bg); border: 1px solid var(--k-err-border); }

/* ============================================================
   14. On-premise environment markers (Vivid Jade)
   These say "you are on the appliance, data stays on this box" — the
   differentiation from the cyan cloud console, beyond hue alone.
   ============================================================ */
/* (1) persistent top accent rail across the content area (right of sidebar) */
.k-main { position: relative; }
.k-main::before {
  content: ""; position: fixed; top: 0; left: 248px; right: 0; height: 3px; z-index: 50;
  pointer-events: none;
  background: linear-gradient(to right, var(--k-accent), var(--k-accent-deep) 55%, transparent);
}

/* (2) sidebar "On-Premise Appliance" tag, under the wordmark */
.k-env-tag {
  display: flex; align-items: center; gap: 8px; margin: 12px 14px 0;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(var(--k-accent-rgb), 0.08); border: 1px solid rgba(var(--k-accent-rgb), 0.22);
}
.k-env-tag svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--k-accent-deep); stroke-width: 1.9; }
.k-env-tag .lines { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.k-env-tag .t { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--k-accent-deep); }
.k-env-tag .d { font-size: 9px; color: var(--k-charcoal-mute); }

/* (3) LOCAL ONLY page banner — the privacy-moat reminder */
.k-localbanner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(var(--k-accent-rgb), 0.05); border: 1px solid rgba(var(--k-accent-rgb), 0.20);
}
.k-localbanner > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--k-accent-deep); stroke-width: 1.9; }
.k-localbanner .msg { font-size: 12px; color: var(--k-charcoal-soft); line-height: 1.45; }
.k-localbanner .msg strong { color: var(--k-ink); font-weight: 700; }
.k-localbanner .chip {
  margin-left: auto; flex: 0 0 auto; font-family: var(--k-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 5px;
  background: var(--k-accent); color: var(--k-ink); white-space: nowrap;
}

/* (4) appliance-badge connected pulse dot */
.k-appliance-badge { position: relative; }
.k-appliance-badge .pulse {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--k-accent); border: 2px solid #fff;
}
.k-appliance-badge .pulse::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--k-accent);
  animation: k-pulse 2.4s ease-out infinite;
}
@keyframes k-pulse { 0% { transform: scale(0.7); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } }

/* ============================================================
   12. Posture Overview (the analyzer front door) — gauge + radar +
       big-number focus rows + storytelling hero. On the light house
       theme; Jade accent. Ported from the founder-approved mockup.
   ============================================================ */

/* run-picker actions cluster (right side of the picker row) */
.pb-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* hero: gauge + headline + lede + trend + KPIs */
.pb-hero {
  display: grid; grid-template-columns: 288px 1fr; gap: 38px; align-items: center;
  background: #fff; border: 1px solid var(--k-hairline); border-radius: 14px;
  box-shadow: var(--k-shadow-card); padding: 30px 34px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.pb-hero::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--k-accent), transparent 60%);
}
.pb-gauge { position: relative; width: 264px; height: 264px; margin: 0 auto; }
.pb-gauge .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pb-gauge .num { font-size: 74px; font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.pb-gauge .den { font-family: var(--k-mono); font-size: 11px; color: var(--k-charcoal-mute); margin-top: 5px; letter-spacing: 0.02em; }
.pb-grade {
  margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--k-accent-deep); border: 1.5px solid var(--k-accent); border-radius: 999px; padding: 4px 13px;
  background: rgba(var(--k-accent-rgb), 0.06);
}
.pb-gauge .cap { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-charcoal-mute); font-weight: 700; }

.pb-headline { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.028em; line-height: 1.13; color: var(--k-ink); max-width: 22ch; margin: 2px 0 0; }
.pb-headline .em { color: var(--k-accent-deep); }
.pb-lede { font-size: 14.5px; color: var(--k-charcoal-soft); max-width: 58ch; line-height: 1.62; margin-top: 13px; }
.pb-trend { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.pb-trend .delta { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; color: var(--k-accent-deep); }
.pb-trend .delta svg { width: 13px; height: 13px; fill: currentColor; }
.pb-trend .delta.down { color: var(--k-err); }
.pb-trend .delta.flat { color: var(--k-charcoal-mute); }
.pb-trend .tn { font-size: 12px; color: var(--k-charcoal-mute); font-weight: 600; }
.k-kpis.pb-kpis { margin-top: 22px; grid-template-columns: repeat(5, 1fr); }

/* posture shape: radar + dimension bars, side by side */
.shape { display: grid; grid-template-columns: 380px 1fr; gap: 26px; align-items: center; }
.radar { display: grid; place-items: center; overflow: visible; }
.radar svg { overflow: visible; }
.dims { display: flex; flex-direction: column; gap: 13px; }
.dim { display: flex; align-items: center; gap: 15px; }
.dim .dn { width: 118px; font-size: 13px; font-weight: 700; color: var(--k-ink); }
.dim .bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(11, 27, 43, 0.07); overflow: hidden; }
.dim .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--k-accent-deep), var(--k-accent)); }
.dim .fill.warn { background: linear-gradient(90deg, #9a4708, var(--k-warn)); }
.dim .fill.na { background: rgba(11, 27, 43, 0.16); }
.dim .ds { width: 60px; text-align: right; font-family: var(--k-mono); font-size: 13.5px; font-weight: 600; color: var(--k-ink); }
.dim .ds .u, .dimtbl .sc .u { font-size: 11px; font-weight: 600; color: var(--k-charcoal-mute); margin-left: 1px; }

/* focus areas: big-number risk rows */
.cl-risk { display: grid; grid-template-columns: 118px 1fr 212px; gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--k-hairline); position: relative; }
.cl-risk:last-child { border-bottom: 0; }
.cl-risk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.cl-risk.crit::before { background: var(--k-err); }
.cl-risk.high::before { background: #c2410c; }
.cl-risk.med::before  { background: var(--k-warn); }
.cl-risk.low::before  { background: var(--k-accent); }
.cl-risk.info::before { background: var(--k-charcoal-mute); }
.cl-metric { text-align: center; }
.cl-metric .n { font-family: var(--k-mono); font-size: 44px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--k-ink); }
.cl-risk.crit .cl-metric .n { color: var(--k-err); }
.cl-risk.high .cl-metric .n { color: #c2410c; }
.cl-risk.med .cl-metric .n  { color: var(--k-warn); }
.cl-risk.low .cl-metric .n  { color: var(--k-accent-deep); }
.cl-metric .ml { font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--k-charcoal-mute); font-weight: 700; margin-top: 5px; }
.cl-risk h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--k-ink); margin: 7px 0 5px; }
.cl-risk p { font-size: 13px; color: var(--k-charcoal-soft); line-height: 1.5; max-width: 62ch; margin: 0; }
.cl-risk .aff { font-family: var(--k-mono); font-size: 11px; color: var(--k-charcoal-mute); margin-top: 7px; }
.cl-act { border-left: 1px solid var(--k-hairline); padding-left: 18px; }
.cl-act .al { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-accent-deep); font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cl-act .al svg { width: 12px; height: 12px; stroke: var(--k-accent-deep); fill: none; stroke-width: 2.2; }
.cl-act p { font-size: 12.5px; color: var(--k-ink); font-weight: 600; line-height: 1.45; margin: 0; }

/* egress-transparency footer (the moat note) */
.pb-foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 20px; padding: 18px 22px;
  background: rgba(var(--k-accent-rgb), 0.045); border: 1px solid rgba(var(--k-accent-rgb), 0.25); border-radius: 12px; }
.pb-moat { display: flex; gap: 11px; align-items: flex-start; max-width: 66ch; }
.pb-moat > svg { width: 18px; height: 18px; stroke: var(--k-accent-deep); fill: none; stroke-width: 1.8; flex: 0 0 auto; margin-top: 2px; }
.pb-moat .mt { font-size: 12.5px; color: var(--k-charcoal-soft); line-height: 1.5; }
.pb-moat .mt b { color: var(--k-ink); }
.pb-moat .hl { font-family: var(--k-mono); font-size: 10.5px; color: var(--k-charcoal-mute); margin-top: 6px; }

/* narrower main column: stack the hero + shape gracefully */
@media (max-width: 1080px) {
  .pb-hero { grid-template-columns: 1fr; gap: 22px; }
  .pb-gauge { width: 220px; height: 220px; }
  .shape { grid-template-columns: 1fr; }
  .cl-risk { grid-template-columns: 84px 1fr; }
  .cl-act { border-left: 0; padding-left: 0; grid-column: 1 / -1; border-top: 1px solid var(--k-hairline); padding-top: 12px; }
}

/* L4 connection diagnostics — egress self-test stage checklist (task 7bf23687) */
.k-diag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.k-diag-head h3 { margin: 0; font-size: 13px; font-weight: 650; color: var(--k-ink); }
.k-stages { display: grid; gap: 3px; margin: 12px 0 0; }
.k-stage {
  display: grid; grid-template-columns: 16px 92px 1fr; gap: 12px; align-items: baseline;
  padding: 9px 13px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid transparent;
}
.k-stage:nth-child(odd) { background: rgba(11,27,43,0.02); }
.k-stage .glyph { font-weight: 800; text-align: center; line-height: 1; }
.k-stage .nm { font-family: var(--k-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--k-charcoal-mute); }
.k-stage .dtl { color: var(--k-ink); word-break: break-word; }
.k-stage.pass .glyph { color: var(--k-ok); }
.k-stage.skip .glyph { color: var(--k-charcoal-mute); }
.k-stage.skip .dtl { color: var(--k-charcoal-soft); }
.k-stage.fail { background: var(--k-err-bg); border-color: var(--k-err-border); }
.k-stage.fail .glyph { color: var(--k-err); }
.k-stage.fail .dtl { color: var(--k-err); font-weight: 550; }

/* ============================================================
   Demo mode (b130b081) — ribbon + lockdown affordance
   ============================================================ */
.k-demo-ribbon {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 9px 14px; border-radius: var(--k-radius);
  background: linear-gradient(90deg, rgba(var(--k-accent-rgb),0.12), rgba(var(--k-accent-rgb),0.04));
  border: 1px solid rgba(var(--k-accent-rgb),0.3);
}
.k-demo-ribbon .tag {
  font-family: var(--k-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; background: var(--k-cyan-deep);
  padding: 2px 8px; border-radius: 999px; flex: none;
}
.k-demo-ribbon .msg { font-size: 12.5px; color: var(--k-charcoal-soft); }
.k-demo-block {
  padding: 12px 16px; border-radius: var(--k-radius); font-size: 13px;
  color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
}