/* ==========================================================================
   Dream.OS operating environment shell — weareswarm.online
   Layered on top of focus-system.css tokens. Matte graphite + glass.
   Motion is slow and continuous; nothing here is decorative noise.
   ========================================================================== */


/* The --os-* layer is the operating-environment composition: it owns the
   graphite/glass treatment, the rail and inspector geometry, and the motion.
   It does not own colour. Every colour below resolves to a --brand-* token so
   the console reads as the same company as the rest of the domain. */
:root {
  --os-void: var(--brand-bg);
  --os-deck: var(--brand-bg-raised);
  --os-plate: color-mix(in srgb, var(--brand-text) 3.2%, transparent);
  --os-plate-2: color-mix(in srgb, var(--brand-text) 5.5%, transparent);
  --os-edge: color-mix(in srgb, var(--brand-text) 7.5%, transparent);
  --os-edge-strong: color-mix(in srgb, var(--brand-text) 14%, transparent);
  --os-ink: var(--brand-text);
  --os-ink-2: var(--brand-muted);
  --os-ink-3: color-mix(in srgb, var(--brand-muted) 62%, var(--brand-bg));
  --os-accent: var(--brand-accent-soft);
  --os-warn: var(--brand-warn);
  --os-halt: var(--brand-danger);
  --os-cool: var(--brand-accent);

  /* Washes composed from the same sources, so a brand change propagates. */
  --os-accent-wash: color-mix(in srgb, var(--brand-accent-soft) 10%, transparent);
  --os-accent-edge: color-mix(in srgb, var(--brand-accent-soft) 30%, transparent);
  --os-accent-glow: color-mix(in srgb, var(--brand-accent-soft) 50%, transparent);
  --os-cool-wash: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  --os-cool-edge: color-mix(in srgb, var(--brand-accent) 30%, transparent);
  --os-warn-wash: color-mix(in srgb, var(--brand-warn) 12%, transparent);
  --os-warn-edge: color-mix(in srgb, var(--brand-warn) 34%, transparent);
  --os-halt-wash: color-mix(in srgb, var(--brand-danger) 10%, transparent);
  --os-halt-edge: color-mix(in srgb, var(--brand-danger) 32%, transparent);
  --os-shade: color-mix(in srgb, var(--brand-bg) 55%, transparent);

  --os-rail: 232px;
  --os-inspector: 336px;
  --os-bar: 46px;
  --os-glass: blur(22px) saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

html.os-root,
body.os-body {
  height: 100%;
}

body.os-body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--os-cool-wash), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 100%, var(--os-accent-wash), transparent 70%),
    var(--os-void);
  color: var(--os-ink);
  font-family: var(--swarm-sans);
  font-weight: 400;
  letter-spacing: -0.005em;
}

body.os-body.is-booting {
  overflow: hidden;
}

/* Fine graphite weave. Deliberately near-invisible. */
body.os-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--os-plate) 1px, transparent 1px),
    linear-gradient(90deg, var(--os-plate) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, var(--brand-bg) 20%, transparent 85%);
}

