/* © 2026 William C. Chesher. All Rights Reserved. */
/* manifest.css - the mission manifest's own rules: the vehicle in 3D and in side view, the bay plan, the launch deck's strip and seal, the arrival review */

/* Loaded after launch.css, on manifest.html only. Every colour is a launch.css token, so Night and Day both hold,
   save the side view's three material greys per theme; the 3D stage wears .ln-night, so it stays night in Day too.
   Sizes are rem so the station drawer's text size reaches the manifest too. */

/* ---- the page: the document, its head, the hero's counts, the bands and their sums */
.manifest-page { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: var(--space-6) max(16px, 2vw) 0; }
.document { position: relative; background: radial-gradient(90% 60% at 0% 0%, var(--key-light), transparent 50%), var(--surface); box-shadow: var(--shadow-deep);
  padding: clamp(24px, 5vw, 64px); display: grid; gap: var(--space-6); }
.document-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: end; padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); }
.document-head .display-xl { font-size: clamp(44px, 7vw, 72px); }
.document-meta { display: grid; grid-template-columns: auto auto; gap: 2px var(--space-4); margin: 0; }
.document-meta dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.document-meta dd { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); text-align: right; letter-spacing: .06em; }
/* the vehicle leads (wchesher, 2026-10-25: "why is the 3d model so small?"): about two thirds of a 1280 page, the counts
   and the slot in hand beside it */
.hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(16rem, 1fr); gap: var(--space-6); align-items: start; }
.hero > * { min-width: 0; }
.hero-counts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-5); }
.hero-counts .ln-readout-value { font-size: 2.5rem; }
.hero-note { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--space-4); grid-column: 1 / -1; }
.band { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.band-number { font-family: var(--font-mono); font-size: 2rem; font-weight: 500; color: var(--text-muted); line-height: 1; font-variant-numeric: tabular-nums; }
.band-body { display: grid; gap: var(--space-4); min-width: 0; }
.band-body .title { color: var(--text); }
.not-yet { font-size: 0.9375rem; color: var(--text-muted); }
.sums { display: grid; gap: 0; }
.sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.sum-words { font-size: 0.9375rem; color: var(--text-secondary); }
.sum-value { font-family: var(--font-mono); font-size: 1.125rem; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.goal-ranked { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.goal-ranked li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); font-size: 1rem; }
.goal-ranked .mono { color: var(--text-muted); }
.sign-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }

/* ---- band 02: a placard the crew read, and at arrival what the item really was */
.truth { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* ---- band 04: the launch deck */
.deck-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); gap: 3px; align-items: end; height: 3.25rem; }
.deck-card { display: block; height: 100%; border: 1px solid var(--edge); background: transparent; }
.deck-card.is-named { height: 55%; border-color: var(--text-secondary); background: var(--veil-3); }
.deck-card.is-lost { border-color: var(--text); background: var(--text); }
.deck-key { margin-top: calc(var(--space-2) * -1); }
.seal { display: grid; grid-template-columns: minmax(10rem, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--hairline); }
.seal dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.seal dd { margin: 0; font-size: 0.875rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.seal dd.mono { font-size: 0.8125rem; letter-spacing: .08em; color: var(--text); }

/* ---- band 06: the crew arrival review */
.reads { color: var(--text-secondary); }
.reads.is-short { color: var(--text); font-weight: 600; }

@media (max-width: 880px) {
  .document-head { grid-template-columns: minmax(0, 1fr); }
  .document-meta dd { text-align: left; }
}
@media (max-width: 640px) {
  .band { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .hero-counts .ln-readout-value { font-size: 1.875rem; }
  .sum { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sum-value { text-align: left; }
}
@media (max-width: 760px) {
  .seal { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the hero: the vehicle in 3D beside the counts and the slot in hand */
.hero-side { display: grid; gap: var(--space-5); align-content: start; }
.slot-card { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4) 0 0; border-top: 1px solid var(--accent-line); min-height: 12rem; }
.slot-card .eyebrow { margin: 0; color: var(--accent); }
.slot-card-hint { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text-muted); max-width: 30em; }
.slot-card-name { margin: 0; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; font-weight: 600; letter-spacing: .02em; color: var(--text); overflow-wrap: anywhere; }
.slot-card-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; align-items: baseline; }
.slot-card-rows dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.slot-card-rows dd { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); min-width: 0; }
.slot-card-rows dd .truth { display: inline; margin: 0; }
.slot-card-rows .placard-word, .plan-slot .placard-word { white-space: normal; overflow: visible; }
.slot-card-pairs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.slot-card-pairs li { padding-left: var(--space-3); border-left: 2px solid var(--accent-line); font-size: 0.875rem; line-height: 1.4; color: var(--text-secondary); }

/* ---- the 3D view: the stage stays night in both themes, like the room it comes from */
.stack-viewer { display: block; min-width: 0; }
.stack-shell { display: grid; gap: var(--space-3); }
.stack-stage { position: relative; aspect-ratio: 5 / 6; max-height: 86vh; min-height: 22rem; overflow: hidden;
  background: radial-gradient(70% 55% at 30% 18%, var(--key-light), transparent 60%), radial-gradient(120% 80% at 50% 110%, #000000, transparent 70%), linear-gradient(180deg, var(--surface-raised), var(--ground));
  box-shadow: inset 0 1px 0 var(--veil-3), inset 0 0 0 1px var(--hairline); color: var(--text); }
.stack-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline: none; }
.stack-canvas:active { cursor: grabbing; }
.stack-stage:has(.stack-canvas:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent), inset 0 1px 0 var(--veil-3); }
.stack-overlay { position: absolute; top: var(--space-4); left: var(--space-4); right: var(--space-4); display: grid; gap: var(--space-1); pointer-events: none; }
.stack-eyebrow, .stack-hint { text-shadow: 0 1px 8px #000000, 0 0 2px #000000; margin: 0; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .22em; text-transform: uppercase; }
.stack-eyebrow { color: var(--accent); }
.stack-hint { color: var(--text-muted); }
.stack-said:empty { display: none; }
.stack-said { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--space-6) var(--space-4) var(--space-4); background: linear-gradient(180deg, transparent, var(--shade) 55%); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: .04em; color: var(--text-secondary); pointer-events: none; text-shadow: 0 1px 8px #000000; }
.stack-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.stack-group { display: flex; align-items: center; gap: 2px; }
.stack-group-name { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); margin-right: var(--space-2); }
.stack-button { font: 500 0.6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); background: var(--veil-1);
  border: 1px solid var(--hairline); border-radius: 0; padding: 0.5rem 0.625rem; cursor: pointer; transition: background var(--flow-ui) var(--ease-machined), color var(--flow-ui) var(--ease-machined), border-color var(--flow-ui) var(--ease-machined); }
