/* République styles — extracted verbatim from republique.html (lines 53-1302). */

/* ─── App Shell Layout ──────────────────────────────────── */

/* Full-viewport flex column — locked to viewport so children scroll independently */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Fixed top header (mobile only; hidden on tablet+ via media query) ── */
.app-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rep-line);
  background: linear-gradient(180deg, #2a2e36 0%, #1c1f24 100%);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-top-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.header-brand .crest {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.header-app-name {
  color: var(--rep-cream);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.header-sub {
  color: var(--pico-muted-color);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* Mobile section-picker dropdown — inline beside title */
.nav-dropdown {
  appearance: none;
  -webkit-appearance: none;
  background: var(--rep-control-bg);
  color: var(--rep-control-text);
  border: 1px solid var(--rep-line);
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 10rem;
  flex: 0 1 auto;
  min-width: 0;
}

/* Intro toggle button (in header) */
.intro-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--rep-control-bg);
  color: var(--rep-cream);
  border: 1px solid var(--rep-line);
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.03em;
}

.intro-btn:hover {
  border-color: var(--rep-amber-soft);
  color: var(--rep-amber);
}

.intro-btn.active {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  border-color: var(--rep-amber);
}

.intro-btn .chev {
  margin-left: auto;
  transition: transform 0.18s ease;
  opacity: 0.7;
}

/* Intro button in section panel header (desktop) */
.section-intro-btn {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.intro-btn.active .chev {
  transform: rotate(180deg);
}

/* ── Body: sidebar + main content ─────────────────────── */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar navigation ────────────────────────────────── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  width: 200px;
  flex: 0 0 auto;
  align-self: stretch;
  border-right: 1px solid var(--rep-line);
  background: #1a1d23;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem 1rem;
  border-bottom: 1px solid var(--rep-line);
  margin-bottom: 0.4rem;
}

.sidebar-crest {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.sidebar-app-name {
  color: var(--rep-cream);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  color: var(--rep-cream);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  cursor: pointer;
}

.nav-item:hover {
  background: rgba(245, 180, 0, 0.08);
  color: var(--rep-amber);
}

.nav-item.active {
  background: rgba(245, 180, 0, 0.12);
  color: var(--rep-amber);
  border-left-color: var(--rep-amber);
  font-weight: 600;
}

.nav-item i {
  font-size: 1.05rem;
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
}

/* ── Main content area ─────────────────────────────────── */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
}

/* ── Desktop status bar — sticky at top of viewport ────── */
.status-bar {
  display: none;
}

@media (min-width: 768px) {
  .status-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 1.25rem;
    background: var(--rep-paper-2);
    border-bottom: 1px solid var(--rep-line);
    font-size: 0.85rem;
    color: var(--rep-cream);
    letter-spacing: 0.02em;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }
}

.status-turn {
  color: var(--rep-amber);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.status-time {
  color: var(--rep-cream);
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  background: #14171c;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.status-phase {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--rep-amber);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.status-player {
  margin-left: auto;
  color: var(--pico-muted-color);
}

/* ── Turn / time / player inline in section header (mobile only) ── */
.header-turn,
.header-time,
.header-player {
  display: none;
}

@media (max-width: 767px) {
  .header-turn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rep-amber);
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .header-time {
    display: inline;
    color: var(--rep-cream);
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    background: #14171c;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    white-space: nowrap;
  }

  .header-player {
    display: inline;
    margin-left: auto;
    color: var(--pico-muted-color);
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

/* ── Intro card ────────────────────────────────────────── */
.intro-card {
  background: var(--rep-paper-2);
  border: 1px solid var(--rep-line);
  border-radius: var(--pico-border-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--rep-cream);
}

.intro-card h2 {
  color: var(--rep-amber);
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
  letter-spacing: 0.03em;
}

.intro-card h3 {
  color: var(--rep-cream);
  font-size: 1.05rem;
  margin: 1rem 0 0.4rem;
  letter-spacing: 0.02em;
}

.intro-card h4 {
  color: var(--rep-amber);
  font-size: 0.95rem;
  margin: 0.8rem 0 0.3rem;
}

/* ── Section panel (replaces accordion <details>) ──────── */
.section-panel {
  background: var(--rep-paper-2);
  border: 1px solid var(--rep-line);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}

.section-panel-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(180deg, #262a32, #1f232a);
  border-bottom: 1px solid var(--rep-line);
}

.section-panel-icon {
  color: var(--rep-amber);
  font-size: 1.25rem;
  flex: 0 0 auto;
}

.section-panel-title {
  margin: 0;
  color: var(--rep-cream);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.section-panel-body {
  padding: 1rem 1.1rem 1.25rem;
}

/* Desktop-only prev/next navigation footer */
.section-panel-footer {
  display: block;
  border-top: 1px solid var(--rep-line);
  padding: 0.5rem 0.75rem;
  background: linear-gradient(180deg, #1f232a, #1a1d23);
  overflow: hidden; /* clearfix for floated prev/next buttons */
}

.phase-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--rep-cream);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.12s;
}

.phase-nav-btn:hover {
  color: var(--rep-amber);
}

.phase-nav-prev {
  float: left;
}

.phase-nav-next {
  float: right;
}

.phase-nav-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pico-muted-color);
}