.os-mono {
  font-family: var(--swarm-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Boot sequence
   -------------------------------------------------------------------------- */

.os-boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, var(--os-cool-wash), transparent 72%),
    var(--os-void);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* The overlay fades rather than vanishing, so `hidden` is overridden and the
   visibility flip is delayed until the fade completes — on the way out only. */
.os-boot[hidden] {
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 900ms;
}

.os-boot-inner {
  width: min(560px, 100%);
}

.os-boot-mark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.os-boot-mark strong {
  font-size: clamp(1.6rem, 4.2vw, 2.15rem);
  font-weight: 250;
  letter-spacing: 0.28em;
  color: var(--os-ink);
}

.os-boot-mark span {
  font-family: var(--swarm-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-boot-sub {
  margin: 0 0 34px;
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--os-ink-2);
}

.os-boot-log {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--swarm-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.os-boot-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  color: var(--os-ink-3);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 420ms ease, transform 420ms ease, color 420ms ease;
}

.os-boot-line.is-shown {
  opacity: 1;
  transform: none;
}

.os-boot-line.is-active {
  color: var(--os-ink-2);
}

.os-boot-line.is-done {
  color: var(--os-ink-2);
}

/* Dot leaders: the readout typography from the spec. */
.os-boot-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.os-boot-label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  transform: translateY(-3px);
  background-image: radial-gradient(circle, currentColor 0.9px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.35;
}

.os-boot-value {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-ink-3);
  transition: color 320ms ease;
}

.os-boot-line[data-state="pass"] .os-boot-value { color: var(--os-accent); }
.os-boot-line[data-state="stale"] .os-boot-value { color: var(--os-warn); }
.os-boot-line[data-state="fail"] .os-boot-value { color: var(--os-halt); }
.os-boot-line[data-state="unknown"] .os-boot-value { color: var(--os-ink-2); }
.os-boot-line[data-state="run"] .os-boot-value { color: var(--os-cool); }

.os-boot-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--os-edge);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.os-boot-gate.is-shown {
  opacity: 1;
  transform: none;
}

.os-boot-verdict {
  font-family: var(--swarm-mono);
  font-size: 0.94rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--os-ink);
}

.os-boot-verdict[data-state="pass"] { color: var(--os-accent); }
.os-boot-verdict[data-state="stale"] { color: var(--os-warn); }
.os-boot-verdict[data-state="fail"] { color: var(--os-halt); }
.os-boot-verdict[data-state="unknown"] { color: var(--os-ink-2); }

.os-boot-note {
  margin: 8px 0 0;
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--os-ink-3);
}

.os-boot-skip {
  padding: 8px 16px;
  border: 1px solid var(--os-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--os-ink-2);
  font-family: var(--swarm-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}

.os-boot-skip:hover {
  border-color: var(--os-edge-strong);
  background: var(--os-plate);
  color: var(--os-ink);
}

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

.os {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--os-rail) minmax(0, 1fr) var(--os-inspector);
  grid-template-rows: var(--os-bar) minmax(0, 1fr) auto;
  grid-template-areas:
    "bar bar bar"
    "rail canvas inspector"
    "stream stream stream";
  height: 100dvh;
  opacity: 0;
  transform: scale(0.994);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.os.is-live {
  opacity: 1;
  transform: none;
}

/* Menu bar ---------------------------------------------------------------- */

.os-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--os-edge);
  background: var(--os-shade);
  backdrop-filter: var(--os-glass);
  -webkit-backdrop-filter: var(--os-glass);
}

.os-wordmark {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--os-ink);
  text-decoration: none;
}

.os-wordmark strong {
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.24em;
}

.os-wordmark span {
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

/* The canonical nav lives inside the menu bar, restyled as OS chrome.
   Class names are preserved so the shared nav fallback still governs it. */
.os-bar .swarm-nav-shell {
  width: auto;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: static;
  justify-content: flex-end;
}

.os-bar .swarm-nav-brand {
  display: none;
}

.os-bar .swarm-nav-links {
  gap: 2px;
}

.os-bar .swarm-nav-links a {
  padding: 5px 10px;
  border-radius: 7px;
  font-family: var(--swarm-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--os-ink-3);
}

.os-bar .swarm-nav-links a:hover,
.os-bar .swarm-nav-links a:focus-visible {
  border-color: transparent;
  background: var(--os-plate-2);
  color: var(--os-ink);
  transform: none;
}

.os-bar .swarm-nav-links a[aria-current="page"],
.os-bar .swarm-nav-links a.is-active {
  border-color: transparent;
  background: var(--os-plate-2);
  color: var(--os-ink);
}

.os-bar-gate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--os-edge);
  border-radius: 999px;
  background: var(--os-plate);
  color: var(--os-ink-2);
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease;
}

.os-bar-gate:hover {
  border-color: var(--os-edge-strong);
  color: var(--os-ink);
}

/* Navigator rail ---------------------------------------------------------- */

.os-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--os-edge);
  background: var(--os-shade);
}

.os-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px 12px;
}

