/* Helm room, Glass HUD (design/design_handoff_bridge_glass README, "Helm").
   The three panes use the shared primitives in glass.css as they are; this
   file only places Helm's own pieces: the course actions, the chart head,
   and the detail below the fold (route preview, chart index, fleet, planet
   archive and the journey cards). The chart itself is css/nav-chart.css;
   the journey cards and sheets are css/journey.css. */

/* ── Panes ─────────────────────────────────────────────────────────────── */
/* merchant.css spaced the legacy recall button with margin-top: 10px. */
body.glass-bridge #helm-pane-b .gl-actions > .gl-btn { margin: 0; }
/* The notice's own button wraps inside the pane, as in the prototype. */
body.glass-bridge #helm-notice .gl-btn { align-self: flex-start; }
/* Pane C head: the title, then the SECTOR · CLUSTER · GALAXY | CENTRE group. */
body.glass-bridge #helm-pane-c > .gl-head { row-gap: 12px; }
body.glass-bridge #helm-chart-controls { flex: 0 1 auto; }

/* ── Detail: the room's full controls, below the fold ─────────────────── */
body.glass-bridge #helm-detail {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: var(--gap);
  padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.glass-bridge #helm-detail > #journey-maiden { grid-column: 1 / -1; }
.helm-detail-main, .helm-detail-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
body.glass-bridge #helm-detail .helm-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
body.glass-bridge #helm-detail .helm-card > .gl-head { margin: 0; }
body.glass-bridge #helm-detail .helm-card > .gl-foot { margin: 0; }
.helm-route-note, .helm-empty { margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); }
.helm-route-note strong { font-weight: 500; color: var(--ink); }
.helm-route-note.gl-bad { color: var(--bad); }
.helm-route-preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.helm-route-preview .voyage-track { margin: 0; color: var(--accent); }
.helm-route-preview .voyage-track svg { max-height: 56px; }
.helm-route-preview .voyage-track figcaption { font: 400 11px/1.3 var(--font-mono); color: var(--ink-muted); }
.helm-route-instruments { display: flex; flex-direction: column; min-width: 0; }
.helm-port-highlights { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.helm-port-highlights .gl-label { margin: 4px 0 0; }
.helm-port-highlights > span { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 13px/1.4 var(--font-ui); color: var(--ink); }
.helm-notice-link { margin: 0; }
.helm-opportunities { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.helm-opportunities > .gl-label { margin: 6px 0 0; }
.helm-opportunities .helm-run {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 4px 10px;
  padding: 10px 0 0; border-top: 1px solid var(--line-soft);
}
.helm-opportunities .helm-run > .goods-thumb { position: relative; grid-column: 1; grid-row: 1; }
.helm-opportunities .helm-run > strong { grid-column: 2; grid-row: 1; font: 500 13px/1.3 var(--font-ui); color: var(--ink); }
.helm-opportunities .helm-run > span, .helm-opportunities .helm-run > b, .helm-opportunities .helm-run > p, .helm-opportunities .helm-run > .gl-btn { grid-column: 1 / -1; }
.helm-opportunities .helm-run > span { font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.helm-opportunities .helm-run > b { font: 400 13px/1.4 var(--font-mono); }
.helm-opportunities .helm-run > .gl-btn { justify-self: start; }

/* Fleet status: one row per hull, state and place on the right. */
.helm-fleet-row { flex-wrap: wrap; }
.helm-fleet-row .gl-k { flex: 0 0 auto; overflow-wrap: normal; }
.helm-fleet-row .gl-v { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 10px; }
.helm-fleet-state { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--ink-muted); }
.helm-fleet-where { color: var(--ink); }

/* Planet archive: server-authored records, folded. */
.planet-lore-list { display: flex; flex-direction: column; min-width: 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); }
.planet-lore-entry { border-bottom: 1px solid var(--line-soft); }
body.glass-bridge #helm-detail .planet-lore-entry > summary { min-height: 44px; cursor: pointer; font: 400 13px/1.4 var(--font-ui); color: var(--ink); }
.planet-lore-summary { margin: 0 0 6px; color: var(--ink-muted); }
.planet-lore-body { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* v3r-guardrails.css paints the old chart's caption and row notes #eee5ce;
   they are muted glass text now. */
body.glass-bridge #helm-detail .nav-index :is(.nav-caption, .nav-route-row small) { color: var(--ink-muted); }
/* It also gives every #helm-detail button 44 px and a not-allowed cursor; the
   detail's glass buttons keep the README sizes on desktop and the 44 px
   targets on touch and narrow screens. */
body.glass-bridge #helm-detail .gl-btn { min-width: 0; min-height: 0; }
body.glass-bridge #helm-detail :is(.journey-card, .helm-card) .gl-btn:not(.gl-btn--sm, .gl-btn--md) { min-height: 38px; }
body.glass-bridge #helm-detail .gl-btn:is(:disabled, [aria-disabled="true"]) { cursor: default; }
@media (max-width: 640px), (pointer: coarse) {
  body.glass-bridge #helm-detail .gl-btn,
  body.glass-bridge #helm-detail :is(.journey-card, .helm-card) .gl-btn:not(.gl-btn--sm, .gl-btn--md) { min-height: 44px; }
  body.glass-bridge #helm-detail .gl-btn--sm, body.glass-bridge #helm-detail .gl-btn--md { height: 44px; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  body.glass-bridge #helm-detail { grid-template-columns: minmax(0, 1fr); }
}
/* Narrow phones: the README's small buttons (padded 0 10px) put CENTRE on
   the next row, at the right. The divider would only end the first row, so
   it goes. */
@media (max-width: 389px) {
  body.glass-bridge #helm-chart-controls .gl-seg-divider { display: none; }
  body.glass-bridge #helm-chart-controls .nav-home { margin-left: auto; }
}