/* Application shell - the WARRANT direction (/DESIGN.md is binding).
   Layout, the status spine, and the countersign motif. Restraint everywhere else.
   No colour literal may appear in this file; every colour comes from a token. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  font-weight: 600;
  /* Space ABOVE a heading is what separates sections; without it every title collides with
     the block above and the page reads as one undifferentiated column. */
  margin: var(--sp-6) 0 var(--sp-3);
  text-wrap: balance;
}
h1 + *, h2 + *, h3 + *, h4 + * { margin-top: 0; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }
h1 {
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); }
p { max-width: var(--measure); }

code, kbd, pre, samp,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-mono);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Visible keyboard focus on every interactive element (DESIGN.md section 9 "Focus").
   A browser-default ring is a QA failure; so is a glow used instead of an outline. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-control);
}

/* Motion is opt-out everywhere (DESIGN.md section 5). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Shell grid: topbar / rail / canvas / optional right panel --- */
.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "rail   canvas";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-4);
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}

.topbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.topbar__search {
  flex: 1;
  max-width: 420px;
}
.topbar__search input {
  width: 100%;
  height: 30px;
  padding: 0 var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-1);
}

.topbar__spacer {
  flex: 1;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Active-engagement indicator: amber dot, only place amber is used in chrome. */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-0);
  color: var(--text-muted);
}
.live-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  animation: live-pulse 2s ease-in-out infinite;
}

.rail {
  grid-area: rail;
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  padding: var(--sp-4) var(--sp-2);
  overflow-y: auto;
}
.rail__group-label {
  font-size: var(--fs-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
}
.rail__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  margin: 1px 0;
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: var(--fs-2);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.rail__link .icon { color: var(--text-muted); flex: none; }
.rail__link:hover .icon { color: var(--text); }

/* THE CURRENT PAGE. The rail marked it with aria-current but nothing rendered it, so the user
   had no indication of where they were. A brass rule on the leading edge (DESIGN.md section 9)
   plus a raised fill - the rule is the signal, the fill is support, so it survives a
   forced-colours or high-contrast mode where backgrounds are dropped. */
.rail__link[aria-current="page"] {
  background: var(--surface-raised);
  color: var(--text);
  font-weight: 500;
}
.rail__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.rail__link[aria-current="page"] .icon { color: var(--accent); }
/* The collapse control is a <button> inside a POST form so it works without JS, but it must
   read as a rail item, not as a default browser button (which rendered as a stuck-looking box). */
.rail__link--button {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rail__link:hover {
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
}

.canvas {
  grid-area: canvas;
  padding: var(--sp-5);
  overflow-y: auto;
  /* A grid item defaults to min-width:auto, so a wide table (nowrap cells) would grow the
     canvas and overflow the page instead of letting the card's overflow-x:auto engage. Pin
     min-width:0 so the canvas shrinks to its column and wide data scrolls inside its card. */
  min-width: 0;
}

/* --- Signature: status spine (3px leading rail) --- */
.spine {
  border-left: var(--spine-width) solid var(--text-muted);
  padding-left: var(--sp-4);
}
.spine--live { border-left-color: var(--warn); }
.spine--info { border-left-color: var(--sev-info); }
.spine--low { border-left-color: var(--sev-low); }
.spine--medium { border-left-color: var(--sev-medium); }
.spine--high { border-left-color: var(--sev-high); }
.spine--crit { border-left-color: var(--sev-crit); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-color: var(--border-strong);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
/* HUD accent hairline along the top-left of every panel - a mission-control cockpit cue. It is
   purely decorative (fades to transparent), so it never affects text contrast. */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  height: 2px;
  width: 64px;
  max-width: 40%;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-top-left-radius: var(--radius-card);
}
/* A single-column form/detail card: keep it readable instead of sprawling full-width. */
.card--narrow { max-width: 640px; }

/* Provider picker (New/Edit integration): a grid of logo cards; the selected card's logo goes
   from grayscale to full color. Brand colors live only inside the SVG logo files. */
.form-label { font-size: var(--fs-1); color: var(--text-muted); }
.provider-group { margin-top: var(--sp-3); }
.provider-group__label {
  display: block;
  font-size: var(--fs-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.provider-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-0);
  text-align: center;
  cursor: pointer;
}
.provider-card:hover { border-color: var(--accent); color: var(--text); }
.provider-card--selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text);
}
.provider-logo {
  width: 32px;
  height: 32px;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.12s ease;
}
.provider-card:hover .provider-logo,
.provider-card--selected .provider-logo { filter: none; }
.provider-card__name { line-height: 1.15; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-1);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.btn:hover { border-color: var(--text-muted); }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Primary: the one filled control in a view. Authority is the accent's ONLY job. */
.btn--primary, .btn--cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover, .btn--cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
/* Quiet: text-only, for tertiary actions that must not compete. */
.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn--quiet:hover { background: var(--surface-raised); color: var(--text); }
/* Destructive is OUTLINED, never filled: a delete must not be the loudest thing in a row. */
.btn--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--text-danger);
}
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* Ghost/secondary button: quiet chrome that resolves to the accent on hover. */
.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn--ghost:hover { color: var(--text); border-color: var(--accent); }
/* Prominent call-to-action (wizard "Continue"/"Finalize"): taller, more padding, a leading
   chevron that nudges on hover. Disabled state is unmistakably inert. */
.btn--cta {
  height: 38px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-2);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.btn__icon { flex: none; transition: transform 0.12s ease; }
.btn--cta:hover .btn__icon { transform: translateX(2px); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { filter: none; border-color: var(--accent); }
/* Wizard action footer: primary action right-aligned; --split spreads Back / Continue. */
.wizard-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); }
.wizard-actions--split { justify-content: space-between; }

.muted { color: var(--text-muted); }

.btn--block { width: 100%; justify-content: center; height: 36px; }

/* The kill switch: unmistakable, high-contrast danger control. */

/* Stop-scan action: amber (distinct from the red Delete) - a stop, not a destructive delete. */
.btn--warning {
  background: var(--sev-medium);
  border-color: var(--sev-medium);
  color: var(--on-severity);
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Compact action button used in dense table rows. */
.btn--sm { height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-0); }

/* Five-tile summary row (Projects list). Collapses on narrow viewports. */
.stat-row--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .stat-row--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .stat-row--5 { grid-template-columns: repeat(2, 1fr); } }

/* Sortable data-table column headers. */
.data-table__sort {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.data-table__sort:hover { color: var(--accent); }
.data-table__caret { color: var(--accent); font-weight: 700; }
.data-table__actions { text-align: right; }
/* Sticky header so a long list keeps its column labels while scrolling the canvas. */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
/* A secondary muted line inside a table cell (e.g. a title's subtitle). */
.cell-sub { font-size: var(--fs-1); margin-top: 2px; }

/* --- Enterprise list chrome: meta bar, active-filter chips, segmented control, avatars --- */
.meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-2);
}
.meta-bar__count { font-size: var(--fs-1); color: var(--text-muted); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-0);
  text-decoration: none;
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.filter-chip__x { color: var(--text-muted); font-weight: 700; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-raised);
}
.segmented__item {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-muted);
  text-decoration: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.segmented__item:last-child { border-right: 0; }
.segmented__item:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.segmented__item--active {
  background: var(--accent);
  color: var(--accent-ink);
}
.segmented__item--active:hover { background: var(--accent); color: var(--accent-ink); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-0);
  font-weight: 600;
  text-transform: uppercase;
  flex: none;
}
.avatar--named { display: inline-flex; align-items: center; gap: var(--sp-2); }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -6px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar--more { background: var(--surface); color: var(--text-muted); }

