/* SYNTAX — industries page: the chapters, the live systems and the close. Linked in the body just before the first
   chapter (industries.html), after page-industries.css, so the first paint never waits for it; the module scripts at
   the end of the body do (a stylesheet before a script blocks it), so no plate is ever built unstyled. */



/* =====================================================================
   chapters — shared
   ===================================================================== */
.ch { position: relative; border-top: 1px solid var(--line); padding: var(--ch-pad) 0; }
.ch h2 { font-size: clamp(46px, 5.6vw, 96px); line-height: .98; letter-spacing: -.04em; }
.ch-body { max-width: 42ch; color: var(--bone-2); font-size: clamp(16.5px, 1.25vw, 19.5px); line-height: 1.55; text-wrap: pretty; }
.ch-copy h2, .ch-band h2 { margin-top: clamp(14px, 1.6vw, 24px); }
.ch-copy .ch-body { margin-top: clamp(22px, 2.4vw, 34px); }

/* chapter mark: the glyph object beside a two-line label — number and name, then what the chapter covers.
   Every chapter uses the same two lines at the same width, so the kickers never wrap differently. */
.ch-id { display: flex; align-items: center; gap: 18px; }
.ch-idt { display: grid; gap: 9px; min-width: 0; }
.ch-id .k { white-space: nowrap; font-size: 12px; letter-spacing: .22em; color: var(--bone-2); }
.ch-id .k .num { color: var(--signal); }
.ch-sub span { white-space: nowrap; }
.ch-sub { color: var(--bone-2); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; text-wrap: balance; }

/* the world photograph (lens). On the side of a chapter the hint sits under the frame, never inside it: the glass
   can wander anywhere in a frame, and the line that explains it must stay readable. */
.ch-lens { margin-top: clamp(32px, 3.4vw, 52px); }
.ch-hint { margin-top: 12px; display: block; font-size: 10px; letter-spacing: .14em; color: var(--bone-3); }
.ch-world { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: var(--ink-0); }
.ch-world .ch-base { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.82); }
/* readouts sit on a shadowed band so they hold over bright imagery */
.ch-world::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,6,.62) 0%, rgba(5,5,6,0) 24%, rgba(5,5,6,0) 70%, rgba(5,5,6,.7) 100%); }
.ch-world .hud, .ch-world .hud-b { z-index: 6; text-shadow: 0 0 10px rgba(5,5,6,.95), 0 1px 2px rgba(5,5,6,.9); }
.ch-world .hud .hud-l, .ch-world .hud .hud-r, .ch-world .hud-b span { color: var(--bone); }
.ch-banner { aspect-ratio: 2 / 1; height: auto; }
/* Care's banner: beside the systems its hint rides in the frame's foot, so the world and the systems end on one line;
   stacked (1000 and below) the hint sits under the frame, as every other world's does */
.ch-band > .ch-hint { display: none; }

/* ---- the foot of a chapter: what we build and what shipped. Each chapter sets it differently: three columns (Capital —
   its second system, onboarding & screening, runs full width beneath, then the shipped work in a row); a stack beside one
   large proof (State); the shipped product, pictured, beside a stack (Motion); rows with their modules beside the list
   (Enterprise). Care and Nature carry their systems up beside the headline. ---- */
.ch-foot { margin-top: clamp(44px, 4.6vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(32px, 3.4vw, 50px); align-items: stretch; }
.ch-foot > .ch-sys { grid-column: 1 / -1; grid-row: 1; }
.ch-foot > .ch-ship { grid-column: 8 / span 5; grid-row: 2; }
.ft-state > .ch-sys { grid-column: 1 / span 6; }
.ft-state > .ch-ship { grid-column: 8 / span 5; grid-row: 1; }
.ft-motion > .ch-ship { grid-column: 1 / span 5; grid-row: 1; }
.ft-motion > .ch-sys { grid-column: 7 / span 6; grid-row: 1; }
.ft-ent > .ch-sys { grid-column: 1 / span 7; }
.ft-ent > .ch-ship { grid-column: 9 / span 4; grid-row: 1; }
.ch-ship { display: flex; flex-direction: column; min-width: 0; }
.ch-sys > .k, .ch-ship > .k { margin-bottom: 18px; }

/* systems we build — default: three columns */
.sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.sys li { position: relative; padding-top: 22px; border-top: 1px solid var(--line-2); }
.sys li::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 1.5px; background: var(--signal); transition: width .9s var(--ease-out); }
.sys li:hover::before { width: 100%; }
.sys .sys-n { display: block; color: var(--signal); font-size: 10.5px; }
.sys h3 { margin-top: 16px; font-size: clamp(25px, 2.15vw, 34px); line-height: 1.08; max-width: 18ch; }
.sys .body-2 { margin-top: 12px; max-width: 34ch; font-size: 15px; line-height: 1.5; }
.sys .sys-mods { margin-top: 14px; max-width: 36ch; font-size: 10.5px; letter-spacing: .12em; line-height: 1.75; color: var(--bone-2); }
.sys .sys-mods span { white-space: nowrap; }
/* three across: the numbers share one row and the titles hang from the next, top-aligned, so every title starts on
   the same line as its neighbours; the titles' row is as tall as the longest, so the lines beneath also start level */
@media (min-width: 1001px) {
  .sys:not(.sys--stack):not(.sys--rows) { grid-template-rows: auto auto auto; }
  .sys:not(.sys--stack):not(.sys--rows) > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .sys:not(.sys--stack):not(.sys--rows) > li > h3 { align-self: start; }
}
/* stack: one column, number beside the line (State, Motion, and beside the headline in Care and Nature) */
.sys--stack { grid-template-columns: 1fr; }
.sys--stack li { display: grid; grid-template-columns: 54px minmax(0, 1fr); padding: 19px 0 21px; }
.sys--stack li:last-child { border-bottom: 1px solid var(--line); }
.sys--stack .sys-n { grid-row: 1 / span 2; padding-top: 7px; }
.sys--stack h3 { margin-top: 0; max-width: none; font-size: clamp(23px, 1.9vw, 30px); }
.sys--stack .body-2 { margin-top: 7px; max-width: 42ch; font-size: 15px; }
/* rows: title left, the Stryke modules it is built from right (Enterprise) */
.sys--rows { grid-template-columns: 1fr; }
.sys--rows li { display: grid; grid-template-columns: 54px minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(16px, 2vw, 28px); align-items: baseline; padding: 24px 0 26px; }
.sys--rows li:last-child { border-bottom: 1px solid var(--line); }
.sys--rows .sys-n { padding-top: 0; }
.sys--rows h3 { margin-top: 0; max-width: none; font-size: clamp(26px, 2.5vw, 40px); }
.sys--rows .sys-mods { margin-top: 0; max-width: none; font-size: 11px; letter-spacing: .13em; line-height: 1.9; }

/* shipped / proof */
.ship { border-top: 1px solid var(--line-2); }
.ship li { border-bottom: 1px solid var(--line); }
.ship a { display: grid; grid-template-columns: minmax(7.5em, 36%) minmax(0, 1fr) 22px; align-items: baseline; column-gap: 20px; padding: 16px 0 17px; transition: padding .6s var(--ease-out); }
.ship-n { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--display-opsz); font-stretch: var(--display-stretch); font-size: clamp(21px, 1.75vw, 27px); line-height: 1.1; letter-spacing: -.02em; transition: color .4s; }
.ship-d { font-size: 14px; line-height: 1.45; transition: color .4s; }
.ship-a { justify-self: end; font-size: 14px; color: var(--bone-2); transition: transform .5s var(--ease-out), color .4s; }
.ship a:hover { padding-left: 10px; }
.ship a:hover .ship-d { color: var(--bone); }
.ship a:hover .ship-a { color: var(--signal); transform: translateX(4px); }
/* beside a tall neighbour (State, Motion, Enterprise): the list is as tall as it, its names set large — no dead band under a short list */
.ch-ship > .ship { flex: 1; display: flex; flex-direction: column; }
.ch-ship > .ship li { flex: 1 1 0; display: flex; }
.ch-ship > .ship a { flex: 1; grid-template-columns: minmax(0, 1fr) 22px; grid-template-areas: "n a" "d a"; align-content: center; align-items: center; row-gap: 9px; padding: 14px 0; }
.ch-ship > .ship .ship-n { grid-area: n; }
.ch-ship > .ship .ship-d { grid-area: d; max-width: 44ch; }
.ch-ship > .ship .ship-a { grid-area: a; }
.ship--1 .ship-n { font-size: clamp(36px, 3.7vw, 60px); line-height: 1; }
.ship--2 .ship-n { font-size: clamp(30px, 2.8vw, 44px); }
.ship--3 .ship-n { font-size: clamp(25px, 2.2vw, 34px); }
.ship--1 .ship-d, .ship--2 .ship-d { font-size: 15px; }
/* one proof, set large beside the systems and as tall as they are (State) */
.ch-ship--proof .ship-n { font-size: clamp(44px, 4.4vw, 72px); line-height: .95; letter-spacing: -.035em; }
.ch-ship--proof .ship-d { max-width: 30ch; font-size: clamp(15px, 1.2vw, 18px); }
.ch-ship--proof > .ship a { row-gap: 16px; }
.ch-ship--proof > .ship li { border-bottom-color: var(--line-2); }
/* one product, featured (Motion): the product itself, its name and line, and what was delivered — set to the card's height */
.ch-ship--feat > .ship li { display: block; }
.ch-ship--feat .ship--feat a { display: grid; grid-template-columns: minmax(0, 1fr) 22px; grid-template-areas: "img img" "n a" "d d" "f f"; align-content: start; align-items: baseline; row-gap: 0; padding: 0 0 18px; }
.feat-img { grid-area: img; position: relative; display: block; height: 164px; margin-bottom: 18px; overflow: hidden; border-bottom: 1px solid var(--line); background: #0b0b0d; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.9) brightness(.92); transform: scale(1.02); transition: transform 1.2s var(--ease-out), filter .6s; }
.ship--feat a:hover .feat-img img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.ship--feat .ship-n { grid-area: n; font-size: clamp(32px, 3vw, 48px); line-height: 1; }
.ship--feat .ship-a { grid-area: a; align-self: center; }
.ship--feat .ship-d { grid-area: d; margin-top: 10px; font-size: 15px; max-width: 44ch; }
.feat-f { grid-area: f; display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 14px; }
.feat-f span { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); }
.ch-ship--feat .ship--feat a:hover { padding-left: 0; }
@media (max-width: 1000px) { .feat-img { height: auto; aspect-ratio: 16 / 8; max-width: 640px; } .ch-ship--feat .ship--feat a { max-width: 640px; } }
.ch-ship--feat > .ship { border-top: 0; }

/* the three of Care, in one row */
.ch-ship--row { margin-top: clamp(44px, 4.6vw, 72px); }
.ch-ship--row > .ship { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); border-top: 0; flex: none; }
.ch-ship--row > .ship li { display: block; border-bottom: 0; border-top: 1px solid var(--line-2); }
.ch-ship--row > .ship a { grid-template-columns: minmax(0, 1fr) 22px; grid-template-areas: "n a" "d d"; align-items: baseline; row-gap: 10px; padding: 22px 0 6px; }
.ch-ship--row .ship-n { font-size: clamp(26px, 2.5vw, 40px); }
.ch-ship--row .ship-d { max-width: 34ch; font-size: 15px; }
.ch-ship--row > .ship--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-ship--row > .ship--2 .ship-d { max-width: 44ch; }

