/* XenoRack node console.
 *
 * The idiom here is industrial, per the design-language study: dense,
 * monospaced where identifiers matter, exception-first, deliberately
 * unfashionable. An operator under rack-aisle lighting reads a gradient
 * hero as a website, not as an instrument. No rounded cards with accent
 * bars, no glassmorphism, no emoji section markers.
 *
 * Both themes are defined. A NOC wall runs dark; a desk at 9am does not.
 */

/* Palette: DEMO's (src/renderer/style.css), mapped onto this console's token
 * names so every existing rule follows. Dark is the default, as on DEMO; the
 * Light / Dark / Auto switch sets data-theme, and Auto follows the OS.
 *   ground=bg  surface=panel  surface-alt=panel-2  rule=border
 *   rule-strong=border-hover  ink=text  ink-dim=text-dim  ink-faint=text-faint
 *   warning=warn  critical=crit  info=accent-2 */
:root {
  --ground:      #0b0e14;
  --surface:     #12161f;
  --surface-alt: #171c27;
  --rule:        #232a38;
  --rule-strong: #2c3444;
  --ink:         #e6e9ef;
  --ink-dim:     #8993a6;
  --ink-faint:   #7e879a;
  --accent:      #4fd1c5;
  --accent-2:    #5b8def;
  --on-accent:   #0b0e14;

  /* Severity. Three values, never four -- Redfish Status.Health.
   * Colour is never the only channel; see .sev-mark. */
  --ok:       #3ecf8e;
  --warning:  #f5b942;
  --critical: #f0596e;
  --unknown:  #8993a6;
  --info:     #5b8def;

  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f4f6fa; --surface: #ffffff; --surface-alt: #eef1f6;
    --rule: #d8dce3; --rule-strong: #c5cad4;
    --ink: #182233; --ink-dim: #57607a; --ink-faint: #8089a0;
    --accent: #0b8a7a; --accent-2: #3660c9; --on-accent: #ffffff;
    --ok: #1f8a5f; --warning: #a8721f; --critical: #c73b3b;
    --unknown: #57607a; --info: #3660c9;
  }
}

:root[data-theme="light"] {
  --ground: #f4f6fa; --surface: #ffffff; --surface-alt: #eef1f6;
  --rule: #d8dce3; --rule-strong: #c5cad4;
  --ink: #182233; --ink-dim: #57607a; --ink-faint: #8089a0;
  --accent: #0b8a7a; --accent-2: #3660c9; --on-accent: #ffffff;
  --ok: #1f8a5f; --warning: #a8721f; --critical: #c73b3b;
  --unknown: #57607a; --info: #3660c9;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Identifiers are read aloud and typed in. Monospace, always. */
.id, code, .num { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

a { color: var(--accent); }

/* ---------- sign-in ------------------------------------------------ */

.signin-wrap {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px 16px;
}

.signin {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 24px;
}

.signin h1 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signin .node {
  margin: 0 0 20px;
  color: var(--ink-dim);
  font-size: 12px;
}

label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

input[type="text"], input[type="password"], input[type="number"] {
  width: 100%;
  margin-bottom: 14px;
  padding: 7px 8px;
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: 13px var(--mono);
}

input:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  padding: 7px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

button.quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink-dim);
}

button[disabled] { opacity: 0.5; cursor: default; }

/* ---------- shell --------------------------------------------------- */


/* Left rail over a hierarchy. No hamburger: no product in the survey
 * uses one, and an operator who cannot see the tree cannot navigate it. */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  padding: 14px 0;
}

.rail h1 {
  margin: 0 14px 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.site {
  display: block;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--ink);
  font: 13px var(--sans);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.site[aria-current="true"] {
  border-left-color: var(--accent);
  background: var(--surface-alt);
  font-weight: 600;
}

main { padding: 16px; min-width: 0; }

.topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.topline h2 { margin: 0; font-size: 15px; }

/* The scope sentence. Never optional: a count without its scope invites
 * the reader to take it for a fleet total. */
.scope {
  color: var(--ink-dim);
  font-size: 12px;
}

/* ---------- panels -------------------------------------------------- */

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
}

.panel > h3 {
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.panel > .body { padding: 10px; }

.panel.span { grid-column: 1 / -1; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }

/* A second line inside a table cell, for a measured figure that belongs
   beside the value it qualifies rather than in a column of its own. The
   panels sit in narrow grid tracks; an extra column lands in the
   horizontal scroller and is not read. */
td .sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
}

th {
  padding: 4px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

td { padding: 4px 10px; border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.scroll { overflow-x: auto; }

/* ---------- severity ------------------------------------------------ */

/* Shape as well as colour: colourblind-safe by construction, and it
 * survives a monochrome NOC projector. Vertiv encodes shape; so do we. */
.sev-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  vertical-align: baseline;
}
.sev-ok       { background: var(--ok); border-radius: 50%; }
.sev-warning  { background: var(--warning);
                clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sev-critical { background: var(--critical);
                clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%,
                                   70% 100%, 30% 100%, 0 70%, 0 30%); }
/* Unknown is a grey circle-X, matching Vertiv's fault glyph and the
 * commissioning design. It must never be mistaken for green: a device
 * with no reading is not a healthy device. */
.sev-unknown  { position: relative; background: transparent;
                border: 1.5px solid var(--unknown); border-radius: 50%; }
.sev-unknown::before,
.sev-unknown::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 3px;
  height: 1.5px; background: var(--unknown);
}
.sev-unknown::before { transform: rotate(45deg); }
.sev-unknown::after  { transform: rotate(-45deg); }

.tag-ok       { color: var(--ok); }
.tag-warning  { color: var(--warning); }
.tag-critical { color: var(--critical); }
.tag-unknown  { color: var(--unknown); }

/* A section that has nothing to report says WHY. A blank panel reads as
 * "nothing wrong", which is the worst lie an operations console tells. */
.note {
  padding: 10px;
  border-left: 3px solid var(--rule-strong);
  background: var(--surface-alt);
  color: var(--ink-dim);
  font-size: 12px;
}
.note.attention { border-left-color: var(--warning); color: var(--ink); }
.note.bad       { border-left-color: var(--critical); color: var(--ink); }

.err {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--critical);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 12px;
}

.notice {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--ok, #2e7d32);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 12px;
}

.asof { color: var(--ink-faint); font-size: 11px; }

/* The scope chip. The overseer's actual question is "am I seeing all
 * fifteen labs or one", and the answer belongs in the shell where it is
 * always on screen -- not inside one panel that can scroll away. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--rule-strong);
  background: var(--surface-alt);
  color: var(--ink-dim);
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.02em;
}

.chip.phase { border-color: var(--warning); color: var(--ink); }

@media (max-width: 640px) {
  .rail { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* #509: a collector's detail, opened from its row on the Collectors page. */
tr.clickrow[data-collector-row] { cursor: pointer; }
tr.clickrow[data-collector-row]:hover td { background: var(--surface-alt); }
tr.row-open[data-collector-row] td:first-child { box-shadow: inset 2px 0 var(--info); }
tr.cd-row > td { background: var(--surface-alt); padding: 10px 12px 12px 18px; }
.collector-detail h4 { margin: 12px 0 6px; font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.collector-detail h4:first-child { margin-top: 0; color: var(--ink); }
.collector-detail dl.kv { grid-template-columns: 150px 1fr; }
.collector-detail ul.cd-list { margin: 0; padding-left: 4px; list-style: none; }
.collector-detail ul.cd-list li { padding: 2px 0; }
/* The endpoint an "Endpoints not answering" row led to: a tint, a left rule
 * and a marker, so it is found without relying on colour alone. */
tr.ep-highlight td { background: color-mix(in srgb, var(--warning) 14%, transparent); }
tr.ep-highlight td:first-child { box-shadow: inset 3px 0 var(--warning); }
tr.ep-highlight td:first-child::before { content: '\25B6  '; }
tr.ep-highlight:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- rack elevation ------------------------------------------
 *
 * The signature screen, and the slowest one in every product the design
 * survey looked at. It is drawn with CSS grid over a fixed number of U
 * rows -- no per-U DOM churn, no layout library, no canvas. A 48U rack
 * is 48 rows.
 *
 * Four cell states, and the distinction between two of them is the
 * whole point. `free` means nothing is mounted on either face. `ghost`
 * means something is mounted on the OTHER face at this U and the schema
 * does not record its depth, so whether it also occupies this face is
 * unknown. Drawing ghost as free is the regression NetBox shipped and
 * its users filed a bug over; drawing it as occupied would invent a
 * fact. It gets its own hatch.
 */

.elevation-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.rack {
  /* 15px per U puts a 42U rack in ~630px and a 48U OpenU rack in ~720px,
   * so a whole elevation is one glance rather than a scroll hunt. The
   * body scrolls on its own below that, with the U rail scrolling WITH
   * the slots -- a rail that stays put while the devices move is worse
   * than no rail. */
  --u: 15px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
}

.rack > header {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}

.rack > header .face {
  font: 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Schneider puts the flip control in the rack's top-left corner. Both
 * faces are first-class; nobody ships front-only. */
.flip {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: 11px/1.6 var(--mono);
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
}

.rack-body {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  padding: 6px;
  gap: 0 4px;
  max-height: calc(100vh - 220px);
  min-height: 240px;
  overflow-y: auto;
}

.u-rail, .u-slots { display: grid; }

.u-rail > span {
  height: var(--u);
  color: var(--ink-faint);
  font: 9px/var(--u) var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.u-slots > * {
  height: var(--u);
  min-width: 190px;
  border: 1px solid var(--rule);
  margin-top: -1px;
}

.u-free {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    color-mix(in srgb, var(--rule) 45%, transparent) 5px,
    color-mix(in srgb, var(--rule) 45%, transparent) 6px);
}

/* Occupied on the far face, depth unrecorded. Distinct from free and
 * distinct from occupied, because it is genuinely a third thing. */
.u-ghost {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--unknown) 30%, transparent) 3px,
    color-mix(in srgb, var(--unknown) 30%, transparent) 5px);
  border-style: dashed;
}

/* The >= marker sits OUTSIDE the rtl label element. Inside it, the glyph
 * is bidi-neutral and gets pushed to the far end, rendering as a
 * reversed arrow on a device that is neither reversed nor an arrow. */
.u-dev .atleast {
  flex: 0 0 auto;
  color: var(--unknown);
  font: 10px/1 var(--mono);
}

.u-dev {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  background: var(--surface-alt);
  border-color: var(--rule-strong);
  font: 10px/1 var(--mono);
  color: var(--ink);
  overflow: hidden;
  cursor: pointer;
}
.u-dev:hover { border-color: var(--accent); }

/* Hyperview confines colour to a strip on the right edge of the device
 * block, so it never fights the block's own content, and switches the
 * strip's meaning between alarm status and lifecycle state. One
 * elevation then serves both ops and planning. */
.u-dev .strip {
  flex: 0 0 4px;
  align-self: stretch;
  margin: 2px 0 2px auto;
  background: var(--unknown);
}
.strip-active { background: var(--ok); }
.strip-maintenance { background: var(--warning); }
.strip-absent, .strip-decommissioned { background: var(--rule-strong); }
.strip-unknown, .strip-planned { background: var(--unknown); }

.u-dev .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Truncation keeps the END of an identifier: the meaningful part of a
   * serial is its tail, and an operator comparing to a label on metal is
   * reading the last characters. */
  direction: rtl;
  text-align: left;
}

.u-dev.held { border-color: var(--warning); border-width: 2px; }

.u-multi { display: flex; align-items: center; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  color: var(--ink-dim);
  font-size: 11px;
}
.legend .swatch {
  display: inline-block;
  width: 22px; height: 10px;
  margin-right: 5px;
  border: 1px solid var(--rule);
  vertical-align: -1px;
}

