/* lot.css - the lot size calculator's own rules beyond tools.css (tools/lot-size-calculator/). Gate 3 (TL-11,
   Brendon: "modernize it in a panel form similar in styling to the trading panel"): the calculator is a dark panel
   like Stopline's own (rows of label, field, minus and plus, the unit beside; tabs; the answer at the foot), with the
   stop chart beside it. The panel keeps its dark colours in the light page too, as the product does on any chart. */

/* ---- the panel ---- */
.lot-grid{display:grid;gap:20px;align-items:start}
@media (min-width:1000px){.lot-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:28px}}
.tp{--w-bg:#24252b;--w-in:#121317;--w-line:#3a3c44;--w-text:#f3ecdf;--w-2:#c9c3b6;--w-mute:#9a9ca4;--w-acc:#ef6a40;
  --p-btn:#3a3c44;--p-btn-h:#4b4d56;--p-cream:#f3ead8;--p-teal:#34c6b5;--p-orange:#ef6a40;
  background:var(--w-bg);color:var(--w-text);border:1px solid #33353c;border-radius:14px;box-shadow:0 18px 40px rgba(23,24,29,.18)}
.tp a{color:var(--w-text)}
.tp-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:16px 16px 14px}
.tp-head select{font-size:18px;font-weight:600;min-height:48px}
.tp-l{display:flex;align-items:center;gap:6px;min-width:0}
.tp-l label{font-size:15px;color:var(--w-2);white-space:nowrap}
.tp-tabs{display:flex;border-top:1px solid var(--w-line);border-bottom:1px solid var(--w-line);background:#1d1e23}
.tp-tabs[hidden]{display:none}
.tp-tabs [role=tab]{flex:1 1 0;min-height:48px;padding:0 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--w-mute);font:inherit;font-size:15px;cursor:pointer}
.tp-tabs [role=tab]:hover{color:var(--w-text)}
.tp-tabs [role=tab][aria-selected=true]{color:var(--w-text);background:var(--w-bg);border-bottom-color:var(--p-orange);font-weight:600}
.tp-tabs [role=tab]:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.tp-pane{padding:16px}
.tp-pane[hidden]{display:none}
.tp-row{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,186px);gap:4px 10px;align-items:center;margin-bottom:12px}
.tp-row .read{grid-column:2/-1;margin:0;min-height:0}
.tp-row .read:not(:has(span:not([hidden]))){display:none}
.tp-v{display:flex;gap:6px;min-width:0}
.tp .tp-v input{flex:1 1 auto;min-width:0;height:50px;text-align:right;font-size:22px;font-variant-numeric:tabular-nums;padding:0 12px;border-color:#2b2d33}
.tp .stp{flex:0 0 44px;height:50px;border:0;border-radius:8px;background:var(--p-btn);color:var(--w-text);font:500 24px/1 "Inter",system-ui,sans-serif;cursor:pointer}
.tp .stp:hover{background:var(--p-btn-h)}
.tp .stp:active{transform:translateY(1px)}
.tp-u{display:flex;align-items:center;gap:6px;min-width:0}
.tp-u select{height:50px}
@media (max-width:559px){
  .tp-row{grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:12px}
  .tp-row .read{grid-column:auto}
}
.tp-note{font-size:14px;color:var(--w-2);margin:0 0 12px}
.tp-grid{display:grid;gap:10px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.tp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-cell{display:grid;gap:4px;align-content:start;min-width:0}
.tp-cell label{font-size:14px}
.tp-cell input{text-align:right;font-variant-numeric:tabular-nums}
.lot-b .tp-grid .mt-only{display:none}
.lot-b.mt-on .tp-grid .mt-only{display:grid}
.tp-sw{margin-top:12px}
.lot-b [data-note],.lot-b [data-tvp]{margin-top:8px}
.tp .hint{color:var(--w-mute)}
.lot-b .rates-line a{color:inherit}
.rates{display:grid;gap:10px 12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:10px}

/* the answer at the foot of the panel, like the panel's summary line */
.tp-out{background:#17181d;border-top:1px solid var(--w-line);border-radius:0 0 13px 13px;padding:16px 18px 18px}
.tp-out .out-h{color:var(--w-2)}
.lot-b .lot-big{color:#fbf8f2}
.lot-b .lot-big small{margin-left:.05em}
.lot-b .lot-res p{color:var(--w-2)}
.lot-b .lot-res b{color:var(--w-text)}
.lot-b.is-warn .lot-big{color:var(--w-mute)}
.meter{margin-top:12px}
.meter-bar{display:block;height:8px;border-radius:4px;background:#2c2e35;overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;background:var(--p-teal);border-radius:4px;transition:width .25s}
.meter.over .meter-bar i{background:var(--p-orange)}
.meter-s{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--w-mute);font-style:normal}
.meter-s i{font-style:normal}
@media (max-width:999px){
  .lot-b .tp-out{border-radius:0 0 13px 13px}
  .lot-b .meter{display:none}
  .lot-b .lot-res .lot-warn{grid-column:auto;padding:4px 8px}
  .lot-b .lot-res .lot-long{display:none}
  .lot-b .lot-res .hint{grid-column:1/-1;font-size:14px}
}
@media (min-width:1000px){.lot-b .lot-res{min-height:118px;align-content:start}}

/* ---- the stop chart beside the panel ---- */
.lot-side{display:grid;gap:14px;min-width:0}
.stopfig{margin:0;border:1px solid #33353c;border-radius:14px;background:#17181d;color:#f3ecdf;padding:14px 14px 10px}
.stopfig figcaption{display:grid;gap:2px;margin:0 2px 10px;font-size:14px;color:#c9c3b6}
.stopfig figcaption b{font:500 19px/1.2 var(--display);color:#f3ecdf}
.sf-box{position:relative;height:340px;touch-action:pan-y}
.sf{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf-h{position:absolute;left:0;right:0;height:34px;margin-top:-17px;cursor:ns-resize;touch-action:none;border-radius:6px}
.sf-h:focus-visible{outline:3px solid var(--orange);outline-offset:0}
.sf .c-up{fill:#34c6b5;stroke:#34c6b5}
.sf .c-dn{fill:#ef6a40;stroke:#ef6a40}
.sf .wk{stroke-width:1.2}
.sf .grid{stroke:#2a2c33;stroke-width:1}
.sf .entry{stroke:#f3ecdf;stroke-width:1.5;stroke-dasharray:6 5}
.sf .stopl{stroke:#ef6a40;stroke-width:2.5}
.sf .zone{fill:rgba(239,106,64,.16)}
.sf .tag{font:600 13px "Inter",system-ui,sans-serif}
.sf .tag-e{fill:#f3ecdf}
.sf .tag-s{fill:#17181d}
.sf .tagbox-s{fill:#ef6a40}
.sf .tagbox-e{fill:#33353c}
.sf .risk{fill:#fbe2d8;font:600 14px "Inter",system-ui,sans-serif}
.lot-side .keep{margin-top:0}
.lot-fine{margin:0}
@media (max-width:999px){.sf-box{height:260px}}