.stack-button:hover { background: var(--veil-2); color: var(--text); border-color: var(--edge); }
.stack-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stack-button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }
.stack-note { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.vehicle-drawing svg { display: block; width: 100%; height: auto; }

/* ---- the bay plan: deck 3 at the top as the vehicle stands; names wrap, the cell grows (elegance audit 09) */
.bay-plan { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.bay-plan-head { display: grid; gap: var(--space-2); }
.bay-plan-head .eyebrow, .bay-plan-head .title, .bay-plan-head p { margin: 0; }
.plan { display: grid; gap: 6px; }
.plan-tank { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-left: calc(3.5rem + 6px); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline); background: repeating-linear-gradient(90deg, var(--veil-1) 0 14px, var(--veil-2) 14px 15px); }
.plan-tank.is-conflict { border-color: var(--accent-line); }
.plan-tank-name { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.plan-deck { display: grid; grid-template-columns: 3.5rem repeat(4, minmax(0, 1fr)); gap: 6px; }
.plan-deck-label { display: grid; align-content: center; justify-items: start; gap: 2px; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.plan-deck-number { font-size: 1.5rem; letter-spacing: 0; color: var(--text-secondary); line-height: 1; }
.plan-slot { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 7rem; padding: var(--space-3); text-align: left; font: inherit; color: var(--text);
  background: var(--veil-1); border: 1px solid var(--hairline); border-radius: 0; cursor: pointer; transition: background var(--flow-ui) var(--ease-machined), border-color var(--flow-ui) var(--ease-machined), box-shadow var(--flow-ui) var(--ease-machined); }
.plan-slot:hover { background: var(--veil-2); border-color: var(--edge); }
.plan-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-slot.is-empty { background: transparent; border-style: dashed; }
.plan-slot.is-conflict { border-color: var(--accent-line); background: repeating-linear-gradient(135deg, var(--accent-wash) 0 6px, transparent 6px 12px), var(--veil-1); }
.plan-slot[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--glow-accent); }
/* A barrier panel is a wall on the edge it guards: a heavy bar, drawn on both cells it parts. */
.plan-slot.plan-wall-top { border-top: 4px solid var(--text); }
.plan-slot.plan-wall-bottom { border-bottom: 4px solid var(--text); }
.plan-slot.plan-wall-left { border-left: 4px solid var(--text); }
.plan-slot.plan-wall-right { border-right: 4px solid var(--text); }
.plan-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-2); }
.plan-slot-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .08em; color: var(--text-muted); }
.plan-slot-conflict { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.plan-slot-name { font-size: 0.9375rem; line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; hyphens: auto; }
.plan-slot.is-empty .plan-slot-name { color: var(--text-muted); font-weight: 400; }
.plan-slot-placard { display: grid; gap: 2px; justify-items: start; }
/* The cargo door's pyros, in the hull beside 2-A: a strip at the cell's foot; a barrier panel there is its wall. */
.plan-door { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--space-2); margin: auto calc(var(--space-3) * -1) calc(var(--space-3) * -1); padding: var(--space-1) var(--space-3);
  border-top: 1px dashed var(--edge); background: var(--veil-2); font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.plan-door.is-conflict { border-top: 1px solid var(--accent-line); color: var(--accent); }
.plan-slot.plan-wall-door .plan-door { border-top: 4px solid var(--text); }
.plan-slot-placard .truth { margin: 0; }

/* ---- the side view: an engineering drawing on the theme's tokens, with three material greys of its own */
.side-elevation { --se-steel: #404047; --se-tiles: #0b0b0d; --se-dark: #55555d; font-family: var(--font-mono); }
:root[data-theme="day"] .side-elevation { --se-steel: #dcdce0; --se-tiles: #2a2a2f; --se-dark: #6a6a72; }
.se-ink { fill: var(--text); }
.se-ink-line, .se-line { stroke: var(--text); }
.se-accent-line { stroke: var(--accent); }
.se-hair-line, .se-steel-line { stroke: var(--edge); }
.se-tile, .se-tiles-base { fill: var(--se-tiles); }
.se-steel { fill: var(--se-steel); }
.se-dark, .se-bell { fill: var(--se-dark); }
.se-bell { stroke: var(--text); stroke-width: 0.8; }
.se-cut { fill: var(--surface); }
.se-mark { font-size: 10px; font-weight: 500; fill: var(--text); }
.se-dimension { font-size: 9px; letter-spacing: .12em; fill: var(--text-muted); }
.se-callout { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; fill: var(--text-secondary); }
.se-eyebrow { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; fill: var(--accent); }
.se-heading { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--text); }
.se-tank { fill: var(--veil-2); stroke: var(--edge); stroke-width: 1; }
.se-tank.is-conflict { stroke: var(--accent); }
.se-tank-words { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-secondary); }
.se-cell { fill: var(--veil-1); stroke: var(--edge); stroke-width: 1; }
.se-slot.is-empty .se-cell { fill: none; stroke-dasharray: 3 3; }
.se-slot.is-conflict .se-cell { stroke: var(--accent); stroke-width: 1.4; }
.se-label { font-size: 10px; letter-spacing: .06em; fill: var(--text-muted); }
.se-name { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; fill: var(--text); }
.se-foot { font-size: 7px; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-secondary); }
.se-foot.se-truth { fill: var(--accent); }
.se-empty { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-muted); }
.se-conflict-word { font-size: 10px; font-weight: 600; fill: var(--accent); }
.se-barrier { fill: var(--text); }
.se-door { fill: var(--veil-2); stroke: var(--edge); stroke-width: 0.8; stroke-dasharray: 2 2; }
.se-door.is-conflict { stroke: var(--accent); stroke-dasharray: none; }
.se-door-words { font-size: 7px; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-secondary); }
.se-door-outline { stroke: var(--text); stroke-dasharray: 2.5 1.5; }
.se-key, .se-note { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; fill: var(--text-muted); }
.se-note { letter-spacing: .08em; text-transform: none; font-size: 8.5px; }
.se-frame { fill: none; stroke: var(--edge); stroke-width: 1; }
.se-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text); }
.se-value { font-size: 9.5px; letter-spacing: .06em; fill: var(--text); }
.se-diamond.is-none .se-line { stroke: var(--edge); stroke-dasharray: 2 1.5; }

/* the taller floor only where the row is wide: with the stage's aspect ratio, a 26rem floor makes it wider than a phone */
@media (min-width: 961px) { .stack-stage { min-height: 26rem; } }
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .stack-stage { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  .plan-deck { grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr)); }
  .plan-deck-label { grid-row: span 2; }
  .plan-tank { margin-left: 0; }
}

/* Paper: the drawing is the vehicle; the 3D view and its buttons stay on screen. */
@media print {
  .document { box-shadow: none; background: #fff; }
  .stack-shell, .stack-note { display: none !important; }
  .stack-viewer .vehicle-drawing { display: block !important; }
  .plan-slot { break-inside: avoid; box-shadow: none; }
  .bay-plan { break-before: auto; break-inside: avoid; }
}