/* topdown.css — Phase 4 Top-Down Workspace, Analysis Board, Thesis Builder,
   zoom-out, before/after and scenario builder. Warm and feminine, a little
   more "guided trading desk": bigger chart, smaller instruction cards. */

.td-ws,.td-zoom,.td-ba,.td-sb{padding:22px 24px 20px;}
.td-title{margin-bottom:10px;}
.td-flow{display:flex;gap:7px;align-items:center;font-size:.62rem;font-weight:900;letter-spacing:.14em;color:var(--fg-c9b3aa,#c9b3aa);margin-bottom:8px;}
.td-flow b{color:var(--pink);}
.td-flow i{font-style:normal;color:var(--fg-e2d3cc,#e2d3cc);}

.td-steps{display:flex;align-items:stretch;gap:8px;margin-bottom:12px;}
.td-step{flex:1;text-align:left;border:1.5px solid var(--border);border-radius:14px;padding:9px 14px;background:var(--bg-ffffff,#fff);opacity:.6;cursor:pointer;font-family:var(--font-body);}
.td-step small{display:block;font-size:.6rem;font-weight:900;letter-spacing:.16em;color:var(--muted,#8a7068);}
.td-step span{font-weight:800;font-size:.92rem;color:var(--dark);}
.td-step.on{opacity:1;border-color:var(--pink-light);background:linear-gradient(135deg,var(--bg-ffffff,#fff),var(--pink-pale));box-shadow:0 6px 18px -10px rgb(var(--pink-rgb,244 130 154) / .6);}
.td-step.on small{color:var(--pink);}
.td-step.done{opacity:1;}
.td-step.done small{color:var(--teal,#2F8A7F);}
.td-step.done small::after{content:' · DONE ✓';}
.td-arrow{align-self:center;color:var(--fg-d8c4bb,#d8c4bb);font-weight:900;font-style:normal;}

.td-stage{position:relative;}
.td-tf{display:none;position:relative;}
.td-tf.on{display:block;}
.td-tf.td-in{animation:tdIn .5s ease-out;}
.td-tf.td-pulse .sc-wrap{box-shadow:0 0 0 4px var(--pink-pale),0 0 0 6px var(--pink-light);}
@keyframes tdIn{from{opacity:0;transform:scale(1.02);}to{opacity:1;transform:none;}}
.td-tf-tag{position:absolute;top:12px;left:14px;z-index:2;font-size:.62rem;font-weight:900;letter-spacing:.14em;color:var(--fg-ffffff,#fff);background:var(--ink-bg,var(--dark));border-radius:999px;padding:4px 10px;}
.td-chart .sc-wrap{border-radius:18px;}

.td-guide{margin-top:12px;}
.td-say{font-size:.95rem;line-height:1.5;color:var(--dark);min-height:1.4em;}
.td-say.good strong{color:var(--teal,#2F8A7F);}
.td-say.bad strong{color:var(--dfg-c2475f,#C2475F);}
.td-guide:has(.td-say.good) .ag-bubble,.td-guide:has(.td-say.good) .ag-bubble::before{background:var(--teal-pale);}
.td-guide:has(.td-say.bad) .ag-bubble,.td-guide:has(.td-say.bad) .ag-bubble::before{background:var(--dbg-fff1f4,#fff1f4);}

.td-task{margin-top:10px;}
.td-prompt{font-weight:800;font-size:.92rem;margin:4px 0 6px;color:var(--dark);}
.td-next,.td-go{display:block;margin:12px auto 0;border:none;border-radius:999px;background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);font-weight:800;font-size:.88rem;padding:11px 24px;cursor:pointer;font-family:var(--font-body);}
.td-go{background:var(--pink);letter-spacing:.04em;}

.td-panels{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;margin-top:16px;}
.td-panels.td-one{grid-template-columns:1fr;}
.td-panel{background:var(--cream);border-radius:18px;padding:14px 16px;}
.td-ph{font-size:.64rem;font-weight:900;letter-spacing:.16em;color:var(--muted,#8a7068);margin-bottom:8px;display:flex;justify-content:space-between;}
.td-grp{font-size:.62rem;font-weight:900;letter-spacing:.14em;color:var(--purple);margin:10px 0 4px;}
.td-board .td-grp:first-of-type{margin-top:0;}
.td-row{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:.86rem;border-bottom:1px dashed var(--ln-eadbd4,#eadbd4);}
.td-row:last-child{border-bottom:0;}
.td-ck{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;border:2px solid var(--ln-d9c6bd,#d9c6bd);color:transparent;}
.td-row.ok .td-ck{background:var(--teal,#2F8A7F);border-color:var(--teal,#2F8A7F);color:var(--fg-ffffff,#fff);}
.td-row.now .td-ck{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-pale);}
.td-row:not(.ok):not(.now){opacity:.55;}
.td-row b{font-weight:800;}
.td-row em{margin-left:auto;font-style:normal;font-weight:800;font-size:.8rem;color:var(--dark);text-align:right;}

.td-field{margin-bottom:9px;}
.td-field label{display:block;font-size:.62rem;font-weight:900;letter-spacing:.14em;color:var(--dark);margin-bottom:4px;}
.td-slot{border:1.5px dashed var(--ln-e3cfc6,#e3cfc6);border-radius:12px;padding:7px 11px;font-size:.82rem;color:var(--fg-b39b91,#b39b91);background:var(--bg-ffffff,#fff);min-height:34px;line-height:1.4;}
.td-field.ok .td-slot{border-style:solid;border-color:var(--teal,#2F8A7F);color:var(--dark);}
.td-field.now .td-slot{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-pale);}
.td-chip{display:inline-block;background:var(--teal-pale);color:var(--fg-1f6f66,#1f6f66);border-radius:999px;padding:2px 9px;margin:1px 4px 1px 0;font-weight:700;font-size:.76rem;}
.td-exec{margin-top:10px;font-size:.7rem;font-weight:900;letter-spacing:.1em;color:var(--purple);background:var(--purple-pale);border-radius:12px;padding:8px 12px;}

.td-output{background:linear-gradient(160deg,var(--bg-ffffff,#fff),var(--pink-pale) 70%,var(--peach-pale,#FEF3E4));border-radius:22px;padding:20px 22px;border:1.5px solid var(--ln-f6d0da,#f6d0da);margin-top:6px;}
.td-output h3{font-family:var(--font-display,Georgia,serif);font-size:1.45rem;margin:2px 0 12px;}
.td-out-k{font-size:.62rem;font-weight:900;letter-spacing:.16em;color:var(--pink);}
.td-out-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.td-out-c{background:var(--bg-ffffff,#fff);border-radius:14px;padding:10px 13px;}
.td-out-c small{display:block;font-size:.6rem;font-weight:900;letter-spacing:.14em;color:var(--muted,#8a7068);margin-bottom:4px;}
.td-out-c span{display:block;font-size:.86rem;line-height:1.45;color:var(--dark);}
.td-out-c span i{font-style:normal;color:var(--muted,#8a7068);font-size:.76rem;margin-right:6px;}
.td-out-c.inv{border-left:4px solid var(--ln-c2475f,#C2475F);}
.td-out-c.alt{border-left:4px solid var(--purple);}
.td-incomplete{background:var(--bg-fff7ec,#fff7ec);border:1.5px solid var(--ln-f6d3a5,#f6d3a5);border-radius:14px;padding:12px 14px;color:var(--fg-7a4b12,#7a4b12);font-size:.88rem;}
.td-incomplete b{display:block;font-size:.66rem;letter-spacing:.14em;color:var(--fg-b86e12,#B86E12);margin-bottom:3px;}
.td-save{margin-top:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.td-save button{border:none;border-radius:999px;background:var(--pink);color:var(--fg-ffffff,#fff);font-weight:800;padding:11px 20px;font-size:.88rem;cursor:pointer;font-family:var(--font-body);}
.td-save button:disabled{opacity:.6;cursor:default;}
.td-save span{font-size:.84rem;font-weight:700;color:var(--teal,#2F8A7F);}

/* zoom-out */
.td-zoom-tfs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.td-zoom-tfs span{font-size:.72rem;font-weight:900;letter-spacing:.1em;border-radius:999px;padding:5px 12px;background:var(--bg-ffffff,#fff);border:1.5px solid var(--border);color:var(--fg-b9a39a,#b9a39a);}
.td-zoom-tfs span.done{color:var(--dark);}
.td-zoom-tfs span.on{background:var(--ink-bg,var(--dark));border-color:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);}
.td-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.td-thumb{border:2px solid var(--border);border-radius:16px;background:var(--bg-ffffff,#fff);padding:8px;cursor:pointer;text-align:left;font-family:var(--font-body);}
.td-thumb span{font-weight:900;font-size:.8rem;letter-spacing:.08em;}
.td-thumb .sc-wrap{border:none;box-shadow:none;margin:0;}
.td-thumb.ok{border-color:var(--teal,#2F8A7F);background:var(--teal-pale);}
.td-thumb.no{border-color:var(--down-light,var(--pink-light));opacity:.6;}

/* before / after slider */
.td-ba-stage{position:relative;}
.td-ba-layer.after{position:absolute;inset:0;}
.td-ba-layer .sc-wrap{margin:0;}
.td-ba-tag{position:absolute;top:12px;z-index:3;font-size:.62rem;font-weight:900;letter-spacing:.14em;border-radius:999px;padding:4px 10px;background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);}
.td-ba-tag.l{left:14px;}
.td-ba-tag.r{right:14px;background:var(--pink);}
.td-ba-range{width:100%;margin:12px 0 4px;accent-color:var(--pink);}
.td-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.td-ba-rows{background:var(--cream);border-radius:16px;padding:12px 14px;}
.td-ba-rows small{display:block;font-size:.62rem;font-weight:900;letter-spacing:.14em;color:var(--muted,#8a7068);margin-bottom:6px;}
.td-ba-rows.a small{color:var(--pink);}
.td-ba-rows div{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;padding:5px 0;border-bottom:1px dashed var(--ln-eadbd4,#eadbd4);}
.td-ba-rows div:last-child{border:0;}
.td-ba-rows b{text-align:right;}

/* scenario builder */
.td-sb-chart{margin-bottom:6px;}
.td-sb-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.td-sb-card{border-radius:20px;padding:16px;}
.td-sb-card.pri{background:linear-gradient(160deg,var(--bg-effaf8,#effaf8),var(--bg-d9f2ee,#d9f2ee));border:1.5px solid var(--ln-b5e3dc,#b5e3dc);}
.td-sb-card.alt{background:linear-gradient(160deg,var(--bg-f5f3ff,#f5f3ff),var(--bg-e8e5fb,#e8e5fb));border:1.5px solid var(--ln-cfc9f3,#cfc9f3);}
.td-sb-h{font-family:var(--font-display,Georgia,serif);font-weight:700;font-size:1.08rem;margin-bottom:10px;}
.td-sb-slot{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;}
.td-sb-w{flex:none;width:52px;font-size:.66rem;font-weight:900;letter-spacing:.12em;color:var(--purple);padding-top:9px;}
.td-sb-fill{flex:1;background:rgb(var(--glass-rgb,255 255 255) / .75);border:1.5px dashed var(--ln-d6c6bf,#d6c6bf);border-radius:12px;padding:8px 11px;font-size:.84rem;color:var(--fg-b39b91,#b39b91);line-height:1.4;}
.td-sb-slot.now .td-sb-fill{border-color:var(--pink);color:var(--pink);box-shadow:0 0 0 3px var(--pink-pale);}
.td-sb-slot.ok .td-sb-fill{border-style:solid;border-color:transparent;background:var(--bg-ffffff,#fff);color:var(--dark);font-weight:700;}
.td-sb-pick{margin-top:12px;}
.td-sb-opts{display:grid;gap:7px;}
.td-sb-opt{text-align:left;background:var(--bg-ffffff,#fff);border:1.5px solid var(--border);border-radius:12px;padding:10px 13px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:var(--font-body);color:var(--dark);}
.td-sb-opt:hover:not(:disabled){border-color:var(--pink-light);}
.td-sb-opt.no{opacity:.5;text-decoration:line-through;}

@media (max-width:700px){
  .td-ws,.td-zoom,.td-ba,.td-sb{padding:16px 14px;}
  .td-panels,.td-out-grid,.td-ba-grid,.td-sb-cards{grid-template-columns:1fr;}
  .td-steps{flex-direction:column;}
  .td-arrow{display:none;}
  .td-step{padding:7px 12px;}
  .td-thumbs{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){.td-tf.td-in{animation:none;}}
.td-cmp{padding:22px 24px 20px;}
.td-cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.td-cmp-pane{position:relative;}
.td-cmp-pane .sc-wrap{margin:0;}
.td-cmp-tag{position:absolute;top:10px;left:12px;z-index:2;font-size:.62rem;font-weight:900;letter-spacing:.12em;background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-radius:999px;padding:4px 10px;}
.td-cmp-pane.b .td-cmp-tag{background:var(--pink);}
.td-cmp-note{font-size:.8rem;font-weight:700;color:var(--muted,#8a7068);text-align:center;margin-top:6px;}
@media (max-width:700px){.td-cmp{padding:16px 14px;}.td-cmp-grid{grid-template-columns:1fr;}}

/* ── Section 2: Range Map, zones, equilibrium, range toggle ── */
.td-stage-row.has-rm{display:grid;grid-template-columns:1fr 210px;gap:14px;align-items:stretch;}
.td-rm{background:var(--cream);border-radius:18px;padding:12px 12px 14px;display:flex;flex-direction:column;}
.td-rm.dim{opacity:.35;}
.td-rm-pair{display:grid;gap:10px;grid-template-rows:1fr 1fr;}
.rm-h{font-size:.6rem;font-weight:900;letter-spacing:.16em;color:var(--muted,#8a7068);margin-bottom:8px;}
.rm-bar{position:relative;flex:1;min-height:230px;display:flex;flex-direction:column;border-radius:12px;overflow:visible;}
.rm-door{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;font-weight:900;letter-spacing:.06em;color:var(--purple);padding:5px 8px;border:2px solid var(--purple);border-radius:8px;background:var(--bg-ffffff,#fff);z-index:1;}
.rm-door b{color:var(--dark);font-size:.72rem;}
.rm-zone{flex:1;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:900;letter-spacing:.12em;margin:2px 0;border-radius:8px;}
.rm-zone.prem{background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-c2475f,#C2475F);}
.rm-zone.disc{background:var(--bg-e8f8f6,#E8F8F6);color:var(--fg-2f8a7f,#2F8A7F);}
.rm-zone.none span{max-width:62%;}
.rm-zone.none{background:repeating-linear-gradient(135deg,var(--bg-ffffff,#fff),var(--bg-ffffff,#fff) 8px,var(--bg-f6eee9,#f6eee9) 8px,var(--bg-f6eee9,#f6eee9) 16px);color:var(--fg-b39b91,#b39b91);text-align:center;padding:0 8px;letter-spacing:.04em;font-weight:700;}
.rm-eq{position:relative;z-index:1;background:linear-gradient(90deg,transparent,var(--cream) 30%);display:flex;justify-content:space-between;font-size:.6rem;font-weight:900;letter-spacing:.08em;color:var(--purple);border-top:2px dashed var(--purple);padding:3px 4px 0;}
.rm-eq b{color:var(--dark);}
.rm-dot{position:absolute;left:-4px;right:-4px;transform:translateY(50%);display:flex;align-items:center;gap:6px;z-index:3;transition:bottom .8s cubic-bezier(.3,1.2,.4,1);pointer-events:none;}
.rm-dot i{width:14px;height:14px;border-radius:50%;background:var(--ink-bg,var(--dark));border:3px solid var(--ln-ffffff,#fff);box-shadow:0 2px 8px rgba(44,24,16,.35);flex:none;}
.rm-dot span{font-size:.66rem;font-weight:800;background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-radius:999px;padding:2px 8px;white-space:nowrap;}
.rm-obj{position:absolute;left:-8px;transform:translateY(50%);font-size:.62rem;font-weight:900;color:var(--fg-b86e12,#B86E12);background:var(--bg-fef3e4,#FEF3E4);border-radius:999px;padding:2px 8px;z-index:2;}
.rm-room{position:absolute;right:30px;width:3px;background:var(--bg-f5a857,#F5A857);border-radius:2px;z-index:0;}
.rm-room span{position:absolute;top:50%;right:8px;transform:translateY(-50%);white-space:nowrap;font-size:.64rem;font-weight:900;color:var(--fg-b86e12,#B86E12);background:var(--bg-ffffff,#fff);border-radius:999px;padding:2px 7px;box-shadow:0 2px 6px rgba(44,24,16,.12);}
.td-rm.big{max-width:340px;margin:0 auto;}
.td-rm.big .rm-bar{min-height:300px;}
.td-eq{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--cream);border-radius:14px;padding:10px 12px;}
.td-eq span{font-size:.72rem;font-weight:900;letter-spacing:.1em;color:var(--muted,#8a7068);}
.td-eq span b{color:var(--dark);font-size:.9rem;margin-left:4px;}
.td-eq label{font-size:.72rem;font-weight:900;letter-spacing:.1em;color:var(--purple);display:flex;align-items:center;gap:6px;}
.td-eq input{width:110px;border:2px solid var(--pink-light);border-radius:10px;padding:6px 9px;font-size:.95rem;font-weight:700;font-family:var(--font-body);}
.td-eq button{border:none;border-radius:999px;background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);font-weight:800;padding:8px 16px;cursor:pointer;font-family:var(--font-body);}
.td-eq-tap .sc-svg{cursor:crosshair;}
.td-rt-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.td-rt-tabs button{border:1.5px solid var(--border);background:var(--bg-ffffff,#fff);border-radius:999px;padding:7px 14px;font-weight:900;font-size:.74rem;letter-spacing:.08em;cursor:pointer;font-family:var(--font-body);color:var(--dark);}
.td-rt-tabs button.on{background:var(--ink-bg,var(--dark));border-color:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);}
.td-out-sentence{font-family:var(--font-display,Georgia,serif);font-size:1.06rem;line-height:1.55;margin:0 0 12px;color:var(--dark);}
.td-out-sentence b{color:var(--pink);font-weight:700;}
@media (max-width:760px){.td-stage-row.has-rm{grid-template-columns:1fr;}.td-rm-pair{grid-template-rows:none;grid-template-columns:1fr 1fr;}.rm-bar{min-height:200px;}}
.td-cmp-grid.three{grid-template-columns:repeat(3,1fr);}
.td-cmp-pane.c .td-cmp-tag{background:var(--purple);}
@media (max-width:700px){.td-cmp-grid.three{grid-template-columns:1fr;}}