/* ═══════════ Glass HUD: Engineering, Science and Tactical ═══════════
   The summary panes use the shared gl- primitives (glass.css) unchanged; this
   file only lays out each room's detail below the fold:
     Engineering  supplies (#dockside-supplies: dockside.css styles its
                  contents), the journey stores card (JourneyUI), the industry
                  terminal (industry.css), the hull registry and its showroom.
     Science and Tactical  the module bay of the sealed compartment.
   Every rule is scoped to body.glass-bridge and a room id. */

/* ── Engineering detail: one column of glass panes ───────────────────── */
body.glass-bridge #engineering-detail {
  display: flex; flex-direction: column; gap: var(--gap); min-width: 0;
}
body.glass-bridge #engineering-detail > * { min-width: 0; margin: 0; }
/* The containers keep the glass pane; their contents are their owners'. */
body.glass-bridge #engineering-detail > #dockside-supplies { margin: 0; scroll-margin-top: 16px; }
/* dockside.js fills the supplies after its first readout, and the catalogue
   holds design cards only: until then neither shows as an empty glass strip
   (the registry pane carries the catalogue's status line). */
body.glass-bridge #engineering-detail > :is(#dockside-supplies, #engineering-catalogue):empty { display: none; }
body.glass-bridge #engineering-detail > :is(#journey-engineering, #industry-terminal, #engineering-yard) { scroll-margin-top: 16px; }

/* The journey link's "Stores & safe berth" card sits in the
   detail as one more glass pane. Its drawings are JourneyArt's. */
body.glass-bridge #engineering-detail > #journey-engineering {
  padding: var(--pad);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line); border-radius: 0; box-shadow: var(--hairline-top);
  color: var(--ink); font: 400 13px/1.45 var(--font-ui);
}
body.glass-bridge #engineering-detail > #journey-engineering > h3 {
  margin: 0 0 10px; font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
body.glass-bridge #engineering-detail > #journey-engineering p { margin: 6px 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); }
/* Only the instrument headings ("Safe harbour watch", "Emergency recovery")
   take the notice-title style. The Fuel and Food gauge labels keep
   journey.css's label style (500 11px UI, .18em capitals, muted). */
body.glass-bridge #engineering-detail > #journey-engineering :is(.layup-instrument, .recovery-instrument) > div > strong {
  font: 600 16px/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink);
}
@media (min-width: 641px) {
  body.glass-bridge #engineering-detail > #journey-engineering .gl-btn { white-space: nowrap; }
}

/* Running text in the detail (not the Pane B hint primitive). */
body.glass-bridge :is(#engineering-detail, .sealed-detail) .eng-text {
  margin: 4px 0 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted);
}

/* ── Hull registry and the interior showroom ─────────────────────────── */
body.glass-bridge #engineering-yard .eng-showroom .gl-btn { display: inline-flex; }

body.glass-bridge #engineering-catalogue.ship-catalogue {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
  gap: var(--gap); margin: 0; padding: 0;
}
body.glass-bridge #engineering-catalogue .ship-class-card {
  display: flex; flex-direction: column; min-width: 0; margin: 0; padding: var(--pad);
  background: var(--glass); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--hairline-top);
}
body.glass-bridge #engineering-catalogue .ship-class-card.selected {
  border-color: var(--accent); background: var(--glass); box-shadow: var(--hairline-top), inset 2px 0 0 var(--accent);
}
/* Name left, role (or "In showroom · role") right; in a narrow card the
   meta drops whole to its own line rather than breaking the name. */
body.glass-bridge #engineering-catalogue .ship-class-card > .gl-head { align-items: baseline; flex-wrap: wrap; row-gap: 4px; margin: 0 0 6px; }
body.glass-bridge #engineering-catalogue .ship-class-card > .gl-head > .gl-meta { white-space: nowrap; }
body.glass-bridge #engineering-catalogue .ship-class-card h3.ship-class-name {
  min-width: 0; margin: 0; font: 600 16px/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink);
}
body.glass-bridge #engineering-catalogue .ship-class-description {
  min-height: 0; margin: 0; font: 400 13px/1.4 var(--font-ui); color: var(--ink-muted);
}
body.glass-bridge #engineering-catalogue .ship-class-price {
  margin: 10px 0 6px; font: 400 13px/1.4 var(--font-mono); color: var(--accent);
}
body.glass-bridge #engineering-catalogue .ship-class-stats { margin: 0; font-size: 13px; }
body.glass-bridge #engineering-catalogue .ship-class-stats > .gl-row { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line-soft); }
body.glass-bridge #engineering-catalogue .ship-class-stats dt { color: var(--ink-muted); }
body.glass-bridge #engineering-catalogue .ship-class-stats dd { margin: 0; color: var(--ink); text-transform: none; }
body.glass-bridge #engineering-catalogue .ship-class-research {
  margin: 10px 0 0; font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted);
}
body.glass-bridge #engineering-catalogue .ship-class-card > .gl-actions { margin-top: auto; padding-top: 14px; }

/* ── Science and Tactical: the sealed compartment's module bay ───────── */
body.glass-bridge .sealed-detail { display: flex; flex-direction: column; min-width: 0; }
body.glass-bridge .sealed-bay > .eng-text { margin: 4px 0 0; }

/* ── Detail controls: the README sizes on a desktop pointer ──────────────
   v3r-guardrails.css gives every #engineering-detail button 44 px; glass
   buttons keep the README's 38 px with a fine pointer on a wide screen and
   44 px on touch and narrow screens (glass.css). */
@media (min-width: 641px) and (pointer: fine) {
  body.glass-bridge #engineering-detail :is(.gl-btn, .btn) { min-width: 0; min-height: 38px; }
}

/* ── Forced colours ──────────────────────────────────────────────────────
   The stores card and the ship-class cards set the glass fill at ID weight,
   above glass.css's forced .gl-pane rule. Forced colours keep a background's
   alpha, so restate an opaque Canvas here or the room art shows through. The
   showroom's selected card keeps a non-colour cue: a thicker Highlight frame
   (its inset accent bar is a box-shadow, which forced colours removes). */
@media (forced-colors: active) {
  body.glass-bridge #engineering-detail > #journey-engineering,
  body.glass-bridge #engineering-catalogue .ship-class-card {
    background: Canvas; color: CanvasText; border-color: CanvasText;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.glass-bridge #engineering-catalogue .ship-class-card.selected {
    background: Canvas; border-color: Highlight; outline: 2px solid Highlight; outline-offset: -3px;
  }
}