/* SPX Playbook Trainer — dark trading-terminal theme. No external fonts. */

:root {
  --bg: #0b0e13;
  --panel: #12161e;
  --panel2: #171c26;
  --border: #232a37;
  --text: #d6dbe6;
  --dim: #8a93a6;
  --green: #34d28b;
  --red: #f0544f;
  --amber: #ffb24d;
  --orange: #ff8a3d;
  --blue: #5e9eff;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

#app {
  max-width: 1480px;
  min-width: 1000px;
  margin: 0 auto;
  padding: 14px 18px 40px;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.flat { color: var(--dim); }
b { color: #f2f5fa; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.panel-head {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.panel-head .dim { letter-spacing: 0; }

/* ---------- chips ---------- */
.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  vertical-align: middle;
}
.chip-pos { color: var(--green); border-color: rgba(52, 210, 139, 0.45); background: rgba(52, 210, 139, 0.08); }
.chip-neg { color: var(--red); border-color: rgba(240, 84, 79, 0.45); background: rgba(240, 84, 79, 0.08); }
.chip-warn { color: var(--amber); border-color: rgba(255, 178, 77, 0.5); background: rgba(255, 178, 77, 0.1); }

.trend-STRONG_UP { color: #0c1117; background: var(--green); }
.trend-UP { color: var(--green); border-color: rgba(52,210,139,0.5); background: rgba(52,210,139,0.1); }
.trend-CHOP { color: var(--amber); border-color: rgba(255,178,77,0.5); background: rgba(255,178,77,0.08); }
.trend-DOWN { color: var(--red); border-color: rgba(240,84,79,0.5); background: rgba(240,84,79,0.1); }
.trend-STRONG_DOWN { color: #0c1117; background: var(--red); }

.vol-CALM { color: var(--green); border-color: rgba(52,210,139,0.5); background: rgba(52,210,139,0.1); }
.vol-ELEVATED { color: var(--amber); border-color: rgba(255,178,77,0.5); background: rgba(255,178,77,0.1); }
.vol-STRESSED { color: var(--orange); border-color: rgba(255,138,61,0.55); background: rgba(255,138,61,0.12); }
.vol-PANIC { color: #0c1117; background: var(--red); }

.impact-high { color: var(--red); border-color: rgba(240,84,79,0.5); background: rgba(240,84,79,0.08); }
.impact-medium { color: var(--amber); border-color: rgba(255,178,77,0.5); background: rgba(255,178,77,0.08); }
.ev-earn-tag { color: #0c1117; background: var(--amber); border-color: var(--amber); font-weight: 700; }
.ev-item.ev-earnings { border-color: rgba(255,178,77,0.7); background: rgba(255,178,77,0.10); }
.ev-item.ev-earnings .ev-name { color: var(--amber); font-weight: 600; }

/* underlying (ticker) picker reuses .len-btn; just let it wrap on narrow screens */
.ticker-picker { flex-wrap: wrap; }
.ticker-btn { text-transform: none; letter-spacing: 0.04em; }

.stance-GREEN { color: #0c1117; background: var(--green); }
.stance-YELLOW { color: #0c1117; background: var(--amber); }
.stance-RED { color: #fff; background: var(--red); }

.verdict-FAVORED { color: var(--green); border-color: rgba(52,210,139,0.5); background: rgba(52,210,139,0.1); }
.verdict-OK { color: var(--blue); border-color: rgba(94,158,255,0.5); background: rgba(94,158,255,0.1); }
.verdict-REDUCED { color: var(--amber); border-color: rgba(255,178,77,0.5); background: rgba(255,178,77,0.1); }
.verdict-AVOID { color: var(--orange); border-color: rgba(255,138,61,0.55); background: rgba(255,138,61,0.1); }
.verdict-BLOCKED { color: #fff; background: var(--red); }

/* ---------- buttons ---------- */
.btn-primary, .btn-secondary, .len-btn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 22px;
  cursor: pointer;
}
.btn-primary {
  color: #0c1117;
  background: var(--green);
  border-color: var(--green);
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-secondary:hover, .len-btn:hover { border-color: var(--dim); }
.len-btn.sel {
  color: #0c1117;
  background: var(--blue);
  border-color: var(--blue);
  font-weight: 700;
}

/* ---------- HUD ---------- */
.hud {
  display: flex;
  align-items: baseline;
  gap: 26px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.hud-label { font-size: 10px; color: var(--dim); letter-spacing: 0.12em; margin-right: 7px; }
.hud-item .num { font-size: 15px; }
.hud-spacer { flex: 1; }
.hud-title { font-size: 11px; letter-spacing: 0.18em; color: var(--dim); }

/* ---------- start screen ---------- */
.home-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0c1117;
  background: var(--blue);
  border: 1px solid var(--blue);
  text-decoration: none;
  border-radius: 6px;
  padding: 8px 16px;
  margin-top: 14px;
  box-shadow: 0 4px 14px rgba(94, 158, 255, 0.35);
}
.home-link:hover { filter: brightness(1.12); }

.title {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 0.14em;
  margin: 18px 0 4px;
}
.tagline { margin: 0 0 18px; }
.rules { margin: 0; padding-left: 18px; }
.rules li { margin-bottom: 6px; }
.len-picker { display: flex; gap: 10px; margin-bottom: 10px; }
.mix-note { font-size: 12px; margin: 6px 0 0; }
.stat-row { font-size: 14px; }
.meta-notes { font-size: 11.5px; margin-top: 14px; }
.start .btn-primary { margin-top: 6px; }

/* ---------- decision screen ---------- */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 12px;
  align-items: start;
}
.chart-panel canvas { display: block; width: 100%; }
.ctx-col .panel { margin-bottom: 12px; }
.ctx-block .kv { width: 100%; border-collapse: collapse; }
.ctx-block .kv td { padding: 3px 0; font-size: 12.5px; }
.ctx-block .kv td:first-child { color: var(--dim); }
.ctx-block .kv td:last-child { text-align: right; }

.vix-big {
  font-size: 34px;
  font-weight: 700;
  margin: 2px 0 8px;
}
.vix-big .vix-tag { font-size: 11px; color: var(--dim); margin-left: 8px; letter-spacing: 0.14em; }
.asof { font-size: 10.5px; margin-top: 8px; }

.ev-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
}
.ev-item.ev-warn { border-color: rgba(240, 84, 79, 0.6); background: rgba(240, 84, 79, 0.07); }
.ev-name { flex: 1; }
.ev-when { color: var(--dim); }
.ev-none { font-size: 12.5px; padding: 4px 0; }

.choices {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 2px;
}
.choice {
  position: relative;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 12px 10px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  min-height: 128px;
}
.choice:hover { border-color: var(--blue); background: var(--panel2); }
.choice .c-num {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 11px;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
}
.choice .c-name { font-weight: 700; margin-bottom: 7px; padding-right: 24px; }
.choice .c-row { margin-bottom: 3px; font-size: 12px; }
.choice .credit { color: var(--green); }
.choice .debit { color: var(--amber); }
.no-trade-card .c-name { color: var(--dim); }
/* full-width sub-header that breaks the choice grid into tiers */
.choice-group-head {
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
/* single-leg cards: subtle blue accent to set them apart from spreads */
.choice.leg-card { border-left: 3px solid rgba(94, 158, 255, 0.55); }
/* selected (in the basket) */
.choice.sel { border-color: var(--green); background: rgba(52, 210, 139, 0.12); box-shadow: inset 0 0 0 1px var(--green); }
.choice.sel .c-num { color: #0c1117; background: var(--green); border-color: var(--green); }
.choice.no-trade-card.sel { border-color: var(--amber); background: rgba(255, 178, 77, 0.12); box-shadow: inset 0 0 0 1px var(--amber); }
.choice.no-trade-card.sel .c-num { color: #0c1117; background: var(--amber); border-color: var(--amber); }
/* basket selection bar (decision screen) — sticky so TRADE stays reachable
 * while scrolling a tall (13-card) menu */
.sel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); flex-wrap: wrap;
  position: sticky; bottom: 10px; z-index: 30; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.sel-info { font-size: 13px; }
.sel-trade { min-width: 200px; }
.sel-trade[disabled] { opacity: 0.45; cursor: default; }
/* reveal: per-leg basket breakdown */
.rb-basket { margin: 6px 0 2px; font-size: 13px; }
.bk-leg { white-space: nowrap; }
.bk-plus { color: var(--dim); margin: 0 6px; }
.hint { text-align: center; font-size: 12px; margin-top: 12px; }

/* ---------- reveal screen ---------- */
.reveal-banner {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.reveal-banner.pos { border-color: rgba(52, 210, 139, 0.55); }
.reveal-banner.neg { border-color: rgba(240, 84, 79, 0.55); }
.rb-pnl { font-size: 30px; font-weight: 700; }
.rb-sub { color: var(--dim); }
.rb-date { flex: 1; }
.reveal-banner .btn-primary { align-self: center; }

/* NEXT/FINISH floats pinned to the viewport corner so it's always clickable
 * on long reveals (13-card outcome tables) at any scroll position or zoom */
#nextBtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  padding: 14px 28px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(52, 210, 139, 0.35);
}
.screen.reveal { padding-bottom: 76px; }

.reveal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 12px;
  align-items: start;
}
.reveal-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.hold-stats { font-size: 13px; margin-top: 8px; }

.otable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.otable th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.otable td { padding: 6px; border-bottom: 1px solid rgba(35, 42, 55, 0.6); }
.otable tr.row-chosen td { background: rgba(94, 158, 255, 0.1); }
.otable tr.row-best td { box-shadow: inset 3px 0 0 var(--green); }
.tagcell { white-space: nowrap; }
.tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
.tag-you { color: #0c1117; background: var(--blue); }
.tag-best { color: #0c1117; background: var(--green); }

.coach .verdicts { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.verdict { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.verdict .v-name { width: 92px; color: var(--dim); }
.verdict .v-score { margin-left: auto; }
.coach-size { margin-left: auto; }
.coach-notes { margin: 6px 0; padding-left: 18px; font-size: 12.5px; }
.coach-notes li { margin-bottom: 4px; }
.coach-details summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.agree { margin-top: 10px; font-size: 13px; }
.gex-note { font-size: 10.5px; margin-top: 10px; }
.narrative p { margin: 0; font-size: 13.5px; }

/* ---------- summary screen ---------- */
.sum-banner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.sum-banner.pos { border-color: rgba(52, 210, 139, 0.55); }
.sum-banner.neg { border-color: rgba(240, 84, 79, 0.55); }
.grade {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 700;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid var(--border);
}
.grade-A { color: var(--green); border-color: var(--green); }
.grade-B { color: var(--blue); border-color: var(--blue); }
.grade-C { color: var(--amber); border-color: var(--amber); }
.grade-D { color: var(--orange); border-color: var(--orange); }
.grade-F { color: var(--red); border-color: var(--red); }
.sum-pnl { font-size: 34px; font-weight: 700; }
.sum-sub { color: var(--dim); }

.sum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.summary .kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.summary .kv td { padding: 5px 0; border-bottom: 1px solid rgba(35, 42, 55, 0.6); }
.summary .kv td:first-child { color: var(--dim); }
.summary .kv td:last-child { text-align: right; }
.compare { text-align: center; font-size: 13.5px; padding: 12px; }
.sum-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
#cv-equity { display: block; width: 100%; }

/* ---------- no-data screen ---------- */
.nodata {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
.nodata-box {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 40px 60px;
}
.nodata-box h1 { font-family: var(--mono); letter-spacing: 0.08em; }
.nodata-box code {
  font-family: var(--mono);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--green);
}

/* ---------- narrower screens (~1100px) ---------- */
@media (max-width: 1180px) {
  #app { min-width: 0; padding: 10px 12px 30px; }
  .main-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .reveal-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .choices { gap: 7px; }
  .choice { font-size: 11.5px; padding: 10px; }
  .sum-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- phones (<=720px): single column, touch-first ---------- */
@media (max-width: 720px) {
  /* nothing may widen the page sideways — sideways pan is what breaks
   * vertical scrolling on iOS. clip (not hidden): hidden turns html/body
   * into a scroll container, which itself breaks scrolling on Safari. */
  html, body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
  #app { padding: 8px 10px 30px; }

  /* stack every multi-column grid */
  .main-grid,
  .reveal-grid,
  .reveal-grid2,
  .sum-grid { grid-template-columns: minmax(0, 1fr); }

  /* choice cards: two per row, comfy tap targets */
  .choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .choice { min-height: 0; padding: 10px; font-size: 12px; }

  .hud { flex-wrap: wrap; gap: 4px 16px; padding: 8px 10px; }
  .hud-spacer { display: none; }

  .title { font-size: 20px; letter-spacing: 0.1em; }
  .vix-big { font-size: 26px; }
  .rb-pnl { font-size: 24px; }
  .sum-pnl { font-size: 24px; }
  .grade { font-size: 30px; width: 48px; height: 48px; line-height: 48px; }

  .len-picker { flex-wrap: wrap; }
  .btn-primary, .btn-secondary, .len-btn { padding: 11px 16px; }

  .reveal-banner { flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; }
  .sum-banner { flex-wrap: wrap; gap: 10px 16px; padding: 12px; }

  /* outcome tables scroll inside their panel instead of widening the page */
  .otable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* long basket / tag strings wrap instead of forcing overflow */
  .bk-leg, .tagcell { white-space: normal; }

  .sel-bar { bottom: 6px; padding: 10px; gap: 8px; }
  .sel-trade { min-width: 0; width: 100%; }

  #nextBtn { right: 10px; bottom: 10px; padding: 12px 20px; }
  .screen.reveal { padding-bottom: 84px; }

  /* keyboard-shortcut hints are meaningless on touch */
  .hint { display: none; }

  .nodata-box { margin: 0 14px; padding: 28px 20px; }
}