/* =====================================================================
   chapter poses
   ===================================================================== */
.ch-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: stretch; }
/* 01 · Capital and 06 · Enterprise — copy and the world on the left, the live system bleeding off the right edge */
.ch-cap .ch-copy, .ch-ent .ch-copy { grid-column: 1 / span 5; grid-row: 1; }
.ch-cap .ch-plate, .ch-ent .ch-plate { grid-column: 6 / span 7; grid-row: 1; margin-right: calc(var(--bleed) * -1); border-right: 0; }
.ch-ent h2 { font-size: clamp(42px, 5vw, 84px); }
.ch-ent .ch-plate { min-height: 780px; }
@media (min-width: 1393px) and (max-width: 1700px) { .ch-ent .ch-plate { min-height: 860px; } }   /* room for a long related-party record at this width */
/* 03 · State — mirrored */
.ch-mirror .ch-copy { grid-column: 8 / span 5; grid-row: 1; }
.ch-mirror .ch-plate { grid-column: 1 / span 7; grid-row: 1; margin-left: calc(var(--bleed) * -1); margin-right: 0; border-left: 0; border-right: 1px solid var(--line); }
/* 02 · Care — the headline over a wide world on the left, the body over the systems on the right (the world and the
   systems end on one line), then the system at full width */
.ch-band { margin-top: 12px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(36px, 4vw, 60px); align-items: end; }
.ch-band h2 { grid-column: 1 / span 7; grid-row: 1; margin-top: 0; }
.ch-band > .ch-body { grid-column: 9 / span 4; grid-row: 1; justify-self: start; }
.ch-band > .ch-banner { grid-column: 1 / span 7; grid-row: 2; margin-top: 0; }
.ch-band > .ch-sys { grid-column: 9 / span 4; grid-row: 2; align-self: end; }
.ch-wide { margin-top: clamp(28px, 3vw, 44px); }
/* 04 · Motion — the harbour fills the screen with the headline on it; the berth plan runs the width of the page beneath */
.ch-motion { padding-top: 0; }
.mo-stage { position: relative; height: clamp(560px, 86vh, 880px); height: clamp(560px, 86svh, 880px); overflow: hidden; border-bottom: 1px solid var(--line); }
.mo-stage .mo-world { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border: 0; }
.mo-stage .mo-world::after { display: none; }
.mo-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background:
  linear-gradient(0deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.6) 20%, rgba(5,5,6,0) 52%),
  linear-gradient(90deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,0) 52%),
  linear-gradient(180deg, rgba(5,5,6,.82) 0%, rgba(5,5,6,.5) 7%, rgba(5,5,6,0) 20%); }
.mo-stage .mo-world .hud { z-index: 6; text-shadow: 0 0 10px rgba(5,5,6,.95), 0 1px 2px rgba(5,5,6,.9); }
.mo-stage .mo-world .hud span { color: var(--bone); }
.mo-copy { position: absolute; z-index: 5; left: 0; right: 0; margin-inline: auto; bottom: clamp(44px, 6vw, 92px); pointer-events: none; }
.mo-copy .ch-idt .ch-sub { color: var(--bone); }
.mo-copy .ch-id .k, .mo-copy .ch-sub { text-shadow: 0 0 14px rgba(5,5,6,.95), 0 1px 2px rgba(5,5,6,.8); }
.mo-copy .ch-id .k { color: var(--bone); }
.mo-title { margin-top: clamp(14px, 1.6vw, 24px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 20px; align-items: end; }
.mo-title h2 { grid-column: 1 / span 8; font-size: clamp(54px, 8vw, 140px); line-height: .92; letter-spacing: -.045em; text-shadow: 0 2px 50px rgba(5,5,6,.6); }
.mo-title .ch-body { grid-column: 9 / span 4; justify-self: end; color: var(--bone); text-shadow: 0 1px 22px rgba(5,5,6,.95); }
.ch-motion .ch-plate.ch-full { margin: 0; min-height: 620px; border-inline: 0; border-top: 0; }
/* 05 · Nature — a tall world beside the headline, the body and the systems, then the photo-ID match across the page */
.na-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: end; }
.na-lens { grid-column: 1 / span 5; grid-row: 1; margin-top: 0; }
.na-world { margin: 0; aspect-ratio: auto; height: clamp(500px, 54vw, 800px); }
.na-copy { grid-column: 7 / span 6; grid-row: 1; padding-bottom: 6px; }
.na-copy h2 { font-size: clamp(54px, 6.4vw, 108px); line-height: .94; letter-spacing: -.045em; }
.na-copy .ch-body { max-width: 40ch; }
.ch-sys--side { margin-top: clamp(30px, 3.2vw, 46px); }
.ch-band > .ch-sys--side { margin-top: 0; }

.ch-plate { background: var(--ink-0); border: 1px solid var(--line); }

/* laptop widths: the copy and the world sit side by side, and the live system takes the full width beneath, edge to edge —
   the frame stays at least 520px wide and the system gets room to breathe */
