/* ================================================================
   PREFLOP RANGE VISUALIZER — stylesheet
   Mobile-first, then desktop (≥820px) overrides.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ---- Theme: Forest Dark (default) ---- */
:root,
[data-theme="forest-dark"] {
  --bg:        #18191c;
  --bg-soft:   #232529;
  --bg-card:   #1f2126;
  --line:      #353941;
  --text:      #f4f4f5;
  --text-dim:  #9aa0a8;
  --accent:    #d97757;
  --accent-dk: #b85c3e;

  --felt-1:    #1f5a3e;
  --felt-2:    #154130;
  --felt-3:    #0a2418;
  --felt-rim:  #08090c;

  --out:       #232529;
  --out-text:  #5d6470;

  --pair:      #f59e0b;
  --suited:    #4ade80;
  --offsuit:   #38bdf8;

  --action-call:        #2dd4bf;
  --action-3bet-value:  #ef4444;
  --action-3bet-bluff:  #ec4899;
  --action-4bet-value:  #dc2626;
  --action-4bet-bluff:  #d946ef;
  --action-allin:       #eab308;

  --bg-gradient-1: #2a2326;
  --bg-gradient-2: #1d1c20;

  --radius:    10px;
  --shadow:    0 4px 14px rgba(0,0,0,0.45);
  --color-scheme: dark;
}

/* ---- Theme: Midnight (OLED-friendly, cool blue accents) ---- */
[data-theme="midnight"] {
  --bg:        #050608;
  --bg-soft:   #0f1116;
  --bg-card:   #14171f;
  --line:      #242a36;
  --text:      #e6e8ed;
  --text-dim:  #8b92a3;
  --accent:    #60a5fa;
  --accent-dk: #3b82f6;

  --felt-1:    #0d3d2a;
  --felt-2:    #082d1e;
  --felt-3:    #041810;
  --felt-rim:  #000;

  --out:       #11141a;
  --out-text:  #4a5263;

  --pair:      #fbbf24;
  --suited:    #34d399;
  --offsuit:   #38bdf8;

  --action-call:        #5eead4;
  --action-3bet-value:  #f87171;
  --action-3bet-bluff:  #f472b6;
  --action-4bet-value:  #ef4444;
  --action-4bet-bluff:  #e879f9;
  --action-allin:       #facc15;

  --bg-gradient-1: #0a0d18;
  --bg-gradient-2: #060810;

  --shadow:    0 4px 14px rgba(0,0,0,0.7);
  --color-scheme: dark;
}

/* ---- Theme: Daylight (warm light, low-glare) ---- */
[data-theme="daylight"] {
  --bg:        #faf6ee;
  --bg-soft:   #efe8d8;
  --bg-card:   #ffffff;
  --line:      #d4cdba;
  --text:      #2a2723;
  --text-dim:  #6b6558;
  --accent:    #c4521f;
  --accent-dk: #a3411a;

  --felt-1:    #2d7a52;
  --felt-2:    #1f5a3a;
  --felt-3:    #144028;
  --felt-rim:  #0a2418;

  --out:       #e8e1cf;
  --out-text:  #968d7a;

  --pair:      #d97706;
  --suited:    #16a34a;
  --offsuit:   #0284c7;

  --action-call:        #0d9488;
  --action-3bet-value:  #dc2626;
  --action-3bet-bluff:  #db2777;
  --action-4bet-value:  #b91c1c;
  --action-4bet-bluff:  #c026d3;
  --action-allin:       #ca8a04;

  --bg-gradient-1: #f5ecdc;
  --bg-gradient-2: #ecdfc4;

  --shadow:    0 4px 14px rgba(0,0,0,0.12);
  --color-scheme: light;
}

html { color-scheme: var(--color-scheme); }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(ellipse at 18% -8%, var(--bg-gradient-1) 0%, transparent 55%),
              radial-gradient(ellipse at 92% 108%, var(--bg-gradient-2) 0%, transparent 50%),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ================================================================
   Top bar / footer
   ================================================================ */
.topbar {
  text-align: center;
  padding: 0.75rem 1rem 0.4rem;
}
.topbar h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.1rem;
  letter-spacing: -0.01em;
}
.subtitle {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0 0.55rem 0.75rem;
}

footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.7rem;
  padding: 0.3rem 1rem 0.6rem;
}
footer a { color: var(--accent); }

.scenario, .grid-wrap, .range-bar {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ================================================================
   SCENARIO panel
   ================================================================ */
.scenario {
  padding: 0.65rem 0.75rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Mobile-only collapse toggle for the scenario panel.
   Hidden on desktop. The corresponding scenario-body wraps everything except
   the always-visible hero-row, so collapsing only hides setup chrome. */
.scenario-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  text-align: left;
}
.st-summary { color: var(--accent); }
.st-chevron {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}
.scenario-toggle[aria-expanded="false"] .st-chevron {
  transform: rotate(180deg);
}
.scenario-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.panel-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.field label {
  color: var(--text-dim);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.field-row { display: flex; gap: 0.5rem; }
.field-row .field { flex: 1; }

.profile-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.profile-row select { flex: 1 1 auto; min-width: 0; }

.icon-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.icon-btn:hover { background: var(--line); }

.icon-btn.danger {
  border-color: #7f1d1d;
  color: #f87171;
}
.icon-btn.danger:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: #f87171;
}

/* Save button: muted when there's nothing to save, glows accent-orange when
   the active profile has unsaved edits. The pulse keeps it gently visible
   without being annoying. */
.icon-btn.save-btn {
  color: var(--text-dim);
  font-weight: 700;
}
.icon-btn.save-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.icon-btn.save-btn.is-dirty {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  opacity: 1;
  cursor: pointer;
  animation: save-pulse 2.4s ease-in-out infinite;
}
@keyframes save-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(217, 119, 87, 0); }
}
.icon-btn.save-btn.is-dirty:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
}