select {
  width: 100%;
  padding: 6px 8px;
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: 13px var(--sans);
}

/* Positioned, height unrecorded. The block shows the unit the device
 * starts on and says so -- a solid 1U block would be a claim nobody
 * made. Redfish reports Location.Placement.RackOffset and carries no
 * device height, so this is the normal state for anything a collector
 * found, not an edge case. */
.u-dev.height-unknown {
  border-style: dashed;
  border-bottom-width: 2px;
  background: color-mix(in srgb, var(--surface-alt) 70%, transparent);
}

/* ---------- modal (connector activity) ------------------------------ */
/* A dismissable overlay for read-only detail (the connector activity
 * trail). Fixed, scrolls its own body, and paints an explicit surface so
 * it holds on either theme ground. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  background: rgba(0, 0, 0, 0.45);
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}
.modal-head h3 {
  margin: 0;
  font: 600 13px var(--sans);
  letter-spacing: 0.04em;
}
.modal .scroll {
  padding: 10px 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.modal > .note { margin: 14px; }

/* ==========================================================================
 * 2026 register: app frame (top bar), appearance toggle, and the
 * exception-first Site Today. Built on the existing tokens + colour+shape
 * sev-marks above -- honesty rules unchanged, execution modernized.
 * ========================================================================== */