.os-rail-label {
  padding: 0 8px;
  margin: 0 0 9px;
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-nav {
  display: grid;
  gap: 1px;
  margin-bottom: 26px;
}

.os-nav-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--os-ink-2);
  font-family: var(--swarm-sans);
  font-size: 0.83rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.os-nav-item:hover {
  background: var(--os-plate);
  color: var(--os-ink);
}

.os-nav-item[aria-pressed="true"] {
  background: var(--os-plate-2);
  color: var(--os-ink);
}

.os-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--os-ink-3);
  transition: background 260ms ease, box-shadow 260ms ease;
}

.os-nav-item[aria-pressed="true"] .os-nav-dot {
  background: var(--os-accent);
  box-shadow: 0 0 12px var(--os-accent-glow);
}

.os-nav-count {
  font-family: var(--swarm-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--os-ink-3);
}

/* System status readout — the dot-leader plate from the spec. */
.os-readout {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 8px;
  font-family: var(--swarm-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.os-readout div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--os-plate);
}

.os-readout div:last-child {
  border-bottom: 0;
}

.os-readout dt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--os-ink-3);
}

.os-readout dt::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  transform: translateY(-3px);
  background-image: radial-gradient(circle, currentColor 0.9px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.3;
}

.os-readout dd {
  margin: 0;
  letter-spacing: 0.04em;
  color: var(--os-ink);
}

.os-readout dd[data-state="pass"] { color: var(--os-accent); }
.os-readout dd[data-state="stale"] { color: var(--os-warn); }
.os-readout dd[data-state="fail"] { color: var(--os-halt); }
.os-readout dd[data-state="unknown"] { color: var(--os-ink-2); }

.os-mission {
  margin: 22px 8px 0;
  padding-top: 16px;
  border-top: 1px solid var(--os-edge);
}

.os-mission p {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--os-ink-2);
}

/* Canvas ------------------------------------------------------------------ */

.os-canvas {
  grid-area: canvas;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.os-canvas-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--os-edge);
}

.os-canvas-head h1,
.os-canvas-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--os-ink);
}

.os-canvas-head p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--os-ink-3);
}

.os-canvas-tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.os-chip {
  padding: 5px 11px;
  border: 1px solid var(--os-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--os-ink-3);
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.os-chip:hover {
  border-color: var(--os-edge-strong);
  background: var(--os-plate);
  color: var(--os-ink);
}

.os-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.os-pane[hidden] {
  display: none;
}

.os-pane--stage {
  padding: 0;
  overflow: hidden;
}

/* Topology ---------------------------------------------------------------- */

.os-stage {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.os-stage.is-panning {
  cursor: grabbing;
}

.os-topology {
  display: block;
  width: 100%;
  height: 100%;
}

.os-link {
  fill: none;
  stroke: var(--os-cool-edge);
  stroke-width: 1;
  animation: os-breathe 7.5s ease-in-out infinite;
}

.os-link.is-lit {
  stroke: var(--os-accent-glow);
  stroke-width: 1.4;
}

@keyframes os-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

.os-flow {
  fill: var(--os-accent-glow);
  r: 1.9;
}

.os-node {
  cursor: pointer;
}

.os-node:focus {
  outline: none;
}

.os-node-halo {
  fill: var(--os-cool-wash);
  animation: os-pulse 5.5s ease-in-out infinite;
}

.os-node[data-tone="ok"] .os-node-halo { fill: var(--os-accent-wash); }
.os-node[data-tone="warn"] .os-node-halo { fill: var(--os-warn-wash); }
.os-node[data-tone="halt"] .os-node-halo { fill: var(--os-halt-wash); }

@keyframes os-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.28); opacity: 1; }
}

.os-node-halo {
  transform-box: fill-box;
  transform-origin: center;
}

.os-node-body {
  fill: var(--os-deck);
  stroke: var(--os-edge-strong);
  stroke-width: 1;
  transition: stroke 240ms ease, fill 240ms ease;
}