@media (min-width: 1001px) and (max-width: 1392px) {
  .ch-split .ch-copy { display: contents; }
  .ch-cap .ch-id, .ch-ent .ch-id { grid-column: 1 / span 6; grid-row: 1; }
  .ch-cap h2, .ch-ent h2 { grid-column: 1 / span 6; grid-row: 2; }
  .ch-cap .ch-body, .ch-ent .ch-body { grid-column: 1 / span 5; grid-row: 3; }
  .ch-cap .ch-lens, .ch-ent .ch-lens { grid-column: 7 / span 6; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
  .ch-mirror .ch-id { grid-column: 8 / span 5; grid-row: 1; }
  .ch-mirror h2 { grid-column: 8 / span 5; grid-row: 2; }
  .ch-mirror .ch-body { grid-column: 8 / span 5; grid-row: 3; }
  .ch-mirror .ch-lens { grid-column: 1 / span 6; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
  .ch-split .ch-plate { grid-column: 1 / -1; grid-row: 4; margin: clamp(48px, 5vw, 64px) calc(var(--bleed) * -1) 0; border-inline: 0; min-height: 700px; }
  .ch-split .ch-plate .sim { margin-left: var(--bleed); margin-right: var(--bleed); }
  .ch-split .ch-plate .hud, .ch-split .ch-plate .hud-b { left: var(--bleed); right: var(--bleed); }
  .ch-split .ch-world { aspect-ratio: 4 / 3; }
  .na-lens { grid-column: 1 / span 6; }
  .na-copy { grid-column: 7 / span 6; }
}

@media (max-width: 1000px) {
  .ch-split { display: block; }
  .ch-cap .ch-plate, .ch-mirror .ch-plate, .ch-ent .ch-plate { margin: 40px calc(var(--gutter) * -1) 0; border-inline: 0; }
  .ch-band { display: block; margin-top: 18px; }
  .ch-band > .ch-body { margin-top: 24px; justify-self: start; }
  .ch-band > .ch-sys, .ch-band > .ch-banner { margin-top: 38px; }
  .ch-band > .ch-hint { display: block; }
  .ch-banner .hud-b { display: none; }
  .ch-foot { row-gap: 38px; }
  .ch-foot > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .sys { grid-template-columns: 1fr; row-gap: 22px; }
  .sys li { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 6px; }
  .sys .sys-n { grid-row: 1 / span 3; padding-top: 4px; }
  .sys h3 { margin-top: 0; max-width: none; }
  .sys .body-2 { max-width: 46ch; }
  .sys .sys-mods { max-width: 46ch; }
  .sys--stack, .sys--rows { row-gap: 0; }
  .sys--rows li { grid-template-columns: 54px minmax(0, 1fr); padding: 20px 0 22px; }
  .sys--rows .sys-n { grid-row: 1 / span 2; }
  .sys--rows .sys-mods { grid-column: 2; margin-top: 12px; max-width: 46ch; }
  .ch-ship--row > .ship { grid-template-columns: 1fr; }
  .ch-ship--row > .ship li { border-top: 0; border-bottom: 1px solid var(--line); }
  .ch-ship--row > .ship { border-top: 1px solid var(--line-2); }
  .ch-ship--row > .ship a { grid-template-columns: minmax(0, 1fr) 22px; padding: 16px 0 17px; row-gap: 6px; }
  .ch-ship--row .ship-n { font-size: clamp(24px, 4vw, 32px); }
  .ch-ship > .ship li { flex: none; }
  .ch-ship > .ship { display: block; }
  .ch-ship > .ship a { padding: 18px 0; }
  .mo-stage { height: clamp(600px, 92svh, 820px); }
  .mo-title h2, .mo-title .ch-body { grid-column: 1 / -1; justify-self: start; }
  .mo-title h2 { font-size: clamp(54px, 15vw, 110px); }
  .na-top { display: flex; flex-direction: column-reverse; align-items: stretch; row-gap: 40px; }
  .na-world { height: clamp(360px, 92vw, 560px); }
  .na-lens { margin-top: 0; }
  .na-copy .ch-sys--side { margin-top: 34px; }
}
@media (max-width: 640px) {
  .sg-md { width: 64px; height: 64px; }
  .ch-id { gap: 14px; }
  .ch-id .k { font-size: 11.5px; letter-spacing: .2em; }
  .ch-sub { font-size: 10px; letter-spacing: .1em; }
  .ship a { grid-template-columns: minmax(0, 1fr) 22px; grid-template-areas: "n a" "d a"; row-gap: 6px; }
  .ship-n { grid-area: n; }
  .ship-d { grid-area: d; }
  .ship-a { grid-area: a; align-self: center; }
  .sys li, .sys--stack li, .sys--rows li { grid-template-columns: 46px minmax(0, 1fr); }
  .sys--stack li { padding: 16px 0 18px; }
  .sys--rows li { padding: 16px 0 18px; }
  .ch-world .hud-r { display: none; }
  .ch-world { aspect-ratio: 4 / 3; }
  .ch-band > .ch-banner { aspect-ratio: 4 / 3; margin-top: 32px; }
  .mo-stage .mo-world { aspect-ratio: auto; }
  .na-world { aspect-ratio: auto; }
  .ch-foot { margin-top: 36px; row-gap: 32px; }
  .ch-sys > .k, .ch-ship > .k { margin-bottom: 14px; }
  .ch-ship--proof .ship-n { font-size: 34px; }
}

/* the plates at the widths where the chapter dock has a lane of its own in the right-hand gutter (the dock: page-industries.css) */
@media (min-width: 1440px) {
  .ch-cap .plate.ch-screen .sim { margin-right: 28px; }
  .ch-cap .plate.ch-screen .hud, .ch-cap .plate.ch-screen .hud-b { right: 32px; }
  .ch-cap .plate .sim, .ch-ent .plate .sim { margin-right: 64px; }
  .ch-cap .plate .hud, .ch-cap .plate .hud-b, .ch-ent .plate .hud, .ch-ent .plate .hud-b { right: 64px; }
  .ch-motion .plate .sim { margin-left: 64px; margin-right: 64px; }
  .ch-motion .plate .hud, .ch-motion .plate .hud-b, .mo-world .hud { right: 64px; }
}
@media (min-width: 1600px) {
  .ch-cap .ch-plate, .ch-ent .ch-plate { margin-right: calc((var(--bleed) - var(--gutter)) * -1); border-right: 1px solid var(--line); }
  /* State mirrors them: its rule pack ends a gutter short of the left edge, framed on all four sides */
  .ch-mirror .ch-plate { margin-left: calc((var(--bleed) - var(--gutter)) * -1); border-left: 1px solid var(--line); }
  .ch-cap .plate .sim, .ch-ent .plate .sim { margin-right: 28px; }
  .ch-cap .plate .hud, .ch-cap .plate .hud-b, .ch-ent .plate .hud, .ch-ent .plate .hud-b { right: 32px; }
  .mo-world .hud { right: 112px; }
  /* the berth plan runs the screen's width, its board kept to the page's measure */
  .ch-motion .plate .sim { margin-left: max(112px, var(--bleed)); margin-right: max(112px, var(--bleed)); }
  .ch-motion .plate .hud, .ch-motion .plate .hud-b { right: 112px; }
}

/* =====================================================================
   07 — close: one grammar, six sigils; a single quiet link
   ===================================================================== */
.ind-close { position: relative; border-top: 1px solid var(--line); padding: clamp(96px, 12vw, 184px) 0 clamp(96px, 12vw, 184px); }
.close-sg { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; column-gap: clamp(8px, 2vw, 28px); }
.close-sg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 36px; height: 1px; background: var(--line-2); z-index: -1; }
.close-sg li { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.close-sg li { container-type: inline-size; }
.close-sg .sg { width: min(100cqi, 156px); height: min(100cqi, 156px); }
.close-sg .mono { color: var(--bone-2); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; }
.close-copy { margin-top: clamp(64px, 8vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 28px; align-items: end; }
.close-copy .k { grid-column: 1 / -1; }
.close-copy h2 { grid-column: 1 / span 8; margin-top: 0; font-size: clamp(54px, 8.6vw, 136px); line-height: .94; letter-spacing: -.045em; }
.close-copy .lede { grid-column: 9 / span 4; justify-self: end; }
.close-link { grid-column: 9 / span 4; justify-self: end; width: 100%; max-width: 46ch; font-size: 17px; }
.close-link .arr { display: inline-block; font-family: var(--f-mono); transition: transform .45s var(--ease-out); }
.close-link a:hover .arr { transform: translateX(5px); }
@media (max-width: 900px) {
  .close-sg { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .close-sg::after { display: none; }
  .close-copy h2, .close-copy .lede, .close-link { grid-column: 1 / -1; justify-self: start; }
}

/* =====================================================================
   the bespoke live systems (plates)
   A plate is a one-cell grid: its min-height is a floor, and the system inside fills it — or, where the system needs
   more (a narrow width, a long sample record), the plate grows with it. Nothing can overrun the frame or its captions.
   ===================================================================== */
.plate { min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr); }
.plate .sim { position: relative; min-width: 0; margin: 52px 28px 48px; }
.plate .sim > * { height: auto; min-width: 0; }
@media (min-width: 1001px) { .plate .sim { display: grid; grid-template-columns: minmax(0, 1fr); } }   /* the system stretches to the plate */
.plate .hud .hud-r { color: var(--bone-2); }
.plate .hud-b { gap: 24px; }
.plate .hud-b span { color: var(--bone-2); }
.plate .hud-b span:last-child { text-align: right; }
.plate .hud-b span:first-child { color: var(--bone-2); }
.ch-cap .ch-plate { min-height: 700px; }
.ch-mirror .ch-plate { min-height: 780px; }
.ch-wide { min-height: 660px; }
@media (min-width: 1001px) { #spots.ch-wide { min-height: 800px; } }   /* the photo-ID plate: three columns over a band, the map among them */
@media (min-width: 1001px) and (max-width: 1200px) { .ch-wide { min-height: 740px; } }   /* the rota's side column is narrow here: room for its longest state */
.sim button { cursor: pointer; }
.sim button:focus-visible { outline-offset: 2px; }
@media (max-width: 1000px) {
  .plate, .ch-wide { min-height: 0; }
  .plate .sim { margin: 52px 18px 20px; }
  /* the caption joins the flow under the system, behind a hairline: never crowded, never overlapping */
  .plate .hud-b { position: relative; left: auto; right: auto; bottom: auto; margin: 0 32px 18px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; row-gap: 6px; }
  .plate .hud-b > span { white-space: normal; overflow: visible; }
  .ch-cap .ch-plate, .ch-mirror .ch-plate, .ch-ent .ch-plate { min-height: 0; }
  /* reserve each system's height so nothing jumps when it mounts */
  [data-sim="ledger"] .sim { min-height: 560px; }
  [data-sim="rota"] .sim { min-height: 570px; }
  [data-sim="rules"] .sim { min-height: 640px; }
}
@media (max-width: 900px) { [data-sim="rules"] .sim { min-height: 1190px; } }
@media (max-width: 640px) { [data-sim="rota"] .sim { min-height: 930px; } [data-sim="rules"] .sim { min-height: 1205px; } [data-sim="ledger"] .sim { min-height: 540px; } }
/* phone: the caption lines up with the label at the top (28px in), clear of the corner brackets */
@media (max-width: 640px) { .plate .hud-b > span + span, .plate .hud .hud-r { display: none; } .plate .hud-b { margin: 0 28px 18px; } }

/* ---------- Capital: the ledger ---------- */
.led { height: 100%; display: flex; flex-direction: column; gap: 18px; transition: opacity .6s var(--ease-out); }
.sim.is-out .led { opacity: 0; }
.led-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 6vw, 96px) minmax(0, 1fr); }
.led-col { display: flex; flex-direction: column; min-width: 0; container: ledcol / inline-size; }
.led-h { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.led-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
/* a row is two lines — reference and amount, then who and what happened — so no name is ever cut short; where the column is
   wide enough it folds to one line */
.led-r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref amt" "sub sub"; align-content: center; row-gap: 3px; column-gap: 12px; flex: 1; min-height: 44px; max-height: 62px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); background: rgba(236,232,225,.016); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em;
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), border-color .4s, background .4s; }
.led-r.is-in { opacity: 1; transform: none; }
.r-ref { grid-area: ref; color: var(--bone-2); white-space: nowrap; }
.r-amt { grid-area: amt; color: var(--bone); text-align: right; white-space: nowrap; }
.r-sub { grid-area: sub; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; min-width: 0; }
.r-cp { min-width: 0; color: var(--bone-3); font-size: 10.5px; letter-spacing: .06em; line-height: 1.3; overflow-wrap: anywhere; }
.r-tag { margin-left: auto; font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--b-cyan); white-space: nowrap; }
@container ledcol (min-width: 440px) {
  .led-r { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ref cp amt tag"; align-items: center; min-height: 34px; max-height: 52px; padding: 0 12px 0 10px; }
  .r-sub { display: contents; }
  .r-cp { grid-area: cp; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .r-tag { grid-area: tag; margin-left: 0; }
  .led-r.is-ex .r-cp { overflow: visible; text-overflow: clip; white-space: normal; }
}
.r-tag:empty { display: none; }
.r-ok { position: absolute; left: -1px; top: -1px; width: 7px; height: 7px; border-left: 1.5px solid var(--bone-3); border-top: 1.5px solid var(--bone-3); opacity: 0; transition: opacity .4s; }
.led-r.is-hot { border-color: var(--b-cyan); background: rgba(74,192,228,.08); }
.led-r.is-hot .r-ok { opacity: 1; border-color: var(--b-cyan); }
.led-r.is-ok { border-color: var(--line); background: transparent; }
.led-r.is-ok .r-amt, .led-r.is-ok .r-ref { color: var(--bone-3); }
.led-r.is-ok .r-ok { opacity: 1; border-color: var(--b-teal); }
.led-r.is-ex { border-color: rgba(250,179,31,.75); background: rgba(250,179,31,.07); }
.led-r.is-ex .r-tag { color: var(--signal); }
.led-r.is-ex .r-ok { opacity: 1; border-color: var(--signal); }
.led-r.is-pair { border-color: var(--line-3); }
.led-mid { position: relative; }
.led-cv { position: absolute; inset: 0; display: block; pointer-events: none; }
.led-tray { padding-top: 14px; border-top: 1px solid var(--line-2); min-height: 150px; }
.led-tray .led-h { border-bottom: 0; margin-bottom: 0; padding-bottom: 4px; }
.led-tray .led-h span:last-child { color: var(--signal); }
.led-none { margin: 12px 0 0; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.held { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 4px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--signal); background: rgba(250,179,31,.05); animation: heldIn .7s var(--ease-out); }
@keyframes heldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.held-id { color: var(--signal); font-size: 10.5px; }
.held-t { font-size: 13px; color: var(--bone); line-height: 1.35; }
.held-b { height: 28px; padding: 0 14px; border: 1px solid var(--line-3); border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); transition: background .3s, color .3s, border-color .3s; }
.held-b:not(:disabled):hover { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.held-s { grid-column: 2 / -1; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.held-s:empty { display: none; }
.held.is-signed { border-color: var(--line-2); background: transparent; }
.held.is-signed .held-s .sl > span:first-child::before { content: "✓\00a0"; }
.held.is-signed .held-t { color: var(--bone-2); }
@media (max-width: 760px) {
  .led-h span:last-child { display: none; }
  .led-mid { min-width: 30px; }
  .led-main { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .held { grid-template-columns: minmax(0, 1fr) auto; }
  .held-id { grid-column: 1 / -1; }
  .held-t { font-size: 12.5px; }
  .held-s { grid-column: 1 / -1; }
  .r-tag { font-size: 8.5px; letter-spacing: .06em; }
}
/* phone: names drop before amounts — a settled row is reference and amount; anything held keeps its name and what is wrong */
@media (max-width: 640px) {
  .led-r { column-gap: 8px; padding: 3px 8px; font-size: 10.5px; min-height: 36px; max-height: none; row-gap: 1px; grid-template-areas: "ref amt"; }
  .r-sub { display: none; }
  .led-r.is-ex, .led-r.is-pair { min-height: 44px; grid-template-areas: "ref amt" "sub sub"; }
  .led-r.is-ex .r-sub { display: flex; }
  .led-r:has(.r-tag:not(:empty)) { grid-template-areas: "ref amt" "sub sub"; min-height: 44px; }
  .led-r:has(.r-tag:not(:empty)) .r-sub { display: flex; }
  .led-r:has(.r-tag:not(:empty)) .r-cp { display: none; }
  .led-r.is-ex .r-cp { display: block; }
  .r-cp { font-size: 9.5px; }
}

/* ---------- Capital: onboarding & screening ---------- */
.ch-screen { background: var(--ink-0); border: 1px solid var(--line); }
.scr { height: 100%; display: flex; flex-direction: column; gap: 24px; transition: opacity .6s var(--ease-out); }
.sim.is-out .scr { opacity: 0; }
/* the pipeline: five steps, the current one lit; the last is the person's, in gold */
.scr-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 14px; }
.scr-steps li { position: relative; display: flex; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); transition: color .5s, border-color .5s; }
.scr-steps li b { font-weight: 450; }
.scr-steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1.5px; background: var(--b-cyan); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out); }
.scr-steps li.is-on { color: var(--bone); }
.scr-steps li.is-on::before { transform: none; }
.scr-steps li.is-done { color: var(--bone-2); }
.scr-steps li.is-done::before { transform: none; background: var(--line-3); }
.scr-steps li.is-gate { color: var(--signal); }
.scr-steps li.is-gate::before { transform: none; background: var(--signal); }
.scr-steps li:nth-child(5).is-done { color: var(--signal); }
.scr-steps li:nth-child(5).is-done::before { background: var(--signal); }

