/* ═══════════════════════════════════════════════════════════════
   obsidian.css — the Obsidian look (Settings → Display → Obsidian style; on unless you switch it off,
   which puts the class ob-off on <body>: ui-workspace.js → Display).
   In the style of the open-source Obsidian UI library: flat near-black boxes with a double outline
   (black outside, grey inside), 4px corners, a monospaced face for labels and values, switches,
   checkboxes with a drawn tick, sliders that are bars with their value written inside, tab boxes
   whose open tab joins the box under it, group boxes with a title over a line. Our own CSS; none
   of the library's code is used (it is Lua, for Roblox).
   Where it applies: the controls everywhere (checkboxes, switches, sliders, fields, segmented tabs),
   the perps terminal's panels, and the Settings window. Everything else keeps Superclan's own look.
   The accent is the one picked in Settings → Display (Obsidian there is the library's own purple).
   ═══════════════════════════════════════════════════════════════ */
body:not(.ob-off){
  --ob-bg:#0f0f0f;                 /* boxes and the window */
  --ob-main:#191919;               /* controls and idle tabs */
  --ob-hi:#202020;                 /* a control under the pointer */
  --ob-line:#282828;               /* the inner outline */
  --ob-dark:#000;                  /* the outer outline */
  --ob-text:#fff;
  --ob-dim:rgba(255,255,255,.5);   /* idle labels */
  --ob-acc:var(--brand);
  --ob-r:4px;
}

/* ── checkboxes: a dark square, a drawn tick ── */
body:not(.ob-off) input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;display:inline-block;vertical-align:middle;width:16px;height:16px;margin:0;
  border-radius:3px;background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);cursor:pointer;transition:border-color .15s,background .15s}
body:not(.ob-off) input[type=checkbox]::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--ob-text);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transition:transform .16s var(--spring)}
body:not(.ob-off) input[type=checkbox]:checked{border-color:#3a3a3a;background:#1f1f1f}
body:not(.ob-off) input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}
body:not(.ob-off) input[type=checkbox]:hover:not(:disabled){border-color:#3e3e3e}
body:not(.ob-off) input[type=checkbox]:focus-visible{outline:2px solid var(--ob-acc);outline-offset:2px}
body:not(.ob-off) input[type=checkbox]:disabled{opacity:.4;cursor:default}

/* ── on/off settings: the switch ── */
body:not(.ob-off) .srow > input[type=checkbox]{width:32px;height:18px;border-radius:9px;background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);
  transition:background .18s,border-color .18s}
body:not(.ob-off) .srow > input[type=checkbox]::after{left:2px;top:2px;width:12px;height:12px;border:0;border-radius:50%;background:var(--ob-text);box-shadow:none;transform:none;
  transition:transform .22s var(--spring)}
