/* SYNTAX — industries page. Requires tokens.css + base.css */

.indpage { --bleed: calc(var(--gutter) + max(0px, (100vw - var(--maxw)) / 2)); --ch-pad: clamp(56px, 6.8vw, 112px); }

/* ---- accessibility: skip link ---- */
.skip { position: fixed; left: 16px; top: -64px; z-index: 2000; padding: 12px 18px; border-radius: 999px; background: var(--bone); color: var(--void); font-weight: 550; font-size: 14px; transition: top .3s var(--ease-out); }
.skip:focus { top: 14px; outline-offset: 3px; }
main:focus { outline: none; }

/* ---- robustness: base.css hides [data-reveal] until site.js marks it; if site.js never boots (or ?static),
        everything stays readable ---- */
html.sx-fail [data-reveal], html.sx-fail .split-line > span { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

/* ---- split headings: the clip box carries room for round capitals (C, O) and descenders (y, p) ---- */
.split-line { padding: .17em .05em .13em; margin: -.17em -.05em -.13em; }
.split-line > span { transform: translate3d(0, 140%, 0); }
.split-line em { padding-right: .06em; }

/* ---- shared small pieces ---- */
.k .num { color: var(--signal); }
.h-touch { display: none; }
@media (hover: none) { .h-mouse { display: none; } .h-touch { display: inline; } }
.sg { display: block; flex: none; }
/* an inline list whose separators drop out at a line break: each item carries its separator in front of it, and the
   list is pulled left by one separator's width and clipped there, so the first item on every line shows none */
.sl { --sg: 1.9em; display: inline-flex; flex-wrap: wrap; row-gap: .1em; margin-left: calc(var(--sg) * -1); clip-path: inset(-.5em -2em -.5em var(--sg)); }
.sl > span { position: relative; padding-left: var(--sg); white-space: nowrap; }
.sl > span + span::before { content: "·" / ""; position: absolute; left: calc(var(--sg) * .5); transform: translateX(-50%); }
.sl > span.d::before { content: "—" / ""; }
.sl.sl-w { display: flex; }
.sl.sl-w > span { white-space: normal; min-width: 0; }
/* units keep their case in uppercase type (an uppercased µs would read as MS) */
.u { text-transform: none; }
.sg-md { width: 84px; height: 84px; }
.sg-lg { width: clamp(84px, 10.4vw, 156px); height: clamp(84px, 10.4vw, 156px); }

/* =====================================================================
   00 — hero: six photographs rendered as one field of code
   ===================================================================== */
.ind-hero { position: relative; isolation: isolate; display: flex; min-height: 100vh; min-height: 100svh; background: var(--void); overflow: hidden; }
.ind-in { position: static; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); grid-template-rows: auto auto auto 1fr auto;
  padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 64px)); padding-bottom: clamp(24px, 4vh, 44px); }
.ind-k { grid-column: 1 / -1; grid-row: 1; }
.ind-h1 { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(20px, 3.6vh, 40px); font-size: clamp(46px, min(6.7vw, 10.6vh), 124px); line-height: .94; letter-spacing: -.04em; }
.ind-lede { grid-column: 1 / span 4; grid-row: 3; margin-top: clamp(20px, 3.4vh, 36px); max-width: 38ch; color: var(--bone-2); font-size: clamp(16.5px, 1.3vw, 20px); }
.ind-nav { grid-column: 1 / -1; grid-row: 5; padding-top: clamp(28px, 5vh, 56px); }

/* the field: starts a measured gap to the right of the headline (--fx, set from the h1's real edge), ends above the
   caption row (--fb), bleeds off the top and right. Nothing of it can sit under type or over the index. */
