/* Map Stats sub-map accordion: click a map row to pull its mode-aware objective
   sub-maps in/out, inline. Standalone stylesheet (kept out of the shared styles.css).
   Modes: Domination (control-point hold rate), Convoy (3-checkpoint payload push),
   Convergence (phase-1 point + phase-2 payload). Anti-vibe: no colored edge stripes
   or brackets — signal lives in bars, inside-row dots, and colored values. */

/* Map rows in the Map Win Rates list become clickable drill-downs. */
#mapBars .bar-row {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.14s ease;
}
#mapBars .bar-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
#mapBars .bar-row.sa-open {
  background: rgba(255, 255, 255, 0.05);
}
:root[data-theme="day"] #mapBars .bar-row:hover,
:root[data-theme="day"] #mapBars .bar-row.sa-open {
  background: rgba(20, 33, 61, 0.05);
}

/* The expanding container (animated open/closed via inline max-height). */
.sa-acc-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.26s ease, opacity 0.2s ease;
}

.sa-acc {
  margin: 2px 0 10px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(var(--BORDER_COLOR), 0.16);
  border-radius: 8px;
  background: rgba(var(--surf-3), 0.55);
}
:root[data-theme="day"] .sa-acc {
  border-color: rgba(var(--BORDER_COLOR), 0.12);
  background: rgba(255, 255, 255, 0.5);
}

.sa-acc-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 8px;
}
.sa-acc-sub {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

/* Convergence stacks two phase blocks; give the 2nd some breathing room. */
.sa-phase + .sa-phase {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--BORDER_COLOR), 0.12);
}
:root[data-theme="day"] .sa-phase + .sa-phase {
  border-top-color: rgba(var(--BORDER_COLOR), 0.1);
}

.sa-acc-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 2px;
}
.sa-acc-row + .sa-acc-row {
  border-top: 1px solid rgba(var(--BORDER_COLOR), 0.08);
}

.sa-acc-name {
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

/* Inside-row category dot (anti-vibe replacement for any edge stripe). */
.sa-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  flex: 0 0 auto;
  background: var(--FG_MUTED);
}
.sa-dot.rate-good { background: var(--ACCENT_GREEN, #34d399); }
.sa-dot.rate-mid { background: #f8a532; }
.sa-dot.rate-bad { background: var(--BUTTON_DANGER, #f0556a); }

.sa-acc-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
:root[data-theme="day"] .sa-acc-track {
  background: rgba(var(--surf-4), 0.08);
}
.sa-acc-fill {
  display: block;
  height: 100%;
  border-radius: 8px;
  /* Liquid-glass: a soft top-lit sheen over the rate colour (set as background-color
     by the rate classes, so this gradient stays on top). */
  background-color: var(--FG_MUTED);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.sa-acc-fill.rate-good { background-color: color-mix(in srgb, var(--ACCENT_GREEN, #34d399) 87%, #8f98a6); }
.sa-acc-fill.rate-mid { background-color: color-mix(in srgb, #f8a532 87%, #8f98a6); }
.sa-acc-fill.rate-bad { background-color: color-mix(in srgb, var(--BUTTON_DANGER, #f0556a) 87%, #8f98a6); }

.sa-acc-val {
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 86px;
}
.sa-acc-val.rate-good { color: var(--ACCENT_GREEN, #34d399); }
.sa-acc-val.rate-mid { color: #f8a532; }
.sa-acc-val.rate-bad { color: #ff8c99; }
.sa-acc-count {
  font-weight: 600;
  opacity: 0.55;
  font-size: 0.74rem;
  margin-left: 4px;
}

.sa-acc-unread {
  font-size: 0.78rem;
  opacity: 0.55;
  grid-column: 2 / -1;
}

/* ---- Convoy / Convergence payload-push meter ----------------------------
   A horizontal track of checkpoint pucks. Each puck fills bottom-up by the POV
   cap rate; height = "how far / how reliably the payload was pushed". Color is
   carried by the fill + number, never by an outer bracket. */
.sa-push {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 2px 0 12px;
  padding: 8px 4px;
}
.sa-push-start,
.sa-push-goal {
  flex: 0 0 auto;
  opacity: 0.5;
  font-size: 0.9rem;
}
.sa-push-start {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--BORDER_COLOR), 0.5);
  margin-right: 4px;
}
.sa-push-goal { margin-left: 4px; }

.sa-step {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="day"] .sa-step {
  background: rgba(var(--surf-4), 0.08);
}
.sa-step.sa-step-unread {
  background: repeating-linear-gradient(
    45deg,
    rgba(166, 186, 218, 0.1),
    rgba(166, 186, 218, 0.1) 4px,
    rgba(166, 186, 218, 0.04) 4px,
    rgba(166, 186, 218, 0.04) 8px
  );
}
.sa-step-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--FG_MUTED);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 60%);
  transition: height 0.3s ease;
  z-index: 0;
}
.sa-step.rate-good .sa-step-fill { background-color: color-mix(in srgb, var(--ACCENT_GREEN, #34d399) 87%, #8f98a6); }
.sa-step.rate-mid .sa-step-fill { background-color: color-mix(in srgb, #f8a532 87%, #8f98a6); }
.sa-step.rate-bad .sa-step-fill { background-color: color-mix(in srgb, var(--BUTTON_DANGER, #f0556a) 87%, #8f98a6); }
.sa-step-num {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
:root[data-theme="day"] .sa-step-num {
  color: #14213d;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.sa-step-link {
  flex: 1 1 auto;
  height: 3px;
  min-width: 14px;
  background: rgba(var(--BORDER_COLOR), 0.22);
  border-radius: 3px;
}

.sa-acc-empty {
  margin: 2px 0 10px;
  padding: 12px;
  border: 1px dashed rgba(var(--BORDER_COLOR), 0.2);
  border-radius: 8px;
  font-size: 0.82rem;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .sa-acc-wrap { transition: none; }
  .sa-step-fill { transition: none; }
}