.phase-nav-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.phase-nav-chev {
  font-size: 1.1rem;
  opacity: 0.6;
}

/* ── Light mode overrides for new layout components ─────── */
:root[data-theme="light"] .app-header {
  background: linear-gradient(180deg, #fffdf3 0%, #f5efd8 100%);
}

:root[data-theme="light"] .sidebar-nav {
  background: #f5efd8;
}

:root[data-theme="light"] .section-panel-header {
  background: linear-gradient(180deg, #f8f1d8, #f0e7c5);
}

:root[data-theme="light"] .nav-item.active {
  background: rgba(245, 180, 0, 0.15);
}

:root[data-theme="light"] .status-time {
  background: #e8deb8;
  color: #2a2419;
}

:root[data-theme="light"] .header-time {
  background: #e8deb8;
  color: #2a2419;
}

:root[data-theme="light"] .section-panel-footer {
  background: linear-gradient(180deg, #f0e7c5, #e8deb8);
}

/* ── Responsive ────────────────────────────────────────── */

/* Mobile: hide sidebar, show dropdown in header; single-column */
@media (max-width: 767px) {
  .sidebar-nav {
    display: none;
  }

  .app-body {
    flex-direction: column;
  }

  .main-content {
    padding: 0.75rem 0.85rem 1.5rem;
  }

  .intro-card {
    padding: 1rem;
  }

  .section-panel-body {
    padding: 0.8rem 0.8rem 1rem;
  }
}

/* Tablet+: show sidebar, hide mobile header, show next-phase footer */
@media (min-width: 768px) {
  .app-header {
    display: none;
  }

  .nav-dropdown {
    display: none;
  }
}

/* Force dark scheme on every UA — overrides user system preference.
   Lock viewport height so the app shell constrains its children. */
:root,
html,
body {
  color-scheme: dark;
  height: 100%;
}

/* Bridge mount point — must fill body so .app-shell's height:100% resolves.
   overflow-y: auto here (not on .main-content) so scroll position survives
   bridge re-renders which replace innerHTML but leave #app itself intact. */
#app {
  height: 100%;
}

.main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 2rem;
}

/* ─── Theme tweaks ──────────────────────────────────────── */
:root {
  /* Accent colour now follows the active Pico theme. The hex
     fallbacks match the original "amber" look so anything that
     loads before Pico still renders correctly. */
  --rep-amber: var(--pico-primary-background, #f5b400);
  --rep-amber-soft: var(--pico-primary-border, #c98a00);
  --rep-amber-hover: var(--pico-primary-hover-background, #ffc424);
  --rep-on-amber: var(--pico-primary-inverse, #1a1a1a);

  --rep-blue: #2e6cb5;
  --rep-red: #c0392b;
  --rep-cream: #f4ebd0;
  --rep-paper: #1c1f24;
  --rep-paper-2: #23272e;
  --rep-line: #3a3f48;

  /* Control surface — base bg for pip / opt buttons in their
     non-active state. Switched per theme so that active-state
     overrides (.pip-chosen, .opt-btn.active, etc.) win on
     specificity alone, without needing per-mode duplicates. */
  --rep-control-bg: #2a2e36;
  --rep-control-text: var(--rep-cream);
}

.rep-default { color: #22c55e; font-weight: 700; }

body {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(245, 180, 0, 0.05), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(46, 108, 181, 0.07), transparent 55%),
    var(--rep-paper);
}

/* ─── Banner ────────────────────────────────────────────── */
.banner {
  border: 1px solid var(--rep-line);
  background: linear-gradient(180deg, #2a2e36 0%, #1c1f24 100%);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: var(--pico-border-radius);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.banner .crest {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      var(--rep-blue) 0deg 120deg,
      var(--rep-cream) 120deg 240deg,
      var(--rep-red) 240deg 360deg);
  box-shadow: inset 0 0 0 3px #14171c, 0 0 0 1px var(--rep-line);
  display: grid;
  place-items: center;
  color: #14171c;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
}

.banner h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rep-cream);
}

.banner .sub {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Accordion (details) ───────────────────────────────── */
.acc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.acc details {
  border: 1px solid var(--rep-line);
  border-radius: var(--pico-border-radius);
  background: var(--rep-paper-2);
  padding: 0;
  overflow: hidden;
}

.acc details>summary {
  padding: 0.85rem 1rem;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--rep-cream);
  background: linear-gradient(180deg, #262a32, #1f232a);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.acc details>summary::-webkit-details-marker {
  display: none;
}

/* Pico v2 paints its own caret via summary::after — suppress so only
   our custom .chev icon shows on the right. */
.acc details>summary::after {
  display: none !important;
}

.acc details[open]>summary {
  border-bottom-color: var(--rep-line);
}

.acc details>summary>.bi {
  color: var(--rep-amber);
  font-size: 1.25rem;
  flex: 0 0 auto;
}

.acc details>summary>.chev {
  margin-left: auto;
  transition: transform 0.18s ease;
  opacity: 0.7;
}

.acc details[open]>summary>.chev {
  transform: rotate(180deg);
}

/* "Rules" link — sits at the top of each expanded section body so
   it only appears when the user opens that accordion. Opens the WTJ
   original rules text for that section in a new tab. */
.rules-btn {
  background: rgba(245, 180, 0, 0.08);
  color: var(--rep-amber);
  border: 1px solid var(--rep-amber-soft);
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.rules-btn:hover {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  border-color: var(--rep-amber);
}

.body {
  padding: 1rem 1.1rem 1.25rem;
}

/* ─── Pip strip (manual D10 entry) ──────────────────────── */
.pip-strip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin: 0.75rem 0;
}

.pip-btn {
  appearance: none;
  border: 1px solid var(--rep-line);
  background: var(--rep-control-bg);
  color: var(--rep-control-text);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.55rem 0;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
  touch-action: manipulation;
}

.pip-btn:hover:not(:disabled) {
  border-color: var(--rep-amber-soft);
  color: var(--rep-amber);
}

/* Dice highlight is pinned to Pumpkin (not theme-following) so the
   roll animation reads clearly against any Pico theme + in both
   light and dark modes. */
.pip-btn.pip-rolling {
  background: #ff7a1a;
  color: #ffffff;
  border-color: #ff7a1a;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(255, 122, 26, 0.35);
}

.pip-btn.pip-chosen {
  background: #cd6700;
  color: #ffffff;
  border-color: #cd6700;
  box-shadow: 0 0 0 2px rgba(205, 103, 0, 0.35);
}

/* Shaded step — fills the band from the natural roll to the
   modified roll. Darker pumpkin for negative mods (the modified
   result is lower than the natural roll), dark jade for positive
   mods (modified result is higher). Reads as the trail of the
   modifier behind the highlighted natural face. */
.pip-btn.pip-shaded {
  background: #6e3800;
  color: #f0e0c8;
  border-color: #6e3800;
}

.pip-btn.pip-shaded-pos {
  background: #00553f;
  color: #d8efe0;
  border-color: #00553f;
}

/* Skirmish dice-result strips — display-only D10 face row that shows
   multiple rolls at once. Each face that landed gets the same pumpkin
   highlight as a normal chosen roll, plus a stack of small dice icons
   indicating how many times that number came up. */
.dice-result .pip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 2.6rem;
  cursor: default;
}

.dice-result .pip-btn:hover:not(:disabled) {
  border-color: var(--rep-line);
  color: var(--rep-control-text);
  background: var(--rep-control-bg);
}

.dice-result .pip-btn.pip-rolled {
  background: #cd6700;
  color: #ffffff;
  border-color: #cd6700;
  box-shadow: 0 0 0 2px rgba(205, 103, 0, 0.35);
}

.dice-badge {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1;
  max-width: 100%;
}

.dice-badge i {
  font-size: 0.6rem;
}

.dice-badge .dice-extra-label {
  margin-left: 2px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff7d0;
  letter-spacing: 0.02em;
}

/* Compact pip strip — variants for non-d10 pickers. */
.pip-strip.compact-6 {
  grid-template-columns: repeat(6, 1fr);
}

.pip-strip.compact-7 {
  grid-template-columns: repeat(7, 1fr);
}

.pip-strip.compact-4 {
  grid-template-columns: repeat(4, 1fr);
}

.pip-strip.compact-8 {
  grid-template-columns: repeat(8, 1fr);
}

.pip-strip.compact-9 {
  grid-template-columns: repeat(9, 1fr);
}

.pip-strip.compact-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Auto-fit: one column per child, all on a single line regardless of
   count. Used by the assault cover strip where the option list grows. */
.pip-strip.compact-fit {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.pip-strip.compact-fit .pip-btn {
  min-width: 0;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* Morale-state picker — five named buttons (Formed → Demoralized).
   Wider buttons than pip-btn because state names are multi-character.
   Active state pinned to amber to match the "this is the chosen value"
   cue. Used in Orders + Movement (and anywhere else a state picker
   makes sense). */
.morale-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 0.45rem 0 0;
}

.morale-btn {
  appearance: none;
  border: 1px solid var(--rep-line);
  background: var(--rep-control-bg);
  color: var(--rep-control-text);
  padding: 0.55rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.morale-btn:hover:not(.active) {
  border-color: var(--rep-amber-soft);
  color: var(--rep-amber);
}

.morale-btn.active {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  border-color: var(--rep-amber);
}

.morale-description {
  font-size: 0.85rem;
  color: var(--rep-cream);
  margin: 0.55rem 0 0.3rem;
  padding: 0.55rem 0.75rem;
  background: rgba(245, 180, 0, 0.08);
  border-left: 3px solid var(--rep-amber);
  border-radius: 4px;
  line-height: 1.5;
}

.morale-description strong {
  color: var(--rep-amber);
}

.pip-strip-label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0.55rem 0 0.3rem;
}

/* Inline note callout — amber-rule emphasis for rules-context blurbs. */
.note-box {
  background: rgba(245, 180, 0, 0.06);
  border-left: 3px solid var(--rep-amber);
  border-radius: 4px;
  padding: 0.55rem 0.75rem 0.55rem 0.85rem;
  font-size: 0.85rem;
  color: var(--rep-cream);
  line-height: 1.45;
  margin: 0.55rem 0 0.6rem;
}

.note-box i {
  color: var(--rep-amber);
  margin-right: 0.35rem;
}

.note-box strong {
  color: var(--rep-amber);
}

/* Action row: target chip + roll button */
.action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.target-chip {
  flex: 1 1 auto;
  min-width: 0;
  background: #14171c;
  border: 1px solid var(--rep-line);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  color: var(--rep-cream);
}

.target-chip strong {
  color: var(--rep-amber);
}

.roll-btn {
  flex: 0 0 auto;
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  border: 1px solid var(--rep-amber);
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.roll-btn:hover {
  background: var(--rep-amber-hover);
}

.roll-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pass-score pill — the headline number a player needs to roll.
   Pinned to amber (not theme-following) for consistent legibility
   and to read as the "target you need to beat" cue at a glance. */
.pass-pill {
  flex: 0 0 auto;
  background: #f5b400;
  color: #1a1a1a;
  border: 1px solid #f5b400;
  border-radius: 10px;
  padding: 0.3rem 0.85rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(245, 180, 0, 0.25);
}

.pass-pill small {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 3px;
}

.pass-pill strong {
  font-size: 1.45rem;
  font-weight: 800;
}

.pass-pill.impossible {
  background: #471a1a;
  color: #f87171;
  border-color: #6b2a2a;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18);
}

/* ─── Result card ───────────────────────────────────────── */
.result-card {
  margin-top: 0.85rem;
  border: 1px solid var(--rep-line);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  background: #14171c;
  display: none;
}

.result-card.shown {
  display: block;
}

.result-card .verdict {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.result-card.pass .verdict {
  color: #4ade80;
}

.result-card.fail .verdict {
  color: #f87171;
}

.result-card.info .verdict {
  color: var(--rep-amber);
}

.result-card .breakdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  white-space: pre-wrap;
  line-height: 1.5;
}

.state-transition {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0.4rem 0;
  color: var(--rep-cream);
}

.state-transition .arrow {
  color: var(--rep-amber);
  margin: 0 0.4em;
}

.state-transition strong {
  color: var(--rep-amber);
}

/* Per-die result chips in skirmish breakdown */
.pass-chip, .hit-2m-chip, .hit-1m-chip, .fail-chip, .miss-chip {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.82rem;
  margin: 0 1px;
}
.pass-chip  { background: #1a4a2a; color: #8fdf8f; }
.hit-2m-chip { background: #4a2a0a; color: #f5b400; }
.hit-1m-chip { background: #3a2a0a; color: #d4942a; }
.fail-chip { background: #4a1a1a; color: #f08888; }
.miss-chip { background: #2a2a2a; color: #888; }

.restrictions {
  border-top: 1px dashed var(--rep-line);
  padding-top: 0.55rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--rep-cream);
  line-height: 1.5;
}

.restrictions strong {
  color: var(--rep-amber);
}

/* Banner for "this unit can't take this action" cases (e.g. a
   demoralized artillery battery is silenced and can't fire). */
.silenced-banner {
  background: rgba(248, 113, 113, 0.12);
  border-left: 3px solid #f87171;
  border-radius: 4px;
  padding: 0.6rem 0.85rem;
  margin: 0.6rem 0;
  font-size: 0.9rem;
  color: #f87171;
  display: none;
  line-height: 1.45;
}

.silenced-banner.shown {
  display: block;
}

.silenced-banner i {
  margin-right: 0.4rem;
}

/* Inside a result-card the state-transition follows the verdict, no
   top margin. */
.result-card .state-transition {
  margin: 0.15rem 0 0.5rem;
}

/* ─── Form layout ───────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.4rem;
}

.form-grid label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: 0.2rem;
}

.form-grid select,
.form-grid input {
  margin-bottom: 0;
}

.mod-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.25rem 1rem;
  margin: 0.6rem 0 0.4rem;
}

.mod-list label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--rep-cream);
  padding: 0.15rem 0;
}

.mod-list input[type="checkbox"] {
  margin: 0;
}

.mod-list .mod-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rep-amber);
  font-weight: 700;
  min-width: 2.2em;
  display: inline-block;
}

.mod-list .mod-val.minus {
  color: #f87171;
}

.mod-list .house-rule {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #14171c;
  background: #9ca3af;
  padding: 0 0.35rem;
  border-radius: 4px;
  font-weight: 700;
  vertical-align: 1px;
}

/* ─── Reference / chart tables ──────────────────────────── */
.chart-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.6rem 0 0.8rem;
}

.chart-tbl th,
.chart-tbl td {
  border: 1px solid var(--rep-line);
  padding: 0.4rem 0.6rem;
  text-align: center;
}

.chart-tbl th {
  background: #262a32;
  color: var(--rep-amber);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chart-tbl tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015);
}

.chart-tbl .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

/* Clickable-row variant — use a chart table as the picker itself
   (one tap = chosen grade). Active row is highlighted in amber. */
.chart-tbl.click-rows tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}

.chart-tbl.click-rows tbody tr:hover:not(.active) td:not(.active) {
  background: rgba(245, 180, 0, 0.10);
}

.chart-tbl.click-rows tbody tr.active td,
.chart-tbl.click-rows tbody tr.active td.row-label {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  font-weight: 700;
}

/* Assault grid — the Cav-weight column lives inline but is
   hidden unless that side has type = cavalry. JS toggles
   `.show-cav` on the relevant table. */
.assault-side-table:not(.show-cav) th.cav-col,
.assault-side-table:not(.show-cav) td.cav-cell {
  display: none;
}

/* Chart-as-picker — any .grade-cell inside a chart table is a
   clickable selector. Used by Skirmish (Atk + Def cells per row)
   and Rally (Grade + Morale cells per row). */
.chart-tbl tbody td.grade-cell {
  cursor: pointer;
  font-weight: 700;
  transition: background 0.12s;
}

.chart-tbl tbody td.grade-cell:hover:not(.active) {
  background: rgba(245, 180, 0, 0.10);
}

.chart-tbl tbody td.grade-cell.active {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
}

/* Row-linked highlight — when the picker cell in a row is active,
   the partner cell in the same row (column 2) gets a soft amber
   tint so the (Grade ↔ Ratio) or (Class ↔ Target) pairing reads
   as one row. Background only — text colour and weight stay normal
   so it doesn't look washed out against the amber bg. */
.chart-tbl tbody tr.row-linked td:nth-child(2) {
  background: rgba(245, 180, 0, 0.25);
}

/* ─── Army defaults (multi-select allowed + default picker) ────────── */

.army-defaults-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

@media (max-width: 720px) {
  .army-defaults-tables {
    grid-template-columns: 1fr;
  }
}

.army-defaults-tables .adt-title {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rep-amber);
  margin-bottom: 0.2rem;
}

.army-defaults-tbl {
  margin: 0;
  font-size: 0.85rem;
}

.army-defaults-tbl td {
  padding: 0.3rem 0.5rem;
}

.army-defaults-tbl td.adt-name {
  text-align: left;
}

.army-defaults-tbl td.adt-item {
  cursor: pointer;
  user-select: none;
  text-align: left;
  font-weight: 700;
  transition: background 0.12s, color 0.12s;
}

.army-defaults-tbl td.adt-item:hover:not(.on) {
  background: rgba(245, 180, 0, 0.10);
}

.army-defaults-tbl td.adt-item.on {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
}

.army-defaults-tbl td.adt-item.off {
  color: var(--pico-muted-color);
  opacity: 0.6;
}

.army-defaults-tbl td.adt-default {
  cursor: pointer;
  user-select: none;
  width: 22%;
  font-size: 1.05rem;
  color: var(--pico-muted-color);
  transition: background 0.12s;
}

.army-defaults-tbl td.adt-default:hover {
  background: rgba(0, 168, 120, 0.10);
}

.army-defaults-tbl td.adt-default.on {
  color: #00a878;
  font-weight: 700;
}

.army-defaults-tbl td.adt-default.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.army-defaults-tables .skirm-defaults {
  grid-column: 1 / -1;
}

/* ─── Morale indicator dots ─────────────────────────────────────── */

/* Morale pip buttons — smaller text so names fit */
.pip-strip.compact-fit .pip-btn {
  font-size: 0.72rem;
  letter-spacing: -0.01em;
}

.morale-dot {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 2px;
  margin-right: 0.35em;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}

/* Formed — Green */
.morale-dot.m0 {
  background: #27ae60;
  border: 1px solid #111;
}

/* Disordered — Blue */
.morale-dot.m1 {
  background: #3498db;
  border: 1px solid #111;
}

/* Rattled — Yellow */
.morale-dot.m2 {
  background: #f1c40f;
  border: 1px solid #111;
}

/* Shaken — Red */
.morale-dot.m3 {
  background: #c0392b;
  border: 1px solid #111;
}

/* Broken — Black */
.morale-dot.m4 {
  background: #1a1a1a;
  border: 1px solid #666;
}

/* Demoralized — Black */

.morale-btn {
  text-align: left;
}

.morale-btn-row .opt-btn {
  text-align: left;
}

.chart-tbl td.morale-cell {
  text-align: left;
}

/* Hue slider for the custom palette — a horizontal strip with the
   full hue spectrum as its track. Drag to live-update the active
   player's background or accent without the OS colour-picker dialog. */
.hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right,
      hsl(0, 90%, 50%), hsl(30, 90%, 50%), hsl(60, 90%, 50%), hsl(90, 90%, 50%),
      hsl(120, 90%, 50%), hsl(150, 90%, 50%), hsl(180, 90%, 50%), hsl(210, 90%, 50%),
      hsl(240, 90%, 50%), hsl(270, 90%, 50%), hsl(300, 90%, 50%), hsl(330, 90%, 50%),
      hsl(360, 90%, 50%));
  border: 1px solid var(--rep-line);
}

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 28px;
  background: var(--rep-paper);
  border: 2px solid var(--rep-cream);
  border-radius: 3px;
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.hue-slider::-moz-range-thumb {
  width: 14px;
  height: 28px;
  background: var(--rep-paper);
  border: 2px solid var(--rep-cream);
  border-radius: 3px;
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* House-rules toggle table — full-width chart-tbl variant with each
   row click-to-toggle. Active rows get a soft jade tint so it reads
   as "applied" at a glance. */
.house-rules-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}

.house-rules-table tbody tr:hover:not(.hr-active) {
  background: rgba(245, 180, 0, 0.08);
}

.house-rules-table tbody tr.hr-active {
  background: rgba(0, 134, 108, 0.18);
}

.house-rules-table td.hr-state {
  text-align: center;
  font-size: 1.05rem;
  color: var(--rep-cream);
}

.house-rules-table tr.hr-active td.hr-state {
  color: #00a878;
}

.house-rules-table td.hr-name {
  font-weight: 700;
}

.house-rules-table td.hr-desc {
  font-size: 0.78rem;
  opacity: 0.88;
  line-height: 1.3;
}

/* Scale rulers in Settings — visual ground-scale comparison. */
.scale-rulers-box {
  border: 1px solid var(--rep-line);
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.5rem;
  background: var(--rep-paper-2);
  margin-top: 0.5rem;
  width: 100%;
}

.ruler {
  margin-bottom: 0.55rem;
  width: 100%;
}

.ruler-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rep-amber);
  margin-bottom: 0.15rem;
}

.ruler-marks {
  position: relative;
  height: 14px;
  width: 100%;
}

.ruler-marks .r-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--rep-cream);
  white-space: nowrap;
  line-height: 14px;
}

