/**
 * Skynet Operator Console v2 — layout + components (WO-54).
 *
 * Everything reads from tokens.css. Three rules hold across this file:
 *   1. No colour literals — a colour that is not a token cannot be re-themed.
 *   2. Motion goes through the SDS motion tokens, which SDS zeroes under prefers-reduced-motion.
 *   3. Status colour is applied by DATA attribute (`data-status`), never by a
 *      class the renderer picks freehand — an unknown status has nowhere to
 *      fall except the `unknown` grey (DESIGN-BRIEF §6.1).
 */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--sds-color-bg);
  color: var(--sds-color-text);
  font-family: var(--sds-font-sans);
  font-size: var(--sds-type-body);
  line-height: var(--sds-line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* WO-292: glyphs are SkyUI icon() output; the stroke (1.6 on the 24 grid, currentColor) is the icon's own. */
.ui-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

:focus-visible {
  outline: var(--sds-focus-width) solid var(--sds-color-focus);
  outline-offset: var(--sds-focus-offset);
  border-radius: var(--sds-radius-small);
}

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--sds-font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--sds-color-muted); }
.faint { color: var(--sds-color-subtle); }
.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;
}

/* --------------------------------------------------------------------------
   Sign-in — the console boots signed-out. Nothing tenant-shaped is in the DOM
   until whoami succeeds.
   -------------------------------------------------------------------------- */

#view-login {
  display: none;
  min-height: 100vh;
  place-items: center;
  padding: var(--sds-space-6);
}
body.signed-out #view-login { display: grid; }
body.signed-out #shell { display: none; }
body:not(.signed-out) #view-login { display: none; }
/* WO-287: until whoami answers, show neither the sign-in card nor the shell. */
body.booting #view-login { visibility: hidden; }
@media (max-width: 600px) { html:has(> body.booting) { background: var(--sds-color-bg); } body.booting { background: var(--sds-color-bg); } }

.login-card {
  width: min(420px, 100%);
  background: var(--sds-color-panel);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  padding: var(--sds-space-8);
  display: grid;
  gap: var(--sds-space-4);
  box-shadow: var(--sds-elevation-3);
}
.login-card h1 { margin: 0; font-size: var(--sds-type-section); letter-spacing: 0; }
.login-card .sub { margin: 0; color: var(--sds-color-muted); }
.login-card .login-mark {
  width: min(220px, 100%);
  justify-self: center;
}
.login-card .login-mark img {
  width: 100%;
  height: auto;
}
.login-sep {
  display: flex; align-items: center; gap: var(--sds-space-3);
  color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); letter-spacing: var(--sds-tracking-none);
}
.login-sep::before, .login-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--sds-color-border);
}
.login-token { display: flex; gap: var(--sds-space-2); }
.login-token input { flex: 1; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

#shell {
  display: grid;
  /* WO-312: the SkyUI sidebar (grid-area: side) sizes its own column: 224px, 64px collapsed. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) auto 1fr;
  grid-template-areas: "side topbar" "side banner" "side main";
  height: 100vh;
  height: 100dvh;
  background: var(--sds-color-bg);
}
/* The phone bar host: SkyUI's bottomBar() shows only at 640px and under. */
#rail-bar { grid-area: bar; min-width: 0; }
#rail-bar:empty { display: none; }
/* The bind menu's rows (the rail's old item class is retired with the rail). */
.bind-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-3);
  width: 100%; min-height: var(--sds-size-touch); padding: var(--sds-space-2) var(--sds-space-3);
  background: none; border: 0; border-radius: var(--sds-radius-small);
  color: var(--sds-color-text); text-align: start; cursor: pointer;
}
.bind-menu-item:hover { background: var(--sds-color-fill-gray); }
.bind-menu-item:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: calc(var(--sds-focus-width) * -1); }
.bind-menu-list { display: grid; gap: var(--sds-space-1); min-width: 240px; padding: var(--sds-space-2); }
.bind-menu-error { max-width: 360px; padding: var(--sds-space-3); }
.bind-menu-note { padding: 0 var(--sds-space-2); }

.theme-logo { display: inline-grid; flex: none; place-items: center; }
.theme-logo > img { grid-area: 1 / 1; }
.theme-logo-light { display: none; }
.sds[data-sds-theme="light"] .theme-logo-dark { display: none; }
.sds[data-sds-theme="light"] .theme-logo-light { display: block; }
@media (prefers-color-scheme: light) {
  .sds[data-sds-theme="system"] .theme-logo-dark { display: none; }
  .sds[data-sds-theme="system"] .theme-logo-light { display: block; }
}
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: var(--sds-space-3);
  padding: 0 var(--sds-space-4);
  border-bottom: 1px solid var(--sds-color-border);
  background: color-mix(in srgb, var(--sds-color-panel) 92%, transparent);
  backdrop-filter: blur(16px);
  /* The containing block for .bind-menu, which hangs below the pill. */
  position: relative;
}
.topbar .grow { flex: 1; }

.bind-pill {
  display: inline-flex; align-items: center; gap: var(--sds-space-2);
  min-height: var(--sds-size-control);
  padding: var(--sds-space-2) var(--sds-space-4) var(--sds-space-2) var(--sds-space-3);
  border: 1px solid var(--sds-color-control-border); border-radius: var(--sds-radius-pill);
  background: var(--sds-color-raised); cursor: pointer;
  transition: border-color var(--sds-motion-standard) var(--sds-motion-ease);
}
.bind-pill:hover { border-color: var(--co); }
.bind-pill .co-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--co); flex: none;
}
.bind-pill[data-bound="false"] .co-dot { background: var(--sds-color-subtle); }

/* The bind switcher. It is a FLEX ITEM of .topbar in the document, so without
   `position: absolute` it lays out inline between the pill and the health dot
   and shoves the top bar apart every time it opens — and `hidden` alone loses
   to the flex `display`, so the menu would be permanently visible. Both are the
   same rule: take it out of flow, and let [hidden] win. */
.bind-menu {
  position: absolute;
  top: calc(var(--topbar-h) - var(--sds-space-2));
  left: var(--sds-space-4);
  /* Above the page chrome. The dossier drawer is a modal SkyUI <dialog> (WO-312)
     in the top layer, so the Deploy tab's "Choose a company" closes it before it
     opens this menu; a menu under a modal would be inert — a button that visibly
     did nothing. */
  z-index: 60;
  min-width: 240px;
  background: var(--sds-color-panel);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-control);
  box-shadow: var(--sds-elevation-3);
}
.bind-menu[hidden] { display: none; }

.health {
  display: inline-flex; align-items: center; gap: var(--sds-space-2);
  color: var(--sds-color-muted); font-size: var(--sds-type-footnote);
}
.health .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sds-color-subtle); }
.health[data-health="ok"] .dot { background: var(--sds-color-success); }
.health[data-health="degraded"] .dot { background: var(--sds-color-warning); }
.health[data-health="down"] .dot { background: var(--sds-color-danger); }

/* Buttons — SDS Apple web layer (WO-205). No borders, gradients or shadows on
   controls; filled indigo is the one primary action in a view, tinted carries
   supporting actions, gray is neutral, tertiary is plain. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sds-space-2);
  min-height: var(--sds-size-control);
  padding: 0 var(--sds-space-4);
  border: 0; border-radius: 12px;
  background: var(--sds-color-fill-gray); color: var(--sds-color-text); cursor: pointer;
  font-weight: 500; line-height: var(--sds-line-tight); text-decoration: none;
  transition: background var(--sds-motion-standard) var(--sds-motion-ease), color var(--sds-motion-standard) var(--sds-motion-ease), opacity var(--sds-motion-standard) var(--sds-motion-ease);
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--sds-color-fill-gray), var(--sds-color-text) 6%); }
.btn:disabled { background: var(--sds-color-fill-gray); color: var(--sds-color-disabled-text); cursor: not-allowed; }
.btn-primary { background: var(--sds-color-action); color: var(--sds-color-on-action); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--sds-color-action-hover); }
.btn-secondary { background: var(--sds-color-fill-tinted); color: var(--sds-color-action); font-weight: 600; }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--sds-color-fill-tinted), var(--sds-color-action) 6%); }
.btn-tertiary { background: transparent; color: var(--sds-color-action); box-shadow: none; }
.btn-tertiary:hover:not(:disabled) { background: var(--sds-color-fill-tinted); }
.btn-sm { min-height: var(--sds-size-control); padding: 0 var(--sds-space-3); border-radius: 10px; font-size: var(--sds-type-footnote); }

.text-action {
  min-height: var(--sds-size-control);
  padding: var(--sds-space-2);
  border: 0;
  background: transparent;
  color: var(--sds-color-action);
  cursor: pointer;
  font-weight: 700;
}
.text-action:hover { color: var(--sds-color-text); }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--sds-size-control);
  padding: var(--sds-space-2) var(--sds-space-3);
  background: var(--sds-color-bg);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-small);
  color: var(--sds-color-text);
}
textarea { resize: vertical; min-height: 96px; line-height: var(--sds-line-body); }
input:focus, select:focus, textarea:focus {
  border-color: var(--sds-palette-neon-cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sds-palette-neon-cyan) 16%, transparent);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; }
/* `.field`, not `label.field`: the Company-assignments field is a <div>,
   because it contains a LIST of checkbox labels and a <label> may not wrap
   other labelled controls. Pinning the selector to `label` left that one field
   — the one that decides which binds an agent can be dispatched under — with
   no layout and an unstyled caption and hint. */
.field { display: grid; gap: var(--sds-space-1); }
.field > .lbl { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.field > .hint { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }

/* One company checkbox row inside the assignments field. */
.assign {
  display: flex; align-items: center; gap: var(--sds-space-2);
  padding: var(--sds-space-2) var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small);
  background: var(--sds-color-panel); cursor: pointer;
}
.assign:hover { background: var(--sds-color-raised); }
.assign input { accent-color: var(--sds-color-action); flex: none; }
.assign > span:first-of-type { flex: 1; }

/* A grid, not a block: the panes stack a head, zero or more honesty notes, and
   a body, and each of those is optional. Margins on the individual pieces gave
   two stacked notes no separation at all and a missing head a double gap; one
   `gap` here spaces whatever combination actually renders. */
.main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--sds-space-8) var(--sds-layout-gutter) var(--sds-space-16);
  display: grid;
  gap: var(--sds-space-4);
  align-content: start;
  grid-template-columns: minmax(0, var(--sds-layout-content));
  justify-content: center;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--sds-palette-indigo) 10%, transparent), transparent 34%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--sds-palette-neon-cyan) 7%, transparent), transparent 32%),
    var(--sds-color-bg);
}

.page-head { display: flex; align-items: baseline; gap: var(--sds-space-3); min-width: 0; }
.page-head h1 { margin: 0; font-size: var(--sds-type-large-title); line-height: var(--sds-line-tight); letter-spacing: 0; }
.page-head .count { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sds-space-6);
  min-width: 0;
  margin-bottom: var(--sds-space-2);
}
.page-intro > div { min-width: 0; }
.page-intro h1 {
  margin: var(--sds-space-1) 0 0;
  color: var(--sds-color-text);
  font-size: var(--sds-type-large-title);
  line-height: var(--sds-line-tight);
}
.page-intro p { max-width: 64ch; margin: var(--sds-space-2) 0 0; color: var(--sds-color-muted); font-size: var(--sds-type-body); }
.eyebrow {
  display: block;
  color: var(--sds-color-subtle);
  font-size: var(--sds-type-section-header);
  font-weight: var(--sds-weight-semibold);
  letter-spacing: var(--sds-tracking-none);
}

/* --------------------------------------------------------------------------
   Chips, dots, errors
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: var(--sds-space-1);
  padding: 1px var(--sds-space-2);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-pill);
  background: var(--sds-color-raised); color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote); white-space: nowrap;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sds-color-subtle); flex: none;
}
.dot[data-status="working"] { background: var(--sds-color-success); }
.dot[data-status="idle"] { background: var(--sds-color-accent); }
.dot[data-status="offline"] { background: var(--sds-color-subtle); }
.dot[data-status="suspended"] { background: var(--sds-color-warning); }
.dot[data-status="unknown"] { background: var(--sds-color-subtle); }
/* §5: ONLY `working` pulses. A pulsing dot is a claim that something is running. */
.dot[data-status="working"] { animation: pulse 1.8s var(--sds-motion-ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--sds-color-success); opacity: 1; }
  /* `transparent`, not a hand-copied rgba of --ok at zero alpha: the literal
     was a second copy of the token that would not follow it if --ok moved. */
  70% { box-shadow: 0 0 0 5px transparent; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .dot[data-status="working"] { animation: none; }
}

.err-envelope {
  border: 1px solid var(--sds-color-danger);
  border-radius: var(--sds-radius-small);
  background: color-mix(in srgb, var(--sds-color-danger) 10%, transparent);
  padding: var(--sds-space-3);
  display: grid; gap: var(--sds-space-1);
}
.err-envelope .code { font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); color: var(--sds-color-danger); }
.err-envelope .msg { color: var(--sds-color-text); }
/* §6.3 — remediation is rendered VERBATIM. Never summarised, never dropped. */
.err-envelope .remediation { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

.ok-receipt {
  border: 1px solid var(--sds-color-success);
  border-radius: var(--sds-radius-small);
  background: color-mix(in srgb, var(--sds-color-success) 10%, transparent);
  padding: var(--sds-space-3);
  display: grid; gap: var(--sds-space-1);
}

.empty {
  display: grid; gap: var(--sds-space-3); justify-items: center; text-align: center;
  padding: var(--sds-space-12) var(--sds-space-4);
  border: 1px dashed var(--sds-color-control-border); border-radius: var(--sds-radius-control);
  color: var(--sds-color-muted);
}
.empty .glyph { font-size: var(--sds-type-large-title); opacity: 0.7; }
.empty .why { max-width: 46ch; }

.stub {
  display: grid; gap: var(--sds-space-3); max-width: 60ch;
  padding: var(--sds-space-6);
  border: 1px dashed var(--sds-color-control-border); border-radius: var(--sds-radius-control);
}
.stub h2 { margin: 0; font-size: var(--sds-type-headline); }
.stub .pr { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }

/* --------------------------------------------------------------------------
   Shared dashboard building blocks.

   New panes compose these open, single-purpose surfaces rather than inventing
   another card treatment. Cards represent repeated objects; panels represent
   one tool or one plain-language answer.
   -------------------------------------------------------------------------- */

.dashboard-section,
.content-section { display: grid; gap: var(--sds-space-3); min-width: 0; }
.content-section { margin-top: var(--sds-space-2); }
.quiet-section { opacity: 0.82; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-3); min-width: 0;
}
.section-head > div { display: grid; gap: var(--sds-space-1); min-width: 0; }
.section-head h2 { margin: 0; font-size: var(--sds-type-body); line-height: var(--sds-line-tight); }
.section-head .grow { flex: 1; }
.section-label {
  color: var(--sds-color-subtle); font-size: var(--sds-type-section-header); font-weight: var(--sds-weight-semibold);
  letter-spacing: var(--sds-tracking-none);
}

.dashboard-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sds-layout-gutter);
}
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sds-space-3); }

.stat-card {
  display: grid; gap: var(--sds-space-1);
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  color: var(--sds-color-text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--sds-elevation-1);
  transition: background var(--sds-motion-standard) var(--sds-motion-ease), border-color var(--sds-motion-standard) var(--sds-motion-ease), transform var(--sds-motion-standard) var(--sds-motion-ease), box-shadow var(--sds-motion-standard) var(--sds-motion-ease);
}
.stat-card:hover { background: var(--sds-color-raised); border-color: var(--sds-palette-indigo); transform: translateY(-2px); }
.stat-card .value,
.stat-value {
  color: var(--sds-color-text); font-size: var(--sds-type-title); font-weight: 700;
  line-height: var(--sds-line-tight); font-variant-numeric: tabular-nums;
}
.stat-card .label,
.stat-label { color: var(--sds-color-text); font-size: var(--sds-type-footnote); font-weight: 700; }
.stat-meta { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

.system-mission {
  display: grid;
  gap: var(--sds-space-4);
  margin: var(--sds-space-2) 0 var(--sds-space-6);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--co) 28%, var(--sds-color-border));
  border-radius: var(--sds-radius-control);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--co) 14%, transparent), transparent 36%),
    var(--sds-color-panel);
}
.system-mission-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sds-space-4); }
.system-mission-head h2 { margin: 5px 0 8px; max-width: 760px; font-size: var(--sds-type-title); line-height: 1.05; letter-spacing: -0.045em; }
.system-mission-head p { margin: 0; max-width: 720px; color: var(--sds-color-muted); line-height: 1.55; }
.system-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; border-radius: var(--sds-radius-control); overflow: hidden; background: var(--sds-color-border); }
.system-loop li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; min-width: 0; padding: 15px; background: var(--sds-color-bg); }
.system-loop li > span { grid-row: 1 / span 2; display: grid; place-items: center; align-self: start; width: 26px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--co) 15%, var(--sds-color-raised)); color: var(--co); font-size: var(--sds-type-footnote); font-weight: 800; }
.system-loop strong { font-size: var(--sds-type-callout); }
.system-loop small { color: var(--sds-color-subtle); line-height: 1.4; }
.system-mission .stat-grid { margin: 0; }
.system-mission .stat-card { cursor: default; }
.system-mission .stat-card:hover { background: var(--sds-color-panel); border-color: var(--sds-color-border); transform: none; box-shadow: var(--sds-elevation-1); }
.technical-value { font-family: var(--sds-font-mono); font-size: var(--sds-type-title); letter-spacing: -0.04em; }
.system-mission-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-4); align-items: start; }
.system-mission-columns .content-section { margin: 0; min-width: 0; }
.system-mission-columns .section-head h3 { margin: 0; font-size: var(--sds-type-body); }

@media (max-width: 720px) {
  .system-mission-head { display: grid; }
  .system-mission-head .btn { width: 100%; }
  .system-loop,
  .system-mission-columns { grid-template-columns: minmax(0, 1fr); }
}

/* Strategic Missions — direction, declared gaps, Fleet execution, and proof
   share one readable command surface. The old system-mission block remains as
   a compatibility render for older embedded callers; the live console uses
   these server-composed portfolio styles. */
.mission-chooser {
  display: grid;
  gap: var(--sds-space-1);
  min-width: min(320px, 100%);
  color: var(--sds-color-subtle);
  font-size: var(--sds-type-footnote);
  font-weight: 750;
}
.mission-chooser select,
.fleet-strategy-bar select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 var(--sds-space-3);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-small);
  background: var(--sds-color-panel);
  color: var(--sds-color-text);
  font: 650 var(--sds-type-body)/1 var(--sds-font-sans);
}
.mission-command {
  display: grid;
  gap: var(--sds-space-4);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--co) 32%, var(--sds-color-border));
  border-radius: var(--sds-radius-control);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--co) 14%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--sds-color-panel) 94%, var(--co)), var(--sds-color-panel));
  box-shadow: var(--sds-elevation-1);
}
.mission-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sds-space-6);
}
.mission-command-head > div:first-child { display: grid; gap: var(--sds-space-2); max-width: 820px; }
.mission-command-head h2 {
  margin: 0;
  color: var(--sds-color-text);
  font-size: var(--sds-type-title);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.mission-command-head p { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-body); line-height: var(--sds-line-body); }