/* HTMX in-flight indicator: shown only while a request tied to this element is running. */
.htmx-indicator { opacity: 0; transition: opacity 120ms ease; color: var(--text-muted); font-size: var(--fs-0); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* --- Scope plan: guided per-service scoping --- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb__sep { color: var(--border-strong); }
.breadcrumb__current { color: var(--text); }

.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress__bar { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.stepper {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
}
.step__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.step--ready .step__num {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.step__body { min-width: 0; }
.step__title { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.step__name { font-family: var(--font-display); font-weight: 600; }
.step__desc { color: var(--text-muted); font-size: var(--fs-1); margin: var(--sp-1) 0 0; }
.step__meta { display: flex; align-items: center; gap: var(--sp-4); }
.step__count { color: var(--text-muted); font-size: var(--fs-1); white-space: nowrap; }
@media (max-width: 700px) {
  .step { grid-template-columns: auto 1fr; }
  .step__meta { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; }
}

/* Compact 2-column grid for grouped requirement fields. */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
@media (max-width: 700px) { .field-grid { grid-template-columns: 1fr; } }
.field-grid .field--wide { grid-column: 1 / -1; }

/* Collapsible service-requirements group (native <details>, works without JS). */
.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.fieldset > summary {
  cursor: pointer;
  font-size: var(--fs-1);
  color: var(--text-muted);
  font-weight: 600;
}
.fieldset > summary::marker { color: var(--text-muted); }
.fieldset[open] > summary { margin-bottom: var(--sp-3); }

/* Requirements summary shown in a scoped-target row. */
.reqs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.reqs__item { color: var(--text-muted); font-size: var(--fs-0); }

[x-cloak] { display: none !important; }

/* --- Forms --- */
/* All form wrappers share the same vertical layout so every form reads consistently. */
.form,
.form-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.field,
.form-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label,
.form-row label,
.form-stack > label { font-size: var(--fs-1); color: var(--text-muted); }
.field__error { color: var(--text-danger); font-size: var(--fs-1); margin: 0; }
/* A checkbox row with a title + explanatory line beside it. The global control reset pins the
   box to its native size, so the row is laid out as [box][text] and the text column is what
   grows - a checkbox must never stretch to the field width. */
.field > .field__label { font-size: var(--fs-1); color: var(--text-muted); }
.checkline { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.checkline > input[type="checkbox"] { margin-top: 3px; }
.checkline > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkline strong { font-size: var(--fs-1); color: var(--text); font-weight: 600; }
.checkline small { font-size: var(--fs-0); line-height: 1.45; }
.field small.muted,
.form-row small.muted,
.form-stack small.muted { font-size: var(--fs-1); }

/* The design-system control look applies GLOBALLY to text-like inputs + select + textarea, so a
   control is never a bare default browser widget no matter which wrapper (or none) it sits in.
   Checkbox, radio and file inputs are deliberately EXCLUDED (the native-control reset below
   governs them - native size, never stretched). The command-palette search field opts out
   (it has its own large bg-1 look). Component controls that come LATER in this file (.toolbar,
   .palette__input) still override where they need a different size/fill. */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="number"], input[type="search"]:not(.palette__input), input[type="tel"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"],
input:not([type]),
select,
textarea,
.input {
  padding: 0 var(--sp-3);
  /* DESIGN.md section 9: a control is filled with --surface, NOT --surface-raised. The raised
     token is the hover/row fill, so a control using it reads as page rather than as something
     you can type into - which is exactly what the theme-conformance guard flags. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-2);
  width: 100%;
}
/* Single-line controls have a fixed height; textareas grow and stay vertically resizable. */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="number"], input[type="search"]:not(.palette__input), input[type="tel"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"],
input:not([type]),
select {
  height: 36px;
}
textarea {
  min-height: 84px;
  padding: var(--sp-2) var(--sp-3);
  line-height: var(--lh-body);
  resize: vertical;
}
/* Focus: a clear accent border in addition to the global :focus-visible outline. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}
/* Django's {{ field.errors }} / {{ form.non_field_errors }} render a .errorlist; make it read as
   an error (danger token, no default bullets) instead of a bare browser list. */
.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-danger);
  font-size: var(--fs-1);
}
.errorlist li { margin: 0; }
/* Consistent help text under a control (Django's .helptext + our small.muted). */
.helptext,
.form-row small,
.form-stack small,
.field small { color: var(--text-muted); font-size: var(--fs-1); }
/* Checkboxes and radios are native controls, not full-width text fields. No form rule may
   stretch them (a stretched full-width control produced a broken staircase). This GLOBAL reset
   restores the native size and refuses to grow in ANY parent: a block (width: auto), a row
   flexbox (flex: none), a COLUMN flexbox where align-items:stretch would stretch the cross axis
   (align-self: start), or a grid (justify-self: start). It also themes the control (accent). */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  flex: none;
  align-self: start;
  justify-self: start;
  accent-color: var(--accent);
}
/* Keep a .check label as an inline [x] label even inside a grid form (.form-grid label sets
   display:grid, which would otherwise stack the control above its text). */
.form-grid label.check,
.checks label.check,
label.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.form input[autocomplete="one-time-code"],
input[inputmode="numeric"] {
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
}

/* --- Notices / messages --- */
.messages { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-left: var(--spine-width) solid var(--text-muted);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--fs-2);
}
.notice__glyph { flex: none; line-height: var(--fs-2); color: var(--text-muted); font-weight: 700; }
.notice__text { flex: 1; min-width: 0; }
.notice__close { flex: none; background: none; border: 0; color: var(--text-muted); font-size: var(--fs-3); line-height: 1; cursor: pointer; padding: 0 var(--sp-1); }
.notice__close:hover, .notice__close:focus-visible { color: var(--text); }
.notice--success { border-left-color: var(--sev-low); }
.notice--success .notice__glyph { color: var(--sev-low); }
.notice--error { border-left-color: var(--sev-crit); }
.notice--error .notice__glyph { color: var(--sev-crit); }
.notice--info { border-left-color: var(--accent); }
.notice--info .notice__glyph { color: var(--accent); }
.notice--warning { border-left-color: var(--sev-medium); }
.notice--warning .notice__glyph { color: var(--sev-medium); }

/* --- Accessibility: screen-reader-only content --- */
.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;
}

/* --- Dashboard charts (on-brand, self-hosted SVG/CSS) --- */
.chart { margin: 0; }
.chart__title { font-size: var(--fs-1); color: var(--text-muted); margin-bottom: var(--sp-2); }
.chart--bars .bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.chart--bars .bar {
  display: grid;
  grid-template-columns: 90px 1fr 2.5rem;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-1);
}
.bar__label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); }
.bar__glyph { font-size: 0.85em; color: var(--text-muted); }
.bar__track { height: 10px; background: var(--surface-raised); border-radius: 999px; overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.bar__value { text-align: right; color: var(--text-muted); }
.chart--spark .spark { width: 100%; height: auto; max-width: 260px; }
/* Shared inline-SVG charts (reporting.charts) reused on the dashboards. */
.chart-duo { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.chart-duo__donut { flex: 0 0 auto; }
.chart-duo__bars { flex: 1 1 200px; min-width: 180px; }
.chart-duo__donut svg, .chart-duo__bars svg { max-width: 100%; height: auto; }
.card > svg[role="img"] { max-width: 100%; height: auto; }

/* --- Code + diff blocks --- */
.code-block {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--sp-3);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
}
.code-block.diff span { display: block; }
.diff__add { color: var(--text-success); }
.diff__del { color: var(--text-danger); }
.diff__hunk { color: var(--accent); }
.diff__ctx { color: var(--text-muted); }

/* --- Data table (the workhorse) --- */
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); }
/* Table spec (DESIGN.md section 9): --fs-0 uppercase muted column heads, 36px body rows at
   --fs-1, a hairline between rows, hover on the row, NO zebra striping. Numbers are
   tabular-nums and right-aligned; ids and hosts are mono. */
.data-table thead th {
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-1);
}
.data-table tbody tr { height: 36px; }
.data-table tbody tr:hover { background: var(--surface-raised); }
.data-table td.num, .data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-0);
  letter-spacing: 0.04em;
}
.data-table tbody tr:hover { background: var(--surface-raised); }
/* Category subheader row inside a grouped data table (ArsenalKit). */
.data-table__group th {
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-3);
}
.data-table__group:hover { background: transparent; }
.inline-form { display: inline; margin: 0; }
.inline-form select { height: 28px; }

/* --- User menu --- */
.user-menu { position: relative; }
.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-2);
  z-index: 20;
}
.org-switcher select {
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-1);
  padding: 0 var(--sp-2);
}

.recovery-codes { columns: 2; list-style: none; padding: 0; }
.recovery-codes li {
  padding: var(--sp-1) 0;
  font-size: var(--fs-2);
}
.qr { background: var(--scan-surface); padding: var(--sp-3); border-radius: var(--radius-card); width: max-content; }
.qr svg { display: block; }

/* --- Phase 2: clients, projects, wizard, board --- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-gap { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
/* Run console: a narrow reference rail + a wide live-activity column. */
.run-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .run-grid { grid-template-columns: 1fr; } }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin: var(--sp-4) 0;
}
.toolbar input[type="search"], .toolbar select {
  height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-1);
  padding: 0 var(--sp-3);
}
.check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); }
/* Trailing toolbar action group (Clear filters + Export), pushed to the right edge; wraps on
   narrow screens. Clear is only revealed (Alpine x-show) when a filter is actually active. */
.toolbar__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3); }
.toolbar__clear { display: inline-flex; align-items: center; gap: var(--sp-2); }
.checks { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.checks legend { color: var(--text-muted); font-size: var(--fs-1); padding: 0 var(--sp-2); }

.empty { color: var(--text-muted); padding: var(--sp-5); text-align: center; }
/* Shared empty-state component: centered radar glyph + message + optional action. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty-state__icon { color: var(--text-muted); opacity: 0.7; }
.empty-state p { margin: 0; max-width: 42ch; }
/* Branded error pages (404/403): centered, Operations Console voice (token-only). */
.errorpage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-5); }
.errorpage__code { font-size: var(--fs-7); font-weight: 700; color: var(--accent); letter-spacing: 0.08em; line-height: 1; }
.errorpage__title { margin: 0; }
.errorpage__text { margin: 0; max-width: 46ch; color: var(--text-muted); }
/* Top loading progress bar for HTMX requests (token-only; driven by base.html script). */
.top-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; opacity: 0; z-index: 60; transition: transform 220ms ease, opacity 200ms ease; }
.top-progress--on { opacity: 1; }
/* Accessibility skip link: off-screen until keyboard-focused, then pinned top-left. */
.skip-link { position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 70; transform: translateY(-200%); background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-1); transition: transform 120ms ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }
/* Icon+label button (e.g. the theme toggle sun/moon). */
.btn--icon { display: inline-flex; align-items: center; gap: var(--sp-2); }
.btn__ico { flex: none; }
/* Back-to-top floating button (token-only; shown via Alpine after scroll). */
.to-top { position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-1); cursor: pointer; transition: color 120ms ease, border-color 120ms ease; }
.to-top:hover, .to-top:focus-visible { color: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .top-progress { transition: opacity 120ms ease; } }

.kv { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; }
.kv > div { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3); }
.kv dt { color: var(--text-muted); font-size: var(--fs-1); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* CVSS score gauge: a 0-10 severity-banded track with a marker at the score (theme-aware). */
.cvss-gauge { position: relative; display: block; height: 8px; max-width: 320px; margin-top: var(--sp-2); border-radius: 999px; background: linear-gradient(90deg, var(--sev-low) 0 39%, var(--sev-medium) 39% 69%, var(--sev-high) 69% 89%, var(--sev-crit) 89% 100%); }
.cvss-gauge__marker { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--surface); transform: translateX(-50%); }
/* Active-filter summary (findings list): read-only chips + a clear-all link (token-only). */
.filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.filter-active__label { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.06em; }
.filter-chip { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--text-muted); font-size: var(--fs-0); }
.filter-clear { font-size: var(--fs-0); color: var(--accent); text-decoration: none; margin-left: var(--sp-1); }
.filter-clear:hover, .filter-clear:focus-visible { text-decoration: underline; }
/* External reference chips (CWE -> MITRE, CVE -> NVD) on finding detail (token-only). */
.ref-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 var(--sp-1) var(--sp-1) 0; padding: 1px var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-0); text-decoration: none; }
.ref-chip:hover, .ref-chip:focus-visible { border-color: var(--accent); }
.ref-chip::after { content: "\2197"; color: var(--text-muted); font-size: 0.85em; }
/* Copy-to-clipboard button on mono values (finding detail affected assets). */
.asset-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.copy-btn { flex: none; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 3px; border-radius: var(--radius-control); line-height: 0; }
.copy-btn:hover, .copy-btn:focus-visible { color: var(--accent); background: var(--surface-raised); }
.copy-btn--ok { color: var(--sev-low); }
/* Floating "Copied" confirmation spawned by the global copy handler (base.html). Inverted
   high-contrast pill anchored above the button; fixed-positioned so page scroll never offsets it. */