.scr-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 5.2fr) minmax(0, 3.1fr) minmax(0, 3.9fr); }
.scr-pane { min-width: 0; display: flex; flex-direction: column; }
.scr-pane + .scr-pane { margin-left: clamp(18px, 2.2vw, 34px); padding-left: clamp(18px, 2.2vw, 34px); border-left: 1px solid var(--line); }
.scr-pane .led-h { margin-bottom: 0; }
.scr-pane .led-h span { white-space: nowrap; }

/* the structure: applicant on the left, its direct owners, then the people behind them */
.scr-graph { position: relative; flex: 1; min-height: 300px; margin-top: 18px; }
.scr-cols { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(46px, 5.4vw, 78px); }
.scr-col { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 0; }
.scr-edges { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.scr-e { fill: none; stroke: var(--line-3); stroke-width: 1; }
.scr-t { fill: none; stroke: var(--b-cyan); stroke-width: 1.4; opacity: 0; transition: stroke-dashoffset .8s var(--ease-out), opacity .3s, stroke .5s; }
.scr-t.on { opacity: .95; }
.scr-t.on.settled { opacity: .5; }
.scr-t.pair { opacity: 1; stroke: var(--bone); }
.scr-pcts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scr-p { position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; border: 1px solid var(--line); background: var(--ink-0); font: 450 10px/1.3 var(--f-mono); color: var(--bone-2); opacity: 0; transition: opacity .6s var(--ease-out); }
.scr-p.is-in { opacity: 1; }
.scr-n { position: relative; z-index: 1; padding: 9px 11px 10px; border: 1px solid var(--line-2); background: rgba(236, 232, 225, .016);
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), border-color .4s, background .4s; }
.scr-n.is-in { opacity: 1; transform: none; }
.scr-n::before { content: ""; position: absolute; left: -1px; top: -1px; width: 7px; height: 7px; border-left: 1.5px solid var(--bone-3); border-top: 1.5px solid var(--bone-3); opacity: 0; transition: opacity .4s, border-color .4s; }
.scr-nt { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); line-height: 1.2; }
.scr-nt .j { color: var(--bone-3); }
.scr-nn { margin-top: 7px; font: 450 12px/1.3 var(--f-mono); color: var(--bone); overflow-wrap: anywhere; }
.scr-n.is-hot { border-color: var(--b-cyan); background: rgba(74, 192, 228, .08); }
.scr-n.is-hot::before { opacity: 1; border-color: var(--b-cyan); }
.scr-n.is-ubo .scr-nt .t { color: var(--bone); }
.scr-n.is-ok::before { opacity: 1; border-color: var(--b-teal); }
.scr-n.is-hit { border-color: rgba(250, 179, 31, .75); background: rgba(250, 179, 31, .07); }
.scr-n.is-hit::before { opacity: 1; border-color: var(--signal); }
.scr-n.is-hit .scr-nt .j { color: var(--signal); }
.scr-n.is-pair { border-color: var(--line-3); }
.scr-graph.v .scr-cols { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
.scr-graph.v .scr-col { flex-direction: row; justify-content: center; align-items: stretch; gap: 8px; }
.scr-graph.v .scr-col > .scr-n { flex: 1 1 0; max-width: 150px; padding: 8px 8px 9px; }
.scr-graph.v .scr-nn { font-size: 11px; }

/* the owners the resolver found: the sum of every path, against the 25% line */
.scr-own { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.own { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.own.is-in { opacity: 1; transform: none; }
.own-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.own-nm { font: 450 12.5px/1.3 var(--f-mono); color: var(--bone); overflow-wrap: anywhere; }
.own-j { margin-left: 9px; font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: var(--bone-3); }
.own-v { font: 450 16px/1 var(--f-mono); color: var(--bone); }
.own-bar { position: relative; height: 4px; margin-top: 10px; background: rgba(236, 232, 225, .07); }
.own-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bone-3); transition: width .9s var(--ease-out) .1s; }
.own.is-in .own-bar i { width: calc(var(--w, 0) * 100%); }
.own.is-ubo .own-bar i { background: var(--bone); }
.own-th { position: absolute; left: 25%; top: -4px; bottom: -4px; width: 1px; background: var(--b-cyan); }
.own-f { margin-top: 9px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; font-size: 10.5px; line-height: 1.5; letter-spacing: .03em; text-transform: none; color: var(--bone-3); }
.own-f span:first-child { min-width: 0; overflow-wrap: anywhere; }
.own-tag { text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; color: var(--bone-3); }
.own.is-ubo .own-tag { color: var(--bone-2); }
.own.is-pair .own-nm { color: var(--bone); }
.own.is-pair .own-bar i { background: var(--b-cyan); }

/* the screen: every party against three sample lists, then the pack, then the gate */
.scr-mx { margin-top: 14px; display: flex; flex-direction: column; }
.mx-h, .mx-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, clamp(32px, 2.7vw, 40px)); column-gap: 2px; align-items: center; }
.mx-h { padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); line-height: 1; }
.mx-h span:not(:first-child) { text-align: center; }
.mx-r { grid-template-areas: "nm a b c d" "note note note note note"; min-height: 31px; padding: 3px 0; border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .5s var(--ease-out), background .4s; }
.mx-r.is-in { opacity: 1; }
.mx-nm { grid-area: nm; display: flex; align-items: center; gap: 9px; min-width: 0; font: 450 11px/1.25 var(--f-mono); color: var(--bone-2); }
.mx-nm > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-k { flex: none; width: 6px; height: 6px; border: 1px solid var(--bone-3); }
.mx-k.mx-p { border-radius: 50%; } .mx-k.mx-a { background: var(--bone-3); }
.mx-c { text-align: center; font: 500 11px/1 var(--f-mono); color: var(--bone-4); }
.mx-c.is-ok { color: var(--b-teal); } .mx-c.is-na { color: var(--bone-3); } .mx-c.is-hit { color: var(--signal); }
.mx-n { grid-area: note; padding: 3px 0 2px 15px; font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--signal); overflow-wrap: anywhere; line-height: 1.4; }
.mx-n[hidden] { display: none; }
.mx-r.is-hit { background: rgba(250, 179, 31, .05); }
.mx-r.is-hit .mx-nm { color: var(--bone); }
.scr-pack { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: 10px; letter-spacing: .12em; line-height: 1.5; }
.scr-pack b { font-weight: 450; color: var(--bone-2); text-align: right; font-variant-numeric: tabular-nums; }
.scr-pack.is-sealed b { color: var(--signal); }
.scr-sum { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; font-size: 10px; letter-spacing: .12em; line-height: 1.5; }
.scr-sum p { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.scr-sum b { font-weight: 450; color: var(--bone-2); text-align: right; font-variant-numeric: tabular-nums; }
.scr-gate { margin-top: auto; padding-top: 16px; min-height: 196px; }
/* the card is narrow here: the reference, the reason and the control stack, and the control sits under the reason */
.scr-gate .held { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px 14px; }
.scr-gate .held-t { font-size: 12.5px; }
.scr-gate .held-b { justify-self: start; margin-top: 2px; }
.scr-gate .held-s { grid-column: 1; }
.scr-gh { border-bottom: 0; padding-bottom: 4px; }
.scr-gh span:last-child { color: var(--signal); }
.scr-gate .held:first-of-type { margin-top: 4px; }
.scr-gate .led-none { margin-top: 10px; }

@media (max-width: 1000px) {
  .scr-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a" "b c"; row-gap: 34px; }
  .scr-p1 { grid-area: a; } .scr-p2 { grid-area: b; } .scr-p3 { grid-area: c; }
  .scr-p2 { margin-left: 0; padding-left: 0; border-left: 0; }
  .scr-graph { min-height: 280px; }
}
@media (max-width: 640px) {
  .scr { gap: 20px; }
  .scr-steps { display: flex; column-gap: 6px; }
  .scr-steps li { flex: 1 1 0; min-width: 0; gap: 0; padding-top: 9px; white-space: nowrap; }
  .scr-steps li span { display: none; }
  .scr-steps li.is-on, .scr-steps li.is-gate, .scr-steps li:nth-child(5).is-done { flex: 3 1 0; }
  .scr-steps li.is-on span, .scr-steps li.is-gate span, .scr-steps li:nth-child(5).is-done span { display: inline; margin-left: 8px; }
  .scr-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c"; row-gap: 30px; }
  .scr-pane .led-h span:last-child { display: none; }
  .scr-pane + .scr-pane { margin-left: 0; padding-left: 0; border-left: 0; }
  .scr-graph { min-height: 0; }
  .scr-graph.v .scr-n[data-k="p"] .j { display: none; }
  .mx-h { letter-spacing: .05em; }
  .scr-gate { min-height: 176px; }
}

/* ---------- Care: the rota ---------- */
.rota { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 320px); column-gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.rota-board { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-width: 0; }
.rb-row { display: grid; grid-template-columns: clamp(78px, 8vw, 112px) repeat(7, minmax(0, 1fr)); column-gap: 6px; align-items: stretch; }
.rb-row:not(.rb-head) { flex: 1 1 0; min-height: 62px; max-height: 96px; }
.rb-head .rb-d { padding: 0 0 8px 2px; border-bottom: 1px solid var(--line-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.rb-u { align-self: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); line-height: 1.3; }
.rb-u b { font-weight: inherit; }
.u-s { display: none; }
.rcell { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.rs { display: flex; align-items: center; justify-content: space-between; height: auto; min-height: 28px; padding: 0 8px; border: 1px solid var(--line); background: rgba(236,232,225,.018); font-family: var(--f-mono); font-size: 10.5px; color: var(--bone); transition: border-color .35s, background .35s, color .35s; }
.rs i { font-style: normal; font-size: 9px; color: var(--bone-3); }
.rs b { font-weight: 450; letter-spacing: .08em; }
.rs:hover { border-color: var(--line-3); background: rgba(236,232,225,.06); }
.rs.is-gap { border-color: rgba(230,87,86,.75); background: rgba(230,87,86,.1); color: var(--b-red); animation: gapPulse 1.5s ease-in-out infinite; }
.rs.is-new { border-color: rgba(74,192,228,.8); background: rgba(74,192,228,.1); color: var(--b-cyan); }
@keyframes gapPulse { 0%, 100% { background: rgba(230,87,86,.08); } 50% { background: rgba(230,87,86,.2); } }
.rb-key { display: flex; gap: 22px; padding-top: 6px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.rb-key span { display: inline-flex; align-items: center; gap: 8px; }
.rb-key i { width: 9px; height: 9px; border: 1px solid; }
.k-ok { border-color: var(--line-3) !important; }
.k-gap { border-color: var(--b-red) !important; background: rgba(230,87,86,.25); }
.k-new { border-color: var(--b-cyan) !important; background: rgba(74,192,228,.25); }
.rota-side { display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 28px); min-width: 0; }
.rs-h { margin: 0 0 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.rs-ev { font-size: 14px; line-height: 1.5; color: var(--bone-2); }
.rs-ev b { color: var(--bone); font-weight: 600; font-family: var(--f-mono); letter-spacing: .06em; }
.rs-ev span { color: var(--b-red); }
.rs-sv { margin: 0; font-size: 12px; line-height: 1.5; color: var(--bone-2); }
.rs-sv b { color: var(--b-cyan); font-weight: 450; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chips li { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); font-size: 10.5px; color: var(--bone-2); transition: border-color .35s, color .35s; }
.rs-chips li b { font-weight: 450; color: var(--bone); }
.rs-chips li em { font-style: normal; font-size: 7px; letter-spacing: 1px; color: var(--bone-3); }
.rs-chips li.is-pick { border-color: var(--b-cyan); color: var(--b-cyan); }
.rs-chips li.is-pick b { color: var(--b-cyan); }
.rs-gt { margin: 0; font-size: 12px; line-height: 1.55; color: var(--bone-2); }
.rs-gt b { color: var(--signal); font-weight: 450; }
.rs-gt.is-done b::before { content: "✓ "; }
.rota-cv { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
@media (max-width: 900px) {
  .rota { grid-template-columns: 1fr; row-gap: 22px; }
  .rota-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .rs-bench { grid-column: 1 / -1; order: 5; }
}
@media (max-width: 640px) {
  .rb-row { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); column-gap: 3px; }
  .rb-u { font-size: 9px; letter-spacing: .02em; overflow: hidden; }
  .u-l { display: none; }
  .u-s { display: inline; }
  .rs { height: 24px; padding: 0 3px; font-size: 9.5px; justify-content: center; }
  .rs i { display: none; }
  .rota-side { grid-template-columns: 1fr; }
  .rb-head .rb-d { font-size: 8.5px; letter-spacing: .02em; padding-left: 0; }
}

/* ---------- State: the rule pack ---------- */
.ru { height: 100%; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); column-gap: clamp(20px, 3vw, 40px); align-content: stretch; }   /* both columns run the plate's full height, so their feet line up */
.ru-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.ru-app, .ru-pack { min-width: 0; }
.ru-k { margin-top: 22px; font-size: 10px; letter-spacing: .14em; color: var(--bone-3); }
.ru-t { margin-top: 4px; font-size: clamp(36px, 3.2vw, 52px); line-height: 1.04; white-space: nowrap; }
.ru-addr { margin-top: 6px; font-size: 13px; color: var(--bone-3); }
.ru-facts { margin: 24px 0 0; }
.ru-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); }
.ru-facts dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.ru-facts dd { margin: 0; font-size: 14px; color: var(--bone); }
.ru-area { display: flex; align-items: center; gap: 14px; }
.ru-area output { min-width: 5ch; text-align: right; font-size: 14px; }
.ru input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.ru input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-3); }
.ru input[type="range"]::-moz-range-track { height: 1px; background: var(--line-3); }
.ru input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bone); border: 0; box-shadow: 0 0 0 5px rgba(236,232,225,.1); transition: box-shadow .3s, background .3s; }
.ru input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--bone); border: 0; box-shadow: 0 0 0 5px rgba(236,232,225,.1); }
.ru input[type="range"]:hover::-webkit-slider-thumb, .ru input[type="range"]:active::-webkit-slider-thumb { background: var(--signal); box-shadow: 0 0 0 7px rgba(250,179,31,.16); }
.ru-sw { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--bone); }
.ru-sw i { position: relative; width: 32px; height: 18px; border: 1px solid var(--line-3); border-radius: 999px; transition: border-color .3s; }
.ru-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bone-3); transition: transform .45s var(--ease-out), background .3s; }
.ru-sw[aria-checked="true"] i { border-color: var(--bone-3); }
.ru-sw[aria-checked="true"] i::after { transform: translateX(14px); background: var(--signal); }
.ru-sw:hover i { border-color: var(--bone); }
.ru-ver { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; }
.ru-ver button { height: 22px; padding: 0 12px; border-radius: 999px; font-size: 10px; letter-spacing: .1em; color: var(--bone-2); transition: background .3s, color .3s; }
.ru-ver button[aria-pressed="true"] { background: var(--bone); color: var(--void); }
.ru-rules { margin-top: 4px; }
.ru-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 18px; align-items: center; column-gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); opacity: .5; transition: opacity .4s, background .5s; }
.ru-r.is-on { opacity: 1; }
.ru-r.is-stale, .ru-r.is-on.is-stale { opacity: .3; }
.ru-r.is-flash { background: rgba(250,179,31,.09); }
.r-id { font-size: 10.5px; color: var(--bone-3); }
.r-n { font-size: 13.5px; color: var(--bone); }
.r-n em { margin-left: 10px; font-style: normal; font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.r-v { font-family: var(--f-mono); font-size: 11.5px; color: var(--bone-2); text-align: right; white-space: nowrap; }
.r-s { width: 18px; text-align: center; font-style: normal; font-family: var(--f-mono); font-size: 13px; }
.ru-r.is-pass .r-s::before { content: "✓"; color: var(--b-green); }
.ru-r.is-fail .r-s::before { content: "✕"; color: var(--b-red); }
.ru-r.is-fail .r-v, .ru-r.is-fail .r-id { color: var(--b-red); }
.ru-out { margin-top: 20px; min-height: 98px; transition: opacity .45s var(--ease-out); }
.ru-pack.is-eval .ru-out { opacity: .34; }
.ru-more { display: none; margin: 10px 0 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); min-height: 1.5em; }
.ru-more:not(:empty)::before { content: "✓ "; color: var(--b-green); }
.ru-o { font-size: clamp(32px, 3.2vw, 50px); line-height: 1; letter-spacing: -.035em; min-height: 1em; transition: color .4s; }
.ru-out[data-o="refer"] .ru-o { color: var(--signal); }
.ru-out[data-o="refuse"] .ru-o { color: var(--b-red); }
.ru-os { margin-top: 10px; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--bone-2); }
.ru-meta { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.ru-impact { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.5; color: var(--bone-2); }
.ru-impact b { color: var(--bone); font-weight: 600; }
@media (max-width: 900px) { .ru { grid-template-columns: 1fr; row-gap: 32px; } }
@media (max-width: 480px) { .ru-facts > div { grid-template-columns: 96px minmax(0, 1fr); } .r-v { font-size: 10.5px; } .ru-meta { flex-direction: column; gap: 4px; } }


/* =====================================================================
   additions to the first three plates: the agents' trace, the human gates
   ===================================================================== */
/* Capital — what the agents did, until something needs a person */
.led-trace { margin-top: 10px; display: grid; gap: 6px; }
.led-trace li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; font-size: 10.5px; letter-spacing: .06em; line-height: 1.45; color: var(--bone-2); animation: heldIn .6s var(--ease-out); }
.led-trace li b { font-weight: 450; color: var(--bone-3); letter-spacing: .08em; }
.led-trace li span { overflow-wrap: anywhere; }
.led-trace li.is-ex span { color: var(--signal); }
/* State — the officer's gate and the decision trace */
.ru-gate { margin-top: 26px; }
.ru-gb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; min-height: 48px; }
.ru-gt { margin: 0; flex: 1 1 240px; font-size: 13px; line-height: 1.5; color: var(--bone-2); }
.ru-gt b { color: var(--signal); font-weight: 600; }
.ru-gt.is-done b::before { content: "✓ "; }
.ru-trace { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; min-height: 92px; align-content: start; }
.ru-trace li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; font-size: 10.5px; letter-spacing: .06em; line-height: 1.45; color: var(--bone-2); animation: heldIn .6s var(--ease-out); }
.ru-trace li b { font-weight: 450; color: var(--bone-3); letter-spacing: .08em; }
.ru-trace li span { overflow-wrap: anywhere; }
.ru-trace li.is-ex span { color: var(--signal); }
.ru-trace li.is-sig span { color: var(--bone); }
/* shared: a human approval control (gold: the one place the UI asks a person) */
.rs-ap, .ru-sg, .bt-ap, .sp-ok, .rc-do { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border: 1px solid var(--signal); border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); transition: background .3s, color .3s, border-color .3s; }
.rs-ap:not(:disabled):hover, .ru-sg:not(:disabled):hover, .bt-ap:not(:disabled):hover, .sp-ok:not(:disabled):hover, .rc-do:not(:disabled):hover { background: var(--signal); color: var(--signal-ink); }
.rs-ap.is-press, .ru-sg.is-press, .bt-ap.is-press, .sp-ok.is-press, .rc-do.is-press, .held-b.is-press { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.sp-no, .rc-do.is-ghost { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border: 1px solid var(--line-3); border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); transition: background .3s, color .3s, border-color .3s; }
.sp-no:not(:disabled):hover, .rc-do.is-ghost:not(:disabled):hover { border-color: var(--bone); color: var(--bone); }
/* a gate with nothing to decide is quiet — a hairline in the plate's grey, no gold and no hover (as the agent cards'
   idle controls): gold is kept for the moment a person is asked */
