/* orders.css - the order types page's own rules on top of tools.css (tools/order-types/). Gate 3 (Brendon: "bars
   rather than lines ... avoid blocks of text"): the chart draws Bid candles on an ink card, and the article teaches
   with small pictures (six candle cards, a 2 x 2, the Bid and the Ask, the stop-limit's steps, the stops level, gaps)
   instead of paragraphs. Nothing in tools.css, guide.css or site.css is redefined; the colours are theirs. */

/* ---- the chart on its ink card ---- */
.ov-b .desk-in>.ink{padding:16px}
.ink .btn.ghost{background:transparent;color:var(--band-text);box-shadow:inset 0 0 0 2px var(--band-text)}
.ink .btn.ghost:hover{background:rgba(243,236,223,.1)}
/* an element inside the chart that is switched off keeps its place in the markup */
.ov-svg [display=none]{display:none}
.ov-line:focus,.ov-price:focus{outline:none}
/* the candles: teal when the Bid closed at or above its open, orange below, as the stop chart of the lot size page */
.ov-wk{stroke-width:1.4}
.ov-up .ov-wk{stroke:var(--o-buy)}.ov-up .ov-bd{fill:var(--o-buy)}
.ov-dn .ov-wk{stroke:var(--o-sell)}.ov-dn .ov-bd{fill:var(--o-sell)}
/* the order lines sit over the candles, a little heavier than a wick */
.ov-line .ov-l{stroke-width:2.5}
.ov-svg .ov-ask{stroke:var(--w-text);stroke-opacity:.75}
.ov-held{fill:var(--w-2)}
/* Play and Reset, then the nudges on the same row */
.ov-b .ov-btns{align-items:center;gap:10px 16px;margin:14px 0 6px}
.ov-b .ov-nudge{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0}
.ov-b .ov-nudge[hidden],.ov-b .ov-nudge .ng[hidden]{display:none}
.ov-b .ov-nudge .ng{display:inline-flex;align-items:center;gap:4px}
.ov-b .ov-nudge .nl{font-size:14px;color:var(--w-2);margin-right:2px}
.ov-b .ov-nudge button{min-width:44px;padding:0;font-size:13px}
.ov-b .ov-nudge button:hover{border-color:var(--w-2)}
/* the status line keeps its height while the sentence changes, so nothing below it jumps */
.ov-b .ov-status{min-height:5.2em;margin:6px 0 12px}
.ov-mt4[hidden]{display:none}
/* the chart's key under the status line */
.ov-legend{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--w-line);font-size:14px;color:var(--w-2)}
.ov-legend li{display:flex;align-items:center;gap:7px;white-space:nowrap}
/* the ring where a stop limit's stop price traded: hollow, so it reads over a candle of its own colour */
.ov-svg .ov-trig{fill:var(--w-in);stroke-width:2.5}
.ov-legend i{flex:0 0 auto;display:inline-block}
.lg-c{display:inline-flex !important;gap:3px;align-items:flex-end;height:16px}
.lg-c b{display:block;width:6px;height:12px;border-radius:1px;background:var(--o-buy)}
.lg-c b+b{height:8px;background:var(--o-sell);margin-bottom:4px}
.lg-a{width:22px;border-top:2px dashed var(--w-text);opacity:.75}
.lg-o{width:22px;height:4px;border-radius:2px;background:var(--o-buy)}
.ov-legend kbd{white-space:nowrap;font:600 12px/1 "Inter",system-ui,sans-serif;padding:3px 6px;border:1px solid var(--w-line);border-radius:5px;background:var(--w-in);color:var(--w-text);margin-right:2px}
.ov-legend .tipw{margin-left:4px}
/* the tip sits at the right end of the key: it opens leftwards, so it never reaches past the screen */
.ov-legend .tipb{left:auto;right:-6px}
.ov-legend .tipb::after{left:auto;right:12px}