.ind-field { position: absolute; z-index: -1; top: 0; right: 0; bottom: var(--fb, 0px); left: var(--fx, 34%); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--fm, 180px) * .45), #000 calc(var(--fm, 180px) + 120px)); mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--fm, 180px) * .45), #000 calc(var(--fm, 180px) + 120px)); }
/* a veil under the nav: the field never runs up behind the links or the call to action */
.ind-hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 88px); pointer-events: none; background: linear-gradient(180deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.78) 52%, rgba(5,5,6,0) 100%); }
.ind-field .ind-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ind-field > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.8) brightness(.7); transition: opacity 1.6s var(--ease-in-out);
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 24%, #000 100%); mask-image: linear-gradient(90deg, transparent 2%, #000 24%, #000 100%); }
.ind-field > img.on { opacity: .75; }

/* what the system reads in the subject: viewfinder brackets (the logo's, in the grammar's colours) and a tag */
.ind-det { position: absolute; inset: 0; pointer-events: none; }
.det { position: absolute; opacity: 0; transform: scale(1.07); transition: opacity .5s var(--ease-out), transform .9s var(--ease-out); }
.ind-det.on .det { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.det i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--k); filter: drop-shadow(0 0 2px #050506) drop-shadow(0 0 3px rgba(5,5,6,.9)); }
.det i:nth-child(1) { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.det i:nth-child(2) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.det i:nth-child(3) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.det i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.det b { position: absolute; left: -1px; bottom: calc(100% + 7px); display: inline-flex; align-items: baseline; gap: 9px; padding: 3px 8px 3px 7px; background: rgba(5, 5, 6, .8); font: 450 10px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.det b em { font-style: normal; color: var(--k); letter-spacing: .16em; }
.det.det-in b { bottom: auto; top: 6px; left: 6px; }
.det.det-r b { left: auto; right: -1px; }
.det.det-in.det-r b { right: 6px; left: auto; }
@media (max-width: 900px) { .det b { font-size: 9px; gap: 7px; padding: 2px 6px; bottom: calc(100% + 5px); } }

/* live caption naming the current world: a status line above the index, on clean void */
.ind-cap { grid-column: 1 / -1; grid-row: 4; align-self: end; margin-top: 22px; margin-bottom: clamp(14px, 2.4vh, 26px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 28px; }
.ind-cap .cap-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; min-width: 0; }
.ind-cap .cap-n { color: var(--bone-2); font-size: 11px; letter-spacing: .18em; }
.ind-cap .cap-n b { color: var(--signal); font-weight: 450; }
.ind-cap .cap-name { color: var(--bone); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.ind-cap .cap-scene { color: var(--bone-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ind-cap .cap-st { color: var(--bone-3); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; min-width: 20ch; text-align: right; }
.ind-cap .cap-st.is-scan { color: var(--signal); }

/* the index: six columns along the foot of the hero */
.ind-index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-3); background: linear-gradient(0deg, rgba(5,5,6,.9), rgba(5,5,6,.55)); }
.ind-index li { position: relative; border-left: 1px solid var(--line); opacity: .66; transition: opacity .6s var(--ease-out); }
.ind-index li:first-child { border-left: 0; }
.ind-index li.is-on, .ind-index li:hover, .ind-index li:focus-within { opacity: 1; }
.ind-index li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.ind-index li.is-on::after { animation: ixfill var(--dwell, 6.6s) linear forwards; }
.ind-index.is-hover li.is-on::after { animation: none; transform: scaleX(1); }
@keyframes ixfill { to { transform: scaleX(1); } }
.ind-index a { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n sg" "name name" "desc desc"; align-items: start; align-content: start; height: 100%; padding: 16px 16px 20px 18px; }
.ind-index li:first-child a { padding-left: 0; }
.ix-n { grid-area: n; color: var(--bone-3); transition: color .5s var(--ease-out); }
.ix-sg { grid-area: sg; width: 84px; height: 84px; margin: -12px -10px -14px 0; }
.ix-name { grid-area: name; margin-top: 8px; font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-opsz); font-stretch: var(--display-stretch); font-size: clamp(26px, 2.5vw, 40px); line-height: 1.04; letter-spacing: var(--display-track); transition: color .5s var(--ease-out); }
.ix-desc { grid-area: desc; margin-top: 10px; color: var(--bone-2); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.55; text-wrap: balance; }
.ix-desc span { white-space: nowrap; }
.ix-arr { display: none; }
.ind-index li.is-on .ix-n { color: var(--signal); }
.ind-index li.is-on .ix-name { font-style: italic; }

@media (max-height: 780px) and (min-width: 901px) {
  .ind-in { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 20px; }
  .ind-h1 { margin-top: 16px; }
  .ind-lede { margin-top: 16px; font-size: 16px; max-width: 44ch; }
  .ind-nav { padding-top: 20px; }
  .ind-index a { padding-top: 12px; padding-bottom: 14px; }
  .ix-sg { width: 66px; height: 66px; margin-top: -8px; }
  .ix-name { margin-top: 4px; font-size: clamp(24px, 2.2vw, 34px); }
  .ix-desc { margin-top: 6px; }
}
@media (max-width: 1100px) {
  .ind-h1 { grid-column: 1 / span 9; }
  .ind-lede { grid-column: 1 / span 6; }
  .ind-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ind-index li:nth-child(4) { border-left: 0; }
  .ind-index li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .ind-index li:nth-child(4) a { padding-left: 0; }
  .ind-index li:first-child a { padding-left: 0; }
}
@media (max-width: 900px) {
  .ind-field { -webkit-mask-image: none; mask-image: none; }
  .ind-hero { min-height: 0; }
  .ind-in { grid-template-rows: auto auto auto auto auto; padding-top: calc(var(--nav-h) + 22px); }
  .ind-h1 { grid-column: 1 / -1; font-size: clamp(46px, 13.2vw, 84px); margin-top: 22px; }
  .ind-field { position: relative; z-index: 0; grid-column: 1 / -1; grid-row: 3; left: auto; right: auto; top: auto; bottom: auto; height: clamp(280px, 76vw, 520px); margin: 26px calc(var(--gutter) * -1) 0; border-block: 1px solid var(--line); }
  .ind-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; background: linear-gradient(0deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.55) 50%, rgba(5,5,6,0) 100%); }
  .ind-cap { grid-column: 1 / -1; grid-row: 3; z-index: 2; margin-bottom: 14px; gap: 4px 16px; text-shadow: 0 0 12px rgba(5,5,6,.95); pointer-events: none; }
  .ind-cap .cap-scene, .ind-cap .cap-st { display: none; }
  .ind-lede { grid-column: 1 / -1; grid-row: 4; margin-top: 26px; max-width: 44ch; }
  .ind-nav { grid-row: 5; padding-top: 36px; }
}
@media (max-width: 640px) {
  .ind-index { grid-template-columns: 1fr; }
  .ind-index li, .ind-index li:nth-child(n) { border-left: 0; border-top: 0; border-bottom: 1px solid var(--line); opacity: .8; }
  .ind-index li.is-on { opacity: 1; }
  .ind-index a, .ind-index li:nth-child(n) a { grid-template-columns: 38px minmax(0, 1fr) 52px; grid-template-areas: "n name sg" "n desc sg"; column-gap: 6px; padding: 12px 0 14px; align-items: center; }
  .ix-n { align-self: start; padding-top: 14px; }
  .ix-sg { width: 52px; height: 52px; margin: 0; grid-row: 1 / span 2; }
  .ix-name { margin-top: 0; font-size: 34px; }
  .ix-desc { margin-top: 4px; font-size: 9.5px; letter-spacing: .1em; max-width: none; }
}
/* the core menu puts the current-page dot mid-row on mobile; park it at the row's end */
@media (max-width: 900px) { .nav.open .links a[aria-current="page"]::after { left: auto; right: 2px; top: 50%; bottom: auto; width: 6px; height: 6px; transform: translateY(-50%); } }

/* =====================================================================
   01 — the grammar: four parts every world shares
   ===================================================================== */
.gram { padding: clamp(72px, 9.5vw, 148px) 0 clamp(84px, 10vw, 156px); border-top: 1px solid var(--line); }
.gram-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.gram-top .k { color: var(--bone-2); }
.gram-cols { --g: clamp(16px, 2vw, 28px); position: relative; margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); }
/* the travelling line: a packet of signal passes each part, then waits for a person */
.gram-cols::before { content: ""; position: absolute; left: 18px; top: 18px; width: calc(75% + var(--g) * .75); height: 1px; background: var(--line-3); }
.gram-cols::after { content: ""; position: absolute; left: 18px; top: 15px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(250,179,31,.16), 0 0 18px 2px rgba(250,179,31,.5); animation: packet 8s linear infinite; }
@keyframes packet {
  0% { left: 18px; opacity: 0; }
  3% { opacity: 1; }
  75% { left: calc(75% + var(--g) * .75 + 18px); opacity: 1; }
  82%, 100% { left: calc(75% + var(--g) * .75 + 18px); opacity: 0; }
}
.gram-cols li { position: relative; }
.gram-ic { position: relative; z-index: 1; width: 36px; height: 36px; color: var(--bone-2); background: var(--void); transform-origin: 18px 18px; animation: gpulse 8s ease-out infinite; }
.gram-cols li:nth-child(1) .gram-ic { animation-delay: 0s; }
.gram-cols li:nth-child(2) .gram-ic { animation-delay: 2s; }
.gram-cols li:nth-child(3) .gram-ic { animation-delay: 4s; }
.gram-cols li:nth-child(4) .gram-ic { animation-delay: 6s; }
@keyframes gpulse { 0% { transform: scale(1); color: var(--bone-2); } 3% { transform: scale(1.14); color: var(--bone); } 12% { transform: scale(1); color: var(--bone-2); } 100% { transform: scale(1); color: var(--bone-2); } }
.gram-word { margin-top: clamp(28px, 3.4vw, 52px); font-size: clamp(34px, 5.3vw, 92px); line-height: .98; letter-spacing: -.045em; }
.gram-cols .mono { margin-top: 18px; color: var(--bone-2); }
.gram-cols .sig-l { color: var(--signal); }
@media (max-width: 760px) {
  .gram-cols { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .gram-cols::before, .gram-cols::after { display: none; }
  .gram-word { margin-top: 22px; font-size: clamp(34px, 11vw, 52px); }
}
@media (prefers-reduced-motion: reduce) { .gram-cols::after { display: none; } .gram-ic { animation: none; } }


/* =====================================================================
   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; }

/* ---- 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-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; }
  /* touch: the hint sits under the label, clear of the lens and its readout */
  .ch-world .hud-b { top: 36px; bottom: auto; font-size: 9.5px; letter-spacing: .1em; }
  .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 chapter dock — a vertical rail in the right-hand gutter. Wide screens only (from 1600: below that the gutter
   cannot hold a 36px rail clear of the plates). From 1600 the rail has a lane of its own: the plates that bleed to the
   right (Capital, Enterprise) end a gutter short of the screen's edge, framed on all four sides, so the rail never sits
   inside a plate's frame. Over the full-width harbour and berth plan it is a solid pill above the page, and it steps
   aside while one of their edges passes behind it.
   ===================================================================== */
.ind-dock { display: none; }
@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); }
  .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; }
}
@media (min-width: 1600px) {
  .ind-dock { display: block; position: fixed; z-index: 90; top: 50%; right: max(6px, calc((var(--gutter) - 36px) / 2)); transform: translate(10px, -50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease-out), transform .7s var(--ease-out), visibility .45s; }
  .ind-dock.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
  .ind-dock.on.is-under { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(8px, -50%); }
  .ind-dock ol { display: flex; flex-direction: column; gap: 3px; padding: 4px; border: 1px solid var(--line-3); border-radius: 999px; background: var(--ink-1); box-shadow: 0 0 0 4px var(--void), 0 18px 40px -16px rgba(0, 0, 0, .9); }
  .ind-dock a { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--bone-2); transition: color .35s, background .45s var(--ease-out); }
  .ind-dock a:hover { color: var(--bone); background: rgba(236, 232, 225, .08); }
  .ind-dock a.is-on { background: var(--signal); color: var(--signal-ink); }
  .dk-n { font-size: 10px; letter-spacing: .02em; color: inherit; }
  .dk-t { position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(8px, -50%); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(9, 9, 11, .94); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .5s var(--ease-out); }
  .ind-dock a:hover .dk-t, .ind-dock a:focus-visible .dk-t, .ind-dock a.is-on:focus-visible .dk-t { opacity: 1; transform: translate(0, -50%); }
}