.ruler-bar {
  display: flex;
  width: 100%;
  height: 24px;
  border: 1px solid var(--rep-line);
  border-radius: 3px;
  overflow: hidden;
}

.r-seg {
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  min-width: 0;
}

.r-seg:last-child {
  border-right: none;
}

.r-tick {
  background: var(--rep-paper);
  color: var(--rep-cream);
}

.rb-white {
  background: #f6f1e2;
  color: #1a1a1a;
}

.rb-red {
  background: #c0392b;
  color: #fff;
}

/* Per-accordion header */
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rep-line);
  border-radius: 6px;
  background: var(--rep-paper-2);
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.acc-header-meta {
  display: flex;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}

.acc-header-meta .acc-turn,
.acc-header-meta .acc-time {
  color: var(--rep-amber);
}

.acc-header-meta .acc-player {
  color: var(--rep-cream);
}

.acc-header .rules-btn {
  margin-bottom: 0;
}

/* Doctrine banner */
.doctrine-banner {
  font-size: 0.8rem;
  color: var(--rep-amber);
  margin-bottom: 0.6rem;
  font-style: italic;
}

/* Hors de Combat fate description */
.hc-fate {
  margin-top: 0.45rem;
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  opacity: 0.92;
  line-height: 1.4;
}

/* Non-applicable cell */
.chart-tbl tbody td.na-cell {
  color: var(--pico-muted-color);
  opacity: 0.5;
  font-style: italic;
  cursor: default;
  text-align: center;
}

