/* tools.css - the Tools section and the Guides hub (TOOLS_PROMPT.md T3, 2026-10-20): design B "On the desk" with three
   parts of A (TL-8), on top of site.css and guide.css, which stay unchanged (TL-7: theming, sentence case, spacing and
   grouping as the home page). Nothing in site.css is redefined. Fold into the home page's inline CSS together with
   guide.css after 27 October 2026 (landing_css.py), when the home page may change again.
   A tool reads its surface from --w-* so the same markup sits on paper or on ink: paper takes the sand fill; an ink
   card (.ink), the hero band and the dark set take the band colours. The four session colours are the only new
   colours, from the brand's teal, sand, slate and orange; checked 2026-10-20: worst CIEDE2000 distance between any two
   under protan, deutan and tritan simulation 23 on paper and 17 on ink (marketing/tools/design/NOTES.md). */

/* ---- surfaces ---- */
.tool{--w-bg:var(--fill);--w-in:var(--bg);--w-line:var(--line);--w-text:var(--text);--w-2:var(--text-2);--w-mute:var(--muted);--w-acc:var(--orange-t);
  --s-syd:#26ad9f;--s-tok:#ecbb45;--s-lon:#2f4d94;--s-ny:#c9421f;--e-syd:#17867a;--e-tok:#9c6b0e;--e-lon:#2f4d94;--e-ny:#c9421f;
  --o-buy:#17867a;--o-sell:#b93a1f;--o-tagtext:#fbf8f2;--w-ov:rgba(23,24,29,.07);--w-hatch:rgba(23,24,29,.16);
  color:var(--w-text)}
.ink,.hero .tool,.ink .tool{--w-bg:var(--band-card);--w-in:var(--band);--w-line:var(--band-line);--w-text:var(--band-text);--w-2:var(--band-2);--w-mute:var(--band-faint);--w-acc:#ea6a45;
  --s-syd:#34c6b5;--s-tok:#f8d470;--s-lon:#6283da;--s-ny:#e65a30;--e-syd:#34c6b5;--e-tok:#f8d470;--e-lon:#6283da;--e-ny:#e65a30;
  --o-buy:#34c6b5;--o-sell:#ef6a40;--o-tagtext:#17181d;--w-ov:rgba(243,236,223,.08);--w-hatch:rgba(243,236,223,.16)}
@media (prefers-color-scheme:dark){
  .tool{--w-bg:var(--band-card);--w-in:var(--band);--w-line:var(--band-line);--w-text:var(--band-text);--w-2:var(--band-2);--w-mute:var(--band-faint);--w-acc:#ea6a45;
    --s-syd:#34c6b5;--s-tok:#f8d470;--s-lon:#6283da;--s-ny:#e65a30;--e-syd:#34c6b5;--e-tok:#f8d470;--e-lon:#6283da;--e-ny:#e65a30;
    --o-buy:#34c6b5;--o-sell:#ef6a40;--o-tagtext:#17181d;--w-ov:rgba(243,236,223,.08);--w-hatch:rgba(243,236,223,.16)}
}
.ink{background:var(--band);color:var(--band-text);border:1px solid var(--band-line);border-radius:12px;padding:20px}
.ink .btn{background:var(--band-text);color:var(--band)}
.ink .btn:hover{background:#fbf8f2}
.s-syd{--c:var(--s-syd);--e:var(--e-syd)}.s-tok{--c:var(--s-tok);--e:var(--e-tok)}.s-lon{--c:var(--s-lon);--e:var(--e-lon)}.s-ny{--c:var(--s-ny);--e:var(--e-ny)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the menu's current page, the crumb in the band (the home page's header and hero, TL-9) ---- */
nav.links a[aria-current]{color:var(--band-text);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:6px}
.hero .crumb{font-size:14px;color:var(--band-faint);margin:0 0 10px}
.hero .crumb a{color:var(--band-2)}
.tool-hero h1{margin-bottom:10px}
.tool-hero .lead{margin-bottom:0}
/* real <button class="btn"> elements take the page's type like the home page's link buttons */
button.btn{font-family:inherit;font-size:inherit;line-height:inherit}

/* ---- form parts ---- */
.tool .f{display:grid;gap:4px;font-size:14px;color:var(--w-2);min-width:0}
.tool input[type=text],.tool input[type=number],.tool input[type=date],.tool select{min-height:44px;padding:0 10px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in);color:var(--w-text);font:inherit;font-size:16px;width:100%;min-width:0}
.tool input[readonly]{color:var(--w-mute);border-style:dashed}
.tool input[aria-invalid=true]{border-color:var(--w-acc);border-width:2px}
.tool input:focus-visible,.tool select:focus-visible,.tool button:focus-visible,.tool [tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tool .read{font-size:13px;color:var(--w-mute);min-height:1.3em}
.tool .btn{min-height:44px}
.tool .lnk{background:none;border:0;padding:0 2px;min-height:44px;color:inherit;font:inherit;font-size:15px;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.tool .sw{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--w-2);cursor:pointer;margin:0}
.tool .sw input{width:20px;height:20px;accent-color:var(--w-text);flex:0 0 auto}
.tool .hint{font-size:14px;color:var(--w-mute);margin:0}
/* a row of choices that look like a switch: real radio buttons, one tab stop */
.seg{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.seg legend{font-size:14px;color:var(--w-2);margin-bottom:6px;padding:0}
.seg label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in);color:var(--w-2);font-size:15px;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--w-text);border-color:var(--w-text);color:var(--w-bg);font-weight:600}
.seg label:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
.chips{border:0;margin:0;padding:0;min-width:0}
.chips legend{font-size:14px;color:var(--w-2);padding:0;margin-bottom:6px}
.chips-in{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in);font-size:15px;color:var(--w-2);cursor:pointer}
.chip input{width:18px;height:18px;margin:0 8px 0 0;accent-color:var(--w-text)}
.chip:has(input:checked){color:var(--w-text);border-color:var(--w-2)}
.chip .cn{color:var(--w-mute)}
@media (max-width:719px){.chip .cn{display:none}}
.tool details{background:var(--w-bg);border:1px solid var(--w-line);margin:0}
.tool details summary{color:var(--w-text)}
.tool details p{color:var(--w-2)}