.os-node[data-tone="ok"] .os-node-body { stroke: var(--os-accent-edge); }
.os-node[data-tone="warn"] .os-node-body { stroke: var(--os-warn-edge); }
.os-node[data-tone="halt"] .os-node-body { stroke: var(--os-halt-edge); }

.os-node:hover .os-node-body,
.os-node:focus-visible .os-node-body {
  fill: var(--os-deck);
  stroke: var(--os-edge-strong);
}

.os-node.is-selected .os-node-body {
  fill: var(--os-deck);
  stroke: var(--os-accent);
  stroke-width: 1.5;
}

.os-node-label {
  fill: var(--os-ink);
  font-family: var(--swarm-sans);
  font-size: 11.5px;
  font-weight: 400;
  text-anchor: middle;
  pointer-events: none;
}

.os-node-meta {
  fill: var(--os-ink-3);
  font-family: var(--swarm-mono);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.os-layer-tag {
  fill: var(--os-edge-strong);
  font-family: var(--swarm-mono);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
}

.os-stage-hint {
  position: absolute;
  left: 20px;
  bottom: 16px;
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-edge-strong);
  pointer-events: none;
}

/* Data panes -------------------------------------------------------------- */

.os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 10px;
}

.os-card {
  display: block;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-plate);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 240ms ease, background 240ms ease, transform 240ms ease;
}

.os-card:hover {
  border-color: var(--os-edge-strong);
  background: var(--os-plate-2);
  transform: translateY(-1px);
}

.os-card.is-selected {
  border-color: var(--os-accent-glow);
  background: var(--os-accent-wash);
}

.os-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.os-card-name {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--os-ink);
}

.os-card-note {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--os-ink-2);
}

.os-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--os-plate);
  font-family: var(--swarm-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--os-ink-3);
}

.os-dot[data-tone="ok"] { background: var(--os-accent); box-shadow: 0 0 10px var(--os-accent-glow); }
.os-dot[data-tone="warn"] { background: var(--os-warn); box-shadow: 0 0 10px var(--os-warn-edge); }
.os-dot[data-tone="halt"] { background: var(--os-halt); box-shadow: 0 0 10px var(--os-halt-edge); }
.os-dot[data-tone="idle"] { background: var(--os-ink-3); }

.os-rows {
  display: grid;
  gap: 1px;
}

.os-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease;
}

.os-row:hover {
  background: var(--os-plate);
}

.os-row.is-selected {
  background: var(--os-plate-2);
}

.os-row-main {
  min-width: 0;
}

.os-row-title {
  overflow: hidden;
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--os-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-row-sub {
  margin-top: 2px;
  font-family: var(--swarm-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-row-tag {
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-ink-2);
  white-space: nowrap;
}

.os-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1px;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  overflow: hidden;
  background: var(--os-edge);
  margin-bottom: 22px;
}

.os-metric {
  padding: 15px 16px;
  background: var(--os-deck);
}

.os-metric-label {
  font-family: var(--swarm-mono);
  font-size: 0.61rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-metric-value {
  margin-top: 6px;
  font-size: 1.28rem;
  font-weight: 250;
  letter-spacing: -0.01em;
  color: var(--os-ink);
}

.os-metric[data-tone="ok"] .os-metric-value { color: var(--os-accent); }
.os-metric[data-tone="warn"] .os-metric-value { color: var(--os-warn); }
.os-metric[data-tone="halt"] .os-metric-value { color: var(--os-halt); }

.os-section-title {
  margin: 0 0 12px;
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-section + .os-section {
  margin-top: 26px;
}

.os-notice {
  padding: 13px 15px;
  border: 1px solid var(--os-warn-edge);
  border-radius: 12px;
  background: var(--os-warn-wash);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--os-ink-2);
}

.os-notice[data-tone="halt"] {
  border-color: var(--os-halt-edge);
  background: var(--os-halt-wash);
}

.os-notice strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 400;
  color: var(--os-ink);
}

.os-notice + .os-notice {
  margin-top: 9px;
}

/* Inspector --------------------------------------------------------------- */

.os-inspector {
  grid-area: inspector;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--os-edge);
  background: var(--os-shade);
}

