/* Bay overlays — the Fabricator, Science Lab and Training Center layers.
 *
 * The shape itself is the kit's (`.u-bay` in css/ui.css, built by
 * views/ui.js `bay()`): header strip, left context column, right grouped list.
 * This file holds only what those three activities need on top of it — the
 * craft/research/training job banner, the recipe and tech row bodies, the
 * pilot bench cards. Anything that turns out to be general belongs in the kit
 * instead, not here.
 *
 * Everything here is scoped to `[data-bay]` (the attribute each layer passes to
 * `bay()`) or to a `bay-` prefixed class, so no rule can reach a view that has
 * not been converted. Nothing truncates: no ellipsis rule is authored here, and
 * the one a bay inherits (the item name in a catalog detail block) is undone
 * below.
 */

/* ── The host ─────────────────────────────────────
   Each layer mounts into the `.sb-overlay` box the Star Base view sizes over
   the station, and adds `.is-bay` while it is open. The panel's own chrome is
   the kit's, so the host keeps nothing but the dim the station still reads
   through — which is also the backdrop a click closes the layer on. */
.sb-overlay.is-bay{
  display:block;
  background:var(--u-ink);
  border:0;border-radius:0;box-shadow:none;
}

/* ── Row anatomy ──────────────────────────────────
   A bay row carries a body, not just a meta line: a tech's description and the
   full spec of what it unlocks, a recipe's output card, a pilot's five
   attributes. The kit's `row({icon, body})` provides both the glyph column and
   the block — this file only tints the glyph for a completed row. */
.u-row.is-done .u-row-icon{color:var(--u-ok)}
/* The item name inside a `catalogDetailHtml` block is authored to ellipsis in
   a card grid; in a bay it has the width to wrap instead (UI-REDESIGN.md §1.4).
   Dropping `white-space:nowrap` is what disables the ellipsis — with the text
   wrapping there is no overflow left for it to mark. */
[data-bay] .cd-name{white-space:normal;overflow:visible;max-width:none;overflow-wrap:anywhere}

.bay-effect{font:600 13px/1.4 var(--u-font-ui);color:var(--u-line);overflow-wrap:anywhere}
.bay-desc{font:400 13px/1.5 var(--u-font-ui);color:var(--u-body);overflow-wrap:anywhere}
/* What a row costs. The kit's `costLine()` states a price; a cost it cannot
   express — an item, or a shortfall named in place — is another `.u-cost`
   chunk beside it, marked `is-short` when it is out of reach. The separator is
   generated so a wrapped line never strands a lone middot. */
.bay-cost{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.bay-cost>.u-cost+.u-cost::before{content:'·';margin-right:6px;color:var(--u-mute)}
/* The hull / component a tech unlocks, kept under a rule inside the row. */
.bay-unlock{
  display:flex;flex-direction:column;gap:7px;
  padding-top:9px;border-top:1px solid var(--u-line-soft);
}

/* ── Pilot rows (scientist bench, hire rows) ──────
   Portrait beside the pilot's rank and its one measured attribute: name + level + XP over its meter. */
.bay-portrait{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(40,90,160,.4),rgba(8,18,40,.6));
  border:1px solid var(--u-line-soft);
}
.bay-rank{font:600 11px/1 var(--u-font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--u-label)}
.bay-attr{
  display:flex;flex-direction:column;gap:5px;
  padding:6px 8px;border-radius:var(--u-r-sm);border:1px solid transparent;
}
.bay-attr.is-active{background:var(--u-train-well);border-color:var(--u-train-line)}
.bay-attr.is-cap{opacity:.82}
.bay-attr-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.bay-attr-name{font:600 13px/1.3 var(--u-font-ui);color:var(--u-body)}
.bay-attr-meta{
  font:400 12px/1.3 var(--u-font-ui);font-variant-numeric:tabular-nums;color:var(--u-label);
}
.bay-attr-meta b{color:var(--u-value)}

/* ── Column + list furniture ──────────────────────
   The kit's rule carries a dialog's margin; inside the side column the flex gap
   already spaces it. */
.u-bay-side .u-rule{margin:3px 0}
/* ── Reflow ───────────────────────────────────────
   Three breakpoints, three jobs (UI-REDESIGN.md §4 Phase 7). The bay *shell*
   reflows in css/ui.css — it narrows the context column, keeps the two columns
   side by side on a short screen and stacks them only on a narrow tall one — so
   what is left here is this file's own furniture. */

/* Narrow or short: the glyph column and the portrait that fills it shrink
   together, so a pilot row's picture still fits the box the kit gives it. */
@media (max-width:900px),(max-height:520px){
  [data-bay] .u-row-icon{flex:0 0 32px;width:32px;height:32px}
  [data-bay] .u-row-icon svg{width:26px;height:26px}
  .bay-portrait{width:32px;height:32px;flex:0 0 32px}
}

/* Short: the landscape phone. The job banner, the row bodies and the attribute
   strip give back the height they spend on a desktop; the bay's own scroll
   (css/ui.css) carries whatever is left over. */
@media (max-height:520px){
  [data-bay] .u-job{padding:8px 10px;gap:7px}
  [data-bay] .u-job-row{gap:6px 9px}
  [data-bay] .u-job-name{font-size:13px}
  [data-bay] .u-group-label{margin-bottom:6px}
  [data-bay] .u-row-body{gap:5px}
  [data-bay] .u-bay-list{gap:11px}
  .u-bay-side .u-rule{margin:2px 0}

  .bay-effect,
  .bay-desc{font-size:12px;line-height:1.4}
  .bay-cost{gap:2px 7px}
  .bay-unlock{gap:6px;padding-top:7px}

  .bay-attr{padding:4px 7px;gap:4px}
  .bay-attr-name{font-size:12px}
  .bay-attr-meta{font-size:11px}
}