.mission-command-status { display: flex; align-items: center; justify-content: flex-end; gap: var(--sds-space-2); flex-wrap: wrap; max-width: 320px; }
.mission-command-status small { width: 100%; color: var(--sds-color-subtle); text-align: right; }
.mission-state-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sds-space-3);
}
.mission-state-bridge > div {
  display: grid;
  align-content: start;
  gap: var(--sds-space-2);
  min-height: 132px;
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: color-mix(in srgb, var(--sds-color-panel) 92%, transparent);
}
.mission-state-bridge > div:last-child { border-color: color-mix(in srgb, var(--sds-color-success) 32%, var(--sds-color-border)); }
.mission-state-bridge > div > span { color: var(--sds-color-subtle); font-size: var(--sds-type-section-header); font-weight: var(--sds-weight-semibold); letter-spacing: var(--sds-tracking-none); }
.mission-state-bridge p { margin: 0; color: var(--sds-color-text); line-height: var(--sds-line-body); white-space: pre-wrap; }
.mission-state-arrow { display: grid; place-items: center; color: var(--co); font-size: var(--sds-type-title); font-weight: 800; }
.mission-state-bridge.compact > div { min-height: 0; padding: var(--sds-space-3); }
.mission-current-claims { display: grid; gap: var(--sds-space-3); }
.mission-current-claims h3 { margin: 0; font-size: var(--sds-type-body); }
.mission-claim-list { display: grid; gap: var(--sds-space-2); }
.mission-claim-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sds-space-3); padding: var(--sds-space-3); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small); background: var(--sds-color-panel); }
.mission-claim-card > div { display: grid; gap: var(--sds-space-1); min-width: 0; }
.mission-claim-card strong { color: var(--sds-color-text); overflow-wrap: anywhere; }
.mission-claim-card span:not(.status-tag) { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); text-transform: capitalize; }
.mission-progress { display: grid; gap: var(--sds-space-2); }
.mission-progress > div { display: flex; justify-content: space-between; gap: var(--sds-space-3); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.mission-progress > div strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.mission-progress progress {
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sds-color-raised);
}
.mission-progress progress::-webkit-progress-bar { background: var(--sds-color-raised); }
.mission-progress progress::-webkit-progress-value { background: var(--sds-brand-gradient); border-radius: 999px; }
.mission-progress progress::-moz-progress-bar { background: var(--sds-brand-gradient); border-radius: 999px; }
.mission-progress > p { margin: 0; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.mission-progress > p.mission-progress-formula { font-variant-numeric: tabular-nums; }
.mission-rollup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  overflow: hidden;
}
.mission-rollup > div { display: grid; gap: var(--sds-space-1); padding: var(--sds-space-3); background: var(--sds-color-panel); }
.mission-rollup > div + div { border-left: 1px solid var(--sds-color-border); }
.mission-rollup dd { margin: 0; color: var(--sds-color-text); font-size: var(--sds-type-title); font-weight: 800; font-variant-numeric: tabular-nums; }
.mission-rollup dt { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.mission-metrics { display: grid; gap: var(--sds-space-3); }
.mission-metrics h3 { margin: 0; font-size: var(--sds-type-body); }
.mission-metrics ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sds-space-2); margin: 0; padding: 0; list-style: none; }
.mission-metrics li { display: grid; gap: var(--sds-space-1); padding: var(--sds-space-3); border-left: 2px solid var(--co); background: var(--sds-color-raised); }
.mission-metrics li span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.mission-dashboard { display: grid; gap: var(--sds-space-4); }
.mission-dashboard .section-head p { margin: var(--sds-space-1) 0 0; color: var(--sds-color-muted); }
.mission-goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sds-space-3); }
.mission-goal-card { display: grid; align-content: start; gap: var(--sds-space-3); padding: var(--sds-space-4); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); }
.mission-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sds-space-3); }
.mission-card-head > div { display: grid; gap: var(--sds-space-1); }
.mission-card-head h3 { margin: 0; font-size: var(--sds-type-body); }
.mission-goal-card > p { margin: 0; color: var(--sds-color-muted); line-height: var(--sds-line-body); }
.mission-mini-state { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--sds-space-2); align-items: center; color: var(--sds-color-subtle); }
.mission-mini-state > span:not([aria-hidden]) { display: grid; gap: var(--sds-space-1); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.mission-mini-state small { color: var(--sds-color-subtle); font-weight: var(--sds-weight-semibold); letter-spacing: var(--sds-tracking-none); font-size: var(--sds-type-section-header); }
.mission-gap-list { display: grid; gap: var(--sds-space-2); }
.mission-gap-card { overflow: hidden; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); }
.mission-gap-card summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-4); min-height: 88px; padding: var(--sds-space-3) var(--sds-space-4); cursor: pointer; list-style: none; }
.mission-gap-card summary::-webkit-details-marker { display: none; }
.mission-gap-card[open] summary { border-bottom: 1px solid var(--sds-color-border); background: var(--sds-color-raised); }
.mission-gap-main { display: grid; gap: var(--sds-space-1); min-width: 0; }
.mission-gap-main > strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.mission-gap-main > small { color: var(--sds-color-subtle); overflow-wrap: anywhere; }
.mission-gap-tags { display: flex; gap: var(--sds-space-1); flex-wrap: wrap; }
.mission-gap-count { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); white-space: nowrap; }
.mission-gap-detail { display: grid; gap: var(--sds-space-4); padding: var(--sds-space-4); }
.mission-gap-reason { margin: 0; color: var(--sds-color-muted); }
.mission-gap-reason strong { color: var(--sds-color-text); }
.mission-gap-freshness { margin: 0; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); text-transform: capitalize; }
.mission-gap-freshness strong { color: var(--sds-color-muted); text-transform: none; }
.mission-gap-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-4); }
.mission-gap-columns h4 { margin: 0 0 var(--sds-space-2); color: var(--sds-color-text); }
.mission-check-list,
.mission-evidence-list { display: grid; gap: var(--sds-space-2); margin: 0; padding: 0; list-style: none; }
.mission-check-list li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--sds-space-2); color: var(--sds-color-muted); }
.mission-check-list li[data-met="true"] { color: var(--sds-color-success); }
.mission-evidence-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sds-space-3); padding-bottom: var(--sds-space-2); border-bottom: 1px solid var(--sds-color-border); }
.mission-evidence-list li strong { color: var(--sds-color-text); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.mission-evidence-list li span { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
/* Two actions now (WO-140 / 5.1: Dispatch a fix, beside Open linked Fleet
   work), so the footer wraps rather than overflowing a phone. */
.mission-gap-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sds-space-3); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.mission-execution-list,
.mission-signal-list { display: grid; gap: var(--sds-space-2); }
.mission-execution-row,
.mission-signal-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--sds-space-3); padding: var(--sds-space-3); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small); background: var(--sds-color-panel); }
.mission-execution-row > span:nth-child(2),
.mission-signal-row > span:nth-child(2) { display: grid; gap: var(--sds-space-1); min-width: 0; }
.mission-execution-row small,
.mission-signal-row small { color: var(--sds-color-muted); overflow-wrap: anywhere; }
.mission-feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-4); align-items: start; }
.mission-feedback-grid > .content-section { margin: 0; }
.mission-decision-count { margin: var(--sds-space-3) 0 0; color: var(--sds-color-muted); }
.mission-intelligence-move { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--sds-space-3); padding: var(--sds-space-3) var(--sds-space-4); border: 1px solid color-mix(in srgb, var(--sds-palette-indigo) 30%, var(--sds-color-border)); border-radius: var(--sds-radius-control); background: color-mix(in srgb, var(--sds-palette-indigo) 6%, var(--sds-color-panel)); }
.mission-intelligence-move > span:nth-child(2) { display: grid; gap: var(--sds-space-1); }
.mission-intelligence-move small { color: var(--sds-color-muted); }

@media (max-width: 840px) {
  .mission-command-head { display: grid; }
  .mission-command-status { justify-content: flex-start; max-width: none; }
  .mission-command-status small { text-align: left; }
  .mission-rollup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-rollup > div + div { border-left: 0; }
  .mission-rollup > div { border-bottom: 1px solid var(--sds-color-border); }
  .mission-feedback-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .mission-state-bridge,
  .mission-gap-columns { grid-template-columns: minmax(0, 1fr); }
  .mission-state-arrow { transform: rotate(90deg); }
  .mission-progress > div,
  .mission-gap-footer { align-items: flex-start; flex-direction: column; }
  .mission-gap-card summary { align-items: flex-start; flex-direction: column; }
  .mission-gap-count { white-space: normal; }
  .mission-claim-card { flex-direction: column; }
  .mission-execution-row,
  .mission-signal-row { grid-template-columns: auto minmax(0, 1fr); }
  .mission-execution-row > .status-tag,
  .mission-signal-row > .status-tag { grid-column: 2; justify-self: start; }
  .mission-intelligence-move { grid-template-columns: auto minmax(0, 1fr); }
  .mission-intelligence-move .text-action { grid-column: 2; justify-self: start; }
}

.list-panel,
.plain-panel {
  min-width: 0;
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.plain-panel { padding: var(--sds-space-4); color: var(--sds-color-muted); }
.plain-panel[data-tone="success"] { border-left: 2px solid var(--sds-color-success); }
.plain-panel[data-tone="attention"] { border-left: 2px solid var(--sds-color-warning); }
.plain-panel[data-tone="danger"] { border-left: 2px solid var(--sds-color-danger); }
.plain-panel[data-tone="information"] { border-left: 2px solid var(--sds-color-accent); }

.list-row {
  display: flex; align-items: center; gap: var(--sds-space-3);
  min-height: var(--sds-size-control);
  padding: var(--sds-space-3) var(--sds-space-4);
  border-bottom: 1px solid var(--sds-color-border);
}
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .primary { color: var(--sds-color-text); font-weight: 600; }
.list-row .secondary { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.action-row { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; }

.open-list,
.decision-list,
.settings-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  box-shadow: var(--sds-elevation-1);
}

.activity-row,
.decision-row,
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sds-space-3);
  min-height: 72px;
  padding: var(--sds-space-3) var(--sds-space-4);
  border-bottom: 1px solid var(--sds-color-border);
}
.activity-row:last-child,
.decision-row:last-child,
.settings-row:last-child { border-bottom: 0; }

.activity-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--sds-radius-small);
  background: var(--sds-color-accent-soft);
  color: var(--sds-color-on-accent-soft);
}
.activity-copy,
.decision-copy,
.settings-row > div { display: grid; gap: var(--sds-space-1); flex: 1; min-width: 0; }
/* WO-140 / 5.1 — the Dispatch action rides an activity row beside a status
   tag. On a 390px phone those three flex children plus the icon cannot sit on
   one line, and a non-wrapping row would push the whole page sideways, so the
   row wraps and the copy keeps a readable basis instead. */
.activity-row { flex-wrap: wrap; }
.activity-copy { flex: 1 1 180px; }
.activity-copy strong,
.decision-copy strong,
.settings-row strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.activity-copy span,
.settings-row > div > span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.decision-copy p { max-width: 72ch; margin: 0; color: var(--sds-color-muted); }
.decision-row { align-items: flex-start; padding-block: var(--sds-space-4); }
.decision-row > .status-tag { margin-top: var(--sds-space-1); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sds-space-2); flex-wrap: wrap; }

.status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--sds-space-1) var(--sds-space-2);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-pill);
  background: var(--sds-color-raised);
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
  font-weight: 700;
  white-space: nowrap;
}
.status-tag[data-tone="active"] { border-color: var(--sds-color-accent); color: var(--sds-color-accent); background: color-mix(in srgb, var(--sds-color-accent) 10%, transparent); }
.status-tag[data-tone="success"] { border-color: var(--sds-color-success); color: var(--sds-color-success); background: color-mix(in srgb, var(--sds-color-success) 10%, transparent); }
.status-tag[data-tone="danger"] { border-color: var(--sds-color-danger); color: var(--sds-color-danger); background: color-mix(in srgb, var(--sds-color-danger) 10%, transparent); }
/* The tone the top-bar health dot already had (--warn is --attention) and the
   tag did not, so a "degraded" tag had to borrow success or danger. */
.status-tag[data-tone="attention"] { border-color: var(--sds-color-warning); color: var(--sds-color-warning); background: color-mix(in srgb, var(--sds-color-warning) 10%, transparent); }
.status-tag[data-tone="quiet"] { border-color: var(--sds-color-border); color: var(--sds-color-subtle); background: var(--sds-color-bg); }

.all-clear,
.empty-state,
.inline-success {
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.all-clear {
  display: flex;
  align-items: center;
  gap: var(--sds-space-3);
  padding: var(--sds-space-4);
  border-left: 2px solid var(--sds-color-success);
  color: var(--sds-color-success);
}
.all-clear[data-tone="quiet"] { border-left-color: var(--sds-color-subtle); color: var(--sds-color-subtle); }
.all-clear > div { display: grid; gap: var(--sds-space-1); }
.all-clear strong { color: var(--sds-color-text); }
.all-clear span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--sds-space-2);
  padding: var(--sds-space-8) var(--sds-space-4);
  color: var(--sds-color-muted);
  text-align: center;
}
.empty-state .ui-icon { width: 28px; height: 28px; color: var(--sds-color-subtle); }
.empty-state strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.empty-state span { max-width: 48ch; }
.inline-success { margin-top: var(--sds-space-2); padding: var(--sds-space-3) var(--sds-space-4); border-left: 2px solid var(--sds-color-success); color: var(--sds-color-success); }

.iq-capture-section {
  display: grid;
  gap: var(--sds-space-3);
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  box-shadow: var(--sds-elevation-1);
}
.iq-capture-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sds-space-3); }
.iq-capture-heading strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.capture-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sds-space-2); align-items: center; }
.iq-scope-section { display: grid; gap: var(--sds-space-2); }
.iq-scope-strip { display: flex; gap: var(--sds-space-2); overflow-x: auto; padding: 2px 2px var(--sds-space-2); scrollbar-width: none; }
.iq-scope-strip::-webkit-scrollbar { display: none; }
.scope-chip {
  min-height: 44px; flex: 0 0 auto; padding: var(--sds-space-2) var(--sds-space-4);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-pill); background: var(--sds-color-raised);
  color: var(--sds-color-muted); font: 650 var(--sds-type-body)/1 var(--sds-font-sans); white-space: nowrap; cursor: pointer;
}
.scope-chip[aria-pressed="true"] { border-color: transparent; background: var(--sds-brand-gradient); color: var(--sds-palette-white); }
.capture-destination { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); white-space: nowrap; }
.capture-destination strong { color: var(--sds-color-text); }
.iq-focus-card {
  display: flex; align-items: center; gap: var(--sds-space-3); min-height: 88px; padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-control-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); box-shadow: var(--sds-elevation-1);
}
.iq-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sds-space-3); }
.iq-field-card {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--sds-space-3);
  min-height: 76px; padding: var(--sds-space-3); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel); color: var(--sds-color-text); text-align: left; cursor: pointer;
}
.iq-field-card[data-current="true"] { border-color: var(--sds-palette-indigo); background: color-mix(in srgb, var(--sds-palette-indigo) 7%, var(--sds-color-panel)); }
.iq-field-card > span:nth-child(2) { display: grid; gap: var(--sds-space-1); min-width: 0; }
.iq-field-card small { color: var(--sds-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-count { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.iq-card-list { display: grid; gap: var(--sds-space-2); }
.iq-item-card { overflow: hidden; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); }
.iq-item-card summary { display: flex; align-items: center; gap: var(--sds-space-3); min-height: 76px; padding: var(--sds-space-3) var(--sds-space-4); cursor: pointer; list-style: none; }
.iq-item-card summary::-webkit-details-marker { display: none; }
.iq-item-card[open] summary { border-bottom: 1px solid var(--sds-color-border); background: var(--sds-color-raised); }
.iq-item-detail { display: grid; gap: var(--sds-space-3); padding: var(--sds-space-4); }
.iq-item-detail p { margin: 0; color: var(--sds-color-muted); line-height: var(--sds-line-body); }
.iq-item-detail .row-actions,
.iq-focus-card .row-actions { flex-wrap: wrap; }

.workspace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sds-space-3); }
.workspace-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark copy" "mark actions";
  align-items: start;
  gap: var(--sds-space-3);
  min-width: 0;
  min-height: 88px;
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  box-shadow: var(--sds-elevation-1);
}
.workspace-card[data-current="true"] { border-color: var(--sds-palette-indigo); background: color-mix(in srgb, var(--sds-palette-indigo) 8%, var(--sds-color-panel)); }
.workspace-mark {
  grid-area: mark;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--sds-radius-pill);
  background: var(--sds-tone-indigo-soft);
  color: var(--sds-color-text);
  font-weight: 700;
}
.workspace-copy { grid-area: copy; display: grid; gap: var(--sds-space-1); min-width: 0; }
.workspace-copy strong { overflow-wrap: anywhere; }
.workspace-copy > span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.settings-row { justify-content: space-between; }
.settings-row > span:last-child { color: var(--sds-color-text); text-align: right; overflow-wrap: anywhere; }
/* Value plus the control that changes it. #view=companies is a real pane the
   router has always accepted; until WO-94 nothing on the console linked to it. */
.settings-value { display: inline-flex; align-items: baseline; gap: var(--sds-space-3); flex-wrap: wrap; justify-content: flex-end; }

.technical-panel {
  overflow: hidden;
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-bg);
}
.technical-panel summary {
  min-height: var(--sds-size-control);
  display: flex;
  align-items: center;
  padding: var(--sds-space-2) var(--sds-space-4);
  color: var(--sds-color-muted);
  cursor: pointer;
  font-weight: 700;
}
.technical-panel[open] summary { border-bottom: 1px solid var(--sds-color-border); color: var(--sds-color-text); }
.technical-body { display: grid; gap: var(--sds-space-3); padding: var(--sds-space-4); color: var(--sds-color-muted); }
.technical-body p { margin: 0; }

.portrait {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-pill);
  background: var(--sds-color-raised);
}
.portrait.monogram { display: grid; place-items: center; color: var(--sds-color-muted); font-weight: 700; }
.portrait-sm { width: 52px; height: 52px; }

/* --------------------------------------------------------------------------
   Team room — the caricature grid (§4)
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: var(--sds-space-4);
}

.agents-intro { align-items: flex-end; }
.agent-registry-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sds-space-2);
}
.agent-registry-counts span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 34px;
  padding: var(--sds-space-1) var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-pill);
  background: var(--sds-color-panel);
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
}
.agent-registry-counts strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.agents-section { display: grid; gap: var(--sds-space-3); margin-top: var(--sds-space-6); }
.agents-section .section-head > .faint { max-width: 44ch; text-align: right; font-size: var(--sds-type-footnote); }

.agent-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  align-content: center;
  gap: var(--sds-space-2);
  min-height: 244px;
  padding: var(--sds-space-4) var(--sds-space-3);
  background: var(--sds-color-panel);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  cursor: pointer;
  color: var(--sds-color-text);
  text-align: center;
  box-shadow: var(--sds-elevation-1);
  transition: background var(--sds-motion-standard) var(--sds-motion-ease), border-color var(--sds-motion-standard) var(--sds-motion-ease), transform var(--sds-motion-standard) var(--sds-motion-ease), box-shadow var(--sds-motion-standard) var(--sds-motion-ease);
}
.agent-card:hover, .agent-card:focus-visible {
  background: var(--sds-color-raised);
  border-color: var(--sds-palette-neon-cyan);
  transform: translateY(-2px);
 
}
.agent-card[aria-selected="true"] { border-color: var(--co); background: var(--sds-color-raised); }

.caricature {
  width: 104px; height: 104px;
  border-radius: var(--sds-radius-pill);
  object-fit: cover;
  background: var(--sds-color-raised);
  border: 3px solid var(--sds-color-control-border);
  box-shadow: 0 0 0 3px var(--sds-color-panel), var(--sds-elevation-1);
  justify-self: center;
  transition: border-color var(--sds-motion-standard) var(--sds-motion-ease), box-shadow var(--sds-motion-standard) var(--sds-motion-ease), transform var(--sds-motion-standard) var(--sds-motion-ease);
}
.agent-card:hover .caricature,
.agent-card:focus-visible .caricature { border-color: var(--sds-palette-neon-cyan); transform: scale(1.02); }
.agent-card[aria-selected="true"] .caricature { border-color: var(--co); box-shadow: 0 0 0 3px var(--sds-color-panel); }
/* Honest fallback: an unmapped persona gets a monogram, never another agent's
   face (the macOS app's default-to-Karpathy behaviour is the anti-pattern). */
.monogram {
  width: 104px; height: 104px;
  border-radius: var(--sds-radius-pill);
  display: grid; place-items: center;
  background: var(--sds-color-raised); border: 3px solid var(--sds-color-control-border);
  box-shadow: 0 0 0 3px var(--sds-color-panel), var(--sds-elevation-1);
  color: var(--sds-color-muted); font-size: var(--sds-type-large-title); font-weight: 600; letter-spacing: 0.04em;
  justify-self: center;
}
.agent-card .name { font-weight: 700; font-size: var(--sds-type-body); letter-spacing: 0; line-height: var(--sds-line-tight); }
.agent-card .statusline {
  display: flex; align-items: center; justify-content: center; gap: var(--sds-space-2);
  color: var(--sds-color-muted); font-size: var(--sds-type-footnote); line-height: var(--sds-line-tight);
}
.agent-skill-summary {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--sds-space-1);
  min-width: 0;
  width: 100%;
  padding-top: var(--sds-space-2);
  border-top: 1px solid var(--sds-color-border);
}
.agent-skill-count { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: 700; }
.agent-skill-count.has-missing { color: var(--sds-color-danger); }
.agent-skill-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.skill-chip {
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  border-radius: var(--sds-radius-pill);
  background: color-mix(in srgb, var(--co) 12%, var(--sds-color-raised));
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-chip.missing { background: color-mix(in srgb, var(--sds-color-danger) 12%, var(--sds-color-raised)); color: var(--sds-color-danger); }

.skill-registry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: var(--sds-space-3);
}
.skill-registry-card,
.dossier-skill {
  display: grid;
  align-content: start;
  gap: var(--sds-space-3);
  min-width: 0;
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  box-shadow: var(--sds-elevation-1);
}
.skill-registry-card > header,
.dossier-skill > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sds-space-3);
}
.skill-registry-card h3,
.dossier-skill h3 { margin: 0; font-size: var(--sds-type-body); overflow-wrap: anywhere; }
.skill-identity,
.dossier-skill header .mono { margin-top: 3px; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.skill-registry-card > p,
.dossier-skill > p { margin: 0; color: var(--sds-color-muted); line-height: 1.5; }
.skill-facts { display: flex; flex-wrap: wrap; gap: var(--sds-space-1); }
.skill-facts span {
  padding: 4px 8px;
  border-radius: var(--sds-radius-pill);
  background: var(--sds-color-bg);
  color: var(--sds-color-subtle);
  font-size: var(--sds-type-footnote);
}
.skill-consumers { display: grid; gap: 3px; padding-top: var(--sds-space-2); border-top: 1px solid var(--sds-color-border); font-size: var(--sds-type-footnote); }
.skill-consumers strong { color: var(--sds-color-text); }
.skill-consumers span { color: var(--sds-color-muted); }
.skill-references summary { color: var(--sds-color-muted); cursor: pointer; font-size: var(--sds-type-footnote); font-weight: 700; }
.skill-references ul { display: grid; gap: var(--sds-space-2); margin: var(--sds-space-2) 0 0; padding: 0; list-style: none; }
.skill-references li { display: grid; gap: 2px; padding: var(--sds-space-2); border-radius: var(--sds-radius-small); background: var(--sds-color-bg); font-size: var(--sds-type-footnote); }
.skill-references li .mono { color: var(--sds-color-subtle); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Dossier drawer (§4)
   -------------------------------------------------------------------------- */

/* WO-312: the SkyUI drawer frames the dossier (header, close, tabs, scrim, phone sheet);
   the console styles only what it puts inside the panel. */
.dossier-body { display: grid; gap: var(--sds-space-4); align-content: start; }
.dossier-head { display: flex; align-items: flex-start; gap: var(--sds-space-3); }
.dossier-head .caricature, .dossier-head .monogram { width: 64px; height: 64px; font-size: var(--sds-type-section); }
.dossier-head .meta { display: grid; gap: var(--sds-space-1); flex: 1; min-width: 0; }

.persona-pack-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sds-space-3);
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-small);
  background: var(--sds-color-bg);
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
}
.persona-pack-summary > div { display: grid; gap: 3px; }
.persona-pack-summary strong { color: var(--sds-color-text); overflow-wrap: anywhere; }
.dossier-skill-list { display: grid; gap: var(--sds-space-3); }
.dossier-skill { padding: var(--sds-space-3); border-radius: var(--sds-radius-small); box-shadow: none; }
.dossier-skill.missing { border-color: color-mix(in srgb, var(--sds-color-danger) 48%, var(--sds-color-border)); }
.skill-declared-as { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.dossier-skill-references { display: grid; gap: var(--sds-space-1); padding-top: var(--sds-space-2); border-top: 1px solid var(--sds-color-border); }
.dossier-skill-references > strong { font-size: var(--sds-type-footnote); }
.dossier-skill-references > div { display: grid; gap: 2px; padding: var(--sds-space-2); border-radius: var(--sds-radius-small); background: var(--sds-color-bg); font-size: var(--sds-type-footnote); }
.dossier-skill-references .mono { color: var(--sds-color-subtle); overflow-wrap: anywhere; }
.dossier-dispatch-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-3); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