/* Subtle "unsaved changes" dot next to the Profile label. */
.profile-dirty-dot {
  color: var(--accent);
  font-size: 0.85em;
  margin-left: 0.25rem;
  vertical-align: 0.05em;
}

select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.4rem 1.8rem 0.4rem 0.6rem;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path fill='%238aaa9a' d='M5 7L0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  min-height: 36px;
}
select:disabled { opacity: 0.5; cursor: not-allowed; }
select:focus    { outline: 2px solid var(--accent); outline-offset: 1px; }

.table-graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.table-felt {
  position: absolute;
  inset: 7% 3%;
  background: radial-gradient(ellipse at 50% 30%, var(--felt-1) 0%, var(--felt-2) 60%, var(--felt-3) 100%);
  border-radius: 50%;
  border: 8px solid var(--felt-rim);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.55),
    inset 0 0 0 2px rgba(255,255,255,0.03),
    0 0 0 1px #1d1f24,
    0 6px 18px rgba(0,0,0,0.5);
}
.table-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-dim);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.seats { position: absolute; inset: 0; }
.seat {
  --chip-size:   clamp(32px, 5vw, 54px);
  --marker-size: clamp(14px, 2.6vw, 20px);
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.seat-chip {
  width:  var(--chip-size);
  height: var(--chip-size);
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(170deg, #2a5a48 0%, #173929 100%);
  border: 2px solid #0a1e13;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0.5rem, 1.25vw, 0.7rem);
  letter-spacing: -0.03em;
  color: var(--text);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  position: relative;
  white-space: nowrap;
}
.seat.is-hero .seat-chip {
  background: linear-gradient(170deg, #4ade80 0%, #16a34a 100%);
  color: #032410;
  border-color: #052e15;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.22), 0 2px 5px rgba(0,0,0,0.4);
}
.button-marker {
  position: absolute;
  width:  var(--marker-size);
  height: var(--marker-size);
  --marker-offset: calc(var(--chip-size) / 2 + var(--marker-size) / 2 + 1px);
  left: calc(50% + var(--marker-dx, 0) * var(--marker-offset));
  top:  calc(50% + var(--marker-dy, 0) * var(--marker-offset));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f5f5f4;
  color: #18181b;
  font-size: clamp(0.52rem, 1.05vw, 0.62rem);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #18181b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 1;
}

.hero-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.hero-info {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  min-width: 0;
}
.hero-buttons {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.hero-label {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero-pos  { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.hero-rec  { display: inline-flex; align-items: baseline; gap: 0.25rem; color: var(--text-dim); font-size: 0.8rem; }
.hero-pct  { color: var(--text); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* Tight wrapper around the position label and dealer-button chip so the
   chip sits flush with the BTN text (no inherited flex gap from .hero-info)
   and reserves its slot whether shown or hidden. */
.hero-pos-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
}

/* Inline dealer-button graphic — a miniature of the chip on the table.
   Shown next to the hero-pos label whenever hero is on the button (BTN at
   most table sizes, SB in heads-up). When `.is-hidden` is applied the chip
   becomes invisible but still occupies its slot, so the "Open xx.x%" text
   that follows doesn't shift left/right as the user cycles positions. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #f5f5f4;
  color: #18181b;
  font-size: 0.72em;
  font-weight: 800;
  line-height: 1;
  border: 1.5px solid #18181b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  vertical-align: middle;
  transform: translateY(-0.05em);
  flex-shrink: 0;
}
.btn-icon.is-hidden { visibility: hidden; }

.next-btn {
  background: var(--accent-dk);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.12s, transform 0.06s;
  white-space: nowrap;
  font-family: inherit;
}
.next-btn:hover  { background: var(--accent); }
.next-btn:active { transform: scale(0.97); }
/* Differentiate the vs cycle button so the user doesn't confuse it with hero. */
.next-vs-btn {
  background: #6366f1;
  border-color: #4f46e5;
}
.next-vs-btn:hover { background: #4f46e5; }

.custom-hint {
  margin: 0;
  padding: 0.45rem 0.6rem;
  background: rgba(245,158,11,0.07);
  border: 1px dashed rgba(245,158,11,0.35);
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 0.73rem;
  line-height: 1.4;
}
.custom-hint em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}
.custom-hint strong { color: var(--text); font-weight: 700; }

/* BB-position note uses a sky-blue tint so it's visually distinct from the
   amber profile-mode note. They can stack when both apply. */
.custom-hint.bb-hint {
  background: rgba(56, 189, 248, 0.07);
  border-color: rgba(56, 189, 248, 0.35);
}

/* Reserved slot below the hero-row for contextual notes. On mobile we use
   a min-height to keep the Next position button anchored at the same
   vertical spot. On desktop we go further: position the hints absolutely
   so the flex layout above them is completely unaffected by their
   presence — hero-row never shifts, no matter what shows up below it. */
.hints-area {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 4.5rem;
}
.link-btn {
  background: none; border: none;
  color: var(--accent); text-decoration: underline;
  cursor: pointer; font: inherit;
  padding: 0; margin-left: 0.2rem;
}

/* Stronger version used for the "Apply to all vs Positions" action — needs
   to feel like a real action button without dominating the palette area. */
.link-btn-strong {
  background: var(--bg-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.link-btn-strong:hover { background: var(--accent); color: #fff; }
.custom-actions { display: flex; justify-content: flex-end; }

/* ================================================================
   ADVANCED scenario builder
   ================================================================ */
.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.32rem 0.55rem;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.advanced-toggle:hover { color: var(--text); }
.advanced-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(74,222,128,0.08);
}
.advanced-toggle .adv-label    { flex: 0 0 auto; }
.advanced-toggle .adv-summary  {
  flex: 1 1 auto;
  text-align: right;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 500;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.advanced-toggle .adv-chevron {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}
.advanced-toggle[aria-expanded="true"] .adv-chevron {
  transform: rotate(180deg);
}

.advanced-body {
  display: grid;
  gap: 0.32rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease, margin 0.25s ease;
}
.advanced-body.open {
  max-height: 22rem;
  /* When open, don't let the flex-column squeeze us — content (action chips,
     vs Position row, Stack row) must stay visible. */
  flex-shrink: 0;
}

.action-row {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.action-chip {
  flex: 1 1 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.1rem;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-family: inherit;
}
.action-chip:hover { color: var(--text); }
.action-chip.active {
  background: var(--accent-dk);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.vs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vs-row .vs-label {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 4.5rem;
}
.vs-row select {
  flex: 1 1 auto;
  min-height: 30px;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  font-size: 0.82rem;
}

/* ================================================================
   GRID panel
   ================================================================ */
.grid-wrap {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: clamp(2px, 0.5vw, 4px);
  width: 100%;
  aspect-ratio: 1 / 1;
}
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(3px, 0.5vw, 5px);
  font-size: clamp(0.52rem, 1.55vw, 0.92rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--out);
  color: var(--out-text);
  user-select: none;
  transition: background 0.1s, color 0.1s, transform 0.07s;
  line-height: 1;
  text-align: center;
}
.cell.in-range.pair    { background: var(--pair);    color: #1a1300; }
.cell.in-range.suited  { background: var(--suited);  color: #052e15; }
.cell.in-range.offsuit { background: var(--offsuit); color: #00253a; }

.grid.adv-vs-rfi  .cell.in-range { background: var(--action-call);       color: #002723; }
.grid.adv-vs-3bet .cell.in-range { background: var(--action-4bet-value); color: #fff;     }
.grid.adv-vs-4bet .cell.in-range { background: var(--action-allin);      color: #1c1500; }

/* Custom-paint cells take only their inline-styled color. */
/* Painting is allowed only inside the focused custom popup (body.is-custom)
   — when the user closes the popup the chart goes view-only on the main
   screen, so we disable the cursor + scale hover too. */
body.is-custom .grid.mode-custom .cell { cursor: pointer; }
body.is-custom .grid.mode-custom .cell:hover { transform: scale(1.06); }

/* Disable native touch scrolling + text selection only while the popup is
   open. Outside the popup the chart is read-only so the page should scroll
   freely on finger swipes. */
body.is-custom .grid.mode-custom {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.cell.in-range:hover { transform: scale(1.05); }

/* ---- Legend ---- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.legend-swatch {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.legend-swatch.pair    { background: var(--pair); }
.legend-swatch.suited  { background: var(--suited); }
.legend-swatch.offsuit { background: var(--offsuit); }
.legend-swatch.out     { background: var(--out); border: 1px solid var(--line); }

/* ================================================================
   RANGE BAR — its own card. On mobile sits above the chart; on
   desktop sits below the chart in the right column.
   ================================================================ */
.range-bar {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Mode toggle pinned to the top of the bar — always visible.
   Compact "% ⚪──⚫ Custom" switch in place of the older two-button design. */
.range-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 0.4rem 0.55rem;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  user-select: none;
}
.mode-row-side {
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.mode-row-side.active { color: var(--accent); }

/* iOS-style toggle switch */
.mode-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.mode-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.mode-switch-track {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.mode-switch-track::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.18s ease, background 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mode-switch input:checked + .mode-switch-track {
  background: var(--accent-dk);
  border-color: var(--accent);
}
.mode-switch input:checked + .mode-switch-track::before {
  transform: translateX(16px);
  background: #fff;
}
.mode-switch input:focus-visible + .mode-switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Always-visible header. Holds slider+lock in pct mode, scenario name in
   custom mode, and the chevron toggle on the right. */
.range-bar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
}
.rb-pct-header {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.rb-pct-header input[type="range"] { flex: 1 1 auto; min-width: 0; }
.rb-custom-header {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.rb-custom-header .rb-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Edit button: replaces the percentage slider in custom mode, opens the
   edit popup. Styled as a visible primary action so the user understands
   they have to hit it to start painting. */
.edit-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.12s, transform 0.06s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.edit-btn:hover  { background: var(--accent-dk); }
.edit-btn:active { transform: scale(0.97); }
.edit-icon { font-size: 0.95em; }

.range-bar-toggle {
  flex: 0 0 auto;
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.range-bar-toggle:hover { color: var(--text); background: var(--bg-soft); }
.range-bar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.rb-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}
.range-bar-toggle[aria-expanded="false"] .rb-chevron {
  transform: rotate(180deg);
}

.range-bar-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem 0.7rem;
  border-top: 1px solid var(--line);
}
.mode-chip {
  flex: 1 1 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.34rem 0.5rem;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.02em;
  font-family: inherit;
}
.mode-chip:hover { color: var(--text); }
.mode-chip.active {
  background: var(--accent-dk);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ---- Percentage editor ---- */
.range-pct { display: flex; flex-direction: column; gap: 0.45rem; }
.slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.slider-row input[type="range"] { flex: 1 1 auto; }
.pct-readout {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  text-align: right;
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}
/* Tap-to-type number input — styled to read like the inline %. The number
   spinners are stripped and a subtle hover/focus underline cues that it's
   editable. */
.pct-input {
  /* Reset native input chrome */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.05em 0.15em;
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: inherit;
  font-variant-numeric: inherit;
  text-align: right;
  width: 3.2ch;
  cursor: text;
  transition: border-color 0.12s, background 0.12s;
}
.pct-input::-webkit-outer-spin-button,
.pct-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pct-input:hover { border-color: var(--line); }
.pct-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(217,119,87,0.1);
}
.pct-input:disabled { color: var(--text-dim); cursor: not-allowed; }
.lock-btn { flex: 0 0 auto; }
.lock-btn.locked {
  background: var(--accent-dk);
  border-color: var(--accent);
  color: #fff;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%, var(--accent) var(--fill, 15%),
    var(--bg-soft) var(--fill, 15%), var(--bg-soft) 100%
  );
  border-radius: 999px;
}
input[type="range"]::-moz-range-track {
  height: 5px;
  background: var(--bg-soft);
  border-radius: 999px;
}
input[type="range"]::-moz-range-progress {
  height: 5px;
  background: var(--accent);
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  margin-top: -6.5px;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(217,119,87,0.18);
  transition: transform 0.05s;
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--text-dim);
  cursor: not-allowed;
}
input[type="range"]:disabled { cursor: not-allowed; }

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.preset {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  min-height: 26px;
  transition: background 0.12s, border-color 0.12s;
}
.preset:hover  { background: #1f4a39; }
.preset.active { background: var(--accent-dk); border-color: var(--accent); color: #fff; }
.preset:disabled { opacity: 0.5; cursor: not-allowed; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}
.stat { margin: 0; }
.stat dt {
  color: var(--text-dim);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat dd {
  margin: 0.05rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Custom palette ---- */
.range-custom { display: flex; flex-direction: column; gap: 0.5rem; }
.palette-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.35;
}
.palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Each swatch is a fully-colored chip in its action color. Bold contrasting
   colors mean the user's eye picks the right one fast even with 10 options
   on screen. The active selection is ringed in accent so it pops out. */
.palette-swatch {
  --swatch:      var(--out);
  --swatch-text: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--swatch);
  color: var(--swatch-text);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  min-height: 30px;
  letter-spacing: 0.01em;
  transition: transform 0.08s, box-shadow 0.12s, border-color 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.palette-swatch { position: relative; }
.palette-swatch:hover { transform: translateY(-1px); }
.palette-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--accent), 0 1px 4px rgba(0,0,0,0.4);
}
.palette-swatch .swatch-dot { display: none; } /* not needed when whole chip is colored */

/* Color picker layered over each swatch — transparent overlay that becomes
   the actual click target in customize mode. Programmatic .click() on color
   inputs is blocked in most browsers (requires a real user gesture), so we
   make the input itself receive the click and let the browser open the OS
   picker natively. Out of customize mode, pointer-events:none keeps the
   swatch button as the click target for paint-action selection. */
.palette-swatch .swatch-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.palette.customizing .palette-swatch .swatch-picker {
  pointer-events: auto;
}

/* When customizing, the palette gets a dashed accent ring on each swatch so
   the user knows clicks now open a color picker instead of selecting an
   action for painting. The active-paint highlight is hidden in this mode
   to avoid visual collision with the ring. */
.palette.customizing .palette-swatch {
  outline: 2px dashed rgba(255,255,255,0.45);
  outline-offset: 3px;
}
.palette.customizing .palette-swatch.active {
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Wrapper holding the swatch + its ✕ remove corner. Sits inline like the
   swatches themselves so flex-wrap on .palette still flows correctly. */
.palette-swatch-wrap {
  position: relative;
  display: inline-flex;
}

/* ✕ remove-from-this-profile button. Hidden outside customize mode. */
.palette-swatch-remove {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.palette.customizing .palette-swatch-remove { display: inline-flex; }
.palette-swatch-remove:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
  color: #f87171;
}

/* "+ Add action" tile — only present in customize mode. */
.palette-add-btn {
  display: none;
  align-items: center;
  background: transparent;
  color: var(--accent);
  border: 1px dashed rgba(217, 119, 87, 0.5);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 30px;
  letter-spacing: 0.01em;
  transition: background 0.12s, border-color 0.12s;
}
.palette.customizing .palette-add-btn { display: inline-flex; }
.palette-add-btn:hover {
  background: rgba(217, 119, 87, 0.1);
  border-color: var(--accent);
}

/* Customize / Reset row sits below "Apply to all villains" in the
   custom-actions strip. */
.palette-customize-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.link-btn-strong.danger { color: #f87171; }
.link-btn-strong.danger:hover { color: #fca5a5; }
.pcb-icon { margin-right: 0.25rem; }

.custom-scenario-label {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
  text-align: right;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* "Done" button — exit the focused custom-edit screen without losing paints. */
.custom-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.custom-header .palette-hint { flex: 1 1 auto; }
.custom-done-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s, transform 0.06s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.custom-done-btn:hover  { background: var(--accent-dk); }
.custom-done-btn:active { transform: scale(0.97); }

/* ================================================================
   DESKTOP overrides  (≥820px)
   ================================================================ */
@media (min-width: 820px) {
  html, body { height: 100dvh; overflow: hidden; }
  body { display: flex; flex-direction: column; }

  .topbar    { flex: 0 0 auto; padding: 0.45rem 1rem 0.2rem; }
  .topbar h1 { font-size: 1.2rem; margin-bottom: 0.05rem; }
  .subtitle  { font-size: 0.75rem; }

  footer     { flex: 0 0 auto; padding: 0.2rem 1rem 0.3rem; font-size: 0.68rem; }

  /* Two-column grid. Default layout (pct mode): range-bar on top of right
     column, chart fills the rest below it. Custom mode flips this so the
     chart sits on top with the palette below — that's the "focused edit
     screen" the user wants. */
  main {
    flex: 1 1 0;
    min-height: 0;
    padding: 0.35rem 0.5rem;
    gap: 0.45rem;
    display: grid;
    grid-template-columns: clamp(26rem, 35%, 44rem) 1fr;
    grid-template-rows: auto 1fr;
    align-items: stretch;
  }
  .left-col   { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 0.4rem; min-height: 0; overflow: hidden; }
  .range-bar  { grid-column: 2; grid-row: 1; }
  .grid-wrap  { grid-column: 2; grid-row: 2; }

  /* Custom mode flips the chart back on top so the focused painter has the
     "big chart with choices below" layout. */
  body.is-custom main { grid-template-rows: 1fr auto; }
  body.is-custom .grid-wrap { grid-row: 1; }
  body.is-custom .range-bar { grid-row: 2; }

  .scenario {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    /* Extra bottom padding reserves a fixed slot for the hints-area, which
       is absolutely positioned. That keeps hero-row and Next position
       anchored at exactly the same spot whether or not a note is showing. */
    padding: 0.55rem 0.75rem 4.6rem;
    gap: 0.5rem;
    position: relative;
  }
  /* Float the hints inside the reserved bottom padding so they never push
     the hero-row up or shrink the table-graphic when they appear/disappear. */
  .scenario .hints-area {
    position: absolute;
    bottom: 0.6rem;
    left: 0.75rem;
    right: 0.75rem;
    min-height: 0;
  }
  .scenario-body {
    flex: 1 1 0;
    min-height: 0;
    gap: 0.55rem;
  }
  .panel-title { font-size: 0.78rem; }

  /* Bigger, equal-height form rows so the scenario panel doesn't have dead
     space below the controls. All selects, the Advanced toggle, and the
     vs/Stack rows share the same control height so each "line" reads the
     same. Labels are bumped slightly too so the rows feel roomy. */
  .scenario .field { gap: 0.3rem; }
  .scenario .field label,
  .scenario .vs-row .vs-label {
    font-size: 0.72rem;
    font-weight: 500;
  }
  .scenario select {
    min-height: 44px;
    font-size: 0.95rem;
    padding: 0.55rem 1.9rem 0.55rem 0.75rem;
  }
  .scenario .advanced-toggle {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
  }
  .scenario .icon-btn {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.05rem;
  }
  .scenario .vs-row { min-height: 44px; gap: 0.6rem; }
  .scenario .vs-row select {
    min-height: 44px;
    padding: 0.55rem 1.9rem 0.55rem 0.75rem;
    font-size: 0.92rem;
  }
  .scenario .vs-row .vs-label { min-width: 5.5rem; }
  .scenario .action-row { padding: 3px; gap: 3px; }
  .scenario .action-chip { padding: 0.42rem 0.2rem; font-size: 0.74rem; }

  /* Center the poker oval inside the scenario panel using auto top/bottom
     margins to absorb leftover vertical space symmetrically. */
  .table-graphic {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 32vh;
    max-width: calc(32vh * 1.6);
    margin: auto;
  }

  .hero-row { flex-wrap: nowrap; gap: 0.5rem; }
  .next-btn { padding: 0.4rem 0.75rem; font-size: 0.8rem; min-height: 36px; }

  /* Bigger scenario label on desktop now that it includes the profile name. */
  .custom-scenario-label { font-size: 1rem; }

  /* Right column: grid + legend (no range-bar in here anymore) */
  .grid-wrap {
    align-items: center;
    justify-content: flex-start;
    padding: 0.4rem 0.5rem 0.5rem;
    gap: 0.3rem;
    min-height: 0;
    overflow: hidden;
  }
  .grid {
    aspect-ratio: auto;
    width: auto;
    flex-shrink: 0;
  }

  .legend { font-size: 0.67rem; gap: 0.3rem 0.6rem; }

  /* Range-bar card sits below grid */
  .range-bar { padding: 0; }
  .range-bar-toggle { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
  .range-bar-body   { padding: 0.5rem 0.85rem 0.6rem; gap: 0.4rem; }

  .stats     { gap: 0.3rem; }
  .stat dt   { font-size: 0.6rem; }
  .stat dd   { font-size: 0.82rem; }
  .preset    { padding: 0.18rem 0.55rem; font-size: 0.72rem; min-height: 24px; }

  /* Custom mode = focused edit screen: left column hides, chart fills width. */
  body.is-custom main {
    grid-template-columns: 1fr;
  }
  body.is-custom .left-col { display: none; }
  body.is-custom .grid-wrap  { grid-column: 1; }
  body.is-custom .range-bar  { grid-column: 1; }
  body.is-custom .range-bar-toggle { display: none; }
  body.is-custom .grid { max-width: 90vh; }
}

/* ================================================================
   MOBILE compact layout  (≤819px)
   ================================================================ */
@media (max-width: 819px) {
  html, body { height: 100dvh; overflow: hidden; }
  body { display: flex; flex-direction: column; }

  .topbar { padding: 0.5rem 1rem 0.2rem; }
  .topbar h1 { font-size: 1.1rem; }
  .subtitle  { font-size: 0.74rem; }

  footer { display: none; }

  main {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.45rem 0.4rem;
    gap: 0.4rem;
  }

  .left-col { display: contents; }

  /* Mobile stack order: scenario (top) → range-bar (middle) → grid (bottom). */
  .scenario   { order: 1; padding: 0.4rem 0.65rem 0.45rem; gap: 0.28rem; }
  .range-bar  { order: 2; }
  .grid-wrap  { order: 3; }

  /* Scenario manual-collapse toggle is only useful on mobile. */
  .scenario-toggle { display: flex; }
  /* Hide scenario chrome ONLY when the user explicitly collapses via the
     scenario-toggle, or when custom mode opens its focused-screen layout.
     Expanding the range-bar no longer auto-collapses the scenario — the two
     menus operate independently so the user can have both expanded at once. */
  body.scenario-collapsed .scenario-body,
  body.is-custom .scenario-body {
    display: none;
  }
  /* Hide the entire hints-area when the scenario panel is manually
     collapsed — no point reserving space for notes the user can't see. */
  body.scenario-collapsed .scenario .hints-area {
    display: none;
  }
  /* Stable panel height when manually collapsed. */
  body.scenario-collapsed .scenario {
    padding: 0.35rem 0.65rem 0.5rem;
    gap: 0.35rem;
    min-height: 5.2rem;
  }
  /* Keep hero-row a consistent footprint regardless of position name length
     so cycling between UTG and UTG+1/UTG+2 doesn't bump the box. */
  .hero-row {
    min-height: 2.4rem;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .hero-info {
    flex-wrap: nowrap;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-info > * { flex-shrink: 0; }
  /* "You're on" eats horizontal space — drop it on mobile. The accent-colored
     position is enough context. */
  .hero-label { display: none; }
  /* Reserve a fixed slot for the position so UTG/UTG+1/UTG+2 don't change
     the row width as the user cycles through hero positions. */
  .hero-pos {
    display: inline-block;
    min-width: 3.2em;
    font-size: 1rem;
  }
  .hero-buttons { flex-shrink: 0; gap: 0.2rem; }
  /* Compact button labels on mobile so both Next villain and Next position
     fit on the same row alongside the hero info, even when the action label
     gets longer (e.g. "Call vs UTG 18.5%"). */
  .next-btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    min-height: 24px;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .panel-title { display: none; }
  .table-graphic { aspect-ratio: 8 / 3; }

  .grid-wrap {
    flex: 1 1 0;
    min-height: 220px;
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 0.5rem;
    gap: 0.35rem;
  }
  .grid {
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
  }

  /* Custom mode: scenario hidden, chart on top (big), palette below. */
  body.is-custom .scenario { display: none; }
  body.is-custom .range-bar-toggle { display: none; }
  body.is-custom .grid-wrap  { order: 2; min-height: 280px; }
  body.is-custom .range-bar  { order: 3; }
  body.is-custom .range-bar-body { padding-top: 0.5rem; }
}

/* ================================================================
   New-profile dialog
   ================================================================ */
.profile-dialog {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  padding: 0;
  max-width: 26rem;
  width: 92vw;
}
.profile-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.profile-dialog form {
  padding: 1rem 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.profile-dialog h2 {
  margin: 0 0 0.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dlg-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.dlg-field input[type="text"] {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  min-height: 38px;
}
.dlg-field input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dlg-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 0.45rem 0.7rem 0.55rem;
}
.dlg-fieldset legend {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0 0.4rem;
}
.dlg-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.dlg-radio-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.15rem 0.1rem;
  border-radius: 4px;
}
.dlg-radio-list label:hover { background: var(--bg-soft); }

.dlg-seat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem 0.6rem;
  padding-top: 0.15rem;
}
.dlg-seat-grid label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.18rem 0.3rem;
  border-radius: 4px;
}
.dlg-seat-grid label:hover { background: var(--bg-soft); }

/* Stack-sizes chip list inside the profile dialog. */
.dlg-stacks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding: 0.35rem 0;
}
.dlg-stack-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.35rem 0.25rem 0.65rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.dlg-stack-chip button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.dlg-stack-chip button:hover {
  background: rgba(248,113,113,0.15);
  color: #f87171;
}
.dlg-stacks-add {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.2rem;
}
.dlg-stacks-add input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.4rem 0.55rem;
  font-family: inherit;
  font-size: 0.9rem;
  min-height: 36px;
}
.dlg-stacks-add input[type="number"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.dlg-stacks-add-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.12s, border-color 0.12s;
}
.dlg-stacks-add-btn:hover { background: var(--line); }
.dlg-hint {
  margin: 0.4rem 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.35;
}

.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.dlg-actions button {
  padding: 0.5rem 1rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  min-height: 38px;
}
.dlg-actions button:hover { background: var(--line); }
.dlg-actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dlg-actions button.primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }

/* Premium gate modal — info card with a star, used for New / Duplicate /
 * Custom stack depth gating. */
.premium-gate-dialog form {
  text-align: center;
}
.premium-gate-icon {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.premium-gate-dialog h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.premium-gate-dialog p {
  margin: 0 0 1rem;
  color: var(--text-dim);
  line-height: 1.5;
  font-size: 0.9rem;
  white-space: pre-line;
}
.premium-gate-dialog .dlg-actions {
  justify-content: center;
}

/* ================================================================
   Login screen — full-viewport overlay, shown when no user is signed in
   ================================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: radial-gradient(ellipse at 30% 0%, #2a2326 0%, transparent 50%),
              radial-gradient(ellipse at 70% 100%, #1d1c20 0%, transparent 50%),
              var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  padding: 2rem 1.6rem 1.5rem;
  max-width: 22rem;
  width: 100%;
  text-align: center;
}
.login-logo {
  font-size: 2.6rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.login-title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.login-tagline {
  margin: 0 0 1.4rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.google-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.06s, box-shadow 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.google-signin-btn:hover  { background: #f7f7f8; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.google-signin-btn:active { transform: scale(0.98); }
.g-icon { width: 18px; height: 18px; flex-shrink: 0; }

.login-mock-note {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-dim);
  background: rgba(245,158,11,0.07);
  border: 1px dashed rgba(245,158,11,0.3);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}
.login-mock-note em { color: var(--accent); font-style: normal; font-weight: 600; }
.login-mock-note code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; font-size: 0.72rem; }
.login-mock-note b { color: #e2e8f0; }
.use-demo-btn {
  margin-top: 0.5rem;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.use-demo-btn:hover { background: var(--accent); color: #1e293b; }

/* ---- Login: email form + divider ---- */
.login-divider {
  display: flex;
  align-items: center;
  margin: 1rem 0 0.8rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.login-divider span { padding: 0 0.8rem; }

.email-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}
.email-auth-form input {
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.email-auth-form input:focus { border-color: var(--accent); }
.email-auth-form input::placeholder { color: var(--text-dim); }

.auth-submit-btn {
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #1e293b;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth-submit-btn:hover { opacity: 0.9; }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-links {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
}
.auth-links a { color: var(--text-dim); text-decoration: none; }
.auth-links a:hover { color: var(--accent); }
.auth-links a b { color: var(--accent); }

.auth-error {
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 4px;
  color: #fca5a5;
  font-size: 0.72rem;
  line-height: 1.4;
}
.auth-error.is-success {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
  color: #86efac;
}

/* ============================================================
   Settings dialog
   ============================================================ */
.settings-dialog {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text);
  max-width: 580px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.settings-dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }

.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.settings-header h2 { margin: 0; font-size: 1.1rem; }
.settings-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.75rem; line-height: 1;
  cursor: pointer; padding: 0 0.4rem;
  border-radius: 6px;
}
.settings-close:hover { background: var(--bg-soft); color: var(--text); }

.settings-section { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border-bottom: none; }
.settings-section h3 {
  margin: 0 0 0.7rem 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* Theme picker */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}
.theme-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.45rem;
  padding: 0.6rem;
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: border-color 0.15s, transform 0.1s;
}
.theme-card:hover { border-color: var(--line); }
.theme-card.is-active { border-color: var(--accent); }
.theme-card:active { transform: scale(0.98); }

.theme-preview {
  display: block;
  height: 60px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.theme-dot {
  position: absolute; bottom: 8px; right: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.theme-label { font-size: 0.85rem; font-weight: 600; }
.theme-desc { font-size: 0.7rem; color: var(--text-dim); line-height: 1.3; }

/* Generic settings rows (toggle + label + description) */
.settings-row {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.55rem 0;
  cursor: pointer;
}
.settings-row input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.settings-row-text {
  display: flex; flex-direction: column; gap: 0.15rem;
  flex: 1;
}
.settings-row-label {
  font-size: 0.88rem;
  font-weight: 500;
}
.settings-row small {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.settings-row small.warning { color: #fca5a5; }

.settings-row-action {
  align-items: center;
}
.settings-row-action .settings-row-text { padding-right: 0.5rem; }

.settings-btn {
  padding: 0.5rem 0.9rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.settings-btn:hover { background: var(--line); }
.settings-btn.danger {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.settings-btn.danger:hover { background: rgba(239,68,68,0.2); }

/* Account dropdown icon for the Settings item */
.account-action .action-icon {
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-right: 0.4rem;
}

/* ============================================================
   Floating "Focus grid" mobile button — visible when ANY of the
   collapsible panels is expanded.  One tap collapses everything
   for a hand-grid-only view; tap again to restore.
   ============================================================ */
.focus-grid-btn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #1e293b;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.focus-grid-btn svg { width: 22px; height: 22px; }
.focus-grid-btn:active { transform: scale(0.92); }
.focus-grid-btn.is-focused .fg-expand   { display: none; }
.focus-grid-btn.is-focused .fg-collapse { display: block !important; }
@media (max-width: 819px) {
  .focus-grid-btn:not([hidden]) { display: flex; }
}

/* ============================================================
   Improved collapsible affordance on mobile
   ============================================================ */
.scenario-toggle,
.advanced-toggle,
.range-bar-toggle {
  /* Slightly larger tap target + visible hover state */
  transition: background 0.15s;
}
.scenario-toggle:hover,
.advanced-toggle:hover,
.range-bar-toggle:hover {
  background: rgba(255,255,255,0.04);
}
[data-theme="daylight"] .scenario-toggle:hover,
[data-theme="daylight"] .advanced-toggle:hover,
[data-theme="daylight"] .range-bar-toggle:hover {
  background: rgba(0,0,0,0.04);
}

/* Show explicit "Tap to hide / show" hint on mobile (chevron alone
   isn't always obvious to first-time users). */
.st-hint, .rb-hint, .adv-hint {
  display: none;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 0.3rem;
}
@media (max-width: 819px) {
  .st-hint, .rb-hint, .adv-hint { display: inline; }
}

/* ============================================================
   Hide advanced-positioning when the setting is on
   ============================================================ */
body.hide-advanced .advanced-toggle .actions-mini { display: none; }
body.hide-advanced #action-row,
body.hide-advanced #vs-row { display: none !important; }

/* ============================================================
   Compact mobile layout toggle
   ============================================================ */
@media (max-width: 819px) {
  body.compact-mobile .scenario { padding: 0.5rem; }
  body.compact-mobile .range-bar-panel { padding: 0.5rem; }
  body.compact-mobile h1 { font-size: 0.95rem; }
  body.compact-mobile .subtitle { display: none; }
  body.compact-mobile .grid .cell { font-size: 0.65rem; }
}

/* ============================================================
   Hide BB chip when toggle is off — chip itself is still rendered
   in DOM so position-cycling logic still finds it, just visually
   hidden.
   ============================================================ */
body.hide-bb .seat-chip[data-position="BB"] { visibility: hidden; }

/* Hide everything except the login screen when logged out. */
body.is-logged-out > main,
body.is-logged-out > footer,
body.is-logged-out > .topbar { display: none !important; }
body.is-logged-out > .login-screen { display: flex; }

/* ================================================================
   Account menu (top-right corner of topbar)
   ================================================================ */
.topbar { position: relative; }
.account-menu {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  z-index: 10;
}
.account-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent-dk);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.06s, box-shadow 0.12s;
}
.account-btn:hover  { box-shadow: 0 0 0 3px rgba(217,119,87,0.25); }
.account-btn:active { transform: scale(0.94); }

.account-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 14rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 0.5rem 0;
  z-index: 11;
}
.account-info {
  padding: 0.5rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.3rem;
}
.account-name  { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.account-email { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; word-break: break-all; }
.account-tier {
  margin: 0 0.5rem 0.3rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-radius: 4px;
  text-align: center;
}
.account-tier.is-premium { color: #fff; background: var(--accent); }
.account-action {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.account-action:hover         { background: var(--bg-soft); }
.account-action.subtle        { color: var(--text-dim); font-size: 0.78rem; }
.account-action.danger        { color: #f87171; }
.account-action.danger:hover  { background: rgba(248,113,113,0.1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}