/* sessions.css - the trading sessions page's own rules on top of tools.css (Gate 3 redesign, Brendon's feedback of
   20 October 2026: every bar named in its colour so no legend is needed, a CME Globex lane, a best-hours card, the week
   as one line, the article as illustrated cards). Nothing in tools.css, guide.css or site.css is edited; where this
   page draws its chart differently from the shared rules (full-colour bars, no lane-name column), it overrides them
   here with a more specific selector.
   Colours: the four session colours of tools.css, unchanged, as solid bars with a darker base line in the light set;
   CME Globex adds a neutral fifth, graphite on paper and cream on ink, striped, because it is an exchange and not a
   city. Checked 2026-10-20 (CIEDE2000 under protan, deutan and tritan simulation, Machado 2009): worst pair 16.4 on
   paper (London and CME, tritan) and 12.0 on ink (Sydney and CME, protan); the label text on each bar is 4.9:1 or more. */

/* ---- the colours: the article gets the tool's, and each colour the text that reads on it ---- */
.tool-art{--s-syd:#26ad9f;--s-tok:#ecbb45;--s-lon:#2f4d94;--s-ny:#c9421f;--e-syd:#17867a;--e-tok:#9c6b0e;--e-lon:#2f4d94;--e-ny:#c9421f}
.tool,.tool-art{--s-cme:#3a3d47;--s-cme2:#4f525e;--on-syd:#17181d;--on-tok:#17181d;--on-lon:#fff;--on-ny:#fff;--on-cme:#fff}
.ink{--s-cme:#f3ecdf;--s-cme2:#d6cebf;--on-lon:#17181d;--on-ny:#17181d;--on-cme:#17181d}
@media (prefers-color-scheme:dark){
  .tool-art{--s-syd:#34c6b5;--s-tok:#f8d470;--s-lon:#6283da;--s-ny:#e65a30;--e-syd:#34c6b5;--e-tok:#f8d470;--e-lon:#6283da;--e-ny:#e65a30}
  .tool,.tool-art{--s-cme:#f3ecdf;--s-cme2:#d6cebf;--on-lon:#17181d;--on-ny:#17181d;--on-cme:#17181d}
}
.s-syd{--on:var(--on-syd)}.s-tok{--on:var(--on-tok)}.s-lon{--on:var(--on-lon)}.s-ny{--on:var(--on-ny)}
.s-cme{--c:var(--s-cme);--e:var(--s-cme);--on:var(--on-cme)}
.s2-syd{--a:var(--s-syd)}.s2-tok{--a:var(--s-tok)}.s2-lon{--a:var(--s-lon)}.s2-ny{--a:var(--s-ny)}
.s3-syd{--b:var(--s-syd)}.s3-tok{--b:var(--s-tok)}.s3-lon{--b:var(--s-lon)}.s3-ny{--b:var(--s-ny)}
.bh-sw{display:inline-block;flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:linear-gradient(var(--a) 0 50%,var(--b) 50% 100%);vertical-align:-3px}

/* hidden parts stay hidden whatever the shared rules give them */
.clocks[hidden],.dst[hidden],.sx-chart [hidden]{display:none}
.tool .dst+.dst{margin-top:8px}

/* ---- the order of the tool: the same on a phone as on a wide screen (tools.css moved the clocks up) ---- */
@media (max-width:719px){.sx-b .sx-wrap .clocks,.sx-b .sx-wrap .sx-card,.sx-b .sx-wrap .dst{order:0}}
.sx-b .sx-wrap .clocks{margin-top:16px}

/* ---- your best hours: an ink card under the controls ---- */
.best{margin:0 0 14px;padding:16px 18px}
.best h3{font-size:19px;margin:0;color:var(--band-text)}
.bh-in{display:grid;gap:10px}
.best .bh-z{margin:2px 0 0;font-size:14px;color:var(--band-2)}
.bh-g{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.bh{display:grid;gap:2px;align-content:start;min-width:0;padding:12px 14px;border:1px solid var(--band-line);border-radius:10px;background:var(--band-card)}
.bh.is-on{border-color:var(--s-syd)}
.bh p{margin:0}
.bh-n{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--band-text);line-height:1.25}
.bh-t{font:400 clamp(19px,4.6vw,34px)/1.1 var(--display);color:#fbf8f2;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:6px!important}
.bh-d{font-size:14px;color:var(--band-2)}
.bh-c{font-size:14px;font-weight:600;color:var(--band-text)}
.bh.is-on .bh-c{color:var(--s-syd)}
.bh-st{margin-top:8px}
.bh-s{position:relative;height:10px;border-radius:5px;background:var(--band-line);overflow:hidden}
.bh-o{position:absolute;top:0;bottom:0;background:linear-gradient(var(--a) 0 50%,var(--b) 50% 100%)}
.bh-now{position:absolute;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:#fbf8f2}
.bh-ax{display:flex;justify-content:space-between;margin-top:3px;font-size:11px;color:var(--band-faint);font-variant-numeric:tabular-nums}
@media (max-width:559px){.best{padding:14px 12px}.bh-g{gap:8px}.bh{padding:10px 9px}.bh-n{font-size:13.5px;align-items:flex-start}.bh-n .bh-sw{margin-top:1px}.bh-d,.bh-c{font-size:13px}.bh-ax span:nth-child(2){display:none}}

/* ---- the day chart: no lane-name column; every bar carries its own name tag ---- */
.sx.sx-b{--lw:0px;--lane:34px}
.sx-b .lane{display:block;padding:3px 0}
.sx-b .lane.both{padding-top:9px}
.sx-b .lane.fut{margin-top:9px;padding-top:12px;border-top:1px dashed var(--w-line)}
.sx-b .tr{position:relative;height:var(--lane)}
.sx-b .tr .bar{border-radius:6px;background:var(--c);box-shadow:inset 0 -3px 0 var(--e);overflow:visible}
.sx-b .s-cme .tr .bar{background:repeating-linear-gradient(135deg,var(--s-cme) 0 7px,var(--s-cme2) 7px 10px);box-shadow:none}
@media (prefers-color-scheme:dark){.sx-b .tr .bar{box-shadow:none}}
.sx-b .tr .ob{border-radius:6px}
.sx-chart{min-height:0}
.sx-b .sx-foot{height:26px}
/* the name tag: the bar's colour with the text that reads on it; inside the bar it is the bar, beside it a pill */
.tg{position:absolute;top:50%;z-index:3;transform:translateY(-50%);display:inline-flex;align-items:baseline;max-width:none;padding:3px 7px;border-radius:5px;
  background:var(--c);color:var(--on);font:400 12px/1.2 "Inter",system-ui,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.tg b{font-weight:700}
.tg .tt{margin-left:5px;font-weight:500}
.tg.in{padding-left:4px}
.tg.out{box-shadow:0 0 0 2px var(--w-bg)}
.tg.two{display:grid;padding:2px 5px;line-height:1.12}
.tg.two .tt{margin-left:0;font-size:11.5px}
.tg.nm .tt{display:none}
.tg.off{left:6px;background:none;color:var(--w-mute);font-weight:500;padding-left:0}
.lane.both .tg{background:var(--w-text);color:var(--w-bg)}
.lane.both .tg.off{background:none;color:var(--w-mute)}
/* a narrow chart: the tags ride in a row above their bars (sessions.js placeTags, caps) */
.sx-b .sx-chart.caps .tr{height:18px;margin-top:18px}
.sx-chart.caps .tg{font-size:11.5px;padding:1px 5px;border-radius:4px}
.sx-chart.caps .tg.over{top:-19px;transform:none}
.sx-chart.caps .tg .tt{margin-left:4px}
.sx-chart.caps .tg.off{top:50%;transform:translateY(-50%)}
.sx-b .sx-chart.caps .lane.fut{margin-top:6px;padding-top:8px}
/* without a script there is nothing to measure: on a phone the tags keep the name only */
@media (max-width:719px){.sx-chart:not(.fit) .tg .tt{display:none}.sx-chart:not(.fit) .tg.out{display:none}.sx-chart:not(.fit) .tr{overflow:hidden}}
/* CME's daily break: a dashed gap in the futures lane */
.brk{position:absolute;top:0;bottom:0;border:1.5px dashed var(--s-cme);border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brk span{font:600 11px/1 "Inter",system-ui,sans-serif;color:var(--w-2);white-space:nowrap}
/* the weekend and the weekly open say so on the bottom row, clear of the bars */
.sx-b .sx-layer .wk span{top:auto;bottom:4px}
.sx-b .sx-layer .cl span{bottom:4px}
.sx-b .sx-layer .oc{background:var(--w-ov)}
.tool.sx-b{--w-ov:rgba(23,24,29,.09)}
@media (prefers-color-scheme:dark){.tool.sx-b{--w-ov:rgba(243,236,223,.1)}}
/* a day with a repeated hour shows both marks, each with the offset it is read in */
.sx-axis.has-rp{height:40px}
.sx-axis .tk.rp{display:block}
.sx-axis.has-rp .tk .mm{display:none}
.sx-axis .tk .off{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1.2;color:var(--w-mute);white-space:nowrap}
.nowtag.l{transform:none}
.nowtag.r{transform:translateX(-100%)}
.sx-b .sx-card{padding-top:22px}
@media (min-width:720px){.sx-b .sx-card{padding-top:26px}}
.sx-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 0;font-size:13px;color:var(--w-mute)}
.sx-key .k{display:inline-block;width:16px;height:12px;border-radius:3px}
.sx-key .k+.k,.sx-key .k:not(:first-child){margin-left:10px}
.sx-key .k-oc{background:var(--w-ov);box-shadow:inset 0 0 0 1px var(--w-line)}
.sx-key .k-nw{width:2px;height:14px;border-radius:0;background:var(--w-text)}
.sx-key .k-cl{background:repeating-linear-gradient(135deg,var(--w-hatch) 0 1px,transparent 1px 5px);box-shadow:inset 0 0 0 1px var(--w-line)}

/* ---- five clocks: the four cities and CME Globex ---- */
.sx-b .clocks{grid-template-columns:1fr 1fr}
.sx-b .clocks .ck:last-child{grid-column:1/-1}
@media (min-width:720px){.sx-b .clocks{grid-template-columns:repeat(5,1fr)}.sx-b .clocks .ck:last-child{grid-column:auto}}
.ck.s-cme .ck-s i{border-color:var(--s-cme)}
.ck.s-cme.is-open .ck-s i{background:var(--s-cme)}

/* ---- the week in one card ---- */
.sx-week{display:grid;gap:12px 20px;align-items:center;margin-top:16px;padding:16px;border:1px solid var(--w-line);border-radius:12px;background:var(--w-bg)}
@media (min-width:860px){.sx-week{grid-template-columns:auto minmax(0,1fr) auto}}
.wk7{display:flex;gap:4px}
.wk7 span{display:grid;align-content:end;justify-items:center;width:40px;height:46px;padding-bottom:5px;border-radius:7px;border:1px solid var(--w-line);background:var(--w-in);font-size:12px;color:var(--w-2);
  background-image:linear-gradient(90deg,var(--s-syd) 0 25%,var(--s-tok) 25% 50%,var(--s-lon) 50% 75%,var(--s-ny) 75%);background-size:100% 9px;background-repeat:no-repeat}
.wk7 .we{background-image:repeating-linear-gradient(135deg,var(--w-hatch) 0 1px,transparent 1px 6px);background-size:auto}
.wk7 .su{background-image:linear-gradient(90deg,transparent 0 70%,var(--s-syd) 70%),repeating-linear-gradient(135deg,var(--w-hatch) 0 1px,transparent 1px 6px);background-size:100% 9px,auto;background-repeat:no-repeat,repeat}
@media (max-width:379px){.wk7 span{width:36px}}
.wk-tx h3{font-size:18px;margin:0 0 4px}
.wk-tx p{margin:0;font-size:15px;color:var(--w-2)}
.wk-go{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;white-space:nowrap}
.wk-go:hover{border-color:var(--w-2)}

/* ---- the table of the shown day, folded ---- */
.sx-fold{margin-top:14px;border-radius:10px}
.sx-fold .tw{overflow-x:auto;margin:0 0 14px}
.sx-fold table{margin:0}
.sx-fold td,.sx-fold th{overflow-wrap:normal;word-break:normal;hyphens:manual}
.sx-tbl td:first-child{white-space:nowrap}

/* ---- the article ---- */
.tool-art h3{margin:22px 0 4px}
.hrs{font-size:15px}
.hrs th,.hrs td{padding:8px 10px}
.hrs td.nb{font-variant-numeric:tabular-nums}
.hrs td:first-child{font-weight:500}
.tool-art .tw table{min-width:520px}
.zt .ex-tabs{margin-bottom:4px}
.tabs-on .pane-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zt .pane-h{font-size:17px;margin:14px 0 6px}
.fold{margin:6px 0 18px}
.fold .tw{margin:0 0 14px}

/* four cities, one rule: a card per city with a 24-hour dial, 08:00 to 17:00 lit in the city's colour */
.world{list-style:none;padding:0;margin:16px 0 14px;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.world{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wc{position:relative;display:grid;gap:3px;align-content:start;padding:14px;border:1px solid var(--line);border-top:5px solid var(--c);border-radius:12px;background:var(--fill)}
.wc b{font:500 19px/1.2 var(--display);margin-top:6px}
.wh{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.wo{font-size:13px;color:var(--muted);line-height:1.4}
/* midnight at the foot of the dial and noon at the top, so the working day is the arc the sun takes */
.ring{position:relative;display:block;width:64px;height:64px;border-radius:50%;background:conic-gradient(from 180deg,var(--fill-2) 0 120deg,var(--c) 120deg 255deg,var(--fill-2) 255deg 360deg)}
.ring span{position:absolute;inset:11px;display:grid;place-items:center;border-radius:50%;background:var(--fill);font:600 13px/1 "Inter",system-ui,sans-serif;color:var(--text-2)}

/* the London and New York overlap, two bars in London time */
.ovx .ovb{position:relative;margin:6px 0 4px;padding-bottom:20px}
.ovb-r{position:relative;height:32px;margin:0 0 6px}
.ovb-r i{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:5px;padding:0 8px;border-radius:6px;background:var(--c);color:var(--on);font:500 13px/1 "Inter",system-ui,sans-serif;font-style:normal;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.ovb-r b{font-weight:700}
@media (max-width:559px){.ovb-r i span{display:none}}
.ovb-o{position:absolute;top:-6px;bottom:14px;border:2px dashed var(--orange);border-radius:8px;background:color-mix(in srgb,var(--orange) 9%,transparent)}
.ovb-o b{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:5px;background:var(--orange);color:#fff;font:700 12px/1.3 "Inter",system-ui,sans-serif;white-space:nowrap}
.ovb-ax{position:absolute;left:0;right:0;bottom:0;height:16px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ovb-ax span{position:absolute;transform:translateX(-50%)}
.ovb-ax span:first-child{transform:none}
.ovb-ax span:last-child{transform:translateX(-100%)}
.ovb-t{font-size:15px;margin:12px 0 0}
.ovx .ovb{margin-top:18px}
.ovo{list-style:none;padding:0;margin:12px 0 22px;display:grid;gap:8px}
.ovo li{position:relative;padding-left:28px;font-size:15px}
.ovo .bh-sw{position:absolute;left:0;top:3px}

/* why the hours matter: three figures and a share bar */
.stats{display:grid;gap:10px;margin:14px 0 12px}
@media (min-width:720px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{display:grid;gap:4px;align-content:start;padding:14px 16px;border-radius:12px;background:var(--band);color:var(--band-2)}
.stat b{font:400 clamp(30px,5vw,38px)/1.05 var(--display);color:var(--band-text);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;line-height:1.4}
.share{display:grid;gap:10px;margin:6px 0 16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.sh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:14px}
.sh-v{font-weight:700;font-variant-numeric:tabular-nums}
.sh i{grid-column:1/-1;display:block;height:12px;border-radius:6px;background:var(--tl);box-shadow:0 0 0 0 transparent}
.sh-2 i{background:var(--orange)}
.sh-3 i{background:var(--muted)}
.sh{background:linear-gradient(var(--fill-2),var(--fill-2)) bottom/100% 12px no-repeat}

/* the week in New York time: the currency market's one stretch, the futures' five */
.wkx{margin:14px 0 12px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.wkx-ax{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;color:var(--muted);margin:0 0 4px}
.wkx-ax span{padding-left:4px;border-left:1px solid var(--line)}
.wkx-r{display:grid;gap:4px;margin:8px 0 22px}
.wkx-r b{font-size:14px;font-weight:600}
.wkx-t{position:relative;height:24px;border-radius:6px;background:repeating-linear-gradient(135deg,rgba(127,127,127,.22) 0 1px,transparent 1px 7px)}
.wkx-t i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--s-cme)}
.wkx-t .wkx-fx{background:var(--tl)}
.wkx-m{position:absolute;top:calc(100% + 3px);font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.wkx-m.e{transform:translateX(-100%)}
.wkx-c{margin:0;font-size:13px;color:var(--muted)}

/* futures: a day in Chicago time */
.fday{margin:14px 0 14px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.fday-t{position:relative;height:28px}
.fday-t i{position:absolute;top:0;bottom:0;border-radius:5px;background:repeating-linear-gradient(135deg,var(--s-cme) 0 7px,var(--s-cme2) 7px 10px)}
.fday-b{position:absolute;top:0;bottom:0;border:1.5px dashed var(--s-cme);border-radius:5px}
.fday-ax{position:relative;height:18px;margin-top:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.fday-ax span{position:absolute;transform:translateX(-50%)}
.fday-ax span:first-child{transform:none}
.fday-ax span:last-child{transform:translateX(-100%)}
.fday-ax span:nth-child(2){transform:translateX(-100%);padding-right:3px}
.fday-ax span.r{transform:none;padding-left:3px}
.fday-c{margin:6px 0 0;font-size:13px;color:var(--muted)}
.fcards .mc b{font-variant-numeric:tabular-nums}

/* daylight saving: one card per out-of-step stretch, a dot per change in the city's colour */
.dtl{list-style:none;padding:0;margin:14px 0 12px;display:grid;gap:12px}
@media (min-width:720px){.dtl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dtl-g{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.dtl-b{margin:0 0 10px;font:500 15px/1.3 var(--display);color:var(--text)}
.dtl-g ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:grid;gap:10px}
.dtl-g li{position:relative;display:grid;gap:1px}
.dtl-g li::before{content:"";position:absolute;left:-21px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--fill)}
.dtl-d{font-size:13px;color:var(--muted)}
.dtl-w{font-size:15px}

/* broker server time: two clock faces */
.srv{display:grid;gap:12px 24px;align-items:center;margin:12px 0 10px}
@media (min-width:720px){.srv{grid-template-columns:260px minmax(0,1fr)}}
.clk2{margin:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--fill);max-width:300px}
.clk2 svg{display:block;width:100%;height:auto}
.clk2 .cf{fill:var(--bg);stroke:var(--text);stroke-width:2}
.clk2 .ct path{stroke:var(--muted);stroke-width:2}
.clk2 .ch{stroke-width:5;stroke-linecap:round;fill:none}
.clk2 .ch.ny{stroke:var(--s-ny)}
.clk2 .ch.sv{stroke:var(--orange)}
.clk2 .cm{stroke:var(--text);stroke-width:3;stroke-linecap:round;fill:none}
.clk2 .cc{fill:var(--text)}
.clk2 .eq{font:500 34px var(--display);fill:var(--text-2)}
.clk2 .cl1{font:600 14px "Inter",system-ui,sans-serif;fill:var(--text)}
.srv-t p{margin:0 0 10px}
.srv-c{display:flex;flex-wrap:wrap;gap:6px}
.srv-c span{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--fill);font-size:14px;font-weight:600}

/* check it in MetaTrader: two Specification excerpts behind chips */
.spx{margin:10px 0 12px}
.spx-f{margin:10px 0 0}
.spx-f[hidden]{display:none}
.spx-i{overflow-x:auto}
.spx-i img{display:block;width:100%;max-width:374px;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.spx-f figcaption{font-size:14px;color:var(--text-2);margin-top:6px}