.rows { display: grid; gap: 0; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small); overflow: hidden; }
.row {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--sds-space-3);
  padding: var(--sds-space-2) var(--sds-space-3);
  border-bottom: 1px solid var(--sds-color-border);
}
.row:last-child { border-bottom: 0; }
.row > .k { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.row > .v { min-width: 0; overflow-wrap: anywhere; }

.section-title {
  font-size: var(--sds-type-section-header); letter-spacing: var(--sds-tracking-none);
  color: var(--sds-color-subtle); font-weight: var(--sds-weight-semibold);
}

details.raw > summary {
  cursor: pointer; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); padding: var(--sds-space-2) 0;
}
details.raw pre {
  margin: 0; padding: var(--sds-space-3);
  background: var(--sds-color-bg); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small);
  overflow-x: auto; font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); color: var(--sds-color-muted);
}

.job-row {
  display: grid; gap: var(--sds-space-1);
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small);
  background: var(--sds-color-bg);
  /* Objectives are free text and job/message ids are unbroken tokens; in a
     480px drawer either will push the panel's own scrollbar sideways without
     this. */
  overflow-wrap: anywhere;
}
.job-row .top { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; }
.job-row .obj { font-size: var(--sds-type-body); }

form.stack { display: grid; gap: var(--sds-space-3); }
form.stack .actions { display: flex; gap: var(--sds-space-2); align-items: center; }

.note {
  padding: var(--sds-space-2) var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-left: 2px solid var(--sds-color-warning);
  border-radius: var(--sds-radius-small);
  color: var(--sds-color-muted); font-size: var(--sds-type-footnote);
  background: var(--sds-color-bg);
}

/* --------------------------------------------------------------------------
   Responsive shell — compact rail first, then a bottom navigation bar.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .main { padding: var(--sds-space-6) var(--sds-space-4) var(--sds-space-12); }
  .row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 720px) {
  .topbar { gap: var(--sds-space-2); padding-inline: var(--sds-space-3); }
  .bind-pill {
    min-width: 0;
    max-width: 52vw;
    padding-inline: var(--sds-space-3);
  }
  .bind-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #who { display: none; }
  .health .label { display: none; }

  .main { padding: var(--sds-space-6) var(--sds-space-3) var(--sds-space-8); }
  .page-head { align-items: flex-start; flex-direction: column; gap: var(--sds-space-1); }
  .page-head h1 { font-size: var(--sds-type-title); }
  .page-intro { align-items: flex-start; flex-direction: column; gap: var(--sds-space-3); }
  .page-intro h1 { font-size: var(--sds-type-title); }
  .page-intro > .btn { width: 100%; }
  .agents-intro { align-items: stretch; }
  .agent-registry-counts { justify-content: flex-start; }
  .agent-registry-counts span { flex: 1 1 140px; justify-content: center; }
  .agents-section .section-head { display: grid; }
  .agents-section .section-head > .faint { max-width: none; text-align: left; }
  .section-head { align-items: flex-start; }
  .section-head .text-action { min-height: 36px; padding-block: var(--sds-space-1); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-3); }
  .agent-card { min-height: 232px; padding-inline: var(--sds-space-2); }
  .caricature,
  .monogram { width: 88px; height: 88px; }
  .dashboard-grid,
  .stat-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sds-space-3); }
  .action-row > .btn { flex: 1 1 100%; }
  .activity-row,
  .decision-row,
  .settings-row { align-items: flex-start; }
  .decision-row,
  .settings-row { flex-direction: column; }
  .decision-row > .status-tag,
  .settings-row > span:last-child { margin-top: 0; text-align: left; }
  .row-actions { width: 100%; justify-content: stretch; }
  .row-actions > .btn { flex: 1 1 140px; }
  .capture-bar { grid-template-columns: minmax(0, 1fr); }
  .capture-bar .btn { width: 100%; }
  .iq-focus-card { align-items: flex-start; flex-wrap: wrap; }
  .iq-focus-card .row-actions { width: 100%; justify-content: stretch; }
  .iq-focus-card .row-actions .btn { flex: 1; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .dossier-dispatch-link { align-items: stretch; flex-direction: column; }
  .dossier-dispatch-link .btn { width: 100%; }
}

@media (max-width: 380px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .agent-card { min-height: 172px; }
}

/* --------------------------------------------------------------------------
   Fleet Room — the Board pane (WO-57).

   Four company columns side by side. The grid is `auto-fit` rather than a
   fixed four, because the column count is the ESTATE's, not the layout's: a
   fifth company enrolled through /api/companies has to appear here without a
   stylesheet edit, and on a laptop the four have to wrap instead of scrolling
   the page sideways.
   -------------------------------------------------------------------------- */

.page-head .grow { flex: 1; }

.room-strip {
  display: flex; flex-wrap: wrap; gap: var(--sds-space-6);
  padding: var(--sds-space-3) var(--sds-space-4);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.room-stat { display: grid; gap: 2px; }
.room-stat .n { font-size: var(--sds-type-section); font-weight: 600; letter-spacing: 0; }
.room-stat .n[data-tone="warn"] { color: var(--sds-color-warning); }
.room-stat .faint { font-size: var(--sds-type-footnote); }

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

.fleet-intro-actions { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; }
.fleet-run-list { display: grid; gap: var(--sds-space-2); }
.fleet-run-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sds-space-3);
  padding: var(--sds-space-3) var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-small);
  background: var(--sds-color-bg);
}
.fleet-run-copy { display: grid; gap: var(--sds-space-1); min-width: 0; }
.fleet-run-copy strong { color: var(--sds-color-text); overflow-wrap: anywhere; }
.fleet-run-copy > span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .fleet-intro-actions { width: 100%; }
  .fleet-intro-actions .btn { flex: 1; }
  .fleet-run-row { align-items: flex-start; flex-direction: column; }
}

.room-col {
  display: grid; gap: var(--sds-space-3); align-content: start;
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  border-top: 2px solid var(--co-col);
  min-width: 0;
}
.room-col-head { display: flex; align-items: center; gap: var(--sds-space-2); }
.room-col-head h2 { margin: 0; font-size: var(--sds-type-body); letter-spacing: 0; }
.room-col-head .co-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--co-col); flex: none;
}

.room-block { display: grid; gap: var(--sds-space-2); }

.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sds-space-1); }
.room-list li {
  display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap;
  font-size: var(--sds-type-footnote);
  /* Job titles and WO ids are unbroken tokens; without this one long title
     pushes the whole grid sideways. */
  overflow-wrap: anywhere; min-width: 0;
}
.room-list li .who { color: var(--sds-color-text); }

.room-figure { display: flex; align-items: baseline; gap: var(--sds-space-2); flex-wrap: wrap; }
.room-figure .n { font-size: var(--sds-type-headline); font-weight: 600; }
.room-figure .n[data-tone="warn"] { color: var(--sds-color-warning); }
.room-figure .dot { align-self: center; }

/* An empty answer and an unread rail must not look the same. The first is
   plain muted text; the second carries the unknown dot and the engine's own
   sentence, in the same weight as a real answer. */
.room-empty { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.room-unknown {
  display: flex; align-items: baseline; gap: var(--sds-space-2);
  color: var(--sds-color-muted); font-size: var(--sds-type-footnote);
  padding: var(--sds-space-2); border-radius: var(--sds-radius-small);
  background: var(--sds-color-bg); border: 1px dashed var(--sds-color-control-border);
}
.room-unknown .dot { align-self: center; flex: none; }

.room-platform {
  display: grid; gap: var(--sds-space-1);
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small);
  color: var(--sds-color-muted); font-size: var(--sds-type-footnote);
}
.room-wall { font-size: var(--sds-type-footnote); max-width: 90ch; }

/* --------------------------------------------------------------------------
   Fleet — agent activity first, workspace telemetry second.
   -------------------------------------------------------------------------- */

.fleet-intro { margin-bottom: 0; }
.fleet-intro > .status-tag { align-self: flex-start; }

.fleet-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sds-space-3);
  margin: 0;
}
.fleet-summary-card {
  position: relative;
  display: grid;
  gap: var(--sds-space-1);
  min-width: 0;
  padding: var(--sds-space-4);
  overflow: hidden;
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  box-shadow: var(--sds-elevation-1);
}
.fleet-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--sds-color-control-border);
}
.fleet-summary-card[data-tone="active"]::before { background: var(--sds-color-accent); }
.fleet-summary-card[data-tone="danger"]::before { background: var(--sds-color-danger); }
.fleet-summary-card[data-tone="success"]::before { background: var(--sds-color-success); }
.fleet-summary-value {
  color: var(--sds-color-text);
  font-size: var(--sds-type-large-title);
  font-weight: 700;
  line-height: var(--sds-line-tight);
  font-variant-numeric: tabular-nums;
}
.fleet-summary-card dt { color: var(--sds-color-text); font-size: var(--sds-type-footnote); font-weight: 700; }
.fleet-summary-card dd { margin: 0; }
.fleet-summary-card > dd:last-child { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.fleet-coverage { display: grid; gap: var(--sds-space-1); }
.fleet-coverage strong { color: var(--sds-color-text); }
.fleet-coverage span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

.fleet-roster-head { align-items: flex-end; }
.section-head > .fleet-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sds-space-1);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-head > .fleet-filters::-webkit-scrollbar { display: none; }
.filter-pill {
  min-height: 36px;
  padding: var(--sds-space-1) var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-pill);
  background: var(--sds-color-panel);
  color: var(--sds-color-muted);
  font: 700 var(--sds-type-footnote)/1 var(--sds-font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sds-motion-standard) var(--sds-motion-ease), background var(--sds-motion-standard) var(--sds-motion-ease), border-color var(--sds-motion-standard) var(--sds-motion-ease);
}
.filter-pill:hover { color: var(--sds-color-text); border-color: var(--sds-color-control-border); }
.filter-pill[aria-pressed="true"] {
  color: var(--sds-color-text);
  border-color: var(--sds-palette-indigo);
  background: color-mix(in srgb, var(--sds-palette-indigo) 12%, var(--sds-color-panel));
}

.fleet-agent-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sds-space-3);
}
.fleet-agent-card.agent-card {
  grid-template: auto / auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  gap: var(--sds-space-4);
  min-height: 132px;
  padding: var(--sds-space-4);
  text-align: left;
}
.fleet-agent-card .fleet-agent-portrait { display: block; }
.caricature.caricature-compact,
.monogram.monogram-compact {
  width: 72px;
  height: 72px;
  font-size: var(--sds-type-section);
}
.fleet-agent-copy {
  display: grid;
  gap: var(--sds-space-2);
  min-width: 0;
}
.fleet-agent-head {
  display: flex;
  align-items: center;
  gap: var(--sds-space-2);
  min-width: 0;
}
.fleet-agent-head .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-agent-head .status-tag { flex: none; }
.fleet-assignment {
  color: var(--sds-color-text);
  font-size: var(--sds-type-body);
  font-weight: 600;
  line-height: var(--sds-line-body);
  overflow-wrap: anywhere;
}
.fleet-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sds-space-1) var(--sds-space-2);
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
}
.fleet-meta > span + span {
  padding-left: var(--sds-space-2);
  border-left: 1px solid var(--sds-color-control-border);
}
.fleet-result-line {
  overflow: hidden;
  color: var(--sds-color-subtle);
  font-size: var(--sds-type-footnote);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-open-icon { width: 18px; height: 18px; color: var(--sds-color-subtle); }
.fleet-agent-card:hover .fleet-open-icon,
.fleet-agent-card:focus-visible .fleet-open-icon { color: var(--sds-color-accent); }

.fleet-result-row {
  display: flex;
  align-items: center;
  gap: var(--sds-space-3);
  min-height: 64px;
  padding: var(--sds-space-3) var(--sds-space-4);
  border-bottom: 1px solid var(--sds-color-border);
}
.fleet-result-row:last-child { border-bottom: 0; }
.fleet-result-row .grow { display: grid; gap: var(--sds-space-1); min-width: 0; }
.fleet-result-row .grow strong { color: var(--sds-color-text); }
.fleet-result-row .grow span {
  overflow: hidden;
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sds-space-3);
}
.fleet-workspace-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sds-space-3);
  min-height: 76px;
  padding: var(--sds-space-3) var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-top: 2px solid var(--co-col);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.fleet-workspace-card > .co-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--sds-radius-pill);
  background: var(--co-col);
}
.fleet-workspace-card > span:last-child { display: grid; gap: var(--sds-space-1); min-width: 0; }
.fleet-workspace-card strong { color: var(--sds-color-text); }
.fleet-workspace-card span span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.fleet-technical { margin-top: var(--sds-space-2); }

@media (max-width: 1040px) {
  .fleet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-agent-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .fleet-roster-head { align-items: flex-start; flex-direction: column; }
  .section-head > .fleet-filters { width: 100%; justify-content: flex-start; padding-bottom: var(--sds-space-1); }
  .fleet-agent-card.agent-card { min-height: 124px; gap: var(--sds-space-3); padding: var(--sds-space-3); }
  .fleet-result-row { align-items: flex-start; flex-wrap: wrap; }
  .fleet-result-row .grow { flex-basis: calc(100% - 24px); }
}

@media (max-width: 480px) {
  .fleet-agent-card.agent-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .fleet-open-icon { display: none; }
  .caricature.caricature-compact,
  .monogram.monogram-compact { width: 60px; height: 60px; font-size: var(--sds-type-headline); }
  .fleet-agent-head { align-items: flex-start; flex-direction: column; gap: var(--sds-space-1); }
  .fleet-agent-head .name { white-space: normal; }
}

@media (max-width: 380px) {
  .fleet-summary { grid-template-columns: minmax(0, 1fr); }
}

/* SkyLink observatory + Fleet Board live stream. The section switcher is a
   real navigation landmark rather than a thin, full-width segmented line. */
.surface-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: stretch;
  gap: var(--sds-space-2);
  width: min(100%, 900px);
  min-height: 76px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}
.surface-tabs.fleet-tabs {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  width: min(100%, 620px);
}
.surface-tabs.fleet-tabs.board-lens-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 900px);
}
.fleet-strategy-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) minmax(180px, 260px) auto;
  align-items: end;
  gap: var(--sds-space-3);
  padding: var(--sds-space-3) var(--sds-space-4);
  border: 1px solid color-mix(in srgb, var(--co) 28%, var(--sds-color-border));
  border-radius: var(--sds-radius-control);
  background: color-mix(in srgb, var(--co) 5%, var(--sds-color-panel));
}
.fleet-strategy-copy { display: grid; gap: var(--sds-space-1); min-width: 0; }
.fleet-strategy-copy strong { color: var(--sds-color-text); }
.fleet-strategy-copy small { color: var(--sds-color-muted); line-height: 1.4; }
.fleet-strategy-bar label { display: grid; gap: var(--sds-space-1); color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); font-weight: 750; }
.fleet-strategy-bar select:disabled { opacity: 0.55; cursor: not-allowed; }
.fleet-strategy-bar > .text-action { align-self: center; min-height: 44px; display: inline-flex; align-items: center; }
.execution-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  color: var(--sds-color-subtle);
  font-size: var(--sds-type-footnote);
  line-height: 1.35;
  scrollbar-width: none;
}
.execution-breadcrumb::-webkit-scrollbar { display: none; }
.execution-breadcrumb a { color: var(--sds-color-action); text-decoration: none; white-space: nowrap; }
.execution-breadcrumb a:hover,
.execution-breadcrumb a:focus-visible { text-decoration: underline; }
.execution-breadcrumb > span { white-space: nowrap; }
.breadcrumb-separator { opacity: 0.55; }
.board-room-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sds-space-2);
  max-width: 100%;
}
.board-room-chip {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: 999px;
  background: var(--sds-color-panel);
  color: var(--sds-color-text);
  font: inherit;
  cursor: pointer;
}
.board-room-chip[aria-current="page"] {
  border-color: color-mix(in srgb, var(--sds-palette-indigo) 58%, var(--sds-color-border));
  background: color-mix(in srgb, var(--sds-palette-indigo) 12%, var(--sds-color-raised));
}
.board-room-badge {
  margin-left: var(--sds-space-2);
  font-size: var(--sds-type-footnote);
  color: var(--sds-color-muted);
}
.board-agent-run-header { display: grid; gap: var(--sds-space-2); }
.board-agent-run-card {
  display: flex; flex-wrap: wrap; gap: var(--sds-space-3); align-items: center;
  padding: var(--sds-space-3); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control);
}
.board-compose, .board-work-card, .board-work-controls form {
  display: grid; gap: var(--sds-space-2);
}
.board-compose { margin-top: var(--sds-space-4); }
.board-compose textarea, .board-compose input, .board-compose select,
.board-work-controls input {
  width: 100%; min-height: 44px;
  background: var(--sds-color-bg); color: var(--sds-color-text);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control);
  padding: var(--sds-space-2) var(--sds-space-3); font: inherit;
}
.board-compose textarea { min-height: 88px; }
.board-compose-row, .board-work-controls {
  display: flex; flex-wrap: wrap; gap: var(--sds-space-2); align-items: center;
}
.board-work-controls form { flex: 1 1 220px; }
.board-work-card[data-tone="attention"] { border-left: 2px solid var(--sds-color-warning); padding-left: var(--sds-space-3); }
.board-work-card[data-tone="danger"] { border-left: 2px solid var(--sds-color-danger); padding-left: var(--sds-space-3); }
.board-work-age { font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }
.closing-chip {
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 0 var(--sds-space-2); border-radius: 999px;
  background: var(--sds-color-accent-soft); font-size: var(--sds-type-footnote);
}
.fleet-log-row.pinned { outline: 2px solid color-mix(in srgb, var(--sds-palette-indigo) 50%, transparent); }
.board-thread { margin-left: var(--sds-space-4); }
@media (max-width: 390px) {
  .surface-tabs.fleet-tabs.board-lens-tabs { width: 100%; }
  .board-compose-row, .board-work-controls { flex-direction: column; align-items: stretch; }
}
@media (max-width: 960px) {
  .fleet-strategy-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .fleet-strategy-copy { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fleet-strategy-bar { grid-template-columns: minmax(0, 1fr); }
  .fleet-strategy-copy { grid-column: auto; }
}
.surface-tabs::-webkit-scrollbar { display: none; }
.surface-tab {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--sds-space-3);
  min-height: 72px;
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: color-mix(in srgb, var(--sds-color-panel) 88%, transparent);
  color: var(--sds-color-muted);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--sds-motion-standard) var(--sds-motion-ease), background var(--sds-motion-standard) var(--sds-motion-ease), border-color var(--sds-motion-standard) var(--sds-motion-ease), transform var(--sds-motion-standard) var(--sds-motion-ease);
}
.surface-tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}
.surface-tab:hover { color: var(--sds-color-text); border-color: var(--sds-color-control-border); background: var(--sds-color-raised); transform: translateY(-1px); }
.surface-tab[aria-current="page"] {
  color: var(--sds-color-text);
  border-color: color-mix(in srgb, var(--sds-palette-indigo) 58%, var(--sds-color-border));
  background: color-mix(in srgb, var(--sds-palette-indigo) 12%, var(--sds-color-raised));
  box-shadow: var(--sds-elevation-1);
}
.surface-tab[aria-current="page"]::before { background: var(--sds-brand-gradient); }
.surface-tab-icon {
  width: 22px;
  height: 22px;
  padding: 7px;
  border-radius: var(--sds-radius-small);
  box-sizing: content-box;
  background: var(--sds-color-raised);
  color: var(--sds-color-subtle);
}
.surface-tab[aria-current="page"] .surface-tab-icon { background: var(--sds-color-accent-soft); color: var(--sds-color-on-accent-soft); }
.surface-tab-copy { display: grid; gap: var(--sds-space-1); min-width: 0; }
.surface-tab-copy strong { color: inherit; font-size: var(--sds-type-footnote); font-weight: 800; }
.surface-tab-copy small { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.active-fleet-board {
  border-color: color-mix(in srgb, var(--sds-palette-electric-blue) 38%, var(--sds-color-border));
  background: linear-gradient(140deg, color-mix(in srgb, var(--sds-palette-electric-blue) 7%, var(--sds-color-panel)), var(--sds-color-panel) 54%);
}
.active-fleet-board .section-head p { margin: var(--sds-space-1) 0 0; color: var(--sds-color-muted); }
.active-fleet-board .fleet-coverage { margin-top: var(--sds-space-3); }

.fleet-live { gap: var(--sds-space-4); }
.fleet-live-head { align-items: flex-start; }
.fleet-live-head p,
.master-list + p { margin: var(--sds-space-1) 0 0; color: var(--sds-color-muted); }
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sds-space-2);
  min-height: 36px;
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
  white-space: nowrap;
}
.live-indicator .dot { background: var(--sds-color-success); }
.fleet-live-filters {
  display: flex;
  gap: var(--sds-space-1);
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: var(--sds-space-1);
  scrollbar-width: none;
}
.fleet-live-filters::-webkit-scrollbar { display: none; }
.fleet-live-filters .filter-pill { min-height: 44px; }
.fleet-log-list { display: grid; gap: var(--sds-space-2); }
.fleet-log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sds-space-3);
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.fleet-log-avatar,
.session-agent-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--sds-palette-indigo) 55%, var(--sds-color-border));
  border-radius: var(--sds-radius-pill);
  background: color-mix(in srgb, var(--sds-palette-indigo) 14%, var(--sds-color-raised));
  color: var(--sds-color-text);
  font-size: var(--sds-type-footnote);
  font-weight: 800;
}
.fleet-log-copy { display: grid; gap: var(--sds-space-2); min-width: 0; }
.fleet-log-head { display: flex; align-items: baseline; gap: var(--sds-space-2); flex-wrap: wrap; }
.fleet-log-head strong { color: var(--sds-color-text); }
.fleet-log-head span { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.fleet-log-copy h3 { margin: 0; color: var(--sds-color-text); font-size: var(--sds-type-body); }
.fleet-log-copy > p {
  margin: 0;
  color: var(--sds-color-muted);
  line-height: var(--sds-line-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fleet-log-kind { margin-top: var(--sds-space-1); }
.fleet-log-details { margin-top: var(--sds-space-1); }

.skylink-view { display: grid; gap: var(--sds-space-6); min-width: 0; }
.org-map { display: grid; gap: var(--sds-space-6); min-width: 0; font-size: var(--sds-type-body); }
.org-map h3 { margin: 0; color: var(--sds-color-text); font-size: var(--sds-type-section); line-height: 1.4; }
.org-map p { margin: 0; color: var(--sds-color-muted); line-height: var(--sds-line-body); }
.org-tree { display: grid; justify-items: center; padding-top: var(--sds-space-2); }
.org-node {
  min-width: 0;
  padding: var(--sds-space-6);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  text-align: center;
  overflow-wrap: anywhere;
}
.org-node p { margin-top: var(--sds-space-2); }
.org-owner { width: min(100%, 440px); }
.org-controller { width: min(100%, 680px); background: var(--sds-tone-indigo-wash); border-color: var(--sds-palette-neon-magenta); }
.main .org-controller h3 { font-size: var(--sds-type-title); }
.org-label { display: block; margin-bottom: var(--sds-space-2); color: var(--sds-color-muted); font-size: var(--sds-type-control); }
.org-stem { width: 1px; height: var(--sds-space-6); background: var(--sds-color-control-border); }
.org-responsibilities { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sds-space-2) var(--sds-space-4); padding: 0; margin: var(--sds-space-4) 0 0; list-style: none; font-size: var(--sds-type-control); }
.org-companies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sds-space-3); width: 100%; padding: var(--sds-space-6) 0 0; margin: 0; list-style: none; border-top: 1px solid var(--sds-color-control-border); }
.org-companies > li { position: relative; display: grid; align-content: center; padding: var(--sds-space-4); }
.org-companies > li::before { content: ""; position: absolute; width: 1px; height: var(--sds-space-6); top: calc(-1 * var(--sds-space-6)); left: 50%; background: var(--sds-color-control-border); }
.org-map .org-note { margin-top: var(--sds-space-4); }
.org-explainer { min-width: 0; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); }
.org-explainer > summary { padding: var(--sds-space-4) var(--sds-space-6); color: var(--sds-color-text); cursor: pointer; }
.org-explainer > summary > span { display: inline-grid; gap: var(--sds-space-1); vertical-align: middle; max-width: calc(100% - 24px); }
.org-explainer > summary strong { font-size: var(--sds-type-body); }
.org-explainer > summary > span > span { color: var(--sds-color-muted); font-size: var(--sds-type-control); line-height: var(--sds-line-body); }
.org-explainer[open] > summary { border-bottom: 1px solid var(--sds-color-border); }
.org-explainer-body { display: grid; gap: var(--sds-space-4); padding: var(--sds-space-6); min-width: 0; }
.org-workflow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.org-workflow > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sds-space-4); position: relative; padding-bottom: var(--sds-space-6); }
.org-workflow > li:last-child { padding-bottom: 0; }
.org-workflow > li:not(:last-child)::before { content: ""; position: absolute; top: 36px; bottom: 0; left: 17px; width: 1px; background: var(--sds-color-control-border); }
.org-workflow p { margin-top: var(--sds-space-1); }
.org-step-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--sds-color-control-border); border-radius: var(--sds-radius-pill); background: var(--sds-color-accent-soft); color: var(--sds-color-text); font-size: var(--sds-type-control); }
.org-approval { display: grid; gap: var(--sds-space-1); margin-top: var(--sds-space-3); padding: var(--sds-space-3) var(--sds-space-4); border-left: 2px solid var(--sds-color-warning); background: var(--sds-color-raised); font-size: var(--sds-type-control); line-height: var(--sds-line-body); }
.org-approval span { color: var(--sds-color-muted); }
.org-map .org-loop { border-top: 1px solid var(--sds-color-border); padding-top: var(--sds-space-4); color: var(--sds-color-text); }
.org-map .org-plan-label { color: var(--sds-color-warning); font-size: var(--sds-type-control); }
.org-route-source { max-width: 680px; width: 100%; justify-self: center; }
.org-route-source + .org-stem { justify-self: center; margin: calc(-1 * var(--sds-space-4)) 0; height: calc(var(--sds-space-4) * 2); }
.org-vaults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-4); }
@media (max-width: 900px) {
  .org-companies { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sds-space-6); }
}
@media (max-width: 540px) {
  .org-node, .org-explainer-body { padding: var(--sds-space-4); }
  .org-companies, .org-vaults { grid-template-columns: minmax(0, 1fr); }
  .org-explainer > summary { padding: var(--sds-space-4); }
}
.context-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sds-space-2);
}
.context-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sds-space-3);
  min-height: 142px;
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.context-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 36px;
  right: calc(var(--sds-space-2) * -1 - 1px);
  width: var(--sds-space-2);
  height: 1px;
  background: var(--sds-color-control-border);
}
.context-step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sds-radius-pill);
  background: var(--sds-color-accent-soft);
  color: var(--sds-color-text);
  font-size: var(--sds-type-footnote);
  font-weight: 800;
}
.context-step > div { display: grid; align-content: start; gap: var(--sds-space-2); min-width: 0; }
.context-step-label { color: var(--sds-color-subtle); font-size: var(--sds-type-section-header); font-weight: var(--sds-weight-semibold); letter-spacing: var(--sds-tracking-none); }
.context-step strong { color: var(--sds-color-text); overflow-wrap: anywhere; }
.context-step > div > span:last-child { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); line-height: var(--sds-line-body); }