.os-inspector-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--os-edge);
}

.os-inspector-head span {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-inspector-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 24px;
}

.os-inspector-empty {
  padding: 30px 4px;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--os-ink-3);
}

.os-entity-kind {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-entity-name {
  margin: 7px 0 0;
  font-size: 1.12rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--os-ink);
}

.os-entity-note {
  margin: 9px 0 0;
  font-size: 0.79rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--os-ink-2);
}

.os-fields {
  margin: 20px 0 0;
}

.os-field {
  padding: 11px 0;
  border-top: 1px solid var(--os-plate);
}

.os-field-key {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-field-val {
  margin: 5px 0 0;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--os-ink);
  overflow-wrap: anywhere;
}

.os-field-val[data-tone="ok"] { color: var(--os-accent); }
.os-field-val[data-tone="warn"] { color: var(--os-warn); }
.os-field-val[data-tone="halt"] { color: var(--os-halt); }

/* Evidence trail — every claim links somewhere. */
.os-evidence {
  display: grid;
  gap: 1px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--os-edge);
}

.os-evidence-title {
  margin: 0 0 8px;
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.os-evidence a,
.os-evidence span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--swarm-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--os-ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background 200ms ease, color 200ms ease;
}

.os-evidence a:hover {
  background: var(--os-plate-2);
  color: var(--os-ink);
}

.os-evidence-mark {
  color: var(--os-accent);
}

.os-evidence-mark[data-tone="none"] {
  color: var(--os-ink-3);
}

.os-evidence-go {
  color: var(--os-ink-3);
}

/* Activity stream --------------------------------------------------------- */

.os-stream {
  grid-area: stream;
  display: flex;
  align-items: stretch;
  min-height: 0;
  border-top: 1px solid var(--os-edge);
  background: var(--os-shade);
  backdrop-filter: var(--os-glass);
  -webkit-backdrop-filter: var(--os-glass);
}

.os-stream-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 14px 0 16px;
  border-right: 1px solid var(--os-edge);
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--os-ink-3);
  white-space: nowrap;
}

.os-stream-live {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--os-accent);
  animation: os-blink 3.4s ease-in-out infinite;
}

@keyframes os-blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.os-stream-list {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.os-stream-list::-webkit-scrollbar {
  display: none;
}

.os-stream-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 11px 16px;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--os-ink-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  animation: os-arrive 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes os-arrive {
  to { opacity: 1; transform: none; }
}

.os-stream-time {
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--os-ink-3);
}

.os-stream-note {
  flex: 0 0 auto;
  padding: 0 16px;
  border-left: 1px solid var(--os-edge);
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
  align-self: center;
  white-space: nowrap;
}

/* Scrollbars -------------------------------------------------------------- */

.os-rail-scroll,
.os-pane,
.os-inspector-body {
  scrollbar-width: thin;
  scrollbar-color: var(--os-edge-strong) transparent;
}

.os-rail-scroll::-webkit-scrollbar,
.os-pane::-webkit-scrollbar,
.os-inspector-body::-webkit-scrollbar {
  width: 8px;
}

.os-rail-scroll::-webkit-scrollbar-thumb,
.os-pane::-webkit-scrollbar-thumb,
.os-inspector-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
  background-color: var(--os-edge-strong);
}