.copy-toast {
  position: fixed; z-index: 200; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -118%);
  background: var(--text); color: var(--bg);
  font-size: var(--fs-0); font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-control);
  box-shadow: var(--shadow-1); opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.copy-toast--on { opacity: 1; transform: translate(-50%, -128%); }
@media (prefers-reduced-motion: reduce) {
  .copy-toast { transition: opacity 0.01s; }
  .copy-toast--on { transform: translate(-50%, -118%); }
}
/* External reference links on finding detail (long URLs wrap, never overflow). */
.ref-link { color: var(--accent); overflow-wrap: anywhere; }

.plain-list { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.plain-list li { padding: var(--sp-2) var(--sp-3); }
.activity { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.activity li { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-1); }

/* Chips + tags (never a bare colored dot). */
.chip {
  --chip-c: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--chip-c) 70%, transparent);
  /* Low-alpha fill of the state hue with a solid border of the same hue. The TEXT stays on
     --text so a 11px chip label always clears AA on both themes; the hue never carries the
     text. Colour is never the only signal - every chip also renders its state icon. */
  background: color-mix(in srgb, var(--chip-c) 22%, transparent);
  color: var(--text);
  font-size: var(--fs-0);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.chip__icon { color: var(--chip-c); }
.chip__glyph { color: var(--chip-c); font-size: 0.8em; opacity: 0.95; }

/* ---- Report modal (projects list): document preview + edit + downloads -------------------- */
.modal--wide { max-width: 1100px; }
.reportmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.reportmodal__head h2 { margin: 0; }
.reportmodal__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-4); }
@media (max-width: 820px) { .reportmodal__grid { grid-template-columns: 1fr; } }
.reportmodal__edit { display: flex; flex-direction: column; gap: var(--sp-3); }
.reportmodal__edit .field { display: flex; flex-direction: column; gap: 4px; }
.reportmodal__edit .field__label { font-family: var(--font-mono); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.reportmodal__preview { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-raised); min-width: 0; }
.reportmodal__previewbar { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.08em; }
.reportmodal__frame { width: 100%; height: 62vh; min-height: 360px; border: 0; }
.report-logo-preview { max-height: 64px; max-width: 240px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--sp-2); }
.input-color { width: 56px; height: 34px; padding: 2px; }

/* ---- Rich-text editor (report modal): a compact Word-like editor for the free-text sections --- */
.rte__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--surface-raised); }
.rte__btn { min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--fs-1); line-height: 1; cursor: pointer; }
.rte__btn:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.rte__btn:active { background: var(--accent); color: var(--accent-ink); }
.rte__sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.rte__area { min-height: 130px; max-height: 260px; overflow-y: auto; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: 0 0 var(--radius-control) var(--radius-control); background: var(--surface-raised); color: var(--text); font-size: var(--fs-2); line-height: 1.5; }
.rte__area:focus { border-color: var(--border-strong); outline: 2px solid var(--accent); outline-offset: 1px; }
.rte__area:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.rte__area h2 { font-size: var(--fs-3); margin: var(--sp-2) 0 4px; }
.rte__area h3 { font-size: var(--fs-2); margin: var(--sp-2) 0 4px; }
.rte__area ul, .rte__area ol { margin: 4px 0 4px var(--sp-4); }
.rte__area p { margin: 4px 0; }

/* ============================================================================
   NEW PROJECT wizard - redesigned two-column setup (section cards + sticky rail)
   ============================================================================ */
.wizard2 { max-width: 1180px; }
.wiz-hero { margin-bottom: var(--sp-5); }
.wiz-hero__eyebrow { display: inline-block; font-size: var(--fs-0); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-2); }
.wiz-hero h1 { margin: 0 0 var(--sp-1); }
.wiz-hero p { margin: 0; max-width: 70ch; }

.wizard2__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .wizard2__grid { grid-template-columns: 1fr; } }
.wizard2__main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Section cards */
.wizsec { background: var(--surface); border: 1px solid var(--border); border-top-color: var(--border-strong); border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.wizsec__head { display: flex; align-items: flex-start; gap: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.wizsec__ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-control); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.wizsec__head h2 { margin: 0; font-size: var(--fs-3); }
.wizsec__head p { margin: 2px 0 0; font-size: var(--fs-1); }
.wizsec__body { min-width: 0; }

/* Toggle switch (Authenticated testing) - built from the checkbox, escapes the native control */
.switch { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.switch__track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border-strong); position: relative; transition: background 0.15s ease, border-color 0.15s ease; margin-top: 1px; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s ease, background 0.15s ease; }
.switch input:checked + .switch__track { background: color-mix(in srgb, var(--accent) 38%, transparent); border-color: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: var(--accent); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch__label { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.switch__label .field__hint { margin: 0; }

/* Scope target box - a terminal-styled input for the in-scope targets */
.scope-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-1); color: var(--text-muted); margin: 0 0 var(--sp-3); }
.scope-current__n { font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
.scopebox { border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--surface-raised); }
.scopebox__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-0); letter-spacing: 0.1em; border-bottom: 1px solid var(--border); background: var(--surface); }
.scopebox__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.scopebox .scopebox__area { border: 0 !important; border-radius: 0 !important; background: var(--surface-raised) !important; box-shadow: none !important; resize: vertical; line-height: 1.7; }
.scopebox .scopebox__area:focus { box-shadow: none !important; outline: none; }
.scopebox:focus-within { border-color: var(--border-strong); outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sticky right rail: what-happens info + primary actions */
.wizard2__rail { min-width: 0; }
.wizrail { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.wizrail__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-4); }
.wizrail__card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-2); }
.wizrail__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.wizrail__list li { display: flex; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); line-height: 1.5; }
.wizrail__mk { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-0); font-weight: 700; }
.wizrail__note { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-control); background: color-mix(in srgb, var(--sev-medium) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sev-medium) 32%, transparent); font-size: var(--fs-1); color: var(--text-muted); line-height: 1.45; }
.wizrail__note-ico { color: var(--sev-medium); flex: none; font-weight: 700; }
.wizrail__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 900px) { .wizrail { position: static; } }

/* New Project - Testing mode radio cards (discover+report vs exploit+validate) */
.moderad-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) { .moderad-group { grid-template-columns: 1fr; } }
.moderad { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-raised); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.moderad input { flex: none; margin: 3px 0 0; accent-color: var(--accent); }
.moderad__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.moderad__title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--text); }
.moderad__title svg { flex: none; color: var(--accent); }
.moderad__desc { font-size: var(--fs-1); color: var(--text-muted); line-height: 1.45; }
.moderad:hover { border-color: var(--accent); }
.moderad:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.moderad:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The exploit option is the higher-consequence choice: caution-tinted glyph + selected state. */
.moderad--exploit .moderad__title svg { color: var(--sev-high); }
.moderad--exploit input { accent-color: var(--sev-high); }
.moderad--exploit:hover { border-color: var(--sev-high); }
.moderad--exploit:has(input:checked) { border-color: var(--sev-high); background: color-mix(in srgb, var(--sev-high) 9%, transparent); }

/* Severity x confidence matrix (plan.md 21.1): right-aligned tabular counts. */
.conf-matrix__num { text-align: right; font-variant-numeric: tabular-nums; }

/* Proof of Exploit block (plan.md 21.2): a state-tinted validation card in the finding modal. */
.proof-box {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong); border-radius: var(--radius-control);
}
.proof-box--proven { border-left-color: var(--text-success); background: color-mix(in srgb, var(--text-success) 7%, var(--surface-raised)); }
.proof-box--possible { border-left-color: var(--sev-medium); background: color-mix(in srgb, var(--sev-medium) 7%, var(--surface-raised)); }
.proof-box--refuted { border-left-color: var(--ink-3); opacity: 0.85; }
.proof-box__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.proof-box__state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.proof-box--proven .proof-box__state { color: var(--text-success); }
.proof-box--possible .proof-box__state { color: var(--sev-medium); }
.proof-box__pct { font-size: var(--fs-0); }
.proof-box__meter { height: 5px; margin-top: var(--sp-2); border-radius: 3px; background: var(--surface); overflow: hidden; }
.proof-box__meter-fill { height: 100%; background: var(--text-muted); }
.proof-box--proven .proof-box__meter-fill { background: var(--text-success); }
.proof-box--possible .proof-box__meter-fill { background: var(--sev-medium); }
.proof-box__pre {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control);
  font-family: var(--font-mono); font-size: var(--fs-0); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto;
}
.proof-box__oast { margin-top: var(--sp-2); font-size: var(--fs-1); }
.proof-box__oast .tag { margin-left: 4px; }

/* Inline HTTP request/response evidence (plan.md 21.3): a two-part monospace block. */
.evidence-item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.evidence-item:last-child { border-bottom: 0; }
.evidence-item__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.httpblock { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (min-width: 720px) { .httpblock { grid-template-columns: 1fr 1fr; } }
.httpblock__part { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.httpblock__label {
  display: block; padding: 4px var(--sp-2); font-size: var(--fs-0); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); background: var(--surface-raised); border-bottom: 1px solid var(--border);
}
.httpblock__part pre {
  margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-0); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto;
}