.skylink-session-list,
.master-list { display: grid; gap: var(--sds-space-2); }
.skylink-session,
.master-row {
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.skylink-session > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sds-space-3);
  min-height: 76px;
  padding: var(--sds-space-3) var(--sds-space-4);
  cursor: pointer;
  list-style: none;
}
.skylink-session > summary::-webkit-details-marker { display: none; }
.skylink-session[open] { border-color: var(--sds-color-control-border); }
.session-primary { display: grid; gap: var(--sds-space-1); min-width: 0; }
.session-primary strong { color: var(--sds-color-text); }
.session-primary span,
.session-when { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.session-when { white-space: nowrap; }
.skylink-session-body {
  display: grid;
  gap: var(--sds-space-3);
  padding: 0 var(--sds-space-4) var(--sds-space-4) calc(var(--sds-space-4) + 40px + var(--sds-space-3));
}
.session-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sds-space-2);
}
.session-context-grid > div {
  display: grid;
  gap: var(--sds-space-1);
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-small);
  background: var(--sds-color-bg);
}
.session-context-grid span,
.session-context-grid small { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.session-context-grid strong { color: var(--sds-color-text); overflow-wrap: anywhere; }
.session-context-locked { display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-3); color: var(--sds-color-muted); }

.master-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sds-space-3);
  min-height: 84px;
  padding: var(--sds-space-3) var(--sds-space-4);
}
.master-row > div { display: grid; gap: var(--sds-space-1); min-width: 0; }
.master-row > div strong { color: var(--sds-color-text); }
.master-row > div span,
.master-version { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.master-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 var(--sds-space-2);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-pill);
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
  font-weight: 800;
  white-space: nowrap;
}
.master-kind[data-loading="boot"] { border-color: color-mix(in srgb, var(--sds-palette-neon-cyan) 48%, var(--sds-color-border)); color: var(--sds-color-success); }
.master-kind[data-loading="company"] { border-color: color-mix(in srgb, var(--sds-palette-indigo) 48%, var(--sds-color-border)); color: var(--sds-tone-indigo-fg); }
.master-row > .technical-panel { margin: 0; }

@media (max-width: 1040px) {
  .context-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-step:nth-child(2)::after { display: none; }
}

@media (max-width: 720px) {
  .surface-tabs {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(210px, 1fr);
    width: calc(100% + var(--sds-space-2));
    margin-inline: calc(var(--sds-space-2) * -1);
    padding-inline: var(--sds-space-2);
  }
  .surface-tabs.fleet-tabs { grid-template-columns: none; width: calc(100% + var(--sds-space-2)); }
  .fleet-live-head { align-items: flex-start; flex-direction: column; }
  .fleet-log-row { grid-template-columns: auto minmax(0, 1fr); }
  .fleet-log-kind { grid-column: 2; justify-self: start; }
  .context-path,
  .session-context-grid { grid-template-columns: minmax(0, 1fr); }
  .context-step { min-height: 0; }
  .context-step::after { display: none; }
  .skylink-session > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .session-when { grid-column: 2; }
  .skylink-session-body { padding-left: var(--sds-space-4); }
  .master-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .master-kind { justify-self: start; }
  .master-row > div { grid-column: 1 / -1; }
  .master-row > .technical-panel { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .surface-tab { min-height: 66px; padding: var(--sds-space-2) var(--sds-space-3); }
  .fleet-log-row { padding: var(--sds-space-3); }
  .session-agent-mark { width: 36px; height: 36px; }
  .skylink-session > summary { padding: var(--sds-space-3); }
  .skylink-session > summary .status-tag { grid-column: 2; justify-self: start; }
  .session-when { grid-column: 2; }
}

/* WO-107 — company workspace + Sites observatory */
.workspace-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--sds-space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.workspace-actions .btn { flex: 0 1 auto; white-space: normal; text-align: center; }
.company-workspace { display: grid; gap: var(--sds-space-4); min-width: 0; }
.topbar-company { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sds-color-text); font-weight: 700; }
.topbar-company .co-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sds-palette-neon-cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--sds-palette-neon-cyan) 75%, transparent); }
.development-stack { display: grid; gap: var(--sds-space-6); }
.refresh-status { min-height: 24px; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); text-align: right; }

.company-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sds-space-4); min-width: 0; }
.company-header-actions { display: flex; align-items: center; gap: var(--sds-space-3); flex-wrap: wrap; justify-content: flex-end; }
.company-header h1 {
  margin: 0;
  font-size: var(--sds-type-large-title);
  line-height: 1.05;
  letter-spacing: -0.04em;
  background: var(--sds-brand-gradient);
  color: transparent;
  background-clip: text;
}
.company-header p { margin: 8px 0 0; color: var(--sds-color-muted); }
.bound-state {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--sds-color-control-border);
  background: var(--sds-color-raised);
  border-radius: var(--sds-radius-pill);
  padding: 10px 14px;
  color: var(--sds-color-text);
  font-size: var(--sds-type-footnote);
  white-space: nowrap;
}
.bound-state span { width: 8px; height: 8px; border-radius: 50%; background: var(--sds-palette-neon-cyan); box-shadow: 0 0 10px var(--sds-palette-neon-cyan); }
/* Company tabs — a segmented control (WO-205): gray track, white selected
   segment with a soft shadow. Replaces the filled pill tabs. */
.company-tabs {
  display: inline-flex; align-items: center; gap: 2px;
  /* Visible overflow: the More menu is absolutely positioned inside this strip and a
     scrolling strip clipped it to nothing (UX-003). Phones scroll the strip instead. */
  overflow: visible; min-width: 0; max-width: 100%;
  padding: 2px; border-radius: 9px;
  background: var(--sds-color-fill-gray);
  scrollbar-width: none;
}
.company-tabs button, .company-more summary {
  min-height: 28px; min-width: 92px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--sds-color-text);
  padding: 4px 12px;
  font-size: var(--sds-type-callout);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.company-tabs button.active, .company-tabs button[aria-current="page"] {
  color: var(--sds-color-text);
  background: var(--sds-color-group);
  box-shadow: var(--sds-shadow-segment);
  font-weight: 600;
}
.company-more { position: relative; }
.company-more summary { list-style: none; cursor: pointer; }
.company-more summary::-webkit-details-marker { display: none; }
.company-more-menu {
  position: absolute; z-index: 8; right: 0; top: calc(100% + 6px);
  min-width: 180px;
  display: grid; gap: 4px;
  padding: 8px;
  background: var(--sds-color-raised);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-control);
}
.company-more-menu button { width: 100%; text-align: left; border-radius: var(--sds-radius-small); }
.company-overview { display: grid; gap: var(--sds-space-3); }
.knowledge-pane { display: grid; gap: var(--sds-space-4); min-width: 0; }
.knowledge-search {
  display: grid;
  gap: var(--sds-space-2);
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-raised);
}
.knowledge-search > label { color: var(--sds-color-text); font-weight: 700; }
.knowledge-search-controls { display: flex; gap: var(--sds-space-2); min-width: 0; }
.knowledge-search-controls input { min-width: 0; min-height: var(--sds-size-control); flex: 1; }
.knowledge-search-state,
.knowledge-result-summary { display: grid; gap: var(--sds-space-1); color: var(--sds-color-muted); }
.knowledge-results { display: grid; gap: var(--sds-space-3); }
.knowledge-section-heading h2 { margin: 0 0 var(--sds-space-2); font-size: var(--sds-type-body); }
.overview-sites-callout {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-4);
  padding: var(--sds-space-6);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-tone-blue-wash);
}
.overview-sites-callout h2 { margin: 4px 0; font-size: var(--sds-type-title); }
.overview-sites-callout p { margin: 0; color: var(--sds-color-muted); max-width: 62ch; }

