/* aaa-polish.css — consolidated AAA polish: button consistency, card hover/active, typography rhythm, accent integration. */

/* =====================================================================
 * 1. BUTTON CONSISTENCY
 *
 * One canonical baseline height per tier so that buttons sitting next
 * to each other in any toolbar / dropdown / footer / drawer never look
 * mismatched.
 *
 *   .btn               default → 32px tall
 *   .btn.btn-sm        small   → 28px tall
 *   .btn.btn-large     large   → 38px tall
 *   .btn.btn-icon      icon    → square 32×32
 *   .btn.btn-icon.btn-sm icon-sm → square 28×28
 *
 * box-sizing: border-box keeps height stable when padding shifts.
 * line-height set explicitly so vertical centering is independent of
 * the user's display-font line metrics.
 * ===================================================================== */

.btn {
  box-sizing: border-box;
  height: 32px;
  line-height: 1.15;
  padding: 0 14px;
  vertical-align: middle;
}

.btn.btn-sm {
  box-sizing: border-box;
  height: 28px;
  line-height: 1.15;
  padding: 0 10px;
  font-size: 12px;
}

.btn.btn-large {
  box-sizing: border-box;
  height: 38px;
  line-height: 1.15;
  padding: 0 18px;
  font-size: 14px;
}

/* Icon button: square. Override the existing .btn.btn-icon padding so the
 * glyph is centered within a fixed footprint. Always sits with sibling
 * .btn at the same baseline. */
.btn.btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}
.btn.btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  font-size: 13px;
}

/* The army-toolbar previously hardcoded its own 28px / 26px values. Keep
 * those overrides authoritative for that surface (small density), but
 * make sure icon buttons there are SQUARE not just min-width. */
.army-toolbar .btn.btn-sm {
  height: 28px;
  padding: 0 10px;
}
.army-toolbar .btn.btn-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
}
@media (max-width: 820px) {
  .army-toolbar .btn.btn-sm {
    height: 26px;
    padding: 0 8px;
  }
  .army-toolbar .btn.btn-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }
}

/* Buttons inside dropdown menus (Tools / More / Export / Action Center)
 * already render as full-width menu items. Lock their min-height so a
 * row with a long label doesn't stand taller than its neighbour. */
.dropdown-menu > button,
.dropdown-menu .tools-menu > button,
.dropdown-menu .more-menu > button,
.dropdown-menu button.menu-item,
.dropdown-menu .export-extras > button {
  min-height: 30px;
  display: flex;
  align-items: center;
}

/* Modal footer buttons: unified default-tier height. */
.modal-footer .btn { height: 32px; }
.modal-footer .btn.btn-sm { height: 28px; }

/* Settings drawer rows that are buttons (action rows, danger). */
.settings-drawer .settings-action-row {
  min-height: 40px;
}
.settings-drawer button.btn,
.settings-drawer .btn {
  height: 32px;
}

/* The "Add to Army" row pairs a number input with a wide button. Make
 * them the same height so they don't visually mismatch. */
.detail-add-row .form-input,
.detail-add-row .detail-qty-input {
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
}
.detail-add-row .btn { height: 32px; }

/* Damage-calc action row buttons share the default tier. */
.yaab-dc-actions .btn { height: 32px; min-height: 32px; }
.yaab-dc-actions .yaab-dc-go { height: 36px; min-height: 36px; }

/* =====================================================================
 * 2. FOCUS RING — uniform accessibility ring across buttons + cards.
 * ===================================================================== */

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #0e0e10),
              0 0 0 4px rgba(var(--accent-rgb, 255,255,255), 0.65);
}

/* Focus ring also for cards already set via card-chassis.css; here we
 * extend it to the collection paint cards which weren't part of the
 * chassis selector list. */
.collect-paint-unit-card {
  position: relative;
  transition:
    border-color 0.18s ease,
    background   0.18s ease,
    transform    0.16s ease,
    box-shadow   0.18s ease;
}
.collect-paint-unit-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb, 255,255,255), 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.collect-paint-unit-card:active {
  transform: translateY(0) scale(0.985);
  box-shadow: none;
}
.collect-paint-unit-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 255,255,255), 0.55);
}

