/* Strategy Lab — composer-specific styles, layered on "The Ledger" tokens in
   styles.css. Loaded by index.html; the Lab now renders as an in-app tab-panel
   (#strategy-lab), not a standalone page. */

/* minmax(0,1fr) locks a true 50/50 so the left pane never grows with its
   content (e.g. a wider number) and shoves the right pane while dragging. */
.lab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
.lab-split > section { min-width: 0; }
@media (max-width: 980px) { .lab-split { grid-template-columns: 1fr; gap: var(--s6); } }

.lab-h { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink);
  margin: 0 0 var(--s3); letter-spacing: -0.01em; }

/* Subscribe / sign-in gate */
.lab-gate { max-width: 520px; margin: var(--s6) 0; }
.lab-gate-card { border: 1px solid var(--rule); border-radius: 4px; background: #f7fcfc; padding: var(--s6); }
.lab-gate-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink);
  margin: 0 0 var(--s3); letter-spacing: -0.01em; }
.lab-gate-card p { color: var(--ink-soft); margin: 0 0 var(--s4); line-height: 1.55; }
.lab-gate-card .primary-button { text-decoration: none; }
.lab-gate-note { color: var(--loss); font-size: 13px; margin: var(--s3) 0 0; }

/* Landing gate (visitors without access): split hero — copy + CTA on the
   left, a dark self-running demo card on the right. */
.lab-gate.lab-gate-full { max-width: 980px; margin: var(--s6) auto; }
.lab-land-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
@media (max-width: 920px) { .lab-land-hero { grid-template-columns: 1fr; } }
.lab-land-tag { display: inline-block; padding: 3px 10px; margin: 0 0 var(--s4);
  border: 1px solid var(--gold); border-radius: 999px; background: var(--gold-soft);
  color: var(--gold-deep); font-size: 11px; letter-spacing: 0.04em; }
.lab-land-copy h2 { font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -0.015em;
  margin: 0 0 var(--s4); }
.lab-land-lede { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0 0 var(--s5); }
.lab-land-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.lab-land-cta .primary-button { text-decoration: none; }
.lab-land-terms { color: var(--slate); font-size: 13px; }
.lab-land-honest { color: var(--slate); font-size: 13px; margin: var(--s4) 0 0; }
.lab-land-peek { color: var(--slate); font-size: 14px; margin: var(--s4) 0 0; }

/* Demo-mode banner above the builder: the upgrade path stays visible while
   the visitor plays with the demo symbol. */
.lab-preview-note { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s4); margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4); border: 1px solid var(--gold);
  border-radius: var(--radius-sm); background: var(--gold-soft); }
.lab-preview-note p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.lab-preview-note b { color: var(--ink); }
.lab-preview-note .primary-button { flex: none; }
.lab-preview-err { color: var(--loss); }

/* The demo card: navy like the dashboard hero; a chain assembles and an
   equity curve draws in on a ~9s loop. */