/* Change matrix (Orders) */
.change-matrix td.cm-same {
  background: rgba(255, 255, 255, 0.04);
  color: var(--pico-muted-color);
  font-style: italic;
  font-size: 0.78rem;
}

.change-matrix td.cm-free {
  background: rgba(74, 222, 128, 0.18);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

.change-matrix td.cm-roll {
  background: rgba(245, 180, 0, 0.28);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.change-matrix td.cm-forbidden {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.change-matrix th {
  background: #262a32;
}

.change-matrix td.row-label {
  text-align: right;
  padding-right: 0.7rem;
}

/* Panic grid */
.panic-grid tbody td[data-react] {
  cursor: pointer;
  transition: background 0.12s;
  font-weight: 700;
}

.panic-grid tbody td[data-react]:hover:not(.active-cell) {
  background: rgba(245, 180, 0, 0.10);
}

.panic-grid tbody tr.active-row td.row-label {
  background: rgba(245, 180, 0, 0.18);
  color: var(--rep-amber);
}

.panic-grid tbody td.pass-col {
  font-weight: 600;
  color: var(--pico-muted-color);
  cursor: default;
  background: transparent;
}

.panic-grid tbody td.active-cell {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
}

.chart-tbl td.row-label {
  text-align: left;
  font-weight: 600;
  color: var(--rep-cream);
  background: #1f232a;
}

.chart-note {
  font-size: 0.82rem;
  color: var(--pico-muted-color);
  font-style: italic;
  margin: 0.2rem 0 0.6rem;
}

/* Two-column for sequence list */
.seq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1rem;
  counter-reset: seq-phase-num;
}

.seq-phase {
  border: 1px solid var(--rep-line);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  background: #1f232a;
  counter-increment: seq-phase-num;
}

.seq-phase h4 {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rep-amber);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.seq-phase h4::before {
  content: counter(seq-phase-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--rep-amber);
  color: #1a1a1a;
  font-weight: 800;
  font-size: 0.85em;
  letter-spacing: 0;
  flex-shrink: 0;
}

.seq-phase ul {
  margin: 0;
  padding-left: 1.05rem;
  font-size: 0.86rem;
  color: var(--rep-cream);
}

.seq-phase ul li {
  margin: 0.05rem 0;
}

.seq-phase ul li a {
  color: var(--rep-cream);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s, border-color 0.12s;
}

.seq-phase ul li a:hover {
  color: var(--rep-amber);
  border-bottom-color: var(--rep-amber);
}

.seq-phase ul li a::after {
  content: ' ↗';
  font-size: 0.85em;
  opacity: 0.4;
  letter-spacing: 0;
}

.seq-phase ul li a:hover::after {
  opacity: 1;
}

/* Skirmish log */
.skirmish-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  background: #0f1216;
  border: 1px solid var(--rep-line);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 0.6rem;
}

.skirmish-log .row {
  padding: 0.1rem 0;
  border-bottom: 1px dotted #2a2e36;
}

.skirmish-log .row:last-child {
  border-bottom: none;
}

.skirmish-log .ok {
  color: #4ade80;
}

.skirmish-log .miss {
  color: var(--pico-muted-color);
}

.skirmish-log .bad {
  color: #f87171;
}

.skirmish-log .flee {
  color: var(--rep-amber);
}

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0.2rem;
}