.appwrap { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 14px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.topbar .wordmark { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.topbar .env {
  font: 600 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 4px; padding: 3px 6px;
}
.topbar-spacer { margin-left: auto; }
/* The Update Now badge (#151): says its state in words; the sev-mark carries it too. */
.update-badge {
  font: 500 12px/1 var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 5px 10px; margin-right: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.update-badge[hidden] { display: none; }
.update-badge[data-state="available"], .update-badge[data-state="rolled_back"], .update-badge[data-state="blocked"] { border-color: var(--warning); }
.update-badge[data-state="failed"] { border-color: var(--critical); }
@media (max-width: 720px) { .update-badge { max-width: 160px; } }

/* The story badge (#245): a gym story's countdown on a test node, with a hover card. */
.story-wrap { position: relative; display: inline-flex; }
.story-badge {
  font: 500 12px/1 var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--accent, var(--rule-strong)); border-radius: 999px;
  padding: 5px 10px; margin-right: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.story-badge[hidden] { display: none; }
.story-badge[data-phase="finished"] { border-color: var(--rule-strong); color: var(--ink-faint, var(--ink)); }
.story-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.story-badge[data-phase="running"] .story-dot { animation: story-pulse 2s ease-in-out infinite; }
@keyframes story-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .story-badge[data-phase="running"] .story-dot { animation: none; } }
.story-card {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(420px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 12px 14px; font: 400 13px/1.45 var(--sans); white-space: normal;
}
.story-card p { margin: 4px 0; }
.story-card h4 { margin: 10px 0 2px; font: 600 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint, var(--ink)); }
.story-card ul { margin: 2px 0; padding-left: 18px; }
.story-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.story-meta { color: var(--ink-faint, var(--ink)); font-size: 12px; }
.story-seen { color: var(--accent, #2563eb); }
@media (max-width: 720px) { .story-card { position: fixed; top: 56px; left: 16px; right: 16px; width: auto; } }

.theme-seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; }
.theme-seg button {
  padding: 5px 11px; background: transparent; border: 0; color: var(--ink-dim);
  font: 500 11px/1 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.theme-seg button + button { border-left: 1px solid var(--rule); }
.theme-seg button[aria-pressed="true"] { background: var(--surface-alt); color: var(--ink); }

/* An informational (blue) severity mark for console advisories -- distinct
 * from the three device-health values; --info is set with the palette. */
.sev-info { background: var(--info); border-radius: 50%; }

.statusrow { display: inline-flex; align-items: center; }

/* ---------- Site Today: exception-first ----------------------------- */
.band { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.bandhead {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.bandhead strong { color: var(--ink); }

.attn {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong); border-radius: 7px; padding: 11px 13px;
}
.attn > .sev-mark { margin-top: 3px; }
.attn-critical { border-left-color: var(--critical); }
.attn-warning  { border-left-color: var(--warning); }
.attn-info     { border-left-color: var(--info); }
.attn-h { font-weight: 600; font-size: 13.5px; }
.attn-d { color: var(--ink-dim); font-size: 12.5px; margin-top: 2px; }
.attn-d .id { color: var(--ink); }
.attn-list { margin: 4px 0 0; padding-left: 18px; columns: 2 280px; column-gap: 24px; }
.attn-list li { break-inside: avoid; }
.attn-scope { color: var(--ink-faint); font: 11px/1.4 var(--mono); margin-top: 5px; }
.attn-next {
  color: var(--ink-dim); font-size: 12px; margin-top: 6px;
  border-top: 1px dashed var(--rule); padding-top: 6px;
}

.clear {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--ok); border-radius: 7px; padding: 13px 15px; margin-bottom: 18px;
}
.clear-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.clear-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.clear-list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; color: var(--ink-dim); font-size: 12.5px; }
.clear-list li .sev-mark { margin-top: 3px; }
.clear-list li .id { color: var(--ink); }

.basis {
  display: flex; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 7px; margin-bottom: 20px; overflow: hidden;
}
.metric { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; min-width: 120px; }
.metric + .metric { border-left: 1px solid var(--rule); }
.metric-k { display: inline-flex; align-items: center; gap: 6px; font: 10px/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }
.metric-v { font: 500 15px/1.1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.metric-v.metric-unk { color: var(--unknown); }

.sectlabel { margin: 0 0 10px; font: 600 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
tr.total td { border-top: 1px solid var(--rule-strong); font-weight: 600; }

/* modern register: a touch of radius over the flat industrial base */
.panel { border-radius: 7px; overflow: hidden; }
.chip { border-radius: 999px; }
.chip.scope-chip { border-color: var(--accent); color: var(--accent); }

/* ---------- Assets: the arbitration surface ------------------------- */
/* Same industrial idiom. KPI tiles lead with the disagreements; the two
 * with a target of zero carry a severity mark, the rest are plain counts.
 * Colour is never the only channel -- the sev-mark shape carries it too. */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule); border-radius: 7px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
}
.kpi-alert { border-left-color: var(--rule-strong); }
.kpi-v {
  display: inline-flex; align-items: center;
  font: 500 22px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi-v .sev-mark { width: 11px; height: 11px; margin-right: 7px; }
.kpi-k {
  font: 10px/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.kpi-t { font: 10px/1.2 var(--mono); color: var(--ink-dim); }
.kpi-note { font-size: 11px; line-height: 1.4; color: var(--ink-dim); margin-top: 4px; }

/* Triage rows reuse .attn; the click variant adds the third (go) column
 * and the button reset, so a highlighted issue is a control, not text. */
button.attn.attn-click {
  grid-template-columns: auto 1fr auto; align-items: center;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  /* The global button rule is white, uppercase, letter-spaced. font:inherit
   * alone does not undo colour or case, so an .attn-h with no colour of its
   * own inherited #fff on a white surface -- the triage title was invisible
   * (found by looking, 2026-09-26; affected the Assets band too). */
  color: var(--ink); text-transform: none; letter-spacing: normal;
}
button.attn.attn-click:hover { border-color: var(--rule-strong); background: var(--surface-alt); }
.attn-attr { font-family: var(--mono); color: var(--ink); margin-left: 8px; }
.attn-go { color: var(--accent); font: 11px/1 var(--mono); white-space: nowrap; }

/* Roster -- every observed asset, drillable. Needs-attention rows carry a
 * left accent; the row is a control. */
table.assets-t tr.clickrow { cursor: pointer; }
table.assets-t tr.clickrow:hover td { background: var(--surface-alt); }
table.assets-t tr.row-alert td:first-child { box-shadow: inset 2px 0 var(--critical); }

/* Drawer -- per-source opinions. A revoked source's row is muted (its
 * word is withdrawn) but shown, because "not counted, because revoked" is
 * the fact that resolves the question. */
tr.row-muted td { color: var(--ink-faint); }
.attr-type { text-transform: none; letter-spacing: 0; font: 10px/1 var(--mono); color: var(--ink-faint); margin-left: 8px; }
.chip.warnchip { border-color: var(--warning); color: var(--ink); }

/* Financial (#161 slice 3). Reuses the Assets roster and triage styles; these
 * add only what the book-vs-floor view needs: an open-PO accent, the inline
 * line-item table a PO row opens, and a serial that drills to its device. */
table.fin-t tr.row-open td:first-child { box-shadow: inset 2px 0 var(--info); }
table.fin-t tr.po-lines > td { background: var(--surface-alt); padding: 8px 10px 10px 18px; }
table.fin-lines { font-size: 11.5px; }
table.fin-lines th, table.fin-lines td { padding: 3px 8px; }
button.linkish {
  background: none; border: 0; padding: 0; color: var(--accent);
  font: 11.5px var(--mono); cursor: pointer; text-decoration: underline;
  /* A drill link names a record (a PDU, an incident, a rack): it reads as
   * that name, not as the global button's uppercase label. */
  text-transform: none; letter-spacing: normal;
}
button.linkish:hover { color: var(--ink); }
/* A tile that opens what it counts says so on hover. */
.kpi-click:hover .kpi-k { color: var(--accent); }
table.fin-t td.nowrap { white-space: nowrap; }

/* Node-class banner (#167 P0): synthetic plant says so on every screen. */
.node-banner {
  padding: 7px 16px; font-size: 12.5px; line-height: 1.4;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.node-banner strong { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; margin-right: 6px; }
.node-synthetic { background: color-mix(in srgb, var(--info) 12%, var(--surface));
  border-left: 3px solid var(--info); }
.node-unknown { background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border-left: 3px solid var(--warning); }

/* Company in the top bar; business units in the rail (#167, 071). */
.topbar .company { margin-left: 14px; font-size: 13px; color: var(--ink); }
.topbar .company-k { font: 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 4px; }
.topbar .company-bu { color: var(--ink-dim); }
nav.rail .rail-sub { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }

/* ==========================================================================
 * DEMO skin (2026-09-26). The presentation layer of demo.xeneura.com over
 * this console's honest data: DEMO's sidebar (brand, site selector, module
 * list with icons), content column with a page-title top bar, KPI cards,
 * rounded panels and pill badges. Rules below override the industrial base
 * above; the data rules (scope sentence, severity shape, honest-empty) are
 * untouched.
 * ========================================================================== */

html, body { font-size: 13.5px; }
body { font: 13.5px/1.45 var(--sans); background: var(--ground); }

.app { display: flex; height: 100vh; overflow: hidden; }

/* -- sidebar -------------------------------------------------------------- */
nav.rail {
  width: 226px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--rule);
  padding: 18px 14px; overflow-y: auto; position: relative; z-index: 55;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 20px; border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}
.brand-mark { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.brand-title { font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

.site-selector-wrap {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.site-selector-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 700; margin-top: 6px;
}
.site-selector-wrap select {
  width: 100%; padding: 7px 9px; border-radius: 7px;
  background: var(--surface-alt); color: var(--ink); border: 1px solid var(--rule);
  font: 12.5px var(--sans);
}

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; background: transparent; border: none; border-radius: 7px;
  color: var(--ink-dim); font: 13px var(--sans); text-align: left;
  text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface-alt); color: var(--ink); }
.nav-item[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-weight: 600;
}
.nav-icon { width: 16px; text-align: center; opacity: 0.85; flex-shrink: 0; }
.nav-item .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.quiet { text-transform: none; letter-spacing: 0; font-family: var(--sans); border-radius: 7px; }
/* Not built on this node yet: a faint ring, so the label keeps DEMO's one
 * line. The page itself says what the module waits for. */
.nav-item .nav-soon {
  margin-left: auto; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--ink-faint); opacity: 0.7;
}
.nav-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 700; margin: 12px 10px 4px;
}
.sidebar-footer {
  display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--ink-dim);
  border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px;
}
.sidebar-footer button.quiet {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-dim);
  border-radius: 7px; padding: 6px 9px; text-transform: none; letter-spacing: 0;
  font: 12px var(--sans); cursor: pointer; text-align: left;
}
.sidebar-footer button.quiet:hover { color: var(--ink); border-color: var(--rule-strong); }

/* -- content column + top bar -------------------------------------------- */
.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.content > main { flex: 1; overflow-y: auto; padding: 22px 28px 40px; }
.topbar {
  position: static; height: auto; display: flex; align-items: baseline; gap: 14px;
  padding: 20px 28px 14px; background: transparent;
  border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.topbar h1 { font-size: 19px; margin: 0; font-weight: 700; }
.topbar .company { margin-left: 0; font: 12px var(--mono); color: var(--ink-dim); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* #513: the Menu button and the rail's backdrop exist only on a narrow
 * screen (the 860 px block below). */
.menu-btn, .rail-backdrop { display: none; }
/* #306: an optional module's "no source since" banner. */
.module-source { margin: 0 0 16px; }
.module-source-list { margin: 6px 0 4px; padding-left: 18px; }
.module-source-list li { margin: 2px 0; }
.module-source-check, .module-source-note { color: var(--ink-dim); font-size: 12px; }
.theme-seg { border-color: var(--rule); border-radius: 7px; }
.theme-seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.node-banner { padding: 8px 28px; }

/* -- page header inside a view ------------------------------------------- */
.topline { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.topline h2 { font-size: 15px; font-weight: 700; }

/* -- KPI cards (DEMO .kpi-grid / .kpi-card) -------------------------------- */
.kpis {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--rule); border-left-width: 1px;
  border-radius: 10px; padding: 16px; gap: 0;
}
.kpi-k {
  order: -1; font: 11px/1.3 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 8px;
}
.kpi-v { font: 700 26px/1.1 var(--mono); }
.kpi-t, .kpi-note { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; font-family: var(--sans); }
.kpi-alert { border-color: color-mix(in srgb, var(--warning) 45%, var(--rule)); }

/* The basis strip reads as a row of compact KPI cards. */
.basis { background: transparent; border: 0; gap: 10px; overflow: visible; }
.metric {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; min-width: 150px; flex: 1 1 150px;
}
.metric + .metric { border-left: 1px solid var(--rule); }
.metric-k { font-family: var(--sans); color: var(--ink-dim); }
.metric-v { font: 700 18px/1.1 var(--mono); }

/* -- panels (DEMO .panel / .panel-title) ---------------------------------- */
.grid { gap: 18px; }
.panel { border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); }
.panel > h3 {
  background: transparent; border-bottom: 0; padding: 16px 18px 4px;
  font: 700 13.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.panel > .body { padding: 8px 18px 16px; }

/* -- tables (DEMO .data-table) ------------------------------------------- */
table { font-size: 12.5px; }
th {
  color: var(--ink-dim); font-weight: 600; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.04em; padding: 8px 10px;
  border-bottom: 1px solid var(--rule); background: var(--surface);
}
td { padding: 8px 10px; border-bottom: 1px solid var(--rule); }
table.assets-t tr.clickrow:hover td, tbody tr:hover td { background: var(--surface-alt); }

/* -- chips as DEMO pill badges -------------------------------------------- */
.chip {
  border-radius: 20px; font: 700 10.5px/1 var(--sans); text-transform: uppercase;
  letter-spacing: 0.03em; padding: 4px 9px;
  background: color-mix(in srgb, var(--ink-dim) 15%, transparent); border-color: transparent;
}
.chip.scope-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.chip.phase, .chip.warnchip { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }

/* -- triage band: DEMO's finding rows ------------------------------------ */
.attn, .clear { border-radius: 10px; }
.bandhead { font-family: var(--sans); }

/* -- buttons: DEMO primary is the teal pill ------------------------------ */
button:not(.nav-item):not(.site):not(.site-tab):not(.linkish):not(.attn):not(.flip):not(.quiet):not([data-set]):not(.xe-open):not(.xe-chip):not(.xe-close):not(.rc-head):not(.ap-kpi):not(.kpi-info) {
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 7px;
  text-transform: none; letter-spacing: 0; font: 600 12.5px var(--sans);
}
button.flip {
  background: transparent; color: var(--accent); border: 1px solid var(--rule);
  border-radius: 7px; text-transform: none; letter-spacing: 0; font: 12px var(--sans);
}

/* -- a module that is not built on this node yet ------------------------- */
.soon-card { max-width: 860px; }
.soon-card .panel > .body p { margin: 0 0 10px; color: var(--ink-dim); line-height: 1.55; }
.soon-card dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; margin: 6px 0 0; }
.soon-card dt { font: 600 10.5px/1.5 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.soon-card dd { margin: 0; color: var(--ink); }

@media (max-width: 860px) {
  .app { flex-direction: column; height: auto; overflow: visible; }
  .content > main { padding: 16px; }
  .topbar { padding: 14px 16px; flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .topbar-right { flex-wrap: wrap; gap: 8px; }
  .node-banner { padding: 8px 16px; }

  /* #513: the rail is a menu, closed until the top bar's Menu button opens
   * it over the page -- a link opened on a phone lands on the record. */
  nav.rail {
    display: none; position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(300px, 86vw); max-height: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  }
  .app.rail-open nav.rail { display: flex; }
  .app.rail-open .rail-backdrop {
    display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, 0.45);
  }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    background: var(--surface-alt); color: var(--ink); border: 1px solid var(--rule);
    border-radius: 7px; font: 600 12.5px var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer;
  }
  .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .menu-icon { font-size: 15px; line-height: 1; }

  /* KPI tiles two to a row. */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; min-width: 0; }
  .kpi-v { font-size: 21px; overflow-wrap: anywhere; }

  /* A wide table scrolls inside its own box; the page never scrolls
   * sideways. */
  main table { display: block; max-width: 100%; overflow-x: auto; }
  main .panel, main section, main .scroll { max-width: 100%; min-width: 0; }
  main pre { overflow-x: auto; max-width: 100%; }
}

/* ---------- Network (076): DEMO's tiered topology map ------------------- */
.site-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
/* Local Node Intelligence (#507): tiles that filter, removable chips, and
 * sortable column headers. The active tile carries an outline AND
 * aria-pressed, so colour is not the only channel. */
.kpi.kpi-on { outline: 2px solid var(--accent); outline-offset: -1px; }
button.chip.ni-chip { cursor: pointer; border: 1px solid var(--rule-strong); color: var(--ink); }
button.chip.ni-chip:hover { border-color: var(--accent); color: var(--accent); }
th button.ni-sort {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
th button.ni-sort:hover { color: var(--accent); }
th[aria-sort="ascending"] button.ni-sort, th[aria-sort="descending"] button.ni-sort { color: var(--ink); }
.ni-waiting li { margin-bottom: 6px; }

.site-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  background: var(--surface); color: var(--ink-dim); border: 1px solid var(--rule);
  border-radius: 20px; font: 12.5px var(--sans); text-transform: none; letter-spacing: 0; cursor: pointer;
}
.site-tab[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600;
}

.topo-wrap { overflow-x: auto; }
svg.topo { width: 100%; min-width: 900px; height: auto; display: block; }
.topo-tier { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; fill: var(--ink-faint); }
.topo-link { stroke: var(--ink-faint); opacity: 0.75; transition: opacity 0.12s; }
.topo-link.topo-ok { stroke: var(--ok); opacity: 0.45; }
.topo-link.topo-warning { stroke: var(--warning); opacity: 0.95; }
.topo-link.topo-critical { stroke: var(--critical); opacity: 1; stroke-dasharray: 5 4; }
.topo-link.topo-unknown { stroke: var(--ink-faint); stroke-dasharray: 2 4; }
.topo-node { cursor: pointer; transition: opacity 0.12s; }
.topo-node rect { fill: var(--surface-alt); stroke: var(--rule-strong); stroke-width: 1.2; }
.topo-node.topo-ok rect { stroke: color-mix(in srgb, var(--ok) 70%, var(--rule)); }
.topo-node.topo-warning rect { stroke: var(--warning); stroke-width: 2; }
.topo-node.topo-critical rect { stroke: var(--critical); stroke-width: 2; }
.topo-node:hover rect, .topo-node:focus rect { fill: color-mix(in srgb, var(--accent) 14%, var(--surface-alt)); }
.topo-node:focus { outline: none; }
/* Keyboard focus must be visible (#215): the SVG nodes draw their own ring. */
.topo-node:focus-visible rect { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 4 2; }
.topo-label { font: 600 10.5px var(--mono); fill: var(--ink); text-anchor: middle; }
.topo-sub { font: 9px var(--sans); fill: var(--ink-dim); text-anchor: middle; }
.topo-link.dim, .topo-node.dim { opacity: 0.12; }
/* #499: an edge opens its link. The wide transparent copy takes the pointer;
 * hover and keyboard focus thicken the drawn line. */
.topo-edge { cursor: pointer; }
.topo-edge:focus { outline: none; }
.topo-hit { stroke: transparent; stroke-width: 14; fill: none; pointer-events: stroke; }
.topo-edge:hover .topo-link, .topo-edge:focus-visible .topo-link { opacity: 1; stroke-width: 6; }
.topo-edge:focus-visible .topo-link { stroke: var(--accent); }
.topo-legend { margin-top: 10px; display: flex; gap: 16px; color: var(--ink-dim); font-size: 12px; }
.topo-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.topo-key { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--ink-faint); }
.topo-key.topo-ok { border-color: var(--ok); }
.topo-key.topo-warning { border-color: var(--warning); }
.topo-key.topo-critical { border-top-style: dashed; border-color: var(--critical); }
.topo-key.topo-unknown { border-top-style: dotted; }
.topo-detail { margin-top: 16px; }
dl.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0; }
dl.kv dt { font: 600 10.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
dl.kv dd { margin: 0; }
.panel > h3 .hint { font: 400 11px var(--sans); color: var(--ink-faint); margin-left: 8px; }

/* ---------- Digital Twin (077): DEMO's hall map ------------------------- */
.twin-grid-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .twin-grid-layout { grid-template-columns: 1fr; } }
.twin-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.twin-wrap { background: #05070a; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; touch-action: none; }
:root[data-theme="light"] .twin-wrap { background: #e9edf3; }
.twin-wrap.editing { outline: 2px dashed var(--accent); outline-offset: -2px; }
svg.twin-map { width: 100%; height: 540px; display: block; cursor: grab; }
svg.twin-map:active { cursor: grabbing; }
.twin-floor { fill: color-mix(in srgb, var(--surface) 60%, transparent); stroke: var(--rule-strong); stroke-width: 0.05; }
.twin-grid line { stroke: var(--rule); stroke-width: 0.015; }
.plan-layer { opacity: 0.55; pointer-events: none; }
.plan-dxf { fill: none; stroke: var(--ink-dim); }
.twin-rack { cursor: pointer; }
.twin-rack rect:first-child { stroke: rgba(0,0,0,0.35); stroke-width: 0.03; }
.twin-rack.nodata rect:first-child { stroke: var(--ink-faint); stroke-dasharray: 0.08 0.06; }
.twin-rack .twin-front { fill: rgba(255,255,255,0.55); }
.twin-rack:hover rect:first-child, .twin-rack:focus rect:first-child { stroke: var(--accent); stroke-width: 0.07; }
.twin-rack.picked rect:first-child { stroke: #fff; stroke-width: 0.09; }
.twin-rack:focus { outline: none; }
.twin-rack:focus-visible rect:first-child { stroke: var(--accent); stroke-width: 0.12; stroke-dasharray: 0.12 0.06; }
.twin-labels text { font: 600 0.22px var(--mono); fill: #fff; text-anchor: middle; pointer-events: none; opacity: 0; }
.twin-labels.on text { opacity: 0.9; }
.twin-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--ink-dim); flex-wrap: wrap; }
.twin-ramp { display: inline-block; width: 160px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #2f6fb3, #3a4150, #d18a2a, #c23b3b); }
.twin-nodata-key { display: inline-block; width: 14px; height: 10px; margin-left: 14px; border: 1px dashed var(--ink-faint);
  background: var(--surface-alt); }
.cal-wrap { margin-top: 10px; background: #05070a; border-radius: 8px; overflow: auto; max-height: 62vh; }
svg.cal-map { width: 100%; height: auto; display: block; cursor: crosshair; }
.cal-pt { fill: var(--accent); stroke: #000; }
.cal-lbl { fill: var(--accent); font: 700 24px var(--sans); }
.cal-line { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 6; }
.modal input[type="number"] { padding: 7px 9px; border-radius: 7px; border: 1px solid var(--rule); background: var(--surface-alt); color: var(--ink); width: 220px; }

/* ---- Rack Height headroom (#186) ---------------------------------- */
.hr-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.hr-controls .site-tabs { margin: 0; }
.hr-table td { white-space: nowrap; }
.hr-table tr.clickable { cursor: pointer; }
.hr-table tr.clickable:hover td { background: var(--hover, rgba(127,127,127,.08)); }
.hr-table tr.hr-nofit td { opacity: .55; }
.hr-bar { display: inline-block; width: 84px; height: 8px; border-radius: 4px;
  background: var(--line, rgba(127,127,127,.25)); overflow: hidden; vertical-align: middle; }
.hr-bar.hr-none { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line, #8884) 3px 6px); }
.hr-fill { display: block; height: 100%; }
.hr-fill.hr-ok { background: var(--ok); }
.hr-fill.hr-warning { background: var(--warning); }
.hr-fill.hr-critical { background: var(--critical); }
.hr-table .badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 9px;
  margin-right: 4px; border: 1px solid currentColor; }
.hr-table .badge-warning { color: var(--warning); }
.hr-table .badge-critical { color: var(--critical); }
.twin-unlaid { margin: -4px 0 12px; font-size: 12px; }
.twin-unlaid { color: var(--ink-dim); }
.twin-unlaid button.twin-unlaid-hall { background: transparent; border: 0; padding: 0; margin: 0;
  color: var(--ink-dim); font: inherit; font-weight: 400; text-transform: none; letter-spacing: 0;
  cursor: pointer; text-decoration: underline dotted; box-shadow: none; min-height: 0; }
.twin-unlaid button.twin-unlaid-hall:hover { color: var(--ink); background: transparent; }
/* rack page: list | elevation | cabinet + hold, side by side when it fits */
@media (min-width: 1200px) {
  .rack-page { flex-wrap: nowrap; }
  .rack-page > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
}
.rack-side { display: flex; flex-direction: column; gap: 14px; flex: 0 0 260px; }

/* Rows and other non-button controls made keyboard-reachable by dom.js (#215). */
.kb-activate { cursor: pointer; }
.kb-activate:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tr.kb-activate:focus-visible td { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* kW pending while the measured draw is read after the rack list (#261). */
.kw-pending { color: var(--ink-faint, #888); }

/* PDUs (#230): bar fills by class, in 5 % steps -- no inline style, so
   the CSP can drop 'unsafe-inline' once the other views follow. */
.hr-fill.w-0 { width: 0%; }
.hr-fill.w-5 { width: 5%; }
.hr-fill.w-10 { width: 10%; }
.hr-fill.w-15 { width: 15%; }
.hr-fill.w-20 { width: 20%; }
.hr-fill.w-25 { width: 25%; }
.hr-fill.w-30 { width: 30%; }
.hr-fill.w-35 { width: 35%; }
.hr-fill.w-40 { width: 40%; }
.hr-fill.w-45 { width: 45%; }
.hr-fill.w-50 { width: 50%; }
.hr-fill.w-55 { width: 55%; }
.hr-fill.w-60 { width: 60%; }
.hr-fill.w-65 { width: 65%; }
.hr-fill.w-70 { width: 70%; }
.hr-fill.w-75 { width: 75%; }
.hr-fill.w-80 { width: 80%; }
.hr-fill.w-85 { width: 85%; }
.hr-fill.w-90 { width: 90%; }
.hr-fill.w-95 { width: 95%; }
.hr-fill.w-100 { width: 100%; }
.pdu-t td { vertical-align: middle; }
.badge-warning { color: var(--warning); font-size: 11px; }

/* Cooling (#232) and the asset drawer's thermal flag (#239). */
.cool-chart-wrap { margin: 8px 0 16px; max-width: 760px; }
.cool-chart { width: 100%; height: auto; display: block; }
.cool-grid { stroke: var(--rule); stroke-width: 1; }
.cool-tick { fill: var(--ink-dim); font: 11px var(--mono); }
.cool-line { fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cool-range { fill: color-mix(in srgb, var(--info) 18%, transparent); stroke: none; }
.cool-threshold { stroke: var(--critical); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cool-hit { fill: transparent; }
.cool-hit:hover { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.thermal { margin: 8px 0 12px; }
.thermal-flag { margin-bottom: 6px; }
.thermal-line { color: var(--ink-dim); }

/* Admin > Modules (#301): pillar coverage, optional modules, setup wizard. */
.admin-tabs { margin: 0 0 12px; }
.section-h { margin: 18px 0 2px; font-size: 14px; color: var(--ink); }
.kpi-line { margin: 0 0 8px; color: var(--ink-dim); }
.kpi-line strong { color: var(--ink); font-size: 16px; }
.wizard { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface-alt); }
.wizard-steps { margin: 0 0 8px; padding-left: 20px; }
.wizard-steps > li { margin: 0 0 10px; line-height: 1.45; }
.wizard .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wizard .row input[type="text"] { flex: 1 1 240px; min-width: 0; }
.wizard ul.steps { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.wizard ul.steps li { margin: 3px 0; }
button.danger { border-color: var(--critical); }
.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; }

/* Power (#231): hall rows sit under their site. */
.hr-table tr.sub-row td { color: var(--ink-dim); }
.hr-table td.indent { padding-left: 22px; }
.hr-controls select { width: auto; max-width: 100%; }
.hr-controls input[type="search"] { padding: 6px 8px; background: var(--ground); border: 1px solid var(--rule-strong); color: var(--ink); font: 13px var(--sans); }

/* Module chips carry their connection state (#301). */
.chip.module-chip { display: inline-flex; align-items: center; gap: 6px; }
.chip.module-chip .sev-mark { width: 8px; height: 8px; }
.chip.chip-warning { border-color: var(--warning); color: var(--ink); }
.chip.chip-critical { border-color: var(--critical); color: var(--ink); }
.chip.chip-muted { opacity: .7; }
.note ul.steps { list-style: none; padding-left: 4px; }

/* ---- Floor Chat (G6) ----------------------------------------------------
   Every state is named in words (the badge); colour only reinforces it.
   An answer is a suggestion and is drawn with a dashed edge, never as a
   reading of record. */
.xe-panel .body { display: grid; gap: 14px; }
.xe-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.xe-empty { color: var(--ink-dim); }
.xe-turn { display: grid; gap: 6px; }
.xe-who { font-weight: 600; margin-right: 8px; color: var(--ink); }
.xe-q { color: var(--ink); }
.xe-a { border: 1px solid var(--rule-strong); border-left-width: 4px; border-radius: 6px;
        padding: 8px 10px; background: var(--surface-alt); color: var(--ink); }
.xe-a .xe-text { margin: 6px 0; white-space: pre-wrap; }
.xe-answer { border-style: dashed; border-left-style: solid; border-left-color: var(--accent); }
.xe-unavailable { border-left-color: var(--warning); }
.xe-refused { border-left-color: var(--critical); }
.xe-error { border-left-color: var(--unknown); }
.xe-pending { color: var(--ink-dim); }
.xe-badge { margin-left: 2px; }
.xe-answer .xe-badge { border-color: var(--accent); }
.xe-unavailable .xe-badge { border-color: var(--warning); }
.xe-refused .xe-badge { border-color: var(--critical); }
.xe-reads { font-size: 0.9em; color: var(--ink-dim); }
.xe-reads ul { margin: 4px 0 0 18px; padding: 0; }
.xe-read.bad .xe-read-status { color: var(--ink); font-weight: 600; }
.xe-reads-none { font-size: 0.9em; color: var(--ink-dim); margin: 0; }
.xe-form { display: grid; gap: 6px; }
.xe-form textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
                    background: var(--surface); border: 1px solid var(--rule-strong);
                    border-radius: 6px; padding: 8px; }
.xe-form-row { display: flex; align-items: center; gap: 12px; }
.xe-hint { color: var(--ink-faint); font-size: 0.85em; }
.xe-status { margin: 0; color: var(--ink-dim); min-height: 1.2em; }

/* Xe (G6) in the top bar, as on DEMO: a button, and a drawer on the right
 * over whatever page is showing. The conversation styles above still apply. */
.xe-open {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.xe-open:hover, .xe-open[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.xe-drawer {
  position: fixed; top: var(--xe-top, 0px); right: 0; bottom: 0; z-index: 50;
  width: min(460px, 100vw); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  background: var(--surface); border-left: 1px solid var(--rule-strong); border-top: 1px solid var(--rule);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}
.xe-drawer[hidden] { display: none; }
.xe-drawer-head { display: flex; align-items: center; gap: 10px; }
.xe-drawer-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.xe-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-dim); font-size: 18px; line-height: 1;
}
.xe-close:hover { color: var(--ink); border-color: var(--rule-strong); }
.xe-drawer-scope { margin: 0; font-size: 12px; }
.xe-voice-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.xe-voice-row button[aria-pressed="true"] { border-color: var(--accent, var(--rule-strong)); font-weight: 600; }
.xe-voice-picker select { max-width: 220px; font-size: 12px; }
.xe-off { margin: 0; border-left: 4px solid var(--warning); padding: 8px 10px; }
.xe-drawer-body { flex: 1; overflow-y: auto; min-height: 0; }
.xe-drawer-foot { display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 10px; }
.xe-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.xe-chip {
  padding: 5px 9px; border-radius: 14px; cursor: pointer; text-transform: none; letter-spacing: 0;
  font: 12px/1.2 var(--sans); color: var(--ink); background: var(--surface-alt); border: 1px solid var(--rule);
}
.xe-chip:hover:not([disabled]) { border-color: var(--accent); }
.xe-chip[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) { .xe-drawer { padding: 14px 16px; } }
.xe-by { margin-left: 6px; }
.xe-knowledge { margin-bottom: 4px; }

/* Admin > NeuralCore (ADR-019) */
.nc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.nc-dl dt { color: var(--ink-dim); }
.nc-dl dd { margin: 0; overflow-wrap: anywhere; }
.nc-refused { margin-top: 8px; font-size: 12px; color: var(--ink-dim); }
.nc-refused summary { cursor: pointer; }
.nc-refused ul { margin: 6px 0 0; }
.nc-form { display: grid; gap: 10px; max-width: 560px; }
.nc-field { display: grid; gap: 4px; font-size: 12px; color: var(--ink-dim); }
.nc-field input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 7px 9px; }
.nc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.nc-ok { color: var(--ink); }
.nc-bad { color: var(--ink); font-weight: 600; }
.chip.nc-on { border-color: var(--accent); color: var(--accent); }

/* -- Incident Command Center (#233) --------------------------------------- */
.hr-table tr.row-open td:first-child { box-shadow: inset 2px 0 var(--warning, #c77); }
.inc-panel { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 12px 16px; max-width: 860px; }
.inc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.inc-form label { display: flex; flex-direction: column; gap: 4px; font: 600 11px var(--sans); color: var(--ink-dim); }
.inc-form input, .inc-form select, .inc-form textarea { font: 400 13px var(--sans); }
.inc-panel .chips input[type="text"] { flex: 1; min-width: 220px; }

/* -- Dashboard parity (#234) ---------------------------------------------- */
.kpi-click { cursor: pointer; }
.kpi-click:hover { border-color: var(--rule-strong); }
.kpi-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A tile whose filter is on (#504): the border says so, and aria-pressed says it to a screen reader. */
.kpi-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.trend-card { max-width: none; }
.trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.trend-title { font-weight: 700; font-size: 12.5px; }
.trend-now { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.trend-chart { width: 100%; height: auto; display: block; }
.trend-forecast { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .9; }
.loadbar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--rule) 55%, transparent); overflow: hidden; margin: 4px 0 2px; }
.loadbar-fill { height: 100%; border-radius: 4px; background: var(--accent); }
.loadbar-fill.fill-warn { background: var(--warning, #c9a227); }
.loadbar-fill.fill-crit { background: var(--critical, #c0392b); }
.load-row { margin-bottom: 12px; }
.load-row-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); margin-bottom: 2px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--hover, rgba(127,127,127,.08)); }
.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.act-list li { display: flex; gap: 8px; align-items: flex-start; padding: 2px 4px; border-radius: 6px; }
.act-list .act-body { min-width: 0; }
.load-kv { width: 100%; table-layout: fixed; }
.load-kv th { width: 130px; }
.load-kv td { white-space: normal; overflow-wrap: anywhere; }

/* -- Operations NOC board (#237) ------------------------------------------ */
.ops-detail { color: var(--ink-dim); max-width: 560px; white-space: normal; }
/* `.hr-table td` (nowrap) outranks `.ops-detail`, so a long detail ran into the
   next column (153's disk forecast sentence). Wrap it inside its own cell. */
.hr-table td.ops-detail:not(.notes-clip) { white-space: normal; overflow-wrap: anywhere; min-width: 24ch; }
/* #500: where a tile lands is outlined for a moment, so the eye follows the click. */
.ops-flash { animation: ops-flash 1.6s ease-out 1; border-radius: 6px; }
@keyframes ops-flash { from { box-shadow: 0 0 0 2px var(--accent); } to { box-shadow: 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .ops-flash { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; } }

/* -- Digital Twin overlay states (#241) ----------------------------------- */
.twin-rack.stale rect:first-child { stroke: var(--ink-faint); stroke-dasharray: 0.06 0.06; stroke-width: 0.03; }
.twin-rack.nobudget rect:first-child { fill: var(--surface-alt); stroke: var(--accent); stroke-dasharray: 0.09 0.06; stroke-width: 0.03; }
.twin-nobudget-key { display: inline-block; width: 14px; height: 10px; border: 1.5px dashed var(--accent); border-radius: 2px; margin-left: 12px; }

/* #236 — the cable-trace drawer */
.trace-steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.trace-steps li { line-height: 1.5; }
.trace-steps .attn-attr { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

/* #240 — Admin audit log */
.audit-json { font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: color-mix(in srgb, currentColor 6%, transparent); border-radius: 6px; padding: 8px; max-height: 260px; overflow: auto; }

/* ---------- Admin > Backup & Restore (#400) ------------------------- */
.form-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 6px 0 18px; }
.form-row .field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.form-row .field > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); }
.form-row .field input, .form-row .field select {
  margin: 0; padding: 7px 8px; background: var(--ground); border: 1px solid var(--rule-strong);
  color: var(--ink); font: 13px var(--mono); width: auto; min-width: 150px;
}
.form-row .field input[type="text"] { min-width: 240px; }
pre.code { margin: 8px 0 0; padding: 8px 10px; background: var(--ground); border: 1px solid var(--rule-strong);
  font: 13px var(--mono); white-space: pre-wrap; word-break: break-all; user-select: all; }
.muted { color: var(--ink-dim); }
.kpis.compact .kpi-v { font-size: 17px; line-height: 1.3; word-break: break-all; }

/* Admin > Updates: the one place the install action lives (#455). */
.install-panel { border: 2px solid var(--warning); border-radius: 10px; padding: 14px 16px; margin: 12px 0 18px; background: color-mix(in srgb, var(--warning) 8%, transparent); }
.install-panel h3 { margin: 0 0 6px; }
.install-panel .install-row { align-items: flex-end; gap: 12px; margin-top: 10px; }
.install-panel .install-row .field { flex: 1 1 360px; }
.install-panel .install-row input { width: 100%; }
.install-panel .install-go { font-size: 1.05em; padding: 10px 18px; }
.install-panel .install-hint { margin-top: 6px; }
.notes-clip { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin > Modules: tabs behind a switch (#457; off by default, locked until built). */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 44px; height: 24px; border-radius: 12px; background: var(--rule-strong); position: relative; transition: background .15s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-dim, #9aa3b2); transition: left .15s; }
.switch input:checked + .switch-track { background: var(--ok, #3fb68b); }
.switch input:checked + .switch-track .switch-knob { left: 23px; background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent, #5ac8b8); outline-offset: 2px; }
.switch.locked { cursor: not-allowed; opacity: .6; }
.switch-label { font-weight: 600; }
.install-cats { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.mod-icon { margin-right: .45em; }
/* Admin > Updates: an update's full record (#465). */
.job-detail > td { background: var(--surface-alt); padding: 12px 16px; }
/* History: clip long reason/outcome text in the row (full text on hover and
   in the record) so the table never pushes its own controls out of view. */
.job-history .job-row { cursor: pointer; }
.job-history .job-row:hover > td { background: var(--surface-alt); }
.job-history td.clip { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-history td.clip .statusrow { white-space: nowrap; }
.job-history .job-toggle { white-space: nowrap; }
.job-box h4 { margin: 12px 0 4px; }
.job-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 8px; }
.job-facts dt { color: var(--ink-dim); }
.job-facts dd { margin: 0; }
.job-steps td, .job-steps th { padding: 3px 8px; }
.job-log { max-height: 420px; overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px; font: 12px/1.45 var(--mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }

/* Admin > Updates (124): history pager, export, cancel / stop, the record. */
.history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
a.button { display: inline-block; padding: 6px 12px; border: 1px solid var(--line, #33404f); border-radius: 8px;
  color: inherit; text-decoration: none; font-size: 13px; }
a.button:hover { background: var(--surface-alt); }
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.pager select { width: auto; }
.cancel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.change-rel { margin: 6px 0 10px; }
.change-list { margin: 4px 0 0 0; padding-left: 18px; }
.change-list li { margin: 3px 0; line-height: 1.45; }
.change-list .chip { font-size: 11px; padding: 1px 6px; }
.change-list .ref-num { font-size: 11px; color: var(--ink-faint); margin-left: 4px; }
.job-steps tr.changed td { font-weight: 600; }

/* Report a problem / request a feature (2026.10.14) */
.feedback-btn { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--surface-alt); color: var(--ink); }
.feedback-btn:hover { border-color: var(--accent); }
.feedback-form { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: start; }
.feedback-form label { display: contents; font-size: 12px; color: var(--ink-dim); }
.feedback-form label[hidden] { display: none; }
.feedback-form input, .feedback-form select, .feedback-form textarea { font: inherit; width: 100%; box-sizing: border-box; }
.note.good { border-left-color: var(--ok, #2e9e5b); color: var(--ink); }
.asset-links ul.steps { list-style: none; padding-left: 4px; margin: 0; }
.asset-links ul.steps li { margin: 4px 0; }
@media (max-width: 640px) { .feedback-form { grid-template-columns: 1fr; } }
.feedback-count { display: inline-block; min-width: 16px; margin-left: 6px; padding: 0 5px; border-radius: 8px;
  background: var(--warning); color: #111; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.feedback-count[hidden] { display: none; }
.feedback-note { margin-top: 3px; padding: 4px 6px; border-left: 2px solid var(--accent); background: var(--surface-alt); }
.feedback-new { margin-left: 6px; font-size: 10px; }
tr.row-changed td:first-child { box-shadow: inset 2px 0 var(--warning); }

/* -- click-to-sort headers (#506): the th carries aria-sort, the button is the control */
th.th-sort { padding: 0; }
.th-sort-btn {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  padding: 8px 10px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit;
}
th.n .th-sort-btn { text-align: right; }
.th-sort-btn:hover { color: var(--ink); }
.th-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th[aria-sort="ascending"] .th-sort-btn, th[aria-sort="descending"] .th-sort-btn { color: var(--ink); }
.th-sort-mark { font-size: 9px; }

/* ---- Benchmark & Insights ------------------------------------------- */
.bm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bm-tiles .kpi-note { max-width: 22ch; }
.bm-link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-align: inherit; cursor: pointer; }
.bm-link:hover { text-decoration: underline; }
.bm-league td .sub { font: 11px/1.35 var(--sans); color: var(--ink-dim); margin-top: 3px; white-space: nowrap; }
.bm-league td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.bm-league td.n .statusrow { justify-content: flex-end; }
.bm-rank { margin-left: 6px; font: 600 10px var(--mono); color: var(--ink-dim); }
.bm-target { gap: 4px; }
.bm-target .sev-mark { width: 7px; height: 7px; }
.bm-target-t { font-size: 11px; color: var(--ink-dim); }
.bm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bm-card { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--rule);
  border-radius: 7px; font: inherit; line-height: 1.45; color: var(--ink); background: transparent; }
.bm-card:hover { border-color: var(--accent); }
.bm-dists { margin-top: 14px; }
.bm-dists th { text-align: left; font-weight: 600; vertical-align: top; width: 26%; }
.bm-dists td { vertical-align: top; }
.bm-strip { width: 220px; height: 22px; display: block; }
.bm-axis { stroke: var(--rule); stroke-width: 1; }
.bm-band { fill: color-mix(in srgb, var(--info) 28%, transparent); }
.bm-median { stroke: var(--ink); stroke-width: 2; }
.bm-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1; }
.bm-excluded summary { cursor: pointer; font-size: 11px; color: var(--ink-dim); }
.bm-excluded ul, .bm-outliers { margin: 4px 0 0; padding-left: 16px; font-size: 11.5px; }
.bm-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bm-line { width: 100%; height: 70px; display: block; }
.bm-why { margin-top: 4px; font-size: 11px; color: var(--ink-faint); }
.bm-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.bm-board .sub { font-size: 11px; color: var(--ink-dim); margin: 2px 0 6px; }
.bm-set { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.bm-set input { width: 9em; }
.bm-basis dt { font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink-dim); margin-top: 8px; }
.bm-basis dd { margin: 2px 0 0; }
.bm-board td.id { white-space: nowrap; }
.bm-targets td { vertical-align: top; width: 30%; }
.bm-targets td:first-child { width: 10%; }
.bm-tnote { white-space: normal; max-width: 40ch; overflow-wrap: anywhere; }

/* ---------- Recommendation Centre ------------------------------------ */
/* Built for a technician at the rack: the place leads every row, targets are
 * finger-sized on a tablet, severity is shape + word + colour, and the first
 * thing a row opens to is what to do and when it is done. */
.rc-head-line { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; justify-content: space-between; margin: 6px 0 10px; }
.rc-head-line > p { flex: 1 1 420px; margin: 0; }
.rc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-mode button { min-height: 32px; }
.rc-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.rc-sources .chip .sev-mark { width: 8px; height: 8px; margin-right: 5px; }
.rc-unread { flex-basis: 100%; margin-top: 4px; }
.rc-tiles .kpi { min-height: 92px; }
.rc-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: -8px 0 14px; }
.rc-search { flex: 1 1 260px; min-height: 36px; padding: 6px 10px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 7px; font: 13px var(--sans); }
.rc-sel { display: inline-flex; flex-direction: column; gap: 3px; }
.rc-sel select { min-height: 36px; padding: 4px 8px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 7px; font: 13px var(--sans); }
.rc-tier-h { display: flex; align-items: center; gap: 4px; margin: 14px 0 8px; font: 600 12px/1.3 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.rc-tier-h:first-child { margin-top: 2px; }
.rc-tier-h { flex-wrap: wrap; column-gap: 10px; }
.rc-tier-l { white-space: nowrap; }
.rc-tier-says { text-transform: none; letter-spacing: 0; font: 12px var(--sans); }
.rc-walk-h { margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--rule-strong);
  font: 600 13px/1.3 var(--sans); color: var(--ink); }
.rc-walk-rack { margin: 10px 0 4px; font: 600 12.5px/1.3 var(--mono); }
.rc-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-card { border: 1px solid var(--rule); border-left: 4px solid var(--unknown); border-radius: 8px; background: var(--surface); }
.rc-card.rc-t1 { border-left-color: var(--critical); }
.rc-card.rc-t2 { border-left-color: var(--warning); }
.rc-card.rc-t3 { border-left-color: var(--info); }
button.rc-head { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; width: 100%;
  min-height: 48px; padding: 10px 12px 4px; background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--ink); font: inherit; text-transform: none; letter-spacing: normal; }
button.rc-head:hover .rc-title { color: var(--accent); }
.rc-head[aria-expanded="true"] { border-bottom: 1px solid var(--rule); }
.rc-tier { display: inline-flex; align-items: center; font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); }
.rc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-loc { font: 600 13.5px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.rc-title { font-size: 13px; color: var(--ink); }
.rc-measured { font-size: 12px; color: var(--ink-dim); }
.rc-score { font: 600 13px/1 var(--mono); color: var(--ink-dim); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 5px 9px; }
.rc-badges { padding: 4px 12px 10px 116px; }
.rc-held-chip { border-color: var(--critical); color: var(--ink); }
.rc-body:empty { display: none; }
.rc-detail { padding: 12px; }
.rc-detail-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-actions button { min-height: 36px; }
.rc-ack-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 380px; }
.rc-ack-note { flex: 1 1 240px; min-height: 36px; padding: 6px 10px; background: var(--surface-alt); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 7px; font: 13px var(--sans); }
button.rc-ack { min-height: 36px; }
.rc-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.rc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rc-sec-h { margin-bottom: 6px; font: 600 10.5px/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); }
.rc-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.5; }
.rc-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.rc-safety li { color: var(--ink); }
.rc-dont li { color: var(--ink-dim); }
.rc-verify { margin: 0; font-weight: 600; }
.rc-why { margin: 0 0 8px; color: var(--ink-dim); }
.rc-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-ev { font-size: 12px; line-height: 1.45; }
.rc-ev-what { margin-right: 6px; color: var(--ink); }
.rc-ev-val { font-family: var(--mono); color: var(--ink-dim); }
.rc-ev .linkish { margin-left: 6px; }
.rc-src { display: inline-block; min-width: 62px; margin-right: 6px; font: 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.rc-reading { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rc-read-h { font-weight: 600; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-read-t { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.rc-origin-neuralcore { border-color: var(--accent); color: var(--accent); }
.rc-more { margin-top: 8px; min-height: 36px; }
.rc-basis > summary { padding: 9px 10px; cursor: pointer; font: 600 11px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.rc-basis dt { font: 600 11px/1.3 var(--mono); text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.rc-basis dd { margin: 2px 0 0; font-size: 12.5px; }
.rc-footer { margin-top: 14px; }
#rc-outcomes { margin-top: 14px; }
@media (max-width: 760px) {
  .rc-cols { grid-template-columns: 1fr; }
  button.rc-head { grid-template-columns: 1fr auto; }
  .rc-tier { grid-column: 1 / -1; }
  .rc-badges { padding-left: 12px; }
  .rc-steps { font-size: 15px; }
}
@media print {
  body:has(#rc-list) .rail, body:has(#rc-list) .topbar, body:has(#rc-list) .rc-filters,
  body:has(#rc-list) .rc-tools, body:has(#rc-list) .rc-tiles, body:has(#rc-list) .rc-actions,
  body:has(#rc-list) .rc-ack-box, body:has(#rc-list) .rc-more, body:has(#rc-list) .xe-drawer { display: none !important; }
  body:has(#rc-list) .rc-card { break-inside: avoid; }
}

/* ---- Financial: the lab view (#649) ------------------------------------ */
.fo-tiles .kpi { min-height: 104px; }
.fo-tiles .kpi-note { max-width: 30ch; }
.fo-kpi { text-align: left; font: inherit; color: inherit; }

.fo-stack { margin-top: 14px; }
.fo-stack-t td, .fo-stack-t th { vertical-align: top; }
.fo-stack-t tfoot th { border-top: 1px solid var(--rule-strong); }
.fo-unpriced { margin: 10px 0 4px; padding-left: 18px; font-size: 12px; color: var(--ink-dim); }
.fo-unpriced li { margin: 2px 0; }
.fo-head { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 12px 4px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fo-head .sev-mark { margin-top: 5px; flex: none; }
.fo-title { flex: 1 1 auto; font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.fo-lab { display: inline-block; margin-left: 8px; font: 500 11px/1.6 var(--mono); color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.fo-money { flex: none; text-align: right; font: 600 14px/1.3 var(--mono); }
.fo-what { display: block; font: 11px/1.3 var(--sans); color: var(--ink-dim); max-width: 22ch; }
.fo-sub { padding: 0 12px 10px 30px; font-size: 12.5px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; }
.fo-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fo-tag { font: 500 10.5px/1.6 var(--mono); padding: 0 6px; border-radius: 4px; background: var(--surface-alt);
  border: 1px solid var(--rule); color: var(--ink-dim); }
.fo-who { color: var(--accent); }
.fo-body { padding: 4px 12px 12px 30px; border-top: 1px solid var(--rule); }
.fo-basis { margin: 8px 0; font-size: 12.5px; }
.fo-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin: 8px 0; }
.fo-k { font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink-dim); margin-top: 6px; }
.fo-steps { margin: 4px 0; padding-left: 18px; }
.fo-steps li { margin: 3px 0; }
.fo-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fo-items td.id { white-space: nowrap; }
.fo-labs-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fo-labs td .sub, .fo-labs td .sub.scope { font-size: 11px; white-space: nowrap; }
.fo-unit { margin-top: 10px; }
.fo-unit summary, .fo-notnode summary { cursor: pointer; font-size: 12.5px; color: var(--ink-dim); }
.fo-notnode { margin: 14px 0; }
.fo-notnode ul { padding-left: 18px; font-size: 12.5px; }
.fo-refresh td { vertical-align: middle; }
.fo-bar-cell { width: 28%; min-width: 80px; }
.fo-bar { display: block; height: 8px; border-radius: 3px; background: var(--info); min-width: 1px; }
.fo-bar-past { background: var(--critical); }
.fo-late { margin-left: 6px; color: var(--warning); border-color: var(--warning); }
@media (max-width: 720px) {
  .fo-cols { grid-template-columns: 1fr; }
  .fo-head { flex-wrap: wrap; }
  .fo-money { text-align: left; flex-basis: 100%; padding-left: 16px; }
  .fo-sub, .fo-body { padding-left: 12px; }
  .fo-tiles .kpi-note { max-width: none; }
}
.fo-unit-s { font-size: 0.55em; font-weight: 500; margin-left: 4px; color: var(--ink-dim); }
.fo-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.fo-labs td.n, .fo-labs th.n { white-space: nowrap; }
.fo-labs th { vertical-align: bottom; }
.fo-labs tfoot th { font: 600 12px var(--mono); text-transform: none; }
@media (max-width: 720px) { .fo-title { flex: 1 1 calc(100% - 30px); } }
/* Asset Audit (#648): reuses the Recommendation Centre's cards and detail. */
.aa-buckets { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.aa-bucket { min-height: 32px; }
#aa-sites, #aa-racks, #aa-outcomes { margin-top: 14px; }
table.aa-sites tr.kpi-on td { background: var(--surface-alt); font-weight: 600; }
table.aa-claims { width: 100%; font-size: 12.5px; }
table.aa-claims td { vertical-align: top; }
.aa-basis { font: 10.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.aa-basis-measured { border-color: var(--ok); }
.aa-basis-asserted { border-color: var(--rule-strong); color: var(--ink-dim); }
.aa-basis-none { border-color: var(--warning); color: var(--warning); }
.aa-onsite { flex-direction: row; align-items: center; gap: 6px; min-height: 36px; }
@media print {
  body:has(#aa-list) .rail, body:has(#aa-list) .topbar, body:has(#aa-list) .rc-filters,
  body:has(#aa-list) .rc-tools, body:has(#aa-list) .rc-tiles, body:has(#aa-list) .aa-buckets,
  body:has(#aa-list) .rc-actions, body:has(#aa-list) .rc-more, body:has(#aa-list) .xe-drawer { display: none !important; }
  body:has(#aa-list) .rc-card { break-inside: avoid; }
}
/* Staff / HR (#653): roster, skills matrix, rate card, cost per period. */
.st-panel, .st-ref { margin-top: 14px; }
.st-cost { margin-bottom: 6px; }
.st-cost .kpi-v { font-size: 22px; }
.st-cost .st-cost-year .kpi-v { color: var(--ink-dim); }
.st-rests { margin: 2px 0 10px; }
.st-tiles .kpi { min-height: 84px; }
.st-who { color: var(--ink); }
.st-flash .note { margin: 0 0 10px; }
.st-attn { list-style: none; margin: 0; padding: 0; }
.st-attn li { padding: 6px 0; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.st-attn li:last-child { border-bottom: 0; }
.st-attn .sev-mark { width: 9px; height: 9px; }
.st-link { margin-left: 8px; min-height: 28px; }
.st-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.st-tools > * { flex: 0 1 auto; width: auto; }
.st-tools > .rc-search { flex: 1 1 260px; }
.st-tools select { min-height: 36px; max-width: 320px; }
.st-tools .st-add { min-height: 36px; padding: 0 14px; }
table.st-roster td, table.st-bysite td { vertical-align: top; }
table.st-roster tr.st-open td { background: var(--surface-alt); }
table.st-roster tr.st-edit-row > td { background: var(--surface-alt); padding: 12px 10px 16px; }
td.st-unpriced, td.st-zero, .st-unpriced { color: var(--warning); }
td.st-partial > div:first-child { color: var(--ink); }
.st-editor h4 { margin: 0 0 8px; font: 600 14px var(--sans); }
.st-sec-h { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); margin: 10px 0 6px; }
.st-form { margin: 0 0 6px; }
.st-form .field { min-width: 170px; flex: 1 1 170px; max-width: 260px; }
.st-form .field input[type="text"] { min-width: 0; }
.st-form .field textarea { min-width: 260px; font: inherit; padding: 6px 8px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 6px; }
.st-form .field small { font-size: 10.5px; }
.st-check-box { display: flex; align-items: center; gap: 6px; min-height: 34px; font-size: 12.5px; }
.st-more { margin-top: 8px; min-height: 32px; }
.st-preview { margin: 8px 0; }
.st-break { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 2px 0; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.st-actions button { min-height: 36px; padding: 0 14px; }
.st-actions input[type="text"] { flex: 1 1 260px; }
.st-end { margin-top: 12px; }
.st-end summary, .st-rate-add summary, .st-ref > summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
.st-ref > summary { padding: 9px 10px; font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
button.st-danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 45%, var(--rule)); }
table.st-matrix th.st-comp { font-size: 10.5px; line-height: 1.25; vertical-align: bottom; min-width: 64px; white-space: normal; }
table.st-matrix th.st-critical { color: var(--ink); }
.st-crit-mark { color: var(--warning); }
table.st-matrix td.num { text-align: center; }
table.st-matrix select.st-lv-sel { min-height: 30px; width: 54px; min-width: 54px; padding-left: 6px; }
table.st-matrix .st-lv-3, table.st-matrix .st-lv-4, table.st-matrix .st-lv-5 { font-weight: 700; }
table.st-matrix tfoot th, table.st-matrix tfoot td { border-top: 2px solid var(--rule-strong); font: 600 12px var(--mono); }
table.st-matrix td.st-flag { color: var(--warning); }
table.st-matrix td.st-flag .sev-mark { width: 8px; height: 8px; margin-right: 4px; }
.st-cell-msg { display: block; font-size: 10px; color: var(--critical); }
.st-lab + .st-lab { margin-top: 14px; }
table.st-rates td { vertical-align: top; }
.st-rate-set { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.st-rate-set input[type="number"] { width: 120px; }
.st-rate-set input[type="text"] { width: 52px; }
.st-site-rate { margin-bottom: 6px; }
.st-ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.st-ref dl { margin: 0; }
.st-ref dt { font-weight: 600; margin-top: 6px; }
.st-ref dd { margin: 2px 0 0; color: var(--ink-dim); line-height: 1.45; }
.st-basis { margin: 0; padding-left: 18px; color: var(--ink-dim); line-height: 1.5; }
@media (max-width: 720px) {
  /* the roster scrolls sideways on a phone; the editor in its row stays in view */
  .st-edit-row .st-editor { position: sticky; left: 0; width: calc(100vw - 72px); }
  .st-form .field { max-width: none; flex-basis: 100%; }
  .st-cost .kpi-v { font-size: 18px; }
}
@media print {
  body:has(#st-roster) .rail, body:has(#st-roster) .topbar, body:has(#st-roster) .rc-tools,
  body:has(#st-roster) .st-tools, body:has(#st-roster) .st-rate-set, body:has(#st-roster) .st-rate-add,
  body:has(#st-roster) .xe-drawer { display: none !important; }
}
table.st-rates .chip { margin-left: 6px; }
/* Asset Audit -- By rack and the rack audit sheet (#648 follow-up) */
.aa-rack-filters { margin: 0 0 10px; }
.aa-count { align-self: center; }
table.aa-rack-t td, table.aa-sheet-t td { vertical-align: middle; }
.aa-tagcell { min-width: 96px; }
.aa-bar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
.aa-bar > span { display: block; height: 100%; background: var(--accent); }
.aa-mini { font-size: 10.5px; padding: 1px 6px; margin: 0 4px 2px 0; }
.aa-kinds { max-width: 260px; }
.aa-standing .sev-mark { width: 8px; height: 8px; margin-right: 5px; }
.aa-st-overdue, .aa-st-never { border-color: var(--warning); }
.aa-st-ok { border-color: var(--ok); }
.aa-sheet-h { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.aa-sheet-title { font: 600 15px/1.3 var(--mono); flex: 1 1 auto; }
.aa-back { min-height: 36px; }
.aa-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 13px; }
.aa-kv dt { color: var(--ink-faint); font: 600 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.aa-kv dd { margin: 0; }
.aa-sheet-actions { margin-bottom: 12px; }
.aa-sheet-body .rc-sec-h { margin-top: 14px; }
td.mono, .aa-serial { font-family: var(--mono); font-size: 12px; }
.aa-serial { direction: rtl; text-align: left; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-line-t1 td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
.aa-line-t2 td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.aa-line-t3 td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.aa-row-chip { cursor: pointer; text-align: left; }
.aa-checks { font: 12px/1.4 var(--mono); color: var(--ink-faint); white-space: nowrap; }
.aa-checkcell { display: none; }
.aa-elev { margin-top: 14px; }
.aa-elev > summary { cursor: pointer; font: 600 11px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 0; }
@media (max-width: 760px) {
  .aa-kv { grid-template-columns: 1fr; }
  .aa-kinds { max-width: none; }
}
@media print {
  body:has(.aa-sheet) .aa-checkcell { display: table-cell; }
  body:has(.aa-sheet) .aa-back, body:has(.aa-sheet) .aa-sheet-actions, body:has(.aa-sheet) .aa-elev,
  body:has(.aa-sheet) #aa-sites, body:has(.aa-sheet) #aa-racks, body:has(.aa-sheet) #aa-outcomes,
  body:has(.aa-sheet) .rc-basis, body:has(.aa-sheet) .rc-sources, body:has(.aa-sheet) .asof { display: none !important; }
  body:has(.aa-sheet) .aa-serial { direction: ltr; max-width: none; overflow: visible; }
}

/* #655: Financial › Reference values, TCO */
.fo-tabs { margin: 4px 0 14px; }
.fo-tco { margin-top: 14px; }
.fo-tco-t tfoot th { border-top: 1px solid var(--rule-strong); }
.fo-ref .panel { margin-top: 12px; }
.fo-ref-t td { vertical-align: top; }
.fo-ref-t td a { color: var(--accent); overflow-wrap: anywhere; }
.fo-ref-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
.fo-ref-edit input[type="number"] { width: 9ch; }
.fo-ref-edit input[type="text"], .fo-ref-edit input[type="url"] { flex: 1 1 22ch; min-width: 0; }
/* CMIC / Remediation (#659): lifecycle worklist, refresh waves, plans. */
.cm-panel, .cm-ref { margin-top: 14px; }
.cm-sources { margin-bottom: 10px; }
.cm-tiles .kpi { min-height: 88px; }
.cm-who { color: var(--ink); }
.cm-flash .note { margin: 0 0 10px; }
.cm-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.cm-top > .panel { margin-top: 14px; }
.cm-wave { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding: 3px 0; }
.cm-wave[onclick], .cm-wave.kb-activate { cursor: pointer; }
.cm-wave-l { font: 12px var(--mono); color: var(--ink-dim); }
.cm-wave-bar { position: relative; height: 12px; background: var(--surface-alt); border-radius: 3px; overflow: hidden; }
.cm-wave-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--warning) 55%, transparent); }
.cm-wave-plan { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.cm-wave-past .cm-wave-fill { background: color-mix(in srgb, var(--critical) 60%, transparent); }
.cm-wave-n { font: 12px var(--mono); text-align: right; }
td.cm-warn, td.cm-warn button { color: var(--warning); }
td.cm-crit, td.cm-crit button { color: var(--critical); }
.cm-link { min-height: 26px; padding: 0 4px; font: inherit; }
.cm-more { margin-top: 8px; min-height: 32px; }
.cm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cm-tools > * { flex: 0 1 auto; width: auto; }
.cm-tools > .rc-search { flex: 1 1 260px; }
.cm-tools select { min-height: 36px; max-width: 280px; }
table.cm-work td { vertical-align: top; }
table.cm-work tr.cm-open td { background: var(--surface-alt); }
table.cm-work tr.cm-detail-row > td { background: var(--surface-alt); padding: 10px 10px 16px; }
.cm-tier { font-size: 12px; }
.cm-code { font-family: var(--mono); font-weight: 600; }
.cm-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 8px; }
.cm-kv dt { color: var(--ink-dim); font-size: 12px; }
.cm-kv dd { margin: 0; }
.cm-kv-sm { font-size: 12.5px; }
.cm-standing { margin: 4px 0 10px; font-weight: 600; }
.cm-sec-h { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); margin: 10px 0 6px; }
.cm-form .field { min-width: 160px; flex: 1 1 160px; max-width: 240px; }
.cm-form .field input[type="text"] { min-width: 0; }
.cm-reason { display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.cm-reason > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); }
.cm-reason textarea { font: inherit; padding: 6px 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cm-actions button { min-height: 36px; padding: 0 14px; }
.cm-actions input[type="text"] { min-height: 34px; flex: 1 1 200px; }
.cm-actions input[name^="cm-ref-"] { flex: 0 1 150px; }
button.cm-danger { color: var(--critical); }
.cm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cm-tabs button { min-height: 32px; }
.cm-plans { display: grid; gap: 10px; }
.cm-plan { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.cm-plan.cm-overdue { border-color: color-mix(in srgb, var(--warning) 55%, var(--rule)); }
.cm-plan-h { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.cm-plan-h strong { font-family: var(--mono); }
.cm-plan-r { margin: 6px 0; }
.cm-basis { margin: 0; padding-left: 18px; color: var(--ink-dim); line-height: 1.5; }
.cm-ref > summary { cursor: pointer; padding: 9px 10px; font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .cm-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cm-wave { grid-template-columns: 80px minmax(0, 1fr) 96px; }
  .cm-detail-row .cm-detail { position: sticky; left: 0; width: calc(100vw - 72px); }
  .cm-form .field { max-width: none; flex-basis: 100%; }
}
@media print {
  body:has(#cm-work) .rail, body:has(#cm-work) .topbar, body:has(#cm-work) .rc-tools,
  body:has(#cm-work) .cm-tools, body:has(#cm-work) .cm-propose, body:has(#cm-work) .cm-actions,
  body:has(#cm-work) .xe-drawer { display: none !important; }
}
/* Assets / DCIM, consolidated: find first, five figures, one row per lab,
   one row per device (every issue on the row), evidence folded. */
.ap-find { margin-bottom: 14px; }
.ap-find .body, .ap-find { padding-bottom: 6px; }
.ap-find-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px; }
.ap-find-k { font: 600 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.ap-search { flex: 1 1 320px; min-height: 44px; padding: 8px 12px; font: 15px/1.3 var(--mono); background: var(--surface);
  color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 8px; }
.ap-elsewhere { padding: 0 12px 10px; }
.ap-elsewhere > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-dim); padding: 4px 0; }
.ap-elsewhere .find-asset { margin: 8px 0 0; }
.ap-tiles .kpi { min-height: 96px; }
.ap-unread { margin-bottom: 12px; }
.ap-labs { margin-top: 14px; }
table.ap-lab-t td, table.ap-dev-t td { vertical-align: middle; }
.ap-cell { font-weight: 600; }
.ap-share { white-space: nowrap; min-width: 150px; }
.ap-bar { display: inline-block; width: 70px; height: 6px; margin: 0 8px; vertical-align: middle; border-radius: 3px;
  background: var(--surface-alt); overflow: hidden; }
.ap-bar > span { display: block; height: 100%; background: var(--warning); }
.ap-pct { font-size: 11px; }
.ap-list { margin-top: 14px; }
.ap-list.ap-loading { opacity: 0.6; }
.ap-list-h { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; justify-content: space-between; }
.ap-filters { margin: 0 0 8px; align-items: flex-end; }
.ap-seg { display: flex; flex-wrap: wrap; }
.ap-seg button { min-height: 36px; }
.ap-count { font-family: var(--mono); color: var(--ink-faint); }
.ap-pager { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.ap-pager button { min-height: 36px; }
.ap-dev .id { font-weight: 600; }
.ap-serial { direction: rtl; text-align: left; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-where { white-space: nowrap; }
.ap-rack { font: 600 13px/1.4 var(--mono); }
.ap-u { font: 13px/1.4 var(--mono); color: var(--ink-dim); }
.ap-site { font-size: 11.5px; }
.ap-kind { font-size: 12.5px; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-issue { font-size: 11.5px; padding: 2px 8px; }
.ap-issue .sev-mark { width: 8px; height: 8px; margin-right: 5px; }
.ap-critical { border-color: var(--critical); }
.ap-warning { border-color: var(--warning); }
.ap-evidence { margin-top: 22px; }
.ap-fold { margin-top: 8px; }
.ap-fold > summary { padding: 10px 12px; cursor: pointer; font: 600 12px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ink-dim); }
.ap-fold-body { padding: 0 12px 12px; }
button.ap-kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.ap-kpi:focus-visible, .ap-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-subchip { cursor: pointer; align-self: center; }
@media (max-width: 760px) {
  .ap-seg button, .ap-pager button, .ap-subchip { min-height: 44px; }
  table.ap-dev-t thead { display: none; }
  table.ap-dev-t tr { display: block; padding: 10px 4px; border-bottom: 1px solid var(--rule); }
  table.ap-dev-t td { display: block; border: 0; padding: 2px 0; }
  .ap-serial { max-width: none; }
}

/* ---- Site Memory (#671) -------------------------------------------------- */
.sm-tiles .kpi { min-height: 96px; }
.sm-tiles .kpi-note { max-width: 30ch; }
.sm-meter { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
.sm-meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--warning); }
.sm-meter-target { position: absolute; top: -2px; bottom: -2px; right: 0; width: 2px; background: var(--ink-dim); }
.sm-tabs { margin: 4px 0 12px; }
.sm-tab-n { font: 600 11px/1 var(--mono); color: var(--ink-dim); }
button.sm-head { grid-template-columns: 64px 1fr; }
.sm-open { margin-left: 8px; }
.sm-count { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--mono); color: var(--ink-dim); }
.sm-count strong { font-size: 20px; color: var(--ink); }
.sm-badges { padding-left: 88px; }
.chip.sm-none { border-style: dashed; color: var(--ink-dim); }
.chip.sm-validated, .chip.sm-ki.sm-validated { border-color: var(--ok); }
.chip.sm-not_validated { border-color: var(--warning); }
.chip.sm-state .sev-mark { width: 8px; height: 8px; margin-right: 5px; }
.sm-check { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 12.5px; color: var(--ink); }
.sm-notes li { font-size: 12.5px; line-height: 1.45; }
button.sm-write { min-height: 36px; padding: 0 14px; }
.sm-form { margin: 0 0 14px; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface-alt); }
.sm-form .cm-reason { max-width: none; margin-top: 8px; }
.sm-form input[type="text"], .sm-form select, .sm-form input[type="date"] { min-height: 34px; }
.sm-entries { list-style: none; margin: 0; padding: 0; }
.sm-entry.sm-archived { opacity: 0.72; }
.sm-entry-t { margin: 8px 0 2px; font-weight: 600; font-size: 14px; }
.sm-where { font-size: 12.5px; color: var(--ink-dim); }
.sm-body { margin: 6px 0; white-space: pre-wrap; line-height: 1.5; }
.sm-action { margin: 6px 0 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--surface-alt); border-radius: 4px; }
.sm-action p { margin: 0; white-space: pre-wrap; }
.sm-efilters { margin: 10px 0 12px; }
.sm-hand-sum { margin: 10px 0 14px; font-weight: 600; }
#sm-handover .rc-sec { margin-top: 14px; }
.sm-pat-panel, .sm-fed { margin-top: 14px; }
@media (max-width: 720px) {
  button.sm-head { grid-template-columns: 48px 1fr; }
  .sm-badges { padding-left: 12px; }
  .sm-tiles .kpi-note { max-width: none; }
}
@media print {
  body:has(#sm-list) .rail, body:has(#sm-list) .topbar, body:has(#sm-list) .rc-filters,
  body:has(#sm-list) .rc-tools, body:has(#sm-list) .rc-actions, body:has(#sm-list) .sm-tabs,
  body:has(#sm-handover) .rail, body:has(#sm-handover) .topbar, body:has(#sm-handover) .rc-tools,
  body:has(#sm-handover) .sm-tabs, body:has(#sm-entries) .rail, body:has(#sm-entries) .topbar,
  body:has(#sm-entries) .cm-actions, body:has(#sm-entries) .sm-tabs,
  body:has(.sm-tabs) .xe-drawer { display: none !important; }
  body:has(.sm-tabs) .sm-entry, body:has(.sm-tabs) .rc-card { break-inside: avoid; }
}

/* ---- Reference (#678) ----------------------------------------------------- */
.ref-tools { flex: 1 1 520px; }
.ref-search { flex: 1 1 360px; }
.ref-tools button { min-height: 36px; }
.ref-shelves { margin: 4px 0 12px; }
.chip.ref-origin-neuralcore { border-color: var(--accent); color: var(--accent); }
.chip.ref-src { font-family: var(--mono); font-size: 10.5px; }
.ref-prov { margin: 2px 0 8px; }
button.ref-title { font-weight: 600; font-size: 13.5px; text-align: left; }
.ref-passage { margin: 6px 0; color: var(--ink-dim); line-height: 1.5; white-space: pre-wrap; }
.ref-doc, .ref-results li { list-style: none; }
.ref-safety { margin-left: 8px; }
.ref-toc { margin: 10px 0; }
.ref-toc .ref-toc-3 { margin-left: 14px; }
.ref-toc .ref-toc-4 { margin-left: 28px; }
.ref-article .body { max-width: 78ch; line-height: 1.6; }
.ref-article h3 { margin: 18px 0 6px; }
.ref-article h4 { margin: 14px 0 4px; font-size: 13.5px; }
.ref-article section.ref-focus { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.ref-code { white-space: pre-wrap; font: 12px/1.5 var(--mono); padding: 8px 10px; background: var(--surface-alt); border-radius: 6px; overflow-x: auto; }
.ref-table td, .ref-table th { vertical-align: top; }
.ref-kpis li.ref-focus { border-color: var(--accent); }
.ref-framework { margin-top: 14px; }
.ref-framework > summary { cursor: pointer; padding: 9px 10px; font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ref-fw-doc { margin: 8px 0 16px; max-width: 78ch; }
button.kpi-info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-height: 0; margin-left: 6px; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink-dim); font: italic 600 11px/1 var(--sans); cursor: help; vertical-align: middle; }
button.kpi-info:hover, button.kpi-info:focus-visible { color: var(--accent); border-color: var(--accent); }
.asset-reference { margin-top: 12px; }
.xk-never li::marker { content: '✕  '; color: var(--critical); }
.xk-lines li { list-style: none; margin-left: -18px; }
.lic-line { margin-bottom: 12px; }
@media (max-width: 720px) {
  .ref-tools { flex-basis: 100%; }
  .ref-article .body { max-width: none; }
}
@media print {
  body:has(.ref-article) .rail, body:has(.ref-article) .topbar, body:has(.ref-article) .rc-actions,
  body:has(.ref-pb) .rail, body:has(.ref-pb) .topbar, body:has(.ref-pb) .rc-actions,
  body:has(.ref-article) .xe-drawer, body:has(.ref-pb) .xe-drawer { display: none !important; }
}
#ref-shelf ul.cm-plans, ul.ref-results, ul.ref-kpis { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

/* ---------- Your site's documents (#689) ------------------------------------
   Large targets (44 px) for the floor, state in words beside an icon, one
   accent action per view. */
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }
a.button.primary:hover { filter: brightness(1.08); background: var(--accent); }
.ref-tab-site { font-weight: 600; }
.ref-origin-site { border-color: var(--accent); color: var(--accent); }
.sd-lead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-counts { margin: 0; font-size: 14px; }
.sd-q { font-size: 14px; }
.sd-add-btn, .sd-actions .button, .sd-actions button, .sd-card-actions .button, .sd-save button { min-height: 44px; }
.sd-add-btn { font-size: 13px; padding: 10px 18px; }
.sd-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0 12px; }
.sd-find { min-width: 220px; flex: 1 1 220px; min-height: 36px; }
.sd-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sd-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--rule);
  background: var(--surface); padding: 10px 12px; border-radius: 8px; flex-wrap: wrap; }
.sd-card-archived { opacity: 0.7; }
.sd-card-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; flex: 1 1 320px; }
.sd-kind-icon { font-size: 22px; line-height: 1; }
.sd-card-title { font-size: 15px; font-weight: 600; text-align: left; }
.sd-card-meta { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; }
.sd-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd-state { display: inline-flex; gap: 2px; font-weight: 600; }
.sd-validated { color: var(--ok); }
.sd-not_validated { color: var(--warning); }
.sd-archived { color: var(--ink-faint); }
.sd-empty { border: 1px dashed var(--rule-strong); border-radius: 10px; padding: 14px 16px; background: var(--surface-alt); }
.sd-empty h4 { margin: 0 0 6px; }
.sd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px;
  border: 2px dashed var(--rule-strong); border-radius: 12px; cursor: pointer; text-align: center; padding: 16px;
  background: var(--surface-alt); }
.sd-drop:hover, .sd-drop:focus-visible, .sd-drop.over { border-color: var(--accent); outline: none; }
.sd-drop-big { font-size: 30px; color: var(--accent); }
.sd-rows { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.sd-row { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.sd-row.sd-done { border-color: var(--ok); }
.sd-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.sd-file { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.sd-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.sd-fields input, .sd-fields select { min-height: 38px; }
.sd-title-in, .sd-url { flex: 1 1 280px; }
.sd-extra { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sd-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-dim); }
.sd-row textarea, .sd-link textarea { width: 100%; box-sizing: border-box; margin-top: 6px; }
.sd-sites { margin: 6px 0; }
.sd-sites summary { cursor: pointer; font-size: 13px; color: var(--ink-dim); min-height: 28px; display: flex; align-items: center; }
.sd-site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin: 6px 0; }
.sd-site { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; }
.sd-site input { width: 18px; height: 18px; }
.sd-progress { margin-top: 6px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd-progress progress { width: 180px; height: 10px; }
.sd-ok { color: var(--ok); font-weight: 600; }
.sd-link { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.sd-link summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.sd-head .sd-state-line { font-size: 15px; margin: 0 0 6px; }
.sd-validate { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sd-validate p { flex: 1 1 100%; margin: 0; }
.sd-validate input, .sd-archive input { flex: 1 1 280px; min-height: 38px; }
.sd-archive { margin-top: 10px; }
.sd-archive summary { cursor: pointer; color: var(--ink-dim); min-height: 32px; display: flex; align-items: center; }
.sd-text section + section { margin-top: 10px; }
.sd-hits .cm-plans { list-style: none; padding: 0; margin: 0; }
.sd-hit { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.sd-attach { margin: 6px 0; }
.asset-sitedocs ul { margin: 0 0 8px; }
@media (max-width: 640px) {
  .sd-card-actions { width: 100%; }
  .sd-card-actions .button, .sd-card-actions button { flex: 1 1 auto; text-align: center; }
  .sd-file { max-width: 60%; }
}
button.linkish.sd-card-title, .sd-hit button.linkish.sd-card-title { font: 600 15px/1.3 var(--sans); color: var(--ink); text-decoration: none;
  letter-spacing: 0; text-transform: none; padding: 2px 0; text-align: left; }
button.linkish.sd-card-title:hover { color: var(--accent); text-decoration: underline; }
button.linkish.sd-q { font: 600 14px var(--sans); text-transform: none; letter-spacing: 0; color: var(--accent); }
button.linkish.sd-q-due { color: var(--warning); }
button.quiet.sd-xe { border-color: var(--accent); color: var(--accent); }
.sd-card-actions .button, .sd-card-actions button { display: inline-flex; align-items: center; justify-content: center; }
.sd-fields > input, .sd-fields > select, .sd-extra > input, .sd-extra > select { width: auto; }
.sd-fields > .sd-title-in, .sd-fields > .sd-url { flex: 2 1 320px; }
.sd-fields > select { flex: 1 1 240px; }
.sd-extra > input { flex: 1 1 180px; }