body:not(.ob-off) .srow > input[type=checkbox]:hover:not(:disabled){border-color:#3e3e3e;box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .srow > input[type=checkbox]:checked{background:var(--ob-acc);border-color:var(--ob-acc)}
body:not(.ob-off) .srow > input[type=checkbox]:checked::after{transform:translateX(14px);background:#fff}

/* ── sliders: a bar that fills from the left (--fill, kept by UI.slFill), its value written inside when the page gives one ── */
body:not(.ob-off) input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:18px;margin:6px 0;padding:0;border-radius:var(--ob-r);outline:0;cursor:ew-resize;
  background:linear-gradient(90deg,var(--ob-fillc,var(--ob-acc)) 0 var(--fill,0%),var(--ob-main) var(--fill,0%) 100%);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) input[type=range]::-webkit-slider-runnable-track{height:16px;background:none;border:0}
body:not(.ob-off) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:16px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body:not(.ob-off) input[type=range]::-moz-range-track{height:16px;background:none;border:0}
body:not(.ob-off) input[type=range]::-moz-range-thumb{width:3px;height:16px;border:0;border-radius:0;background:transparent;box-shadow:none}
body:not(.ob-off) input[type=range]:hover{border-color:#3e3e3e}
body:not(.ob-off) input[type=range]:focus-visible{outline:2px solid var(--ob-acc);outline-offset:2px}
body:not(.ob-off) input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:none}
.ob-sl{position:relative}
.ob-v{display:none}
body:not(.ob-off) .ob-sl > .ob-v{display:block;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;text-align:center;
  font:500 11.5px/1 var(--mono);color:var(--ob-text);text-shadow:0 1px 2px rgba(0,0,0,.65);white-space:nowrap}
/* the perps order panel: its share-of-the-most slider shows the share inside the bar (the box holds the bar's margins,
   so the middle of the bar is 15px down); the ticks sit under their spots */
body:not(.ob-off) .pt-sl{display:flow-root}
body:not(.ob-off) .pt-sl .pt-slb{top:15px;left:50%;transform:translate(-50%,-50%);opacity:1;padding:0;background:none;border:0;box-shadow:none;
  font:500 11.5px/1 var(--mono);color:var(--ob-text);text-shadow:0 1px 2px rgba(0,0,0,.65)}
body:not(.ob-off) .pt-sl .pt-slb::after{display:none}
body:not(.ob-off) .pt-sl.drag .pt-slb{transform:translate(-50%,-50%)}
body:not(.ob-off) .pt-ticks button:nth-child(1){left:25%}
body:not(.ob-off) .pt-ticks button:nth-child(2){left:50%}
body:not(.ob-off) .pt-ticks button:nth-child(3){left:75%}
/* the leverage sheet keeps its colour that warms with leverage */
body:not(.ob-off) .pt-lv{--ob-fillc:var(--heat)}

/* ── fields and text boxes ── */
body:not(.ob-off) .field,body:not(.ob-off) .inp{background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);border-radius:var(--ob-r)}
body:not(.ob-off) .field:hover,body:not(.ob-off) .inp:hover{border-color:#333}
body:not(.ob-off) .field:focus-within,body:not(.ob-off) .inp:focus{border-color:rgba(var(--brand-rgb),.7);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .field input,body:not(.ob-off) .inp,body:not(.ob-off) .field .unit{font-family:var(--mono)}
body:not(.ob-off) .field input::placeholder,body:not(.ob-off) .inp::placeholder{color:rgba(255,255,255,.28)}
body:not(.ob-off) .field.pt-hit{border-color:var(--ob-acc)}
body:not(.ob-off) select.inp{-webkit-appearance:none;appearance:none;padding-right:28px;cursor:pointer;
  background:var(--ob-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center}

/* ── segmented tabs: a tab box. Idle choices on the lighter strip, the open one darker with the accent under it ── */
body:not(.ob-off) .seg{padding:0;gap:0;background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);border-radius:var(--ob-r)}
body:not(.ob-off) .seg > button{border-radius:0;background:none;color:var(--ob-dim);font-family:var(--mono);font-weight:500}
body:not(.ob-off) .srow .seg > button{white-space:nowrap}       /* a setting's choices stay on one line each */
body:not(.ob-off) .seg > button + button{border-left:1px solid var(--ob-line)}
body:not(.ob-off) .seg > button:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}
body:not(.ob-off) .seg > button:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px}
body:not(.ob-off) .seg > button:hover{color:var(--ob-text);background:var(--ob-hi)}
body:not(.ob-off) .seg > button[aria-pressed=true],body:not(.ob-off) .seg > button[aria-selected=true]{background:var(--ob-bg);color:var(--ob-text);box-shadow:inset 0 -2px 0 var(--ob-acc)}
/* the monospaced labels are wider: on a phone a row of tabs that still doesn't fit scrolls inside itself, never the page */
@media (max-width:640px){
  body:not(.ob-off) .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  body:not(.ob-off) .seg::-webkit-scrollbar{display:none}
}
/* a group whose highlight slides (Motion.pill): the sliding piece is the open tab */
body:not(.ob-off) .seg.mo-pills > .mo-pill,body:not(.ob-off) .seg.mo-pills.mo-brand > .mo-pill{border-radius:0;background:var(--ob-bg);box-shadow:inset 0 -2px 0 var(--ob-acc)}


