/* Crew lens: agent-centric 3D scene. Self-contained; reuses the Lens root palette variables. */
.crew-lens { position: relative; height: calc(100vh - 150px); min-height: 520px; border-radius: 14px; overflow: hidden; background: #070a10; border: 1px solid var(--line, #303c4d); }
/* the director's cut keeps the layout: same size, every panel and control in place (Richard, 2026-09-24) */
.crew-lens canvas { display: block; width: 100%; height: 100%; }
.crew-hud { position: absolute; inset: 0; pointer-events: none; font: 12px/1.35 -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--soft, #c9d4dc); }
.crew-hud > * { pointer-events: auto; }
.crew-top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crew-top .spacer { flex: 1; }
.crew-hud select, .crew-hud button { background: rgba(20,28,39,.82); color: var(--text, #eef3f5); border: 1px solid var(--line2, #4b5b70); border-radius: 8px; padding: 4px 9px; font: inherit; cursor: pointer; backdrop-filter: blur(6px); }
.crew-hud button.on { border-color: var(--cyan, #62d7e7); color: var(--cyan, #62d7e7); }
.crew-hud .kicker { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #9ca9b5); }
.crew-hud .title { font-weight: 700; font-size: 14px; color: var(--text, #eef3f5); }
.crew-time { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 8px; align-items: center; background: rgba(12,16,23,.72); border: 1px solid var(--line, #303c4d); border-radius: 10px; padding: 6px 10px; backdrop-filter: blur(6px); }
/* ---- the two sliders ------------------------------------------------ *
 * They do different jobs and now look it. The scrubber is a dark recessed
 * channel under a playhead needle, reading as a track the timeline block sits
 * on. The speed slider is a heat scale, green through red, reading as an
 * amount rather than a position. Both were one `accent-color` line before,
 * which made a position control and a magnitude control identical. */

/* scrubber */
.crew-time > input[type=range] { flex: 1; -webkit-appearance: none; appearance: none;
  background: transparent; height: 16px; margin: 0; cursor: pointer; }
.crew-time > input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: #070b11;
  border: 1px solid #202b3a; box-shadow: inset 0 1px 3px rgba(0,0,0,.85); }
.crew-time > input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px; background: #070b11;
  border: 1px solid #202b3a; box-shadow: inset 0 1px 3px rgba(0,0,0,.85); }
/* A needle, not a knob: the point marks the instant and the stem carries the
   eye down from the plot above. Apex up, into the timeline it indexes. */
.crew-time > input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 15px;
  margin-top: -5px; border: 0; background: var(--cyan, #62d7e7);
  clip-path: polygon(50% 0, 100% 46%, 57% 46%, 57% 100%, 43% 100%, 43% 46%, 0 46%);
  filter: drop-shadow(0 0 3px rgba(98,215,231,.55)); cursor: pointer; }
.crew-time > input[type=range]::-moz-range-thumb {
  width: 13px; height: 15px; border: 0; background: var(--cyan, #62d7e7);
  clip-path: polygon(50% 0, 100% 46%, 57% 46%, 57% 100%, 43% 100%, 43% 46%, 0 46%);
  cursor: pointer; }

/* speed: cool at rest, hot when the replay is running away with you */
.crew-time .speed input[type=range] { -webkit-appearance: none; appearance: none;
  width: 88px; height: 14px; margin: 0 2px; background: transparent; cursor: pointer; }
.crew-time .speed input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; border: 1px solid #141c27;
  background: linear-gradient(90deg, #17694180 0%, #3ddc84 26%, #ffd24a 60%, #ff8a3d 82%, #ff4b45 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.crew-time .speed input[type=range]::-moz-range-track {
  height: 5px; border-radius: 3px; border: 1px solid #141c27;
  background: linear-gradient(90deg, #17694180 0%, #3ddc84 26%, #ffd24a 60%, #ff8a3d 82%, #ff4b45 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.crew-time .speed input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px;
  margin-top: -4px; border-radius: 50%; background: #05080d;
  border: 2px solid #e8f1f6; box-shadow: 0 0 0 1px rgba(0,0,0,.75); cursor: pointer; }
.crew-time .speed input[type=range]::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; background: #05080d;
  border: 2px solid #e8f1f6; cursor: pointer; }

/* The bar the two sit in goes darker with them, so the sliders are the
   brightest thing in it rather than competing with their own container. */
.crew-time { background: rgba(7,11,17,.86); }
/* No clock block: the date and time sit over the play head and the mode rides on the same label, so the scrubber
   takes the width. The margin keeps the play-head label, which is clamped inside the track, clear of the buttons
   either side of it. */
.crew-time > input[type=range] { margin: 0 16px; }
.crew-time .speed { display: flex; gap: 2px; position: relative; }
/* under the speed slider: how fast the record's clock runs and how fast work plays */
.crew-time .speed .speed-cap { position: absolute; right: 2px; bottom: -8px; width: 88px; text-align: center; font-size: 8.5px; line-height: 9px;
  letter-spacing: .02em; color: #9fb4c4; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.crew-time .speed button { padding: 3px 7px; border-radius: 6px; }
.crew-legend { position: absolute; z-index: 29; right: 12px; top: 52px; display: grid; grid-template-columns: auto auto; gap: 3px 10px; background: rgba(12,16,23,.62); border: 1px solid var(--line, #303c4d); border-radius: 10px; padding: 8px 10px; font-size: 11px; color: var(--muted, #9ca9b5); }
.crew-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.crew-tip { position: absolute; max-width: 360px; background: rgba(12,16,23,.92); border: 1px solid var(--line2, #4b5b70); border-radius: 10px; padding: 8px 10px; white-space: pre-line; font-size: 11.5px; color: var(--text, #eef3f5); display: none; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.crew-doss { position: absolute; z-index: 31; right: 12px; top: 52px; width: 380px; max-height: 60%; overflow: auto; background: rgba(12,16,23,.94); border: 1px solid var(--line2, #4b5b70); border-radius: 12px; padding: 12px 14px; display: none; white-space: pre-wrap; font-size: 12px; color: var(--text, #eef3f5); box-shadow: 0 12px 36px rgba(0,0,0,.5); }
.crew-doss h3 { margin: 0 0 6px; font-size: 13px; color: var(--cyan, #62d7e7); }
.crew-doss .x { float: right; cursor: pointer; color: var(--muted, #9ca9b5); }
.crew-doss b { color: var(--cyan, #62d7e7); font-weight: 600; }
.crew-doss details { margin: 2px 0; }
.crew-doss summary { cursor: pointer; color: var(--muted, #9ca9b5); }
.crew-doss .muted { color: var(--muted, #9ca9b5); }
.crew-doss button.prompt { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 8px; font-size: 11px; }
.crew-settings { position: absolute; z-index: 30; right: 12px; top: 52px; width: 300px; max-height: calc(100% - 120px); overflow-y: auto; overscroll-behavior: contain; background: rgba(12,16,23,.94); border: 1px solid var(--line2, #4b5b70); border-radius: 12px; padding: 10px 12px; display: none; font-size: 11.5px; box-shadow: 0 12px 36px rgba(0,0,0,.5); }
.crew-settings h3 { margin: 0 0 8px; font-size: 12px; color: var(--cyan, #62d7e7); cursor: move; }
.crew-settings label { display: grid; grid-template-columns: 118px 1fr 44px; gap: 6px; align-items: center; margin: 4px 0; color: var(--soft, #c9d4dc); }
.crew-settings input[type=range] { width: 100%; accent-color: var(--cyan, #62d7e7); }
.crew-settings output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted, #9ca9b5); }
.crew-settings .nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.crew-lens .crew-settings .nav button, .crew-settings .nav button { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 0 9px; height: 20px; min-height: 0; line-height: 20px; min-width: 0; width: auto; aspect-ratio: auto; border-radius: 10px; white-space: nowrap; }
.crew-settings .grp { border: 1px solid var(--line2, #4b5b70); border-radius: 10px; padding: 6px 10px 6px; margin: 0 0 10px; background: rgba(255,255,255,.025); }
.crew-settings .grp h4 { margin: -6px -10px 8px; padding: 6px 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan, #62d7e7); background: rgba(98,215,231,.1); border-bottom: 1px solid var(--line2, #4b5b70); border-radius: 10px 10px 0 0; }
/* ---- timeline block -------------------------------------------------- *
 * A framed block sitting directly on the scrubber, spanning exactly its
 * travel. Row order top to bottom matches the legend left to right, and the
 * legend carries a live count per kind so an empty row reads as "none of
 * these happened" rather than as a rendering gap. */
.crew-tl { position: absolute; bottom: calc(100% - 3px); height: 61px;
  border: 1px solid rgba(120,160,190,.26); border-bottom: none;
  border-radius: 8px 8px 0 0; background: rgba(8,12,19,.78);
  backdrop-filter: blur(6px); pointer-events: none; }

/* Spans the replay compresses. Drawn behind the plot so marks stay readable
   over them, and shaded rather than outlined so they read as absence. */
.crew-tl-bands { position: absolute; left: 0; right: 0; top: 12px; bottom: 0;
  pointer-events: none; overflow: hidden; }
.crew-tl-bands i { position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(115deg,
    rgba(120,160,190,.10) 0 4px, rgba(120,160,190,0) 4px 9px);
  border-left: 1px solid rgba(120,160,190,.14);
  border-right: 1px solid rgba(120,160,190,.14); pointer-events: auto; }

/* Unseen since last presence. Amber, the one warm tone the block uses, so an
   absence reads as "you missed this" against the cool plot. The band is a wash
   rather than a hatch so it cannot be confused with the quiet bands, which are
   hatched because they are absence of activity, not absence of the operator. */
.crew-tl-unseen { position: absolute; left: 0; right: 0; top: 12px; bottom: 0;
  pointer-events: none; }
.crew-tl-unseen i { position: absolute; top: 0; bottom: 0;
  background: rgba(255,189,85,.12); border-left: 1px solid rgba(255,189,85,.62); }
.crew-tl-unseen i.late { background: rgba(255,189,85,.38); border-left: 0; }
.crew-tl-seen-mark { position: absolute; top: 1px; margin-left: 4px; z-index: 4;
  padding: 0 5px; border-radius: 4px; background: rgba(6,10,16,.86);
  font-size: 9px; font-weight: 600; letter-spacing: .04em; color: #ffbd55;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Near the right edge the label would run out of the block: hang it to the left
   of its line instead. */
.crew-tl-seen-mark.flip { margin-left: -4px; transform: translateX(-100%); }

/* The axis. Ticks sit at real instants mapped through the warp, so their
   spacing is uneven wherever the replay skips quiet — the bands above explain
   the gaps. */
.crew-tl-axis { position: absolute; left: 0; right: 0; top: 46px; height: 14px;
  pointer-events: none; }
.crew-tl-axis i { position: absolute; top: 6px; width: 1px; height: 3px;
  background: rgba(150,180,205,.40); }
.crew-tl-axis i.maj { top: 4px; height: 6px; background: rgba(190,215,235,.75); }
.crew-tl-axis i.maj b { position: absolute; left: 3px; top: -4px; font-weight: 500;
  font-size: 9px; letter-spacing: .03em; color: #8fa6b6; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

.crew-tl-legend { display: flex; gap: 9px; align-items: center; height: 12px;
  padding: 0 8px; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8fa6b6; white-space: nowrap; overflow: hidden; pointer-events: none; }
.crew-tl-key { display: inline-flex; align-items: center; gap: 4px; }
.crew-tl-key.off { opacity: .32; }
/* each legend key explains its row on hover (the caption above the block) */
.crew-lens .crew-tl .crew-tl-key { pointer-events: auto; cursor: help; }
.crew-tl-key i { width: 6px; height: 6px; border-radius: 2px; }
.crew-tl-key b { font-weight: 600; color: #cfe2ee; font-variant-numeric: tabular-nums; }

/* The plot. Seven rows 5px apart (fan-out, stall, drift, cyber, model, converge,
   nudge) and marks sit inside them; `top` is set in JS from the same row table
   the legend is ordered by. */
.crew-flags { position: absolute; left: 0; right: 0; top: 12px; height: 34px;
  pointer-events: none; }
.crew-flags i { position: absolute; width: 3px; height: 4px; margin-left: -1px;
  border-radius: 1px; pointer-events: auto; cursor: pointer; opacity: .85;
  transition: transform 90ms ease-out, opacity 90ms ease-out;
  transform-origin: 50% 50%; }
/* Grow in both axes, not just across: scaleX alone smeared the mark into a
   dash and told the eye nothing about which row it was in. */
.crew-flags i:hover { transform: scale(2.8); opacity: 1; z-index: 3;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.35); }
/* Fabricated traffic reads dimmer, so a glance at the plot separates the
   record from the dummy comms without opening a caption. */
.crew-flags i.dummy { opacity: .55; }

/* One colour per kind for the mark, the legend swatch and the hover caption's swatch. Cyber warnings are pale
   blue and holds deep blue (the hold's matrix screen is blue); a served model that differs from the request is
   magenta, clear of the tier glow's red, orange, yellow and white. */
.crew-flags .k-fanout, .crew-tl-key .k-fanout, .crew-tl-cap .k-fanout { background: #c79bff; }
.crew-flags .k-stall, .crew-tl-key .k-stall, .crew-tl-cap .k-stall { background: #ff6671; }
.crew-flags .k-drift, .crew-tl-key .k-drift, .crew-tl-cap .k-drift { background: #ffbd55; }
.crew-flags .k-cyberwarn, .crew-tl-key .k-cyberwarn, .crew-tl-cap .k-cyberwarn { background: #9fd0ff; }
.crew-flags .k-cyberhold, .crew-tl-key .k-cyberhold, .crew-tl-cap .k-cyberhold { background: #3d7bff; }
.crew-flags .k-model, .crew-tl-key .k-model, .crew-tl-cap .k-model { background: #ff5fd2; }
.crew-flags .k-converge, .crew-tl-key .k-converge, .crew-tl-cap .k-converge { background: #3ddc84; }
.crew-flags .k-nudge, .crew-tl-key .k-nudge, .crew-tl-cap .k-nudge { background: #fff6e0; }

/* The leader: a hairline from the hovered mark down to the track, so a point
   in the plot can be carried to the instant it belongs to. */
/* bottom is negative so the hairline crosses the 8px gap between the block's
   frame and the scrubber track and actually lands on it — stopping at the
   frame left it pointing at nothing in particular. */
.crew-tl-lead { position: absolute; width: 1px; bottom: -10px; margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.18));
  opacity: 0; transition: opacity 90ms ease-out; pointer-events: none; }
.crew-tl-lead.on { opacity: 1; }

.crew-tl-cap { position: absolute; bottom: calc(100% + 5px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px;
  background: rgba(12,16,23,.95); border: 1px solid rgba(120,160,190,.42);
  font-size: 11px; color: #cfe2ee; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 90ms ease-out; }
.crew-tl-cap.on { opacity: 1; }
.crew-tl-cap b { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.crew-tl-cap .k { width: 7px; height: 7px; border-radius: 2px; }
.crew-tl-cap .kind { text-transform: uppercase; letter-spacing: .07em; font-size: 9px; color: #8fa6b6; }
.crew-tl-cap .what { color: #9fb4c4; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; }
.crew-tl-cap.help { white-space: normal; flex-wrap: wrap; width: 300px; row-gap: 2px; }
.crew-tl-cap.help .what { flex-basis: 100%; max-width: none; overflow: visible; line-height: 1.35; color: #cfe2ee; }

@media (prefers-reduced-motion: reduce) {
  .crew-flags i, .crew-tl-lead, .crew-tl-cap { transition: none; }
}
.crew-label { position: absolute; z-index: 3; transform: translate(-50%, 0); padding: 1px 6px; border-radius: 6px; background: rgba(7,10,16,.55); color: var(--text, #eef3f5); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.crew-label small { display: block; font-weight: 500; font-size: 9.5px; color: var(--muted, #9ca9b5); }
.crew-label.ring { background: transparent; color: var(--cyan, #62d7e7); font-weight: 500; font-size: 10.5px; opacity: .9; }
.crew-status { position: absolute; left: 12px; top: 44px; font-size: 11px; color: var(--muted, #9ca9b5); }
@media (prefers-reduced-motion: reduce) { .crew-lens { --crew-motion: 0; } }
/* theme switch (crew-theme.js) */
.crew-themes { position: relative; }
.crew-theme-host { position: absolute; inset: 0; height: auto !important; min-height: 0 !important; border: 0; border-radius: 0; }
.crew-theme-bar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 20; display: flex; gap: 4px; background: rgba(12,16,23,.85); border: 1px solid var(--line2, #4b5b70); border-radius: 999px; padding: 3px; }
.crew-theme-bar button { border: 0; background: transparent; color: var(--text, #eef3f5); font: 600 11px/1 -apple-system, system-ui, sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer; opacity: .7; }
.crew-theme-bar button.on { background: rgba(95,215,255,.22); opacity: 1; }

.crew-settings h4 { margin: 12px 0 4px; font-size: 10.5px; color: #9ca9b5; text-transform: uppercase; letter-spacing: .06em; }
.crew-settings h4:first-of-type { margin-top: 6px; }

/* director: cut dip, letterbox, lower-third caption; the hud fades in after the fly-in */
.crew-dip { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .12s; pointer-events: none; z-index: 30; }
.crew-hud { transition: opacity .6s; }
.crew-letterbox { position: absolute; left: 0; right: 0; height: 0; background: #000; pointer-events: none; z-index: 25; transition: height .4s; }
.crew-letterbox.top { top: 0; } .crew-letterbox.bottom { bottom: 0; }
.crew-veil { position: absolute; inset: 0; pointer-events: none; z-index: 24; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,20,30,0) 38%, rgba(255,20,30,.28) 62%, rgba(180,0,16,.85) 100%); box-shadow: inset 0 0 120px 40px rgba(200,0,20,.55); }
.crew-caption { position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px; max-width: 70%; padding: 6px 12px; border-left: 3px solid #5fd7ff; background: rgba(6,10,16,.75); color: #eef3f5; font: 600 13px/1.3 -apple-system, system-ui, sans-serif; letter-spacing: .02em; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 26; display: none; }
.crew-lens.presentation .crew-caption { display: block; }
.crew-settings select { flex: 1; min-width: 0; background: #0c1017; color: #eef3f5; border: 1px solid #4b5b70; border-radius: 6px; padding: 2px 4px; font-size: 11px; }

.crew-legend img { width: 14px; height: 14px; vertical-align: -3px; margin-right: 6px; border-radius: 3px; }

.crew-settings-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.crew-settings-row button { font: inherit; font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.crew-settings-row button:hover { background: rgba(255,255,255,.18); }
.crew-settings-note { font-size: 11px; opacity: .7; }

.crew-legend.hidden { display: none; }
.crew-legend-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; color: var(--soft, #c9d4dc); }
.crew-legend-head .x { font: inherit; font-size: 10px; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; }
.crew-lens.settings-open .crew-legend { right: 324px; }

/* The playhead's clock. It used to be a bordered bubble 30px above the track,
   which put it inside the timeline block once that block existed — legible only
   where the plot happened to be empty. It now sits above the block, directly
   over the needle, set in the axis labels' size so it reads as part of the same
   scale rather than as a tooltip. Brighter than the notches because it is the
   one value that moves, and glowing rather than boxed so it stays readable over
   the scene without another border competing with the block's. */
/* Negative, so it drops out of the block and sits on the needle's apex: the
   block's bottom edge sits 8px above the track. Slim (no vertical padding, an
   11px line) so it reaches only 3px into the block: over the axis when the
   block is open, under the single row of marks when it is folded. */
.crew-scrub-tip { position: absolute; bottom: -8px; transform: translateX(-50%);
  z-index: 6; padding: 0 7px; line-height: 11px; border-radius: 4px;
  background: rgba(6,10,16,.82);
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  color: #eafaff; font-variant-numeric: tabular-nums; white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 7px rgba(98,215,231,.95), 0 0 14px rgba(98,215,231,.5),
               0 1px 3px rgba(0,0,0,.95); }

/* Timeline fold. The toggle sits in the block's top-right corner; folded, the
   block is one line of marks and nothing else: no legend, no axis, and the
   toggle moves to a tab above the corner so the newest marks, at the right
   end, stay uncovered. */
.crew-lens .crew-tl .crew-tl-toggle { position: absolute; top: 0; right: 2px; z-index: 7; pointer-events: auto;
  width: 16px; height: 12px; padding: 0; border: 0; border-radius: 3px; background: transparent;
  color: #8fa6b6; font-size: 10px; line-height: 12px; cursor: pointer; min-width: 0; box-shadow: none; }
.crew-lens .crew-tl .crew-tl-toggle:hover { color: #eafaff; background: rgba(120,160,190,.18); }
.crew-tl.min { height: 14px; }
.crew-tl.min { border-top-right-radius: 0; }
.crew-tl.min .crew-tl-legend { display: none; }
.crew-lens .crew-tl.min .crew-tl-toggle { top: -13px; right: -1px; height: 13px;
  border: 1px solid rgba(120,160,190,.26); border-bottom: 0; border-radius: 4px 4px 0 0;
  background: rgba(8,12,19,.78); }
.crew-tl.min .crew-flags, .crew-tl.min .crew-tl-bands, .crew-tl.min .crew-tl-unseen { top: 0; height: 14px; }
.crew-tl.min .crew-flags i { top: 3px !important; }
.crew-tl.min .crew-tl-axis { display: none; }
/* The loading card (2026-09-23): covers the lens until the models are in, so the stand-in figures the scene is first built with are never seen */
.crew-loading { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 42%, #0f1824 0%, #070a10 72%); transition: opacity .6s ease; }
.crew-loading.done { opacity: 0; pointer-events: none; }
.crew-load-card { width: min(300px, 72%); text-align: center; font: 12px/1.4 -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--soft, #c9d4dc); }
.crew-load-card .kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7fe3ff; }
.crew-load-t { margin: 6px 0 14px; font-size: 15px; font-weight: 600; color: #eef4f8; }
.crew-load-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.crew-load-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2e9bff, #7fe3ff); box-shadow: 0 0 8px rgba(127,227,255,.8); transition: width .3s ease; }
.crew-load-n { margin-top: 8px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted, #9ca9b5); }
@media (prefers-reduced-motion: reduce) { .crew-loading, .crew-load-bar i { transition: none; } }
/* help (Richard, 2026-09-24): how to move around first, then the legend; the panel starts minimized */
.crew-legend { max-width: min(560px, calc(100% - 24px)); }
.crew-help-nav { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 2px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #303c4d); }
.crew-help-nav b { color: var(--soft, #c9d4dc); font-weight: 600; white-space: nowrap; }
.crew-help-sub { grid-column: 1 / -1; margin-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft, #c9d4dc); }

/* crew stats (v9.1, 2026-09-24): the robot menu, the stats window and the crew board, as glossy glass. --fam is the agent's
   family colour (Claude warm, Codex blue); every block is frosted glass with a gloss band over its top half and a faint
   family glow in one corner. */
.crew-lens .crew-top .crew-boardbtn { border-color: rgba(255,255,255,.28); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }
.crew-doss .crew-statsbtn { margin-left: 8px; padding: 3px 9px; font: 600 11px/1.2 system-ui, sans-serif; color: #eef3f5; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05)); cursor: pointer; vertical-align: 2px; }
.crs-menu { position: absolute; z-index: 62; min-width: 210px; padding: 6px; border-radius: 16px; color: #eef3f5; font: 13px/1.2 system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.05) 55%, rgba(255,255,255,.09)); border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 20px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); animation: crs-pop .14s ease-out; }
.crs-menu .h { display: flex; align-items: center; gap: 8px; padding: 7px 10px 9px; font-weight: 700; font-size: 14px; }
.crs-menu .h i { width: 9px; height: 9px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 10px var(--fam); }
.crs-menu .h span { margin-left: auto; font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #a9bccb; }
.crs-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crs-menu button b { width: 18px; text-align: center; color: var(--fam); }
.crs-menu button:hover, .crs-menu button:focus-visible { background: rgba(255,255,255,.15); outline: none; }
.crs-menu button[disabled] { opacity: .4; cursor: default; }
.crs-toast { position: absolute; z-index: 63; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; color: #eef3f5; font: 12.5px/1.2 system-ui, sans-serif; background: rgba(20,26,36,.75); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .5s; }
.crs-toast.out { opacity: 0; }
@keyframes crs-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes crs-rise { from { opacity: 0; transform: translate(-50%, -48%) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%); } }

.crs-win { --fam: #c8d2da; position: absolute; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1180px, calc(100% - 28px)); height: min(720px, calc(100% - 36px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; color: #eef3f5; font: 13px/1.35 system-ui, -apple-system, sans-serif;
  background: linear-gradient(150deg, rgba(22,30,42,.62), rgba(8,11,17,.72)); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 34px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); animation: crs-rise .22s ease-out; }
.crs-win.board { width: min(1040px, calc(100% - 28px)); height: min(760px, calc(100% - 36px)); }
.crs-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; cursor: grab; user-select: none; border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); }
.crs-head:active { cursor: grabbing; }
.crs-head .id { font: 800 21px/1 system-ui, -apple-system, sans-serif; letter-spacing: .01em; }
.crs-head .sp { flex: 1; }
.crs-head .note { color: #9fb3c2; font-size: 11.5px; }
.crs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 14px var(--fam), inset 0 1px 2px rgba(255,255,255,.7); }
.crs-chip { padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.2 system-ui, sans-serif; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.2); }
.crs-chip.ghost { background: transparent; color: #b8c7d3; }
.crs-x, .crs-btn { border: 1px solid rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); color: #eef3f5; border-radius: 10px; padding: 6px 10px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.crs-x:hover, .crs-btn:hover { background: rgba(255,255,255,.22); }
.crs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(250px, 30%) 1fr; }
.crs-robot { position: relative; border-right: 1px solid rgba(255,255,255,.08); background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--fam) 16%, transparent), transparent 70%); }
.crs-robot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.crs-robot .cap { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #cfdbe4; background: rgba(8,12,18,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* rows sized to their content (a card clips its glow, and an overflow-hidden grid item would otherwise be squeezed to the
   panel height); dense flow fills the gaps the two-column cards leave */
.crs-blocks { overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); grid-auto-rows: max-content; grid-auto-flow: row dense; gap: 12px; align-content: start; }
.crs-card { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 15px 13px; min-width: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.04) 52%, rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.3); }
.crs-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 52%; pointer-events: none; border-radius: 18px 18px 50% 50% / 18px 18px 26px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); }
.crs-card::after { content: ""; position: absolute; right: -40px; top: -50px; width: 150px; height: 150px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fam) 34%, transparent), transparent 68%); opacity: .75; }
.crs-card > * { position: relative; z-index: 1; }
.crs-card.wide { grid-column: span 2; }
.crs-card .k { display: flex; align-items: center; gap: 6px; font: 700 10.5px/1.2 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #a9bccb; }
.crs-card .v { margin: 9px 0 4px; font: 800 30px/1.05 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.crs-card .v.sm { font-size: 24px; }
.crs-card .v small { font-size: 13px; font-weight: 600; color: #b8c7d3; letter-spacing: 0; }
.crs-card .s { color: #c3d0da; font-size: 12px; margin-top: 3px; }
.crs-card .s.dim { color: #8ea2b1; font-size: 11.5px; }
.crs-card .s.sub { margin-top: 9px; color: #9fb3c2; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.crs-card .s a, .crs-foot a { color: #9fd2ff; }
.crs-card .ins { color: #7cf0b8; } .crs-card .del { color: #ff8f8f; }
.crs-card.mini { padding: 12px 13px; } .crs-card.mini .v { margin: 7px 0 3px; }
.crs-tag { padding: 2px 7px; border-radius: 999px; font: 700 9.5px/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); color: #cfdbe4; background: rgba(255,255,255,.08); }
.crs-tag.real { color: #8ff0c0; background: rgba(90,220,160,.14); border-color: rgba(90,220,160,.35); }
.crs-tag.demo { color: #ffd58a; background: rgba(255,190,80,.14); border-color: rgba(255,190,80,.35); }
.crs-tag.api { color: #cfe3ff; background: rgba(110,170,255,.14); border-color: rgba(110,170,255,.35); }
.crs-ps { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.crs-p { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 10px; font: 700 11px/1 system-ui, sans-serif; border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.crs-p b { font-size: 14px; }
.crs-p.p0 { background: linear-gradient(180deg, rgba(255,70,90,.55), rgba(255,70,90,.25)); }
.crs-p.p1 { background: linear-gradient(180deg, rgba(255,140,60,.55), rgba(255,140,60,.22)); }
.crs-p.p2 { background: linear-gradient(180deg, rgba(255,210,80,.45), rgba(255,210,80,.18)); }
.crs-p.p3 { background: linear-gradient(180deg, rgba(120,170,230,.45), rgba(120,170,230,.16)); }
.crs-p.zero { opacity: .38; }
.crs-bar { display: flex; height: 12px; margin: 10px 0 6px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.crs-bar i { display: block; height: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.crs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: #c3d0da; }
.crs-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.crs-rows .r { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 52px; gap: 10px; align-items: center; margin: 7px 0; font-size: 12px; }
.crs-rows em { color: #9fb3c2; font-style: normal; }
.crs-rows b { text-align: right; font-variant-numeric: tabular-nums; }
.crs-mini { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.crs-mini i { display: block; height: 100%; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.crs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.crs-pills span { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: #cfdbe4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.crs-spark { display: block; width: 100%; height: 46px; margin-top: 8px; }
.crs-foot { padding: 8px 18px 11px; font-size: 11px; color: #8ea2b1; border-top: 1px solid rgba(255,255,255,.08); }
.crs-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); grid-auto-rows: max-content; gap: 10px; padding: 14px 16px 4px; }
.crs-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 8px; }
.crs-tabs button { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #cfdbe4; font: 600 11.5px/1 system-ui, sans-serif; cursor: pointer; }
.crs-tabs button.on { color: #fff; border-color: rgba(255,255,255,.5); background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.crs-rowsbox { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; }
.crs-row { --fam: #c8d2da; display: grid; grid-template-columns: 26px 190px 1fr minmax(120px, auto); align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crs-row:hover, .crs-row:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.crs-row .n { color: #8ea2b1; font-variant-numeric: tabular-nums; text-align: right; }
.crs-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crs-row .who i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--fam); box-shadow: 0 0 9px var(--fam); }
.crs-row .who em { color: #8ea2b1; font-style: normal; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-row .track { height: 14px; border-radius: 8px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); overflow: hidden; }
.crs-row .fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--fam) 55%, transparent), var(--fam)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: width .5s ease-out; }
.crs-row .val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.crs-row .val .crs-ps { margin: 0; justify-content: flex-end; } .crs-row .val .crs-p { padding: 3px 7px; } .crs-row .val .crs-p b { font-size: 12px; }
@media (max-width: 760px) {
  .crs-body { grid-template-columns: 1fr; grid-template-rows: 230px auto; overflow: auto; }
  .crs-robot { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .crs-card.wide { grid-column: auto; }
  .crs-head .note, .crs-chip.ghost { display: none; }
  .crs-row { grid-template-columns: 22px 92px 1fr 96px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .crs-menu, .crs-win { animation: none; } .crs-row .fill { transition: none; } }

/* crew stats v9.2 (2026-09-24): health, compactions, comms, drift incidents,
   the work board and the item window */
.crs-subs { display: grid; gap: 4px; margin: 8px 0 6px; }
.crs-sub { display: grid; grid-template-columns: 44px 1fr 28px; gap: 8px; align-items: center; font-size: 11px; color: #b8c7d3; }
.crs-sub b { text-align: right; font-variant-numeric: tabular-nums; color: #eef3f5; }
.crs-mini i.ok { background: #7cf0b8; } .crs-mini i.warn { background: #ffd36a; } .crs-mini i.bad { background: #ff7a7a; }
.crs-card .grade { font-weight: 700; } .grade.ok { color: #8ff0c0; } .grade.warn { color: #ffd58a; } .grade.bad { color: #ff9a9a; }
.crs-card .s.flag { color: #ffd58a; }
.crs-cols { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 10px 0 4px; }
.crs-cols i { flex: 1; min-width: 4px; max-width: 16px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--fam), color-mix(in srgb, var(--fam) 35%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.crs-incs { display: grid; gap: 5px; margin-top: 8px; }
.crs-inc { display: grid; grid-template-columns: 10px auto 1fr 12px; gap: 8px; align-items: center; width: 100%; padding: 6px 9px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: inherit; font: 12px/1.25 system-ui, sans-serif; text-align: left; cursor: pointer; }
.crs-inc:hover, .crs-inc:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.crs-inc .dot { width: 9px; height: 9px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px #ffb347; }
.crs-inc.critical .dot { background: #ff5a6e; box-shadow: 0 0 9px #ff5a6e; }
.crs-inc .t { font-weight: 700; white-space: nowrap; } .crs-inc .w { color: #9fb3c2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crs-inc .go { color: #9fb3c2; }
.crs-dot.drift { background: #ffb347; box-shadow: 0 0 14px #ffb347; } .crs-dot.ok { background: #7cf0b8; box-shadow: 0 0 12px #7cf0b8; } .crs-dot.bad { background: #ff8f8f; box-shadow: 0 0 12px #ff8f8f; }
.crs-win.incident { width: min(720px, calc(100% - 28px)); height: auto; max-height: calc(100% - 36px); z-index: 61; }
.crs-win.item { width: min(900px, calc(100% - 28px)); height: auto; max-height: calc(100% - 36px); z-index: 61; }
.crs-incbody, .crs-itembody { overflow: auto; padding: 14px 18px; }
.crs-incbody dl { display: grid; grid-template-columns: 76px 1fr; gap: 7px 14px; margin: 0 0 14px; font-size: 13px; }
.crs-incbody dt { color: #9fb3c2; font: 700 10.5px/1.6 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.crs-incbody dd { margin: 0; } .crs-incbody .dim, .crs-rep .dim { color: #8ea2b1; font-size: 11.5px; }
.crs-incbody .sev.critical { color: #ff8f8f; } .crs-incbody .sev.warning { color: #ffd58a; }
.crs-incbody > .k, .crs-itembody .k.pad { font: 700 10.5px/1.2 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #a9bccb; margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crs-prompt { margin: 0; max-height: 260px; overflow: auto; padding: 12px 14px; border-radius: 12px; white-space: pre-wrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #dfe8ef;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.crs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crs-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); }
.crs-seg button { border: 0; background: transparent; color: #b8c7d3; font: 700 12px/1 system-ui, sans-serif; padding: 7px 11px; border-radius: 9px; cursor: pointer; }
.crs-seg button.on { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.crs-head .id.sm { font-size: 16px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-boardbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.crs-rep { display: grid; grid-template-columns: 26px 44px 110px 150px 1fr; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.crs-rep .n { color: #8ea2b1; } .crs-rep .verdict.ok { color: #8ff0c0; } .crs-rep .verdict.warn { color: #ffd58a; } .crs-rep .crs-ps { margin: 0; }
.crs-itembody .crs-sum { padding: 0 0 12px; }
@media (max-width: 760px) { .crs-rep { grid-template-columns: 22px 40px 1fr; } .crs-rep .verdict, .crs-rep .crs-ps { grid-column: 2 / -1; } }

/* v9.2 polish: board rows carry a two-line label */
.crs-row .who .lbl { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.crs-row .who .lbl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-row .who .lbl em { font-size: 11px; }
.crs-win.workrows .crs-row { grid-template-columns: 26px minmax(240px, 40%) 1fr minmax(130px, auto); }
/* models served as bubbles like the robot's own (near-clear glass, rim-lit in the tier colour, one glossy highlight, a glow
   sized by effort), on a frosted panel over the dark above the robot; the panel's fine stripes show through the glass */
.crs-bubbles { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; padding: 10px 12px 12px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.04) 58%, rgba(255,255,255,.09)),
              repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1.5px, transparent 1.5px 9px);
  border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 12px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(9px) saturate(150%); -webkit-backdrop-filter: blur(9px) saturate(150%); }
.crs-bubbles > .k { font: 700 10px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #d4dee6; margin-bottom: 12px; }
.crs-bubrow { display: flex; justify-content: space-around; align-items: flex-end; gap: 10px; }
.crs-bub { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.crs-bub i { --c: #b9c6d2; --d: 44px; --gl: 20px; --gs: 1px; --ga: 40%; display: block; width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(ellipse 30% 20% at 33% 24%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
              radial-gradient(circle at 50% 50%, rgba(255,255,255,.015) 0 50%, color-mix(in srgb, var(--c) 22%, transparent) 70%, color-mix(in srgb, var(--c) 70%, #fff) 95%, color-mix(in srgb, var(--c) 40%, transparent) 100%);
  box-shadow: 0 0 var(--gl) var(--gs) color-mix(in srgb, var(--c) var(--ga), transparent), inset 0 0 calc(var(--d) * .16) color-mix(in srgb, var(--c) 32%, transparent);
  backdrop-filter: brightness(1.3) saturate(1.35); -webkit-backdrop-filter: brightness(1.3) saturate(1.35); }
.crs-bub b { font: 800 13px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.crs-bub em { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1.15 system-ui, sans-serif; font-style: normal; color: #cfdbe4; text-align: center; }
.crs-bub em.eff { margin-top: -3px; color: #9fb3c2; font-size: 10px; }
/* v9.3 (2026-09-24): fewer scrolls. The stats window is wider and taller, its blocks flow as masonry (cards keep their own
   height instead of the tallest in a row) inside a scrolling frame, and the cards are a little tighter */
.crs-win.stats { width: min(1520px, calc(100% - 24px)); height: min(820px, calc(100% - 28px)); }
.crs-win.stats .crs-body { grid-template-columns: minmax(250px, 25%) 1fr; }
.crs-blocks { display: block; padding: 12px; }
.crs-masonry { columns: 238px; column-gap: 12px; }
.crs-masonry > .crs-card { display: block; break-inside: avoid; margin: 0 0 12px; }
.crs-card { padding: 12px 13px 11px; }
.crs-card .v { font-size: 26px; margin: 6px 0 3px; }
.crs-card .v.sm { font-size: 21px; }
.crs-card .s.sub { margin-top: 7px; }
.crs-spark { height: 36px; margin-top: 6px; }
.crs-cols { height: 34px; margin: 8px 0 3px; }
.crs-subs { margin: 6px 0 4px; gap: 3px; }
.crs-bar { margin: 8px 0 5px; }
.crs-sum { padding: 12px 16px 2px; }
.crs-tabs { padding: 10px 16px 6px; }
/* the work board's project ledgers get room for their bar and legend */
.crs-sum.wide { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.crs-sum.wide .ledger { grid-column: span 2; }
@media (max-width: 760px) { .crs-sum.wide .ledger { grid-column: auto; } }
/* v9.6 (2026-09-24): one layout for every agent (four fixed columns: burn and cost | the work | memory and health | comms
   and incidents; two, then one, as the window narrows) and one agent viewer for the page, kept loaded in its own layer */
.crs-blocks { container-type: inline-size; }
.crs-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.crs-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crs-col > .crs-card { margin: 0; }
@container (max-width: 900px) { .crs-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 470px) { .crs-grid4 { grid-template-columns: minmax(0, 1fr); } }
.crs-robotlayer { position: absolute; z-index: 61; overflow: hidden; visibility: hidden; pointer-events: none; border-bottom-left-radius: 21px; }
.crs-robotlayer.on { visibility: visible; pointer-events: auto; }
.crs-robotlayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.crs-robotui { position: absolute; inset: 0; pointer-events: none; }
.crs-robotui .crs-bub { pointer-events: auto; }
.crs-robotui .cap { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #cfdbe4; background: rgba(8,12,18,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.crs-win.incident, .crs-win.item { z-index: 62; }
.crs-menu { z-index: 63; }
.crs-toast { z-index: 64; }

/* v9.7 (2026-09-24): the space lens's stats window. Its agents fly craft, so the pane holds no robot: the agent's name
   on a glass plate in the family colour, under the models it was served, on a patch of night sky */
.crs-robot.plate { display: grid; place-items: center; padding: 150px 18px 18px; overflow: hidden;
  background: radial-gradient(80% 55% at 50% 64%, color-mix(in srgb, var(--fam) 20%, transparent), transparent 72%),
              radial-gradient(1.2px 1.2px at 18% 78%, rgba(255,255,255,.8), transparent 70%), radial-gradient(1px 1px at 76% 88%, rgba(255,255,255,.6), transparent 70%),
              radial-gradient(1.4px 1.4px at 84% 58%, rgba(255,255,255,.75), transparent 70%), radial-gradient(1px 1px at 9% 52%, rgba(255,255,255,.55), transparent 70%),
              radial-gradient(1px 1px at 58% 94%, rgba(255,255,255,.5), transparent 70%), radial-gradient(1.2px 1.2px at 33% 60%, rgba(255,255,255,.45), transparent 70%),
              linear-gradient(180deg, #070b12, #04060a); }
.crs-plate { display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 100%; padding: 18px 28px 15px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 58%, rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 38px color-mix(in srgb, var(--fam) 34%, transparent), 0 16px 34px rgba(0,0,0,.4);
  backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); }
.crs-plate b { font: 800 64px/1 system-ui, sans-serif; letter-spacing: .02em; color: #fff;
  text-shadow: 0 0 16px var(--fam), 0 0 40px color-mix(in srgb, var(--fam) 60%, transparent); }
.crs-plate span { font: 600 12px/1.25 system-ui, sans-serif; letter-spacing: .04em; color: #cfdbe4; text-align: center; }
@media (max-width: 760px) { .crs-robot.plate { padding-top: 124px; } .crs-plate { padding: 10px 18px 9px; gap: 6px; } .crs-plate b { font-size: 38px; } }