/* chart-workspace.css — A Girl & Her Futures™
 * The simulated, TradingView-style chart workspace (shared/chart-workspace.js) and the
 * Lesson 7 screens built on it. Light, original artwork; labelled as a simulation. */

.cw-host{width:100%}
.cw{container-type:inline-size;position:relative;width:100%;background:var(--bg-ffffff,#FFFFFF);border:1.5px solid var(--ln-e3d3cb,#E3D3CB);border-radius:18px;overflow:hidden;font-family:var(--font-body);color:var(--fg-2c1810,#2C1810);box-shadow:0 10px 26px rgba(44,24,16,.06)}
.cw *{box-sizing:border-box}
.cw button{font-family:var(--font-body)}

/* Top toolbar */
.cw-top{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--ln-efe3dd,#EFE3DD);background:var(--bg-fffaf8,#FFFAF8);flex-wrap:wrap}
.cw-btn{display:inline-flex;align-items:center;gap:6px;height:34px;border:1px solid transparent;background:transparent;border-radius:9px;padding:0 9px;font-size:.86rem;font-weight:700;color:var(--fg-2c1810,#2C1810);cursor:pointer;white-space:nowrap}
.cw-btn i{font-style:normal;font-size:.95rem;line-height:1;width:auto;height:auto}
.cw-btn:hover{background:var(--bg-f1e6e1,#F1E6E1)}
.cw-btn:focus-visible,.cw-tool:focus-visible,.cw-wrow:focus-visible,.cw-res:focus-visible,.cw-tfmenu button:focus-visible,.cw-chart:focus-visible,.cw-hs:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px}
.cw-sym{border-color:var(--ln-e3d3cb,#E3D3CB);background:var(--bg-ffffff,#FFFFFF);padding:0 12px 0 9px}
.cw-sym b{font-weight:800;letter-spacing:.01em}
.cw-tfwrap{position:relative;display:flex}
.cw-tf{border-color:var(--ln-e3d3cb,#E3D3CB);background:var(--bg-ffffff,#FFFFFF)}
.cw-tf i{font-size:.7rem;color:var(--fg-8a7069,#8A7069)}
.cw-sim{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--fg-8a7069,#8A7069);background:var(--bg-f1e6e1,#F1E6E1);border-radius:999px;padding:4px 10px;white-space:nowrap}
.cw-tfmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:6;min-width:170px;background:var(--bg-ffffff,#FFFFFF);border:1px solid var(--ln-e3d3cb,#E3D3CB);border-radius:12px;box-shadow:0 14px 30px rgba(44,24,16,.16);padding:5px;display:flex;flex-direction:column;gap:2px}
.cw-tfmenu[hidden]{display:none}
.cw-tfmenu button{display:flex;align-items:baseline;gap:10px;border:0;background:transparent;border-radius:8px;padding:9px 10px;cursor:pointer;text-align:left;color:var(--fg-2c1810,#2C1810)}
.cw-tfmenu button b{font-weight:800;min-width:30px}
.cw-tfmenu button small{color:var(--fg-8a7069,#8A7069);font-size:.8rem}
.cw-tfmenu button:hover{background:var(--bg-fff6f2,#FFF6F2)}
.cw-tfmenu button[aria-selected="true"]{background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-b83d61,#B83D61)}

/* Middle: drawing toolbar · chart · watchlist */
.cw-mid{display:grid;grid-template-columns:44px minmax(0,1fr) 178px}
.cw-left{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-right:1px solid var(--ln-efe3dd,#EFE3DD);background:var(--bg-fffaf8,#FFFAF8);position:relative}
.cw-tool{width:34px;height:34px;border:1px solid transparent;background:transparent;border-radius:9px;font-size:1rem;font-weight:700;color:var(--fg-5a4740,#5A4740);cursor:pointer;display:grid;place-items:center;line-height:1}
.cw-tool:hover{background:var(--bg-f1e6e1,#F1E6E1)}
.cw-tool[aria-pressed="true"]{background:var(--bg-fde8ed,#FDE8ED);border-color:var(--ln-e0607a,#E0607A);color:var(--fg-b83d61,#B83D61)}
.cw-chart{position:relative;aspect-ratio:16/9;min-height:250px;max-height:380px;width:100%;cursor:crosshair;outline:none;touch-action:manipulation}
.cw-chart.placing{cursor:row-resize}
.cw-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:var(--font-body)}
.cw-legend{position:absolute;top:6px;left:10px;z-index:2;font-size:.78rem;color:var(--fg-5a4740,#5A4740);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 80px)}
.cw-legend b{color:var(--fg-2c1810,#2C1810);font-weight:800}
.cw-legend span{margin-left:6px;color:var(--fg-8a7069,#8A7069)}
.cw-hit{position:absolute;z-index:1;cursor:pointer}
.cw-hit-price{top:0;right:0;width:62px;bottom:22px}
.cw-hit-time{left:0;right:62px;bottom:0;height:22px}
.cw-placetip{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;margin:0;background:var(--bg-2c1810,#2C1810);color:var(--fg-ffffff,#FFFFFF);font-size:.78rem;font-weight:700;border-radius:999px;padding:5px 12px;white-space:nowrap;pointer-events:none;opacity:.92}
.cw-placetip[hidden]{display:none}

/* Chart drawing */
.cw-bg{fill:var(--fg-ffffff,#FFFFFF)}
.cw-grid{stroke:var(--fg-f3ece8,#F3ECE8);stroke-width:1}
.cw-axis{stroke:var(--fg-e3d3cb,#E3D3CB);stroke-width:1}
.cw-c line{stroke-width:1.2}
.cw-c.up line{stroke:var(--fg-2e9a8e,#2E9A8E)}.cw-c.up rect{fill:var(--fg-2e9a8e,#2E9A8E)}
.cw-c.down line{stroke:var(--dfg-d9536f,#D9536F)}.cw-c.down rect{fill:var(--dfg-d9536f,#D9536F)}
.cw-plabel,.cw-tlabel{font-size:11px;font-weight:600;fill:var(--fg-8a7069,#8A7069)}
.cw-xv,.cw-xhz{stroke:var(--fg-5a4740,#5A4740);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.cw-xtag{fill:var(--fg-2c1810,#2C1810)}.cw-xtext{font-size:11px;font-weight:700;fill:var(--fg-ffffff,#FFFFFF)}
.cw-prev{stroke:var(--fg-e0607a,#E0607A);stroke-width:2;stroke-dasharray:6 5}
.cw-hl line{stroke:var(--fg-5b53b8,#5B53B8);stroke-width:2.5}
.cw-hl rect{fill:var(--fg-5b53b8,#5B53B8)}.cw-hl text{font-size:11px;font-weight:800;fill:var(--fg-ffffff,#FFFFFF)}
.cw-target rect{fill:var(--fg-fff1e6,#FFF1E6);stroke:var(--fg-f5a857,#F5A857);stroke-width:1;stroke-dasharray:5 4;animation:cwGlow 1.8s ease-in-out infinite}
.cw-target line{stroke:var(--fg-f5a857,#F5A857);stroke-width:1.5;stroke-dasharray:3 4}
.cw-target text{font-size:12px;font-weight:800;fill:var(--fg-b5671d,#B5671D)}
@keyframes cwGlow{50%{fill:var(--fg-fde3c7,#FDE3C7)}}
.cw-ma{fill:none;stroke-width:1.6;opacity:.9}
.cw-junk{stroke-width:1.3;opacity:.75}
.cw-box{fill:rgba(127,119,221,.14);stroke:var(--fg-7f77dd,#7F77DD);stroke-width:1.2}
.cw-box.b{fill:rgba(224,96,122,.12);stroke:var(--fg-e0607a,#E0607A)}
.cw-tr{stroke:var(--fg-f5a857,#F5A857);stroke-width:2}.cw-tr.b{stroke:var(--fg-2e9a8e,#2E9A8E)}
.cw-note{font-size:12px;font-weight:800;fill:var(--fg-c2475f,#C2475F)}.cw-note.s{font-size:10px;fill:var(--fg-8a7069,#8A7069)}
.cw-pane{fill:var(--fg-fffaf8,#FFFAF8);stroke:var(--fg-efe3dd,#EFE3DD)}

/* Watchlist */
.cw-watch{border-left:1px solid var(--ln-efe3dd,#EFE3DD);background:var(--bg-fffaf8,#FFFAF8);padding:8px 6px;display:flex;flex-direction:column;gap:2px;position:relative}
.cw-wtitle{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-8a7069,#8A7069);padding:2px 6px 6px}
.cw-wrow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"s p" "s c";align-items:center;column-gap:6px;border:1px solid transparent;background:transparent;border-radius:9px;padding:6px 7px;cursor:pointer;text-align:left;color:var(--fg-2c1810,#2C1810)}
.cw-wrow:hover{background:var(--bg-f1e6e1,#F1E6E1)}
.cw-wsym{grid-area:s;font-weight:800;font-size:.84rem}
.cw-wpx{grid-area:p;font-size:.78rem;font-weight:600;text-align:right}
.cw-wchg{grid-area:c;font-size:.72rem;font-weight:700;text-align:right}
.cw-wchg.up{color:var(--fg-1f7a70,#1F7A70)}.cw-wchg.down{color:var(--dfg-b83a57,#B83A57)}

/* Symbol search */
.cw-search{position:absolute;inset:0;z-index:8;background:rgb(var(--bga-fffaf8,255 250 248) / .97);padding:14px;display:flex;flex-direction:column;gap:10px}
.cw-search[hidden]{display:none}
.cw-search-in{display:flex;align-items:center;gap:8px;border:2px solid var(--ln-e0607a,#E0607A);background:var(--bg-ffffff,#FFFFFF);border-radius:12px;padding:0 6px 0 12px}
.cw-search-in i{font-style:normal;font-size:1rem;line-height:1;width:auto;height:auto}
.cw-search-in input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:700 1rem var(--font-body);color:var(--fg-2c1810,#2C1810);padding:11px 0}
.cw-close{border:0;background:var(--bg-f1e6e1,#F1E6E1);border-radius:8px;width:32px;height:32px;cursor:pointer;color:var(--fg-5a4740,#5A4740);font-weight:800}
.cw-results{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
.cw-res{display:grid;grid-template-columns:110px 1fr;grid-template-areas:"b n" "b k";column-gap:12px;align-items:center;border:1px solid transparent;background:var(--bg-ffffff,#FFFFFF);border-radius:10px;padding:8px 12px;text-align:left;cursor:pointer;color:var(--fg-2c1810,#2C1810)}
.cw-res:hover{border-color:var(--ln-e8a0b4,#E8A0B4);background:var(--bg-fff6f2,#FFF6F2)}
.cw-res b{grid-area:b;font-weight:800}
.cw-res span{grid-area:n;font-size:.86rem}
.cw-res small{grid-area:k;font-size:.74rem;color:var(--fg-8a7069,#8A7069)}
.cw-none{margin:6px 4px;color:var(--fg-8a7069,#8A7069)}

/* Hotspots */
.cw-hslayer{position:absolute;inset:0;pointer-events:none;z-index:5}
.cw-hs{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid var(--ln-ffffff,#FFFFFF);background:var(--bg-7f77dd,#7F77DD);box-shadow:0 0 0 0 rgba(127,119,221,.5),0 2px 6px rgba(44,24,16,.25);cursor:pointer;pointer-events:auto;padding:0;animation:cwPulse 1.8s ease-out infinite}
.cw-hs.ess{width:26px;height:26px;margin:-13px 0 0 -13px;color:var(--fg-ffffff,#FFFFFF);font:900 .78rem/1 var(--font-body);display:grid;place-items:center;background:var(--bg-e0607a,#E0607A);box-shadow:0 0 0 0 rgba(224,96,122,.55),0 2px 6px rgba(44,24,16,.25)}
.cw-hs.seen{background:var(--bg-2e9a8e,#2E9A8E);color:transparent;animation:none;box-shadow:0 2px 6px rgba(44,24,16,.2)}
.cw-hs.seen::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-ffffff,#FFFFFF);font-size:10px;font-weight:900}
.cw-hs[hidden]{display:none}
@keyframes cwPulse{70%{box-shadow:0 0 0 10px rgba(224,96,122,0),0 2px 6px rgba(44,24,16,.25)}100%{box-shadow:0 0 0 0 rgba(224,96,122,0),0 2px 6px rgba(44,24,16,.25)}}

/* Wrong-tool highlight */
.cw-flash{animation:cwFlash 1.3s ease-out}
@keyframes cwFlash{0%,60%{box-shadow:0 0 0 3px var(--ln-f5a857,#F5A857);background:var(--bg-fff1e6,#FFF1E6)}}

/* See it: the tool card */
.cw-info{min-height:96px}
.cw-info-empty{margin:0;padding:16px 18px;border:1.5px dashed var(--ln-e3d3cb,#E3D3CB);border-radius:16px;color:var(--fg-8a7069,#8A7069);font-size:.95rem}
.lc-q-in .cw-card{border:1.5px solid var(--ln-e3d3cb,#E3D3CB);border-left:5px solid var(--ln-7f77dd,#7F77DD);border-radius:16px;padding:14px 18px;background:var(--bg-ffffff,#FFFFFF);display:flex;flex-direction:column;gap:6px;animation:lcIn .3s forwards;font-family:var(--font-body)}
.lc-q-in .cw-card.ess{border-left-color:var(--ln-e0607a,#E0607A)}
.cw-card small{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-b83d61,#B83D61)}
.lc-q-in .cw-card b{font-size:1.15rem;font-weight:800;color:var(--fg-2c1810,#2C1810)}
.lc-q-in .cw-card p{margin:0;font-size:.98rem;line-height:1.45;font-weight:500;color:var(--fg-5a4740,#5A4740)}
.cw-card p span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-8a7069,#8A7069);margin-bottom:1px}
.cw-pips{display:inline-flex;gap:4px;vertical-align:middle;margin-right:6px}
.cw-pips i{width:9px;height:9px;border-radius:50%;background:var(--bg-efe3dd,#EFE3DD)}
.cw-pips i.on{background:var(--bg-e0607a,#E0607A)}

/* Understand it: timeframe bar and candle count */
.cw-tfbar{display:flex;gap:6px;flex-wrap:wrap}
.cw-tfbar button{flex:1 1 60px;border:2px solid var(--ln-e3d3cb,#E3D3CB);background:var(--bg-ffffff,#FFFFFF);border-radius:12px;padding:9px 6px;font:800 1rem var(--font-body);color:var(--fg-2c1810,#2C1810);cursor:pointer}
.cw-tfbar button[aria-pressed="true"]{border-color:var(--ln-e0607a,#E0607A);background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-b83d61,#B83D61)}
.cw-tfbar button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.lc-q-in .cw-count{margin:-8px 0 0;font:500 .92rem/1.4 var(--font-body);color:var(--fg-5a4740,#5A4740)}
.cw-count b{font-weight:800;color:var(--fg-2c1810,#2C1810)}

/* Connect it */
.cw-cleanseg{max-width:320px}
.cw-dayli{display:block;margin:10px 0 6px;padding:12px 16px;border-radius:14px;background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-2c1810,#2C1810);font-weight:700;font-size:1.02rem}
.cw-dayli small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-b83d61,#B83D61);margin-bottom:2px}

/* Compact workspace (timeframes, clean vs cluttered): just the chart */
.cw-compact .cw-mid{grid-template-columns:minmax(0,1fr)}
.cw-compact .cw-left,.cw-compact .cw-watch,.cw-compact .cw-btn:not(.cw-sym):not(.cw-tf){display:none}
.cw-compact .cw-chart{aspect-ratio:2/1;max-height:320px}

/* Try it: tasks */
.cw-intro{margin-bottom:-6px}
.cw-taskbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cw-tasks-chip{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-ffffff,#FFFFFF);background:var(--bg-e0607a,#E0607A);border-radius:999px;padding:5px 12px}
.cw-steps{display:inline-flex;gap:5px}
.cw-steps i{width:26px;height:8px;border-radius:99px;background:var(--bg-efe3dd,#EFE3DD)}
.cw-steps i.on{background:var(--bg-2e9a8e,#2E9A8E)}.cw-steps i.now{background:var(--bg-e8a0b4,#E8A0B4)}
.cw-progress{font-size:.86rem;font-weight:700;color:var(--fg-5a4740,#5A4740);margin-left:auto}
.lc-q-in .cw-task{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:2px solid var(--ln-e0607a,#E0607A);background:var(--bg-fff6f3,#FFF6F3);border-radius:16px;padding:12px 16px;font-family:var(--font-body)}
.lc-q-in .cw-task.done{border-color:var(--ln-2e9a8e,#2E9A8E);background:var(--bg-e3f6f3,#E3F6F3)}
.cw-task-n{flex:none;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-ffffff,#FFFFFF);background:var(--bg-2c1810,#2C1810);border-radius:8px;padding:4px 9px}
.cw-task.done .cw-task-n{background:var(--bg-2e9a8e,#2E9A8E)}
.cw-task-text{flex:1 1 200px;font-weight:800;font-size:1.05rem;color:var(--fg-2c1810,#2C1810)}
.cw-hintbtn{border:1.5px solid var(--ln-e3d3cb,#E3D3CB);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:6px 14px;font:700 .86rem var(--font-body);color:var(--fg-5a4740,#5A4740);cursor:pointer}
.cw-hintbtn[hidden]{display:none}
.lc-q-in .cw-hinttext{margin:-10px 0 0;padding:10px 14px;border-radius:12px;background:var(--bg-fff1e6,#FFF1E6);color:var(--fg-5a4740,#5A4740);font:500 .95rem/1.45 var(--font-body)}
.cw-hinttext[hidden]{display:none}
.cw-fb{min-height:8px}
.cw-fb:empty{display:none}
.lc-q-in .cw-say p,.lc-q-in .cw-intro p{font:500 1rem/1.5 var(--font-body);color:var(--fg-2c1810,#2C1810)}
.lc-q-in .cw-say p b,.lc-q-in .cw-intro p b{font-weight:800}
.lc-q-in .cw-taskbar,.lc-q-in .cw-taskbar *{font-family:var(--font-body)}
.lc-q-in .cw-fb{margin-top:-10px}
.cw-say.good{background:var(--bg-e3f6f3,#E3F6F3);border-color:var(--ln-2e9a8e,#2E9A8E)}
.cw-say.bad{background:var(--dbg-fff6f2,#FFF6F2)}

/* Narrow workspace (phones): icons only, watchlist under the chart */
@container (max-width:620px){
  .cw-btn span{display:none}
  .cw-btn{padding:0 8px}
  .cw-sim{order:9;margin-left:0;width:100%;text-align:center;font-size:.68rem;padding:3px 8px}
  .cw-mid{grid-template-columns:40px minmax(0,1fr)}
  .cw-left{padding:6px 3px}
  .cw-tool{width:32px;height:32px}
  .cw-chart{aspect-ratio:auto;height:260px;min-height:0}
  .cw-compact .cw-chart{height:230px}
  .cw-watch{grid-column:1 / -1;border-left:0;border-top:1px solid var(--ln-efe3dd,#EFE3DD);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;padding:6px 8px}
  .cw-wtitle{grid-column:1 / -1;padding:2px 4px 2px}
  .cw-wrow{padding:5px 6px}
  .cw-legend span,.cw-placetip span{display:none}
  .cw-res{grid-template-columns:86px 1fr}
}

@media (prefers-reduced-motion:reduce){
  .cw-hs,.cw-target rect,.cw-flash,.lc-q-in .cw-card{animation:none}
  .lc-q-in .cw-card{opacity:1}
}

/* Lesson 7: the five essentials as clear buttons */
.cw-chips{display:flex;flex-wrap:wrap;gap:8px}
.cw-chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ln-e3d3cb,#E3D3CB);border-bottom-width:4px;background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:8px 14px;font:800 .92rem var(--font-body);color:var(--fg-2c1810,#2C1810);cursor:pointer}
.cw-chip i{font-style:normal}
.cw-chip:hover{border-color:var(--ln-e8a0b4,#E8A0B4)}
.cw-chip.on{border-color:var(--ln-e0607a,#E0607A);background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-b83d61,#B83D61)}
.cw-chip.seen:not(.on){border-color:var(--ln-2e9a8e,#2E9A8E);background:var(--bg-e3f6f3,#E3F6F3)}
.cw-chip.seen:not(.on)::after{content:"✓";font-weight:900;color:var(--fg-1f7a70,#1F7A70)}
.cw-chip:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px}
.cw-flash.cw-chart,.cw-chart.cw-flash{box-shadow:inset 0 0 0 3px var(--ln-f5a857,#F5A857)}