.rs-ap:disabled, .ru-sg:disabled, .bt-ap:disabled, .sp-ok:disabled, .sp-no:disabled, .rc-do:disabled, .held-b:disabled { border-color: var(--line-2); color: var(--bone-3); background: transparent; }
.rs-ap[hidden], .ru-sg[hidden], .bt-ap[hidden], .sp-ok[hidden], .sp-no[hidden], .rc-do[hidden] { display: none; }
/* an open gate: the control breathes in gold until a person answers it */
.held-b.is-wait { border-color: var(--signal); color: var(--signal); }
.rs-ap.is-wait, .ru-sg.is-wait, .bt-ap.is-wait, .sp-ok.is-wait, .rc-do.is-wait, .held-b.is-wait { animation: gateWait 2.2s var(--ease-out) infinite; }
@keyframes gateWait { 0% { box-shadow: 0 0 0 0 rgba(250, 179, 31, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(250, 179, 31, 0); } }
/* a gate nobody answered: after a long idle the person in that role signs (the stamp names the role) and the demo moves
   on; that stamp is set in bone. Gold is kept for the signature a visitor makes. */
.held.is-auto .held-s, .rs-gt.is-done.is-auto b, .ru-gt.is-done.is-auto b, .bt-gate .bt-t.is-done.is-auto b, .sp-gt.is-done.is-auto b, .rc-gt.is-done.is-auto b, .rc-gate .rc-h span.is-auto:last-child { color: var(--bone); }
@media (prefers-reduced-motion: reduce) { .rs-ap.is-wait, .ru-sg.is-wait, .bt-ap.is-wait, .sp-ok.is-wait, .rc-do.is-wait, .held-b.is-wait { animation: none; box-shadow: 0 0 0 3px rgba(250, 179, 31, .22); } }
/* Care — the roster lead's approval */
.rs-ap { margin-top: 12px; }

/* =====================================================================
   Motion — port-call & berth scheduling
   ===================================================================== */
.bt { height: 100%; display: flex; flex-direction: column; gap: 22px; --rh: 80px; --bp: 9px; --lw: 136px; }
.bt-board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bt-axis { position: relative; height: 24px; margin-left: var(--lw); border-bottom: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--bone-3); }
.bt-axis span { position: absolute; top: 2px; padding-left: 5px; font-variant-numeric: tabular-nums; }
.bt-rows { position: relative; display: grid; grid-template-rows: repeat(4, var(--rh)); }
.bt-row { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.bt-lab { width: var(--lw); flex: none; margin: 0; display: grid; gap: 5px; font-size: 10px; letter-spacing: .04em; color: var(--bone-3); }
.bt-lab b { font-weight: 450; font-size: 12px; letter-spacing: .16em; color: var(--bone); }
.bt-track { position: absolute; left: var(--lw); right: 0; top: 0; bottom: 0; overflow: hidden; }
.bt-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.bt-layer { position: absolute; inset: 0; }
.vs { position: absolute; height: calc(var(--rh) - var(--bp) * 2); min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 10px; border: 1px solid var(--line-3); background: linear-gradient(rgba(236, 232, 225, .05), rgba(236, 232, 225, .05)) var(--ink-0); text-align: left; overflow: hidden; opacity: 0;
  transition: left .95s var(--ease-out), top .95s var(--ease-out), width .95s var(--ease-out), border-color .4s, background .4s, opacity .7s var(--ease-out); }
.vs.in { opacity: 1; }
.vs:hover { border-color: var(--bone-2); background: linear-gradient(rgba(236, 232, 225, .09), rgba(236, 232, 225, .09)) var(--ink-0); }
.vs-n { font-family: var(--f-mono); font-size: 11px; font-weight: 450; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: var(--bone); white-space: nowrap; overflow: hidden; }
.vs-s { font-size: 10px; letter-spacing: .04em; color: var(--bone-3); white-space: nowrap; }
.vs.no-pri .vs-p { display: none; }
/* the name, fitted to the block by the page script: one line, a word a line, or the code the key spells out */
.vs[data-fit="two"] .vs-w { display: block; }
.vs[data-fit="code"] .vs-w { display: none; }
.vs[data-fit="code"] .vs-n::before { content: attr(data-short); }
.vs[data-fit="code"] { padding: 0 7px; }
.vs-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; overflow: visible; }
/* the event in colour: the vessel that broke the plan is red, every block the solver moved is cyan, each old slot a ghost;
   once approved, a red or cyan edge keeps the story until the next event */