/* ---- the desk: the tool on paper, the answer in an ink card beside it (B) ---- */
.desk h2{margin-bottom:24px}
.desk-grid{display:grid;gap:16px;align-items:start}
.desk-in{min-width:0}
.keep{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:14px}
.keep .lnk{font-size:14px}
.out-h{font-size:15px;color:var(--band-2);margin:0 0 8px}
.out-rule{font-size:15px;color:var(--band-2);margin:16px 0}
@media (min-width:1000px){
  .desk-grid{grid-template-columns:minmax(0,1fr) 340px;gap:32px}
  .desk-out{position:sticky;top:76px}
}
.grp{border:0;margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid var(--line);min-width:0}
.grp legend{font:500 19px/1.2 var(--display);padding:0;margin-bottom:12px;color:var(--text)}
.grp .row{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start}

/* ---- lot size calculator ---- */
.lot-big{font:400 clamp(42px,6vw,56px)/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:0}
.lot-big small{font:400 .38em/1 "Inter",system-ui,sans-serif;letter-spacing:0;color:var(--w-2);margin-left:.25em}
.lot-res{display:grid;gap:6px}
.lot-res p{margin:0}
.lot-per{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px;color:var(--w-2);font-variant-numeric:tabular-nums}
.lot-per b{color:var(--w-text);font-weight:600}
.nb{white-space:nowrap}
.lot-warn{margin:0;padding:12px 14px;border-radius:8px;border:1px solid var(--w-acc);color:var(--w-text);font-size:15px}
.lot-warn b{color:var(--w-acc)}
.is-warn .lot-big{color:var(--w-mute)}
.assume{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start;margin-bottom:6px}
.ratebox{margin-top:12px;border-radius:8px}
.rates{display:grid;gap:10px 14px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:10px;padding-bottom:14px}
.rate{display:grid;gap:4px;font-size:14px;color:var(--w-2)}
.mt-only{display:none}
.mt-on .mt-only{display:block}
.mt-on .calc-only{display:none}
/* on a phone the answer card rides along at the foot of the screen while the inputs scroll: one line, the lot and
   the money it risks, and the page scrolls a focused field clear of it (WCAG 2.2, focus not obscured) */
@media (max-width:999px){
  .lot-b .desk-out{position:sticky;bottom:8px;z-index:3;padding:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .lot-b .desk-out .out-h,.lot-b .desk-out .lot-per,.lot-b .desk-out .lot-pct{display:none}
  .lot-b .lot-res{grid-template-columns:auto 1fr;align-items:baseline;gap:4px 12px}
  .lot-b .lot-big{font-size:30px}
  .lot-b .lot-res p:not(.lot-big){font-size:14px}
  .lot-b .lot-warn{padding:6px 10px;font-size:14px;grid-column:1/-1}
  :root:has(.lot-b){scroll-padding-bottom:96px}
}

/* ---- trading sessions: the clocks ---- */
.clocks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--w-line);border:1px solid var(--w-line);border-radius:10px;overflow:hidden}
.ck{display:grid;gap:2px;padding:12px 14px;background:var(--w-bg);min-width:0}
.ck-c{font-size:14px;color:var(--w-2)}
.ck-t{font:400 clamp(28px,5vw,38px)/1.05 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ck-d{font-size:13px;color:var(--w-mute)}
.ck-s{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--w-2);margin-top:4px}
.ck-s i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;border:2px solid var(--e)}
.ck.is-open .ck-s{color:var(--w-text);font-weight:600}
.ck.is-open .ck-s i{background:var(--c);border-color:var(--e)}
@media (min-width:720px){.clocks{grid-template-columns:repeat(4,1fr)}}