.lab-demo { position: relative; padding: var(--s5) var(--s5) var(--s4);
  border-radius: var(--radius); background: linear-gradient(150deg, #1d3e63 0%, #254d79 100%);
  box-shadow: var(--shadow); }
.lab-demo-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
.lab-demo-unit { display: inline-flex; align-items: center; gap: 6px; }
.lab-demo-blk { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: #fff;
  font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.lab-demo-arrow { color: rgba(255, 255, 255, 0.5); font-family: var(--font-mono); font-size: 11px; }
.lab-demo-curve { width: 100%; height: 110px; display: block; margin: var(--s4) 0 var(--s2); }
.lab-demo-path { stroke: #8fd0d1; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; }
.lab-demo-stats { display: flex; gap: var(--s6); }
.lab-demo-stats span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6); }
.lab-demo-stats b { display: block; margin-top: 2px; font-size: 19px; font-weight: 600;
  color: #fff; font-variant-numeric: tabular-nums; }
.lab-demo-stats b.up { color: #8ff0bc; }
.lab-demo-cap { display: block; margin-top: var(--s3); font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45); }

/* Loop timeline (9s): chain units pop in one by one, the curve draws,
   the stats land, brief hold, fade, repeat. */
.lab-demo-unit { opacity: 0; animation: 9s ease-in-out infinite; }
.lab-demo-unit.u1 { animation-name: lab-demo-u1; }
.lab-demo-unit.u2 { animation-name: lab-demo-u2; }
.lab-demo-unit.u3 { animation-name: lab-demo-u3; }
.lab-demo-unit.u4 { animation-name: lab-demo-u4; }
@keyframes lab-demo-u1 { 0%, 2% { opacity: 0; transform: translateY(6px); } 6%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lab-demo-u2 { 0%, 11% { opacity: 0; transform: translateY(6px); } 15%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lab-demo-u3 { 0%, 20% { opacity: 0; transform: translateY(6px); } 24%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lab-demo-u4 { 0%, 29% { opacity: 0; transform: translateY(6px); } 33%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.lab-demo-path { stroke-dashoffset: 100; animation: lab-demo-draw 9s ease-in-out infinite; }
@keyframes lab-demo-draw { 0%, 38% { stroke-dashoffset: 100; opacity: 1; } 68% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { opacity: 0; } }
.lab-demo-stats span { opacity: 0; animation: lab-demo-stats 9s ease-in-out infinite; }
@keyframes lab-demo-stats { 0%, 70% { opacity: 0; transform: translateY(4px); } 76%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lab-demo-unit, .lab-demo-stats span { animation: none; opacity: 1; transform: none; }
  .lab-demo-path { animation: none; stroke-dashoffset: 0; }
}

/* Feature tiles + Learn strip under the hero */
.lab-land-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
@media (max-width: 920px) { .lab-land-tiles { grid-template-columns: 1fr; } }
.lab-land-tile { padding: var(--s4) var(--s5); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); background: #f7fcfc; }
.lab-land-tile span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gold-deep); }
.lab-land-tile p { margin: var(--s2) 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.lab-land-learn { margin-top: var(--s4); padding: var(--s4) var(--s5);
  border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink-soft);
  font-size: 14px; line-height: 1.5; }
.lab-land-learn b { color: var(--ink); }
.lab-substatus { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.lab-substatus a { color: var(--navy); cursor: pointer; text-decoration: underline; }

/* "?" help affordance on the page title */
.lab-help { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  margin-left: var(--s2); border: 1px solid var(--rule); border-radius: 50%; background: #f7fcfc;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--slate);
  cursor: help; vertical-align: middle; position: relative; }
.lab-help:hover, .lab-help:focus { border-color: var(--navy); color: var(--navy); outline: none; }
.lab-tip { position: absolute; top: 132%; left: 0; width: 300px; z-index: 5; display: none;
  padding: var(--s3); border: 1px solid var(--rule); border-radius: 4px; background: #f7fcfc;
  font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--ink-soft); }
.lab-help:hover .lab-tip, .lab-help:focus .lab-tip { display: block; }

/* Steps */
.lab-step { margin-bottom: var(--s5); }
.lab-step[hidden] { display: none; }
.lab-step-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--slate); margin: 0 0 var(--s3); }
.lab-step-h b { color: var(--ink); }
.lab-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lab-measure { min-width: 280px; font-size: 15px; padding: var(--s2) var(--s3); }
.lab-measure-blurb { color: var(--slate); font-size: 13.5px; margin: var(--s2) 0 0; min-height: 1.2em; }
.lab-chip { font-family: var(--font-body); font-size: 14px; padding: var(--s2) var(--s3);
  border: 1px solid var(--rule); border-radius: 4px; background: #f7fcfc; color: var(--ink);
  cursor: pointer; text-align: left; }
.lab-chip small { display: block; color: var(--slate); font-size: 12px; margin-top: 1px; }
.lab-chip:hover { border-color: var(--navy); }
.lab-chip.active { border-color: var(--navy); color: var(--navy); font-weight: 600; box-shadow: inset 0 0 0 1px var(--navy); }

.lab-slider { margin-top: var(--s3); }
.lab-slider label { display: block; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); margin-bottom: var(--s2); }
.lab-slider .row { display: flex; align-items: center; gap: var(--s3); }
.lab-slider input[type="range"] { flex: 1; accent-color: var(--navy); }
.lab-slider .val { font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  min-width: 52px; font-variant-numeric: tabular-nums; }
.lab-slider label.lab-check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.lab-slider label.lab-check input { accent-color: var(--navy); cursor: pointer; }
.lab-slider input[type="range"]:disabled { opacity: 0.4; }

/* Assembled formula — compact, one line (scrolls if it ever overflows) */
.lab-formula { border-top: 1px solid var(--rule); padding-top: var(--s4); margin-top: var(--s5); }
.lab-chain { display: flex; align-items: stretch; gap: 4px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.lab-block { border: 1px solid var(--rule); border-radius: 4px; padding: 3px 6px; background: #f7fcfc; white-space: nowrap; }
.lab-block .k { display: block; font-family: var(--font-mono); font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--slate); margin-bottom: 1px; }
.lab-block .v { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-arrow { align-self: center; color: var(--slate); font-family: var(--font-mono); font-size: 10px; }
.lab-chain-empty { color: var(--slate); font-style: italic; font-size: 14px; }

/* Result — headline uses the ledger signature (gold double rule) */
.lab-total { border-top: 1px solid var(--ink); border-bottom: 3px double var(--gold); padding: var(--s3) 0; margin: 0 0 var(--s3); }
.lab-figure { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.lab-figure .n { font-size: 14px; color: var(--slate); font-weight: 400; }
.lab-fig-sub { font-family: var(--font-mono); font-size: 14px; color: var(--slate); margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.lab-figure .up, .lab-fig-sub .up { color: var(--gain); } .lab-figure .down, .lab-fig-sub .down { color: var(--loss); }
.lab-chart { width: 100%; height: auto; display: block; margin-bottom: var(--s1); }
.lab-chart .axis { fill: var(--slate); font-family: var(--font-mono); font-size: 10px; }
.lab-chart .equity { fill: none; stroke: var(--gain); stroke-width: 1.6; }
.lab-chart .equity-fill { fill: var(--gain); opacity: 0.1; stroke: none; }
.lab-chart .zero { stroke: var(--slate); stroke-width: 0.5; stroke-dasharray: 3 3; }
.lab-cap { font-family: var(--font-mono); font-size: 11px; color: var(--slate); margin: 0 0 var(--s4); }
.lab-placeholder { color: var(--slate); font-style: italic; padding: var(--s6) 0; }
.lab-sel { font-family: var(--font-body); font-size: 14px; padding: var(--s1) var(--s2);
  border: 1px solid var(--rule); border-radius: 4px; background: #f7fcfc; color: var(--ink); }

table.lab-trades { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lab-trades th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--slate); border-bottom: 1px solid var(--ink); padding: var(--s2) var(--s2) var(--s2) 0; }
table.lab-trades td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding: var(--s2) var(--s2) var(--s2) 0; }
table.lab-trades td.up { color: var(--gain); } table.lab-trades td.down { color: var(--loss); }

/* Playbook */
.lab-save { display: flex; gap: var(--s2); margin: 0 0 var(--s4); }
.lab-save input { flex: 1; font-family: var(--font-body); font-size: 14px; padding: 0 var(--s3);
  border: 1px solid var(--rule); border-radius: 4px; background: #f7fcfc; color: var(--ink); }
.primary-button:disabled { opacity: 0.45; }
.lab-plays { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.lab-play { border: 1px solid var(--rule); border-radius: 4px; padding: var(--s3); display: flex;
  align-items: flex-start; gap: var(--s3); background: #f7fcfc; }
.lab-play:hover { border-color: var(--navy); }
.lab-play-load { flex: 1; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.lab-play-name { display: block; font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.lab-play-load:hover .lab-play-name { color: var(--navy); }
.lab-play-formula { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--slate); margin-top: 2px; }
.lab-play-rm { background: none; border: none; cursor: pointer; color: var(--slate); font-size: 16px; line-height: 1; padding: 0 var(--s1); }
.lab-play-rm:hover { color: var(--loss); }

/* Today's setups (morning momentum scan) */
.scan-panel { border: 1px solid var(--rule); border-radius: 4px; background: #f7fcfc;
  padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.scan-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.scan-pick { border: 1px solid var(--rule); border-radius: 4px; background: #ffffff; padding: var(--s3) var(--s4);
  cursor: pointer; transition: border-color 120ms, background 120ms, box-shadow 120ms; }
.scan-pick:hover { border-color: var(--gold); background: #f4fafa; }
.scan-pick:focus-visible { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 2px var(--gold-soft); }
.scan-head { margin: 0; display: flex; align-items: baseline; gap: var(--s3); }
.scan-sym { font-weight: 600; font-size: 16px; color: var(--ink); }
.scan-price { color: var(--slate); font-size: 13px; }
.scan-why { margin: var(--s2) 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }