/* Swiftedge Options Chain - same tokens and quiet chrome as Swiftedge Depth / Market Map */
:root{--bg:#090c11;--panel:#0e131a;--line:#1c2430;--line2:#2a3440;--fg:#e6edf3;--txt:#c9d1d9;--dim:#7d8792;--faint:#5c6570;
  --teal:#2ee6c8;--vio:#c55cf0;--blue:#60a5ff;--pink:#ff5caa;--amb:#ffb547;
  --mono:"Cascadia Mono",Consolas,monospace;--sans:"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:12px/1.4 var(--sans);overflow:hidden}
header{height:40px;display:flex;align-items:center;gap:15px;padding:0 12px;
  background:linear-gradient(180deg,#101720 0%,#0d1117 100%);border-bottom:1px solid var(--line);position:relative;z-index:20}
header>*{flex:0 0 auto;white-space:nowrap}
.spring{flex:1 1 auto}
#brand{display:flex;align-items:center;gap:9px;user-select:none}
#brand .mark{width:22px;height:19px;fill:#f2f5f8;stroke:#f2f5f8;stroke-width:5;stroke-linecap:round}
#brand .mark rect{stroke:none}
#brand .wm{font:500 16px "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;letter-spacing:.3px;color:#f2f5f8;line-height:1}
#brand .prod{font-weight:300;color:#8fa3b8}
.vrule{width:1px;height:17px;background:var(--line)}
.stat{color:var(--dim);font-family:var(--mono);font-size:11px}
.stat i{color:var(--fg);font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.sym{display:flex;align-items:center;gap:7px;letter-spacing:.2px}
#hPx{min-width:66px;display:inline-block}
.pulse{width:6px;height:6px;border-radius:50%;background:#00e676;box-shadow:0 0 0 0 rgba(0,230,118,.55);animation:beat 2.4s ease-out infinite}
.pulse.off{background:#5c6570;animation:none}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(0,230,118,.5)}70%{box-shadow:0 0 0 6px rgba(0,230,118,0)}100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

/* expiry tabs */
/* #tabw = scrolling tabs (.tsc, with < > buttons over the faded edges) + the "Expiries" list button */
#tabw{position:relative;display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;margin-right:6px}
#tabw .tsc{position:relative;display:flex;flex:0 1 auto;min-width:0}
#tabs{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;min-width:0}
#tabs::-webkit-scrollbar{display:none}
#tabs.ovf{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
#tabs.ovf.end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
#tabs.ovf.mid{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 34px),transparent)}
#tabs button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:32px;min-width:50px;padding:0 8px;
  background:transparent;border:1px solid transparent;border-radius:5px;color:#9aa4ae;font:600 11px/1.1 var(--mono);cursor:pointer;font-variant-numeric:tabular-nums}
#tabs button .s{font:500 8.5px/1 var(--mono);letter-spacing:.07em;color:var(--faint)}
#tabs button:hover{color:var(--fg);background:#121921}
#tabs button.on{border-color:var(--line2);background:#151d27;color:#f2f5f8}
#tabs button.on .s{color:var(--teal)}
#tabs button.on.m{box-shadow:inset 0 -2px 0 var(--teal)}
#tabs button.z .s{color:#ffcf8a}
#tabs .gap{width:1px;align-self:center;height:20px;background:var(--line);margin:0 4px;flex:0 0 auto}
.tsb{position:absolute;top:50%;z-index:2;display:none;width:20px;height:30px;margin-top:-15px;padding:0 0 2px;border:0;border-radius:5px;
  background:rgba(16,22,30,.88);color:#9aa4ae;font:600 17px/1 var(--mono);cursor:pointer}
.tsb.l{left:0}.tsb.r{right:0}
#tabw.cl .tsb.l,#tabw.cr .tsb.r{display:block}
.tsb:hover{color:var(--fg);background:#1c232c}
.xbtn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:24px;padding:0 8px;border:1px solid var(--line2);border-radius:5px;background:#0b1016;
  color:#9aa4ae;font:600 10.5px var(--mono);letter-spacing:.03em;cursor:pointer;white-space:nowrap}
.xbtn svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xbtn:hover{color:var(--fg);background:#121921}
.xbtn.more{color:#e6edf3;border-color:#3a4552}
.xbtn[aria-expanded="true"]{color:#f2f5f8;background:#151d27;border-color:#4a9eff}
.xbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
/* the "Expiries" list: every expiry as a chip, same multi-select as the tabs */
#expP{position:absolute;top:calc(100% + 4px);left:8px;z-index:30;width:min(540px,calc(100vw - 16px));max-height:calc(100vh - 80px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.7);padding:11px 12px 10px;
  font:12px/1.45 var(--sans);color:var(--txt);white-space:normal;scrollbar-width:thin;scrollbar-color:#2a3440 transparent}
#expP[hidden]{display:none}
#expP .xh{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
#expP .xh b{font:600 10.5px var(--mono);letter-spacing:.08em;color:var(--dim)}
#expP .xh span{font:10.5px var(--mono);color:var(--faint)}
#expL{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.xc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:40px;padding:0 6px;background:#0b1016;border:1px solid var(--line);
  border-radius:5px;color:#9aa4ae;font:600 11.5px/1.1 var(--mono);cursor:pointer;font-variant-numeric:tabular-nums}
.xc .s{font:500 8.5px/1 var(--mono);letter-spacing:.07em;color:var(--faint);white-space:nowrap}
.xc:hover{color:var(--fg);background:#121921}
.xc.on{border-color:var(--line2);background:#151d27;color:#f2f5f8}
.xc.on .s{color:var(--teal)}
.xc.on.m{box-shadow:inset 0 -2px 0 var(--teal)}
.xc.z .s{color:#ffcf8a}
#expP .xf{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font:10.5px var(--mono);color:var(--faint)}
#expP .xf span{flex:1 1 auto}
#expD{flex:0 0 auto}
/* not enough room for the header items + 5 tabs: the tabs get their own full-width second row (body.tabrow, set by chain.js) */
body.tabrow{display:flex;flex-direction:column}
body.tabrow header{flex-wrap:wrap;height:auto;min-height:40px;row-gap:0;padding-top:5px}
body.tabrow #tabw{order:20;flex:1 0 100%;padding:3px 0 4px;margin-right:0}
body.tabrow main{height:auto;flex:1 1 auto;min-height:0}

.hbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:5px;color:#9aa4ae;background:transparent;
  padding:4px 10px;font:600 11px var(--mono);cursor:pointer}
.hbtn:hover,.hbtn.on{background:#1c232c;color:var(--fg)}
.hbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
button:focus-visible{outline:1px solid #4a9eff}

main{position:relative;height:calc(100% - 40px);display:flex;flex-direction:column;overflow:hidden}
#hlw{flex:0 0 auto;padding:11px 18px 2px;min-height:52px;position:relative;z-index:5}
#hl{font:13.5px/1.5 var(--sans);color:var(--txt);max-width:1500px}
#hl b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
#hl .ex{color:#f2f5f8;font-weight:600}
#hl .sep{color:#3a4552;margin:0 7px}
#hl .bu{color:var(--teal);font-weight:600}
#hl .be{color:var(--vio);font-weight:600}
#hl .bid{color:var(--teal)} #hl .ask{color:var(--vio)}
#hlNote{margin-top:2px;font:10.5px var(--mono);color:var(--faint)}
.g{border-bottom:1px dotted rgba(201,209,217,.45);cursor:help}
#cvw{flex:1 1 auto;position:relative;min-height:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default;touch-action:none}
.linkbtn{position:absolute;top:3px;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 8px;border-radius:10px;
  background:rgba(14,19,26,.92);border:1px solid #2a3440;color:#7d8792;font:600 9.5px var(--mono);letter-spacing:.06em;cursor:pointer}
.linkbtn svg{width:16px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.linkbtn:hover{color:#e6edf3;border-color:#3a4552}
.linkbtn.on.part{color:#ffcf8a;border-style:dashed}
.linkbtn.on{color:#ffcf8a;border-color:rgba(255,181,71,.5);background:rgba(40,30,12,.85)}

/* footer: legend left, options money flow right */
#foot{flex:0 0 36px;display:flex;align-items:center;gap:18px;padding:0 14px;border-top:1px solid var(--line);background:#0b0f15;z-index:5}
#leg{display:flex;gap:16px;align-items:center;font:10.5px var(--mono);color:var(--dim);min-width:0;overflow:hidden;flex:1 1 auto}
#leg .it{display:flex;align-items:center;gap:6px;cursor:help;white-space:nowrap}
#leg .it:hover{color:var(--fg)}
#leg svg{display:block;flex:0 0 auto}
#flow{flex:0 0 auto;display:flex;gap:11px;align-items:center;font:10.5px var(--mono);color:var(--dim);cursor:help;font-variant-numeric:tabular-nums;white-space:nowrap}
#flow .t{letter-spacing:.06em}
#flow .bar{display:flex;width:240px;height:7px;border-radius:4px;overflow:hidden;background:#1e2530}
#flow .bar i{display:block;height:100%}
#flow b{font-weight:600}
#flow .d{color:var(--faint)}

/* how to read: Depth's About panel */
.panel{position:absolute;top:10px;right:14px;z-index:15;width:min(410px,calc(100vw - 40px));max-height:calc(100% - 60px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.7);padding:15px 18px 16px;
  font:13px/1.55 var(--sans);color:var(--txt);display:none;scrollbar-width:thin;scrollbar-color:#2a3440 transparent}
.panel.open{display:block}
.panel h2{font:600 15px/1.3 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;color:#f2f5f8;margin:0 30px 10px 0}
.panel h3{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px}
.panel .x{position:absolute;top:9px;right:9px;width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:#9aa4ae;font:20px/1 system-ui;cursor:pointer}
.panel .x:hover{background:#1c232c;color:var(--fg)}
.panel .row{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;margin:7px 0}
.panel .row svg{margin-top:3px}
.panel b{color:var(--fg)}
.panel .ex{margin-top:12px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#0a0e13;font-size:12.5px}
.panel .ex .k{font:600 10px var(--mono);letter-spacing:.08em;color:var(--dim);display:block;margin-bottom:3px}
.panel .fine{color:var(--faint);font-size:11.5px;margin-top:10px}

#tip{position:fixed;pointer-events:none;display:none;z-index:40;max-width:350px;background:var(--panel);border:1px solid var(--line2);border-radius:5px;
  padding:8px 10px;font:12px/1.5 var(--sans);color:var(--txt);box-shadow:0 4px 18px rgba(0,0,0,.65)}
#tip .h{display:block;font:600 11px var(--mono);color:var(--fg);margin-bottom:3px;letter-spacing:.02em}
#tip .sh{display:block;font-size:13px;margin:1px 0 4px;color:var(--fg)}
#tip .u{display:block;color:var(--faint);font-size:11px;margin-top:5px}
#tip b{color:var(--fg);font-weight:600}

@media (max-width:1500px){#leg .it:nth-child(n+6){display:none}}
@media (max-width:1250px){#hMpW{display:none}#leg .it:nth-child(n+4){display:none}#flow .bar{width:150px}}
@media (max-width:980px){#hIvW,.vrule{display:none}#leg{display:none}#flow{margin-left:auto}#brand .wm{font-size:14px}#hl{font-size:12.5px}}
@media (max-width:640px){.sym{display:none}#flow .t,#flow .d{display:none}}

/* indicator menu (Depth's "+ add indicator") and the dealer desk card */
#ind{position:absolute;left:12px;top:0;z-index:7;display:flex;align-items:center;gap:8px;font:11px var(--mono)}
.indb{background:transparent;border:0;color:#5c6570;font:11px var(--mono);cursor:pointer;padding:2px 0}
.indb b{color:#7d8792;font-weight:600}
.indb:hover,.indb:hover b{color:var(--fg)}
#ind .chip{display:inline-flex;align-items:center;gap:6px;color:#c9d1d9;background:rgba(20,27,36,.9);border:1px solid var(--line2);border-radius:10px;padding:0 4px 0 9px;height:18px;font:10.5px var(--mono)}
#ind .chip button{background:transparent;border:0;color:#7d8792;font:14px/1 system-ui;cursor:pointer;padding:0 3px}
#ind .chip button:hover{color:#fff}
#indM{position:absolute;top:20px;left:0;display:none;width:300px;background:var(--panel);border:1px solid var(--line2);border-radius:7px;box-shadow:0 10px 30px rgba(0,0,0,.6);padding:10px 12px;font:12px/1.45 var(--sans);color:var(--txt)}
#indM.open{display:block}
#indM label{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
#indM input{margin-top:3px;accent-color:#2ee6c8}
#indM small{color:var(--dim);font-size:11.5px}
#dcard{position:absolute;top:22px;z-index:6;display:none;width:min(330px,calc(100% - 24px));background:rgba(11,15,20,.9);border:1px solid var(--line2);border-radius:8px;padding:9px 11px 8px;
  font:11px/1.45 var(--mono);color:var(--txt);box-shadow:0 8px 26px rgba(0,0,0,.45)}
#dcard.on{display:block}
#dcard .t{display:flex;align-items:center;gap:8px;font:600 12px var(--mono);margin:0 0 6px;cursor:help}
#dcard .t i{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
#dcard .t em{margin-left:auto;font:500 9px var(--mono);font-style:normal;color:#5c6570;letter-spacing:.05em}
#dcard .r{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-top:1px solid rgba(42,52,64,.5);cursor:help}
#dcard .r span{color:#7d8792}
#dcard .r b{font-weight:600;color:#e6edf3;text-align:right;font-variant-numeric:tabular-nums}
#dcard .f{margin-top:5px;color:#5c6570;font-size:9.5px}
#dcard .w{color:#7d8792}
#dcard .seg{position:absolute;right:9px;top:-10px;display:flex}
#dcard .seg button{background:#0e131a;border:1px solid var(--line2);color:#5c6570;font:9.5px var(--mono);padding:1px 7px;cursor:pointer;margin-left:-1px}
#dcard .seg button:first-child{border-radius:4px 0 0 4px}
#dcard .seg button:last-child{border-radius:0 4px 4px 0}
#dcard .seg button.on{color:#8fc4ff;border-color:#4a9eff;position:relative;z-index:1}

/* toolbar toggles (Depth style) */
.tog{cursor:pointer;font-weight:600;color:var(--faint);user-select:none;font-size:10.5px;letter-spacing:.04em}
.tog.on{color:#00e676}
.tog:hover{color:var(--fg)}
.sym .pp{margin-left:6px;color:var(--dim)}
#hIx{min-width:62px;display:inline-block}
/* mobile view switch */
#mv{position:absolute;right:10px;top:0;z-index:7;display:none}
#mv button{background:#0e131a;border:1px solid var(--line2);color:#7d8792;font:600 10px var(--mono);padding:2px 9px;margin-left:-1px;cursor:pointer}
#mv button:first-child{border-radius:9px 0 0 9px}
#mv button:last-child{border-radius:0 9px 9px 0}
#mv button.on{color:#e6edf3;border-color:#4a9eff;background:#141c27;position:relative;z-index:1}
@media (max-width:1700px){.sym .pp{display:none}}
@media (max-width:900px){
  header{gap:9px;padding:0 8px}
  #hlw{padding:8px 12px 2px;min-height:0}
  #hl{font-size:12px;line-height:1.45}
  #hlNote{display:none}
  .hbtn .lbl{display:none}
  .hbtn{padding:4px 7px}
  #tabs button{min-width:44px;padding:0 6px}
  #ind{top:0}
  #dcard{font-size:10px;width:min(300px,calc(100% - 20px))}
  #foot{flex-basis:30px}
  #flow .bar{width:90px}
}
@media (max-width:640px){
  /* phones: the expiry row gets its own full-width line under the header and scrolls sideways (tap = add / remove, long press = only) */
  header{flex-wrap:wrap;height:auto;min-height:40px;row-gap:0;padding-top:4px}
  #tabw{order:20;flex:1 0 100%;padding:2px 0 5px;margin-right:0}
  body{display:flex;flex-direction:column}
  main{height:auto;flex:1 1 auto;min-height:0}
  #brand .wm{display:none}
  .sym{display:flex}
  #hTips,#hPrices{font-size:9.5px}
  #flow .t,#flow .d{display:none}
}

.sym .fw{margin-left:6px;color:var(--dim)}
@media (max-width:1250px){.sym .fw{display:none}}

/* site navigation (swiftedge.uk): logo -> home, Depth | Options switch, ? -> guide */
a#brand{text-decoration:none;color:inherit;border-radius:5px}
a#brand:focus-visible,#psw a:focus-visible,.hq:focus-visible,.panel a:focus-visible{outline:1px solid #4a9eff;outline-offset:2px}
#brand .prod{display:none}
#psw{display:flex;align-items:center;height:22px;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#0b1016}
#psw a{display:flex;align-items:center;gap:6px;height:100%;padding:0 9px;font:600 10.5px var(--mono);letter-spacing:.04em;color:#7d8792;text-decoration:none}
#psw a+a{border-left:1px solid var(--line2)}
#psw a:hover{color:var(--fg);background:#121921}
#psw a i{width:6px;height:6px;border-radius:50%;background:#3a4552}
#psw a[aria-current]{color:#f2f5f8;background:#151d27}
#psw a.d:hover i{background:var(--teal)}
#psw a.o[aria-current] i{background:var(--vio);box-shadow:0 0 8px rgba(197,92,240,.6)}
.hq{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--line2);border-radius:50%;
  color:#9aa4ae;font:600 11px/1 var(--mono);text-decoration:none}
.hq:hover{color:var(--fg);background:#1c232c}
.panel .hf{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
.panel a{color:#8fc4ff;text-decoration:none}
.panel a:hover{text-decoration:underline}
@media (max-width:1100px){#brand .wm{display:none}}
/* phones: a compact Depth link takes the room of the "BTC index" label (the live value stays); the guide is also linked in How to read */
@media (max-width:640px){header{gap:7px}#psw a{padding:0 6px;font-size:9.5px;gap:4px}#hSym>.g{display:none}.hq{width:18px;height:18px;font-size:10px}
  /* only the way to the other app is shown (the page itself is Options); teal dot = Depth */
  #psw a[aria-current]{display:none}#psw a.d i{background:var(--teal)}}
@media (max-width:480px){.hq{display:none}#psw{height:20px}#psw a{padding:0 5px}}

/* BARS switch (Open interest | Buy · Sell) and the Buy · Sell key line under the header */
.bsw{display:inline-flex;align-items:center;gap:6px}
.bsw .bl{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--faint)}
.bsw .seg{display:inline-flex;height:22px;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#0b1016}
.bsw button{background:transparent;border:0;color:#7d8792;font:600 10.5px var(--mono);letter-spacing:.03em;padding:0 9px;cursor:pointer;white-space:nowrap}
.bsw button+button{border-left:1px solid var(--line2)}
.bsw button:hover{color:var(--fg);background:#121921}
.bsw button.on{color:#f2f5f8;background:#151d27}
.bsw button[data-b="bs"].on{background:linear-gradient(90deg,var(--teal) 50%,var(--vio) 50%) bottom/100% 2px no-repeat,#151d27}
.bsw .s1,.bsw .s2,#bkey .sm{display:none}
#bkey{display:none;flex:0 0 auto;gap:4px 22px;padding:6px 18px 0;font:10.5px/1.35 var(--mono);color:var(--dim);position:relative;z-index:5}
body.bs #bkey{display:flex;flex-wrap:wrap}
#bkey>span{border-left:2px solid;padding-left:7px;white-space:nowrap}
#bkey .b{border-color:var(--teal)}
#bkey .s{border-color:var(--vio)}
#bkey b{color:var(--txt);font-weight:600}
#bkey i{font-style:normal}
/* the expiry tabs keep their room: shorter switch labels as the header narrows (forward price hides from 1500 px instead of 1250 px) */
@media (max-width:1800px){.bsw .l1{display:none}.bsw .s1{display:inline}}
@media (max-width:1500px){.bsw .bl,.sym .fw{display:none}}
@media (max-width:1250px){.bsw .l2,#bkey .lg{display:none}.bsw .s2,#bkey .sm{display:inline}}
@media (max-width:900px){#bkey{padding:5px 12px 0;gap:3px 14px}}
@media (max-width:640px){.bsw .bl{display:none}.bsw .seg{height:20px}.bsw button{padding:0 6px;font-size:9.5px}
  #bkey{display:none;font-size:9.5px;gap:2px 10px}body.bs #bkey{display:grid;grid-template-columns:repeat(2,minmax(0,max-content))}}