/* Exploit-chain kill-chain stepper (plan.md 21.4). */
.killchains { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.killchain {
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--sev-high);
  border-radius: var(--radius-card);
}
.killchain__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.killchain__name { font-weight: 700; color: var(--text); }
.killchain__steps { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: stretch; }
.killchain__step {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  padding: var(--sp-2) var(--sp-3); background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-control); flex: 1 1 200px;
}
.killchain__step--impact { border-color: color-mix(in srgb, var(--sev-high) 40%, var(--border)); }
.killchain__num {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--sev-high) 16%, transparent); color: var(--sev-high);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-0);
}
.killchain__label { display: block; font-size: var(--fs-0); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.killchain__how { margin: var(--sp-3) 0 0; font-size: var(--fs-1); line-height: 1.5; }

/* Scan activity timeline (plan.md 22.1): a reverse-chronological audit trail with a left rail. */
.timeline { list-style: none; margin: var(--sp-3) 0 0; padding: 0; position: relative; }
.timeline__item { position: relative; display: flex; padding: 0 0 var(--sp-3) 34px; }
.timeline__item::before { /* the rail */
  content: ""; position: absolute; left: 10px; top: 20px; bottom: -4px; width: 1px; background: var(--border);
}
.timeline__item:last-child::before { display: none; }
.timeline__glyph {
  position: absolute; left: 0; top: 2px; z-index: 1; flex: none;
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted);
}
.timeline__item--ok .timeline__glyph { color: var(--text-success); border-color: color-mix(in srgb, var(--text-success) 45%, var(--border)); }
.timeline__item--blocked .timeline__glyph { color: var(--sev-high); border-color: color-mix(in srgb, var(--sev-high) 45%, var(--border)); }
.timeline__body { min-width: 0; flex: 1 1 auto; }
.timeline__head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.timeline__tool { font-weight: 700; color: var(--text); }
.timeline__time { font-size: var(--fs-0); margin-left: auto; white-space: nowrap; }
.timeline__out { margin: 2px 0 0; font-size: var(--fs-0); color: var(--text-muted); overflow-wrap: anywhere; }
/* Gate transparency (plan.md 22.2): the blocked-actions trust surface. */
.gatewall {
  border: 1px solid color-mix(in srgb, var(--sev-high) 40%, var(--border));
  border-left: 3px solid var(--sev-high);
  border-radius: var(--radius-1); background: color-mix(in srgb, var(--sev-high) 6%, var(--surface));
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
}
.gatewall__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--sev-high); }
.gatewall__title { font-weight: 700; letter-spacing: .02em; }
.gatewall__reasons { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-left: auto; }
.gatewall__lead { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-0); }
.gatewall__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.gatewall__item {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-1) 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.gatewall__item:first-child { border-top: 0; }
.gatewall__tool { font-weight: 700; color: var(--text); }
.gatewall__detail { font-size: var(--fs-0); overflow-wrap: anywhere; }
.gatewall__item .timeline__time { margin-left: auto; }
/* MITRE ATT&CK coverage matrix (plan.md 22.3): tactic columns of technique cells. */
.attackmap {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-3); align-items: start;
}
.attackcol { border: 1px solid var(--border); border-radius: var(--radius-1); background: var(--surface); overflow: hidden; }
.attackcol__head {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
}
.attackcol__tactic { font-weight: 700; color: var(--text); font-size: var(--fs-1); }
.attackcol__id { font-size: var(--fs-0); }
.attackcol__count {
  margin-left: auto; min-width: 22px; text-align: center; font-weight: 700; font-size: var(--fs-0);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: var(--radius-1); padding: 0 var(--sp-1);
}
.attackcol__list { list-style: none; margin: 0; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.attackcell {
  border: 1px solid var(--border); border-radius: var(--radius-1);
  padding: var(--sp-2); background: var(--surface-raised);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
}
.attackcell__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.attackcell__id { font-size: var(--fs-0); color: var(--accent); font-weight: 700; }
.attackcell__n { margin-left: auto; font-size: var(--fs-0); color: var(--text-muted); }
.attackcell__name { font-size: var(--fs-1); color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }
.attackcell__tools { font-size: var(--fs-0); margin-top: 3px; overflow-wrap: anywhere; }
/* SC tab: live-target screenshot gallery (plan.md screenshot feature). */
.shotgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-3);
}
.shot { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-1); background: var(--surface); overflow: hidden; }
.shot__frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-raised); }
.shot__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-bottom: 1px solid var(--border); }
.shot__cap { padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.shot__url { font-size: var(--fs-0); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-0); flex-wrap: wrap; }
/* Vuln-class coverage matrix (plan.md 22.4): status chips readable without color + a cell grid. */
.vcov-head { margin-top: var(--sp-6); }
.vcov-legend { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.vchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-0); font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap;
}
.vchip__glyph { font-size: var(--fs-0); line-height: 1; }
.vchip--tested { color: var(--text-success); border-color: color-mix(in srgb, var(--text-success) 45%, var(--border)); background: color-mix(in srgb, var(--text-success) 10%, transparent); }
.vchip--partial { color: var(--sev-medium); border-color: color-mix(in srgb, var(--sev-medium) 45%, var(--border)); background: color-mix(in srgb, var(--sev-medium) 12%, transparent); }
.vchip--not_tested { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 8%, transparent); }
.vchip--blocked_policy { color: var(--sev-high); border-color: color-mix(in srgb, var(--sev-high) 45%, var(--border)); background: color-mix(in srgb, var(--sev-high) 10%, transparent); }
.vcov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); }
.vcell {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-1);
  background: var(--surface); padding: var(--sp-2) var(--sp-3);
}
.vcell--tested { border-left-color: var(--text-success); }
.vcell--partial { border-left-color: var(--sev-medium); }
.vcell--not_tested { border-left-color: var(--border-strong); }
.vcell--blocked_policy { border-left-color: var(--sev-high); }
.vcell__top { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; }
.vcell__name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.vcell__meta { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 4px; flex-wrap: wrap; }
.vcell__wstg { font-size: var(--fs-0); }
.vcell__tools { font-size: var(--fs-0); overflow-wrap: anywhere; }
/* Security-posture scorecard (plan.md 23.1): an A-F grade + per-header critique rows. */
.scorecard { border: 1px solid var(--border); border-radius: var(--radius-1); background: var(--surface); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.scorecard__head { display: flex; align-items: center; gap: var(--sp-3); }
.scorecard__grade {
  flex: none; width: 52px; height: 52px; border-radius: var(--radius-1); display: grid; place-items: center;
  font-size: var(--fs-4); font-weight: 800; border: 2px solid var(--border);
}
.scorecard__grade--a { color: var(--text-success); border-color: color-mix(in srgb, var(--text-success) 55%, var(--border)); background: color-mix(in srgb, var(--text-success) 12%, transparent); }
.scorecard__grade--b { color: var(--text-success); border-color: color-mix(in srgb, var(--text-success) 40%, var(--border)); background: color-mix(in srgb, var(--text-success) 8%, transparent); }
.scorecard__grade--c { color: var(--sev-medium); border-color: color-mix(in srgb, var(--sev-medium) 50%, var(--border)); background: color-mix(in srgb, var(--sev-medium) 12%, transparent); }
.scorecard__grade--d { color: var(--sev-high); border-color: color-mix(in srgb, var(--sev-high) 45%, var(--border)); background: color-mix(in srgb, var(--sev-high) 10%, transparent); }
.scorecard__grade--f { color: var(--sev-crit); border-color: color-mix(in srgb, var(--sev-crit) 50%, var(--border)); background: color-mix(in srgb, var(--sev-crit) 12%, transparent); }
.scorecard__meta { min-width: 0; }
.scorecard__url { font-size: var(--fs-1); overflow-wrap: anywhere; }
.hdrlist { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.hdrrow { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); flex-wrap: wrap; }
.hdrrow:first-child { border-top: 0; }
.hdrrow__glyph { flex: none; width: 16px; text-align: center; }
.hdrrow--ok .hdrrow__glyph { color: var(--text-success); }
.hdrrow--weak .hdrrow__glyph { color: var(--sev-medium); }
.hdrrow--missing .hdrrow__glyph { color: var(--sev-high); }
.hdrrow--missing .hdrrow__name { color: var(--text-muted); }
.hdrrow__name { font-weight: 600; }
.hdrrow__val { font-size: var(--fs-0); overflow-wrap: anywhere; }
.scorecard__disc { margin-top: var(--sp-3); font-size: var(--fs-0); display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }
.tls-facts { margin-top: var(--sp-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-1) var(--sp-4); }
.tls-fact { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.tls-fact__k { flex: none; min-width: 62px; font-size: var(--fs-0); }
.tls-fact__v { overflow-wrap: anywhere; font-size: var(--fs-0); }
.tls-issues { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.tls-issue { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-0); color: var(--sev-high); }
.tls-issue__glyph { flex: none; font-size: var(--fs-0); }

/* Report download menu (projects list "Report" button -> PDF / DOCX direct downloads). */
.report-menu { position: relative; display: inline-block; }
.report-menu > summary { list-style: none; cursor: pointer; }
.report-menu > summary::-webkit-details-marker { display: none; }
.report-menu__list {
  position: absolute; z-index: 50; top: calc(100% + var(--sp-1)); left: 0; min-width: 130px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-control);
  box-shadow: 0 6px 18px var(--scrim); padding: var(--sp-1);
  display: flex; flex-direction: column; gap: 2px;
}
.report-menu__item {
  display: block; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-control);
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-1); font-weight: 600;
}
.report-menu__item:hover, .report-menu__item:focus { background: var(--surface); color: var(--accent); }

/* --- Icon primitive (DESIGN.md section 6): one Lucide sprite, currentColor, 16/20/24 only. --- */
.icon { display: inline-block; vertical-align: -0.125em; flex: none; }
.chip__icon { width: 14px; height: 14px; }
.empty-state__icon { color: var(--text-muted); margin-bottom: var(--sp-3); }

/* --- Signature motif: the COUNTERSIGN BLOCK (DESIGN.md section 7) ------------------------
   A stamped block carrying the authorization facts for whatever is on screen: the subject,
   the window it is valid for, and the gate decision. It appears EXACTLY ONCE per page, in
   the header of a page that renders inside an authorization envelope (Workspace and
   Dashboard archetypes), and once on a report cover. Never in a list, never on a card,
   never twice. A motif applied everywhere is decoration, which is what the corner brackets
   this replaced had become. */
.countersign {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-control);
  min-width: 0;
}
.countersign__label {
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.countersign__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--text);
}
.countersign__subject { overflow-wrap: anywhere; }
.countersign__decision { flex: none; font-weight: 500; }
.countersign__decision--permitted { color: var(--text-success); }
.countersign__decision--blocked { color: var(--text-danger); }
.countersign__window {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Page header pattern (DESIGN.md section 8) ------------------------------------------
   Title + one specific sentence on the left, the countersign block on the right. Asymmetric
   on purpose: the centred-symmetric header is the default this pass exists to break. */
.pagehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pagehead__purpose {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-2);
  max-width: var(--measure);
}
.pagehead__actions { display: flex; align-items: center; gap: var(--sp-2); }
.pagehead__subject {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .pagehead { grid-template-columns: minmax(0, 1fr); }
}