/* --------------------------------------------------------------------------
   Narrower consoles
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  :root {
    --os-rail: 208px;
    --os-inspector: 292px;
  }
}

@media (max-width: 1080px) {
  body.os-body {
    overflow: auto;
  }

  .os {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "bar"
      "rail"
      "canvas"
      "inspector"
      "stream";
    height: auto;
    min-height: 100dvh;
  }

  .os-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-wrap: wrap;
    gap: 10px;
    height: auto;
    padding: 10px 14px;
  }

  .os-bar .swarm-nav-shell {
    order: 3;
    width: 100%;
    flex: 1 0 100%;
    justify-content: flex-start;
  }

  .os-bar .swarm-nav-links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .os-bar .swarm-nav-links::-webkit-scrollbar {
    display: none;
  }

  .os-bar-gate {
    margin-left: auto;
  }

  .os-rail {
    border-right: 0;
    border-bottom: 1px solid var(--os-edge);
  }

  .os-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .os-nav::-webkit-scrollbar {
    display: none;
  }

  .os-nav-item {
    grid-template-columns: auto auto auto;
  }

  .os-pane {
    overflow: visible;
  }

  .os-pane--stage {
    height: 62vh;
    min-height: 420px;
    overflow: hidden;
  }

  /* Let the page still scroll vertically over the stage; horizontal drags pan. */
  .os-stage {
    touch-action: pan-y;
  }

  .os-node-label { font-size: 13px; }
  .os-node-meta { font-size: 9.5px; }

  .os-inspector {
    border-left: 0;
    border-top: 1px solid var(--os-edge);
  }

  .os-inspector-body {
    overflow: visible;
  }

  .os-stream {
    position: sticky;
    bottom: 0;
    z-index: 20;
  }
}

@media (max-width: 640px) {
  .os-bar .swarm-nav-links a {
    font-size: 0.72rem;
  }

  .os-boot-inner {
    width: 100%;
  }

  .os-boot-log {
    font-size: 0.71rem;
  }

  .os-stream-tag {
    padding: 0 10px;
  }

  .os-stream-note {
    display: none;
  }
}

/* No-JS: the routes still work, and the page says so plainly. */
.os-noscript {
  position: relative;
  z-index: 500;
  max-width: 640px;
  margin: 60px auto;
  padding: 22px;
  border: 1px solid var(--os-edge);
  border-radius: 14px;
  background: var(--os-plate);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--os-ink-2);
}

.os-noscript a {
  color: var(--os-accent);
}

/* ==========================================================================
   Route variant of the shell
   ==========================================================================
   Interior routes are the same operating environment as the front door, just
   a different window in it: same menu bar, same navigator rail with the
   dot-leader status readout, same canvas header, same activity strip pinned
   at the bottom.

   Two deliberate differences from the homepage shell:
   - No inspector column. Content routes have no entity to inspect, and an
     empty third column reads as broken rather than as restraint.
   - No boot overlay. Booting is the front door's signature moment; replaying
     it on every navigation would turn a five-second identity into a tax.
   ========================================================================== */

body.os-route {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.os-shell-route {
  grid-template-columns: var(--os-rail) minmax(0, 1fr);
  grid-template-areas:
    "bar bar"
    "rail canvas"
    "stream stream";
  /* Routes are already "booted": no fade-in gate to wait behind. */
  opacity: 1;
  transform: none;
}

/* The canvas pane scrolls internally so the frame itself never moves. */
.os-shell-route .os-pane {
  padding: 22px 24px 30px;
}

/* Route content was authored for a document width; inside the canvas it is
   already constrained by the rail, so the wrapper must stop re-constraining. */
.os-shell-route .os-pane > .wrap,
.os-shell-route .os-pane > main.wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.os-shell-route .os-pane header {
  padding-top: 0;
}

@media (max-width: 1080px) {
  body.os-route {
    overflow: auto;
  }

  .os-shell-route {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "bar"
      "rail"
      "canvas"
      "stream";
    height: auto;
    min-height: 100dvh;
  }

  .os-shell-route .os-pane {
    overflow: visible;
    padding: 18px 16px 26px;
  }
}

/* ==========================================================================
   Dream Suite rack
   ==========================================================================
   The suite is presented as a rack of systems, not a grid of product cards.
   A shop grid asks "which one do I buy"; a rack asks "what is running". The
   distinction matters here because most of these systems are not things a
   visitor may run at all.

   One definition, two surfaces: the Tools pane on the front door and the
   /tools/ route both render this component, and this stylesheet is the only one
   both of them load. Defining it twice is how the nav ended up with nine
   variants.

   Every row states its access class next to its state, because the class is
   what decides whether an action appears. data-access carries the registry's
   class and the action verb is generated alongside it, so a row cannot come to
   offer "open" on an operator tool by way of a style change.

   Colour resolves to --brand-* through the --os-* layer above. No literals.
   ========================================================================== */

.suite-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--os-edge);
}