.tally .pill {
  background: #1f232a;
  border: 1px solid var(--rep-line);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--rep-cream);
}

.tally .pill strong {
  color: var(--rep-amber);
}

/* ─── Army Notes ────────────────────────────────────────── */
.army-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.army-tab {
  appearance: none;
  border: 1px solid var(--rep-line);
  background: #1f232a;
  color: var(--rep-cream);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.02em;
}

.army-tab:hover {
  border-color: var(--rep-amber-soft);
  color: var(--rep-amber);
}

.army-tab.active {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  border-color: var(--rep-amber);
}

.army-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.35);
  overflow: hidden;
  flex: 0 0 auto;
  background: #444;
}

.army-panel h3 {
  margin: 0.6rem 0 0.25rem;
  color: var(--rep-cream);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.army-overview {
  color: var(--rep-cream);
  font-size: 0.92rem;
  margin: 0.1rem 0 0.55rem;
  line-height: 1.45;
}

.army-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.6rem;
}

.army-meta .pill {
  background: #1f232a;
  border: 1px solid var(--rep-line);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--rep-cream);
}

.army-meta .pill i {
  color: var(--rep-amber);
  margin-right: 0.3rem;
}

.army-notes-list {
  margin: 0.2rem 0 0.6rem 1.1rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--rep-cream);
}

