/* detail-redesign.css — readability pass on the right-hand Details pane.
 *
 * Two approved design directions from the "Details Pane Redesign" handoff:
 *   1a "Banded plates" → unit details: tinted section header bands with a left
 *      accent bar, two-line weapon rows (aligned stat columns + keyword tags on
 *      their own line), ability/enhancement cards.
 *   1c "Stratagem reading view" → rule/detachment details: stratagem cards with
 *      a name + phase + CP header row and a fixed 58px WHEN/TARGET/EFFECT grid.
 *
 * Loaded LAST (after style.css / typography.css / build-mode.css / detachments.css
 * / expand-pane.css) so these rules win. Presentation only — no markup class
 * names, hooks, or event wiring change semantics. Colours map to the existing
 * CSS-variable system (--accent/--text/…) wherever a variable exists so faction
 * accent theming keeps working; the fixed weapon/CP/phase hues (blue ranged,
 * orange melee, gold CP) are literal because they're semantic, not themeable.
 */

/* ─────────────────────────────────────────────────────────────
   1. SECTION HEADER BANDS  (replaces the hairline .detail-section-title)
   Every section title becomes a full-width tinted band with a 3px left bar.
───────────────────────────────────────────────────────────── */
.unit-detail-content .detail-section-title,
.unit-detail-content .weapons-section-banner {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  margin-bottom: 8px;
  /* Same alpha recipe as the weapons banners (their hue at 0.25 border /
     0.08 wash) so every band reads identically. */
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
  display: block;         /* weapons banners were inline-block */
}
/* Kill aaa-polish.css's 24px accent underline on section titles — the band
   is the header treatment now; the leftover bar read as a stray line. */
.unit-detail-content .detail-section-title::after { content: none; }

/* Keep the weapons banners typographically identical to the other bands in
   every context: expand-pane.css bumps .detail-section-title to 12px in the
   expanded pane and mobile.css adjusts its letter-spacing — mirror both so
   the headers never drift apart. */
.panel-right.panel-expanded .unit-detail-content .weapons-section-banner {
  font-size: 12px;
}
@media (max-width: 820px) {
  .unit-detail-content .weapons-section-banner {
    font-size: 11px;
    letter-spacing: 1.3px;
  }
}

/* Neutral is the default above. Coloured per-section variants: */

/* Ranged weapons — blue */
.unit-detail-content .weapons-section-banner-ranged {
  color: #5ab5e8;
  background: rgba(90, 181, 232, 0.08);
  border-color: rgba(90, 181, 232, 0.25);
  border-left-color: #5ab5e8;
}
/* Melee weapons — orange */
.unit-detail-content .weapons-section-banner-melee {
  color: #e8955a;
  background: rgba(232, 149, 90, 0.08);
  border-color: rgba(232, 149, 90, 0.25);
  border-left-color: #e8955a;
}
/* Leader — blue */
.unit-detail-content .detail-section-title-leader {
  color: #5ab5e8;
  background: rgba(90, 181, 232, 0.06);
  border-color: rgba(90, 181, 232, 0.2);
  border-left-color: #5ab5e8;
}
/* Led By — green */
.unit-detail-content .detail-section-title-ledbby {
  color: #a8e88a;
  background: rgba(168, 232, 138, 0.06);
  border-color: rgba(168, 232, 138, 0.2);
  border-left-color: #a8e88a;
}
/* Primarch / choose-N — gold-leaf (keeps the section's own boxed treatment) */
.unit-detail-content .detail-section-title-primarch {
  color: #e7c87a;
  background: rgba(184, 144, 82, 0.1);
  border-color: rgba(184, 144, 82, 0.4);
  border-left-color: #b89052;
}
/* Stratagems — gold */
.unit-detail-content .detail-section-title-strat {
  color: #f5c842;
  background: rgba(245, 200, 66, 0.06);
  border-color: rgba(245, 200, 66, 0.25);
  border-left-color: #f5c842;
}
/* Wargear abilities — muted bronze, so it reads as its own thing next to the
   plain Abilities band without shouting. */
.unit-detail-content .detail-section-title-wargear {
  color: #cdb488;
  background: rgba(205, 180, 136, 0.07);
  border-color: rgba(205, 180, 136, 0.25);
  border-left-color: #cdb488;
}

.unit-detail-content .detail-section { margin-bottom: 14px; }

