/* settings-drawer.css — tier 2 layout.
 * Owns: the Settings / More drawer (.settings-*). */

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

/* ── Action row */
.settings-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-6) var(--sp-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
  margin-top: var(--sp-2);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  /* Action button label should ellipsize if it ever exceeds the row
   * (e.g. the localized "Wipe all saved armies (irreversible)" label on
   * narrow drawers). The arrow stays glued to the right. */
  min-width: 0;
}
.settings-action-arrow {
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  flex: 0 0 auto;
}
/* Mobile (<= 820px, same cutoff as settings-drawer.css): drawer is
 * full-screen. Make sure the body can scroll all the
 * way to the danger button at the bottom — previously the implicit
 * flex behavior left ~32px of bottom padding inside an unscrollable
 * region on shorter phones. */
/* 4. DROPDOWN / POPOVER CLIP GUARDS */
/* 5. REDUCED-MOTION RESPECT */
.settings-action-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-action-row:hover { background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); }
.settings-action-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-action-row.is-danger:hover { background: rgba(220, 50, 50, 0.10); border-color: rgba(220, 50, 50, 0.5); color: #ff7070; }

/* 2. SETTINGS DRAWER — long help text + mobile scroll fixes */
.settings-toggle-label, .settings-toggle-help { white-space: normal; overflow-wrap: anywhere; }

/* ── Toggle row */
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-5) 0; cursor: pointer; border-radius: var(--radius); }
.settings-toggle-text { flex: 1 1 auto; min-width: 0; overflow: hidden; word-break: break-word; }
.settings-toggle-label { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.settings-toggle-help { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); line-height: 1.35; }

/* Switch styling — visually-hidden checkbox + custom knob. */
.settings-toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--border);
  border: 1px solid var(--border-light);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.settings-toggle-input { position: absolute; inset: 0; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer; opacity: 0; width: 100%; height: 100%; }
.settings-toggle-knob {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.18s ease, background 0.18s ease;
  pointer-events: none;
}
.settings-toggle-row:hover { background: rgba(var(--accent-rgb), 0.05); }
.settings-toggle-input:focus-visible ~ .settings-toggle-knob { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(var(--accent-rgb), 0.25); }
.settings-toggle-input:checked ~ .settings-toggle-knob { transform: translateX(16px); background: var(--accent-on); }
.settings-toggle-switch:has(.settings-toggle-input:checked) { background: var(--accent); border-color: var(--accent); }
.settings-drawer-root { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.settings-drawer-root[hidden] { display: none; }
.settings-drawer-scrim {
  position: absolute;
  inset: 0;
  background: var(--sh-4);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  animation: settings-scrim-in 200ms ease-out;
}
.settings-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: 100%;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: settings-drawer-in 220ms ease-out;
}

/* index.html ships `viewport-fit=cover`, and this drawer is pinned to
 * `top: 0` inside a `position: fixed; inset: 0` root. On a notched iPhone or
 * a Dynamic Island device that put the title and the close button UNDERNEATH
 * the cutout — and at <= 820px mobile.css hides the topbar, so this drawer is
 * the only navigation surface there is. The panel's BACKGROUND should still
 * run edge to edge under the cutout (that is what viewport-fit=cover is for),
 * so the inset goes on the header's padding, not on the drawer's geometry.
 * calc() rather than max(): the 16px is the design's own breathing room and
 * should sit BELOW the cutout, not be swallowed by it. env() resolves to 0px
 * on every non-notched device and on desktop, so this is inert there.
 * padding-right uses max() because the right inset (landscape notch, on the
 * side this drawer is anchored to) REPLACES the gutter rather than adding to
 * it — the drawer is flush right, so 20px of gutter is already there. */
.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-8) var(--sp-9);
  padding-top: calc(var(--sp-8) + env(safe-area-inset-top, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-drawer-title { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text); }
.settings-drawer-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-2xl);
  cursor: pointer;
  line-height: 1;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  /* Was ~28x30 from font-size + padding alone. inline-flex + min-* makes the
   * box explicit instead of a side effect of the glyph metrics. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
}
.settings-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-9) var(--sp-11);
  /* Bottom edge: clear the iOS home indicator. mobile.css already lifts the
   * whole drawer root above the tab bar + safe-bottom at <= 820px, and
   * menu-overflow-fixes.css (later than this file, so it wins) sets a
   * larger 48px floor at <= 820px. Neither covers the gap in between —
   * notably a large iPhone in LANDSCAPE, which is ~932 CSS px wide and so
   * misses every one of those breakpoints while still having a home
   * indicator. This unscoped floor closes that hole and is inert elsewhere.
   * Right inset for the same landscape case (drawer is flush right). */
  padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  overscroll-behavior: contain;
}

/* ── Reduced motion */
body.reduce-motion .settings-drawer,
body.reduce-motion .settings-drawer-scrim,
body.reduce-motion .settings-toggle-switch,
body.reduce-motion .settings-toggle-knob,
body.reduce-motion .settings-action-row {
  animation: none !important;
  transition: none !important;
}

/* ── Body class while drawer is open: prevent scroll bleed ── */
body.settings-drawer-open { overflow: hidden; }
.settings-drawer-close:hover { color: var(--text); border-color: var(--border-light); background: var(--ov-1); }
.settings-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Section headings */
.settings-section-heading {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--sp-7) 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.settings-section-heading:first-child { margin-top: 0; }

/* ── About inline panel */
.settings-about-card {
  margin-top: var(--sp-6);
  padding: var(--sp-7);
  background: var(--ov-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.settings-about-card .muted { color: var(--text-muted); }
.settings-about-card a { color: var(--accent); }

/* ── Theme picker (Appearance section) */
/* Additive: every rule below is a NEW class introduced with the theme picker
 * in js/app/settings-drawer.js. Nothing above this comment is modified, so
 * appending this file cannot change how the default theme looks anywhere
 * else. Themes restyle these through the same tokens as everything else. */
.settings-theme-group { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.settings-theme-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Three-band swatch: ground, ink, accent — the three decisions a theme makes. */
.settings-theme-swatch { flex: 0 0 auto; display: flex; width: 34px; height: 34px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; }
.settings-theme-swatch i { flex: 1 1 0; display: block; }
.settings-theme-text { flex: 1 1 auto; min-width: 0; }
.settings-theme-name { display: block; font-size: var(--fs-md); font-weight: 600; }
.settings-theme-blurb { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); line-height: 1.35; }
.settings-theme-check { flex: 0 0 auto; width: 14px; font-size: var(--fs-base); line-height: 1; color: var(--accent); }
body.reduce-motion .settings-theme-row { transition: none !important; }
.settings-theme-row:hover { background: rgba(var(--accent-rgb), 0.08); }
.settings-theme-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-theme-row.is-active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.10); }
@keyframes settings-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-toggle-switch, .settings-toggle-knob, .settings-action-row { transition: none !important; }
  .settings-drawer, .settings-drawer-scrim { animation: none !important; }
  .settings-theme-row { transition: none; }
}