.sites-surface { display: grid; gap: var(--sds-space-4); min-width: 0; }
.sites-intro { display: flex; align-items: end; justify-content: space-between; gap: var(--sds-space-4); min-width: 0; }
.sites-intro h2 { margin: 6px 0; font-size: var(--sds-type-title); letter-spacing: -0.04em; }
.sites-intro p { margin: 0; color: var(--sds-color-muted); max-width: 68ch; }
.principle { border-left: 2px solid var(--sds-palette-neon-cyan); padding-left: 16px; max-width: 280px; }
.freshness-banner {
  border: 1px solid var(--sds-color-border);
  background: var(--sds-color-panel);
  border-radius: var(--sds-radius-small);
  padding: 11px 14px;
  color: var(--sds-color-muted);
  font-size: var(--sds-type-footnote);
}
.freshness-banner b { color: var(--sds-color-text); }
.summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sds-space-3); }
.summary-grid article {
  min-height: 124px; min-width: 0;
  display: grid; align-content: start; gap: 4px;
  padding: var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.summary-grid strong { font-size: var(--sds-type-large-title); }
.summary-grid span { font-weight: 700; }
.summary-grid small { color: var(--sds-color-muted); }
.summary-grid .attention { border-color: color-mix(in srgb, var(--sds-palette-hot-pink) 40%, var(--sds-color-border)); }
.observatory-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sds-space-3); min-width: 0; }
.mode-switch, .view-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-switch button, .view-switch button, .filters summary, .search, .card-actions .btn, .detail-tabs button {
  min-height: 44px;
}
.mode-switch button, .view-switch button {
  border: 1px solid var(--sds-color-control-border);
  background: var(--sds-color-panel);
  color: var(--sds-color-muted);
  border-radius: var(--sds-radius-small);
  padding: 8px 12px;
  font-weight: 700;
}
.mode-switch button.active, .view-switch button.active {
  color: var(--sds-color-text);
  border-color: color-mix(in srgb, var(--sds-palette-indigo) 50%, var(--sds-color-border));
  background: color-mix(in srgb, var(--sds-palette-indigo) 18%, var(--sds-color-panel));
}
.provider-mini { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.provider-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.provider-dot.available { background: var(--sds-palette-neon-cyan); box-shadow: 0 0 8px var(--sds-palette-neon-cyan); }
.toolbar { display: flex; align-items: center; gap: var(--sds-space-3); flex-wrap: wrap; min-width: 0; }
.search { flex: 1; min-width: 180px; }
.search input {
  width: 100%; min-height: 44px;
  border: 1px solid var(--sds-color-control-border);
  background: var(--sds-color-panel);
  color: var(--sds-color-text);
  border-radius: var(--sds-radius-small);
  padding: 0 12px;
}
.filters { position: relative; }
.filters summary {
  list-style: none; cursor: pointer;
  border: 1px solid var(--sds-color-control-border);
  background: var(--sds-color-panel);
  border-radius: var(--sds-radius-small);
  padding: 10px 13px;
  font-weight: 650;
}
.filters summary::-webkit-details-marker { display: none; }
.filter-popover {
  position: absolute; z-index: 12; right: 0; top: calc(100% + 8px);
  width: min(320px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px;
  background: var(--sds-color-raised);
  border: 1px solid var(--sds-color-control-border);
  border-radius: var(--sds-radius-control);
}
.filter-popover label { display: grid; gap: 6px; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); font-weight: 700; }
.filter-popover select, .filter-popover button {
  width: 100%; min-width: 0; min-height: 40px;
  background: var(--sds-color-panel); color: var(--sds-color-text);
  border: 1px solid var(--sds-color-control-border); border-radius: var(--sds-radius-small);
}
.filter-popover .attention-check, .filter-popover button { grid-column: 1 / -1; }
.result-line { margin: 0; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sds-space-3); }
.system-card {
  display: flex; flex-direction: column; min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sds-color-border);
  background: var(--sds-color-panel);
  border-radius: var(--sds-radius-control);
}
.card-preview, .system-visual { height: 150px; position: relative; overflow: hidden; background: var(--sds-color-bg); }
.card-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-preview span {
  position: absolute; left: 14px; bottom: 12px;
  border: 1px solid var(--sds-color-control-border);
  background: color-mix(in srgb, var(--sds-color-bg) 75%, transparent);
  border-radius: var(--sds-radius-pill);
  padding: 5px 8px;
  font-size: var(--sds-type-section-header); letter-spacing: var(--sds-tracking-none); font-weight: var(--sds-weight-semibold);
}
.system-visual { display: grid; align-content: end; padding: 18px; }
.visual-operations { background: color-mix(in srgb, var(--sds-palette-electric-blue) 10%, var(--sds-color-raised)); }
.visual-development { background: color-mix(in srgb, var(--sds-palette-neon-magenta) 10%, var(--sds-color-raised)); }
.system-visual span { font-size: var(--sds-type-title); font-weight: 800; letter-spacing: -0.04em; }
.system-visual small { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); letter-spacing: var(--sds-tracking-none); }
.system-body { display: flex; flex-direction: column; flex: 1; padding: var(--sds-space-4); min-width: 0; }
.system-kicker { display: flex; gap: 7px; align-items: center; color: var(--sds-color-muted); font-size: var(--sds-type-section-header); letter-spacing: var(--sds-tracking-none); font-weight: var(--sds-weight-semibold); }
.system-card h3 { margin: 10px 0 8px; font-size: var(--sds-type-section); }
.system-card p { margin: 0; color: var(--sds-color-muted); line-height: 1.45; }
.status-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.status-chip, .deployment-chip, .authority {
  border-radius: var(--sds-radius-pill);
  padding: 5px 8px;
  font-size: var(--sds-type-footnote); font-weight: 750;
  border: 1px solid var(--sds-color-control-border);
  color: var(--sds-color-muted);
}
.status-chip.good { color: var(--sds-color-success); border-color: var(--sds-color-success); background: var(--sds-color-success-bg); }
.status-chip.bad { color: var(--sds-color-danger); border-color: var(--sds-color-danger); background: var(--sds-color-danger-bg); }
.status-chip.unknown { color: var(--sds-color-unknown); background: var(--sds-color-unknown-bg); }
.attention-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sds-palette-hot-pink); margin-left: auto; }
.system-card dl { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--sds-color-border); display: grid; gap: 8px; }
.system-card dl div, .facts dl div, .specimen dl div { display: flex; justify-content: space-between; gap: 12px; }
.system-card dt, .facts dt, .specimen dt { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.system-card dd, .facts dd, .specimen dd { margin: 0; text-align: right; font-size: var(--sds-type-footnote); }
.evidence-line { margin-top: 13px; padding: 10px; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small); background: var(--sds-color-bg); font-size: var(--sds-type-footnote); color: var(--sds-color-subtle); }
.evidence-line b { display: block; color: var(--sds-color-text); }
.card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.launch-unavailable { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.sites-empty {
  min-height: 220px;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px;
  padding: var(--sds-space-6);
  border: 1px dashed var(--sds-color-control-border);
  border-radius: var(--sds-radius-control);
  color: var(--sds-color-muted);
}
.sites-empty strong { color: var(--sds-color-text); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--sds-space-4); }
.section-heading h3 { margin: 4px 0 0; font-size: var(--sds-type-title); }
.section-heading > span { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); max-width: 390px; text-align: right; }
.flow-wrap { position: relative; min-height: 460px; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control); overflow: hidden; background: var(--sds-color-bg); }
.estate-map { width: 100%; height: 460px; display: block; }
.estate-edge { stroke: color-mix(in srgb, var(--sds-palette-indigo) 70%, var(--sds-palette-white)); stroke-width: 1.5; }
.estate-edge.unknown { stroke: var(--sds-color-subtle); stroke-dasharray: 5 5; }
.estate-node {
  position: absolute; width: 176px; min-height: 78px;
  display: grid; gap: 3px; align-content: center;
  padding: 13px; text-align: left;
  border: 1px solid var(--sds-color-control-border);
  background: var(--sds-color-panel);
  border-radius: 12px;
}
.estate-node.selected { border-color: var(--sds-palette-neon-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sds-palette-neon-cyan) 20%, transparent); }
.estate-node small { color: var(--sds-color-subtle); font-size: var(--sds-type-section-header); letter-spacing: var(--sds-tracking-none); font-weight: var(--sds-weight-semibold); }
.estate-node strong { font-size: var(--sds-type-headline); }
.estate-node span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.map-legend { position: absolute; right: 14px; bottom: 14px; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); display: flex; gap: 14px; }
.edge-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sds-space-3); }
.edge-evidence article, .detail-card, .location-cards article, .specimen {
  border: 1px solid var(--sds-color-border);
  background: var(--sds-color-panel);
  border-radius: var(--sds-radius-control);
  padding: var(--sds-space-4);
  min-width: 0;
}
.location-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.location-summary span, .location-table { border: 1px solid var(--sds-color-border); background: var(--sds-color-panel); border-radius: var(--sds-radius-small); }
.location-summary span { padding: 9px 11px; font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }
.location-table { overflow: hidden; }
.location-head, .location-row {
  display: grid; grid-template-columns: 1.1fr 1.8fr .7fr .8fr; gap: 12px;
  align-items: center; padding: 12px 16px; width: 100%; text-align: left;
}
.location-head { background: var(--sds-color-raised); color: var(--sds-color-subtle); font-size: var(--sds-type-section-header); letter-spacing: var(--sds-tracking-none); font-weight: var(--sds-weight-semibold); }
.location-row { border: 0; border-top: 1px solid var(--sds-color-border); background: transparent; color: inherit; }
.location-row small { display: block; color: var(--sds-color-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authority.authoritative { color: var(--sds-color-success); background: var(--sds-color-success-bg); }
.authority.unknown { color: var(--sds-color-unknown); background: var(--sds-color-unknown-bg); }
.recent-strip { display: grid; grid-template-columns: 1fr repeat(4, minmax(0, 1.2fr)); gap: var(--sds-space-3); border-top: 1px solid var(--sds-color-border); padding-top: var(--sds-space-4); }
.recent-strip h3 { margin: 5px 0; }
.recent-strip article { border-left: 1px solid var(--sds-color-border); padding-left: 12px; min-width: 0; }
.recent-strip p, .recent-strip small { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }

.detail-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--sds-color-subtle); }
.passport-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sds-space-6); }
.passport-hero h2 { margin: 8px 0; font-size: var(--sds-type-title); letter-spacing: -0.04em; }
.passport-hero p { margin: 0; color: var(--sds-color-muted); max-width: 72ch; }
.passport-label { color: var(--sds-tone-indigo-fg); font-size: var(--sds-type-section-header); letter-spacing: var(--sds-tracking-none); font-weight: var(--sds-weight-semibold); }
.passport-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.passport-badges span { border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-pill); padding: 6px 9px; font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }
.hero-status { min-width: 230px; display: grid; gap: 6px; padding: 16px; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); }
.detail-tabs { display: flex; gap: 8px; overflow: auto; border-bottom: 1px solid var(--sds-color-border); }
.detail-tabs button {
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--sds-color-subtle); padding: 12px 3px; margin-right: 16px; font-weight: 750;
}
.detail-tabs button.active { color: var(--sds-color-text); border-color: var(--sds-palette-indigo); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sds-space-4); }
.detail-layout > section, .detail-layout > aside { display: grid; gap: var(--sds-space-3); align-content: start; }
.status-dimensions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.status-dimensions article { border: 1px solid var(--sds-color-border); background: var(--sds-color-panel); border-radius: var(--sds-radius-control); padding: 15px; display: grid; gap: 5px; }
.environment-row { display: grid; grid-template-columns: 1.4fr .7fr .7fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--sds-color-border); padding: 13px 0; }
.data-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.data-flow > div { display: flex; flex-wrap: wrap; gap: 6px; }
.data-flow span { border: 1px solid var(--sds-color-border); border-radius: 7px; padding: 6px 8px; font-size: var(--sds-type-footnote); }
.specimen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sds-space-3); }
.specimen { padding: 0; overflow: hidden; }
.specimen-image { height: 210px; position: relative; background: var(--sds-color-bg); }
.specimen-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.specimen-image span { position: absolute; left: 10px; bottom: 10px; background: color-mix(in srgb, var(--sds-color-bg) 80%, transparent); border-radius: var(--sds-radius-pill); padding: 5px 8px; font-size: var(--sds-type-footnote); }
.specimen > div:last-child { padding: 15px; }
.unknown-text { color: var(--sds-color-unknown); }
.dam-warnings, .credentials-note {
  display: grid; gap: 4px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--sds-palette-hot-pink) 35%, var(--sds-color-border));
  background: color-mix(in srgb, var(--sds-palette-hot-pink) 8%, var(--sds-color-panel));
  border-radius: var(--sds-radius-small);
}
.timeline { border-left: 1px solid var(--sds-color-border); margin: 20px 0 0 10px; }
.timeline article { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 0 0 26px 24px; }
.timeline-dot { position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--sds-palette-indigo); }
.location-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-3); }
.location-cards code { display: block; word-break: break-all; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.launch-list, .launch-row { display: grid; gap: 8px; }
.system-passport { display: grid; gap: var(--sds-space-4); min-width: 0; }

@media (max-width: 1240px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-grid, .specimen-grid, .edge-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-strip { grid-template-columns: 1fr 1fr 1fr; }
  .recent-strip > div { grid-column: 1 / -1; }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-head, .location-row { grid-template-columns: 1.1fr 1.5fr .7fr; }
  .location-head span:last-child, .location-row > span:last-child { display: none; }
}
@media (max-width: 768px) {
  .knowledge-search-controls { align-items: stretch; flex-direction: column; }
  .sites-intro, .passport-hero, .overview-sites-callout, .observatory-row, .section-heading { flex-direction: column; align-items: flex-start; }
  .principle, .section-heading > span { max-width: none; text-align: left; }
  .company-header { flex-wrap: wrap; }
  .system-grid, .specimen-grid, .edge-evidence, .location-cards, .recent-strip { grid-template-columns: minmax(0, 1fr); }
  .filter-popover { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .location-head, .location-row { grid-template-columns: 1fr 1.4fr; }
  .location-head span:nth-child(n+3), .location-row > span:nth-child(n+3) { display: none; }
  .flow-wrap, .estate-map { height: 420px; }
  .estate-node { transform: scale(0.86); transform-origin: top left; }
  .timeline article { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 390px) {
  .summary-grid, .status-dimensions { grid-template-columns: minmax(0, 1fr); }
  .company-tabs { margin-right: -8px; }
  .bound-state { width: 100%; }
}

/* Learning view (Learning Loop receipts) */
.learning-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin-bottom: 12px; }
.learning-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.learning-excerpt {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: var(--sds-type-footnote); line-height: 1.5; white-space: pre-wrap; overflow-x: auto;
}
.learning-candidates {
  margin-top: var(--sds-space-3);
  padding: 0 var(--sds-space-4);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
}
.learning-candidates > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}
.learning-candidates .capability-grid { padding-bottom: var(--sds-space-4); }

/* --------------------------------------------------------------------------
   "New version ready" bar (Wave B, phone economics)

   The service worker no longer activates on its own, so this is how an update
   is offered. It is NON-BLOCKING by design: no scrim, no focus trap. The host
   is an in-flow shell row above `#main`, so the bar cannot cover SkyLink
   company tiles. Dismiss is remembered for this tab.
   -------------------------------------------------------------------------- */
.sw-update-host { grid-area: banner; min-width: 0; }
/* WO-312: the offer is a SkyUI banner (views/update-banner.mjs), in flow in this host. */
.sw-update-host:not([hidden]) {
  display: block;
  padding: var(--sds-space-2) var(--sds-space-4);
}

/* ==========================================================================
   Wave B — needs-me: the incidents strip, the five columns (the rail badge is SkyUI's pip, WO-312)
   ========================================================================== */

.stat-card[data-tone="attention"] { border-color: var(--sds-color-warning); }

/* --- incidents strip ------------------------------------------------------ */
.incident-strip {
  display: grid; gap: var(--sds-space-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.incident-chip {
  display: grid; gap: var(--sds-space-2);
  padding: var(--sds-space-3) var(--sds-space-4);
  border: 1px solid var(--sds-color-border); border-left-width: 3px;
  border-radius: var(--sds-radius-control);
  background: var(--sds-color-panel);
  font-size: var(--sds-type-footnote);
}
/* Severity is the ENGINE's (30m push / 90m page) — this only paints it. */
.incident-chip[data-severity="log"] { border-left-color: var(--sds-color-subtle); }
.incident-chip[data-severity="push"] { border-left-color: var(--sds-color-warning); }
.incident-chip[data-severity="page"] { border-left-color: var(--sds-color-danger); }
.incident-chip-head { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; }
/* Conditions arrive snake_cased from the fold ("no_progress"). The view
   un-snakes them; this only lifts the first letter, so "no progress" does not
   come out as the Title Case "No Progress". */
.incident-chip strong { color: var(--sds-color-text); }
.incident-chip strong::first-letter { text-transform: capitalize; }
.incident-chip span { color: var(--sds-color-muted); }
.incident-chip p { margin: 0; color: var(--sds-color-muted); }

/* --- the five columns ----------------------------------------------------- */
/* Preserve all five workflow columns without squeezing cards below a readable
   width. The grid wraps from the available content width instead of the whole
   viewport, so an expanded rail or native window cannot clip the last state. */
.activity-columns {
  display: grid; gap: var(--sds-space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
}
.activity-column {
  display: grid; gap: var(--sds-space-2); align-content: start;
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-control);
  background: var(--sds-color-bg);
  min-width: 0;
}
.activity-column-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sds-space-2); }
.activity-column-head strong { color: var(--sds-color-text); font-size: var(--sds-type-body); }
.activity-column-head small { flex: 1 1 100%; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.activity-column-head .status-tag { flex: 0 0 auto; }
.activity-column-count { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-variant-numeric: tabular-nums; }
.activity-column-list { display: grid; gap: var(--sds-space-2); }
.activity-column-empty { margin: 0; font-size: var(--sds-type-footnote); }
.activity-card {
  display: grid; gap: var(--sds-space-1);
  padding: var(--sds-space-2) var(--sds-space-3);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-small);
  background: var(--sds-color-panel);
  font-size: var(--sds-type-footnote);
}
.activity-card[data-needs-me="true"] { border-color: var(--sds-color-warning); }
/* Grid, not a space-between flex row: at column width the tag was stealing
   inline space from the title and shredding it into four-word lines. */
.activity-card-head { display: grid; gap: var(--sds-space-1); justify-items: start; }
.activity-card-head strong { color: var(--sds-color-text); }
.activity-card-meta { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

.needs-me-row[data-column="blocked"] { border-left: 2px solid var(--sds-color-danger); }
.needs-me-row[data-column="needs_input"] { border-left: 2px solid var(--sds-color-warning); }

@media (max-width: 1100px) {
  .activity-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .activity-columns { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Deep-link post bar (Wave B, slice 5)

   Sits above the feed and always carries a sentence about the post a link
   named — found, elsewhere, or missing. It is a row rather than a stack so the
   dismiss control stays on the same line as the message at desktop widths, and
   wraps under it on a phone rather than squeezing the text to two words.
   -------------------------------------------------------------------------- */
.board-post-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sds-space-3);
  flex-wrap: wrap;
}
.board-post-bar > span { min-width: 0; }
.board-post-bar .btn { flex: none; }

/* WO-154 Missions portfolio */
.work-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) minmax(220px,2fr) auto;gap:var(--sds-space-3);align-items:end;margin-block:var(--sds-space-5)}
.work-filters label,.work-editor label,.work-create label,.work-collaboration label{display:grid;gap:var(--sds-space-1);font-size:var(--sds-type-footnote);color:var(--sds-color-muted)}
.work-filters select,.work-filters input,.work-editor input,.work-editor select,.work-editor textarea,.work-create input,.work-create select,.work-create textarea,.work-collaboration textarea{min-height:var(--sds-size-control);width:100%}
.saved-filter-form,.saved-filter-list{display:flex;align-items:end;flex-wrap:wrap;gap:var(--sds-space-2);margin-block:var(--sds-space-2)}.saved-filter-form label{display:grid;gap:var(--sds-space-1);min-width:min(100%,240px);font-size:var(--sds-type-footnote);color:var(--sds-color-muted)}.saved-filter-form input{min-height:var(--sds-size-control)}.saved-filter-list>span{display:inline-flex;align-items:center;gap:var(--sds-space-1)}
.work-search{min-width:0}.view-toggle{display:flex;gap:var(--sds-space-2);align-items:center;flex-wrap:wrap;margin-block-end:var(--sds-space-5)}.view-toggle>button{min-height:var(--sds-size-control);padding-inline:var(--sds-space-4);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-control);background:var(--sds-color-panel);color:var(--sds-color-text);font:inherit;font-weight:700;cursor:pointer}
.view-toggle>button[aria-pressed="true"]{background:var(--sds-color-action);color:var(--sds-color-on-action);border-color:var(--sds-color-action)}
.work-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:var(--sds-space-5);align-items:start;min-width:0}.work-layout:not(:has(.work-detail)){grid-template-columns:1fr}
.work-groups{display:grid;gap:var(--sds-space-6);min-width:0}.work-layout.is-board .work-groups{grid-template-columns:repeat(4,minmax(220px,1fr));align-items:start;overflow-x:auto}
.work-group{min-width:0}.mission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sds-space-3)}.is-board .mission-grid{grid-template-columns:1fr}
.mission-card,.work-row{display:grid;text-align:left;width:100%;gap:var(--sds-space-2);padding:var(--sds-space-4);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel);color:var(--sds-color-text);min-height:44px}.mission-card:hover,.mission-card:focus-visible,.work-row:hover,.work-row:focus-visible{border-color:var(--sds-color-focus)}
.mission-card-top,.mission-card-meta{display:flex;justify-content:space-between;gap:var(--sds-space-2);font-size:var(--sds-type-footnote);color:var(--sds-color-muted)}
.work-detail{position:sticky;top:var(--sds-space-4);display:grid;gap:var(--sds-space-4);padding:var(--sds-space-5);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel);min-width:0;overflow-wrap:anywhere}.work-detail-head{display:flex;justify-content:space-between;gap:var(--sds-space-3);min-width:0}.work-detail-head>div{min-width:0}
.work-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sds-space-3)}.work-facts div{display:grid;gap:2px}.work-facts dt{font-size:var(--sds-type-footnote);color:var(--sds-color-muted)}.work-facts dd{margin:0}.work-blocker{display:grid;gap:2px;padding:var(--sds-space-3);border-left:3px solid var(--sds-color-warning);background:var(--sds-color-panel)}
.work-detail-actions{display:flex;flex-wrap:wrap;gap:var(--sds-space-2)}.work-editor form,.work-create form,.work-collaboration>form{display:grid;gap:var(--sds-space-3);margin-block:var(--sds-space-3)}.work-create{margin-block:var(--sds-space-4);padding:var(--sds-space-3);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-control)}.work-collaboration{display:grid;gap:var(--sds-space-3);padding-block-start:var(--sds-space-3);border-block-start:1px solid var(--sds-color-border)}.overview-work{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sds-space-3)}.overview-work button{display:grid;gap:var(--sds-space-2);padding:var(--sds-space-4);text-align:left;background:var(--sds-color-panel);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);color:var(--sds-color-text)}.overview-work strong{font-size:var(--sds-type-title)}
.fleet-message-task{margin-block-start:var(--sds-space-2);padding:var(--sds-space-2);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-control)}.fleet-message-task>summary{cursor:pointer;font-weight:700}.fleet-message-task form{display:grid;gap:var(--sds-space-2);margin-block-start:var(--sds-space-3)}.fleet-message-task label{display:grid;gap:var(--sds-space-1);color:var(--sds-color-muted);font-size:var(--sds-type-footnote)}.fleet-message-task input,.fleet-message-task textarea,.fleet-message-task select{width:100%;min-height:var(--sds-size-control)}.fleet-message-task-result{margin-block-start:var(--sds-space-2)}
.published-method-detail{overflow-wrap:anywhere}.published-method-copy{white-space:pre-wrap;line-height:1.6}.published-method-sections{display:grid;gap:var(--sds-space-4)}.published-method-sections section{display:grid;gap:var(--sds-space-2)}.published-method-list{display:grid;gap:var(--sds-space-2);margin:0;padding-inline-start:var(--sds-space-5)}
.cycle-create-panel,.cycle-detail{display:grid;gap:var(--sds-space-3);margin-block:var(--sds-space-4);padding:var(--sds-space-4);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel)}.operational-cycle-create form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sds-space-3);margin-block-start:var(--sds-space-3)}.operational-cycle-create label,.operational-cycle-create fieldset{display:grid;gap:var(--sds-space-1);min-width:0}.operational-cycle-create textarea{min-height:calc(var(--sds-size-control) * 2)}.operational-cycle-create fieldset,.operational-cycle-create button,.operational-cycle-create .note{grid-column:1/-1}.cycle-drafts{display:grid;gap:var(--sds-space-1);color:var(--sds-color-muted)}
@media(max-width:1180px){.work-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.work-layout{grid-template-columns:1fr}.work-detail{position:static}.work-layout.is-board .work-groups{grid-template-columns:repeat(4,minmax(260px,1fr))}}
@media(max-width:720px){.operational-cycle-create form{grid-template-columns:1fr}.operational-cycle-create fieldset,.operational-cycle-create button,.operational-cycle-create .note{grid-column:auto}}
@media(max-width:600px){.work-filters,.overview-work{grid-template-columns:1fr}.work-facts{grid-template-columns:1fr}.mission-grid{grid-template-columns:1fr}}

/* WO-154 company capability views */
.capability-pane{display:grid;gap:var(--sds-space-5)}.capability-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--sds-space-4)}
.capability-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,25rem);gap:var(--sds-space-5);align-items:start}.capability-card,.capability-detail{border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel);padding:var(--sds-space-4)}
.capability-card{display:grid;gap:var(--sds-space-3)}.capability-card[data-act="workflow-open"]{cursor:pointer}.capability-card[data-act="workflow-open"]:hover,.capability-card.is-open{border-color:var(--sds-color-action)}.capability-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sds-space-3)}.capability-card-head h2{margin:.15rem 0 0}.capability-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sds-space-3);margin:0}.capability-facts div{min-width:0}.capability-facts dt{color:var(--sds-color-muted);font-size:var(--sds-type-footnote)}.capability-facts dd{margin:.15rem 0 0;overflow-wrap:anywhere}
.capability-actions{display:flex;flex-wrap:wrap;gap:var(--sds-space-2)}.capability-detail{position:sticky;top:var(--sds-space-4);display:grid;gap:var(--sds-space-4)}.activity-copy small{color:var(--sds-color-muted);overflow-wrap:anywhere}.load-more{margin-block-start:var(--sds-space-4)}
.knowledge-document-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.knowledge-pane .text-action{color:var(--sds-color-text)}
.knowledge-pane .text-action:hover{color:var(--sds-color-action-hover)}
.agent-host-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sds-space-3)}.agent-host-choice{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sds-space-3);min-width:0;text-align:left}.agent-host-copy{display:grid;gap:var(--sds-space-1);min-width:0}.agent-host-copy strong,.agent-host-copy small{display:block;overflow-wrap:anywhere}
@media(max-width:900px){.agent-host-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.agent-host-grid{grid-template-columns:1fr}}
@media(max-width:800px){.capability-layout{grid-template-columns:1fr}.capability-detail{position:static}}

/* --------------------------------------------------------------------------
   WO-154 professional refinement

   SDS owns the palette; the official Skynet logo pack owns product identity. These rules narrow the visual vocabulary:
   one type rhythm, quiet structural surfaces, 12px action buttons, and a
   compact rail. Colour appears for intent and selection rather than scenery.
   -------------------------------------------------------------------------- */

button,
[role="button"] { touch-action: manipulation; }

.btn {
  min-width: var(--sds-size-control);
  border-radius: 12px;
  font-size: var(--sds-type-body);
  font-weight: 650;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--sds-elevation-1); }
.btn:active:not(:disabled) { transform: scale(.985); box-shadow: none; }
.btn-primary,
.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible {
  color: var(--sds-color-on-action);
}
.btn-secondary { background: var(--sds-color-panel); border-color: var(--sds-color-control-border); }
.btn-secondary:hover:not(:disabled) { background: var(--sds-color-raised); border-color: var(--sds-color-control-border); }

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
  min-height: var(--sds-size-control);
  border: 1px solid var(--sds-color-control-border);
  border-radius: 12px;
  padding: var(--sds-space-2) var(--sds-space-3);
  background-color: var(--sds-color-panel);
  font-size: var(--sds-type-body);
  line-height: var(--sds-line-body);
}
.sds select, .sds textarea { font-size: var(--sds-type-body); }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--sds-space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sds-color-muted) 50%),
    linear-gradient(135deg, var(--sds-color-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.topbar {
  min-width: 0;
  padding: var(--sds-space-2) var(--sds-space-4);
  background: var(--sds-color-panel);
  backdrop-filter: none;
}
.work-mode-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sds-space-1);
  padding: var(--sds-space-1);
  border: 1px solid var(--sds-color-border);
  border-radius: 12px;
  background: var(--sds-color-raised);
}
.work-mode-group button {
  min-width: 44px;
  min-height: 44px;
  padding: var(--sds-space-2) var(--sds-space-3);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sds-color-muted);
  cursor: pointer;
  font: 600 var(--sds-type-body)/1 var(--sds-font-sans);
}
.work-mode-group button:hover { color: var(--sds-color-text); }
.work-mode-group button[aria-pressed="true"] {
  border-color: var(--sds-color-control-border);
  background: var(--sds-color-panel);
  color: var(--sds-color-text);
  box-shadow: var(--sds-elevation-1);
}

.main {
  gap: var(--sds-space-6);
  padding-block: var(--sds-space-8);
  background: var(--sds-color-bg);
}
.page-intro { align-items: center; margin-bottom: 0; }
/* WO-286 (SKY-11): one large title per page — section heads below the page title use the title size. */
.mission-command-head h2,
.system-mission-head h2,
.sites-intro h2,
.passport-hero h2 {
  max-width: none;
  font-size: var(--sds-type-title);
  line-height: 1.1;
  background: none;
  color: var(--sds-color-text);
}
.page-intro h1,
.page-head h1,
.company-header h1 {
  max-width: none;
  font-size: var(--sds-type-large-title);
  line-height: 1.1;
  letter-spacing: -.02em;
  background: none;
  color: var(--sds-color-text);
}
.main h2,
.main h3 { font-size: var(--sds-type-body); }
.system-mission,
.mission-command,
.active-fleet-board,
.org-controller,
.overview-sites-callout {
  background: var(--sds-color-panel);
}
.system-mission,
.mission-command { padding: var(--sds-space-6); }

.stat-card,
.panel,
.mission-card,
.work-row,
.work-detail,
.capability-card,
.capability-detail,
.status-observation,
.room-stage,
.room-work-card,
.org-node,
.org-explainer,
.fleet-log-row,
.fleet-workspace-card {
  border-radius: 12px;
  background: var(--sds-color-panel);
  box-shadow: var(--sds-elevation-1);
}
.stat-card:hover { transform: translateY(-1px); border-color: var(--sds-color-control-border); box-shadow: var(--sds-elevation-2); }
.stat-card .value,
.stat-value,
.summary-grid strong,
.overview-work strong { font-size: var(--sds-type-large-title); }

.work-planning-tools {
  display: grid;
  gap: var(--sds-space-4);
  margin: 0;
  padding: var(--sds-space-6);
  border: 1px solid var(--sds-color-border);
  border-radius: 16px;
  background: var(--sds-color-panel);
}
.work-planning-tools .work-filters { margin: 0; }
.work-mode-group { padding: 0; border: 0; background: none; gap: var(--sds-space-3); }
.work-mode-group .view-toggle { margin: 0; gap: var(--sds-space-1); padding: var(--sds-space-1); border: 1px solid var(--sds-color-border); border-radius: 12px; background: var(--sds-color-raised); }
.work-create { margin-block: 0; background: var(--sds-color-panel); }
.work-create > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.work-create > summary::before { content: "+"; margin-right: var(--sds-space-2); color: var(--sds-color-action); }
.work-create > summary::-webkit-details-marker { display: none; }
.work-layout.is-list .mission-grid { grid-template-columns: 1fr; }
.work-layout.is-list .mission-card { gap: var(--sds-space-1); }
.work-layout.is-list .mission-card > span:nth-of-type(2) { max-width: 80ch; }

