/*
  11-ship-tab.css — v41.16 the single Ship tab

  Two pieces of new furniture:

  1. .shipbar — the stat strip that replaced ~20 duplicated metric tiles
     across four screens. Three columns on a phone, six across from 560px, so
     it never becomes a scroller and never wraps awkwardly. Each cell is a
     button; the tone classes carry the same danger/warn semantics the alert
     ribbon uses.

  2. .ship-pane-chips — the pane switcher. Reuses the existing .pane-chips /
     .fchip pattern so it matches Stores, Treasure and Holdings rather than
     inventing a fifth kind of tab bar.

  Deliberately NOT sticky. The app's .topbar is already sticky and its height
  changes with the sticky-header-off preference and the helm rail's contents,
  so a second sticky layer would need a live-measured offset. The bar sits at
  the top of every pane instead, which is where you look when you switch.

  Unlayered, loaded after styles.css. No !important — see the v37 note in
  10-controls.css.
*/

/* ==========================================================
   Ship Bar
   ========================================================== */
.shipbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--s3);
  padding: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--e1);
}

.shipbar-cell {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 2px;
  min-height: 62px;
  padding: 9px 10px;
  border: 0;
  background: var(--chart);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease;
}
.shipbar-cell:hover { background: var(--chart-2); }
.shipbar-cell:active { background: var(--paper3); }

.shipbar-cell .sb-label {
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.shipbar-cell .sb-value {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.shipbar-cell .sb-note {
  font-size: .68rem;
  color: var(--faint);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Same semantics as the alert ribbon: a tinted cell and a coloured value,
   never colour alone — the note text always says what the state is. */
.shipbar-cell.is-warn { background: var(--warn-bg); }
.shipbar-cell.is-warn .sb-value,
.shipbar-cell.is-warn .sb-note { color: var(--warn); }
.shipbar-cell.is-danger { background: var(--danger-bg); }
.shipbar-cell.is-danger .sb-value,
.shipbar-cell.is-danger .sb-note { color: var(--danger); }
.shipbar-cell.is-warn:hover { background: color-mix(in srgb, var(--warn) 24%, var(--chart)); }
.shipbar-cell.is-danger:hover { background: color-mix(in srgb, var(--danger) 22%, var(--chart)); }

@media (min-width: 560px) {
  .shipbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .shipbar-cell { min-height: 58px; padding: 8px; }
  .shipbar-cell .sb-value { font-size: .98rem; }
}

/* ==========================================================
   Pane switcher + bodies
   ========================================================== */
.ship-pane-chips { margin-bottom: var(--s3); }

/* Stores keeps its own stores/ammo/consumables row inside the pane. Making
   it visibly lighter than the pane chips stops the two rows reading as one
   confusing eight-item tab bar. */
.ship-pane-body .sub-chips { margin-bottom: var(--s3); }
.ship-pane-body .sub-chips .fchip { font-size: .78rem; }

.ship-pane-body > .section-title:first-child { margin-top: 0; }
.ship-helm-actions { margin-top: var(--s4); }

/* The Loadout -> Actions hand-off row. Reads as a link across, not as another
   collapsible board, so it can't be mistaken for the copy it replaced.
   Surface and colours are set in 13-contrast.css — v41.16 shipped this with
   a transparent background, which put --ink text on the dark deck at 1.27:1. */
.crossref-row {
  width: 100%;
  margin-top: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  cursor: pointer;
}