/* Hangar — what the UI kit does not already provide.
 *
 * The screen itself is composed from css/ui.css: the panels are `.u-brk`
 * frames, the hero ship is a `dialog()`, every stat is a `statChip()`, every
 * slot / stowage entry is a `row()`, the weight budget is a `meter()`, and a
 * control that cannot act says why through `blockedLine()`. What is left here
 * is only what is the Hangar's own — the ship-canvas frames, the slot / seat /
 * stowage grids the kit rows sit in, and the stowage tab strip.
 *
 * Three groups below outlive the Hangar and live here for historical reasons:
 * the component-type icon + type/rarity pill palette, the component skill badge
 * and its hover panel, and the hull slot-pill strip. `_shared.js` emits all
 * three on behalf of every view that shows a catalog item (the Fabricator and
 * Science Lab detail blocks, the Trade station, the Map's revealed enemies),
 * and preview.js emits the skill badge directly — cross-view furniture rather
 * than Hangar chrome.
 *
 * Nothing here truncates (UI-REDESIGN.md §1.4): names wrap, chips wrap, and no
 * ellipsis rule is authored in this file.
 */

/* ── Page scaffolding ───────────────────────────
   The gap is wider than a normal stack because every panel wears corner
   brackets that sit `--u-brk-o` outside its own box; a tighter gap would let
   two neighbours' brackets collide. */
.hg-body{gap:24px}

.hg-panel{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:15px 17px 17px;
  border:1px solid var(--u-line-dim);border-radius:var(--u-r);
  background:var(--u-glass);
}
.hg-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}

/* Slots take the wider column: a component row carries a stat line and a
   control, a seat tile is a narrow pilot card. */
.hg-bays{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}

/* ── Fleet roster strip ─────────────────────────
   A horizontally scrolling strip of ship tiles. A tile carries only what
   choosing a ship needs — the hull, its name and its level; stats, weight and
   weapons belong to the hero card below, which is the one place they render. */
.hg-roster{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  padding-bottom:4px;
  scrollbar-width:thin;scrollbar-color:rgba(79,216,255,.45) transparent;
}
.hg-roster::-webkit-scrollbar{height:8px}
.hg-roster::-webkit-scrollbar-thumb{background:rgba(79,216,255,.4);border-radius:4px}
.hg-roster::-webkit-scrollbar-track{background:transparent}
.hg-roster>.u-empty{flex:1}

.hg-tile{
  flex:0 0 auto;width:172px;
  padding:10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r);
  background:var(--u-well);
  font-family:var(--u-font-ui);color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.hg-tile.is-clickable{cursor:pointer}
.hg-tile.is-clickable:hover{border-color:var(--u-line-dim);transform:translateY(-1px)}
.hg-tile.is-current{border-color:var(--u-line);box-shadow:0 0 16px rgba(79,216,255,.18)}
.hg-tile-name{
  max-width:100%;
  font:600 14px/1.25 var(--u-font-ui);color:var(--u-value);
  text-align:center;overflow-wrap:anywhere;
}
.hg-tile-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}

/* ── Ship canvas frames ─────────────────────────
   The two places a procedural hull is painted in this view. Both are plain
   `<canvas>` boxes (views/_shared.js shipImageHtml) — the frame is all the CSS
   they need. */
.hg-tile-img,
.hg-hero-canvas{
  display:block;width:100%;
  border-radius:var(--u-r-sm);
  border:1px solid var(--u-line-soft);
  background:radial-gradient(ellipse at center,rgba(10,26,54,.85),rgba(2,6,14,.95));
}
.hg-tile-img{height:88px}
.hg-hero-canvas{height:210px;border-radius:var(--u-r)}

/* ── Hero card ──────────────────────────────────
   A kit dialog with its dismiss dropped — a hero card is not closed, it is
   switched away from. It spans the view instead of the dialog's own measure,
   and its title doubles as the rename field. */
.hg-hero{width:auto;max-width:none}
.hg-hero .u-dlg-title{cursor:pointer;transition:color .15s}
.hg-hero .u-dlg-title:hover{color:var(--u-line)}
.hg-hero-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px}
.hg-hero-img-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.hg-hero-facts{display:flex;flex-direction:column;gap:11px;min-width:0}
/* The per-weapon damage line comes from the shared `wlistHtml`, which is sized
   for the battle rail; on the hero it is the ship's headline armament and gets
   the readout scale of the rest of this screen. */