.work-toolbar { display: flex; align-items: end; gap: var(--sds-space-3); flex-wrap: wrap; }
.work-toolbar > * { min-width: 0; }
.work-toolbar .work-filters { flex: 1 1 680px; margin-block: 0; }
.work-mode-group { flex: 0 0 auto; }
.work-saved-views {
  border: 1px solid var(--sds-color-border);
  border-radius: 12px;
  background: var(--sds-color-panel);
}
.work-saved-views > summary {
  min-height: 44px;
  padding: var(--sds-space-2) var(--sds-space-3);
  color: var(--sds-color-muted);
  cursor: pointer;
  font-weight: 650;
}
.work-saved-views[open] > summary { border-bottom: 1px solid var(--sds-color-border); color: var(--sds-color-text); }
.work-saved-views > :not(summary) { margin-inline: var(--sds-space-3); }

@media (max-width: 900px) {
  #shell { grid-template-rows: auto auto minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); }
  .topbar .grow { display: none; }
  .work-toolbar { align-items: stretch; }
  .work-toolbar .work-filters { flex-basis: 100%; }
}

@media (max-width: 720px) {
  .page-intro { align-items: flex-start; }
}

/* WO-312: at 640px and under the SkyUI sidebar is a slim header (brand + theme
   controls) and the SkyUI bottom bar carries the primary navigation. */
@media (max-width: 640px) {
  #shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "side" "topbar" "banner" "main" "bar";
  }
}
}

@media (max-width: 460px) {
  .topbar { gap: var(--sds-space-2); padding-inline: var(--sds-space-3); }
  .health { order: 3; width: auto; margin-left: auto; }
  .health .label { display: inline; }
  .work-mode-group { width: 100%; }
  .work-mode-group button { flex: 1 1 0; }
}

/* WO-154 focused Fleet rooms */
.room-breadcrumbs{display:flex;flex-wrap:wrap;gap:var(--sds-space-2);color:var(--sds-color-muted);font-size:var(--sds-type-footnote);margin-block-end:var(--sds-space-2)}
.room-participants{display:flex;flex-wrap:wrap;gap:var(--sds-space-3);margin-block-end:var(--sds-space-4)}.room-participants article{display:flex;align-items:center;gap:var(--sds-space-2);padding:var(--sds-space-2) var(--sds-space-3);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-control);background:var(--sds-color-panel)}.room-participants small{display:block;color:var(--sds-color-muted)}
.room-stage-grid{display:grid;grid-template-columns:repeat(4,minmax(14rem,1fr));gap:var(--sds-space-3);overflow-x:auto;padding-block:var(--sds-space-2) var(--sds-space-4)}.room-stage{min-height:10rem;padding:var(--sds-space-3);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel)}.room-stage>header,.room-work-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sds-space-3)}
.room-work-card{margin-block-start:var(--sds-space-3);padding:var(--sds-space-3);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-control);background:var(--sds-color-panel)}.room-work-card p{margin-block:var(--sds-space-2)}.room-wait{color:var(--sds-color-warning)}.room-history{display:grid;gap:var(--sds-space-3)}
.room-wait-answer{display:grid;gap:var(--sds-space-2);margin-block:var(--sds-space-3)}.room-wait-answer label{display:grid;gap:var(--sds-space-1);font-size:var(--sds-type-footnote);color:var(--sds-color-muted)}.room-wait-answer textarea{width:100%;min-height:5rem}
@media(max-width:760px){.room-stage-grid{display:flex;scroll-snap-type:x mandatory}.room-stage{min-width:min(84vw,22rem);scroll-snap-align:start}}

/* WO-154 SkyLink system observations */
.status-observation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--sds-space-3)}.status-observation{display:grid;gap:var(--sds-space-2);padding:var(--sds-space-4);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel)}.status-observation header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sds-space-3)}.status-observation p,.status-observation small{margin:0}.status-observation small{color:var(--sds-color-muted)}
.estate-status-row{display:flex;align-items:flex-start;gap:var(--sds-space-4);flex-wrap:wrap;margin-block-end:var(--sds-space-4)}
.estate-status-row [data-estate-strip]{flex:1 1 28rem}
.estate-actions{display:grid;gap:var(--sds-space-2);flex:0 1 18rem;align-content:start}
.estate-actions .action-row{display:flex;gap:var(--sds-space-2);flex-wrap:wrap}
.estate-helper{margin:0;color:var(--sds-color-muted)}
.doctor-report{display:grid;gap:var(--sds-space-3);margin-block:var(--sds-space-4);padding:var(--sds-space-4);border:1px solid var(--sds-color-border);border-radius:var(--sds-radius-panel);background:var(--sds-color-panel)}
.doctor-report header{display:flex;justify-content:space-between;align-items:center;gap:var(--sds-space-3)}
.doctor-report-rows{display:grid;gap:var(--sds-space-2)}
.doctor-log-tail{margin:0;white-space:pre-wrap;overflow:auto;max-height:16rem;font-family:var(--sds-font-mono);font-size:var(--sds-type-footnote)}
@media(max-width:760px){.estate-status-row{flex-direction:column}.estate-actions{flex-basis:100%}}

/* SkyDesk — fixed-frame company desktop (layout stability).
   One consolidated block; replaces the WO-158 prototype and compact overrides.
   Contract: selecting a workflow, switching category, arranging, a background
   poll and loading→loaded never move the control under the pointer. The desktop
   is a fixed-height frame; variable content scrolls inside its own pane, and the
   selectors sit beside (wide) or above (narrow) that content, never below it.
   Breakpoints are container queries on the frame, so a collapsed or expanded
   rail re-lays SkyDesk by its own width rather than the window's. */
.main { scrollbar-gutter: stable; }
/* ---------------------------------------------------------------------------
   SkyDesk — one light template for every company (WO-205).
   Fixed-frame desktop: sidebar · main · inspector. Variable content scrolls
   inside its own pane; selection, category, poll and loading→loaded never move
   the control under the pointer. Palette unchanged; SDS Apple web layer tokens
   with local fallbacks so the frame renders even before the tokens land.
   --------------------------------------------------------------------------- */
.company-view-skydesk { gap: 10px; }
.company-view-skydesk > .company-header { display: none; }
.company-view-skydesk.company-needs-bind > .company-header { display: flex; padding: 10px 12px; border-radius: 12px; background: var(--sds-color-group); box-shadow: 0 0 0 .5px var(--sds-color-hairline); }

.skydesk {
  --sd-desk-h: clamp(560px, calc(100dvh - 150px), 1040px);
  container: skydesk / inline-size;
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: 16px;
  background: var(--sds-color-canvas);
  color: var(--sds-color-text);
  font-family: var(--sds-font-sans);
  overflow: hidden;
  box-shadow: 0 0 0 .5px var(--sds-color-hairline);
}
.skydesk h1, .skydesk h2, .skydesk h3 { margin: 0; color: var(--sds-color-text); letter-spacing: 0; background: none; }
.skydesk p { margin: 0; }
.skydesk .sds-section-header, .skydesk-side-title { font-size: var(--sds-type-section-header); font-weight: 600; color: var(--sds-color-muted); text-transform: none; letter-spacing: 0; }
.skydesk .eyebrow { font-size: var(--sds-type-section-header); font-weight: 600; color: var(--sds-color-muted); text-transform: none; letter-spacing: 0; }

.skydesk-desktop {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 356px;
  grid-template-areas: "sidebar main inspector";
  block-size: var(--sd-desk-h);
  min-height: 0;
}
.skydesk-sidebar, .skydesk-main, .skydesk-inspector { min-height: 0; min-width: 0; }

/* Sidebar: translucent, two nav groups, scrolls as one pane. */
.skydesk-sidebar {
  grid-area: sidebar;
  display: flex; flex-direction: column; gap: 22px;
  padding: 18px 12px;
  background: var(--sds-color-chrome-sidebar);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--sds-color-hairline);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.skydesk-nav, .skydesk-sites { display: flex; flex-direction: column; gap: 1px; }
.skydesk-side-title { padding: 0 10px 6px; }
.skydesk-side-title-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0 10px 6px; }
.skydesk-side-title-row .skydesk-side-title { padding: 0; }
.skydesk-side-link { font-size: var(--sds-type-footnote); font-weight: 500; color: var(--sds-color-action); text-decoration: none; }
.skydesk-side-empty { margin: 2px 10px; font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }
.skydesk-category-group { display: flex; flex-direction: column; gap: 1px; }
.skydesk-subcategories { display: flex; flex-direction: column; gap: 1px; padding-left: 14px; }
.skydesk .sds-sidebar-row, .skydesk-category, .skydesk-subcategory {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 32px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--sds-color-text); font: inherit; font-size: var(--sds-type-control); font-weight: 500; text-align: left; cursor: pointer;
}
.skydesk-subcategory { min-height: 30px; font-size: var(--sds-type-callout); font-weight: 400; }
.skydesk-category:hover, .skydesk-subcategory:hover { background: var(--sds-color-fill-gray); }
.skydesk-category[aria-pressed="true"], .skydesk-subcategory[aria-pressed="true"] { background: var(--sds-color-selection-wash); color: var(--sds-color-selection-text); font-weight: 600; }
.skydesk-count { font-size: var(--sds-type-footnote); font-weight: 500; color: var(--sds-color-muted); font-variant-numeric: tabular-nums; }
.skydesk-site { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border-radius: 7px; color: var(--sds-color-text); font-size: var(--sds-type-callout); text-decoration: none; }
.skydesk-site:hover { background: var(--sds-color-fill-gray); }
.skydesk-site-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sds-color-status-proposed-dot); flex: none; }
.skydesk-site[data-site-state="live"] .skydesk-site-dot { background: var(--sds-color-status-deployed); }
.skydesk-site[data-site-state="deploying"] .skydesk-site-dot { background: var(--sds-color-status-development); }
.skydesk-site-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skydesk-site-state { font-size: var(--sds-type-footnote); color: var(--sds-color-muted); white-space: nowrap; }

/* Main column: one scroll pane holding the head (title, roster dock, ask) and the body
   (workflow grid, jobs). The body is never shorter than the pane, so a category change
   that shrinks the grid cannot shrink the scroll extent while the dock is on screen:
   nothing visible moves; the kept scroll position is restored intact after a poll. */
.skydesk-main {
  grid-area: main;
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px 28px 20px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.skydesk-main-head { flex: none; display: flex; flex-direction: column; gap: 18px; }
.skydesk-main-body { flex: none; min-block-size: 100%; display: flex; flex-direction: column; gap: 18px; }
.skydesk-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 58px; }
.skydesk-title { font-size: var(--sds-type-large-title); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.skydesk-blurb { margin-top: 4px; font-size: var(--sds-type-body); color: var(--sds-color-muted); }
.skydesk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.skydesk-section-head h2 { font-size: var(--sds-type-headline); font-weight: 600; }
.skydesk-workflows .skydesk-section-head h2, .skydesk-jobs .skydesk-section-head h2 { font-size: var(--sds-type-section); font-weight: 700; }
.skydesk-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.skydesk-heading-note { font-size: var(--sds-type-callout); color: var(--sds-color-muted); }
.skydesk .sds-group { background: var(--sds-color-group); border-radius: 14px; box-shadow: 0 0 0 .5px var(--sds-color-hairline), var(--sds-elevation-1); }

/* Roster group. */
.skydesk-roster { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.skydesk-roster-note, .skydesk-roster-empty { font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }
.skydesk-roster-row { display: flex; gap: 20px; align-items: flex-start; }
.skydesk-roster-label { width: 44px; flex: none; padding-top: 18px; font-size: var(--sds-type-section-header); font-weight: 600; color: var(--sds-color-muted); }
.skydesk-roster-tiles { display: flex; flex-wrap: wrap; gap: 4px; min-height: 40px; }
.skydesk-roster-rule { height: 1px; margin-left: 64px; background: var(--sds-color-hairline); }
.skydesk-app, .skydesk-tool { width: 78px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0; }
.skydesk-app[data-readiness="not_on_file"] { opacity: .55; }
.skydesk-app-name { font-size: var(--sds-type-footnote); font-weight: 500; color: var(--sds-color-text); text-align: center; line-height: 1.2; }
.skydesk-app-state, .skydesk-tool-short { min-height: 12px; font-size: var(--sds-type-footnote); font-weight: 500; color: var(--sds-color-muted); text-align: center; line-height: 1.2; }
.skydesk-app[data-readiness="needs_setup"] .skydesk-app-state { color: var(--sds-color-capsule-review-fg); }
.skydesk-app[data-readiness="deploying"] .skydesk-app-state, .skydesk-app[data-readiness="in_development"] .skydesk-app-state { color: var(--sds-color-status-development); }
.skydesk-app[data-readiness="not_on_file"] .skydesk-app-state { color: var(--sds-color-capsule-failed-fg); }
.skydesk-app-mark {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 50px; height: 50px; border-radius: 12px;
  /* Per-tone switch (the [data-tone] rules below set these); the neutral default. */
  --sd-mark-bg: var(--sds-color-fill-gray); --sd-mark-fg: var(--sds-color-muted);
  background: var(--sd-mark-bg); color: var(--sd-mark-fg);
  box-shadow: inset 0 0 0 .5px var(--sds-color-hairline), var(--sds-elevation-1);
  font-weight: 700; letter-spacing: -0.01em;
}
.skydesk-app-mark[data-size="mini"] { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 .5px var(--sds-color-hairline); }
.skydesk-app-mark[data-ready="false"] { opacity: .55; box-shadow: inset 0 0 0 1.5px var(--sds-color-capsule-failed-fg); }
/* WO-286: a full-bleed brand-tile mark covers the inset ring, so that tile draws the same ring as an outline. */
.skydesk-app-mark[data-ready="false"]:has(> [data-tile="brand"]) { outline: 1.5px solid var(--sds-color-capsule-failed-fg); outline-offset: -1.5px; }
.skydesk-app-mark[data-missing="true"] { opacity: .45; }
.skydesk-app-mark .skydesk-provider-mark { width: 30px; height: 30px; }
.skydesk-app-mark[data-size="mini"] .skydesk-provider-mark { width: 14px; height: 14px; }
.skydesk-app-mark[data-tone="hostaway"] .skydesk-provider-mark { width: 40px; }
.skydesk-app-mark[data-size="mini"][data-tone="hostaway"] .skydesk-provider-mark { width: 18px; }
.skydesk-lettermark { font-size: var(--sds-type-headline); }
.skydesk-app-mark[data-size="mini"] .skydesk-lettermark { font-size: var(--sds-type-footnote); }
.skydesk-app-mark[data-tone="google"], .skydesk-app-mark[data-tone="google-workspace"] { --sd-mark-bg: var(--sds-palette-white); --sd-mark-fg: var(--sds-palette-electric-blue); box-shadow: inset 0 0 0 1px var(--sds-color-border); }
.skydesk-app-mark[data-tone="google-workspace"] .skydesk-provider-mark { width: 30px; height: 30px; }
.skydesk-app-mark[data-tone="google-cloud"] { --sd-mark-bg: var(--sds-palette-white); box-shadow: inset 0 0 0 1px var(--sds-color-border); }
.skydesk-app-mark[data-tone="telamanis"], .skydesk-app-mark[data-tone="teladocs"], .skydesk-app-mark[data-tone="gatekeeper"] { --sd-mark-bg: var(--sds-palette-white); box-shadow: inset 0 0 0 1px var(--sds-color-border); }
/* WO-277: LuvCRM (Luvarix mark) and RAcrm sit on white like Telamanis; LuvPM and LuvIQ ship their own rounded dark tile, so they fill the mark. */
.skydesk-app-mark[data-tone="luvarix"], .skydesk-app-mark[data-tone="randatlantic"] { --sd-mark-bg: var(--sds-palette-white); box-shadow: inset 0 0 0 1px var(--sds-color-border); }
.skydesk-app-mark[data-tone="luvpm"], .skydesk-app-mark[data-tone="luviq"] { --sd-mark-bg: transparent; box-shadow: none; }
.skydesk-app-mark[data-tone="luvpm"] .skydesk-raster-mark, .skydesk-app-mark[data-tone="luviq"] .skydesk-raster-mark { background-size: 100% 100%; }
/* WO-279 vendor tiles: Cloudflare orange on white, Supabase green on its dark, the MLS marks on white.
   WO-286: a vendor's own colours are part of its mark asset (skydesk-icons.mjs BRAND_TILES), not app CSS. */
.skydesk-app-mark[data-tone="cloudflare"] { --sd-mark-bg: var(--sds-palette-white); box-shadow: inset 0 0 0 1px var(--sds-color-border); }
.skydesk-app-mark[data-tone="mlspin"], .skydesk-app-mark[data-tone="ccimls"], .skydesk-app-mark[data-tone="hubstaff"] { --sd-mark-bg: var(--sds-palette-white); box-shadow: inset 0 0 0 1px var(--sds-color-border); }
/* WO-286: a brand-tile mark (skydesk-icons.mjs BRAND_TILES) is the whole tile. */
.skydesk-app-mark:has(> [data-tile="brand"]) { --sd-mark-bg: transparent; }
.skydesk-app-mark[data-tone] .skydesk-provider-mark[data-tile="brand"] { display: block; width: 100%; height: 100%; border-radius: inherit; }
/* Raster app marks (WO-213): the app's own shipped icon, one WebP per mark. */
.skydesk-raster-mark { display: block; width: 100%; height: 100%; border-radius: inherit; background-repeat: no-repeat; background-position: center; background-size: 78% 78%; }
.skydesk-app-mark[data-size="mini"] .skydesk-raster-mark { background-size: 82% 82%; }
.skydesk-raster-mark[data-mark="telamanis"] { background-image: url("/v2/assets/marks/telamanis.webp"); }
.skydesk-raster-mark[data-mark="teladocs"] { background-image: url("/v2/assets/marks/teladocs.webp"); }
.skydesk-raster-mark[data-mark="gatekeeper"] { background-image: url("/v2/assets/marks/gatekeeper.webp"); }
.skydesk-raster-mark[data-mark="luvpm"] { background-image: url("/v2/assets/marks/luvpm.webp"); }
.skydesk-raster-mark[data-mark="luviq"] { background-image: url("/v2/assets/marks/luviq.webp"); }
.skydesk-raster-mark[data-mark="luvarix"] { background-image: url("/v2/assets/marks/luvarix.webp"); }
.skydesk-raster-mark[data-mark="randatlantic"] { background-image: url("/v2/assets/marks/randatlantic.webp"); }
.skydesk-raster-mark[data-mark="mlspin"] { background-image: url("/v2/assets/marks/mlspin.webp"); }
.skydesk-raster-mark[data-mark="hubstaff"] { background-image: url("/v2/assets/marks/hubstaff.webp"); }
.skydesk-raster-mark[data-mark="ccimls"] { background-image: url("/v2/assets/marks/ccimls.webp"); }
.skydesk-app-mark[data-tone="indigo"] { --sd-mark-bg: var(--sds-palette-indigo); --sd-mark-fg: var(--sds-palette-white); }
.skydesk-app-mark[data-tone="blue"] { --sd-mark-bg: var(--sds-palette-electric-blue); --sd-mark-fg: var(--sds-palette-white); }
.skydesk-app-mark[data-tone="purple"] { --sd-mark-bg: var(--sds-palette-purple); --sd-mark-fg: var(--sds-palette-white); }
.skydesk-app-mark[data-tone="magenta"] { --sd-mark-bg: color-mix(in srgb, var(--sds-palette-neon-magenta) 80%, var(--sds-palette-black)); --sd-mark-fg: var(--sds-palette-white); }
.skydesk-app-mark[data-tone="ink"] { --sd-mark-bg: var(--sds-palette-black); --sd-mark-fg: var(--sds-palette-white); }
.skydesk-app-mark[data-tone="cloud"] { --sd-mark-bg: var(--sds-tone-blue-soft); --sd-mark-fg: var(--sds-tone-blue-fg); }
.skydesk-app-mark[data-tone="gray"] { --sd-mark-bg: var(--sds-color-fill-gray); --sd-mark-fg: var(--sds-color-muted); }
.skydesk-tool-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: var(--sds-color-fill-gray); color: var(--sds-color-action); }
.skydesk-tool-glyph { width: 22px; height: 22px; }

/* Ask field. */
.skydesk-ask { display: flex; flex-direction: column; gap: 6px; }
.skydesk-ask-form { display: flex; gap: 8px; }
.skydesk .skydesk-ask-field { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--sds-color-fill-gray); color: var(--sds-color-muted); }
.skydesk-ask-field .skydesk-tool-glyph { width: 16px; height: 16px; flex: none; }
.skydesk-ask-field input { flex: 1 1 auto; min-width: 0; height: 36px; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--sds-type-body); color: var(--sds-color-text); }
.skydesk-ask-field:focus-within { box-shadow: 0 0 0 2px var(--sds-color-focus); }
.skydesk-ask-note { min-height: 18px; padding-left: 4px; font-size: var(--sds-type-callout); color: var(--sds-color-muted); }
.skydesk-ask-note strong { font-weight: 600; color: var(--sds-color-text); }

/* Workflow grid: fixed-height cards, the grid itself scrolls. */
.skydesk-workflows { display: flex; flex-direction: column; gap: 10px; }
.skydesk-legend { display: flex; gap: 14px; font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }
.skydesk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skydesk-grid-empty { grid-column: 1 / -1; padding: 24px 16px; border-radius: 12px; background: var(--sds-color-group); box-shadow: 0 0 0 .5px var(--sds-color-hairline); color: var(--sds-color-muted); font-size: var(--sds-type-callout); text-align: center; }
.skydesk-card {
  display: flex; flex-direction: column; gap: 8px;
  height: 124px; box-sizing: border-box; padding: 14px 16px;
  border: 0; border-radius: 12px;
  background: var(--sds-color-group); color: var(--sds-color-text);
  box-shadow: 0 0 0 .5px var(--sds-color-hairline), var(--sds-elevation-1);
  font: inherit; text-align: left; cursor: pointer;
}
.skydesk-card:hover { box-shadow: 0 0 0 .5px var(--sds-color-hairline), var(--sds-elevation-2); }
.skydesk-card[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sds-color-action), var(--sds-elevation-2); }
.skydesk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skydesk-card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sds-type-headline); font-weight: 600; }
.skydesk-card-purpose { height: 36px; overflow: hidden; font-size: var(--sds-type-callout); line-height: 1.4; color: var(--sds-color-muted); }
.skydesk-card-foot { display: flex; align-items: center; gap: 5px; }
.skydesk-card-apps { display: flex; gap: 5px; }
.skydesk-card-sub { margin-left: auto; font-size: var(--sds-type-footnote); color: var(--sds-color-muted); }