/* ============================================================================
   WARRANT CHARACTER LAYER (/DESIGN.md sections 4, 7, 8)

   Phase 3 was subtractive: it removed the banned cockpit/terminal decoration. Correctness is
   not character, so this layer supplies the direction's OWN detailing - the stamped precision
   of an issued instrument. Everything here is structural (rules, surface steps, density); no
   glow, no ambient motion, no alarm colour as chrome, nothing that reintroduces the ban list.
   ============================================================================ */

/* The issue rule: a short brass segment above a page header, like the inked edge of a stamp.
   It is the direction's detailing signature and may sit on ANY archetype - unlike the
   countersign block, which states authorization facts and stays once-per-page on Workspace. */
.pagehead { position: relative; }
.pagehead::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-4) * -1);
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
}

/* Give the canvas a surface hierarchy so a card is a panel ON something, not a rectangle in a
   void. The rail and canvas were previously the same flat value. */
.canvas { background: var(--bg); }
/* Card headers read as a titled compartment: title left, count/meta right, hairline under. */
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.card__count {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Tables get presence: the header rule is the strong border, the body sits on the surface, and
   the first column carries the weight so a row scans left-to-right. */
.data-table thead th { border-bottom: 1px solid var(--border-strong); }
.data-table tbody td:first-child { color: var(--text); font-weight: 500; }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* An empty cell is a fact, not a gap: render the placeholder quietly rather than as a stray dash
   sitting at full text weight. */
.data-table td.empty-cell { color: var(--text-muted); }

/* The wordmark is the product's signature in the chrome: display face with a brass underline
   rule rather than the blinking terminal cursor this replaced. */
.topbar__brand {
  position: relative;
  padding-bottom: 3px;
}
.topbar__brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
}

/* Rail: the active item is marked by a brass rule, and section labels sit on a hairline so the
   rail reads as an indexed register rather than a plain list. */
.rail__group-label {
  padding-top: var(--sp-4);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.rail__group-label:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* --- Platform dashboard layout (restored: removed in error with the decoration layers) --- */
/* --- Platform dashboard: 6-up KPI readout row + terminal-style live ops feed. --- */
.stat-row--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1400px) { .stat-row--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .stat-row--6 { grid-template-columns: repeat(2, 1fr); } }
.opslog li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-1); }
.opslog__t { flex: none; }
.opslog__a { color: var(--text); }
.opslog__who { overflow-wrap: anywhere; min-width: 0; }
.opslog__ip { color: var(--text-muted); margin-left: auto; }
.opslog__flag { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-muted) 40%, transparent); display: block; }
.opslog__geo { flex: none; font-size: var(--fs-1); line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* Platform dashboard: project-status bar chart (replaces the status count table). */
.status-bars { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.status-bar { display: grid; grid-template-columns: 118px 1fr 34px; align-items: center; gap: var(--sp-3); }
.status-bar__track { height: 10px; background: var(--surface-raised); border-radius: 999px; overflow: hidden; }
.status-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--text-muted); transition: width 0.4s ease; }
.status-bar__fill--draft { background: var(--sev-info); }
.status-bar__fill--configuring { background: var(--warn); }
.status-bar__fill--configured { background: var(--sev-low); }
.status-bar__fill--ready { background: var(--accent); }
.status-bar__fill--archived { background: var(--text-muted); }
.status-bar__n { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }


/* --- Component rules restored after an over-broad deletion during the design pass.
   Token names migrated; the banned decoration (glow / grid / scanline / hazard chrome /
   blood-drip) is deliberately NOT restored. --- */