/* ---- trading sessions: the day chart ---- */
.sx{--lw:0px;--lane:30px}
.sx-card{margin-top:12px;padding:30px 16px 16px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
@media (min-width:720px){.sx-card{padding:34px 24px 20px}}
.sx-chart{position:relative;padding-top:2px;min-height:250px}
.sx-axis{position:relative;height:26px;margin-left:var(--lw);font-size:12px;color:var(--w-mute);font-variant-numeric:tabular-nums}
.sx-axis .tk{position:absolute;top:4px;transform:translateX(-50%);display:none;white-space:nowrap}
.sx-axis .tk.t3{display:block}
@media (min-width:720px){.sx-axis .tk.t3{display:none}.sx-axis .tk.t2{display:block}}
.sx-axis .tk:first-child{transform:none}
.sx-axis .mm{display:none}
@media (min-width:720px){.sx-axis .mm{display:inline}}
.nowtag{position:absolute;top:0;transform:translateX(-50%);z-index:3;padding:3px 7px;border-radius:5px;background:var(--w-text);color:var(--w-bg);font:600 12px/1.2 "Inter",system-ui,sans-serif;white-space:nowrap}
.sx-plot{position:relative}
.sx-layer{position:absolute;left:var(--lw);right:0;top:0;bottom:0;pointer-events:none;overflow:hidden}
.sx-layer i{position:absolute;top:0;bottom:0;display:block}
.sx-layer .gl{width:1px;background:var(--w-line);opacity:.55}
.sx-layer .gl.g3{opacity:1}
.sx-layer .oc{background:var(--w-ov)}
.sx-layer .cl{background:repeating-linear-gradient(135deg,var(--w-hatch) 0 1px,transparent 1px 8px)}
.sx-layer .cl span{position:absolute;left:8px;bottom:6px;padding:1px 4px;border-radius:4px;background:var(--w-bg);font:400 12px/1.2 "Inter",system-ui,sans-serif;font-style:normal;color:var(--w-mute);white-space:nowrap}
.sx-layer .wk{width:0;border-left:1px dashed var(--w-2)}
.sx-layer .wk span{position:absolute;top:4px;left:6px;padding:2px 6px;border-radius:4px;background:var(--w-bg);font:600 12px/1.2 "Inter",system-ui,sans-serif;font-style:normal;color:var(--w-text);white-space:nowrap}
.sx-layer .wk.lft span{left:auto;right:6px}
.sx-layer .nw{width:2px;margin-left:-1px;background:var(--w-text);z-index:2}
.lane{position:relative;display:grid;grid-template-columns:1fr;align-items:center;padding:4px 0}
.lane .ln{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--w-mute);padding:0 0 3px;min-width:0;position:relative;z-index:1}
.lane .ln b{font:500 15px/1.2 var(--display);color:var(--w-text)}
.lane .tr{position:relative;height:var(--lane)}
/* one session open: a light tint with a coloured base line; two at once: the full colour */
.bar{position:absolute;top:0;bottom:0;border-radius:6px;background:color-mix(in srgb,var(--c) 42%,var(--w-bg));box-shadow:inset 0 -2px 0 var(--e);overflow:hidden}
.bar .dp{position:absolute;top:0;bottom:0;background:var(--c);box-shadow:inset 0 -2px 0 var(--e)}
.bar .bt,.ob .bt{position:absolute;left:4px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:4px;background:var(--w-bg);color:var(--w-text);font:600 12px/1.2 "Inter",system-ui,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
/* on ink a tint of gold or blue turns muddy: an outline in the session's colour over a faint wash reads cleaner */
.ink .bar,.hero .bar{background:color-mix(in srgb,var(--c) 20%,transparent);box-shadow:inset 0 0 0 1.5px var(--c)}
.ink .bar .dp,.hero .bar .dp{box-shadow:none}
@media (prefers-color-scheme:dark){.tool .bar{background:color-mix(in srgb,var(--c) 20%,transparent);box-shadow:inset 0 0 0 1.5px var(--c)}.tool .bar .dp{box-shadow:none}}
.lane.both .ln b{font-family:"Inter",system-ui,sans-serif;font-size:13px;font-weight:600}
.lane.both{padding-top:10px}
.ob{position:absolute;top:0;bottom:0;border-radius:6px;overflow:hidden;background:linear-gradient(var(--a) 0 50%,var(--b) 50% 100%)}
.ob.s2-syd{--a:var(--s-syd)}.ob.s2-tok{--a:var(--s-tok)}.ob.s2-lon{--a:var(--s-lon)}.ob.s2-ny{--a:var(--s-ny)}
.ob.s3-syd{--b:var(--s-syd)}.ob.s3-tok{--b:var(--s-tok)}.ob.s3-lon{--b:var(--s-lon)}.ob.s3-ny{--b:var(--s-ny)}
@media (min-width:720px){
  .sx{--lw:150px;--lane:32px}
  .lane{grid-template-columns:var(--lw) 1fr}
  .lane .ln{display:grid;gap:0;padding:0 12px 0 0}
  .lane .ln span{font-size:12px}
}
@media (min-width:1000px){.sx{--lane:34px}}
.sx-ovl{font-size:15px;color:var(--w-2);margin:14px 0 0}
.sx-ovl b{color:var(--w-text);font-weight:600}
.dst{margin:12px 0 0;padding:10px 14px;border:1px solid var(--w-line);border-radius:8px;font-size:15px;color:var(--w-2);background:var(--w-in)}
.sx-ctl{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;margin-bottom:16px}
.sx-ctl>.f{flex:1 1 280px;max-width:480px}
.dayctl{display:flex;gap:6px;align-items:end;flex-wrap:nowrap}
.dayctl .f{flex:0 1 170px;min-width:0}
.dayctl button{min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in);color:var(--w-text);font:inherit;font-size:15px;cursor:pointer}
.dayctl button:hover{border-color:var(--w-2)}
.sx-tbl td:first-child{width:22%}
/* the week at a glance and the hub strip: four thin stripes per row */
.st-tr{position:relative;display:grid;gap:2px;flex:1 1 auto;min-width:0;padding:3px 0}
.st-l{position:relative;display:block;height:6px}
.st-l .bar{border-radius:3px;box-shadow:none}
.st-l .bar .dp{box-shadow:none}
.st-tr .cl{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--w-hatch) 0 1px,transparent 1px 6px)}
.st-tr .nw{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--w-text)}
.st-ax{display:flex;justify-content:space-between;font-size:12px;color:var(--w-mute);margin-top:4px;font-variant-numeric:tabular-nums}
.wk-glance{display:grid;gap:24px}
@media (min-width:1000px){.wk-glance{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.week{display:grid;gap:2px}
.wk-ax{padding:0 10px 0 87px}
.wk-row{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:4px 10px;border:1px solid transparent;border-radius:8px;background:none;color:var(--w-text);font:inherit;cursor:pointer;text-align:left}
.wk-row:hover{border-color:var(--w-line)}
.wk-row.on{border-color:var(--w-2);background:var(--w-in)}
.wk-d{flex:0 0 64px;font-size:14px;color:var(--w-2);font-variant-numeric:tabular-nums}
.wk-row.on .wk-d{color:var(--w-text);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:var(--w-2)}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:22px;height:10px;border-radius:3px;background:var(--c);box-shadow:inset 0 -2px 0 var(--e)}
.legend .lg-ov i{width:34px;background:linear-gradient(90deg,color-mix(in srgb,var(--s-lon) 42%,var(--w-bg)) 0 50%,var(--s-lon) 50% 100%);box-shadow:inset 0 -2px 0 var(--e-lon)}
.legend .lg-cl i{background:repeating-linear-gradient(135deg,var(--w-hatch) 0 1px,transparent 1px 5px);box-shadow:inset 0 0 0 1px var(--w-line)}
.legend.mini{margin-top:8px;font-size:12px;gap:4px 12px}
.legend.mini i{width:14px;height:6px}
/* on a phone the graph comes straight after the time zone; the clocks follow it */
@media (max-width:719px){.sx-b .sx-wrap{display:flex;flex-direction:column}.sx-b .sx-wrap .clocks{order:2;margin-top:12px}.sx-b .sx-wrap .sx-card{order:1}.sx-b .sx-wrap .dst{order:3}}

/* ---- red folder calendar ---- */
.cal-ctl{display:grid;gap:14px;margin-bottom:20px}
@media (min-width:720px){.cal-ctl{grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:end}}
.cal-b .tool{--w-bg:var(--bg);--w-in:var(--bg)}
.cal-b .chip .cn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cal-b .desk-out .nx-c{font-size:clamp(34px,4vw,44px)}
@media (max-width:999px){.cal-b .desk-out{position:static;grid-row:1}}
.cw{margin-top:22px}
.cw:first-child{margin-top:0}
.cw-h{font-size:19px;margin:0 0 8px}
.cw-none{color:var(--w-mute);margin:0;padding:12px 0;border-top:1px solid var(--w-line)}
.cw-l{list-style:none;margin:0;padding:0}
.ce{display:grid;grid-template-columns:1fr;gap:6px 16px;padding:14px 0;border-top:1px solid var(--w-line)}
.ce-when{display:flex;gap:10px;align-items:baseline;font-variant-numeric:tabular-nums}
.ce-d{font-weight:600}
.ce-t{font:400 22px/1 var(--display)}
.ce-what{display:grid;gap:2px;min-width:0}
.ce-what b{font-weight:600}
.ce-cur{display:inline-block;justify-self:start;font:600 12px/1 "Inter",system-ui,sans-serif;padding:4px 6px;border-radius:4px;border:1px solid var(--w-line);color:var(--w-2);letter-spacing:.02em}
.ce-ev{color:var(--w-2)}
.ce-own{font-size:14px;color:var(--w-mute)}
.ce-own a{color:var(--w-2)}
.ce-ics{justify-self:start;min-height:44px;padding:0 14px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in);color:var(--w-text);font:inherit;font-size:15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.ce-ics:hover{border-color:var(--w-2)}
/* a release that has happened keeps full contrast and says so in words (the faded row fell to 2.5:1) */
.ce-done{font-size:13px;color:var(--w-2);border:1px solid var(--w-line);border-radius:4px;padding:2px 6px;justify-self:start}
@media (min-width:720px){.ce{grid-template-columns:150px minmax(0,1fr) auto;align-items:center}.ce-when{display:grid;gap:4px}}
.nx{display:grid;gap:4px}
.nx-l{font-size:14px;color:var(--w-2)}
.nx-c{font:400 clamp(34px,6.2vw,56px)/1.05 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.nx-e{font-size:17px;color:var(--w-text)}
.nx-w{font-size:15px;color:var(--w-2)}

/* ---- order type visualiser: the chart on an ink card (A), the choices and the status beside it (B) ---- */
.ov-box{position:relative;border-radius:10px;overflow:hidden;background:var(--w-in);border:1px solid var(--w-line)}
.ov-svg{display:block;width:100%;height:auto;font:400 12px "Inter",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
/* only the two handles take the finger; the rest of the chart scrolls the page as usual */
.ov-line,.ov-price{touch-action:none;cursor:ns-resize;outline:none}
.ov-grid{stroke:var(--w-line);stroke-width:1}
.ov-ax{fill:var(--w-mute);font-size:12px;font-variant-numeric:tabular-nums}
.ov-future{fill:var(--w-ov);opacity:.6}
.ov-path{fill:none;stroke:var(--w-text);stroke-width:1.75;stroke-linejoin:round}
.ov-bid{stroke:var(--w-2);stroke-width:1}
.ov-ask{stroke:var(--w-2);stroke-width:1;stroke-dasharray:4 4}
.ov-dot{fill:var(--w-text)}
.ov-hit{fill:transparent}
.ov-line .ov-l{stroke-width:2}
.ov-buy{--oc:var(--o-buy)}.ov-sell{--oc:var(--o-sell)}
.ov-line .ov-l{stroke:var(--oc)}
.ov-stop .ov-l{stroke-dasharray:7 5}
.ov-pend .ov-l{stroke-opacity:.6}
.ov-done .ov-l{stroke:var(--w-mute)}
.ov-bad .ov-l{stroke:var(--w-mute);stroke-dasharray:2 4}
.ov-tag{fill:var(--oc)}
.ov-tag-t,.ov-ftag-t{fill:var(--o-tagtext);font-weight:600;font-size:12px}
.ov-done .ov-tag,.ov-bad .ov-tag{fill:var(--w-mute)}
.ov-line:focus-visible .ov-tag,.ov-line.is-drag .ov-tag,.ov-price:focus-visible .ov-btag{stroke:var(--orange);stroke-width:3}
.ov-atag{fill:var(--w-bg);stroke:var(--w-line)}
.ov-btag{fill:var(--w-text);stroke:none}
.ov-atag-t{fill:var(--w-2);font-size:12px}
.ov-btag-t{fill:var(--w-bg);font-weight:600;font-size:12px}
.ov-pos{stroke:var(--oc);stroke-width:1.5;stroke-dasharray:2 3}
.ov-fdot{fill:var(--oc);stroke:var(--w-in);stroke-width:2}
.ov-trig{fill:none;stroke:var(--oc);stroke-width:2}
.ov-ftag{fill:var(--oc)}
.ov-btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.ov-nudge{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--w-2)}
.ov-nudge button{min-height:44px;min-width:44px;padding:0 10px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in);color:var(--w-text);font:inherit;font-size:15px;cursor:pointer}
.ov-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ov-list legend{grid-column:1/-1}
.ov-plat{margin-top:16px}
.ov-status{font-size:16px;color:var(--w-text);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--w-line);min-height:3.2em}
.ov-rule{font-size:15px;color:var(--w-2);margin:10px 0 0}
.ov-mt4{font-size:15px;color:var(--w-2);margin:12px 0 0;padding:10px 14px;border:1px solid var(--w-line);border-radius:8px;background:var(--w-in)}
.seg label.mt4-held{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.2;padding-top:4px;padding-bottom:4px}
.mt4-note{display:none;font-size:12px;font-weight:400;opacity:.85}
.seg label.mt4-held .mt4-note{display:block}
@media (max-width:999px){.ov-b .desk-out{position:static}}