/* Status dot + label; job capsules. */
.skydesk .sds-status { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: var(--sds-type-footnote); font-weight: 500; color: var(--sds-color-muted); }
.skydesk .sds-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sds-color-status-proposed-dot); }
.skydesk .sds-status[data-state="deployed"] { color: var(--sds-color-status-deployed); }
.skydesk .sds-status[data-state="deployed"] .sds-status-dot { background: var(--sds-color-status-deployed); }
.skydesk .sds-status[data-state="development"] { color: var(--sds-color-status-development); }
.skydesk .sds-status[data-state="development"] .sds-status-dot { background: var(--sds-color-status-development); }
.skydesk .sds-capsule { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: var(--sds-type-footnote); font-weight: 500; white-space: nowrap; background: var(--sds-color-unknown-bg); color: var(--sds-color-muted); }
.skydesk .sds-capsule[data-state="review"] { background: var(--sds-color-capsule-review-bg); color: var(--sds-color-capsule-review-fg); }
.skydesk .sds-capsule[data-state="working"] { background: var(--sds-color-capsule-working-bg); color: var(--sds-color-capsule-working-fg); }
.skydesk .sds-capsule[data-state="completed"] { background: var(--sds-color-capsule-completed-bg); color: var(--sds-color-capsule-completed-fg); }
.skydesk .sds-capsule[data-state="failed"] { background: var(--sds-color-capsule-failed-bg); color: var(--sds-color-capsule-failed-fg); }

/* Jobs inset list. */
.skydesk-jobs { display: flex; flex-direction: column; gap: 8px; }
.skydesk-jobs-group { overflow: hidden; border-radius: 12px; }
.skydesk-jobs-list { margin: 0; padding: 0; list-style: none; }
.skydesk-job { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0 14px; align-items: center; height: 44px; margin-left: 14px; padding-right: 14px; border-bottom: 1px solid var(--sds-color-hairline); color: var(--sds-color-text); font-size: var(--sds-type-callout); text-decoration: none; }
.skydesk-jobs-list li:last-child .skydesk-job { border-bottom: 0; }
.skydesk-job[aria-current="true"] { background: var(--sds-color-selection-wash); margin-left: 0; padding-left: 14px; }
.skydesk-job-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skydesk-job-meta { color: var(--sds-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skydesk-job .sds-capsule { justify-self: end; }
.skydesk-jobs-note { padding: 14px; font-size: var(--sds-type-callout); color: var(--sds-color-muted); }
.skydesk-alert { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--sds-color-capsule-failed-bg); color: var(--sds-color-capsule-failed-fg); font-size: var(--sds-type-callout); line-height: 1.45; }

/* Inspector: the job composer. */
.skydesk-inspector {
  grid-area: inspector;
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 22px 22px;
  background: var(--sds-color-group);
  border-left: 1px solid var(--sds-color-hairline);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.skydesk-inspector-title { margin-top: 4px; font-size: var(--sds-type-title); line-height: 1.2; font-weight: 700; }
.skydesk-inspector-purpose { margin: 6px 0 8px; font-size: var(--sds-type-callout); line-height: 1.45; color: var(--sds-color-muted); }
.skydesk-inspector-note { font-size: var(--sds-type-footnote); line-height: 1.45; color: var(--sds-color-muted); }
.skydesk-inspector-empty { margin: auto; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--sds-color-muted); }
.skydesk-inspector-empty strong { color: var(--sds-color-text); }
.skydesk-composer { display: flex; flex-direction: column; gap: 12px; }
.skydesk-composer label { display: flex; flex-direction: column; gap: 5px; font-size: var(--sds-type-footnote); font-weight: 600; color: var(--sds-color-muted); }
.skydesk-composer input, .skydesk-composer select, .skydesk-composer textarea { width: 100%; min-height: 36px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 8px; background: var(--sds-color-fill-field); font: inherit; font-size: var(--sds-type-control); color: var(--sds-color-text); color-scheme: light; outline: none; }
.skydesk-composer textarea { min-height: 72px; padding: 8px 10px; }
.skydesk-composer :focus-visible { box-shadow: 0 0 0 2px var(--sds-color-focus); }
.skydesk-composer :disabled { opacity: .6; }
.skydesk-uses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.skydesk-use { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 3px; border-radius: 8px; background: var(--sds-color-fill-gray); color: var(--sds-color-text); font-size: var(--sds-type-footnote); font-weight: 500; }
.skydesk-use[data-ready="false"] { opacity: .7; }
.skydesk-approval { display: flex; gap: 8px; font-size: var(--sds-type-footnote); line-height: 1.45; color: var(--sds-color-muted); }
.skydesk-approval .skydesk-tool-glyph { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.skydesk-blocked { padding: 10px 12px; border-radius: 10px; background: var(--sds-color-capsule-review-bg); color: var(--sds-color-capsule-review-fg); font-size: var(--sds-type-callout); line-height: 1.45; }
.skydesk-blocked strong { font-weight: 600; }
.skydesk-inspector-spacer { flex: 1 1 auto; }

/* Buttons inside SkyDesk (SDS Apple layer classes). */
.skydesk .sds-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--sds-color-fill-gray); color: var(--sds-color-text); font: inherit; font-size: var(--sds-type-body); font-weight: 500; text-decoration: none; cursor: pointer; }
.skydesk .sds-button[data-size="compact"] { height: 36px; padding: 0 16px; border-radius: 10px; }
.skydesk .sds-button[data-variant="filled"] { background: var(--sds-color-action); color: var(--sds-color-on-action); font-weight: 600; }
.skydesk .sds-button[data-variant="tinted"] { background: var(--sds-color-fill-tinted); color: var(--sds-color-action); font-weight: 600; }
.skydesk .sds-button[data-variant="plain"] { background: transparent; color: var(--sds-color-action); padding: 0 4px; }
.skydesk .sds-button[data-variant="destructive"] { background: var(--sds-color-capsule-failed-bg); color: var(--sds-color-capsule-failed-fg); font-weight: 600; }
.skydesk .sds-button:disabled { background: var(--sds-color-fill-gray); color: var(--sds-color-disabled-text); cursor: not-allowed; }

/* Loading: the same frame, so loaded content never moves the header. */
.skydesk-skeleton { background: var(--sds-color-chrome-sidebar); }
.skydesk-inspector.skydesk-skeleton { background: var(--sds-color-group); }
.skydesk-loading { display: grid; place-content: center; gap: 6px; min-height: 240px; text-align: center; color: var(--sds-color-muted); }

/* Medium (the Mac app opens at 960×680): the inspector drops under the main column; the frame keeps its height. */
@container skydesk (max-width: 1180px) {
  /* Two fixed shares of the frame: the inspector can never grow into the main pane. */
  .skydesk-desktop { grid-template-columns: 212px minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "sidebar main" "sidebar inspector"; }
  .skydesk-inspector { border-left: 0; border-top: 1px solid var(--sds-color-hairline); padding: 18px 22px; }
  .skydesk-main { padding: 20px 22px 16px; }
  .skydesk-inspector-spacer { display: none; }
}
@media (max-height: 780px) {
  .skydesk { --sd-desk-h: clamp(480px, calc(100dvh - 120px), 1040px); }
  .skydesk-title-row { min-height: 44px; }
  .skydesk-blurb { display: none; }
}
/* Narrow (phone): one column, still selectors first; every region keeps a fixed height. */
@container skydesk (max-width: 720px) {
  .skydesk-desktop { grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px minmax(0, 1fr) 320px; grid-template-areas: "sidebar" "main" "inspector"; block-size: auto; }
  .skydesk-sidebar { border-right: 0; border-bottom: 1px solid var(--sds-color-hairline); padding: 12px; }
  .skydesk-main { padding: 16px 14px; }
  .skydesk-main-body { min-block-size: 0; }
  .skydesk-grid { grid-template-columns: minmax(0, 1fr); }
  .skydesk-job { grid-template-columns: minmax(0, 1fr) auto; }
  .skydesk-job-meta { display: none; }
  .skydesk-inspector { border-left: 0; border-top: 1px solid var(--sds-color-hairline); max-height: none; padding: 16px 14px; }
  .skydesk-roster-label { width: 36px; }
  /* WO-286: 76 (was 64) so a 12 px footnote name (Workspace, QuickBooks, development) fits without a mid-word break. */
  .skydesk-app, .skydesk-tool { width: 76px; }
  .skydesk-title-row { min-height: 0; }
}
@media (max-width: 640px) {
  .company-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; overflow-y: visible; flex-wrap: nowrap; scrollbar-width: thin; }
  .company-tabs > * { flex: 0 0 auto; }
  /* A scrolling strip clips its children, so on a phone the More menu is fixed to the viewport. */
  .company-more-menu { position: fixed; left: 14px; right: 14px; top: auto; margin-top: 6px; max-width: none; }
}

.development-sites { display: grid; gap: var(--sds-space-4); margin-top: var(--sds-space-6); }
.development-site-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap: var(--sds-space-3); }
.development-site-card { padding: var(--sds-space-4); border: 1px solid var(--sds-color-border); border-radius: 16px; background: var(--sds-color-panel); }
.development-site-card header > span { color: var(--sds-color-action); font-size: var(--sds-type-section-header); font-weight: var(--sds-weight-semibold); letter-spacing: var(--sds-tracking-none); }
.development-site-card h3 { margin: 4px 0; }
.development-site-progress { display: flex; align-items: baseline; gap: 10px; margin: 14px 0; }
.development-site-progress strong { font-size: var(--sds-type-large-title); }
.development-site-card ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.development-site-card li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sds-color-border); }
.development-site-card li div { display: grid; gap: 2px; }
.development-site-card li span,
.development-site-card li small,
.development-site-card footer { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-site-card footer { margin-top: 14px; }

/* WO-158: both company surfaces render the same durable workflow record. */
.skydesk-run-history { margin-top: 18px; padding: 20px; border: 1px solid var(--sds-color-border); border-radius: 16px; background: var(--sds-color-panel); min-width: 0; }
.workflow-run-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; max-height: 280px; overflow: auto; }
.workflow-run-choice { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--sds-color-border); border-radius: 10px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.workflow-run-choice[aria-current="true"] { border-color: var(--sds-color-action); }
.workflow-run-choice span, .workflow-run-choice small, .workflow-job small { color: var(--sds-color-muted); }
.workflow-run-detail { margin-top: 18px; overflow-wrap: anywhere; }
.workflow-run-detail > header, .workflow-execution-stages li > header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; }
.workflow-run-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.workflow-execution-stages { display: grid; gap: 14px; padding-left: 22px; }
.workflow-execution-stages > li { padding: 12px; border: 1px solid var(--sds-color-border); border-radius: 10px; }
.workflow-job { padding: 10px 0; border-top: 1px solid var(--sds-color-border); }
.workflow-question { padding: 16px; margin: 14px 0; border: 1px solid var(--sds-color-action); border-radius: 12px; }
.workflow-question label { display: grid; gap: 8px; margin: 12px 0; }
.workflow-question textarea { width: 100%; min-height: 90px; }

/* ---------------------------------------------------------------------------
   WO-295 — the Skynet Wizard tab (views/onboarding/): wizard, map page, admin panel.
   Tokens only; cards stack at phone width.
   --------------------------------------------------------------------------- */
.onboarding { display: grid; gap: var(--sds-space-4); min-width: 0; }
.onboarding-tabs { display: flex; flex-wrap: wrap; gap: var(--sds-space-1); }
.onboarding-home-grid, .map-health, .map-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sds-space-3); }
.wizard-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sds-space-3); }
.wizard-head h2 { margin: 0; font-size: var(--sds-type-title); line-height: var(--sds-line-tight); }
.wizard-head p { margin: 0; }
.wizard-head-badges { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); align-items: center; }
.wizard-body { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--sds-space-4); align-items: start; }
.wizard-stepper ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sds-space-1); }
.wizard-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sds-space-2); width: 100%; min-height: var(--sds-size-touch); padding: var(--sds-space-2) var(--sds-space-3); text-align: left; border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); color: var(--sds-color-text); font: inherit; font-size: var(--sds-type-control); cursor: pointer; }
.wizard-step.is-current { border-color: var(--sds-color-accent); background: var(--sds-color-selection-wash); }
.wizard-step:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
.wizard-step-number { display: inline-grid; place-items: center; inline-size: var(--sds-size-control-compact); block-size: var(--sds-size-control-compact); border-radius: var(--sds-radius-pill); background: var(--sds-color-fill-gray); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.wizard-step-title { min-width: 0; overflow-wrap: anywhere; }
.wizard-pane { display: grid; gap: var(--sds-space-3); min-width: 0; padding: var(--sds-space-4); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); }
.wizard-pane-title { margin: 0; font-size: var(--sds-type-headline); line-height: var(--sds-line-tight); }
.wizard-lede { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-body); }
.wizard-subhead, .map-subhead { margin: var(--sds-space-3) 0 0; font-size: var(--sds-type-body); font-weight: var(--sds-weight-semibold); }
.wizard-form { display: grid; gap: var(--sds-space-3); }
.wizard-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--sds-space-3); }
.wizard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sds-space-3); }
.wizard-field input, .wizard-field select, .wizard-field textarea { inline-size: 100%; min-height: var(--sds-size-control-compact); padding: var(--sds-space-1) var(--sds-space-2); border: var(--sds-border-width) solid var(--sds-color-control-border); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); color: var(--sds-color-text); font: inherit; font-size: var(--sds-type-control); }
.wizard-field input[readonly] { color: var(--sds-color-muted); background: var(--sds-color-fill-gray); }
.wizard-field input:focus-visible, .wizard-field select:focus-visible, .wizard-field textarea:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
.wizard-rows { display: grid; gap: var(--sds-space-3); }
.wizard-row { display: grid; gap: var(--sds-space-2); margin: 0; padding: var(--sds-space-3); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-group); background: var(--sds-color-raised); min-width: 0; }
.wizard-row--compact { padding: var(--sds-space-2) var(--sds-space-3); }
.wizard-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); }
.wizard-row-actions, .wizard-actions, .admin-ops { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); }
.wizard-disabled { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); }
.wizard-reason { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); max-inline-size: 36rem; }
.wizard-static { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.wizard-checks { display: flex; flex-wrap: wrap; gap: var(--sds-space-3); font-size: var(--sds-type-control); }
.wizard-checks--stack { flex-direction: column; gap: var(--sds-space-2); }
.wizard-checks label { display: inline-flex; align-items: center; gap: var(--sds-space-1); min-height: var(--sds-size-control-compact); }
.wizard-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sds-space-2); }
.wizard-review-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-2); padding: var(--sds-space-2) var(--sds-space-3); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); }
.wizard-missing { margin: 0; padding-inline-start: var(--sds-space-5); display: grid; gap: var(--sds-space-1); font-size: var(--sds-type-body); }
.map-page, .admin-panel, .onboarding-home { display: grid; gap: var(--sds-space-4); min-width: 0; }
.map-grid, .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sds-space-3); }
.map-list { margin: 0; padding-inline-start: var(--sds-space-5); display: grid; gap: var(--sds-space-1); font-size: var(--sds-type-body); }
.map-list--plain { list-style: none; padding-inline-start: 0; }
.map-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sds-space-2); }
.map-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); padding: var(--sds-space-2) var(--sds-space-3); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); font-size: var(--sds-type-body); }
.map-chip[data-grant="active"] { border-color: var(--sds-color-success); }
.map-chip[data-grant="revoked"], .map-chip[data-grant="lapsed"] { border-color: var(--sds-color-danger); }
.map-secret-name { font-size: var(--sds-type-footnote); color: var(--sds-color-muted); overflow-wrap: anywhere; }
.map-changes { margin: 0; padding-inline-start: var(--sds-space-5); display: grid; gap: var(--sds-space-1); font-size: var(--sds-type-footnote); }
.admin-panel { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); grid-template-areas: "head head" "err err" "health health" "grid side"; }
.admin-panel > .wizard-head { grid-area: head; }
.admin-panel > .map-health, .admin-panel > .sds-alert { grid-column: 1 / -1; }
.admin-grid { grid-area: grid; grid-template-columns: 1fr; align-content: start; }
.admin-side { grid-area: side; display: grid; gap: var(--sds-space-3); align-content: start; }
.admin-card { display: grid; gap: var(--sds-space-2); padding: var(--sds-space-3); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-group); background: var(--sds-color-panel); min-width: 0; }
.admin-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); }
.admin-card-head h3 { margin: 0; flex: 1; font-size: var(--sds-type-body); font-weight: var(--sds-weight-semibold); }
.admin-card-body { display: grid; gap: var(--sds-space-2); }
.admin-ops { flex-direction: column; align-items: flex-start; }
@media (max-width: 900px) {
  .wizard-body { grid-template-columns: 1fr; }
  .wizard-stepper ol { display: flex; flex-wrap: wrap; }
  .wizard-step { width: auto; grid-template-columns: auto auto auto; }
  .admin-panel { grid-template-columns: 1fr; grid-template-areas: "head" "err" "health" "grid" "side"; }
}

/* ---------------------------------------------------------------------------
   WO-315 — the SkyMail tab (views/skymail/): Inbox, Ready to file, Report.
   Artboard Desk-ReadyToFile (TSG 2026-09-28). Tokens only; the desk stacks
   below 1100px and the list becomes cards at phone width.
   --------------------------------------------------------------------------- */
.skymail, .skymail-ready, .skymail-inbox, .skymail-report { display: grid; gap: var(--sds-space-4); min-width: 0; }
.skymail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-3); }
.skymail-app { margin: 0; flex: 1; font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); line-height: var(--sds-line-tight); }
.skymail .sds-page-header__right { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); }
.skymail-kbd { display: inline-block; margin-inline-start: var(--sds-space-1); padding: 0 var(--sds-space-1); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-small); background: var(--sds-color-raised); color: var(--sds-color-text); font-size: var(--sds-type-footnote); line-height: var(--sds-line-body); }
.skymail-keys .skymail-kbd { margin-inline: 0; }
.skymail-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sds-space-3); }
.skymail-stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skymail-stats--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.skymail-filters { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); }
.skymail-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.25rem); gap: var(--sds-space-4); align-items: start; min-width: 0; }
.skymail-table-wrap { min-width: 0; }
.sds .skymail-table :where(th, td) { padding: var(--sds-space-2) var(--sds-space-3); font-size: var(--sds-type-callout); vertical-align: middle; }
.skymail-table tbody tr.is-selected { background: var(--sds-color-selection-wash); }
.skymail-seq, .skymail-muted { color: var(--sds-color-muted); }
.skymail-filename { font-weight: var(--sds-weight-medium); }
.skymail-reason { display: block; margin-block-start: var(--sds-space-1); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-regular); }
.skymail-type { font-size: var(--sds-type-footnote); }
.skymail-row-actions { text-align: end; white-space: nowrap; }
.skymail-row-actions .sds-button + .sds-button { margin-inline-start: var(--sds-space-1); }
.skymail-pane { position: sticky; top: var(--sds-space-4); display: grid; gap: var(--sds-space-3); padding: var(--sds-space-4); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); min-width: 0; }
.skymail-pane .sds-section-header { margin: 0; }
.skymail-preview { margin: 0; display: grid; place-items: center; block-size: calc(var(--sds-space-16) * 2.5); overflow: hidden; border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-small); background: var(--sds-color-raised); color: var(--sds-color-subtle); font-size: var(--sds-type-callout); }
/* The page image covers the words when it loads; a scan with no preview (404) leaves the words, never a broken-image glyph. */
.skymail-preview > * { grid-area: 1 / 1; }
.skymail-preview img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; background: var(--sds-color-raised); }
.skymail-fields { display: grid; grid-template-columns: minmax(6rem, 7.5rem) minmax(0, 1fr); gap: var(--sds-space-1) var(--sds-space-3); margin: 0; font-size: var(--sds-type-callout); }
.skymail-fields dt { color: var(--sds-color-muted); }
.skymail-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.skymail-pane-actions { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); }
.skymail-pane-actions .sds-button { flex: 1 1 auto; }
.skymail-keys, .skymail-note { margin: 0; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); line-height: var(--sds-line-body); }
.skymail-adjust { display: grid; gap: var(--sds-space-3); }
.skymail-field { display: grid; gap: var(--sds-space-1); font-size: var(--sds-type-callout); }
.skymail-field > span { color: var(--sds-color-muted); }
.skymail-field :where(input, select) { inline-size: 100%; min-block-size: var(--sds-size-control-compact); font-size: var(--sds-type-control); }
.skymail-field--inline { grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--sds-space-2); }
.skymail-field--inline :where(input) { inline-size: auto; }
.skymail-day { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); }
.skymail-run { display: grid; gap: var(--sds-space-2); padding: var(--sds-space-4); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); }
.skymail-run-line { margin: 0; font-size: var(--sds-type-body); font-weight: var(--sds-weight-medium); }
.skymail-run-done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-3); }
.skymail-run-done > .sds-alert { flex: 1 1 20rem; }
.skymail-empty { padding: var(--sds-space-6); color: var(--sds-color-muted); font-size: var(--sds-type-body); text-align: center; }
.skymail-empty p { margin: 0; }
.skymail-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sds-space-3); align-items: start; }
.sds .skymail-num { text-align: end; }
@media (max-width: 1100px) {
  .skymail-desk { grid-template-columns: 1fr; }
  .skymail-pane { position: static; }
  .skymail-stats, .skymail-stats--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .skymail-stats, .skymail-stats--four, .skymail-stats--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skymail-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .skymail-table, .skymail-table tbody, .skymail-table tr, .skymail-table td { display: block; }
  .skymail-table tbody tr { padding: var(--sds-space-2) 0; border-block-end: var(--sds-border-width) solid var(--sds-color-border); }
  .sds .skymail-table :where(td) { border: 0; padding-block: var(--sds-space-1); }
  .sds .skymail-table :where(td:nth-child(5), td:nth-child(6), td:nth-child(7)) { display: inline-block; }
  .skymail-row-actions { text-align: start; }
}