.chip--info, .chip--draft { --chip-c: var(--sev-info); }
.chip--low, .chip--configured { --chip-c: var(--sev-low); }
.chip--configuring { --chip-c: var(--warn); }
.chip--ready { --chip-c: var(--accent); }
.chip--archived { --chip-c: var(--text-muted); }
.chip--medium { --chip-c: var(--sev-medium); }
.chip--high { --chip-c: var(--sev-high); }
.chip--crit, .chip--critical { --chip-c: var(--sev-crit); }
.chip--urgent { --chip-c: var(--sev-crit); }
.chip--proven { --chip-c: var(--sev-low); }
.chip--possible { --chip-c: var(--sev-medium); }
.chip--refuted { --chip-c: var(--text-muted); }
.chip--unverified { --chip-c: var(--text-muted); }
.chip--fixed { --chip-c: var(--sev-low); }
.chip--not_fixed { --chip-c: var(--sev-crit); }
.chip--partial { --chip-c: var(--sev-medium); }
.chip--inconclusive { --chip-c: var(--sev-info); }
.sevbar-cell { display: flex; align-items: center; gap: var(--sp-2); }
.sevbar {
  display: flex; height: 8px; width: 84px; flex: none;
  border-radius: 999px; overflow: hidden; background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sevbar--wide { width: 100%; max-width: 320px; height: 10px; }
.sevbar__seg { height: 100%; min-width: 2px; }
.sevbar__seg--crit { background: var(--sev-crit); }
.sevbar__seg--high { background: var(--sev-high); }
.sevbar__seg--medium { background: var(--sev-medium); }
.sevbar__seg--low { background: var(--sev-low); }
.sevbar__seg--info { background: var(--sev-info); }
.sevbar-cell__total { font-size: var(--fs-1); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip--open { --chip-c: var(--sev-high); }
.chip--in_remediation { --chip-c: var(--warn); }
.chip--retest { --chip-c: var(--accent); }
.chip--resolved { --chip-c: var(--sev-low); }
.chip--closed { --chip-c: var(--text-muted); }
.chip--risk_accepted { --chip-c: var(--sev-info); }
.chip--false_positive { --chip-c: var(--text-muted); }
.chip--ok { --chip-c: var(--sev-low); }
.chip--approaching { --chip-c: var(--warn); }
.chip--breached { --chip-c: var(--sev-crit); }
.chip--uploaded { --chip-c: var(--sev-info); }
.chip--parsed { --chip-c: var(--accent); }
.chip--committed { --chip-c: var(--sev-low); }
.chip--failed { --chip-c: var(--sev-crit); }
.chip--created { --chip-c: var(--sev-low); }
.chip--merged { --chip-c: var(--warn); }
.chip--duplicate { --chip-c: var(--text-muted); }
.chip--running { --chip-c: var(--warn); }
.chip--running .chip__glyph {
  display: inline-block; box-sizing: border-box; width: 11px; height: 11px;
  border: 2px solid color-mix(in srgb, var(--chip-c) 30%, transparent);
  border-top-color: var(--chip-c); border-radius: 50%;
  color: transparent; text-indent: -9999px; overflow: hidden;
  animation: scan-sweep 0.75s linear infinite;
}
.chip--running {
  animation: scan-pulse 1.7s ease-in-out infinite;
  background: color-mix(in srgb, var(--chip-c) 10%, transparent);
}
.chip--paused { --chip-c: var(--warn); }
.chip--stopped { --chip-c: var(--text-muted); }
.chip--done { --chip-c: var(--sev-low); }
.chip--failed, .chip--halted_breaker { --chip-c: var(--sev-crit); }
.chip--permitted { --chip-c: var(--sev-low); }
.chip--blocked_breaker { --chip-c: var(--sev-crit); }
.chip--qa { --chip-c: var(--accent); }
.chip--approved { --chip-c: var(--sev-low); }
.chip--published { --chip-c: var(--warn); }
.chip--queued, .chip--running { --chip-c: var(--accent); }
.chip--done { --chip-c: var(--sev-low); }
.chip--human { --chip-c: var(--sev-low); }
.chip--ai { --chip-c: var(--accent); }
.chip--template, .chip--library { --chip-c: var(--text-muted); }
.chip--remediated, .chip--assigned { --chip-c: var(--accent); }
.chip--verified, .chip--passed { --chip-c: var(--sev-low); }
.chip--failed { --chip-c: var(--sev-crit); }
.chip--partially_fixed { --chip-c: var(--sev-medium); }
.chip--requested { --chip-c: var(--sev-info); }
.chip--wont_fix, .chip--cancelled { --chip-c: var(--text-muted); }
.chip--ok { --chip-c: var(--sev-low); }
.chip--syncing { --chip-c: var(--accent); }
.chip--error { --chip-c: var(--sev-crit); }
.chip--never { --chip-c: var(--text-muted); }
.chip--unverified { --chip-c: var(--sev-info); }
.chip--in_review { --chip-c: var(--accent); }
.chip--verified { --chip-c: var(--sev-low); }
.chip--quarantined { --chip-c: var(--sev-crit); }
.chip--rejected { --chip-c: var(--text-muted); }
.tag {
  display: inline-block;
  padding: 0 var(--sp-2);
  margin: 1px;
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
}
.spine--draft { border-left-color: var(--sev-info); }
.spine--configuring { border-left-color: var(--warn); }
.spine--configured { border-left-color: var(--sev-low); }
.spine--ready { border-left-color: var(--accent); }
.spine--archived { border-left-color: var(--text-muted); }
.spine--critical { border-left-color: var(--sev-crit); }
.spine--qa { border-left-color: var(--accent); }
.spine--approved { border-left-color: var(--sev-low); }
.spine--published { border-left-color: var(--warn); }
.spine--in_progress, .spine--remediated, .spine--assigned { border-left-color: var(--accent); }
.spine--verified, .spine--passed { border-left-color: var(--sev-low); }
.spine--failed { border-left-color: var(--sev-crit); }
.spine--partially_fixed { border-left-color: var(--sev-medium); }
.spine--requested { border-left-color: var(--sev-info); }
.spine--wont_fix, .spine--cancelled, .spine--risk_accepted { border-left-color: var(--text-muted); }
.spine--ok { border-left-color: var(--sev-low); }
.spine--syncing { border-left-color: var(--accent); }
.spine--error { border-left-color: var(--sev-crit); }
.spine--never { border-left-color: var(--text-muted); }
.spine--verified { border-left-color: var(--sev-low); }
.spine--unverified { border-left-color: var(--sev-info); }
.spine--in_review { border-left-color: var(--accent); }
.spine--quarantined { border-left-color: var(--sev-crit); }
.spine--rejected { border-left-color: var(--text-muted); }
.spine--queued { border-left-color: var(--accent); }
.spine--running { border-left-color: var(--warn); }
.spine--paused { border-left-color: var(--warn); }
.spine--stopped { border-left-color: var(--text-muted); }
.spine--done { border-left-color: var(--sev-low); }
.spine--failed { border-left-color: var(--sev-crit); }
.spine--halted_breaker { border-left-color: var(--sev-crit); }
.checklist__bar { height: 6px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; margin: var(--sp-2) 0 var(--sp-3); }
.checklist__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.checklist__item { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.checklist__item:last-child { border-bottom: none; }
.checklist__glyph { flex: 0 0 auto; width: 1.1em; text-align: center; color: var(--text-muted); font-family: var(--font-mono); }
.checklist__text { color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.checklist__item--in_progress { font-weight: 600; }
.checklist__item--in_progress .checklist__text { color: var(--accent); }
.checklist__item--done .checklist__glyph { color: var(--sev-low); }
.checklist__item--done .checklist__text { color: var(--text-muted); text-decoration: line-through; }
.checklist__item--failed .checklist__text { color: var(--text-danger); }
.checklist__item--skipped .checklist__text { color: var(--text-muted); }
.checklist__item--interrupted .checklist__glyph { color: var(--sev-medium); }
.checklist__item--interrupted .checklist__text { color: var(--text-muted); }
.checklist__item--not_reached .checklist__text { color: var(--text-muted); }
.checklist__note { margin-left: auto; font-size: var(--fs-0); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.checklist__item--interrupted .checklist__note { color: var(--sev-medium); }
.run-card { margin-bottom: var(--sp-4); }
.run-card:last-child { margin-bottom: 0; }
.run-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.run-card__head h2 { margin: 0; }
.run-progress { display: inline-flex; align-items: center; gap: var(--sp-2); }
.progress-ring { flex: none; }
.progress-ring__track { stroke: var(--border); }
.progress-ring__arc { stroke: var(--accent); transition: stroke-dasharray 0.4s ease; }
.progress-ring__num { fill: var(--text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.toolset { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.toolset__item { display: inline-flex; align-items: baseline; gap: var(--sp-1); padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.toolset__name { color: var(--text); }
.toolset__count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.toolset__item--blocked { border-color: var(--sev-crit); }
.toolset__flag { color: var(--text-danger); font-size: var(--fs-1); }
.oastlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.oastlist__item { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); background: var(--surface); border-radius: var(--radius-control); }
.oastlist__glyph { color: var(--text-muted); font-size: var(--fs-1); }
.oastlist__item.spine--critical .oastlist__glyph { color: var(--sev-crit); }
.oastlist__label { color: var(--text); }
.oastlist__token { font-size: var(--fs-1); }
.oastlist__hit { margin-left: auto; color: var(--text-danger); font-size: var(--fs-1); }
.oastlist__wait { margin-left: auto; font-size: var(--fs-1); }
.leak-tags { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.leak-tag { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.leak-tag__n { color: var(--sev-crit); font-weight: 700; font-variant-numeric: tabular-nums; }
.leak-tag__l { color: var(--text-muted); font-size: var(--fs-1); }
.leak-tags--lg .leak-tag { padding: 5px 14px; }
.leak-tags--lg .leak-tag__n { font-size: var(--fs-4); }
.leak-tags--lg .leak-tag__l { font-size: var(--fs-2); }
.threat-board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.threat-board__title { margin: 4px 0 0; letter-spacing: 0.03em; }
.threat-board__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); }
.threat-level { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--sp-4); border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: var(--radius-control); background: var(--surface-raised); }
.threat-level__label { color: var(--text-muted); font-size: var(--fs-0); letter-spacing: 0.12em; }
.threat-level__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); color: var(--text); }
.threat-level--high { border-left-color: var(--sev-high); }
.threat-level--high .threat-level__value { color: var(--sev-high); }
.threat-level--medium { border-left-color: var(--sev-medium); }
.threat-level--low { border-left-color: var(--sev-low); }
.threat-level__pulse { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 9px; height: 9px; border-radius: 999px; background: var(--ink-3); }
.threat-metric { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); min-width: 0; }
.threat-metric__n { font-size: var(--fs-6); font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.threat-metric__l { color: var(--text-muted); font-size: var(--fs-1); }
.threat-sev { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.threat-breakdown { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.threat-breakdown__label { display: block; margin-bottom: var(--sp-1); color: var(--text-muted); font-size: var(--fs-0); letter-spacing: 0.1em; text-transform: uppercase; }
.finding-cards { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.finding-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.finding-card__headmain { min-width: 0; }
.finding-card__title { margin: 0 0 var(--sp-2); font-size: var(--fs-3); overflow-wrap: anywhere; }
.finding-card__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.finding-card__scores { display: flex; gap: var(--sp-3); flex: none; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.finding-card__loc { margin-top: var(--sp-3); overflow-wrap: anywhere; color: var(--text-muted); }
.finding-card__label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-0); margin-right: var(--sp-2); }
.finding-card__sec { margin-top: var(--sp-3); }
.finding-card__sec h3 { margin: 0 0 4px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.finding-card__sec p { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.finding-card__foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); overflow-wrap: anywhere; }
.finding-card__more { margin-left: auto; white-space: nowrap; }
.findings-table { width: 100%; }
.findings-table__row { cursor: pointer; }
.findings-table__row:hover { background: var(--surface-raised); }
.findings-table__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.findings-table__title { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.findings-table__host { color: var(--text-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-wrap[hidden] { display: none; }
.modal-wrap { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-6) var(--sp-4); overflow: auto; }
.modal-overlay { position: fixed; inset: 0; background: var(--scrim); }
.modal { position: relative; z-index: 1; width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 8px 44px var(--scrim); padding: var(--sp-5); }
.modal__close { position: absolute; top: var(--sp-2); right: var(--sp-3); background: none; border: none; color: var(--text-muted); font-size: var(--fs-4); line-height: 1; cursor: pointer; padding: 4px 8px; }
.modal__close:hover { color: var(--text); }
.modal__body { min-height: 60px; }
.finding-modal__head { padding-right: var(--sp-5); }
.finding-modal__title { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.finding-modal__kv { margin-top: var(--sp-3); }
.finding-modal__sec { margin-top: var(--sp-3); }
.finding-modal__sec h4 { margin: 0 0 4px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.finding-modal__sec p { margin: 0; overflow-wrap: anywhere; }
.finding-modal__foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.http-tree { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-2) 0; max-height: 440px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); }
.http-tree__row { display: flex; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-3); padding-left: calc(var(--sp-3) + var(--d, 0) * var(--sp-4)); border-left: 2px solid transparent; }
.http-tree__row:hover { background: var(--surface); }
.http-tree__row--host { border-left-color: var(--accent); }
.http-tree__row--dir .http-tree__name { color: var(--text); font-weight: 600; }
.http-tree__name { flex: 1 1 auto; overflow-wrap: anywhere; color: var(--text-muted); }
.http-tree__row--host .http-tree__name { color: var(--text); font-weight: 600; }
.filetree__glyph { flex: none; width: 2.2em; color: var(--text-muted); }
.http-tree__row--host .filetree__glyph, .http-tree__row--dir .filetree__glyph { color: var(--accent); }
.filetree__size { flex: none; color: var(--text-muted); font-size: var(--fs-0); font-variant-numeric: tabular-nums; }
.http-tree__status { flex: none; color: var(--text-muted); font-size: var(--fs-0); padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; }
.http-tree__status--2xx { color: var(--text-success); border-color: color-mix(in srgb, var(--text-success) 45%, transparent); }
.http-tree__status--3xx { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.http-tree__status--4xx, .http-tree__status--5xx { color: var(--text-danger); border-color: color-mix(in srgb, var(--text-danger) 45%, transparent); }
.filemgr { margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); overflow: hidden; }
.filemgr__crumb { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text-muted); letter-spacing: 0.03em; font-size: var(--fs-1); }
.filemgr__scroll { max-height: 480px; overflow: auto; }
.filemgr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); table-layout: fixed; }
.filemgr-table__hname { width: 52%; }
.filemgr-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600; }
.filemgr-table__hsize { text-align: right; }
.filemgr-table td { padding: 3px var(--sp-3); border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); white-space: nowrap; }
.filemgr-table__row:hover td { background: var(--surface); }
.filemgr-table__namecell { padding-left: calc(var(--sp-3) + var(--d, 0) * var(--sp-4)) !important; }
.filemgr-table__name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; }
.filemgr-table__name .fileicon { flex: none; }
.filemgr-table__label { flex: 1 1 auto; min-width: 0; color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filemgr-table__label:hover, .filemgr-table__label:focus-visible { text-decoration: underline; color: var(--accent); }
.filemgr-table__row--dir .filemgr-table__label { color: var(--text); font-weight: 600; }
.filemgr-table__type { color: var(--text-muted); font-size: var(--fs-0); }
.filemgr-table__size { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.filemgr__toggle { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.filemgr-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.filemgr-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-0); color: var(--text-muted); }
.filemgr-legend__item b { color: var(--text); }
.filemgr-legend__dot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; }
.ov-summary { display: flex; gap: var(--sp-5); align-items: stretch; flex-wrap: wrap; }
.ov-donut { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); }
.ov-donut svg { display: block; }
.ov-donut__legend { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.ov-legend__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-0); color: var(--text-muted); }
.ov-legend__item b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.ov-legend__item--btn { width: 100%; background: none; border: 0; padding: 2px var(--sp-1); border-radius: var(--radius-control); cursor: pointer; font: inherit; text-align: left; }
.ov-legend__item--btn:hover, .ov-legend__item--btn:focus-visible { background: var(--surface); color: var(--text); }
.ov-legend__dot { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--sev-info); }
.ov-legend__dot--critical { background: var(--sev-crit); }
.ov-legend__dot--high { background: var(--sev-high); }
.ov-legend__dot--medium { background: var(--sev-medium); }
.ov-legend__dot--low { background: var(--sev-low); }
.ov-legend__dot--info { background: var(--sev-info); }
.ov-stats { flex: 1 1 320px; min-width: 0; }
.ov-progress { margin-top: var(--sp-5); }
.ov-progress__head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.ov-progress__track { height: 8px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; }
.ov-progress__fill { height: 100%; background: var(--sev-low); border-radius: 999px; transition: width 0.4s ease; }
.meter { display: inline-flex; align-items: center; gap: var(--sp-2); }
.meter__track { width: 60px; height: 6px; flex: none; border-radius: 999px; background: var(--surface-raised); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.meter__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.meter__fill--full { background: var(--sev-high); }
.meter__num { font-variant-numeric: tabular-nums; font-size: var(--fs-1); color: var(--text-muted); }
.run-halt { font-size: var(--fs-1); color: var(--text-danger); margin-top: 2px; }
.stat__meter { width: 100%; height: 5px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.shortcuts { position: fixed; top: 18vh; left: 50%; transform: translateX(-50%); width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); z-index: 41; overflow: hidden; animation: palette-in var(--motion-base) ease-out; }
.shortcuts__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.shortcuts__head h2 { margin: 0; font-size: var(--fs-2); }
.shortcuts__close { background: none; border: 0; color: var(--text-muted); font-size: var(--fs-4); line-height: 1; cursor: pointer; padding: 0 var(--sp-1); }
.shortcuts__close:hover, .shortcuts__close:focus-visible { color: var(--text); }
.shortcuts__list { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.shortcuts__list > div { display: flex; align-items: center; gap: var(--sp-4); }
.shortcuts__list dt { margin: 0; flex: none; }
.shortcuts__list dd { margin: 0; color: var(--text-muted); font-size: var(--fs-1); }
.shortcuts__list kbd { display: inline-block; min-width: 2.2em; text-align: center; padding: 2px 8px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-raised); font-family: var(--font-mono); font-size: var(--fs-0); color: var(--text); }
.fileicon { flex: none; width: 16px; height: 16px; }
.fileicon--dir { color: var(--sev-medium); }
.fileicon--xml { color: var(--sev-high); }
.fileicon--html { color: var(--sev-medium); }
.fileicon--code { color: var(--accent); }
.fileicon--config { color: var(--sev-low); }
.fileicon--archive { color: var(--sev-medium); }
.fileicon--txt, .fileicon--data, .fileicon--file { color: var(--text-muted); }
.audit-verdict { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.flag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.flag-item { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-3); background: var(--surface-raised); }
.flag-item--high { border-left-color: var(--sev-crit); }
.flag-item--medium { border-left-color: var(--sev-medium); }
.flag-item--low { border-left-color: var(--sev-low); }
.flag-item__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 3px; }
.flag-item__head strong { color: var(--text); font-size: var(--fs-2); }
.flag-item__why { color: var(--text-muted); font-size: var(--fs-2); }
.flag-item__meta { margin: var(--sp-1) 0 0; display: flex; flex-direction: column; gap: 2px; }
.flag-item__meta > div { display: flex; gap: 8px; font-size: var(--fs-1); }
.flag-item__meta dt { flex: 0 0 auto; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; min-width: 64px; }
.flag-item__meta dd { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; min-width: 0; }
.flag-item__excerpt { margin: var(--sp-1) 0 0; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-control); font-size: var(--fs-1); color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.manifest { list-style: none; padding: 0; margin: 0; max-height: 180px; overflow-y: auto; }
.manifest li { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--text-muted); padding: 1px 0; }
.board { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-3); }
.board__col {
  flex: 1 0 240px;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
}
.board__col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.board__card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.board__card-title { display: block; font-weight: 600; }
.board__card-meta { font-size: var(--fs-0); }
.board__card-types { margin: var(--sp-1) 0; }
.board__move select { width: 100%; height: 28px; margin-top: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text); font: inherit; font-size: var(--fs-0); }
.board__empty { padding: var(--sp-4); font-size: var(--fs-1); }
.topbar__palette {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 30px;
  padding: 0 var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-1);
  cursor: pointer;
  min-width: 200px;
}
.topbar__palette:hover { border-color: var(--accent); }
.kbd {
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--text-muted);
}
.rail__icon { width: 16px; text-align: center; color: var(--text-muted); flex: none; }
.rail__collapse { margin-top: var(--sp-4); }
.app-shell--collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }
.app-shell--collapsed .rail__group-label { display: none; }
.app-shell--collapsed .rail { padding: var(--sp-4) var(--sp-1); }
.right-panel {
  grid-area: canvas;
  justify-self: end;
  width: 360px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
}
.right-panel__inner { padding: var(--sp-5); position: relative; }
.right-panel__close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.palette-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 40;
}
.palette {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  z-index: 41;
  overflow: hidden;
  animation: palette-in var(--motion-base) ease-out;
}
.palette__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-3);
}
.palette__group { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.palette__group-label { padding: var(--sp-1) var(--sp-4); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.palette__list { list-style: none; margin: 0; padding: 0; }
.palette__item { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); color: var(--text); }
.palette__item:hover { background: var(--surface-raised); text-decoration: none; }
.palette__item:focus-visible { background: var(--surface-raised); text-decoration: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.palette__secondary { color: var(--text-muted); font-size: var(--fs-1); }
.palette__empty { padding: var(--sp-4); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.stat-row--verify { grid-template-columns: repeat(2, 1fr); }
.stat--link { text-decoration: none; color: inherit; border-radius: var(--radius-control); transition: background 0.15s ease; }
.stat--link:hover { background: var(--surface-raised); }
.stat { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.stat__label {
  color: var(--text-muted);
  font-size: var(--fs-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bar-list { list-style: none; padding: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cvss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.cvss-metric { display: grid; gap: var(--sp-1); font-size: var(--fs-0); }
.cvss-metric span { color: var(--text-muted); }
.cvss-preview { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); }
.styleguide-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
.gallery h4 { margin: var(--sp-4) 0 var(--sp-2); color: var(--text-muted); font-size: var(--fs-2); }
.wizard-card { max-width: none; }
.form-tabs { display: flex; flex-wrap: nowrap; gap: 0; border-bottom: 1px solid var(--border); margin: var(--sp-4) 0 var(--sp-5); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.form-tabs::-webkit-scrollbar { height: 6px; }
.form-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.form-tab { flex: 0 0 auto; appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--sp-2) var(--sp-4); color: var(--text-muted); font-family: var(--font-ui); font-size: var(--fs-2); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: color .12s ease, border-color .12s ease; }
.form-tab:hover { color: var(--text); background: var(--surface-raised); }
.form-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.form-panel { padding-top: var(--sp-1); }
.panel-head { margin-bottom: var(--sp-4); }
.panel-head h2 { margin: 0 0 2px; }
.panel-head p { margin: 0; max-width: 68ch; }
.wizard-head { margin-bottom: var(--sp-5); }
.wizard-head h1 { margin: 0 0 var(--sp-1); }
.wizard-head p { margin: 0; max-width: 68ch; }
.form-section { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.form-section:first-of-type { margin-top: 0; padding-top: var(--sp-2); border-top: none; }
.subsection { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.subsection h3 { margin: 0 0 2px; }
.subsection > .muted { margin: 0 0 var(--sp-3); }
.field__hint { font-size: var(--fs-1); color: var(--text-muted); margin: var(--sp-1) 0 0; }
.wizard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4) var(--sp-5); align-items: start; }
.wizard-grid .field--wide { grid-column: span 2; }
.wizard-grid + .wizard-grid { margin-top: var(--sp-4); }
.wizard-section { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.wizard-section h3 { margin: 0 0 var(--sp-3); }
.wizard-steps { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0 var(--sp-5); flex-wrap: wrap; }
.wizard-steps__item { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: var(--fs-1); color: var(--text-muted); }
.wizard-steps__item.is-current { border-color: var(--accent); color: var(--text); }
.wizard-steps__item.is-done { color: var(--text-muted); }
.wizard-steps__item a { color: inherit; }
.scope-checklist { list-style: none; padding: 0; margin: var(--sp-4) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.scope-check { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface-raised); border-radius: var(--radius-control); }
.scope-check__num { color: var(--text-muted); width: 1.25rem; flex: none; text-align: center; }
.scope-check__name { font-weight: 600; color: var(--text); }
.scope-check__name:hover { color: var(--accent); }
.scope-check__count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-1); white-space: nowrap; }
.scope-hub__links { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--fs-1); }
.tag { font-family: var(--font-mono); text-transform: uppercase; }
.stat { border-left: 2px solid var(--border-strong); padding-left: var(--sp-4); }
.rail__icon { color: var(--text-muted); }
.chip--crit, .chip--critical, .chip--breached, .chip--failed, .chip--halted_breaker, .chip--blocked_breaker {
  animation: crit-glow 1.9s ease-in-out infinite;
}
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.pagination__status { font-variant-numeric: tabular-nums; }
.pagination [aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.result-count { font-size: var(--fs-1); margin: 0 0 var(--sp-2); }
.seg-filter { display: inline-flex; margin: var(--sp-3) 0; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.seg-filter__opt { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-3); font-size: var(--fs-1); color: var(--text-muted); text-decoration: none; }
.seg-filter__opt + .seg-filter__opt { border-left: 1px solid var(--border); }
.seg-filter__opt:hover { background: var(--surface-raised); color: var(--text); }
.seg-filter__opt--on { background: var(--accent); color: var(--accent-ink); }
.seg-filter__opt--on:hover { background: var(--accent); color: var(--accent-ink); }
.seg-filter__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.table-summary { font-size: var(--fs-1); margin: 0 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.table-summary__sep { margin: 0 var(--sp-2); opacity: 0.6; }
.sla-countdown { margin-left: var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); }
.sla-countdown--soon { color: var(--sev-medium); }
.sla-countdown--over { color: var(--text-danger); font-weight: 600; }
.sla-badge { display: inline-block; margin-left: var(--sp-2); font-size: var(--fs-0); font-weight: 600; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.sla-badge--over { color: var(--text-danger); background: color-mix(in srgb, var(--text-danger) 14%, transparent); }
.sla-badge--soon { color: var(--sev-medium); background: color-mix(in srgb, var(--sev-medium) 14%, transparent); }
.findings-table__check { width: 1%; white-space: nowrap; }
.bulk-bar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); flex-wrap: wrap; }
.bulk-bar__label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); }
.req { color: var(--sev-crit); font-weight: 700; }
.run-card::before, .run-card::after { display: none; }
.run-rule { height: 1px; background: var(--border); margin: var(--sp-4) 0; }
.run-card .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-4); margin-top: 0; }
.run-card .stat { border-left: 0; padding-left: 0; padding: 0; }
.run-card .stat__value { font-size: var(--fs-3); text-shadow: none; }
.run-card .stat__label { font-size: var(--fs-0); }
.scan-tools__cmd { overflow-wrap: anywhere; word-break: break-word; max-width: 40ch; }
.scan-tools__blocked { color: var(--text-danger); }
.ov-sec-title { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-4); }
.techgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.techcard { background: var(--surface); border: 1px solid var(--border); border-top-color: var(--border-strong); border-radius: var(--radius-card); padding: var(--sp-4); min-width: 0; }
.techcard h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-2); display: flex; align-items: baseline; gap: var(--sp-2); }
.techcard__n { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--text-muted); }
.kv--tight dt { font-size: var(--fs-0); }
.kv--tight dd { overflow-wrap: anywhere; }
.chipwrap { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tag--tech { border-color: var(--accent); }
.tag--warn { border-color: var(--sev-medium); color: var(--sev-medium); }
.tag--method { font-family: var(--font-mono); }
.tag--status-2 { border-color: var(--sev-low); }
.tag--status-3 { border-color: var(--accent); }
.tag--status-4, .tag--status-5 { border-color: var(--sev-high); }
.minitable { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.minitable th { text-align: left; font-size: var(--fs-0); color: var(--text-muted); font-weight: 600; padding: 2px var(--sp-2) 2px 0; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); }
.minitable td { padding: 3px var(--sp-2) 3px 0; font-size: var(--fs-1); border-bottom: 1px solid var(--border); white-space: nowrap; }
.minitable tr:last-child td { border-bottom: 0; }
.surf-metrics { display: flex; gap: var(--sp-5); }
.surf-metric { display: flex; flex-direction: column; }
.surf-metric__v { font-size: var(--fs-5); line-height: 1; }
.surf-metric__l { font-size: var(--fs-0); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.ov-stats .stat.statcard {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--statc, var(--border-strong));
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4);
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.statcard__ico {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  color: var(--statc, var(--text-muted)); opacity: 0.5; line-height: 0;
}
.ov-stats .statcard .stat__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-6); line-height: 1.05; color: var(--text); text-shadow: none;
}
.ov-stats .statcard .stat__label {
  font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.statcard--neutral  { --statc: var(--text-muted); }
.statcard--open     { --statc: var(--accent); }
.statcard--open     .stat__value { color: var(--accent); }
.statcard--critical { --statc: var(--sev-crit); }
.statcard--critical .stat__value { color: var(--sev-crit); }
.statcard--surface  { --statc: var(--accent); }
.statcard--proven   { --statc: var(--sev-low); }
.statcard--proven   .stat__value { color: var(--sev-low); }
.statcard--possible { --statc: var(--sev-medium); }
.statcard--possible .stat__value { color: var(--sev-medium); }
.ov-stats a.statcard { text-decoration: none; color: inherit; }
.ov-stats a.statcard .statcard__go {
  position: absolute; bottom: var(--sp-3); right: var(--sp-3);
  color: var(--statc); opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease; font-weight: 700;
}
.ov-stats a.statcard:hover {
  border-color: var(--statc);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -10px var(--statc), var(--shadow-1);
}
.ov-stats a.statcard:hover .statcard__go { opacity: 0.9; transform: translateX(0); }
.ov-stats a.statcard:focus-visible { outline: 2px solid var(--statc); outline-offset: 2px; }
.ov-statgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;              /* rows share the height equally -> fills beside the donut */
  gap: var(--sp-3);
  align-content: stretch;
}
.ov-statgrid .statcard { justify-content: center; margin-top: 0; }

