/* Reader-started evidence sequences share the existing source-linked diagram.
   No remote fonts, video, scene simulation, or model changes. */
.opening__ship { display:block; width:100%; max-width:34rem; height:auto; margin:27px 0 0; overflow:visible; }
.opening__ship * { fill:none; stroke:var(--ink-soft); stroke-linejoin:round; stroke-linecap:round; }
.opening__ship .main { stroke-width:2.2; }
.opening__ship .fine { stroke-width:1.3; opacity:.7; }
@media(prefers-reduced-motion:no-preference) {
  .opening__ship * { stroke-dasharray:1 1; stroke-dashoffset:1; animation:opening-draw 1100ms cubic-bezier(.2,0,0,1) forwards; animation-delay:calc(100ms + var(--i)*24ms); }
}
@keyframes opening-draw { to { stroke-dashoffset:0; } }
#vessel .ship-inspector .beat-play,.cargo-beat .beat-play { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 15px; border:1px solid #89928b; background:var(--room-ink); color:var(--room); font:15px/1.4 var(--sans); cursor:pointer; }
#vessel .ship-inspector .beat-play { margin:0 0 16px; }
#vessel .ship-inspector .beat-play:hover,.cargo-beat .beat-play:hover { background:#fffaf0; color:#182e35; }
#vessel .ship-inspector .beat-steps { list-style:none; display:grid; grid-template-columns:1fr 1fr; margin:0; padding:12px 20px 0; gap:0 16px; }
#vessel .ship-inspector .beat-steps button { width:100%; min-height:44px; height:100%; display:grid; gap:5px; align-content:start; padding:13px 0; text-align:left; border-top:3px solid transparent; color:var(--room-soft); font:15px/1.5 var(--sans); }
#vessel .ship-inspector .beat-steps button b { font-size:15px; color:var(--room-ink); }
#vessel .ship-inspector .beat-steps [aria-pressed="true"] { border-top-color:var(--brass); color:var(--room-ink); }
#vessel .ship-inspector .beat-steps button:disabled { opacity:1; }
#vessel .ship-inspector .layers-caption { margin:0; padding:14px 20px 20px; font:15px/1.65 var(--sans); color:var(--room-soft); }
#vessel .ship-inspector .layers { overflow:hidden; background:#f5f2e7; }
.layers__model { position:absolute; width:103.1%; max-width:none; height:auto; left:-1.1%; top:-13%; opacity:0; pointer-events:none; transition:opacity 650ms cubic-bezier(.2,0,0,1); }
#vessel .ship-inspector .layers>.si-drawing { position:relative; }
#vessel .ship-inspector .layers[data-step="1"] [data-si-evidence="basis"],
#vessel .ship-inspector .layers[data-step="2"] [data-si-evidence],
#vessel .ship-inspector .layers[data-step="3"] [data-si-evidence] { opacity:1; }
#vessel .ship-inspector .layers[data-step="1"] [data-si-evidence="wartime"],
#vessel .ship-inspector .layers[data-step="1"] [data-si-evidence="photo"],
#vessel .ship-inspector .layers[data-step="2"] [data-si-evidence="photo"] { opacity:0; }
#vessel .ship-inspector .layers[data-step="4"] { background:#1e292b; }
#vessel .ship-inspector .layers[data-step="4"] .layers__model { opacity:1; }
#vessel .ship-inspector .layers[data-step="4"] [data-si-evidence="basis"] { opacity:.3; }
#vessel .ship-inspector .layers[data-step="4"] [data-si-evidence="wartime"] { opacity:1; }
#vessel .ship-inspector .layers[data-step="4"] [data-si-evidence="photo"] { opacity:.75; }
#vessel .ship-inspector .layers[data-step="4"] :is(.si-hull,.si-solid,.si-white,.si-war) { fill-opacity:0; }
#vessel .ship-inspector .layers[data-step="4"] .si-text { fill:#c4c2ba; }
#vessel .ship-inspector .layers[data-step="4"] .si-leader { stroke:#c4c2ba; }
/* If the supplied image cannot load, retain the complete original drawing. */
#vessel .ship-inspector .layers[data-model-missing="true"] { background:#f5f2e7; }
#vessel .ship-inspector .layers[data-model-missing="true"] [data-si-evidence="basis"] { opacity:.65; }
#vessel .ship-inspector .layers[data-model-missing="true"] :is(.si-hull,.si-solid,.si-white,.si-war) { fill-opacity:1; }
#vessel .ship-inspector .layers[data-model-missing="true"] .si-text { fill:#657d6e; }
.cargo-beat { margin:0; padding:30px 24px; border-top:1px solid var(--room-rule); }
.beat__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; margin-bottom:22px; }
.beat__title { margin:0; font:30px/1.2 var(--serif); color:var(--room-ink); }
.cargo-beat figcaption { margin-top:20px; color:var(--room-soft); font:15px/1.7 var(--sans); }
.tally { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas:'ship grid' 'count grid'; gap:18px 38px; padding:24px; align-items:center; background:var(--room-raised); }
.tally__ship { grid-area:ship; width:100%; height:auto; }
.tally__ship path { fill:none; stroke:var(--room-soft); stroke-width:2.5; stroke-linejoin:round; }
.tally__count { grid-area:count; font:22px/1.5 var(--serif); color:var(--room-ink); }
#tally-n { display:inline-block; min-width:1.1em; font-size:2.6em; line-height:1.1; font-variant-numeric:tabular-nums; }
.tally__grid { grid-area:grid; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:0; }
.tally__item { position:relative; aspect-ratio:1; opacity:1; }
.tally__item svg { display:block; width:100%; height:100%; }
.tally__plane path { fill:none; stroke:var(--room-ink); stroke-width:1.6; stroke-linejoin:round; }
.tally[data-state="counting"] .tally__item:not([data-counted="true"]) { opacity:.12; }
@media(max-width:760px) {
 .tally { grid-template-columns:1fr; grid-template-areas:'ship' 'grid' 'count'; gap:22px; padding:20px; }
 .tally__ship { max-width:360px; justify-self:center; }
 .tally__grid { gap:12px; }
 .cargo-beat { padding:26px 18px; }
}
@media(max-width:500px) {
 #vessel .ship-inspector .beat-steps { grid-template-columns:1fr; }
 #vessel .ship-inspector .beat-steps button { padding:12px 0; }
 #vessel .ship-inspector[data-beat-ready="true"] .beat-steps button span { display:none; }
 #vessel .ship-inspector[data-beat-ready="true"] .beat-steps [aria-pressed="true"] span { display:block; }
}
@media(prefers-reduced-motion:reduce) {
 .opening__ship * { animation:none!important; stroke-dasharray:none!important; stroke-dashoffset:0!important; }
 .layers__model,.layers [data-si-evidence] { transition:none!important; }
}
/* Keep complete 44px hotspot targets within the shared figure on narrow screens. */
#layers-stage .si-spot { left:clamp(22px,var(--si-x),calc(100% - 22px)); top:clamp(22px,var(--si-y),calc(100% - 22px)); }