.army-notes-list li {
  margin: 0.12rem 0;
}

.army-tbl-wrap {
  overflow-x: auto;
}

.army-tbl {
  width: 100%;
  min-width: 480px;
}

/* ─── Dice pair (two D10 strips) ─────────────────────────── */
.dice-pair {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.6rem 0 0.4rem;
}

.dice-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
}

.dice-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  font-weight: 700;
  width: 9em;
}

.dice-block .pip-strip {
  margin: 0;
  flex: 1;
}

/* Section subhead */
.sub-hd {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rep-amber);
  margin: 0.85rem 0 0.35rem;
  border-bottom: 1px dashed var(--rep-line);
  padding-bottom: 0.2rem;
}

.hint {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin: 0.3rem 0 0.2rem;
}

footer.footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rep-line);
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  text-align: center;
}

/* ─── Settings UI ───────────────────────────────────────── */
.settings-section {
  margin-bottom: 1rem;
}

.player-card {
  border: 1px solid var(--rep-line);
  border-radius: 10px;
  padding: 0.85rem 1rem 0.5rem;
  margin-bottom: 1rem;
  background: var(--rep-paper-2);
}

.player-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rep-amber);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.show-theme-toggle {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rep-cream);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  opacity: 0.85;
}

.show-theme-toggle input[type=checkbox] {
  accent-color: var(--rep-amber);
  cursor: pointer;
}