/* --- Exposure board: rebuilt WITHOUT alarm colour as chrome (DESIGN.md section 2 rule 2).
   Severity is carried by the data and the threat-level marker, not by a red frame, an inset
   glow or a pulsing edge. --- */
.threat-board { position: relative; }
.threat-board--crit { border-color: var(--border-strong); }
.threat-board__eyebrow {
  color: var(--text-muted);
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.threat-level--crit { border-left-color: var(--danger); }
.threat-level--crit .threat-level__value { color: var(--text-danger); }
.threat-metric--hazard { border-color: var(--danger); }
.threat-metric--hazard .threat-metric__n { color: var(--text); }
.chip--blocked_scope { --chip-c: var(--danger); }
.fileicon--vcs { color: var(--text-muted); }

/* Shared micro label (DESIGN.md section 3 rule 1): the ONE place uppercase is allowed as a
   label device. A class rather than an inline style, so the rule stays reviewable. */
.microlabel {
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================================
   ARCHETYPE LAYOUTS (/DESIGN.md section 8) - Form, Index density, Feed hierarchy
   ============================================================================ */

/* --- Form archetype: single column, max 640px, sections divided by hairlines, actions pinned
   bottom-left with the primary first. Airy: --sp-5 between fields, because a form is where a
   decision is made, not where data is scanned. --- */
.form-page { max-width: 640px; }
.form-page .form-section {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
}
.form-page .form-section:first-of-type { border-top: 0; padding-top: 0; }
/* `.form` already spaces its children with a flex gap, so adding a margin here STACKED on top
   of it (16px + 24px = 40px between fields, which read as sparse rather than airy). Adjust the
   existing gap instead of layering a second spacing mechanism on it. */
.form-page .form,
.form-page .form-stack { gap: var(--sp-5); }
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-5);
}
.form-actions .btn--primary { order: -1; }