.hg-hero-weapons .wlist{gap:4px}
.hg-hero-weapons .wrow{font:400 13px/1.5 var(--u-font-mono);color:#9cbcd8}
.hg-hero-weapons .wrow b{color:var(--u-value)}
.hg-hero-weapons .wt{width:62px}

/* ── The three grids ────────────────────────────
   Component mounts, crew seats and stowage are grids of kit rows (seats keep
   the shared `.pl-slot` pilot skin from css/pilots.css). The kit stacks rows
   with a top margin, which a grid already spaces — drop it. `is-blank` turns a
   grid back into a block so an empty state centres across the whole panel. */
.hg-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px}
.hg-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.hg-stow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:10px}
.hg-slot-grid.is-blank,
.hg-seats.is-blank,
.hg-stow-grid.is-blank{display:block}
.hg-slot-grid .u-row+.u-row,
.hg-stow-grid .u-row+.u-row{margin-top:0}
/* Both pickers are popovers anchored to the tile that opened them, so every
   tile that can open one is a positioning context. */
.hg-slot-grid .u-row{position:relative}
.hg-slot-grid .u-row[data-slot-empty]{border-style:dashed;cursor:pointer}
.hg-slot-grid .u-row[data-swap]{cursor:pointer}
.hg-slot-grid .u-row:hover{border-color:var(--u-line-dim)}
.hg-slot-grid .u-row[data-picking]{border-color:var(--u-line)}
.hg-slot-grid .u-row[data-slot-empty] .u-row-icon{opacity:.45}
/* A pilot portrait is bigger than the kit's glyph column, and the type icons
   read better at the same measure beside it. */
.hg-stow-grid .u-row-icon{flex:0 0 48px;width:48px;height:48px}

/* ── Row furniture ──────────────────────────────
   Facts a kit row carries that the kit itself has no opinion about: the type /
   rarity meta line, the numeric readouts in it, the component's battle stat
   line, and the pay-out beside a Sell / Scrap button. */