.vs.is-late { border-color: rgba(230, 87, 86, .9); background: repeating-linear-gradient(135deg, rgba(230, 87, 86, .24) 0 6px, rgba(230, 87, 86, .08) 6px 12px) var(--ink-0); }
.vs.is-late .vs-n { color: var(--b-red); }
.vs.is-new { border-color: rgba(74, 192, 228, .9); background: linear-gradient(rgba(74, 192, 228, .13), rgba(74, 192, 228, .13)) var(--ink-0); }
.vs.is-new .vs-n { color: var(--b-cyan); }
.vs.was-late, .vs.was-new { border-left-width: 3px; }
.vs.was-late { border-left-color: var(--b-red); }
.vs.was-new { border-left-color: var(--b-cyan); }
.is-solving .vs { border-style: dashed; }
.vg { position: absolute; height: calc(var(--rh) - var(--bp) * 2); border: 1px dashed rgba(74, 192, 228, .42); background: rgba(74, 192, 228, .025); }
.bt-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -10px 0 0 var(--lw); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-3); }
.bt-key span { white-space: nowrap; transition: color .4s; }
.bt-key b { margin-right: 7px; font-weight: 450; color: var(--bone-2); }
.bt-key .is-late, .bt-key .is-late b { color: var(--b-red); }
.bt-key .is-new, .bt-key .is-new b { color: var(--b-cyan); }
/* the legend: one swatch per mark the board draws (hidden where the board spells out codes — the key carries the colours then) */
.bt-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: -10px 0 0 var(--lw); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); }
.bt-leg span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bt-leg i { position: relative; width: 18px; height: 10px; flex: none; border: 1px solid var(--line-3); }
.bt-leg .lg-late i { border-color: rgba(230, 87, 86, .9); background: repeating-linear-gradient(135deg, rgba(230, 87, 86, .36) 0 3px, rgba(230, 87, 86, .1) 3px 6px); }
.bt-leg .lg-new i { border-color: rgba(74, 192, 228, .9); background: rgba(74, 192, 228, .18); }
.bt-leg .lg-old i { border: 1px dashed rgba(74, 192, 228, .62); background: rgba(74, 192, 228, .04); }
.bt-leg .lg-wait i { height: 7px; border: 0; border-left: 1px solid var(--b-teal); }
.bt-leg .lg-wait i::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px dotted var(--b-teal); }
.bt-leg .lg-cl i { border-color: rgba(250, 179, 31, .55); background: repeating-linear-gradient(135deg, rgba(250, 179, 31, .22) 0 3px, transparent 3px 6px); }
.vw { position: absolute; height: 0; border-top: 1px dotted var(--b-teal); opacity: 0; transform: translateY(calc((var(--rh) - var(--bp) * 2) / 2)); transition: left .95s var(--ease-out), top .95s var(--ease-out), width .95s var(--ease-out), opacity .5s; }
.vw.on { opacity: .8; }
.vw::before { content: ""; position: absolute; left: 0; top: -4px; height: 7px; border-left: 1px solid var(--b-teal); }
.vb { position: absolute; height: calc(var(--rh) - var(--bp) * 2); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(250, 179, 31, .5); background: repeating-linear-gradient(135deg, rgba(250, 179, 31, .13) 0 5px, transparent 5px 10px); animation: heldIn .6s var(--ease-out); }
.vb em { padding: 2px 8px; background: var(--ink-0); font-style: normal; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.bt-foot { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); padding-top: 16px; border-top: 1px solid var(--line-2); }
.bt-h { margin: 0 0 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.bt-t { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bone-2); min-height: 4.5em; }
.bt-t b { color: var(--bone); font-weight: 600; }
.bt-sv { font-size: 11.5px; line-height: 1.6; }
.bt-sv b { color: var(--b-cyan); font-weight: 450; }
.bt-gate .bt-t b { color: var(--signal); }
.bt-gate .bt-t.is-done b::before { content: "✓ "; }
.bt-ap { margin-top: 10px; }
.bt-axis span:last-child { transform: translateX(-100%); padding: 0 5px 0 0; }
@media (min-width: 641px) and (max-width: 900px) { .bt-axis span:last-child { display: none; } }
@media (max-width: 1000px) {
  [data-sim="berth"] .sim { min-height: 540px; }
  .bt-foot { grid-template-columns: 1fr; row-gap: 18px; }
  .bt-t { min-height: 0; }
}
@media (max-width: 640px) {
  .bt { --rh: 60px; --bp: 7px; --lw: 36px; }
  .bt-lab span { display: none; }
  .bt-lab b { font-size: 11px; letter-spacing: .08em; }
  .bt-axis { font-size: 8.5px; letter-spacing: 0; }
  .bt-axis span:nth-child(even) { display: none; }
  .vs, .vs[data-fit="code"] { padding: 0 5px; }
  .vs-s { display: none; }
  .bt-key { margin-left: 0; }
  .bt-leg { margin-left: 0; gap: 8px 16px; }
  [data-sim="berth"] .sim { min-height: 560px; }
}

/* =====================================================================
   Nature — photo-ID match. Three columns that read downwards: the photograph and what the agent did with it; the
   catalogue and the ranger's decision; the map and the phone. The top row holds the pictures, the bottom row the words.
   ===================================================================== */