/* ═══════════════ the perps terminal: group boxes ═══════════════ */
/* inside the terminal the greys are Obsidian's */
body:not(.ob-off) .tk.pt{--card:#0f0f0f;--card-2:#191919;--bg-2:#0c0c0c;--hover:#1b1b1b;--line:#262626;--line-2:#303030;background:#070707}
body:not(.ob-off) .tk.pt .pt-bar,body:not(.ob-off) .tk.pt .pt-strip,body:not(.ob-off) .pt-grid > *{border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);border-radius:var(--ob-r)}
body:not(.ob-off) .tk.pt .pt-bar{margin:6px 6px 0}
body:not(.ob-off) .tk.pt .pt-strip{margin:6px 6px 0;height:36px}
body:not(.ob-off) .pt-grid{gap:6px;padding:6px;background:none}
body:not(.ob-off) .pt-grid > *{background:var(--card)}
body:not(.ob-off) .pt .chart{border-radius:0 0 3px 3px}
/* a box's tabs: the idle ones on the lighter strip, the open one joined to the box under it */
body:not(.ob-off) .pt .pt-tabs{gap:0;padding:0;height:34px;background:var(--ob-main);border-bottom:1px solid var(--ob-line);border-radius:3px 3px 0 0}
body:not(.ob-off) .pt .pt-tabs > button{padding:0 14px;color:var(--ob-dim);font:500 12px var(--mono);border-right:1px solid var(--ob-line)}
body:not(.ob-off) .pt .pt-tabs > button:first-child{border-top-left-radius:3px}
body:not(.ob-off) .pt .pt-tabs > button:hover{color:var(--ob-text);background:var(--ob-hi)}
body:not(.ob-off) .pt .pt-tabs > button[aria-pressed=true]{background:var(--card);color:var(--ob-text);margin-bottom:-1px;border-bottom:1px solid var(--card)}
body:not(.ob-off) .pt .pt-tabs > button[aria-pressed=true]::after{display:none}
body:not(.ob-off) .pt .pt-tabs .n{color:var(--ob-acc);font-weight:600}
body:not(.ob-off) .pt-book > .pt-tabs > button{flex:1;justify-content:center}
/* the account box: its tabs and controls share the strip */
body:not(.ob-off) .pt-acct-h{background:var(--ob-main);border-bottom:1px solid var(--ob-line);border-radius:3px 3px 0 0;padding-right:8px;min-height:34px}
body:not(.ob-off) .pt-acct-h .pt-tabs{background:none;border-bottom:0;height:34px;border-radius:0}
/* buttons in the boxes: small outlined boxes */
body:not(.ob-off) .pt .chipbtn,body:not(.ob-off) .pt .pt-tr .tk-kb,body:not(.ob-off) .pt .pt-levb,body:not(.ob-off) .pt .pt-iso,body:not(.ob-off) .pt .pt-midb,
body:not(.ob-off) .pt .pt-ab-a button,body:not(.ob-off) .pt .lev-marks button,body:not(.ob-off) .pt .pt-cp-h .tk-kb,body:not(.ob-off) .pt .pt-stron{
  border-radius:var(--ob-r);background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);font-family:var(--mono);color:var(--text-2)}