/* --- Index density: a sparse table must not leave the card floating in a void. The card grows
   to a comfortable minimum and the empty region belongs to the table, not to the page. --- */
.index-card { min-height: 420px; display: flex; flex-direction: column; }
.index-card .data-table { flex: 1; }
/* An unset value is a fact ("not recorded"), so it reads as muted text rather than a stray dash
   sitting at the same weight as real data. */
.data-table td .unset { color: var(--text-muted); }

/* --- Feed hierarchy: fifteen identically weighted rows cannot be scanned. The actor and the
   action carry the weight; time and origin recede. Repeats are not louder than exceptions. --- */
.opslog__t { color: var(--text-muted); font-size: var(--fs-0); }
.opslog__a { color: var(--text); font-weight: 500; }
.opslog__who { color: var(--text-muted); }
.opslog__ip { color: var(--text-muted); font-size: var(--fs-0); }
.opslog li { padding-block: var(--sp-2); }

/* --- Phone topbar: the chrome must fit 390px (DESIGN.md section 8 - the page body never scrolls
   sideways). Measured cause of the 390px overflow: .topbar__actions held a full-width org
   switcher, a theme toggle and a user button rendering the whole email address, none of which
   shrink - together 599px inside a 390px viewport. Each is capped and the email is truncated to
   its own column rather than pushing the row. --- */
@media (max-width: 700px) {
  .topbar { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .topbar__palette { display: none; }
  .topbar__actions { gap: var(--sp-2); min-width: 0; }
  .org-switcher select { max-width: 104px; }
  .user-menu { min-width: 0; }
  .user-menu > .btn {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  /* Every ancestor of a shrinking flex child needs min-width:0 or the child refuses to shrink
     below its content width, which is what pushed the row past the viewport. */
  .app-shell, .topbar, .canvas { min-width: 0; }
}

/* The countersign on a Workspace page whose header row already holds actions: it sits under the
   breadcrumb, right-aligned, still exactly once per page (DESIGN.md section 7). */
.pagehead-stamp { display: flex; justify-content: flex-end; margin-bottom: var(--sp-4); }
@media (max-width: 700px) { .pagehead-stamp { justify-content: flex-start; } }

/* An unset table value: muted, and announced as "not set" rather than read as a stray dash. */
.unset { color: var(--text-muted); }

/* --- Tooltip (DESIGN.md section 9): a real component, not the native `title`. CSS-only so it
   needs no JS and cannot break progressive enhancement. It is NEVER the only carrier of
   information - the element it annotates must still make sense with the tooltip closed, which
   is why the native title is kept as the accessible fallback on existing usages. --- */
.tip { position: relative; }
.tip__bubble {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 0;
  z-index: 40;
  min-width: max-content;
  max-width: 280px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: var(--fs-0);
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast) var(--ease-out) 120ms,
              visibility 0s linear calc(var(--motion-fast) + 120ms);
}
.tip:hover .tip__bubble,
.tip:focus-within .tip__bubble {
  opacity: 1;
  visibility: visible;
  transition-delay: 120ms, 0s;
}

/* --- Navigation rail: an indexed register, not a flat list -------------------------------
   The rail is the one piece of chrome present on every page, so it carries the identity more
   than any single view. Sections read as compartments of a register: a hairline rule opens each
   one, the label sits on it, and items align to a consistent icon column so the eye scans a
   single edge rather than ragged text starts. */
.rail {
  padding: var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail__group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* No accent on the group label. I first put a brass tick on every one of them - four to six per
   page - which is the same failure as corner brackets on every panel: a mark used everywhere
   stops meaning anything. In the rail the accent has exactly ONE job: "you are here". The
   hairline above each group is what separates the compartments. */
.rail__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed rail: icons only, centred, with the label removed from the accessible flow only
   visually - the aria-label on each control still names it. */
.app-shell--collapsed .rail__link { justify-content: center; padding-inline: 0; }
.app-shell--collapsed .rail__text { display: none; }
.app-shell--collapsed .rail__group-label { justify-content: center; padding-inline: 0; }
.app-shell--collapsed .rail__group-label span { display: none; }
.app-shell--collapsed .rail__group-label::before { width: 16px; }

/* --- Rail rhythm: one consistent row height and a fixed icon column, so the labels start on a
   single vertical edge and the eye scans that edge instead of ragged text. --- */
.rail__link {
  min-height: 34px;
  padding-block: 0;
}
.rail__link .icon { width: 18px; height: 18px; }
.rail__group-label {
  padding-block: var(--sp-3) var(--sp-1);
  margin-top: var(--sp-2);
}
.rail__group-label:first-child { margin-top: 0; }

/* The rail sits BEHIND the canvas rather than beside it: a recessed surface plus the divider
   reads as a fixed instrument panel, and it keeps the canvas as the brightest plane so content
   stays the focus. */
.rail {
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.canvas { background: var(--surface); }

/* Hover moves the row, not just its colour - a small inset shift gives the rail a physical
   response without animating anything that moves on its own. */
.rail__link:hover { padding-left: calc(var(--sp-3) + 2px); }
.rail__link[aria-current="page"]:hover { padding-left: var(--sp-3); }

/* File Explorer: one table per host, so a row's owner is never ambiguous. */
.filemgr__count { margin-left: var(--sp-3); color: var(--text-muted); font-size: var(--fs-0); }