/* ── Pre-battle preview overlay ─────────────────────
   The preview is the kit's bay (UI-REDESIGN.md §1.2 #8, `bay()` in
   views/ui.js) holding two panels of one size: your ship on the left — the
   ship picker, the crew seats with a pilot selector and a skill picker each,
   and every installed component — and the contact on the right. The panel
   chrome, the stat chips, the pills and the CTA all come from css/ui.css; this
   file holds only what is the preview's own — the host, the commit cluster in
   the header, the two panels, the selectors, the seat cards, the compact part
   rows and the picker's selectable option chips. */

/* ── The host ─────────────────────────────────────
   The box the calling view sizes over its own scene (map.js over the galaxy,
   pvp.js over the ladder, battle.js over the canvas). The bay's chrome is the
   kit's, so the host is only the dim the scene reads through — which is also
   the backdrop a click dismisses the preview on. */
.preview-overlay{
  position:absolute;
  inset:0;
  z-index:var(--z-bay);
  background:var(--u-ink);
}
/* The variant hosted outside the map — the PvP ladder and the Arena prep window
   over the battle stage. It sits above the battle canvases and the idle hint,
   and below the battle-result overlay, which owns --z-bay. */
.preview-overlay-floating{z-index:var(--z-panel)}

/* ── Commit cluster ───────────────────────────────
   Rides in the bay header beside the ✕: the Arena prep clock, the button, and
   the reason under both whenever the button is locked. */
