/* ──────────────────────────────────────────────────────────────────────────
   Tim Edge Learn — styling for everything in learn-tools.js.

   Shared by BOTH readers: /learn (the article) and /learn/book (the visual
   book). It lives here and not inside either page because a tool that looks
   right in one and broken in the other is the exact failure this prevents.
   Colour tokens (--ink, --line2, --violet …) come from the host page.
   ────────────────────────────────────────────────────────────────────────── */
  /* ── 3D liquidity landscape ── */
  .l3{position:relative;background:radial-gradient(120% 100% at 50% 0%,#0E1220,#06070B)}
  .l3-c{display:block;width:100%;height:360px;cursor:grab;touch-action:none}
  .l3-c:active{cursor:grabbing}
  .l3-ui{position:absolute;top:13px;left:14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .l3-b{padding:7px 12px;border-radius:8px;border:1px solid var(--line2);background:rgba(10,12,18,.72);
        backdrop-filter:blur(8px);color:var(--ink2);font:600 11.5px/1 var(--sans);cursor:pointer;transition:.15s}
  .l3-b:hover{color:var(--ink)}
  .l3-b.on{border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.24);color:#fff}
  .l3-hint{font-size:10.5px;color:var(--ink3);margin-left:4px}
  .l3-cap{padding:14px 18px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--ink2);
          background:var(--panel)}
  .l3-cap b{color:#fff}
  @media (max-width:700px){ .l3-c{height:280px} }

  /* ── drawn figures ── */
  .figbox{border:1px solid var(--line2);border-radius:14px;background:#090B10;padding:16px 18px}
  .fg{width:100%;height:auto;display:block;overflow:visible}
  .fg-l{font:800 9.5px var(--sans);letter-spacing:.14em;fill:var(--ink3)}
  .fg-s{font:400 11px var(--sans);fill:var(--ink3)}
  .fg-t{font:600 12px var(--sans);fill:var(--ink)}
  .fg-w{font:700 12px var(--sans);fill:var(--gold)}
  .fg-w.hot{fill:var(--lgreen)}
  .fg-dot circle{fill:rgba(139,92,246,.55)}
  .fg-body{fill:rgba(52,210,123,.34);stroke:var(--lgreen);stroke-width:1.3}
  .fg-wick{stroke:var(--lgreen);stroke-width:1.6}
  .fg-ar{stroke:var(--ink3);stroke-width:1.4;fill:none}
  .fg-arh{fill:var(--ink3)}
  .fg-ar2{stroke:var(--gold);stroke-width:1.4;fill:none;stroke-dasharray:3 3}
  .fg-arh2{fill:var(--gold)}
  .fg-zone{fill:rgba(139,92,246,.09);stroke:rgba(139,92,246,.34);stroke-width:1}
  .fg-zone2{fill:rgba(236,72,153,.09);stroke:rgba(236,72,153,.34);stroke-width:1}
  .fg-px{fill:none;stroke:#C9D4E8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .fg-px.hot{stroke:var(--gold)}
  .fg-div{stroke:var(--line2);stroke-width:1}
  .fg-lvl{stroke:var(--line2);stroke-width:1;stroke-dasharray:4 4}
  .fg-ask{fill:rgba(251,90,110,.22);stroke:rgba(251,90,110,.5);stroke-width:1}
  .fg-bid{fill:rgba(52,210,123,.22);stroke:rgba(52,210,123,.5);stroke-width:1}
  .fg-gap{stroke:var(--gold);stroke-width:1.6;stroke-dasharray:3 3}

  /* ── auction ── */
  .au{padding:20px 18px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
  .au-side{text-align:center}
  .au-side i{display:block;font-style:normal;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
  .au-side b{display:block;font:800 30px/1.2 var(--mono);margin:4px 0 10px}
  .au-side.sell b{color:#FF9AA8} .au-side.buy b{color:#7FE6B0}
  .au-side input{width:100%;accent-color:var(--violet)}
  .au-mid{text-align:center;min-width:150px}
  .au-gap{font:800 15px/1.2 var(--sans);color:var(--ink3);border:1px dashed var(--line2);border-radius:9px;padding:11px 13px}
  .au-gap.on{color:#fff;border-style:solid;border-color:rgba(52,210,123,.6);background:rgba(52,210,123,.16)}
  .au-sub{font-size:10.5px;color:var(--ink3);margin-top:7px}
  .au-cap{grid-column:1/-1;font-size:13.5px;line-height:1.55;color:var(--ink2);border-top:1px solid var(--line);padding-top:13px}
  .au-cap b{color:#fff}

  /* ── effort vs result ── */
  .ef{padding:16px 18px 18px}
  .ef-tabs{display:flex;gap:7px;margin-bottom:15px}
  .ef-t{padding:8px 15px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);
        color:var(--ink3);font:700 12px/1 var(--sans);cursor:pointer;transition:.15s}
  .ef-t.on{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.16);color:#fff}
  .ef-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .ef-body i{display:block;font-style:normal;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
  .ef-bar{height:26px;border-radius:6px;background:rgba(52,210,123,.16);overflow:hidden}
  .ef-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,rgba(52,210,123,.6),rgba(52,210,123,.25))}
  .ef-eff b{display:block;font:600 12.5px/1.4 var(--sans);color:var(--ink2);margin-top:9px}
  .ef-svg{width:100%;height:92px;display:block}
  .ef-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:all .3s}
  .ef-word{display:block;font:700 13px/1 var(--sans);margin-top:6px}
  .ef-cap{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--ink2)}
  .ef-cap b{color:#fff}

  /* ── absorption ── */
  .ab{padding:18px}
  .ab-top{display:flex;gap:26px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
  .ab-top i{display:block;font-style:normal;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
  .ab-top b{font:800 23px/1.2 var(--mono)}
  .ab-tg{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);cursor:pointer}
  .ab-lvl{display:grid;grid-template-columns:210px 1fr 60px;gap:12px;align-items:center;margin-bottom:14px}
  .ab-lab{font:600 11.5px/1 var(--sans);color:var(--ink3)}
  .ab-bar{height:26px;border-radius:6px;background:rgba(251,90,110,.10);overflow:hidden}
  .ab-bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(251,90,110,.62),rgba(251,90,110,.24));transition:width .25s}
  .ab-left{font:700 14px/1 var(--mono);text-align:right}
  .ab-go{padding:10px 16px;border-radius:9px;border:1px solid rgba(52,210,123,.42);background:rgba(52,210,123,.12);
         color:#8CEBBB;font:700 13px/1 var(--sans);cursor:pointer}
  .ab-go:hover{background:rgba(52,210,123,.2)}
  .ab-cap{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--ink2)}
  .ab-cap b{color:#fff}

  /* ── queue ── */
  .qu{padding:18px}
  .qu-lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
  .qu-r{display:grid;grid-template-columns:82px 74px 1fr 62px;gap:11px;align-items:center;margin-bottom:8px;
        padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.028);transition:.2s}
  .qu-r.done{opacity:.42}
  .qu-r .n{font:700 12.5px/1 var(--sans)}
  .qu-r .t{font:600 11px/1 var(--mono);color:var(--ink3)}
  .qu-r .b{height:18px;border-radius:5px;background:rgba(52,210,123,.13);overflow:hidden}
  .qu-r .b i{display:block;height:100%;background:linear-gradient(90deg,rgba(52,210,123,.65),rgba(52,210,123,.3));transition:width .3s}
  .qu-r .q{font:700 11.5px/1 var(--mono);color:var(--ink2);text-align:right}
  .qu-go,.qu-rs{padding:9px 15px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);
                color:var(--ink);font:600 12.5px/1 var(--sans);cursor:pointer;margin-right:7px;margin-top:6px}
  .qu-go{border-color:rgba(251,90,110,.42);background:rgba(251,90,110,.1);color:#FFA3AF}
  .qu-cap{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--ink2)}
  .qu-cap b{color:#fff}

  @media (max-width:700px){
    .au{grid-template-columns:1fr;text-align:center}
    .ef-body{grid-template-columns:1fr}
    .ab-lvl{grid-template-columns:1fr}
  }

  /* ── order book tool ── */
  .ob{padding:16px 18px 18px}
  .ob-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
  .ob-head i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
  .ob-px{font:800 30px/1.1 var(--mono)}
  .ob-moved{font:700 13px/1 var(--sans);color:var(--gold)}
  .ob-terms{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ink3)}
  .ob-sw{width:34px;height:19px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);position:relative;cursor:pointer}
  .ob-sw::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--ink3);transition:.16s}
  .ob-sw.on{background:rgba(139,92,246,.3);border-color:rgba(139,92,246,.6)}
  .ob-sw.on::after{left:18px;background:var(--violet)}
  .ob-row{display:grid;grid-template-columns:62px 1fr 46px;align-items:center;gap:11px;height:27px;
          padding:0 8px;border-radius:6px;cursor:pointer;transition:background .14s}
  .ob-row:hover{background:rgba(255,255,255,.045)}
  .ob-row .p{font:700 14px/1 var(--mono);text-align:right}
  .ob-row.ask .p{color:#FF9AA8} .ob-row.bid .p{color:#7FE6B0}
  .ob-row .bw{height:17px;position:relative}
  .ob-row .bw i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;transition:width .18s}
  .ob-row.ask .bw i{background:linear-gradient(90deg,rgba(251,90,110,.6),rgba(251,90,110,.2))}
  .ob-row.bid .bw i{background:linear-gradient(90deg,rgba(52,210,123,.6),rgba(52,210,123,.2))}
  .ob-row .q{font:700 13px/1 var(--mono);color:var(--ink)}
  .ob-row.best{background:rgba(255,255,255,.055)}
  .ob-row.hit{animation:obhit .4s ease}
  @keyframes obhit{0%{background:rgba(232,160,32,.45)}100%{background:transparent}}
  .ob-spread{height:26px;display:flex;align-items:center;padding-left:81px}
  .ob-spread span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
  .ob-cap{font-size:13.5px;line-height:1.55;color:var(--ink2);min-height:40px;margin:12px 0 14px;
          border-top:1px solid var(--line);padding-top:12px}
  .ob-cap b{color:#fff} .ob-cap em{color:var(--gold);font-style:normal}
  .ob-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .ob-ctl label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink3);margin-right:4px}
  .ob-ctl input{width:92px;accent-color:var(--violet)}
  .ob-qtyv{font:700 13px/1 var(--mono);color:var(--ink);min-width:20px}
  .ob-b{padding:8px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);
        color:var(--ink2);font:600 12px/1 var(--sans);cursor:pointer;transition:.15s}
  .ob-b:hover{color:var(--ink);background:rgba(255,255,255,.05)}
  .ob-b.buy{border-color:rgba(52,210,123,.42);color:#8CEBBB;background:rgba(52,210,123,.1)}
  .ob-b.sell{border-color:rgba(251,90,110,.42);color:#FFA3AF;background:rgba(251,90,110,.1)}


  /* ── extra figure primitives (added for the visual book) ── */
  .fg-n{font:700 13px var(--mono);fill:var(--ink)}
  .fg-n.up{fill:var(--lgreen)} .fg-n.dn{fill:var(--lred)} .fg-n.big{font-size:19px}
  .fg-t2{font:600 11px var(--sans);fill:var(--ink2)}
  .fg-box{fill:rgba(255,255,255,.028);stroke:var(--line2);stroke-width:1}
  .fg-box.hot{fill:rgba(232,160,32,.10);stroke:rgba(232,160,32,.45)}
  .fg-box.vio{fill:rgba(139,92,246,.10);stroke:rgba(139,92,246,.4)}
  .fg-bar{fill:rgba(139,92,246,.45)}
  .fg-bar.buy{fill:rgba(52,210,123,.5)} .fg-bar.sell{fill:rgba(251,90,110,.5)}
  .fg-bar.eaten{fill:rgba(232,160,32,.6)} .fg-bar.mute{fill:rgba(255,255,255,.09)}
  .fg-ghost{fill:none;stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3}
  .fg-hid{fill:rgba(139,92,246,.13);stroke:rgba(139,92,246,.38);stroke-width:1;stroke-dasharray:4 3}
  .fg-node{fill:rgba(139,92,246,.13);stroke:rgba(139,92,246,.4);stroke-width:1}
  .fg-link{stroke:var(--line2);stroke-width:1;fill:none}
  .fg-up{stroke:var(--lgreen);stroke-width:2;fill:none} .fg-uph{fill:var(--lgreen)}
  .fg-dn{stroke:var(--lred);stroke-width:2;fill:none}   .fg-dnh{fill:var(--lred)}
  .fg-yes{fill:var(--lgreen);font:700 13px var(--sans)}
  .fg-not{fill:var(--lred);font:700 13px var(--sans)}
  .fg-water{stroke:rgba(139,92,246,.55);stroke-width:1.4;stroke-dasharray:5 4}
  .fg-l.br{fill:rgba(255,255,255,.62)}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   Only the values that were hard-coded for a dark background need saying
   again — everything else rides on the host page's tokens. Set
   data-theme="light" on <html>.
   ══════════════════════════════════════════════════════════════════════════ */
  /* figures */
html[data-theme="light"] .figbox{background:#FFFFFF}
html[data-theme="light"] .fg-px{stroke:#2C3648}
html[data-theme="light"] .fg-l.br{fill:rgba(12,18,32,.60)}
html[data-theme="light"] .fg-box{fill:rgba(12,18,32,.035)}
html[data-theme="light"] .fg-box.hot{fill:rgba(232,160,32,.14);stroke:rgba(169,112,11,.5)}
html[data-theme="light"] .fg-box.vio{fill:rgba(109,59,239,.09);stroke:rgba(109,59,239,.36)}
html[data-theme="light"] .fg-bar{fill:rgba(109,59,239,.42)}
html[data-theme="light"] .fg-bar.buy{fill:rgba(14,143,83,.46)}
html[data-theme="light"] .fg-bar.sell{fill:rgba(206,51,70,.44)}
html[data-theme="light"] .fg-bar.eaten{fill:rgba(207,138,16,.62)}
html[data-theme="light"] .fg-bar.mute{fill:rgba(12,18,32,.13)}
html[data-theme="light"] .fg-dot circle{fill:rgba(109,59,239,.5)}
html[data-theme="light"] .fg-zone{fill:rgba(109,59,239,.07);stroke:rgba(109,59,239,.3)}
html[data-theme="light"] .fg-zone2{fill:rgba(219,39,119,.07);stroke:rgba(219,39,119,.3)}
html[data-theme="light"] .fg-ask{fill:rgba(206,51,70,.14);stroke:rgba(206,51,70,.42)}
html[data-theme="light"] .fg-bid{fill:rgba(14,143,83,.15);stroke:rgba(14,143,83,.42)}
html[data-theme="light"] .fg-body{fill:rgba(14,143,83,.26)}
html[data-theme="light"] .fg-hid{fill:rgba(109,59,239,.10);stroke:rgba(109,59,239,.34)}
html[data-theme="light"] .fg-node{fill:rgba(109,59,239,.09);stroke:rgba(109,59,239,.34)}

/* order book */
html[data-theme="light"] .ob-row:hover{background:rgba(12,18,32,.05)}
html[data-theme="light"] .ob-row.best{background:rgba(12,18,32,.055)}
html[data-theme="light"] .ob-row.ask .p{color:#C22B3E}
html[data-theme="light"] .ob-row.bid .p{color:#0B7B4B}
html[data-theme="light"] .ob-row.ask .bw i{background:linear-gradient(90deg,rgba(206,51,70,.52),rgba(206,51,70,.16))}
html[data-theme="light"] .ob-row.bid .bw i{background:linear-gradient(90deg,rgba(14,143,83,.5),rgba(14,143,83,.16))}
html[data-theme="light"] .ob-b.buy{color:#0B7B4B;background:rgba(14,143,83,.1)}
html[data-theme="light"] .ob-b.sell{color:#C22B3E;background:rgba(206,51,70,.1)}
html[data-theme="light"] .ob-b:hover{background:rgba(12,18,32,.05)}
html[data-theme="light"] .ob-cap b{color:var(--ink)}
html[data-theme="light"] .ob-cap em{color:#8A5A05}
@keyframes obhit-light{0%{background:rgba(232,160,32,.4)}100%{background:transparent}}
html[data-theme="light"] .ob-row.hit{animation:obhit-light .4s ease}

/* auction · effort · absorption · queue */
html[data-theme="light"] .au-side.sell b{color:#C22B3E}
html[data-theme="light"] .au-side.buy b{color:#0B7B4B}
html[data-theme="light"] .au-cap b{color:var(--ink)}
html[data-theme="light"] .ef-cap b{color:var(--ink)}
html[data-theme="light"] .ab-cap b{color:var(--ink)}
html[data-theme="light"] .qu-cap b{color:var(--ink)}
html[data-theme="light"] .l3-cap b{color:var(--ink)}
html[data-theme="light"] .ab-go{color:#0B7B4B}
html[data-theme="light"] .qu-go{color:#C22B3E}
html[data-theme="light"] .qu-r{background:rgba(12,18,32,.035)}
html[data-theme="light"] .ef-bar{background:rgba(14,143,83,.14)}
html[data-theme="light"] .ef-bar span{background:linear-gradient(90deg,rgba(14,143,83,.5),rgba(14,143,83,.2))}

/* the 3D landscape keeps its dark canvas on purpose — it reads as a screen
   inside the page, and its geometry is drawn in light blue on black */
html[data-theme="light"] .l3-cap{background:var(--panel)}