body:not(.ob-off) .pt .chipbtn:hover,body:not(.ob-off) .pt .pt-tr .tk-kb:hover,body:not(.ob-off) .pt .pt-levb:hover,body:not(.ob-off) .pt .pt-midb:hover,
body:not(.ob-off) .pt .pt-ab-a button:hover,body:not(.ob-off) .pt .lev-marks button:hover,body:not(.ob-off) .pt .pt-cp-h .tk-kb:hover,body:not(.ob-off) .pt .pt-stron:hover{background:var(--ob-hi);color:var(--ob-text);border-color:#363636}
body:not(.ob-off) .pt .chipbtn[aria-pressed=true],body:not(.ob-off) .pt .lev-marks button[aria-pressed=true]{background:var(--ob-bg);color:var(--ob-text);border-color:rgba(var(--brand-rgb),.75)}
body:not(.ob-off) .pt .pt-tr .tk-kb[disabled]{opacity:.45}
body:not(.ob-off) .pt .pt-tr .pt-cla{color:var(--down)}
body:not(.ob-off) .pt .pt-iso{color:var(--ob-dim)}
body:not(.ob-off) .pt button.pt-iso:hover{color:var(--ob-text)}
body:not(.ob-off) .pt-mmo{border-radius:var(--ob-r);background:var(--ob-main);border-color:var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .pt-mmo[aria-pressed=true]{background:var(--ob-bg);border-color:rgba(var(--brand-rgb),.75)}
/* the order panel: Long / Short, the order types as a tab box, the account as a box of its own */
body:not(.ob-off) .pt-side{padding:0;gap:0;border-radius:var(--ob-r);background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .pt-side button{border-radius:3px;font-family:var(--mono)}
body:not(.ob-off) .pt-otabs{gap:0;border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);border-radius:var(--ob-r);background:var(--ob-main)}
body:not(.ob-off) .pt-otabs button{height:26px;padding:0 10px;border:0;border-left:1px solid var(--ob-line);color:var(--ob-dim);font:500 12px var(--mono)}
body:not(.ob-off) .pt-otabs button:first-child{border-left:0;border-radius:3px 0 0 3px}
body:not(.ob-off) .pt-otabs button:last-child{border-radius:0 3px 3px 0}
body:not(.ob-off) .pt-otabs button:hover{color:var(--ob-text);background:var(--ob-hi)}
body:not(.ob-off) .pt-otabs button[aria-pressed=true]{background:var(--card);color:var(--ob-text);border-bottom-color:transparent;box-shadow:inset 0 -2px 0 var(--ob-acc)}
body:not(.ob-off) .pt .tk-fl,body:not(.ob-off) .pt .pt-eq{font-family:var(--mono)}
body:not(.ob-off) .pt-acctbox{padding:0 10px 10px;border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);border-radius:var(--ob-r)}
body:not(.ob-off) .pt-ab-h{margin:0 -10px 8px;padding:8px 10px;border-bottom:1px solid var(--ob-line);font-family:var(--mono)}
body:not(.ob-off) .pt-ab-p{border-radius:var(--ob-r);background:var(--ob-main)}
body:not(.ob-off) .pt .tpsl{border-top-style:solid}
/* the market bar, the tickers and the panels' own headings */
body:not(.ob-off) .pt-mkt{border-radius:var(--ob-r)}
body:not(.ob-off) .pt-mkt b,body:not(.ob-off) .pt-stm,body:not(.ob-off) .pt-cp-h b,body:not(.ob-off) .pt-cpv h4,body:not(.ob-off) .pt-ig h4,body:not(.ob-off) .pt-hsum,body:not(.ob-off) .pt-s .k{font-family:var(--mono)}
body:not(.ob-off) .pt-cpsr{border-color:var(--ob-line);border-radius:var(--ob-r);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .pt-cpsr .pt-cps span{font-family:var(--mono)}
body:not(.ob-off) .pt-ftbl summary,body:not(.ob-off) .pt-ig .kv span{font-family:var(--mono)}


/* ═══════════════ the Settings window: tabs down the side, group boxes in two columns ═══════════════ */
body:not(.ob-off) .sheet.settings{--card:#0f0f0f;--card-2:#191919;--bg-2:#0c0c0c;--hover:#1b1b1b;--line:#232323;--line-2:#2f2f2f;
  border-color:var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark),0 40px 100px -24px rgba(0,0,0,.9);border-radius:6px}
body:not(.ob-off) .sheet.settings .sheet-h h3{font-family:var(--mono);font-weight:600}
.stabs .st-ic{display:none}
/* group boxes (ui-shell.js → obGroups): a title over a line, the rows under it */
body:not(.ob-off) .ob-gb{min-width:0;margin:0 0 12px;background:var(--ob-bg);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);border-radius:var(--ob-r)}
body:not(.ob-off) .ob-gb > .ob-gbt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:36px;margin:0;padding:8px 12px;border-bottom:1px solid var(--ob-line);
  font:600 12.5px var(--mono);color:var(--ob-text)}