.pv-commit{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.pv-commit-row{display:flex;align-items:center;gap:12px}
/* The kit spaces a blocked line off the control above it; inside this column
   the flex gap already does. */
.pv-commit .u-blocked{margin-top:0}
/* The Arena prep deadline — a wall clock, so it reads in the mono face, and
   gold because it is a limit rather than a state. */
.pv-clock{
  font:400 16px/1 var(--u-font-mono);letter-spacing:.08em;
  color:var(--u-warn);
  padding:9px 13px;
  border:1px solid rgba(255,200,68,.4);border-radius:var(--u-r-sm);
  background:rgba(40,30,10,.45);
  white-space:nowrap;
}

/* ── The duel ─────────────────────────────────────
   Two equal columns that fill the bay's list. Each panel spans the grid's three
   rows as a subgrid — head, stats, the rest — so the two heads and the two stat
   rows sit level whatever either panel holds below them. The last row takes
   the rest of the bay's height and each panel scrolls its crew and parts there,
   so both heads and both stat rows stay in view. The panels take the battle's
   side colours: blue trim for yours, pink for the contact. */
.pv-duel{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr);
  column-gap:18px;
}
.pv-side{
  grid-row:span 3;
  display:grid;grid-template-rows:subgrid;row-gap:14px;
  min-width:0;padding:14px 16px 16px;
  border:1px solid var(--pv-line);border-radius:var(--u-r);
  background:linear-gradient(180deg,var(--pv-wash),transparent 160px),rgba(3,9,20,.35);
}
.pv-side.is-own{--pv-line:rgba(111,168,255,.42);--pv-wash:rgba(111,168,255,.1);--pv-ink:#8fc0ff}
.pv-side.is-foe{--pv-line:rgba(255,122,214,.36);--pv-wash:rgba(255,122,214,.08);--pv-ink:#ff9ee0}
.pv-side-body{min-width:0;min-height:0;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:16px}

/* ── Ship head ────────────────────────────────────
   The side's kicker over its ship tiles — the Hangar's fleet strip and tiles
   (css/hangar.css), a step smaller, each naming its hull — and your crew line.
   Your panel lists your warships, the active one lit by its border alone; the
   contact's holds its one tile, rimmed in its side colour. */
.pv-ship{display:flex;flex-direction:column;gap:8px;min-width:0}
.pv-ship>.u-label{color:var(--pv-ink)}
.pv-fleet .hg-tile{width:150px;padding:8px;gap:6px}
.pv-fleet .hg-tile-img{height:72px}
.pv-side.is-foe .hg-tile{border-color:var(--pv-line)}
/* The hull a tile's ship is built on, in its side's colour, where the Hangar shows a level. */
.pv-tile-hull{font:600 12px/1.25 var(--u-font-ui);color:var(--pv-ink);text-align:center;overflow-wrap:anywhere}
/* Your crew line sits at the foot of the head row, just over the stats it reads with. */
.pv-ship-sub{margin-top:auto;font:400 13px/1.35 var(--u-font-ui);color:var(--u-label);overflow-wrap:anywhere}

/* ── Compared stats ───────────────────────────────
   The same chips in the same order on both panels, on equal tracks, so each
   value sits straight across from the one it is weighed against; the higher
   of the two is lit green by the kit's `is-ok` chip. */
.pv-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-self:start}
.pv-stats .u-stat{padding:7px 9px}

/* ── Seat selector ────────────────────────────────
   A native select in the kit's well, holding each seat's pilot. The chevron is drawn by two gradients so it takes the line
   colour; the open list keeps the dark field it was picked from. */
.pv-select{
  appearance:none;-webkit-appearance:none;
  max-width:100%;min-width:0;
  padding:7px 30px 7px 10px;
  font:600 14px/1.25 var(--u-font-ui);color:var(--u-value);
  border:1px solid var(--u-line-dim);border-radius:var(--u-r-sm);
  background:
    linear-gradient(45deg,transparent 50%,var(--u-line) 50%) calc(100% - 16px) 50%/5px 5px no-repeat,
    linear-gradient(135deg,var(--u-line) 50%,transparent 50%) calc(100% - 11px) 50%/5px 5px no-repeat,
    var(--u-well);
  cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.pv-select:hover,.pv-select:focus-visible{border-color:var(--u-line);background-color:rgba(79,216,255,.08);outline:none}
.pv-select option{background:#071226;color:var(--u-value)}
.pv-select option:disabled{color:var(--u-mute)}

/* ── Crew seats ───────────────────────────────────
   One card per hull seat, fronted by the Bridge console's screen: the seat, its
   pilot selector and the pilot's level beside it, the state on the right, the
   pilot's stamina and skill pick across the card's width below. */
.pv-seat{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;
  grid-template-areas:"screen head side" "body body body";
  gap:9px 12px;align-items:start;
  padding:10px 12px;
}
.pv-seat+.pv-seat,.pv-side-body .u-note+.pv-seat{margin-top:8px}
.pv-seat>.pl-screen{grid-area:screen;min-height:64px}
.pv-seat .pl-screen-portrait{width:56px;height:56px}
.pv-seat-head{grid-area:head;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.pv-seat-side{grid-area:side;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pv-seat-body{grid-area:body;min-width:0}

/* Aboard: the seat is live. Empty: dashed. Absent or off-seat: the pilot's screen goes dark. */
.pv-seat.is-aboard{border-color:color-mix(in srgb,var(--u-ok) 34%,transparent)}
.pv-seat.is-empty{border-style:dashed;border-color:var(--u-line-dim)}
.pv-seat:is(.is-absent,.is-straggler){border-color:rgba(255,34,68,.3)}
.pv-seat:is(.is-absent,.is-straggler) .pl-screen-portrait{filter:grayscale(1) brightness(.55)}

/* What a seated pilot's governing attribute adds to the ship at battle start.
   Sits on the seat card's meta line; green, like every other "this is what it
   grants" line in the client (.pl-pilot-effect, .pl-level-effect). */
.pv-crew-effect{color:var(--u-ok)}

/* ── Stamina + meal ───────────────────────────────
   The bar takes the room it needs and the meal button sits beside it, so a
   tired seat and its remedy read as one line rather than two controls. */
.pv-stamina{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
}
.pv-stamina .pl-stamina{flex:1 1 170px;margin:0}

/* The server's verdict on this seat, under the bar that shows why: what the
   fight costs, and the clock until this pilot can pay it. Sits inside the seat
   card rather than only in the blocked line by the button, so the crew list itself
   points at who is holding the launch up. */
.pv-tired{
  font:400 12px/1.45 var(--u-font-ui);color:#ff9aae;
  margin:-2px 0 8px;
}

/* ── Component rows ───────────────────────────────
   The kit's row at a denser step, so a ship's whole loadout fits a half-width
   panel: the type glyph, the name, slot · type · rarity, and the battle stat
   line `statsLine` (hangar.js) gives the Hangar too — its inline children
   (.dmg-s, .dmg-a, .dmg-h) take their colours from hangar.css. */
.pv-comp.u-row{gap:10px;padding:7px 10px}
.pv-comp.u-row+.pv-comp.u-row{margin-top:5px}
.pv-comp .u-row-icon{flex-basis:20px;width:20px;height:20px}
.pv-comp .u-row-icon svg{width:18px;height:18px}
.pv-comp .u-row-main{gap:2px}
.pv-comp .u-row-name{font-size:14px}
.pv-comp .u-row-meta{font-size:12px}
.pv-comp .u-row-body{gap:2px;margin-top:0}
.pv-comp-stats{
  font:400 12px/1.4 var(--u-font-mono);
  color:var(--u-body);overflow-wrap:anywhere;
}
/* Which pilot is carrying a component's skill into this fight. */
.pv-comp-skill{font:600 12px/1.35 var(--u-font-ui);color:var(--u-line);overflow-wrap:anywhere}
.pv-comp-skill.is-armed{color:var(--u-ok)}

/* ── Skill picker ─────────────────────────────────
   One pilot, one skill: the chips behave as a radio group. A pick the pilot
   cannot take stays on screen and carries its own reason, so the picker never
   silently drops an option the player was looking for. */
.pv-picks{display:flex;flex-wrap:wrap;gap:6px}
.pv-pick{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;
  padding:6px 10px;text-align:left;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);
  background:var(--u-well);color:var(--u-body);
  /* A <button> does not inherit type, so the chip states its own — its spans
     then only override weight and size. */
  font:400 13px/1.25 var(--u-font-ui);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.pv-pick:hover:not(:disabled){border-color:var(--u-line);background:rgba(79,216,255,.1);color:var(--u-value)}
.pv-pick.is-picked{border-color:var(--u-ok);background:rgba(0,232,122,.12);color:var(--u-ok)}
.pv-pick.is-none .pv-pick-name{font-style:italic}
.pv-pick:disabled{
  cursor:not-allowed;
  border-color:rgba(255,34,68,.32);background:rgba(40,14,22,.45);color:var(--u-mute);
}
.pv-pick-name{font:600 13px/1.25 var(--u-font-ui)}
.pv-pick-slot{font:400 11px/1.25 var(--u-font-mono);color:var(--u-mute)}
.pv-pick-why{font:400 11px/1.25 var(--u-font-ui);color:#ff9aae}

/* ── Reflow ───────────────────────────────────────
   Breakpoints as UI-REDESIGN.md §4 Phase 7 sets them. The bay shell reflows in
   css/ui.css; what is left is the preview's own — the duel, the heads, the
   stat rows, the seat cards and the picker chips. */

/* A half-width panel too narrow for six chips abreast takes them in two rows of three. */
@media (max-width:1280px){
  .pv-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Narrow: the commit cluster stops hugging the right edge so the clock is not
   stranded, the ship tiles shrink, and a chip is bounded by the row it wraps inside. */
@media (max-width:900px){
  .pv-commit{align-items:flex-start}
  .pv-duel{column-gap:12px}
  .pv-side{padding:12px}
  .pv-fleet .hg-tile{width:124px}
  .pv-fleet .hg-tile-img{height:56px}
  .pv-seat{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"screen head" "side side" "body body"}
  .pv-seat>.pl-screen{min-height:52px}
  .pv-seat .pl-screen-portrait{width:46px;height:46px}
  .pv-seat-side{flex-direction:row;flex-wrap:wrap;align-items:center}
  .pv-pick{max-width:100%}
  .pv-pick-name{overflow-wrap:anywhere}
}

/* A phone, upright or on its side: the panels scroll with the bay's list —
   pinned heads would leave the crew no height. */
@media (max-width:640px),(max-height:520px){
  .pv-duel{flex:0 0 auto}
  .pv-side-body{overflow:visible}
}

/* Upright: the panels stack, yours first, and stop sharing rows. */
@media (max-width:640px){
  .pv-duel{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
  .pv-side{grid-row:auto;grid-template-rows:none}
}

/* Short: the landscape phone. The header cluster, the ship tiles and the chips
   give back the height they spend on a desktop. */
@media (max-height:520px){
  .pv-commit{gap:4px}
  .pv-commit-row{gap:9px}
  .pv-clock{font-size:14px;padding:7px 10px}

  .pv-duel{grid-template-rows:auto auto auto}
  .pv-side{row-gap:10px;padding:10px 12px}
  .pv-ship{gap:6px}
  .pv-fleet .hg-tile{width:116px;padding:6px}
  .pv-fleet .hg-tile-img{height:48px}
  .pv-ship-sub{font-size:12px}

  .pv-seat{padding:8px 10px;gap:6px 10px}

  .pv-comp.u-row{padding:5px 8px}
  .pv-comp-stats{font-size:11px}
  .pv-comp-skill{font-size:11px}
  .pv-picks{gap:5px}
  .pv-pick{padding:5px 9px}
}

/* Touch: one skill chip is one tap target, so it carries the full 44px even
   when it holds a single line — `align-content` centres that line in the
   taller box without disturbing how the name, slot and reason share a baseline.
   The selectors take theirs from base.css. */
@media (pointer: coarse){
  .pv-pick{min-height:44px;padding:7px 13px;align-content:center}
  .pv-pick:active:not(:disabled){border-color:var(--u-line);background:rgba(79,216,255,.1);color:var(--u-value)}
}