/* ─────────────────────────────────────────────────────────────
   2. HEADER BLOCK  (unit + rule/detachment)
───────────────────────────────────────────────────────────── */
.unit-detail-content .detail-name {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 0;
}
/* Short accent underline under the name. */
.detail-name-underline {
  width: 56px;
  height: 2px;
  background: var(--accent);
  opacity: 0.7;
  margin: 6px 0 8px;
  border-radius: 1px;
}
.detail-name-underline-gold { background: #f5c842; }

/* Two-row banner: row 1 = name/flavor + points/actions stack; row 2 spans
   the FULL width (faction tag, type, ordinal-pricing box). Inside the old
   single flex row those lower elements were squeezed into the left column
   for the banner's whole height. */
.unit-detail-content .detail-header.detail-banner { display: block; }
.unit-detail-content .detail-banner-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.unit-detail-content .detail-banner-full { min-width: 0; }
.unit-detail-content .detail-banner-full .detail-meta { margin-top: 2px; }

/* Flavor line: full width, wraps freely (the old inline nowrap+ellipsis
   truncated it on almost every unit). */
.unit-detail-content .detail-flavor {
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 6px;
  white-space: normal;
}

/* Per-army ordinal pricing box: neutral card treatment (was an accent-tinted
   box that read as foreign next to the redesigned sections). */
.unit-detail-content .detail-banner-full .detail-ordinal {
  margin: 8px 0 0;
  max-width: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 7px 10px;
}
.unit-detail-content .detail-ordinal .ordinal-band {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Points as a right-aligned stack: big value + small "POINTS" caption. */
.detail-pts-stack {
  text-align: right;
  flex-shrink: 0;
  line-height: 1;
}
.detail-pts-stack .detail-pts-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.detail-pts-stack .detail-pts-sub {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.detail-pts-caption {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────
   2b. ADD-TO-ARMY ROW — match the neutral card treatment used by every
   other box (abilities, enhancements, stockpile) instead of the old
   accent-tinted wash. The Add button itself stays accent so the CTA pops.
───────────────────────────────────────────────────────────── */
.unit-detail-content .detail-add-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
}

/* The stockpile widget lives INSIDE the Add-to-Army box (one box): strip its
   own chrome, run a full-width separator between the add row and the
   stockpile steppers. Compact — no "Your stockpile" heading (the rows are
   self-explanatory) and tight row spacing. */
.unit-detail-content .detail-add-section .stockpile-detail-widget {
  margin: 8px -12px 0;
  padding: 4px 12px 0;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.unit-detail-content .detail-add-section .stockpile-detail-title { display: none; }
.unit-detail-content .detail-add-section .stockpile-row { padding: 2px 0; }
.unit-detail-content .detail-add-section .stockpile-detail-rows { gap: 2px; }

/* Squad-size stepper in the add row (reuses the wargear-picker pill). */
.detail-size-stepper { padding: 3px 4px; }
.detail-size-stepper .detail-size-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  padding: 0 6px;
  min-width: 120px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   3. STAT STRIP  (invuln folded into the SV cell)
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   ATTACHED SECTIONS — every section is a card box whose band header sits
   flush at its top (the "box dropping down from the header" look, matching
   the weapons tables). The band bleeds to the box edges via negative
   margins that mirror the section padding. Exclusions: the weapons section
   (already two attached banner+box pairs), the primarch gold-leaf box, and
   the wargear picker (band + its own stacked boxes, attached below).
───────────────────────────────────────────────────────────── */
.unit-detail-content .detail-section:not(.detail-weapons-section):not(.detail-section-primarch) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.unit-detail-content .detail-section:not(.detail-weapons-section):not(.detail-section-primarch) > .detail-section-title {
  margin: -8px -10px 8px;
  border: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
  border-left: 3px solid var(--accent);
  border-radius: 3px 3px 0 0;
}
/* Coloured bands keep their hue for the bottom rule + left bar. */
.unit-detail-content .detail-section > .detail-section-title-leader {
  border-bottom-color: rgba(90, 181, 232, 0.25); border-left-color: #5ab5e8;
}
.unit-detail-content .detail-section > .detail-section-title-ledbby {
  border-bottom-color: rgba(168, 232, 138, 0.25); border-left-color: #a8e88a;
}
.unit-detail-content .detail-section > .detail-section-title-strat {
  border-bottom-color: rgba(245, 200, 66, 0.25); border-left-color: #f5c842;
}
.unit-detail-content .detail-section > .detail-section-title-wargear {
  border-bottom-color: rgba(205, 180, 136, 0.25); border-left-color: #cdb488;
}

/* Inner ability cards flatten into separator rows (box-in-box reads bad). */
.unit-detail-content .detail-section:not(.detail-section-primarch) .detail-ability {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(58, 58, 68, 0.5);
  padding: 8px 2px;
  margin-bottom: 0;
}
.unit-detail-content .detail-section:not(.detail-section-primarch) .detail-ability:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}
/* Enhancement rows flatten the same way; selected = accent inset bar. */
.unit-detail-content .detail-enhancements-list .enhancement-cb-item {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(58, 58, 68, 0.5);
  padding: 8px 2px;
}
.unit-detail-content .detail-enhancements-list .enhancement-cb-item:last-child { border-bottom: none; }
.unit-detail-content .detail-enhancements-list .enhancement-cb-item:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 0;
}
/* Detachment-view cards (rules / enhancements / stratagems) flatten too;
   stratagem cards keep their gold left bar. */
.unit-detail-content .detail-section .detail-detachment-card {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(58, 58, 68, 0.5);
  padding: 9px 2px;
  margin-bottom: 0;
}
.unit-detail-content .detail-section .detail-detachment-card:last-child { border-bottom: none; }
.unit-detail-content .detail-section .strat-card {
  border-left: 2px solid rgba(245, 200, 66, 0.5);
  padding-left: 8px;
}

/* Wargear picker: ONE box — the section card holds everything; the inner
   default/option boxes flatten to groups separated by rules. Over-limit red
   becomes an inset bar (the group border is gone). */
#detail-wargear-picker .wgp-option {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(58, 58, 68, 0.5);
  padding: 8px 0;
  margin-bottom: 0;
}
#detail-wargear-picker .wgp-option:last-child { border-bottom: none; padding-bottom: 2px; }
#detail-wargear-picker .wgp-option.wgp-over {
  box-shadow: inset 3px 0 0 rgba(220, 74, 74, 0.7);
  padding-left: 8px;
}

