/*
  29-surfaces.css — v41.58  Layout pass

  Fixes what tools/layout-check.py found: 9 BLEED and the genuine TOUCHING
  pairs. No overlaps existed anywhere.

  THE BLEED FAULT
  ---------------
  A translucent light surface renders completely differently depending on what
  sits behind it. `.empty` is a 72%-opaque parchment: invisible and correct
  inside a parchment card, and a muddy grey slab on the dark hull. Same
  declaration, opposite result.

  The fix is to make these surfaces OPAQUE rather than to make them
  surface-aware. Surface-awareness would mean listing every light container in
  the app and getting one wrong means dark text on a dark panel -- far worse
  than the bug being fixed. Opaque parchment is also what the rest of the app
  already does: parchment cards on a dark hull, everywhere.

  Loaded last, so these win without !important.
*/

/* ---- BLEED: empty states (6 of the 9) ---- */
/* rgba(247,238,208,.72) -> the same parchment at full opacity. */
.empty,
.empty.empty-compact {
  background: #f7eed0;
}

/* ---- BLEED: chart cards ---- */
.map-card.map-card-hero { background: #fffcf2; }
.map-card-pin { background: #efe4c3; }

/* ---- BLEED: settings toggle in More ---- */
.settings-toggle { background: #fff8e2; }

/* ---- TOUCHING: distinct components with merged edges ----
   Only where two DIFFERENT components met at 0px. Rows within a list or table
   are meant to sit flush and are separated by rules, not gaps. */
.spoils-pane-body > .empty + .rule-note,
.spoils-pane-body > .worth-strip + .rule-note,
.spoils-pane-body > .empty-compact + .rule-note { margin-top: 10px; }

.ship-pane-body > .crossref-row + .compact-board { margin-top: 10px; }

/* Two action buttons 1px apart in the Bastion level banner. */
.bastion-level-banner .bastion-level-actions { gap: 8px; }

/* ================= v41.60 =================
   The v41.58 sweep only compared each element to its next sibling INSIDE THE
   SAME PARENT, so it could not see a button in one section colliding with the
   heading of the next, or a rule note landing on grid cards. Those are the
   defects that were still visible on a real phone. The checker now does a
   cross-parent pass; these are what it found. */

/* A trailing action row must never sit flush against whatever follows it. */
.button-row { margin-top: 10px; }
.rule-note { margin-top: 10px; }

/* The chart grid ends flush against its rule note. */
#screen-maps > .rule-note { margin-top: 12px; }

/* Calendar: a list of rows running straight into the next board. */
#screen-calendar > .lrow-list + details.compact-board { margin-top: 12px; }

/* Settings rows are the same component, so a gap would be wrong — they want a
   separating rule, which is also what tells the checker they are deliberate. */
.settings-group > .row + .row {
  border-top: 1px solid rgba(255, 226, 154, .14);
  padding-top: 8px;
  margin-top: 8px;
}

/* v41.58 made .map-card-hero opaque, which turned its caption band stark white
   across the artwork. The grid cards were still translucent and grey. Both are
   now the same parchment as every other card in the app. */
.map-card,
.map-card.map-card-hero { background: #efe4c3; }

/* Ship bar cells and Party Worth rows are the same component repeated: they are
   meant to sit flush, and want a dividing rule rather than a gap. Giving them
   one is both the right look and what marks them as deliberate to the checker. */
.shipbar > .shipbar-cell + .shipbar-cell { border-left: 1px solid rgba(255, 226, 154, .14); }
.worth-strip > .worth-row + .worth-row { border-top: 1px solid var(--line); }

/* The last repeated-component pairs: ship bar cells, component table rows, and
   a crossref row running into the list beneath it. */
.shipbar > .shipbar-cell + .shipbar-cell { border-top: 1px solid rgba(255, 226, 154, .14); }
.component-table > .component-row + .component-row { border-top: 1px solid var(--line); }
.stores-pane > .crossref-row + .lrow-list,
.ship-pane-body > .crossref-row + .lrow-list { margin-top: 10px; }