.sp { --rowh: 62px; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.22fr); grid-template-areas: "photo cands map" "agent gate dev"; column-gap: clamp(24px, 2.6vw, 48px); row-gap: 30px; align-items: start; }
.sp-photo { grid-area: photo; min-width: 0; }
.sp-cands { grid-area: cands; min-width: 0; }
.sp-map { grid-area: map; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.sp-agent { grid-area: agent; min-width: 0; }
.sp-gate { grid-area: gate; min-width: 0; }
.sp-dev { grid-area: dev; min-width: 0; }
.sp-h { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.sp-h span:last-child { text-align: right; }
.sp-view { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line-2); background: #1a130a; overflow: hidden; }
.sp-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-view canvas[data-photo] { filter: blur(.45px) contrast(1.06); }
.sp-roll { display: flex; gap: 8px; margin-top: 12px; }
.sp-th { flex: 1; aspect-ratio: 4 / 3; min-width: 0; padding: 0; border: 1px solid var(--line-2); opacity: .5; transition: opacity .3s, border-color .3s; overflow: hidden; }
.sp-th canvas { width: 100%; height: 100%; display: block; }
.sp-th:hover { opacity: .9; }
.sp-th.is-on { opacity: 1; border-color: var(--signal); }
.sp-n { margin: 12px 0 0; font-size: 10px; letter-spacing: .12em; color: var(--bone-3); line-height: 1.5; min-height: 3em; }
/* the catalogue: one cell an animal, in catalogue order; the search lights what it finds, the shortlist in cyan */
.sp-idx { margin: 0 0 16px; }
.sp-idx canvas { display: block; width: 100%; }
.sp-idx-t { display: flex; justify-content: space-between; gap: 12px; margin: 9px 0 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.sp-idx-t span:last-child { color: var(--b-cyan); text-align: right; white-space: nowrap; }
.sp-list { position: relative; height: calc(var(--rowh) * 6); }
.sp-list li { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rowh) - 8px); transform: translateY(calc(var(--rk) * var(--rowh))); transition: transform .9s var(--ease-out), opacity .5s; }
.sp-c { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; width: 100%; height: 100%; padding: 0 14px 0 0; border: 1px solid var(--line); background: rgba(236, 232, 225, .016); text-align: left; overflow: hidden; transition: border-color .3s, background .3s, opacity .4s; }
.sp-c:hover { border-color: var(--line-3); }
.sp-cc { width: 72px; height: 100%; display: block; }
.sp-t { display: grid; gap: 5px; min-width: 0; }
.sp-ln { display: flex; align-items: baseline; gap: 10px; min-width: 0; line-height: 1.25; }
.sp-id { flex: none; font-family: var(--f-mono); font-weight: 450; font-size: 13px; letter-spacing: .08em; color: var(--bone); }
/* an animal the catalogue has not seen for a year or more: the year it last was, the first thing a ranger weighs */
.sp-ls { min-width: 0; font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ls:empty { display: none; }
.sp-t em { font-style: normal; font-size: 11px; letter-spacing: .08em; line-height: 1.3; color: var(--bone-2); }
.sp-t em .sl { display: flex; }
.sp-bar { display: block; position: relative; height: 2px; background: var(--line-2); overflow: hidden; }
.sp-bar u { position: absolute; inset: 0; background: var(--b-cyan); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear; }
.sp-sc { font-family: var(--f-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--bone-2); }
/* a row waiting for the shortlist, or out of the running: its coat and bar recede, its words stay readable */
.sp-list li.is-wait .sp-cc, .sp-list li.is-dim .sp-cc { opacity: .38; transition: opacity .5s; }
.sp-list li.is-wait .sp-bar, .sp-list li.is-dim .sp-bar { opacity: .45; }
.sp-list li.is-wait :is(.sp-id, .sp-t em, .sp-sc, .sp-ls), .sp-list li.is-dim :is(.sp-id, .sp-t em, .sp-sc, .sp-ls) { color: var(--bone-3); }
.sp-list li.is-wait .sp-c, .sp-list li.is-dim .sp-c { border-color: rgba(236, 232, 225, .05); }
.sp-list li.is-top .sp-c { border-color: var(--b-cyan); background: rgba(74, 192, 228, .07); }
.sp-list li.is-top .sp-sc { color: var(--b-cyan); }
.sp-list li.is-sel .sp-c { border-color: var(--signal); background: rgba(250, 179, 31, .06); }
.sp-list li.is-sel .sp-sc { color: var(--signal); }
.sp-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 31px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); transition: color .4s; }
.sp-steps i { width: 7px; height: 7px; border: 1px solid var(--bone-4); border-radius: 50%; transition: background .4s, border-color .4s, box-shadow .4s; }
.sp-steps b { font-weight: 450; font-variant-numeric: tabular-nums; color: var(--bone-3); text-align: right; }
.sp-steps li.is-on { color: var(--bone); }
.sp-steps li.is-on i { border-color: var(--b-green); box-shadow: 0 0 0 3px rgba(137, 190, 67, .18); animation: spPulse 1.1s ease-in-out infinite; }
.sp-steps li.is-on b { color: var(--bone-2); }
.sp-steps li.is-done { color: var(--bone-2); }
.sp-steps li.is-done i { background: var(--b-green); border-color: var(--b-green); }
.sp-steps li.is-done b { color: var(--b-cyan); }
@keyframes spPulse { 50% { box-shadow: 0 0 0 5px rgba(137, 190, 67, 0); } }
@media (prefers-reduced-motion: reduce) { .sp-steps li.is-on i { animation: none; } }
.sp-gt { margin: 0; min-height: 4.8em; font-size: 14px; line-height: 1.5; color: var(--bone-2); }
.sp-gt b { color: var(--bone); font-weight: 600; }
.sp-gt.is-done b { color: var(--signal); }
.sp-gt.is-done b::before { content: "✓ "; }
.sp-do { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; min-height: 30px; }
.sp-sig { position: absolute; right: 0; top: -2px; display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.sp-dev { position: relative; }
.sp-dev .sp-h { padding-right: 0; }
.sp-dev .sp-h span:last-child { padding-right: 30px; }
.sp-sig i { width: 3px; background: var(--bone-4); transition: background .4s; }
.sp-sig i:nth-child(1) { height: 4px; } .sp-sig i:nth-child(2) { height: 7px; } .sp-sig i:nth-child(3) { height: 10px; } .sp-sig i:nth-child(4) { height: 14px; }
.sp-sig.on i { background: var(--b-green); }
.sp-q { min-height: 99px; }
.sp-q li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--bone-2); animation: heldIn .6s var(--ease-out); }
.sp-q li b { font-family: var(--f-mono); font-weight: 450; font-size: 11.5px; letter-spacing: .06em; color: var(--bone); }
.sp-q li span { font-family: var(--f-mono); font-size: 10.5px; color: var(--bone-3); }
.sp-q li em { font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.sp-q li.is-sent em { color: var(--b-green); }
.sp-q li.is-none { border-bottom: 0; display: block; font-size: 10.5px; letter-spacing: .12em; color: var(--bone-3); }
.sp-sync { margin: 12px 0 0; font-size: 10px; letter-spacing: .1em; line-height: 1.5; color: var(--bone-3); }

/* the range map: a reserve in the plate's own hairlines; pins and the photograph's camera trap over it */
.sp-mapv { position: relative; flex: 1 1 auto; min-height: 320px; border: 1px solid var(--line-2); background: #0c0d0f; overflow: hidden; }
.sp-mapv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.mp-pins li { display: contents; }
.mp-pin { position: absolute; left: var(--x); top: var(--y); width: var(--s, 7px); height: var(--s, 7px); margin: calc(var(--s, 7px) / -2) 0 0 calc(var(--s, 7px) / -2); padding: 0; border: 1.5px solid var(--bone); background: #0c0d0f; pointer-events: auto; transition: border-color .4s, background .4s, box-shadow .4s; }
.mp-pin::after { content: ""; position: absolute; inset: -7px; }
.mp-pin.is-ranger { transform: rotate(45deg); background: var(--bone-2); border-color: var(--bone-2); }
.mp-pin.is-last { border-color: var(--b-green); box-shadow: 0 0 0 3px rgba(137, 190, 67, .22); }
.mp-pin.is-ranger.is-last { background: var(--b-green); }
.mp-pin.is-phone { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 3px rgba(250, 179, 31, .22); }
.mp-pin.is-review { border-radius: 50%; border-style: dashed; border-color: var(--bone); background: transparent; }
.mp-pin.is-old { opacity: .5; }                          /* a place last visited more than a year ago recedes, like the track's older hours */
.mp-pin.is-old:is(:hover, :focus-visible) { opacity: 1; }
.mp-pin:hover { box-shadow: 0 0 0 3px rgba(236, 232, 225, .18); }
.mp-pin:focus-visible { outline: 1.5px solid var(--signal); outline-offset: 3px; }
.mp-pins.is-in .mp-pin { animation: mpIn .55s var(--ease-out) var(--d, 0s) both; }
.mp-pins .mp-pin.is-drop { animation: mpDrop .8s var(--ease-out) both; }
@keyframes mpIn { from { opacity: 0; scale: .2; } }
@keyframes mpDrop { 0% { opacity: 0; translate: 0 -18px; } 55% { opacity: 1; translate: 0 1px; } 100% { translate: 0 0; } }
.mp-q { position: absolute; left: var(--x); top: var(--y); width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 1.5px solid var(--bone); border-radius: 50%; pointer-events: none; }
.mp-q::before { content: ""; position: absolute; inset: -1.5px; border: 1px solid var(--bone); border-radius: 50%; animation: mpPulse 1.9s var(--ease-out) infinite; }
@keyframes mpPulse { from { transform: scale(1); opacity: .85; } to { transform: scale(3.1); opacity: 0; } }
.mp-tip { position: absolute; z-index: 3; display: grid; gap: 2px; max-width: 230px; padding: 8px 10px 9px; background: rgba(9, 9, 11, .95); border: 1px solid var(--line-3); font-size: 11px; letter-spacing: .05em; line-height: 1.45; color: var(--bone-2); pointer-events: none; white-space: nowrap; }
.mp-tip[hidden] { display: none; }
.mp-tip b { margin-bottom: 2px; font-weight: 450; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.mp-tip em { font-style: normal; color: var(--b-green); }
.mp-tip .mp-more { color: var(--bone-3); }
.mp-north { position: absolute; top: 10px; right: 12px; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; font-size: 11px; letter-spacing: .1em; color: var(--bone-2); pointer-events: none; }
.mp-north i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 10px solid var(--bone-2); }
.mp-scale { position: absolute; left: 12px; bottom: 10px; width: var(--w, 80px); height: 22px; font-size: 11px; color: var(--bone-2); pointer-events: none; }
.mp-scale i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border: 1px solid var(--bone-2); border-top: 0; background: linear-gradient(90deg, var(--bone-2) 0 50%, transparent 50%) left bottom / 100% 2px no-repeat; }
.mp-scale b { position: absolute; bottom: 8px; font-weight: 400; transform: translateX(-50%); white-space: nowrap; }
.mp-scale [data-a] { left: 0; transform: none; } .mp-scale [data-b] { left: 50%; } .mp-scale [data-c] { left: 100%; transform: translateX(-35%); }
.mp-scale.is-short [data-b] { display: none; }
.sp-mapm { margin: 10px 0 0; min-height: 1.5em; font-size: 10.5px; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: var(--bone-2); }
.sp-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.sp-leg li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sp-leg i { display: inline-block; flex: none; }
.sp-leg .l-track i { width: 16px; height: 2px; background: linear-gradient(90deg, rgba(137, 190, 67, .15), #89BE43); }
.sp-leg .l-route i { width: 16px; height: 0; border-top: 1.5px dashed rgba(137, 190, 67, .85); }
.sp-leg .l-trap i { width: 7px; height: 7px; border: 1.5px solid var(--bone); }
.sp-leg .l-ranger i { width: 6px; height: 6px; margin: 0 1px; background: var(--bone-2); transform: rotate(45deg); }
.sp-leg .l-q i { width: 9px; height: 9px; border: 1.5px solid var(--bone); border-radius: 50%; }
.sp-leg[data-kind="collar"] .l-route, .sp-leg[data-kind="route"] .l-track, .sp-leg[data-kind="none"] .l-track, .sp-leg[data-kind="none"] .l-route { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mp-q::before { animation: none; transform: scale(1.9); opacity: .4; }
  .mp-pins.is-in .mp-pin, .mp-pins .mp-pin.is-drop { animation: none; }
}
@media (min-width: 1700px) { .sp { --rowh: 70px; } .sp-c { grid-template-columns: 82px minmax(0, 1fr) auto; } .sp-cc { width: 82px; } }
/* below 1440 the catalogue column is narrow enough that a row's details can take two lines: the rows make room for them */
@media (max-width: 1439px) { .sp { --rowh: 70px; } .sp-lw, .sp-mt { display: none; } }
@media (min-width: 1001px) and (max-width: 1119px) { .sp-c { grid-template-columns: 58px minmax(0, 1fr) auto; column-gap: 11px; } .sp-cc { width: 58px; } .sp-ln { gap: 7px; } .sp-ls { letter-spacing: .04em; } }
@media (max-width: 1000px) {
  .sp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo cands" "agent gate" "map map" "dev dev"; row-gap: 34px; column-gap: 28px; }
  .sp-mapv { flex: none; aspect-ratio: 2 / 1; min-height: 0; }
  .sp-gt { min-height: 0; }
  .sp-q { min-height: 0; }
}
@media (max-width: 640px) {
  .sp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "agent" "cands" "gate" "map" "dev"; }
  .sp { --rowh: 70px; }
  .sp-list { height: calc(var(--rowh) * 3); }
  .sp-list li[data-rank="3"], .sp-list li[data-rank="4"], .sp-list li[data-rank="5"] { display: none; }
  .sp-c { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 12px; }
  .sp-t em { letter-spacing: .04em; font-size: 11px; line-height: 1.35; }
  .sp-roll { gap: 5px; }
  .sp-idx-t, .sp-mapm, .sp-leg { font-size: 11px; letter-spacing: .08em; }
  .sp-mapv { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .sp-mapv { aspect-ratio: 1 / 1; }
  .sp-leg { gap: 6px 14px; }
}

/* =====================================================================
   Enterprise — one record from five systems
   ===================================================================== */
.rc { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.58fr) clamp(40px, 5vw, 80px) minmax(0, 1fr); grid-template-rows: 1fr auto; row-gap: 26px; align-items: start; }
.rc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.rc-src, .rc-core { min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; }
.rc-rows { flex: 1; display: grid; grid-template-rows: repeat(5, minmax(min-content, 1fr)); gap: 7px; }
.rc-r { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 78px; padding: 8px 14px 8px 12px; border: 1px solid var(--line); background: rgba(236, 232, 225, .016);
  opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), border-color .4s, background .4s; }
.rc-r.is-in { opacity: 1; transform: none; }
.rc-sys b { display: block; font-weight: 450; font-size: 12px; letter-spacing: .14em; color: var(--bone); }
.rc-sys em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; letter-spacing: .02em; text-transform: none; color: var(--bone-3); }
.rc-rec { min-width: 0; }
.rc-rec b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.25; color: var(--bone); overflow-wrap: anywhere; }
.rc-r.is-review .rc-rec em { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rc-rec em { display: block; margin-top: 5px; font-style: normal; font-size: 10px; letter-spacing: .03em; text-transform: none; line-height: 1.45; color: var(--bone-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rc-st { text-align: right; white-space: nowrap; }
.rc-st b { display: block; font-size: 13px; font-weight: 450; color: var(--bone-2); }
.rc-st i { display: block; margin-top: 3px; font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.rc-r.is-linked { border-color: var(--line-2); }
.rc-r.is-linked .rc-st b { color: var(--b-cyan); }
.rc-r.is-review { border-color: rgba(250, 179, 31, .8); background: rgba(250, 179, 31, .06); cursor: pointer; }
.rc-r.is-review .rc-st b, .rc-r.is-review .rc-st i { color: var(--signal); }
.rc-r.is-review .rc-rec em { color: var(--bone-2); }
.rc-r.is-related { border-color: rgba(110, 193, 177, .7); background: rgba(110, 193, 177, .05); }
.rc-r.is-related .rc-st b, .rc-r.is-related .rc-st i { color: var(--b-teal); }
.rc-r.is-apart { opacity: .5; }
.rc-mid { position: relative; align-self: stretch; }
.rc-cv { position: absolute; inset: 0; display: block; pointer-events: none; }
.rc-name { margin: 6px 0 4px; min-height: 2.25em; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; }
.rc-f { flex: 1; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.rc-f > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rc-f dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.rc-f dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; column-gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--bone); overflow-wrap: anywhere; }   /* the value, and the system it came from */
.rc-f dd > span { display: block; min-width: 0; }
.rc-p { font-style: normal; text-align: right; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--b-cyan); }
.rc-wait { display: block; margin-top: 2px; font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.rc-gate { grid-column: 1 / -1; min-height: 112px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.rc-gate .rc-h { border-bottom: 0; margin-bottom: 4px; padding-bottom: 4px; }
.rc-gate .rc-h span:last-child { color: var(--signal); }
.rc-gb { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.rc-gt { margin: 0; flex: 1; max-width: 74ch; min-height: 3.3em; font-size: 13.5px; line-height: 1.55; color: var(--bone-2); }
.rc-gt b { color: var(--signal); font-weight: 600; }
.rc-gt.is-done b::before { content: "✓ "; }
.rc-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 1000px) {
  .rc { grid-template-columns: 1fr; row-gap: 30px; }
  .rc-mid { display: none; }
  .rc-name { min-height: 0; }
  .rc-gb { flex-direction: column; gap: 16px; }
  .rc-act { justify-content: flex-start; }
  .rc-gt { min-height: 0; }
  .rc-gate { min-height: 170px; }
  [data-sim="records"] .sim { min-height: 1000px; }
}
@media (max-width: 640px) {
  .rc-r { grid-template-columns: 54px minmax(0, 1fr) auto; column-gap: 10px; padding: 8px 10px; }
  .rc-sys em { display: none; }
  .rc-rec em { white-space: normal; }
  [data-sim="records"] .sim { min-height: 1040px; }
}

@media (max-width: 900px) {
  /* one column: the application, the rule pack, then the officer's decision and its trace */
  .ru { display: flex; flex-direction: column; row-gap: 0; }
  .ru-app { display: contents; }
  .ru-pack { order: 2; margin-top: 34px; }
  .ru-gate { order: 3; margin-top: 34px; }
  .ru-trace { min-height: 0; }
}

/* State — fill each column to the plate's height: the decision sits under the rules, and the closing blocks (the
   officer's gate; the tests and the version impact) sit together at the foot, so no band opens between them */
.ru-app, .ru-pack { display: flex; flex-direction: column; }
.ru-gate { margin-top: auto; padding-top: 26px; }
.ru-meta { margin-top: auto; margin-bottom: 0; padding-top: 18px; }
.ru-impact { margin-top: 14px; }
.ru-out { margin-bottom: 18px; }
@media (max-width: 900px) { .ru-app { display: contents; } .ru-gate { margin-top: 34px; padding-top: 0; } .ru-impact { margin-top: 14px; } }

/* Care — the decision trace under the roster lead */
.rs-trace { margin-top: auto; }
.rs-tr { display: grid; gap: 6px; min-height: 76px; align-content: start; }
.rs-tr li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; font-size: 10.5px; letter-spacing: .05em; line-height: 1.45; color: var(--bone-2); animation: heldIn .6s var(--ease-out); }
.rs-tr li b { font-weight: 450; color: var(--bone-3); letter-spacing: .06em; }
.rs-tr li span { overflow-wrap: anywhere; }
.rs-tr li.is-ex span { color: var(--b-red); }
.rs-tr li.is-sig span { color: var(--bone); }

/* =====================================================================
   phone: the live systems, condensed. Each is the same system — the rota on three units, the rule pack showing only what
   failed or changed, the photo-ID match without its camera-roll caption, the records without their detail lines — so
   that none runs past a screen and a half.
   ===================================================================== */
@media (max-width: 640px) {
  /* Care: three units by seven days */
  [data-sim="rota"] .sim { min-height: 0; }
  .rb-row:not(.rb-head) { min-height: 56px; }
  .rota { row-gap: 18px; }
  .rota-side { padding-top: 14px; gap: 12px; }
  .rs-chips li:nth-child(n+5) { display: none; }
  .rs-tr { min-height: 0; }
  .rb-key { padding-top: 2px; }

  /* State: the facts in two columns, the pack as exceptions */
  [data-sim="rules"] .sim { min-height: 0; }
  .ru-t { font-size: 34px; }
  .ru-k { margin-top: 16px; }
  .ru-addr { margin-top: 4px; }
  .ru-facts { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; column-gap: 22px; margin-top: 14px; }
  .ru-facts > div { grid-template-columns: 1fr; align-content: center; row-gap: 3px; min-height: 52px; padding: 7px 0; }
  .ru-facts > div:nth-child(2) { grid-column: 1 / -1; }
  .ru-facts dt { font-size: 9.5px; }
  .ru-area { gap: 12px; }
  .ru-gate { padding-top: 0; }
  .ru-trace { margin-top: 10px; padding-top: 10px; min-height: 0; }
  .ru.is-compact .ru-r:not(.is-fail):not(.is-changed) { display: none; }
  .ru.is-compact .ru-rules { min-height: 50px; margin-top: 0; }
  .ru.is-compact .ru-more { display: block; }
  .ru-out { margin-top: 14px; min-height: 84px; margin-bottom: 10px; }
  .ru-o { font-size: 38px; }
  .ru-meta { margin: 10px 0 0; }
  .ru-impact { margin-top: 12px; padding: 10px 12px; font-size: 11.5px; line-height: 1.45; }
  .ru-pack { margin-top: 26px; }
  .ru-gate { margin-top: 26px; }

  /* Nature: the agent's work as one line of ticks; fewer rows, a smaller photograph */
  [data-sim="spots"] .sim { min-height: 0; }
  .sp { row-gap: 24px; }
  .sp-view { aspect-ratio: 16 / 11; }
  .sp-n { min-height: 2.4em; margin-top: 10px; }
  .sp-agent .sp-h { display: none; }
  .sp-steps { display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .sp-steps li { grid-template-columns: 14px auto; min-height: 24px; border-bottom: 0; }
  .sp-steps b { display: none; }
  .sp-gt { min-height: 0; }
  .sp-do { min-height: 0; margin-top: 10px; }
  .sp-q { min-height: 0; }
  .sp-q li:nth-last-child(n+3) { display: none; }

  /* Enterprise: five systems that need only their names, and the record in two columns */
  [data-sim="records"] .sim { min-height: 0; }
  .rc { row-gap: 22px; }
  .rc-rows { grid-template-rows: none; gap: 6px; }
  .rc-r { min-height: 56px; }
  .rc-rec em { display: none; }
  .rc-r.is-review .rc-rec em { display: block; }
  .rc-f { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; column-gap: 20px; }
  .rc-f > div { grid-template-columns: 1fr; row-gap: 3px; padding: 9px 0; align-content: center; }
  .rc-f > div:nth-child(3) { grid-column: 1 / -1; }
  .rc-p { display: none; }
  .rc-f dd { display: block; }
  .rc-name { margin: 4px 0 2px; font-size: 28px; }
  .rc-gate { min-height: 215px; padding-top: 12px; }   /* room held for the decision the matcher will ask for, where it will appear */
  .rc-gt { min-height: 0; }
  .rc-h { margin-bottom: 8px; }

  /* a quieter foot: tighter lists, smaller titles */
  .sys h3, .sys--stack h3, .sys--rows h3 { font-size: 22px; }
  .sys .body-2, .sys--stack .body-2 { font-size: 14px; margin-top: 5px; }
  .sys { row-gap: 16px; }
  .ch-ship > .ship a { padding: 14px 0; }
  .ship--1 .ship-n, .ship--2 .ship-n, .ship--3 .ship-n, .ch-ship--row .ship-n { font-size: 24px; }
  .ch-ship--proof .ship-n { font-size: 30px; }
}
@media (max-width: 640px) {
  .plate .sim { margin: 46px 16px 44px; }
  .sp-photo .sp-h span:last-child { display: none; }
  .sp-n { font-size: 11px; letter-spacing: .06em; min-height: 2.2em; }
  .sp-sync { letter-spacing: .05em; margin-top: 8px; font-size: 11px; }
}

/* reserved heights: the tallest each system gets through a full cycle, measured from the mounted systems (so nothing
   jumps when one mounts; the page script then holds whatever height a plate reaches) */
@media (max-width: 1000px) {
  [data-sim="screen"] .sim { min-height: 880px; }
  [data-sim="ledger"] .sim { min-height: 700px; }
  [data-sim="rota"] .sim { min-height: 700px; }
  [data-sim="rules"] .sim { min-height: 700px; }
  [data-sim="berth"] .sim { min-height: 610px; }
  [data-sim="spots"] .sim { min-height: 1350px; }
  [data-sim="records"] .sim { min-height: 1030px; }
}
@media (max-width: 900px) { [data-sim="rules"] .sim { min-height: 1230px; } [data-sim="rota"] .sim { min-height: 740px; } }
@media (max-width: 640px) {
  [data-sim="screen"] .sim { min-height: 1170px; }
  [data-sim="ledger"] .sim { min-height: 680px; }
  [data-sim="rota"] .sim { min-height: 660px; }
  [data-sim="rules"] .sim { min-height: 915px; }
  [data-sim="berth"] .sim { min-height: 664px; }
  [data-sim="spots"] .sim { min-height: 1540px; }
  [data-sim="records"] .sim { min-height: 940px; }
}

/* =====================================================================
   touch: every control a finger has to find gets a hit area of 44px (or at least 24px where controls sit close
   together), grown with an invisible ::after or a taller box, so the drawing is the same as with a mouse
   ===================================================================== */
@media (pointer: coarse) {
  .rs-ap, .ru-sg, .bt-ap, .sp-ok, .sp-no, .rc-do, .held-b, .ru-sw, .ru-ver button { position: relative; }
  .rs-ap::after, .ru-sg::after, .bt-ap::after, .sp-ok::after, .sp-no::after, .rc-do::after { content: ""; position: absolute; inset: -7px -3px; }
  .held-b::after { content: ""; position: absolute; inset: -8px -3px; }
  .ru-sw::after { content: ""; position: absolute; inset: -13px -8px; }
  .ru-ver button::after { content: ""; position: absolute; inset: -11px -1px; }
  .mp-pin::after { inset: -10px; }
  .ru input[type="range"] { height: 34px; margin: -6px 0; }
  .rs { min-height: 24px; }
}
@media (max-width: 640px) {
  .ch-hint { font-size: 11.5px; letter-spacing: .1em; }
}