/* Uniform tight rhythm across the whole pane — the same gap the ranged /
   melee weapon blocks use. The band headers separate sections plenty on
   their own; the old 14px margins + build-mode's 12px margin-top read as
   disconnected islands. */
.unit-detail-content .detail-header.detail-banner { margin-bottom: 8px; }
.unit-detail-content .detail-add-section { margin-bottom: 8px; }
.unit-detail-content .detail-section {
  margin-top: 0;
  margin-bottom: 8px;
}
.unit-detail-content .weapons-subsection { margin-bottom: 8px; }
.unit-detail-content .weapons-subsection:last-child { margin-bottom: 0; }
/* style.css's legacy .weapons-section { margin-top: 14px } rides the same
   elements and collapses through the unpadded wrapper — the gap the stats /
   ranged / melee blocks weren't respecting. */
.unit-detail-content .weapons-section { margin-top: 0; }
.unit-detail-content .detail-stats-section { padding: 8px; }

/* Separate cells with a 4px gap (build-mode.css draws a connected strip with
   an outer border + overflow:hidden — undo that so the rounded cells show). */
.unit-detail-content .detail-stat-strip {
  gap: 4px;
  border: none;
  background: transparent;
  overflow: visible;
}
.unit-detail-content .detail-stat-pillar {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 4px;
  padding: 7px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.unit-detail-content .detail-stat-pillar .detail-stat-pillar-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.unit-detail-content .detail-stat-pillar .detail-stat-pillar-value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.unit-detail-content .detail-stat-pillar-sv {
  border-bottom: 2px solid #5ab5e8;
}
.unit-detail-content .detail-stat-pillar-invuln {
  font-size: 8.5px;
  color: #5ab5e8;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────
   4. WEAPONS — two-line grid rows (replaces the squeezed 8-col table)
   Grid: name | Rng | A | BS/WS | S | AP | D
───────────────────────────────────────────────────────────── */
.wg-section { margin-bottom: 14px; }
.wg-head,
.wg-line {
  display: grid;
  grid-template-columns: 1fr 44px 30px 30px 30px 30px 30px;
  gap: 2px;
  align-items: baseline;
}
.wg-head {
  padding: 6px 8px 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.wg-head .wg-cell { text-align: center; }

/* Weapon rows sit in a neutral card box under the band. */
.wg-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 2px 2px;
}

/* Banner doubles as the column-header row: label in the name column, RNG/A/
   BS|WS/S/AP/D over their stat columns, grid-aligned with the rows below.
   Horizontal padding is tuned so banner columns line up with row columns
   (banner 3px bar + 8px pad ≈ box 1px border + 2px pad + 8px row pad). */
.unit-detail-content .weapons-section-banner.wg-banner {
  display: grid;
  grid-template-columns: 1fr 44px 30px 30px 30px 30px 30px;
  gap: 2px;
  align-items: center;
  padding: 5px 10px 4px 8px;
  margin-bottom: 0;
  border-radius: 0 4px 0 0;
}
.wg-banner .wg-banner-col {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-align: center;
  color: var(--text-muted);
}
/* Box attaches flush to the banner. */
.wg-box-attached {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.wg-weapon { padding: 7px 8px; border-bottom: 1px solid rgba(58, 58, 68, 0.5); }
.wg-weapon:last-child { border-bottom: none; }
.wg-weapon-alt { background: rgba(255, 255, 255, 0.02); }

.wg-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}
.wg-line .wg-cell {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* "Melee" range reads muted + non-bold, not like a stat value. */
.wg-line .wg-cell-melee {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11px;
}
.wg-kw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.wg-kw-row .weapon-kw-tag {
  font-size: 9.5px;
  border-radius: 3px;
  padding: 1px 5px;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   5. ABILITY CARDS — name on its own line, muted body below
───────────────────────────────────────────────────────────── */
.unit-detail-content .detail-ability {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.unit-detail-content .detail-ability-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}
.unit-detail-content .detail-ability-desc {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   6. ENHANCEMENT CARDS — pts pill right-aligned; selected = accent border
───────────────────────────────────────────────────────────── */
.unit-detail-content .enhancement-cb-item {
  padding: 8px 10px;
  border-radius: 4px;
}
.unit-detail-content .enhancement-cb-item:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.06);
}
/* The body must fill the row or space-between has no space to distribute —
   without flex:1 the pts pill hugged the name instead of the right edge. */
.unit-detail-content .enhancement-cb-item .enh-cb-body {
  flex: 1;
  min-width: 0;
}
.unit-detail-content .enh-cb-header {
  justify-content: space-between;
  gap: 8px;
}
/* 11e unit-scoped "upgrade enhancement" marker */
.enh-cb-upgrade-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #cdb488;
  background: rgba(205, 180, 136, 0.1);
  border: 1px solid rgba(205, 180, 136, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}
.unit-detail-content .enh-cb-name { font-size: 12.5px; font-weight: 700; }
.unit-detail-content .enh-cb-pts {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  font-variant-numeric: tabular-nums;
}
.unit-detail-content .enh-cb-desc { font-size: 11px; line-height: 1.5; }

/* ─────────────────────────────────────────────────────────────
   7. LEADER / LED BY chips (bands handled above; chips unchanged size)
───────────────────────────────────────────────────────────── */
.unit-detail-content .detail-leader-units .detail-ability-name {
  display: inline;          /* "Can lead:" stays a run-in label, not a block */
  font-size: 12px;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   8. STRATAGEM READING VIEW (1c) — 58px WHEN/TARGET/EFFECT label grid
   Restyles .strat-sections (used by single-rule + detachment strat cards).
───────────────────────────────────────────────────────────── */
.unit-detail-content .strat-sections {
  display: grid;
  grid-template-columns: 58px 1fr;
  row-gap: 5px;
  column-gap: 10px;
  align-items: start;
}
/* Each clause contributes its label + text cell directly to the parent grid. */
.unit-detail-content .strat-section {
  display: contents;
}
.unit-detail-content .strat-section-label {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5c842;
  padding-top: 2px;
}
.unit-detail-content .strat-section-label-restrict { color: #e8955a; }
.unit-detail-content .strat-section-text {
  font-size: 12px;
  line-height: 1.5;
  color: #c8c8cc;
}
.unit-detail-content .strat-section-preface,
.unit-detail-content .strat-section-empty {
  grid-column: 1 / -1;
}

/* Stratagem card (detachment view): gold left bar + name/phase/CP header row. */
.unit-detail-content .strat-card {
  border-left: 2px solid rgba(245, 200, 66, 0.5);
  padding: 9px 10px;
}
.unit-detail-content .strat-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.unit-detail-content .strat-card-name {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}
.unit-detail-content .strat-card-head .strat-phase-badge { margin-right: 0; }
.unit-detail-content .strat-card-head .strat-cp-badge {
  margin-right: 0;
  font-size: 11px;
  padding: 2px 7px;
}

/* Enhancement card (detachment view): name + right-aligned pts pill. */
.unit-detail-content .enh-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.unit-detail-content .enh-card-name { font-weight: 700; font-size: 12.5px; color: var(--text); }
.unit-detail-content .enh-card-pts {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}