.suite-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.suite-count {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

/* The classification table, stated on the surface it governs. A visitor who
   reads "inspect only" should be able to find out what that means without
   leaving the page. */
.suite-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 0 18px;
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--os-ink-3);
}

.suite-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.suite-legend b {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--os-ink-2);
}

.suite-rack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--os-edge);
  border-radius: 14px;
  background: var(--os-plate);
  overflow: hidden;
}

.suite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding: 20px 22px;
  transition: background 240ms ease;
}

.suite-row + .suite-row {
  border-top: 1px solid var(--os-edge);
}

.suite-row:hover {
  background: var(--os-plate-2);
}

/* Set by the renderer, not :target — the rows are created after the fragment
   has already been resolved, so :target never matches them. This is the landing
   highlight for a visitor arriving from weareswarm.site's suite preview. */
.suite-row.is-targeted {
  background: var(--os-cool-wash);
}

.suite-name {
  grid-column: 1;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.suite-class {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 3px 9px;
  border: 1px solid var(--os-edge-strong);
  border-radius: 999px;
  font-family: var(--swarm-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--os-ink-2);
}

/* Restricted classes are marked on the row itself, not only in the legend. */
.suite-row[data-access="operator"] .suite-class,
.suite-row[data-access="internal_system"] .suite-class {
  border-color: var(--os-warn-edge);
  color: var(--os-warn);
}

.suite-category {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.suite-summary {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--os-ink-2);
}

.suite-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.suite-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--os-ink-2);
}

.suite-caps {
  color: var(--os-ink-3);
  letter-spacing: 0.06em;
  text-transform: none;
}

.suite-metrics {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 14px 0 0;
}

.suite-metrics div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.suite-metrics dt {
  font-family: var(--swarm-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.suite-metrics dd {
  margin: 0;
  font-family: var(--swarm-mono);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--os-ink);
}

/* An unresolved metric reads as absent, never as zero. */
.suite-metrics dd[data-missing="1"] {
  color: var(--os-ink-3);
}

.suite-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
}

.suite-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--os-edge-strong);
  border-radius: 9px;
  background: transparent;
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--os-ink);
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.suite-action:hover,
.suite-action:focus-visible {
  border-color: var(--os-cool-edge);
  background: var(--os-cool-wash);
  color: var(--os-ink);
}

.suite-action[data-verb="open"] {
  border-color: var(--os-cool-edge);
}

/* Inspect is the quieter affordance on purpose: it must not read as a run
   button, because on these rows there is nothing to run. */
.suite-action[data-verb="inspect"],
.suite-action[data-verb="evidence"] {
  border-color: var(--os-edge);
  color: var(--os-ink-2);
}

.suite-note {
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--os-ink-3);
}

/* --- Inspect drawer ------------------------------------------------------
   Systems without a detail surface open here instead of navigating to a route
   that would have to invent content. */

.suite-drawer[hidden] {
  display: none;
}

.suite-drawer {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--os-edge);
  border-radius: 11px;
  background: var(--os-plate-2);
}

.suite-drawer h4 {
  margin: 0 0 10px;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.suite-drawer h4 + h4 {
  margin-top: 18px;
}

.suite-drawer p {
  margin: 0;
  max-width: 70ch;
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--os-ink-2);
}

.suite-source {
  display: block;
  margin-top: 12px;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  word-break: break-all;
  color: var(--os-ink-3);
}

.suite-evidence {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suite-evidence a,
.suite-evidence span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--os-ink-2);
}

.suite-evidence a:hover {
  color: var(--os-ink);
}

.suite-evidence i {
  flex: none;
  width: 14px;
  font-family: var(--swarm-mono);
  font-size: 0.7rem;
  font-style: normal;
  color: var(--os-accent);
}

/* A referenced source that is not present must not display a checkmark. */
.suite-evidence i[data-present="0"] {
  color: var(--os-ink-3);
}

.suite-evidence em {
  margin-left: auto;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--os-ink-3);
}