.hg-slot-grid .u-row-meta,
.hg-stow-grid .u-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px}
.hg-num{font-size:12px;color:var(--u-body);letter-spacing:.03em}
.hg-stat-line{font:400 13px/1.45 var(--u-font-mono);color:#9cbcd8;overflow-wrap:anywhere}
.hg-stat-line b{color:var(--u-value)}
.hg-badge-row{display:flex;flex-wrap:wrap;gap:5px}
.hg-act{display:inline-flex;align-items:center;gap:8px}

/* ── Picker popover ─────────────────────────────
   The seat picker's skin (`.pl-picker`, css/pilots.css) also serves the
   component picker — the two are the same gesture. Anchored inside a ~300px
   mount row, it needs more width than a seat tile gives it. */
.hg-slot-grid .pl-picker{min-width:290px;left:0;right:auto}
.hg-slot-grid .pl-pick-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hg-pick-icon{width:18px;height:18px}
.hg-pick-qty{font:600 12px/1.2 var(--u-font-mono);color:var(--u-label);margin-left:auto}

/* ── Stowage tab strip ──────────────────────────
   Three views of one drawer. Not the kit's nav chips: those are the shell's,
   and these switch a list rather than the screen. */
.hg-tabs{display:flex;flex-wrap:wrap;gap:6px}
.hg-tab{
  font:600 11px/1 var(--u-font-ui);letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--u-line-soft);color:var(--u-label);
  padding:9px 14px;border-radius:var(--u-r-sm);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;
}
.hg-tab:hover{color:#d2e9ff;border-color:var(--u-line-dim);background:rgba(79,216,255,.06)}
.hg-tab.is-active{color:var(--u-line);border-color:var(--u-line-dim);background:rgba(79,216,255,.14)}

/* ── Component type icon + pills (cross-view) ───
   Emitted by _shared.js (`componentTypeIconHtml`, `componentBadges`) and read
   by the Hangar, Trade, Preview, Map and the battle loot list. One palette
   drives both the glyph and the type pill; ty2 (generic Defence, an open slot)
   and ty8 (blueprint) only ever surface here. */
.comp-ty-icon{display:block;flex:0 0 auto}
.ty{
  font:600 11px/1.2 var(--u-font-ui);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.ty.ty1, .comp-ty-icon.ty1{color:#b58cff}
.ty.ty2, .comp-ty-icon.ty2{color:#9fb3c8}
.ty.ty3, .comp-ty-icon.ty3{color:#55c6ff}
.ty.ty4, .comp-ty-icon.ty4{color:#ff7733}
.ty.ty5, .comp-ty-icon.ty5{color:#ffd633}
.ty.ty6, .comp-ty-icon.ty6{color:#88c8a8}
.ty.ty7, .comp-ty-icon.ty7{color:#ff66aa}
.ty.ty8, .comp-ty-icon.ty8{color:#9cd9ff}
.ty.ty10, .comp-ty-icon.ty10{color:#c9a37a}
/* The mining pair takes the scrap palette it produces: a drill cuts it, a hold
   carries it. */
.ty.ty11, .comp-ty-icon.ty11{color:var(--u-scrap)}
.ty.ty12, .comp-ty-icon.ty12{color:#c98a5a}
.ty.ty-shield, .comp-ty-icon.ty-shield{color:#55b4ff}
.ty.ty-armor, .comp-ty-icon.ty-armor{color:#ffae55}
.ty.ty-hull{color:#7fe3c0}
.ty.ty-pilot{color:#cdb6ff}

/* Rarity, stated as a word rather than only as a colour. Each rarity also
   exposes its colour as --rar-col so a caller can tint a name to match. */
.rar{
  font:700 10px/1.3 var(--u-font-ui);letter-spacing:.1em;text-transform:uppercase;
  padding:1px 5px;border-radius:3px;border:1px solid currentColor;white-space:nowrap;
}
.rar0{color:#88aacc;--rar-col:#88aacc}.rar1{color:#44cc88;--rar-col:#44cc88}.rar2{color:#44aaff;--rar-col:#44aaff}.rar3{color:#cc66ff;--rar-col:#cc66ff}.rar4{color:#ffaa44;--rar-col:#ffaa44}

/* ── Component skill badge (cross-view) ─────────
   A compact pill carrying the per-SkillKind glyph + the skill's name; the load
   time lives in the hover panel, not the badge, so component names keep their
   room. Colour matches HUD_SKILL so a player can scan "this part grants a
   battle skill" the way they scan the lit ring on the battle skill strip. */
.comp-skill{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px 2px 5px;
  border:1px solid rgba(0,212,255,.35);
  border-radius:3px;
  background:rgba(4,34,52,.55);
  color:#9cd9ff;
  cursor:help;
  font:600 11px/1.3 var(--u-font-ui);letter-spacing:.03em;
  flex:0 0 auto;
}
.comp-skill:hover{border-color:rgba(0,212,255,.75);background:rgba(4,44,68,.7)}
.comp-skill-icon{width:14px;height:14px;display:block;color:inherit;flex:0 0 auto}
.comp-skill-name{color:#dff1ff;font-weight:700;white-space:nowrap;text-transform:none}

/* Hover panel — deliberately the same object as the canvas tooltip
   `drawHudTooltip` paints in battle (canvas/icons.js): dark panel, HUD_SKILL
   accent border + glow, Share Tech Mono title and body. It keeps the mono face
   because the battle HUD it mirrors cannot use a webfont.
   position:fixed + JS placement (hover handlers in views/_shared.js): badges
   sit inside scrollable popovers (.pl-picker is overflow-y:auto) that clip
   absolutely-positioned children, so the panel anchors to the viewport instead
   and JS clamps it on-screen. pointer-events:none so it never blocks a click
   beneath it. */
.comp-skill-tip{
  display:none;
  position:fixed;
  z-index:var(--z-toast);
  pointer-events:none;
  width:max-content;
  max-width:320px;
  background:rgba(6,14,24,.95);
  border:1px solid var(--accent);
  border-radius:8px;
  box-shadow:0 0 14px rgba(0,212,255,.55);
  padding:12px;
  text-align:left;
  white-space:normal;
  letter-spacing:normal;
}
.comp-skill-tip-title{
  display:block;
  font:bold 14px 'Share Tech Mono',monospace;
  color:var(--accent);
  line-height:22px;
}
.comp-skill-tip-body,
.comp-skill-tip-meta{
  display:block;
  font:12px 'Share Tech Mono',monospace;
  color:#cfe2f5;
  line-height:17px;
}
.comp-skill-tip-body{margin-top:4px}
.comp-skill-tip-meta{margin-top:6px;color:#9cd9ff}

/* The picker popover is itself scrollable, so its skill badge needs a hair of
   left margin to stay visually grouped with the name. */
.pl-pick-name .comp-skill{margin-left:2px}

/* ── Hull slot-pill strip (cross-view) ──────────
   `_shared.js::slotPillsHtml` — how many mounts of each type a chassis has,
   used by the Trade station's hull cards and by the catalog detail blocks the
   Fabricator and Science Lab render. The Hangar's own mounts are the row grid
   above; this strip serves previews where nothing is installed to count. */
.hg-slots{display:flex;flex-wrap:wrap;gap:4px}
.sl{
  font:600 11px/1.4 var(--u-font-ui);letter-spacing:.06em;
  padding:2px 7px;border-radius:3px;border:1px solid;
}
.sl-empty{color:#446680;border-color:#1a2a3a;background:#0a1218}
.sl-partial{color:#88aacc;border-color:#2a4a6a;background:#0a1828}
.sl-full{color:#cce8ff;border-color:#3a6aaa;background:#0a2238;font-weight:700}

/* ── Reflow ─────────────────────────────────────
   Three breakpoints, three jobs (UI-REDESIGN.md §4 Phase 7): `max-width`
   collapses columns, `max-height` is the landscape phone and shrinks vertical
   chrome, `pointer: coarse` grows what a finger has to hit.

   The two bays stack before the client-wide 900px, because a mount row and a
   seat tile both want ~300px of their own. */
@media (max-width:1100px){
  .hg-bays{grid-template-columns:minmax(0,1fr)}
}

/* Narrow: the mount and stowage grids go to one column — their rows carry a
   stat line, a badge row and up to two controls, so a second track starves
   both. Seats are tiles rather than rows and keep pairing up while the panel
   has room; `min()` is what stops a track out-measuring a narrower panel, which
   is how a fixed `minmax` minimum turns into horizontal page scroll. */
@media (max-width:900px){
  .hg-slot-grid,
  .hg-stow-grid{grid-template-columns:minmax(0,1fr)}
  .hg-seats{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
  /* The component picker shrink-wraps its content (`right:auto`), so both ends
     of its measure have to be bounded by the row it is anchored inside. */
  .hg-slot-grid .pl-picker{min-width:min(290px,100%);max-width:100%}
}

/* Narrow *and* tall — a phone held upright, or a small window. Only here does
   stacking the hero card help: on a short screen it spends the scarce axis to
   buy width there is already plenty of. */
@media (max-width:900px) and (min-height:521px){
  .hg-hero-grid{grid-template-columns:minmax(0,1fr)}
  .hg-hero-canvas{height:180px}
}

/* Short: the landscape phone. Panel padding, section gaps and the corner
   brackets all pull in so the fleet strip and the hero card stay on screen, and
   both ship canvases give back the height they spend on a desktop-sized
   silhouette. The hero keeps its two columns — at 740px wide a 168px canvas
   column still leaves the facts their full measure, where stacking would cost
   the whole height of the silhouette for nothing. */
@media (max-height:520px){
  .hg-body{gap:13px}
  .hg-panel{--u-brk:12px;--u-brk-o:4px;gap:9px;padding:9px 11px 11px}
  .hg-panel-head{gap:8px}
  .hg-bays{gap:13px}

  .hg-tile{width:132px;padding:7px;gap:6px}
  .hg-tile-img{height:62px}
  .hg-tile-name{font-size:12px}

  /* The hero is an inline card in a page that already scrolls, not a floating
     dialog, so it keeps its full height instead of taking the kit's dialog
     max-height and scrolling a second time inside the view. */
  .hg-hero{max-height:none;overflow:visible}
  .hg-hero-grid{grid-template-columns:168px minmax(0,1fr);gap:13px}
  .hg-hero-canvas{height:132px}
  .hg-hero-facts{gap:8px}
  .hg-hero-weapons .wrow{font-size:12px}

  .hg-slot-grid,
  .hg-seats,
  .hg-stow-grid{gap:7px}
  .hg-stow-grid .u-row-icon{flex:0 0 38px;width:38px;height:38px}
  .hg-stat-line{font-size:12px}
  /* A popover anchored inside a row cannot be taller than the screen it opens
     on; it scrolls inside itself instead. */
  .hg-slot-grid .pl-picker{max-height:min(200px,60dvh)}
}

/* Touch: a finger-sized hit area on everything the Hangar makes clickable, and
   an `:active` carrying the feedback the hover states cannot. */
@media (pointer: coarse){
  .hg-tab{min-height:44px;padding:9px 16px}
  .hg-tab:active{color:#d2e9ff;border-color:var(--u-line-dim);background:rgba(79,216,255,.06)}
  .hg-tile.is-clickable:active{border-color:var(--u-line-dim)}
  .hg-slot-grid .u-row:active{border-color:var(--u-line-dim)}
  /* Sell / Scrap beside a stowage row — `btn-xs`, which is a mouse measure. */
  .hg-act .btn{min-height:44px;padding:0 14px;font-size:11px}
  .hg-slot-grid .pl-pick-row{min-height:44px}
  /* The strip scrolls under a finger; its scrollbar is only spending height. */
  .hg-roster{padding-bottom:0;scrollbar-width:none}
  .hg-roster::-webkit-scrollbar{display:none}
}