/* the side card: the six types as the panel's teal and orange pending buttons, buys left and sells right */
.ov-types label.ot-buy{box-shadow:inset 3px 0 0 var(--o-buy)}
.ov-types label.ot-sell{box-shadow:inset 3px 0 0 var(--o-sell)}
.ov-types label.ot-buy:has(input:checked){background:var(--o-buy);border-color:var(--o-buy);color:#17181d}
.ov-types label.ot-sell:has(input:checked){background:var(--o-sell);border-color:var(--o-sell);color:#17181d}
.ov-rule{margin-top:14px}
.ov-nm{font-size:13px;color:var(--w-mute);margin:10px 0 0}

/* ---- the article's pictures: candles teal up and orange down on paper, the buy and sell colours of the panel ---- */
.dg{display:block;width:100%;height:auto;overflow:visible;font:400 13px "Inter",system-ui,sans-serif;
  --cu:var(--tl);--cd:#c2461f;--buy:var(--tl);--sell:#c2461f;--tagt:#fff}
@media (prefers-color-scheme:dark){.dg{--cd:#ef6a40;--sell:#ef6a40;--tagt:#17181d}}
.dg .cu line{stroke:var(--cu);stroke-width:1.4}.dg .cu rect{fill:var(--cu)}
.dg .cd line{stroke:var(--cd);stroke-width:1.4}.dg .cd rect{fill:var(--cd)}
.dg .ln{stroke-width:2}
.dg .ln.buy{stroke:var(--buy)}.dg .ln.sell{stroke:var(--sell)}
.dg .ln.stop{stroke-dasharray:6 4}
.dg .ln.ask{stroke:var(--text-2);stroke-width:1.5;stroke-dasharray:5 4}
.dg .ln.bad{stroke:var(--muted);stroke-dasharray:3 4}
.dg .fd{stroke:var(--bg);stroke-width:2}
.dg .fd.buy{fill:var(--buy)}.dg .fd.sell{fill:var(--sell)}
.dg .tr{fill:var(--bg);stroke-width:2.5}
.dg .tr.buy{stroke:var(--buy)}.dg .tr.sell{stroke:var(--sell)}
.dg .tagb.buy{fill:var(--buy)}.dg .tagb.sell{fill:var(--sell)}
.dg .tagb.ask{fill:var(--fill-2)}
.dg .tagb.buy.pend,.dg .tagb.sell.pend{fill:var(--bg);stroke-width:1.5;stroke-dasharray:4 3}
.dg .tagb.buy.pend{stroke:var(--buy)}.dg .tagb.sell.pend{stroke:var(--sell)}
.dg .tagt{fill:var(--tagt);font-weight:600;font-size:13px}
.dg .tagt.sm{font-size:12px}
.dg .tagb.ask+.tagt{fill:var(--text)}
.dg .tagb.buy.pend+.tagt{fill:var(--buy)}.dg .tagb.sell.pend+.tagt{fill:var(--sell)}
.dg .lbl{fill:var(--text-2);font-size:13px}
.dg .lbl.ask{fill:var(--text);font-weight:600}
.dg .lbl.mute{fill:var(--muted)}
.dg .askw{stroke:var(--text-2);stroke-width:2;stroke-dasharray:4 3}
.dg .brk{fill:none;stroke:var(--orange);stroke-width:1.5}
.dg .num{fill:var(--orange)}
.dg .numt{fill:#fff;font-weight:700;text-anchor:middle;font-size:13px}
.dg .band{fill:color-mix(in srgb,var(--orange) 13%,transparent)}
.dg .band-t{fill:var(--orange-t);font-weight:600}
.dg .dim{stroke:var(--text-2);stroke-width:1.5;fill:none}
.dg .xm{stroke:var(--orange-t);stroke-width:2.5;stroke-linecap:round}
.dg .ck{stroke:var(--tl);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dg .wkend{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:2 4}
.dg .nowl{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}

/* the try buttons: the article sets up a lesson on the chart above */
.try{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--text);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin:4px 0 16px}
.try::before{content:"\2191";color:var(--orange-t);font-weight:700}
.try[hidden]{display:none}
.try:hover{background:var(--fill)}
.try:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---- 1. the six cards ---- */
.otc{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0 8px}
@media (min-width:720px){.otc{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.oc{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--fill);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.oc:hover{border-color:var(--text-2)}
.oc:focus-visible,.kq-cell:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.oc[aria-pressed=true],.kq-cell[aria-pressed=true]{border-color:var(--orange);box-shadow:inset 0 3px 0 var(--orange)}
.oc-t{display:flex;align-items:center;gap:8px;font:500 17px/1.2 var(--display)}
.oc-t::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:3px;background:var(--tl)}
.oc-sell .oc-t::before{background:#c2461f}
.oc-t small{font:600 11px/1 "Inter",system-ui,sans-serif;padding:3px 5px;border-radius:4px;background:var(--fill-2);color:var(--text-2)}
.oc-svg{display:block;border-radius:8px;background:var(--bg);padding:4px}
.oc-cap{font-size:14px;line-height:1.35;color:var(--text-2)}
/* on a phone the cards are small: the line styles of the key below tell the stop from the limit */
@media (max-width:559px){.oc{padding:10px}.oc-t{font-size:15.5px}.oc-cap{font-size:13.5px}.oc-g .tagb,.oc-g .tagt{display:none}}
.oc-key{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0;font-size:13px;color:var(--muted)}
.oc-key li{display:flex;align-items:center;gap:6px}
.oc-key i{display:inline-block;flex:0 0 auto}
.k-now{width:0;height:14px;border-left:1.5px dashed var(--muted)}
.k-stop{width:20px;border-top:2px dashed var(--tl)}
.k-ring{width:10px;height:10px;border-radius:50%;border:2px solid var(--tl)}
.k-dot{width:11px;height:11px;border-radius:50%;background:var(--tl)}
.fold{margin:6px 0 20px;border:1px solid var(--line);border-radius:10px;background:var(--fill)}
.fold>summary{padding:12px 16px;font:500 16px/1.3 var(--display);cursor:pointer}
.fold .tw{margin:0 12px 12px}
.tool-art .fold .tw table{min-width:520px}

/* ---- 2. the 2 x 2 ---- */
.kq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.kq-h{font:500 15px/1.25 var(--display);color:var(--text-2);padding:0 4px;border-bottom:2px solid var(--orange);padding-bottom:6px}
.kq-cell{display:grid;gap:3px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--fill);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.kq-cell:hover{border-color:var(--text-2)}
.kq-cell .dg{background:var(--bg);border-radius:8px;margin-bottom:6px;max-height:112px}
.kq-cell b{font:500 17px/1.2 var(--display)}
.kq-cell>span:last-child{font-size:14px;color:var(--text-2);line-height:1.35}
.kq-s{justify-self:start;font:600 11px/1 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border-radius:4px;color:#fff;background:var(--tl)}
.kq-s.sell{background:#c2461f}
@media (prefers-color-scheme:dark){.kq-s{color:#17181d}.kq-s.sell,.oc-sell .oc-t::before{background:#ef6a40}}
.vs2{display:grid;gap:10px;margin:4px 0 16px}
@media (min-width:720px){.vs2{grid-template-columns:1fr 1fr}}
.vs2 p{margin:0;padding:10px 14px;border-radius:10px;background:var(--fill);font-size:15px;box-shadow:inset 4px 0 0 var(--tl)}
.vs2 p+p{box-shadow:inset 4px 0 0 var(--orange)}
.wrong{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:12px 16px 0;border:1px dashed var(--orange);border-radius:12px;margin:0 0 18px}
.wrong p{flex:1 1 280px;margin:0 0 12px;font-size:15px}
.wrong p b{font-family:var(--display);font-weight:500;font-size:17px;margin-right:4px}
.wrong .try{margin:0 0 12px}

/* ---- 3. the Bid and the Ask ---- */
.bak{display:grid;gap:8px;list-style:none;padding:0;margin:14px 0 12px}
@media (min-width:720px){.bak{grid-template-columns:repeat(3,1fr)}}
.bak li{display:grid;gap:2px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--fill)}
.bak b{font:500 19px/1.2 var(--display)}
.bak span{font-size:14px;color:var(--text-2)}
.bak li:nth-child(2){box-shadow:inset 0 3px 0 var(--tl)}
.bak li:nth-child(3){box-shadow:inset 0 3px 0 var(--orange)}
.ba{margin:14px 0 8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.ba .dg{max-width:560px;background:var(--bg);border-radius:8px}
.ba .dg .lbl,.ba .dg .tagt{font-size:14px}
.ba figcaption{margin-top:10px}
.ba-keys{counter-reset:k;list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.ba-keys li{counter-increment:k;position:relative;padding-left:34px;font-size:15px}
.ba-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}
.ba-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted)}
.ba-leg i{display:inline-block;width:8px;height:16px}
.lg-solid{background:#c2461f;border-radius:1px}
.lg-dash{width:0 !important;border-left:2px dashed var(--text-2);margin-left:8px}
@media (prefers-color-scheme:dark){.lg-solid{background:#ef6a40}}

/* ---- 4. the stop-limit's steps (the steps of tools.css, with a picture in each) ---- */
.slp ol{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.slp li .dg{margin:4px 0;background:var(--bg);border-radius:8px}
.slp li.lit .dg{background:var(--bg)}

/* ---- 5. MetaTrader 5 against 4 ---- */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.cmp-c{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--fill);min-width:0}
.cmp-h{display:block;font:500 17px/1.2 var(--display);margin:2px 2px 10px}
.cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cmp li{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 8px;border-radius:8px;background:var(--bg);font-size:14.5px;line-height:1.2}
.cmp li span{display:grid;gap:1px}
.cmp li small{font-size:12px;color:var(--orange-t);font-weight:600}
.cmp li.held{box-shadow:inset 3px 0 0 var(--orange)}
.cmp i{flex:0 0 auto;position:relative;width:18px;height:18px;border-radius:50%;background:var(--tl)}
.cmp i.ok::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cmp i.pn{border-radius:4px;background:var(--orange)}
.cmp i.pn::after{content:"";position:absolute;left:4px;right:4px;top:5px;height:2px;background:#fff;box-shadow:0 4px 0 #fff}
@media (prefers-color-scheme:dark){.cmp i.ok::after{border-color:#17181d}.cmp i.pn::after{background:#17181d;box-shadow:0 4px 0 #17181d}}
.shot{margin:14px 0 8px}
.shot img{display:block;width:100%;max-width:440px;height:auto;border:1px solid var(--line);border-radius:8px}
.shot figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* ---- 6. expiry and fill policy as icon cards ---- */
.icards{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:0;margin:12px 0}
@media (min-width:720px){.icards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.icards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ic{display:grid;gap:4px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--fill);margin:0}
.ic svg{width:34px;height:34px;fill:none;stroke:var(--tl);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.ic svg.fp{width:64px;height:24px;stroke-width:1.2;margin:5px 0 9px}
.fp .on rect{fill:var(--tl);stroke:none}
.fp .off rect{fill:none;stroke:var(--muted)}
.fp .wait rect{fill:none;stroke:var(--tl);stroke-width:1.5;stroke-dasharray:2 2}
.fp .x{stroke:var(--orange-t);stroke-width:1.5}
.ic b{font:500 16px/1.25 var(--display)}
.ic span{font-size:14px;color:var(--text-2);line-height:1.35}
.tool-art h3{font-size:19px;margin:20px 0 6px}

/* ---- 7. the stops level ---- */
.stf{margin:14px 0 8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.stf .dg{max-width:460px;background:var(--bg);border-radius:8px}
.stf figcaption{font-size:14px;color:var(--text-2);margin-top:8px}
.chipl{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 12px}
.chipl li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--fill);font-size:14px;margin:0}

/* ---- 8. gaps and slippage ---- */
.gp2{display:grid;gap:12px;margin:14px 0}
@media (min-width:720px){.gp2{grid-template-columns:1fr 1fr}}
.gp{margin:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.gp .dg{background:var(--bg);border-radius:8px}
.gp figcaption{display:grid;gap:4px;margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--text-2)}
.gp figcaption b{font:500 17px/1.25 var(--display);color:var(--text)}

/* the Specification excerpt: its middle cut out, so it fits a phone at its own size (no sideways scroll) */
.spec.os .spec-img{max-width:358px;min-width:0}

/* the table of the six types keeps its columns on a phone and scrolls in its box (tools.css) */
.tool-art .tw table{min-width:520px}