/* =====================================================================
 * 3. SECTION-HEADER ACCENT UNDERLINE — extend the panel-header treatment
 * to every section header throughout the app. 24px accent bar, left-
 * aligned. Sub-tab titles, modal headers, detail-section titles all
 * inherit the same indicator.
 * ===================================================================== */

.detail-section-title,
.collect-section-title,
.modal-header h3,
.yaab-dc-sec-title,
.army-rules-title {
  position: relative;
}

.detail-section-title::after,
.collect-section-title::after,
.yaab-dc-sec-title::after,
.army-rules-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.85;
}

/* Modal header uses an accent left-stripe instead of a bottom underline;
 * the underline conflicts with the modal-header border. */
.modal-header {
  position: relative;
}
.modal-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  opacity: 0.75;
  pointer-events: none;
}

/* =====================================================================
 * 4. TYPOGRAPHY RHYTHM — unify section titles to Cinzel display.
 * ===================================================================== */

.yaab-dc-sec-title {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  letter-spacing: 0.06em;
}

/* =====================================================================
 * 5. ACCENT INTEGRATION — push the faction accent color into more
 * touchpoints: selected-card tint, drag handles, stat pillar SV+, tab
 * strips, modal headers. (Modal header left-stripe handled in §3.)
 * ===================================================================== */

/* SV pillar — accent-tinted background so the player's eye lands on the
 * save value first. The SV cell carries `.detail-stat-pillar-sv` only
 * when the unit has an invuln; non-invuln units keep the neutral pillar.
 * (We deliberately don't use nth-child(3) because the stat strip filters
 * absent stats, so SV's column index is variable.) */
.detail-stats-row .detail-stat-pillar-sv {
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb, 255,255,255), 0.12),
    rgba(0, 0, 0, 0.40) 70%
  );
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 255,255,255), 0.22);
}
.detail-stats-row .detail-stat-pillar-sv .stat-value,
.detail-stats-row .detail-stat-pillar-sv .detail-stat-pillar-value {
  color: var(--accent, #fff);
}

/* Drag handle — accent-tinted on hover/active so the affordance reads
 * as "this is the grip". */
.army-entry-handle {
  color: rgba(var(--accent-rgb, 255,255,255), 0.55);
  transition: color 0.15s ease;
}
.army-entry-handle:hover,
.army-entry.is-dragging .army-entry-handle {
  color: var(--accent, #fff);
}

/* Selected unit-card / army-entry: dial up the accent border + tint over
 * what card-chassis.css already provides. */
.unit-card.selected,
.starter-card.is-selected,
.community-card.is-selected,
.yaab-card.is-selected,
.yaab-card.selected {
  border-color: var(--accent, #fff) !important;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 255,255,255), 0.45),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

/* Tab strip active state — accent underline. Matches the section-title
 * indicator visual language. (build-mode.css already gives the build
 * detail tabs an underline; we extend the same treatment to the collect
 * sub-tabs and the play-mode game-day tabs so all three modes share a
 * consistent active-tab visual.) */
.collect-subtab,
.play-tab { position: relative; }
.collect-subtab.active::after,
.play-tab.is-on::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px 1px 0 0;
  pointer-events: none;
}

/* =====================================================================
 * 6. LOADING-STATE PLACEHOLDER — Cinzel-styled stub for tab-render
 * delays. Modules opt in by emitting <div class="yaab-loading">Loading…</div>.
 * ===================================================================== */

.yaab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #a8a8a8);
  position: relative;
}
.yaab-loading::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 255,255,255), 0.55);
  animation: yaab-loading-pulse 1.1s ease-in-out infinite;
}

@keyframes yaab-loading-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1.00; transform: scale(1.05); }
}

/* =====================================================================
 * 7. SPACING RHYTHM — 12 / 18 / 24 grid. We only nudge surfaces that
 * looked cramped or sparse; existing per-feature spacing wins.
 * ===================================================================== */

.modal-body { padding: 18px 22px; }
.modal-header { padding: 14px 22px 14px 18px; }
.modal-footer { padding: 12px 22px; gap: 8px; }

/* =====================================================================
 * 8. REDUCED-MOTION RESPECT — kill any new animations / transforms.
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .collect-paint-unit-card { transition: none !important; }
  .collect-paint-unit-card:hover { transform: none !important; box-shadow: none !important; }
  .yaab-loading::after { animation: none !important; opacity: 0.6; }
  .army-entry-handle { transition: none !important; }
}