/* Learn page — interactive explainers. */

section > .eyebrow + h2{margin-bottom:var(--gap-sm)}

/* ---------- long vs short ---------- */
.ls-demo{margin-top:var(--gap-lg);display:grid;gap:18px;max-width:720px}
.ls-chart{width:100%;height:auto;color:var(--text-on-light-dim);display:block}

.ls-candle .ls-wick{stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.ls-candle .ls-body{stroke:currentColor;stroke-width:1}
.ls-candle.up{color:#b98cff}
.ls-candle.up .ls-body{fill:#b98cff}
.ls-candle.down{color:#8a7fae}
.ls-candle.down .ls-body{fill:#544c74}

.ls-zone{fill:rgba(111,240,173,.13);stroke:rgba(111,240,173,.4);stroke-width:1}
.ls-entry-line{stroke:#efeafc;stroke-opacity:.6;stroke-width:1.3}
.ls-entry-tag rect{fill:rgba(11,7,16,.92);stroke:#efeafc;stroke-opacity:.5;stroke-width:1}
.ls-entry-tag text{font:8px var(--font-mono);letter-spacing:.08em;fill:#efeafc}
.ls-now{fill:#b98cff;stroke:var(--paper);stroke-width:2}

.ls-result{font:13.5px/1.5 var(--font-body);color:var(--text-on-light-dim);max-width:52ch}
.ls-result b{color:var(--text-on-light);font-weight:600}
.ls-result .ls-gain{display:inline-block;margin-left:6px;font:700 12px var(--font-mono);color:#7cf7b2;
  border:1px solid rgba(124,247,178,.4);border-radius:999px;padding:2px 9px;background:rgba(124,247,178,.1)}

/* toggle-in on render */
.ls-candle{opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease);transition-delay:calc(var(--i,0) * 24ms)}
.ls-candle.in{opacity:1;transform:none}
.ls-zone{opacity:0;transition:opacity .4s var(--ease) .15s}
.ls-zone.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ls-candle,.ls-zone{transition:none;opacity:1;transform:none}
}

.ls-toggle{display:flex;gap:12px}
.ls-toggle .tab-btn{flex:1;justify-content:center;gap:8px;font-size:14px}
.ls-toggle .tab-btn strong{font-size:11px}
.ls-toggle .tab-btn.active{color:var(--text-on-light)}

/* ---------- candle explorer ---------- */
.candle-explorer{margin-top:var(--gap-lg);display:grid;grid-template-columns:220px 200px 1fr;gap:32px;align-items:center}
@media (max-width:860px){.candle-explorer{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}}
.candle-explorer .tab-list{align-self:stretch}
@media (max-width:860px){.candle-explorer .tab-list{flex-direction:row;flex-wrap:wrap;justify-content:center}}

.candle-art{width:200px;height:auto;overflow:visible}
.candle-art .c-part{transition:opacity var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease);opacity:.28}
.candle-art .c-body{fill:var(--gold-bright)}
.candle-art .c-wick{stroke:var(--text-on-dark);stroke-width:3}
.candle-art .c-open{stroke:var(--accent2-bright);stroke-width:3}
.candle-art .c-close{stroke:var(--gold-bright);stroke-width:3}
.candle-art .c-high,.candle-art .c-low{fill:var(--gold-bright)}
.candle-art .c-part.is-active{opacity:1;filter:drop-shadow(0 0 8px rgba(183,124,255,.8));animation:pulse-soft 1.6s ease-in-out infinite}
@keyframes pulse-soft{0%,100%{filter:drop-shadow(0 0 6px rgba(183,124,255,.55))}50%{filter:drop-shadow(0 0 14px rgba(183,124,255,.95))}}
.candle-info h3{font-size:20px;margin-bottom:8px}
.candle-info p{font-size:14.5px;max-width:40ch}
@media (max-width:860px){.candle-info p{margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.candle-art .c-part.is-active{animation:none}}

/* ---------- exposure bars ---------- */
.exposure{margin-top:var(--gap-lg);display:grid;gap:16px;max-width:640px}
.exposure-row{display:grid;grid-template-columns:180px 1fr 90px;gap:14px;align-items:center;font-size:13px;color:var(--text-on-dark-dim)}
.exposure-row .mono{font-family:var(--font-mono);font-size:12px;color:var(--text-on-dark);text-align:right}
.ex-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.ex-fill{display:block;height:100%;width:0;border-radius:999px;transition:width 1.3s var(--ease-soft)}
.ex-deposit{background:var(--accent2)}
.ex-position{background:linear-gradient(90deg,var(--gold-bright),var(--gold))}
.ex-risk{background:#c2455f}
.exposure.is-visible .ex-deposit{width:12%}
.exposure.is-visible .ex-position{width:100%}
.exposure.is-visible .ex-risk{width:4%}
@media (max-width:620px){.exposure-row{grid-template-columns:1fr;gap:6px}.exposure-row .mono{text-align:left}}
@media (prefers-reduced-motion:reduce){.ex-fill{transition:none}}

/* ---------- trade sequence ---------- */
.trade-seq{margin-top:var(--gap-lg);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:940px){.trade-seq{grid-template-columns:1fr;gap:24px}}
.seq-chart{width:100%;height:auto;color:var(--text-on-light)}
.seq-chart text{font:10px var(--font-mono);fill:var(--text-on-light-dim);letter-spacing:.08em}
.seq-chart .seq-path{stroke:var(--gold-bright)}
.seq-chart .seq-entry{stroke:var(--gold-bright);stroke-width:1.5}
.seq-chart .seq-stop{stroke:#c2455f;stroke-width:1.5;stroke-dasharray:5 4}
.seq-chart .seq-target{stroke:#2f9e6e;stroke-width:1.5;stroke-dasharray:5 4}
.seq-steps{margin:0;padding-left:20px;display:grid;gap:12px}
.seq-steps li{font-size:14px;color:var(--text-on-light-dim);line-height:1.55}
.seq-steps strong{color:var(--text-on-light)}