.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  gap: 3px;
  margin-top: 0.3rem;
}

.theme-swatch {
  background: var(--swatch-color, #888);
  border: 1px solid var(--rep-line);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: 0;
  padding: 0;
}

.theme-swatch.active {
  outline: 2px solid var(--rep-amber);
  outline-offset: 2px;
}

.theme-mode-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.group-box {
  border: 1px solid var(--rep-line);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  flex: 0 0 auto;
}

.theme-mode-row .opt-btn {
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
}

.custom-palette-panel {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--rep-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.grade-cell.grade-disabled,
.grade-cell.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.opt-btn.custom-toggle.active {
  background: var(--rep-amber);
  color: #1a1a1a;
  border-color: var(--rep-amber);
}

.btn-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.time-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.time-row-label {
  min-width: 5.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rep-amber);
  font-weight: 700;
}

.time-row-label i {
  margin-right: 0.25rem;
}

.opt-btn {
  background: var(--rep-control-bg);
  color: var(--rep-control-text);
  border: 1px solid var(--rep-line);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.85rem;
}

.opt-btn:hover {
  border-color: var(--rep-amber-soft);
  color: var(--rep-amber);
}

.opt-btn.active {
  background: var(--rep-amber);
  color: var(--rep-on-amber);
  border-color: var(--rep-amber);
}

.opt-btn.active:hover {
  color: #1a1a1a;
}

/* ─── Light mode palette (minimal first cut) ─────────────── */
:root[data-theme="light"] {
  --rep-paper: #faf6e8;
  --rep-paper-2: #fffdf3;
  --rep-cream: #2a2419;
  --rep-line: #d4ccb8;
  color-scheme: light;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(245, 180, 0, 0.10), transparent 60%),
    var(--rep-paper);
}