/* WO-488: company Development: Pipeline (default) and Work list. Every colour and size is an SDS token. */
.development-views { flex: none; }
.development-pipeline { display: grid; gap: var(--sds-space-5); min-width: 0; }
.pipeline-stale { margin: 0; padding: var(--sds-space-3) var(--sds-space-4); border-left: 2px solid var(--sds-color-warning); border-radius: var(--sds-radius-small); background: var(--sds-color-warning-bg); color: var(--sds-color-text); font-size: var(--sds-type-footnote); }
.pipeline-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sds-space-3); margin: 0; padding: 0; list-style: none; }
.pipeline-tile { display: grid; gap: var(--sds-space-1); align-content: start; padding: var(--sds-space-3) var(--sds-space-4); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); min-width: 0; }
.pipeline-tile-label { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.pipeline-tile-count { font-size: var(--sds-type-title); font-weight: var(--sds-weight-bold); line-height: var(--sds-line-tight); font-variant-numeric: tabular-nums; }
.pipeline-tile[data-stage="live"] .pipeline-tile-count { color: var(--sds-color-accent); }
.pipeline-tile-note { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.pipeline-attention { display: grid; gap: var(--sds-space-3); padding: var(--sds-space-4); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); min-width: 0; }
.pipeline-section-head, .pipeline-board-head, .pipeline-column-head, .pipeline-row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sds-space-3); flex-wrap: wrap; min-width: 0; }
.pipeline-section-head h3, .pipeline-board-head h3 { margin: 0; font-size: var(--sds-type-headline); }
.pipeline-column-head h4, .pipeline-row-head h4 { margin: 0; font-size: var(--sds-type-body); }
.pipeline-row-head { justify-content: flex-start; }
.pipeline-count { padding: 0 var(--sds-space-2); border-radius: var(--sds-radius-pill); background: var(--sds-color-fill-gray); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); font-variant-numeric: tabular-nums; }
.pipeline-attention-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pipeline-attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sds-space-3); align-items: start; padding-block: var(--sds-space-3); border-top: 1px solid var(--sds-color-hairline); }
.pipeline-attention-item:first-child { border-top: 0; padding-top: 0; }
.pipeline-attention-item > .status-tag, .pipeline-attention-item > .text-action { justify-self: start; }
.pipeline-attention-copy { display: grid; gap: var(--sds-space-1); min-width: 0; overflow-wrap: anywhere; }
.pipeline-attention-copy > span { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-quiet { margin: 0; color: var(--sds-color-muted); }
.pipeline-scroller { overflow-x: auto; padding-bottom: var(--sds-space-2); min-width: 0; }
.pipeline-board, .pipeline-grid { display: grid; grid-template-columns: repeat(6, minmax(13.5rem, 1fr)); gap: var(--sds-space-3); align-items: start; }
.pipeline-column { display: grid; align-content: start; gap: var(--sds-space-2); min-height: 8rem; padding: var(--sds-space-3); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); min-width: 0; }
.pipeline-column[data-stage="live"] { border-color: color-mix(in srgb, var(--sds-color-accent) 35%, transparent); }
.pipeline-column-note { margin: 0; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.pipeline-column-cards { display: grid; gap: var(--sds-space-2); }
.pipeline-column-empty, .pipeline-cell-empty { margin: 0; padding: var(--sds-space-3) var(--sds-space-2); color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); text-align: center; }
.pipeline-card { display: grid; gap: var(--sds-space-2); width: 100%; min-height: var(--sds-size-touch); padding: var(--sds-space-3); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); color: var(--sds-color-text); font: inherit; text-align: left; cursor: pointer; }
.pipeline-card:hover, .pipeline-card:focus-visible { border-color: var(--sds-color-focus); }
.pipeline-card:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
.pipeline-card-top { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; min-width: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-label { padding: 0 var(--sds-space-2); border-radius: var(--sds-radius-small); background: var(--sds-tone-blue-soft); color: var(--sds-tone-blue-fg); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-bold); white-space: nowrap; }
.pipeline-label[data-kind="program"] { background: var(--sds-color-fill-gray); color: var(--sds-color-text); }
.pipeline-card-id { min-width: 0; overflow: hidden; color: var(--sds-color-subtle); font-family: var(--sds-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.pipeline-card-title { display: -webkit-box; overflow: hidden; font-weight: var(--sds-weight-semibold); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pipeline-card-meta { display: flex; justify-content: space-between; gap: var(--sds-space-2); flex-wrap: wrap; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-steps { display: flex; gap: var(--sds-space-1); }
.pipeline-step { flex: 1; height: 3px; border-radius: var(--sds-radius-pill); background: var(--sds-color-fill-gray); }
.pipeline-step:is([data-step="done"], [data-step="current"]) { background: var(--sds-color-accent); }
.pipeline-step[data-step="fixing"] { background: var(--sds-color-danger); }
.pipeline-more { width: 100%; min-height: var(--sds-size-control); padding: var(--sds-space-2); border: 0; border-radius: var(--sds-radius-control); background: var(--sds-color-accent-soft); color: var(--sds-color-on-accent-soft); font: inherit; font-weight: var(--sds-weight-semibold); cursor: pointer; }
.pipeline-grouped { display: grid; gap: var(--sds-space-3); }
.pipeline-grid-head > span { padding-inline: var(--sds-space-2); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.pipeline-row { display: grid; gap: var(--sds-space-2); }
.pipeline-cell { display: grid; align-content: start; gap: var(--sds-space-2); min-height: 3.5rem; padding: var(--sds-space-2); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-panel); min-width: 0; }
.pipeline-drawer { display: grid; gap: var(--sds-space-5); overflow-wrap: anywhere; }
.pipeline-pickup { display: grid; gap: var(--sds-space-1); padding: var(--sds-space-3) var(--sds-space-4); border: 1px solid var(--sds-color-accent); border-radius: var(--sds-radius-control); background: var(--sds-color-accent-soft); }
.pipeline-pickup h3 { margin: 0; color: var(--sds-color-on-accent-soft); font-size: var(--sds-type-footnote); }
.pipeline-pickup p { margin: 0; font-weight: var(--sds-weight-semibold); }
.pipeline-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-3); margin: 0; }
.pipeline-facts > div { display: grid; gap: var(--sds-space-1); min-width: 0; }
.pipeline-facts dt { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-facts dd { margin: 0; }
.pipeline-timeline { display: grid; gap: var(--sds-space-2); }
.pipeline-timeline h3 { margin: 0; font-size: var(--sds-type-headline); }
.pipeline-events { display: grid; gap: var(--sds-space-3); margin: 0; padding: 0; list-style: none; }
.pipeline-event { display: grid; gap: var(--sds-space-1); padding-left: var(--sds-space-3); border-left: 2px solid var(--sds-color-border); }
.pipeline-event:is([data-state="RED"], [data-state="STALL"], [data-state="DEPLOY FAILED"]) { border-left-color: var(--sds-color-danger); }
.pipeline-event:is([data-state="MERGED"], [data-state="DELIVERED"]) { border-left-color: var(--sds-color-accent); }
.pipeline-event-what { font-weight: var(--sds-weight-semibold); }
.pipeline-event time, .pipeline-event-why { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
@media (max-width: 1100px) { .pipeline-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pipeline-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-attention-item { grid-template-columns: minmax(0, 1fr); }
  .pipeline-facts { grid-template-columns: minmax(0, 1fr); }
}

/* WO-494: the pipeline from the lane mirror route: source, facts, who can work, the wall, the application filter, the drawer's sections. */
.development-apps { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); }
.pipeline-source { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-facts-row { display: flex; flex-wrap: wrap; gap: var(--sds-space-3) var(--sds-space-6); margin: 0; }
.pipeline-facts-row > div { display: flex; align-items: baseline; gap: var(--sds-space-2); min-width: 0; }
.pipeline-facts-row dt { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-facts-row dd { margin: 0; font-weight: var(--sds-weight-bold); font-variant-numeric: tabular-nums; }
.pipeline-overview { display: grid; gap: var(--sds-space-3); min-width: 0; }
.pipeline-overview.has-capacity { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.pipeline-capacity { display: grid; gap: var(--sds-space-3); padding: var(--sds-space-4); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); min-width: 0; }
.pipeline-runtime-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pipeline-runtime { display: grid; grid-template-columns: auto minmax(0, auto) auto minmax(0, 1fr); gap: var(--sds-space-2) var(--sds-space-3); align-items: center; padding-block: var(--sds-space-2); border-top: 1px solid var(--sds-color-hairline); }
.pipeline-runtime:first-child { border-top: 0; padding-top: 0; }
.pipeline-lamp { width: var(--sds-size-dot); height: var(--sds-size-dot); border-radius: var(--sds-radius-pill); background: var(--sds-color-fill-gray); }
.pipeline-runtime[data-ok="true"] .pipeline-lamp { background: var(--sds-color-success); }
.pipeline-runtime[data-ok="false"] .pipeline-lamp { background: var(--sds-color-danger); }
.pipeline-runtime-name { font-weight: var(--sds-weight-semibold); }
.pipeline-runtime-note { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }
.pipeline-runtime > .status-tag { justify-self: start; }
.pipeline-wall { display: grid; justify-items: start; gap: var(--sds-space-2); padding: var(--sds-space-4); border: 1px solid var(--sds-color-hairline); border-left: 2px solid var(--sds-color-accent); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); }
.pipeline-wall > span { color: var(--sds-color-muted); }
.pipeline-drawer-section { display: grid; gap: var(--sds-space-2); }
.pipeline-drawer-section h3 { margin: 0; font-size: var(--sds-type-headline); }
.pipeline-drawer-section p { margin: 0; }
.pipeline-drawer-line, .pipeline-pickup-note { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-checks { display: grid; gap: var(--sds-space-2); margin: 0; padding: 0; list-style: none; }
.pipeline-checks > li { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.pipeline-wo-text { max-height: 24rem; margin: 0; padding: var(--sds-space-3); overflow: auto; border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); color: var(--sds-color-text); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) { .pipeline-overview.has-capacity { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pipeline-runtime { grid-template-columns: auto minmax(0, 1fr) auto; } .pipeline-runtime-note { grid-column: 2 / -1; } }

/* WO-502: Milestones, Specs and mockups, Pick up here. Every colour and size is an SDS token. */
.development-view { display: grid; gap: var(--sds-space-4); min-width: 0; }
.development-lead { margin: 0; max-width: var(--sds-layout-reading); color: var(--sds-color-muted); }
.development-app { display: grid; gap: var(--sds-space-3); padding: var(--sds-space-4); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); min-width: 0; }
.development-app-head { display: flex; align-items: center; gap: var(--sds-space-3); flex-wrap: wrap; min-width: 0; }
.development-app-head h3 { margin: 0; font-size: var(--sds-type-headline); }
.development-app-meta { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-copy { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; margin-inline-start: auto; }
.development-copied { margin: 0; color: var(--sds-color-success); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.development-prompt-fallback { display: grid; gap: var(--sds-space-2); width: 100%; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-prompt-fallback textarea { width: 100%; min-height: calc(var(--sds-size-control) * 4); padding: var(--sds-space-2); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-field); background: var(--sds-color-raised); color: var(--sds-color-text); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); }
.development-missing, .development-drift { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-drift { padding-inline-start: var(--sds-space-3); border-inline-start: 2px solid var(--sds-color-warning); }
.milestone-bar { display: flex; gap: var(--sds-space-1); }
.milestone-bar-step { flex: 1; height: var(--sds-space-2); border-radius: var(--sds-radius-pill); background: var(--sds-color-fill-gray); }
.milestone-bar-step[data-status="done"] { background: var(--sds-color-accent); }
.milestone-bar-step[data-status="doing"] { background: var(--sds-color-info); }
.milestone-bar-step[data-status="review"] { background: var(--sds-color-warning); }
.milestone-bar-step[data-status="held"] { background: var(--sds-color-danger); }
.milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sds-space-3); }
.milestone-card { display: grid; align-content: start; gap: var(--sds-space-2); padding: var(--sds-space-3); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); min-width: 0; overflow-wrap: anywhere; }
.milestone-card-top { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; }
.milestone-id { color: var(--sds-color-subtle); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); }
.milestone-title { font-weight: var(--sds-weight-semibold); }
.milestone-note { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--sds-space-3); }
.development-doc { display: grid; gap: var(--sds-space-1); width: 100%; min-height: var(--sds-size-touch); padding: var(--sds-space-3); border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); color: var(--sds-color-text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.development-doc:hover, .development-doc:focus-visible { border-color: var(--sds-color-focus); }
.development-doc:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
.development-doc.is-mockup { border-style: dashed; border-color: var(--sds-color-accent); background: var(--sds-color-accent-soft); }
.development-doc-name { font-weight: var(--sds-weight-semibold); }
.development-doc-path { overflow: hidden; color: var(--sds-color-subtle); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); text-overflow: ellipsis; white-space: nowrap; }
.development-doc-meta { display: flex; justify-content: space-between; gap: var(--sds-space-2); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-mockup { display: grid; gap: var(--sds-space-3); }
.development-mockup-note { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-mockup-actions { display: flex; gap: var(--sds-space-2); }
.development-mockup-frame { width: 100%; height: 70vh; border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-bg); }
.development-pick-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sds-space-4); align-items: start; }
.development-pick-facts { display: grid; gap: var(--sds-space-2); min-width: 0; }
.development-pick-facts h4, .development-pick-brief h4 { margin: var(--sds-space-2) 0 0; color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.development-pick-facts h4:first-child, .development-pick-brief h4:first-child { margin-top: 0; }
.development-pick-list { display: grid; margin: 0; padding: 0; list-style: none; }
.development-pick-row { display: grid; gap: var(--sds-space-1); padding-block: var(--sds-space-2); border-top: 1px solid var(--sds-color-hairline); overflow-wrap: anywhere; }
.development-pick-row:first-child { border-top: 0; }
.development-pick-main { display: flex; align-items: center; gap: var(--sds-space-2); flex-wrap: wrap; }
.development-pick-sub { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-flag { color: var(--sds-color-warning); }
.development-pick-brief { display: grid; gap: var(--sds-space-2); min-width: 0; }
@media (max-width: 900px) { .development-pick-grid { grid-template-columns: minmax(0, 1fr); } }
/* WO-516: a document in the drawer reads as a document (markdown.mjs builds every element through html). */
.development-document { display: grid; gap: var(--sds-space-3); min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.development-document > *, .development-document li > *, .doc-md-quote > * { min-width: 0; margin: 0; }
.development-document .doc-md-heading { margin: var(--sds-space-2) 0 0; color: var(--sds-color-text); font-weight: var(--sds-weight-semibold); line-height: 1.3; }
.development-document > .doc-md-heading:first-child { margin-top: 0; }
.development-document .doc-md-heading[data-level="1"] { font-size: var(--sds-type-title); }
.development-document .doc-md-heading[data-level="2"] { font-size: var(--sds-type-headline); }
.development-document .doc-md-heading[data-level="3"] { font-size: var(--sds-type-body); }
.development-document .doc-md-heading:is([data-level="4"], [data-level="5"], [data-level="6"]) { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.development-document p { margin: 0; }
.doc-md-list { display: grid; gap: var(--sds-space-1); margin: 0; padding-inline-start: var(--sds-space-5); }
.doc-md-list .doc-md-list { margin-top: var(--sds-space-1); }
.doc-md-list > li > :is(p, pre, blockquote, .doc-md-table-wrap) + * { margin-top: var(--sds-space-2); }
.doc-md-quote { display: grid; gap: var(--sds-space-2); margin: 0; padding-inline-start: var(--sds-space-3); border-inline-start: 2px solid var(--sds-color-border); color: var(--sds-color-muted); }
.development-document hr { width: 100%; margin: var(--sds-space-1) 0; border: 0; border-top: 1px solid var(--sds-color-hairline); }
.doc-md-code { padding: 0 var(--sds-space-1); border-radius: var(--sds-radius-small); background: var(--sds-color-fill-gray); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); }
.doc-md-pre { max-width: 100%; margin: 0; padding: var(--sds-space-3); overflow-x: auto; border: 1px solid var(--sds-color-hairline); border-radius: var(--sds-radius-control); background: var(--sds-color-raised); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); line-height: 1.45; white-space: pre; overflow-wrap: normal; }
.doc-md-pre code { font: inherit; }
.doc-md-table-wrap { max-width: 100%; overflow-x: auto; }
.doc-md-table { border-collapse: collapse; font-size: var(--sds-type-footnote); }
.doc-md-table :is(th, td) { padding: var(--sds-space-1) var(--sds-space-2); border: 1px solid var(--sds-color-hairline); text-align: left; vertical-align: top; overflow-wrap: normal; }
.doc-md-table th { background: var(--sds-color-raised); font-weight: var(--sds-weight-semibold); }
.doc-md-table [data-align="center"] { text-align: center; }
.doc-md-table [data-align="right"] { text-align: right; }
.doc-md-link { color: var(--sds-color-action); text-decoration: underline; text-underline-offset: 2px; }
.doc-md-link:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); border-radius: var(--sds-radius-small); }
.doc-md-doclink { padding: 0; border: 0; background: none; color: var(--sds-color-action); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.doc-md-doclink:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); border-radius: var(--sds-radius-small); }
.doc-md-dest { color: var(--sds-color-subtle); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); overflow-wrap: anywhere; }

/* WO-652: the known-failures book on Development. */
.development-known { display: grid; gap: var(--sds-space-3); }
.knowledge-value { font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); }
.knowledge-table { width: 100%; border-collapse: collapse; font-size: var(--sds-type-footnote); }
.knowledge-table th, .knowledge-table td { padding: var(--sds-space-2); border-bottom: 1px solid var(--sds-color-hairline); text-align: left; vertical-align: top; }
.knowledge-table th { color: var(--sds-color-muted); font-weight: var(--sds-weight-semibold); }
.knowledge-table td > span { display: block; }
.knowledge-slug { font-family: var(--sds-font-mono); }

/* --------------------------------------------------------------------------
   WO-706 — the foreman's live feed strip (foreman-ticker.mjs) on Today, Fleet
   and the phone's Today. The newest line leads; earlier lines scroll inside a
   fixed-height list, so a new line never pushes the page down. Colour marks
   the severity: done, in motion, waiting on you, a problem.
   -------------------------------------------------------------------------- */
.foreman-ticker {
  display: grid;
  gap: var(--sds-space-2);
  min-width: 0;
  padding: var(--sds-space-3);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-panel);
  background: var(--sds-color-panel);
}
.foreman-ticker:empty { display: none; }
.foreman-ticker-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); min-width: 0; }
.foreman-ticker-title {
  display: inline-flex; align-items: center; gap: var(--sds-space-1);
  margin: 0; color: var(--sds-color-text);
  font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); line-height: var(--sds-line-tight);
}
.foreman-ticker-status { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); }
.foreman-ticker-status[data-state="live"] { color: var(--sds-color-success); }
.foreman-ticker-status[data-state="reconnecting"],
.foreman-ticker-status[data-state="loading"] { color: var(--sds-color-warning); }
.foreman-ticker-filter,
.foreman-ticker-scope { min-width: 0; max-width: 100%; margin-inline-start: auto; }
.foreman-ticker-scope { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.foreman-ticker-filter select {
  max-width: 100%; min-height: var(--sds-size-control);
  padding: 0 var(--sds-space-2);
  border: 1px solid var(--sds-color-control-border); border-radius: var(--sds-radius-control);
  background: var(--sds-color-bg); color: var(--sds-color-text);
  font-size: var(--sds-type-footnote);
}
.foreman-ticker-filter select:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: 1px; }
.foreman-ticker-now,
.foreman-ticker-list { display: grid; gap: var(--sds-space-1); min-width: 0; margin: 0; padding: 0; list-style: none; }
.foreman-ticker-list { max-height: 9.5rem; overflow-y: auto; overscroll-behavior: contain; }
.foreman-ticker-line { min-width: 0; border-inline-start: 2px solid var(--sds-color-border); }
.foreman-ticker-line[data-severity="done"] { border-inline-start-color: var(--sds-color-success); }
.foreman-ticker-line[data-severity="motion"] { border-inline-start-color: var(--sds-color-accent); }
.foreman-ticker-line[data-severity="waiting"] { border-inline-start-color: var(--sds-color-warning); }
.foreman-ticker-line[data-severity="problem"] { border-inline-start-color: var(--sds-color-danger); }
.foreman-ticker-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--sds-space-2);
  min-width: 0; padding: var(--sds-space-1) var(--sds-space-2);
  border-radius: 0 var(--sds-radius-small) var(--sds-radius-small) 0;
  color: var(--sds-color-text); text-decoration: none; font-size: var(--sds-type-footnote);
}
a.foreman-ticker-link:hover { background: var(--sds-color-fill-gray); }
a.foreman-ticker-link:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: calc(var(--sds-focus-width) * -1); }
.foreman-ticker-mark { display: inline-grid; place-items: center; align-self: center; color: var(--sds-color-subtle); }
.foreman-ticker-line[data-severity="done"] .foreman-ticker-mark { color: var(--sds-color-success); }
.foreman-ticker-line[data-severity="motion"] .foreman-ticker-mark { color: var(--sds-color-accent); }
.foreman-ticker-line[data-severity="waiting"] .foreman-ticker-mark { color: var(--sds-color-warning); }
.foreman-ticker-line[data-severity="problem"] .foreman-ticker-mark { color: var(--sds-color-danger); }
.foreman-ticker-text { min-width: 0; overflow-wrap: anywhere; }
.foreman-ticker-now .foreman-ticker-link { font-size: var(--sds-type-body); }
.foreman-ticker-now .foreman-ticker-text {
  display: -webkit-box; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.foreman-ticker-meta { color: var(--sds-color-subtle); font-size: var(--sds-type-footnote); white-space: nowrap; }
.foreman-ticker-empty { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
@media (max-width: 640px) {
  .foreman-ticker-link { grid-template-columns: auto minmax(0, 1fr); }
  .foreman-ticker-meta { grid-column: 2; white-space: normal; }
  .foreman-ticker-list { max-height: 8rem; }
}