/* ---- hubs ---- */
.now-panel{display:grid;gap:18px;margin-top:24px;padding:18px;border:1px solid var(--band-line);border-radius:12px;background:var(--band-card)}
.now-h{font-size:14px;color:var(--band-2);margin:0 0 8px}
.now-t{margin:10px 0 0;color:var(--band-text)}
.now-l{margin:10px 0 0;font-size:15px}
.now-l a{color:var(--band-text)}
@media (min-width:1000px){.now-panel{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;padding:22px 24px}}
.pv{display:grid;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.pv:first-of-type{border-top:0;padding-top:0}
.pv-t p{color:var(--text-2)}
.pv-v{border-radius:12px;padding:18px;background:var(--fill);border:1px solid var(--line)}
.pv-big{font:400 42px/1 var(--display);margin:4px 0 0}
.pv-big small{font:400 17px "Inter",system-ui,sans-serif;color:var(--text-2)}
@media (min-width:720px){.pv{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start}}
.sketch{display:block;width:100%;height:auto;max-width:420px}
.sk-l{stroke:var(--o-buy);stroke-width:2}
.sk-p{fill:none;stroke:var(--text);stroke-width:1.75;stroke-linejoin:round}
.sk-f{fill:var(--o-buy)}
.sk-t{fill:var(--o-buy);font:600 12px "Inter",system-ui,sans-serif}
.sk-t2{fill:var(--muted);font:400 12px "Inter",system-ui,sans-serif}
.pv-l{list-style:none;padding:0;margin:10px 0 0;font-size:15px}
.pv-l li{padding:8px 0;border-top:1px solid var(--line)}
.pv-l .ce-d{font-variant-numeric:tabular-nums;margin-right:6px}
.pv-v .now-h{font-size:14px;color:var(--text-2);margin:0 0 8px}
.pv-v .now-t{margin:10px 0 0;color:var(--text)}
.gwrap{display:grid;gap:16px;align-items:start}
@media (min-width:1000px){.gwrap{grid-template-columns:minmax(0,1fr) 300px;gap:32px}}
.gt td:first-child{width:34%}
.gt td:last-child{font-weight:400;color:var(--text-2)}
.newt td:first-child{white-space:nowrap;width:24%}
.newt td a{font-weight:400}
.side h3{font-size:19px;margin:6px 0 4px}
.side .fine{margin:0}
.side p + h3{margin-top:16px}
@media (max-width:719px){
  .gt thead,.newt thead{position:absolute;left:-9999px}
  .gt tr,.newt tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  .gt td,.newt td{display:block;border:0;padding:2px 0;width:auto;background:none}
  .gt tbody tr:nth-child(even) td,.newt tbody tr:nth-child(even) td{background:none}
  .gt td:first-child{width:auto;font-family:var(--display);font-size:17px;font-weight:500}
}

/* ---- the article, with a contents rail on wide screens (B) ---- */
.tool-art{padding-top:40px}
/* tables wider than a phone scroll inside their own box (site.css gives .tw only to the help pages); figures and
   symbol names never break inside a cell */
.tool-art .tw{overflow-x:auto;margin:8px 0 22px}
.tool-art .tw table{margin-bottom:0}
.tool-art .tw td,.tool-art .tw th{overflow-wrap:normal;word-break:normal;hyphens:manual}
.toc{background:var(--fill);border:1px solid var(--line);border-radius:10px;padding:12px 12px 14px;margin:0 0 24px}
.toc .toc-h{font:500 17px/1.2 var(--display);margin:2px 4px 10px;color:var(--text)}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:6px;counter-reset:toc}
@media (max-width:999px){.toc ol{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.toc li{margin:0;counter-increment:toc}
.toc a{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);text-decoration:none;font-size:14.5px;line-height:1.25;transition:border-color .15s,background .15s}
.toc a::before{content:counter(toc);flex:0 0 22px;height:22px;border-radius:50%;background:var(--fill-2);color:var(--text-2);font:600 12px/22px "Inter",system-ui,sans-serif;text-align:center}
.toc a::after{content:"\2192";margin-left:auto;padding-left:6px;color:var(--orange-t)}
.toc a:hover{border-color:var(--orange);background:var(--fill)}
.toc a[aria-current]{border-color:var(--orange);font-weight:600}
.toc a[aria-current]::before{background:var(--orange);color:#fff}
@media (min-width:1000px){
  .tool-art .wrap{max-width:1080px;display:grid;grid-template-columns:230px minmax(0,780px);gap:44px}
  .rail{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
}
.guide .qa h3{margin-top:20px}
.guide .end{margin-top:32px}
.guide .end .fine{margin:0}
.guide .end h3{font-size:19px}
.guide .srcs td:first-child{font-weight:400}
.more{display:grid;gap:12px;margin-top:24px}
@media (min-width:720px){.more{grid-template-columns:1fr 1fr}}
.more a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none}
.more a b{display:block;font:500 17px/1.2 var(--display);margin-bottom:4px}
.more a span{font-size:15px;color:var(--text-2)}
.more a:hover{border-color:var(--text-2)}

/* ---- Gate 3 (TL-11): the shared parts of the livelier pages. Tips beside labels, the hero's chips, the lesson
   cards and the small interactive pieces (common.js). Colours from the site tokens; teal is the brand's. ---- */
:root{--tl:#17867a;--tl-2:#e2f0ec}
@media (prefers-color-scheme:dark){:root{--tl:#34c6b5;--tl-2:#16302d}}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.hero-chips li{padding:6px 12px;border:1px solid var(--band-line);border-radius:999px;font-size:14px;color:var(--band-2);background:var(--band-card)}
.desk .sub{margin:-12px 0 22px;color:var(--text-2)}
.tip-ic{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--fill-2);color:var(--text-2);font:600 12px/20px "Inter",system-ui,sans-serif;text-align:center;vertical-align:1px}
/* a tip: shown on hover and on keyboard focus here, on a press by common.js */
.tipw{position:relative;display:inline-flex;flex:0 0 auto}
.tip{position:relative;width:24px;height:24px;padding:0;border:1px solid var(--w-line,var(--line));border-radius:50%;background:transparent;color:var(--w-2,var(--text-2));font:600 12px/1 "Inter",system-ui,sans-serif;cursor:help}
.tip::before{content:"";position:absolute;inset:-10px}
.tip:hover,.tipw.open .tip{background:var(--w-text,var(--text));color:var(--w-bg,var(--bg))}
.tip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tipb{position:absolute;z-index:30;left:-6px;bottom:calc(100% + 10px);width:max-content;max-width:min(270px,78vw);padding:9px 12px;border-radius:9px;background:#f3ead8;color:#17181d;font:400 14px/1.4 "Inter",system-ui,sans-serif;text-align:left;white-space:normal;box-shadow:0 10px 26px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none}
.tipb::after{content:"";position:absolute;left:14px;top:100%;border:7px solid transparent;border-top-color:#f3ead8}
.tp-u .tipb{left:auto;right:-6px}
.tp-u .tipb::after{left:auto;right:14px}
.tipw:hover .tipb,.tip:focus+.tipb,.tipw.open .tipb{opacity:1;visibility:visible;transform:none}

/* lesson parts */
.aside-note{font-size:15px;color:var(--text-2);border-left:3px solid var(--orange);padding:2px 0 2px 12px;margin:14px 0 20px}
.lots{list-style:none;padding:0;margin:18px 0 8px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px}
.lots li{display:grid;justify-items:start;gap:2px;font-size:15px;color:var(--text-2)}
.lots b{font:500 24px/1.1 var(--display);color:var(--text)}
.lots small{color:var(--muted);font-size:13px}
.lb-sq{display:block;border-radius:6px;background:var(--tl);margin-bottom:8px}
.lb1 .lb-sq{width:120px;height:120px}
.lb2 .lb-sq{width:38px;height:38px;opacity:.85}
.lb3 .lb-sq{width:12px;height:12px;opacity:.75}
.steps5 ol{list-style:none;padding:0;margin:16px 0 12px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.steps5 li{display:grid;gap:4px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--fill);transition:background .3s,border-color .3s,transform .3s}
.steps5 .sn{width:28px;height:28px;border-radius:50%;background:var(--fill-2);color:var(--text-2);font:600 14px/28px "Inter",system-ui,sans-serif;text-align:center}
.steps5 b{font:500 16px/1.25 var(--display)}
.steps5 .sv{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.steps5 li.lit{border-color:var(--tl);background:var(--tl-2);transform:translateY(-3px)}
.steps5 li.lit .sn{background:var(--tl);color:#fff}
.steps5 [data-play][hidden]{display:none}
.formula{display:grid;gap:4px;margin:18px 0 8px;padding:16px 18px;border-radius:10px;background:var(--band);color:var(--band-text)}
.formula b{font:500 18px/1.35 var(--display)}
.formula span{font-size:14px;color:var(--band-2)}
.pexp{margin:14px 0 6px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.pexp-k{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pexp-k button{min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.pexp-k button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.pexp-k button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.pexp-p[hidden]{display:none}
.px{font:400 clamp(40px,8vw,64px)/1.1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:6px 0 14px}
.d-pip{color:var(--tl);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.d-pt{color:var(--orange-t);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.pfacts{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.pfacts li{padding:8px 12px;border-radius:8px;background:var(--bg);font-size:15px}
.pfacts .f-pt{box-shadow:inset 4px 0 0 var(--orange)}
.pfacts .f-pip{box-shadow:inset 4px 0 0 var(--tl)}
.pexp-legend{display:flex;gap:16px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.lg-pt::before,.lg-pip::before{content:"";display:inline-block;width:16px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--orange)}
.lg-pip::before{background:var(--tl)}
.ex-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.ex-tabs[hidden]{display:none}
.ex-tabs [role=tab]{min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.ex-tabs [role=tab][aria-selected=true]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.ex-tabs [role=tab]:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.ex-pane[hidden]{display:none}
.heat tbody td,.heat tbody tr:nth-child(even) td{text-align:center;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--tl) calc(var(--h) * 48%),var(--bg));color:var(--text)}
.heat td.hi{font-weight:700}
.heat th[scope=row]{white-space:nowrap}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}
.fl{display:grid;gap:2px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--fill);min-width:130px}
.fl small{font-size:12px;color:var(--muted)}
.fl b{font:500 17px/1.2 var(--display)}
.fl-end{background:var(--tl-2);border-color:var(--tl)}
.fl-a{font-size:22px;color:var(--orange-t)}
.mcards{display:grid;gap:12px;margin:14px 0}
@media (min-width:720px){.mcards{grid-template-columns:1fr 1fr}}
.mc{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--fill);box-shadow:inset 0 3px 0 var(--orange)}
.mc h3{margin:0 0 8px;font-size:18px}
.mc p{margin:0;font-size:15px}
.nline{position:relative;display:flex;justify-content:space-between;align-items:center;margin:12px 0 12px;padding:12px 4px 0;border-top:3px solid var(--line);font:600 14px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.nline span{position:relative}
.nline span::before{content:"";position:absolute;left:50%;top:-20px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--muted)}
.nline .nl-ok{color:var(--tl)}.nline .nl-ok::before{background:var(--tl)}
.nline .nl-bad{color:var(--orange-t);text-decoration:line-through}.nline .nl-bad::before{background:var(--orange)}
.spr{display:grid;gap:4px;margin:4px 0 12px;font-size:13px}
.spr span{padding:4px 8px;border-radius:6px;border-left:4px solid}
.sp-ask{border-color:var(--tl);background:var(--tl-2)}
.sp-bid{border-color:var(--text-2);background:var(--bg)}
.sp-stop{border-color:var(--orange);background:var(--bg);margin-top:14px}
.steps-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px}
.steps-line span{padding:4px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.spec{margin:14px 0 10px}
.spec-img{position:relative;max-width:566px;padding-left:36px}
.spec-img img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.hs{position:absolute;left:8px;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#b33d1a;color:#fff;font:700 11px/18px "Inter",system-ui,sans-serif;text-align:center}
.hs::after{content:"";position:absolute;left:18px;top:8px;width:10px;height:2px;background:var(--orange)}
.spec figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.spec-keys{counter-reset:k;list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.spec-keys li{counter-increment:k;position:relative;padding-left:34px;font-size:15px}
.spec-keys li::before{content:counter(k);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;font:700 13px/24px "Inter",system-ui,sans-serif;text-align:center}
.quiz{display:grid;gap:14px;margin:14px 0}
.quiz fieldset{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.quiz legend{float:left;width:100%;padding:0;margin:0 0 10px;font:500 17px/1.35 var(--display)}
.quiz label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 8px 6px 0;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer;font-size:15px}
.quiz label:has(input:checked){border-color:var(--text);font-weight:600}
.quiz input{width:18px;height:18px;accent-color:var(--text)}
.quiz .fb{clear:both;margin:8px 0 0;padding:8px 12px;border-radius:8px;font-size:15px}
.quiz [data-fb=right]{background:var(--tl-2);box-shadow:inset 4px 0 0 var(--tl)}
.quiz [data-fb=wrong]{background:var(--bg);box-shadow:inset 4px 0 0 var(--orange)}
.qz-score{font:500 18px/1.3 var(--display);margin:0}
.prod-strip{margin:28px 0 8px;padding:16px 18px;border-radius:12px;background:var(--band);color:var(--band-2)}
.prod-strip b{color:var(--band-text)}
.prod-strip a{color:var(--band-text)}
.prod-strip p{margin:0}
/* the box right under each tool that points to the free EZ (agency review 2026-10-27, U-5): text left, button right on
   a wide screen, stacked on a phone */
.ezbox{padding:8px 0 4px}
.ezb{display:grid;gap:14px;padding:18px 20px;border-radius:12px;background:var(--band);color:var(--band-2)}
.ezb h2{margin:0 0 6px;font-size:20px;color:var(--band-text)}
.ezb p{margin:0}
.ezb a{color:var(--band-text)}
.ezb .btn{background:var(--band-text);color:var(--band)}
.ezb-l{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
@media (min-width:900px){.ezb{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}}
/* on a phone the screenshot keeps a readable size and scrolls sideways in its own box */
@media (max-width:559px){.spec{overflow-x:auto}.spec-img{min-width:566px}}
.guide .end .end-t{margin:0 0 4px;font:500 19px/1.3 var(--display)}