:root[data-theme="light"] .banner {
  background: linear-gradient(180deg, #fffdf3 0%, #f5efd8 100%);
}

:root[data-theme="light"] .acc details>summary {
  background: linear-gradient(180deg, #f8f1d8, #f0e7c5);
}

:root[data-theme="light"] {
  --rep-control-bg: #fffdf3;
  --rep-control-text: #2a2419;
}

:root[data-theme="light"] .target-chip,
:root[data-theme="light"] .result-card,
:root[data-theme="light"] .seq-phase,
:root[data-theme="light"] .tally .pill,
:root[data-theme="light"] .army-meta .pill {
  background: #fffdf3;
  color: #2a2419;
}

:root[data-theme="light"] .chart-tbl th {
  background: #ede5cc;
  color: #5a4a1c;
}

:root[data-theme="light"] .chart-tbl td.row-label {
  background: #f5efd8;
}

:root[data-theme="light"] .skirmish-log {
  background: #fffdf3;
  color: #2a2419;
}

:root[data-theme="light"] .note-box {
  background: rgba(245, 180, 0, 0.14);
}

/* Tighten on small screens */
@media (max-width: 540px) {
  .body {
    padding: 0.8rem 0.8rem 1rem;
  }

  .pip-btn {
    font-size: 0.9rem;
    padding: 0.5rem 0;
  }

  .target-chip {
    font-size: 0.85rem;
  }
}

/* ── Compact sidebar ─────────────────────────────── */
.sidebar-nav-compact { width:52px; }
.sidebar-nav-compact .sidebar-brand { padding:0.5rem 0.4rem 0.5rem; justify-content:center; }
.sidebar-nav-compact .sidebar-crest { width:24px; height:24px; }
.sidebar-nav-compact .nav-item { justify-content:center; padding:0.45rem 0; font-size:1rem; }
.sidebar-nav-compact .nav-item i { font-size:1.1rem; }

.nav-toggle-btn { background:none; border:none; color:var(--rep-cream); cursor:pointer; padding:0.3rem; margin:0 auto 0.3rem; font-size:0.85rem; opacity:0.6; }
.nav-toggle-btn:hover { opacity:1; }
.sidebar-nav-compact .nav-toggle-btn i { transform:rotate(180deg); }

/* Tighter nav */
.nav-item { font-size:0.78rem; padding:0.4rem 0.8rem; gap:0.4rem; }
.sidebar-app-name { font-size:0.82rem; }