/* =====================================================================
   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 .sg { width: min(100%, 156px); height: auto; aspect-ratio: 1; }
.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, 148px); 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) 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: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:hover, .ru-sg:hover, .bt-ap:hover, .sp-ok:hover, .rc-do: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:hover, .rc-do.is-ghost:hover { border-color: var(--bone); color: var(--bone); }
.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); } }
@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
   ===================================================================== */
.sp { --rowh: 76px; height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(250px, .8fr); column-gap: clamp(24px, 3vw, 52px); align-items: start; }
.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; }
.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: 88px 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; }
.sp-c:hover { border-color: var(--line-3); }
.sp-cc { width: 88px; height: 100%; object-fit: cover; display: block; }
.sp-t { display: grid; gap: 5px; min-width: 0; }
.sp-id { font-family: var(--f-mono); font-weight: 450; font-size: 13px; letter-spacing: .08em; color: var(--bone); }
.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); }
.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-list li.is-dim { opacity: .42; }
.sp-agent { margin-bottom: 24px; }
.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); }
.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-dev { margin-top: 22px; }
.sp-sig { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-bottom: 14px; }
.sp-sig i { width: 4px; background: var(--bone-4); transition: background .4s; }
.sp-sig i:nth-child(1) { height: 5px; } .sp-sig i:nth-child(2) { height: 9px; } .sp-sig i:nth-child(3) { height: 13px; } .sp-sig i:nth-child(4) { height: 18px; }
.sp-sig.on i { background: var(--b-green); }
.sp-q { min-height: 96px; }
.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(--bone-3); }
.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); }
@media (max-width: 1000px) {
  .sp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 34px; column-gap: 28px; }
  .sp-ranger { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .sp-dev { margin-top: 0; }
  .sp-gt { min-height: 0; }
  .sp-q { min-height: 0; }
  [data-sim="spots"] .sim { min-height: 690px; }
}
@media (max-width: 640px) {
  .sp { grid-template-columns: 1fr; }
  .sp-ranger { display: block; }
  .sp-dev { margin-top: 26px; }
  .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: 10.5px; line-height: 1.35; }
  .sp-cc { width: 72px; }
  .sp-roll { gap: 5px; }
  [data-sim="spots"] .sim { min-height: 1010px; }
}

/* =====================================================================
   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) 34px; 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; font-size: 13.5px; line-height: 1.4; color: var(--bone); overflow-wrap: anywhere; }
.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: 22px; }
  .sp-view { aspect-ratio: 16 / 11; }
  .sp-n { min-height: 2.4em; margin-top: 10px; }
  .sp-agent { margin-bottom: 14px; }
  .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-dev { margin-top: 22px; }
  .sp-q { min-height: 0; }
  .sp-q li:nth-last-child(n+3) { display: none; }
  .sp-sig { margin-bottom: 8px; }

  /* 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-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: 9.5px; letter-spacing: .08em; min-height: 2.2em; }
  .sp { --rowh: 64px; }
  .sp-sync { letter-spacing: .05em; margin-top: 8px; }
  .sp-sig { display: none; }
  .sp-dev { margin-top: 18px; }
}

/* 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: 830px; }
  [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: 922px; }
  [data-sim="records"] .sim { min-height: 940px; }
}