body:not(.ob-off) .ob-gb > .ob-gbt .mute{font-weight:500}
body:not(.ob-off) .ob-gb > .ob-gbt .btn{margin-left:auto}
body:not(.ob-off) .ob-gbb{padding:4px 12px 10px;min-width:0}
body:not(.ob-off) .ob-gbb > :first-child{margin-top:8px}
body:not(.ob-off) .ob-gbb > .srow:first-child{margin-top:0}
body:not(.ob-off) .ob-gbb .srow{padding:10px 0}
body:not(.ob-off) .ob-gbb .srow .t b{font:600 12.5px var(--mono)}
body:not(.ob-off) .ob-gbb .srow .t span{line-height:1.45}
body:not(.ob-off) .ob-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;align-items:start}
body:not(.ob-off) .ob-col{min-width:0}
/* what's inside the boxes, in the same greys */
body:not(.ob-off) .sheet.settings .preset-card{border-radius:var(--ob-r);background:var(--ob-main);border-color:var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .sheet.settings .preset-card.on{border-color:rgba(var(--brand-rgb),.7);background:#141414}
body:not(.ob-off) .sheet.settings .preset-card b,body:not(.ob-off) .sheet.settings .preset-card label{font-family:var(--mono)}
body:not(.ob-off) .sheet.settings .ds-sw,body:not(.ob-off) .sheet.settings .ds-col{border-radius:var(--ob-r);background:var(--ob-main);border-color:var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);font-family:var(--mono)}
body:not(.ob-off) .sheet.settings .ds-sw.on{border-color:var(--c);box-shadow:0 0 0 1px var(--ob-dark)}
body:not(.ob-off) .sheet.settings .btn-ghost{border-radius:var(--ob-r);background:var(--ob-main);border:1px solid var(--ob-line);box-shadow:0 0 0 1px var(--ob-dark);font-family:var(--mono)}
body:not(.ob-off) .sheet.settings .btn-ghost:hover{background:var(--ob-hi);border-color:#363636}
body:not(.ob-off) .sheet.settings .ds-preview,body:not(.ob-off) .sheet.settings .fee-hero{border-radius:var(--ob-r)}
@media (min-width:721px){
  body:not(.ob-off) .sheet.settings{max-width:min(1060px,calc(100vw - 32px))}
  /* the tabs become a column down the left that stays while the boxes scroll */
  body:not(.ob-off) .sheet.settings .sheet-b{display:grid;grid-template-columns:186px minmax(0,1fr);align-items:start;padding:0;
    background:linear-gradient(90deg,var(--ob-bg) 0 186px,var(--ob-line) 186px 187px,#0b0b0b 187px)}
  body:not(.ob-off) .sheet.settings .stabs-bar{position:sticky;top:0;grid-column:1;margin:0;border:0;background:none}
  body:not(.ob-off) .sheet.settings .stabs{flex-direction:column;gap:3px;padding:12px 10px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  body:not(.ob-off) .sheet.settings .stabs button{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--ob-r);color:var(--ob-dim);font:500 13px var(--mono);text-align:left}
  body:not(.ob-off) .sheet.settings .stabs button:hover{color:var(--ob-text);background:#151515}
  body:not(.ob-off) .sheet.settings .stabs button[aria-pressed=true]{background:var(--ob-main);color:var(--ob-text);box-shadow:inset 0 0 0 1px var(--ob-line)}
  body:not(.ob-off) .sheet.settings .stabs button[aria-pressed=true]::after{display:none}
  body:not(.ob-off) .sheet.settings .stabs .st-ic{display:inline-flex;color:var(--ob-acc);opacity:.55;transition:opacity .15s}
  body:not(.ob-off) .sheet.settings .stabs button[aria-pressed=true] .st-ic,body:not(.ob-off) .sheet.settings .stabs button:hover .st-ic{opacity:1}
  body:not(.ob-off) .sheet.settings [data-body]{grid-column:2;min-width:0;padding:14px 14px 4px}
  body:not(.ob-off) .sheet.settings [data-body] > p{margin-top:0}
}
@media (max-width:720px){
  body:not(.ob-off) .ob-cols{display:block}                 /* a window made narrow while Settings is open: the columns stack */
  body:not(.ob-off) .sheet.settings .stabs-bar{background:var(--ob-bg)}
  body:not(.ob-off) .sheet.settings .stabs button{font-family:var(--mono)}
}
/* nothing slides or pops when movement is reduced */
@media (prefers-reduced-motion:reduce){
  body:not(.ob-off) input[type=checkbox]::after,body:not(.ob-off) .srow > input[type=checkbox]::after{transition:none}
}
body.motion-reduced input[type=checkbox]::after{transition:none!important}