@media (max-width: 720px) {
  .suite-row {
    padding: 18px 16px;
  }

  .suite-class {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 8px;
  }

  .suite-metrics {
    gap: 8px 18px;
  }
}

/* ==========================================================================
   ProjectScanner detail surface
   ==========================================================================
   Two kinds of content share this route and must never be confused for each
   other: a scan that already ran on the Dream.OS ecosystem (recorded, sourced,
   dated) and a scan the visitor runs on their own folder (local, in-browser,
   nothing uploaded). Each carries its own provenance line for that reason.
   ========================================================================== */

.tool-hero {
  display: grid;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--os-edge);
}

.tool-hero .tool-kind {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.tool-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-edge);
  overflow: hidden;
}

.tool-facts div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--os-plate);
}

.tool-facts dt {
  font-family: var(--swarm-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.tool-facts dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--os-ink);
}

.tool-facts dd[data-tone="ok"] { color: var(--os-accent); }
.tool-facts dd[data-tone="warn"] { color: var(--os-warn); }
.tool-facts dd[data-tone="halt"] { color: var(--os-halt); }
.tool-facts dd[data-tone="unverified"] { color: var(--os-ink-3); }

.tool-block {
  margin-top: 34px;
}

.tool-block > h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tool-provenance {
  margin: 0 0 16px;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  word-break: break-word;
  color: var(--os-ink-3);
}

.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tool-table caption {
  padding-bottom: 8px;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--os-ink-3);
}

.tool-table th,
.tool-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--os-edge);
  text-align: left;
}

.tool-table th {
  font-family: var(--swarm-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.tool-table td {
  color: var(--os-ink-2);
}

.tool-table td.num {
  font-family: var(--swarm-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--os-ink);
}

.tool-table tr:last-child td {
  border-bottom: 0;
}

.tool-scroll {
  overflow-x: auto;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-plate);
}

/* --- Local scan ----------------------------------------------------------
   The constrained execution. The boundary is stated on the control itself,
   not only in prose above it: a visitor who clicks without reading should
   still not be able to send their code anywhere. */

.scan {
  border: 1px solid var(--os-cool-edge);
  border-radius: 13px;
  background: var(--os-cool-wash);
  padding: 20px 22px;
}

.scan-boundary {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--os-ink-2);
}

.scan-boundary b {
  font-weight: 500;
  color: var(--os-ink);
}

.scan-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.scan-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--os-cool-edge);
  border-radius: 9px;
  background: transparent;
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink);
  cursor: pointer;
  transition: background 220ms ease;
}

.scan-pick:hover {
  background: var(--os-cool-wash);
}

.scan-pick input {
  display: none;
}

.scan-status {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--os-ink-3);
}

.scan-report[hidden] {
  display: none;
}

.scan-report {
  margin-top: 22px;
}

.scan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 22px;
  margin: 0 0 20px;
}

.scan-summary div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scan-summary dt {
  font-family: var(--swarm-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.scan-summary dd {
  margin: 0;
  font-family: var(--swarm-mono);
  font-size: 1.24rem;
  font-variant-numeric: tabular-nums;
  color: var(--os-ink);
}

.scan-findings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scan-findings li {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--os-edge);
  border-left-width: 2px;
  border-radius: 9px;
  background: var(--os-plate);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--os-ink-2);
}

.scan-findings li[data-tone="warn"] { border-left-color: var(--os-warn); }
.scan-findings li[data-tone="ok"] { border-left-color: var(--os-accent); }
.scan-findings li[data-tone="idle"] { border-left-color: var(--os-edge-strong); }

.scan-findings b {
  flex: none;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 2px;
  color: var(--os-ink-3);
}

.tool-crossing {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--os-edge);
}

/* Utility spacing so generated markup carries no inline styles. */
.tool-scroll + .tool-scroll {
  margin-top: 18px;
}

.suite-rack + .suite-note {
  display: block;
  margin-top: 14px;
}

.scan-heading {
  margin: 24px 0 10px;
  font-family: var(--swarm-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}