/* PerpArc: one flat surface split by hairlines, numbers first, colour only where it means something
   (orange entry, blue exit, green/red long/short and money). Every colour is a token. */
:root {
  color-scheme: dark;
  --bar-h: 46px;
  --r: 6px;
  --bg: #0f1012;
  --panel: #0f1012; /* the surface under the chart; opaque chart chips and tags are filled with it */
  --panel-2: #16171a;
  --panel-3: #1f2125;
  --line: #1f2125;
  --line-2: #2c2f34;
  --ink: #ececed;
  --ink-2: #a3a7ae;
  --muted: #6d7279;
  --faint: #3a3d43;
  /* zone marks (validated on --panel in both themes), and their lighter text twins */
  --entry: #d9731f;
  --exit: #3a86ee;
  --entry-ink: #f59a4e;
  --exit-ink: #78acf6;
  --up: #3fd18a;
  --down: #ff6b70;
  --warn: #e3c04a;
  --on-zone: #fff;
  --hatch-bg: rgba(255, 255, 255, 0.015);
  --hatch-l: rgba(255, 255, 255, 0.07);
  --hatch-key: rgba(255, 255, 255, 0.16);
  --shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* light theme: same roles, its own steps; the zone marks pass the palette validator on white as they are,
   the text twins, status colours and warn are darkened for text contrast on white */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f5f7;
  --panel-3: #ebedf0;
  --line: #e6e8ec;
  --line-2: #d3d7dd;
  --ink: #0f1115;
  --ink-2: #464c56;
  --muted: #737a85;
  --faint: #bcc2ca;
  --entry-ink: #b4560c;
  --exit-ink: #1f5fc0;
  --up: #0e8a52;
  --down: #d23a40;
  --warn: #9a7200;
  --hatch-bg: rgba(0, 0, 0, 0.015);
  --hatch-l: rgba(0, 0, 0, 0.07);
  --hatch-key: rgba(0, 0, 0, 0.22);
  --shadow: 0 14px 32px rgba(15, 18, 23, 0.14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.4 var(--font);
  font-feature-settings: 'cv11';
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums slashed-zero; }
em { font-style: normal; }
[hidden] { display: none !important; }
button:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; }

/* status tags: LIVE, the Signal state, LONG / SHORT, OFF-HOURS. Small caps are kept for tags only;
   titles and labels are in sentence case */
.tag, .pill, .side-b, .ro-flag {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; flex: none;
  border: 1px solid var(--line-2); border-radius: 4px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}

/* ---------- top bar: the wordmark, then the switches in the top-right corner ---------- */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; height: var(--bar-h); padding: 0 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
/* logo "offset": one disc cut in two, the halves shifted apart: one index on two venues, the shift is the spread and
   the trade bets they realign. Upper half in the entry orange, lower in the exit blue (the zone pair of the chart);
   then the name in plain Inter and a quiet Beta tag */
.brand { display: flex; align-items: center; gap: 8px; user-select: none; }
.logo { width: 22px; height: 22px; flex: none; }
.lg-top { fill: var(--entry); }
.lg-bot { fill: var(--exit); }
.word { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.beta {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: -1px;
  border: 1px solid var(--line-2); border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 1; color: var(--ink-2);
}
.bar-r { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* credit: a link to the author's X profile, left of the alert and theme switches */
.made-by {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin-right: 8px;
  border: 1px solid var(--line-2); border-radius: var(--r); font-size: 12px; line-height: 1; color: var(--ink);
  text-decoration: none; white-space: nowrap; transition: background 0.12s;
}
.made-by:hover { background: var(--panel-3); }
.made-by:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; }
.made-by svg { width: 11px; height: 11px; flex: none; fill: currentColor; }
.made-by .mb-k { color: var(--muted); }
.made-by .mb-h { font-weight: 500; }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--r); background: transparent;
  transition: background 0.12s;
}
.icon-btn:hover { background: var(--panel-3); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover svg { stroke: var(--ink); }
/* alerts: crossed-out bell when off, bell when on, yellow bell while the browser still holds the sound back */
.alert-btn[data-state="off"] .i-bell, .alert-btn:not([data-state="off"]) .i-bell-off { display: none; }
.alert-btn[data-state="on"] svg { stroke: var(--ink); }
.alert-btn[data-state="blocked"] svg { stroke: var(--warn); }
/* theme: the sun in dark (go light), the moon in light (go dark) */
.theme-btn .i-moon, :root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }

/* ---------- layout: one surface that fills the viewport, regions split by hairlines; the chart takes the slack ---------- */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 21vw, 420px);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100vh - var(--bar-h));
}
.panel { min-width: 0; background: var(--bg); }
.chart-panel { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); }
.side > .panel + .panel { border-top: 1px solid var(--line); }
.calc { flex: 1 0 auto; }
.legs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; }
.leg + .leg { border-left: 1px solid var(--line); }

/* section title row: "Signal", "Position", "Trade math", a leg's market */
.ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 16px; }
.ph-t { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
.leg .ph-t em { margin-left: 7px; font-weight: 400; color: var(--muted); }

/* ---------- chart panel, row 1: the pair button and ⇆, then the readout as label-over-value blocks ---------- */
.tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; }
.tools:not(.tools-2) { gap: 10px 20px; border-bottom: 1px solid var(--line); }
.pair-ctl { display: flex; gap: 6px; }
.picker { position: relative; }
.pick-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 38px; padding: 0 11px 0 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r); background: transparent;
  transition: border-color 0.12s, background 0.12s;
}
.pick-btn:hover, .pick-btn[aria-expanded="true"] { border-color: var(--faint); background: var(--panel-2); }
/* both legs with their side: "SHORT SPY Arcus / LONG US500 QFEX" */
.pick-sides { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pick-sides em { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.pick-sides em.long { color: var(--up); }
.pick-sides em.short { color: var(--down); }
.pick-sides b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.pick-sides .pk-venue { font-size: 13.5px; color: var(--ink-2); }
.pick-sides .pk-sep { margin: 0 3px; color: var(--faint); }
.chev { width: 12px; height: 12px; }
.chev path { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pick-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* ⇆ swaps the sides */
.swap-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r); background: transparent;
  transition: border-color 0.12s, background 0.12s;
}
.swap-btn:hover { border-color: var(--faint); background: var(--panel-2); }
.swap-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.swap-btn:hover svg { stroke: var(--ink); }

/* readout: LIVE (or the hovered candle's time), spread, vs median, both prices, each a block after a hairline */
.readout { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 8px; min-height: 38px; min-width: 0; font-variant-numeric: tabular-nums slashed-zero; }
.readout > span { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; padding: 0 20px; border-left: 1px solid var(--line); white-space: nowrap; }
.readout .ro-k { font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.readout b { font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.readout b.entry { color: var(--entry-ink); }
.readout b.exit { color: var(--exit-ink); }
/* wide enough for the longest hover time ("Nov 28 23:58"), so the blocks never shift; LIVE / STALE sit centred in it */
.readout .ro-head { min-width: 124px; align-items: center; }
.readout .ro-time { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.readout .ro-end { padding-left: 0; border-left: 0; }
.ro-flag.live { color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.ro-flag.stale { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }

/* ---------- chart panel, row 2: window and zone switches, the caption, the In/Out and Profile checkboxes ---------- */
.tools-2 { padding: 10px 16px 2px; }
.ph-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.seg button {
  height: 24px; padding: 0 10px; cursor: pointer; border: 0; border-radius: 4px; background: transparent;
  font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color 0.12s, background 0.12s;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--bg); }
/* the caption takes the room left between the switches and the checkboxes and wraps there, so the checkboxes stay on
   the row's right end */
.lr-cap { flex: 1 1 0; min-width: 120px; font-size: 12px; line-height: 15px; color: var(--muted); }
/* checkbox: the native input stays for keyboard and screen readers, the box next to it is drawn */
.chk { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; cursor: pointer; font-size: 12.5px; color: var(--ink-2); user-select: none; }
.chk + .chk { margin-left: 4px; } /* In/Out, then Profile, together in the right corner */
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chk i { position: relative; width: 14px; height: 14px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel-2); transition: background 0.12s, border-color 0.12s; }
.chk:hover i { border-color: var(--muted); }
.chk input:checked + i { background: var(--ink); border-color: var(--ink); }
.chk input:checked + i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3.5px; height: 7.5px; border: solid var(--bg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.chk input:focus-visible + i { outline: 1px solid var(--ink-2); outline-offset: 2px; }

/* ---------- pair list (click) and pair info (hover) share one dropdown slot under the button ---------- */
.pick-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 10;
  display: grid; gap: 6px; min-width: 100%; width: max-content; pointer-events: none;
}
.pick-pop > * { pointer-events: auto; }
.pick-menu, .pick-info { border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); box-shadow: var(--shadow); }
/* pair list: a header of sort buttons and one row per pair on one grid (header and rows are subgrids), so the columns
   line up whatever the names or values. Pair | Spread | vs median 24h · 7d · 30d | Mid prices | 24h volume | OI |
   Funding. A row has a line per leg; the per-pair values sit centred between the two lines. Every column is
   left-aligned, header over values, and the value columns share one minimum width so they run at an even step.
   Past ~70% of the screen it scrolls, with the header pinned. */
.pick-menu {
  display: grid; grid-template-columns: max-content repeat(7, minmax(84px, max-content)) max-content;
  max-height: min(70vh, 600px); max-width: calc(100vw - 32px); overflow: auto; overscroll-behavior: contain; padding: 0 4px 4px;
}
.pick-info { display: none; width: min(380px, calc(100vw - 32px)); padding: 12px 14px 13px; }
.pi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line-2); }
.pi-head span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pi-head em { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pick-info p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pick-info p + p { margin-top: 7px; font-size: 11.5px; color: var(--muted); }
@media (hover: hover) {
  .pick-info { display: block; visibility: hidden; transition: visibility 0s 0.1s; }
  .picker:hover .pick-btn[aria-expanded="false"] ~ .pick-pop .pick-info,
  .pick-btn[aria-expanded="false"]:focus-visible ~ .pick-pop .pick-info { visibility: visible; transition-delay: 0.15s; }
  .pick-btn[aria-expanded="true"] ~ .pick-pop .pick-info { display: none; }
}
@media (hover: none) {
  .pick-btn[aria-expanded="true"] ~ .pick-pop .pick-info { display: block; }
}
.pk-list { display: contents; }
.pk-head, .pick-opt { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 20px; }
/* ticker search above the header; both stay pinned while the list scrolls */
.pk-search {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  height: 40px; margin: 0 -4px; padding: 0 14px; background: var(--panel-2); border-bottom: 1px solid var(--line-2); cursor: text;
}
.pk-search svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.pk-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 12.5px; color: var(--ink);
}
.pk-search input::placeholder { color: var(--muted); }
.pk-search:focus-within svg { stroke: var(--ink-2); }
.pk-empty { grid-column: 1 / -1; padding: 12px 10px 10px; font-size: 12.5px; color: var(--muted); }
.pick-opt[hidden] { display: none; }
.pk-head { position: sticky; top: 40px; z-index: 1; margin: 0 -4px 4px; padding: 0 14px; background: var(--panel-2); border-bottom: 1px solid var(--line-2); }
/* headers: the sortable ones end in a pair of chevrons; the active one turns bright and keeps only its direction's
   chevron lit (down = high to low, up = low to high); a third click turns sorting off */
.pk-sort {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start; height: 34px; padding: 0; border: 0;
  background: none; cursor: pointer; text-align: left; white-space: nowrap;
  font: inherit; font-size: 11.5px; font-weight: 500; color: var(--muted);
}
.pk-sort:hover, .pk-sort.on { color: var(--ink); }
.pk-sort.fixed { cursor: default; color: var(--muted); } /* not sortable */
.pk-sort:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; }
.sort-i { width: 7px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sort-i path { opacity: 0.55; }
.pk-sort.on .sort-i path { opacity: 0.22; }
.pk-sort.up .sort-i .up, .pk-sort.down .sort-i .down { opacity: 1; }
.pick-opt { padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; text-align: left; color: var(--ink); }
.pick-opt:hover, .pick-opt:focus-visible { background: var(--panel-3); outline: 0; }
.pick-opt[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--ink); background: var(--panel-3); }
.pk-c { font-size: 12.5px; line-height: 18px; white-space: nowrap; }
/* per-leg columns: one line per leg, lined up with the pair's two lines */
.pk-2 { display: grid; row-gap: 4px; }
.pk-2 > * { display: block; }
.pk-c .u { font-size: 11px; color: var(--muted); } /* "bps" after a spread value */
.pk-fund .when { color: var(--muted); }

/* a leg in the pair list: asset, venue, and a muted note only off the normal state ("· off RTH"); no coloured dot,
   so green and red stay reserved for long / short and the funding sign */
.st { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.st b { font-weight: 600; }
.st .pk-venue { color: var(--ink-2); }
.st-note { color: var(--muted); }
.st-note:empty { display: none; }
.st[data-tone="bad"] .st-note { color: var(--warn); }

/* ---------- inputs and preset chips ---------- */
.field {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2);
  transition: border-color 0.12s;
}
.field:hover { border-color: var(--faint); }
.field:focus-within { border-color: var(--ink-2); }
.field.bad { border-color: var(--down); }
/* inputs get no outline of their own: the .field border already lights up on focus */
.field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; font-weight: 500; }
.affix { color: var(--muted); font-size: 12px; flex: none; }
/* presets that fill the field next to them: one quiet group, the matching value raised */
.chips { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.chips button {
  flex: 1 1 0; min-width: 0; height: 26px; padding: 0 4px; cursor: pointer;
  border: 0; border-radius: 4px; background: transparent;
  font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color 0.12s, background 0.12s;
}
.chips button:hover { color: var(--ink); }
.chips button.on { color: var(--ink); background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- chart ---------- */
.chart { position: relative; flex: 1 1 auto; min-height: 380px; margin: 4px 6px 0 16px; }
.chart.loading svg { opacity: 0.4; transition: opacity 0.2s; }
.chart svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.chart text { font: 500 10.5px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums slashed-zero; }
.chart .c-empty { font-size: 12.5px; }
/* day separators look exactly like the horizontal grid (owner, Nov 2 2026); only the hover crosshair is dashed */
.c-grid, .c-day { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.hatch-bg { fill: var(--hatch-bg); }
.hatch-l { stroke: var(--hatch-l); stroke-width: 1.2; }
.c-fill.mid { fill: var(--ink); fill-opacity: 0.045; }
.s-entry { stop-color: var(--entry); }
.s-exit { stop-color: var(--exit); }
.c-th { stroke-width: 1; shape-rendering: crispEdges; }
.c-th.entry { stroke: var(--entry); }
.c-th.exit { stroke: var(--exit); }
/* median: light grey with long dashes (the crosshair's are short 3/3), brighter than the grid, named by a neutral chip */
.c-med { stroke: var(--ink-2); stroke-width: 1; stroke-opacity: 0.85; stroke-dasharray: 12 6; shape-rendering: crispEdges; }
/* level names: opaque chips sitting on their line, drawn above the spread line */
.c-zl rect { fill: var(--panel); stroke-width: 1; }
.c-zl.entry rect { stroke: var(--entry); }
.c-zl.exit rect { stroke: var(--exit); }
.c-zl.med rect { stroke: var(--ink-2); }
.chart .c-zl text { font-size: 9.5px; font-weight: 650; letter-spacing: 0.08em; }
.chart .c-zl.entry text { fill: var(--entry-ink); }
.chart .c-zl.exit text { fill: var(--exit-ink); }
.chart .c-zl.med text { fill: var(--ink-2); }
.chart .c-event-t { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.c-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.c-line.entry { stroke: var(--entry-ink); stroke-width: 1.75; }
.c-line.exit { stroke: var(--exit-ink); stroke-width: 1.75; }
.c-bin.mid { fill: var(--faint); }
.c-bin.entry { fill: var(--entry); fill-opacity: 0.8; }
.c-bin.exit { fill: var(--exit); fill-opacity: 0.8; }
.c-cur { fill: var(--ink); fill-opacity: 0.05; }
.c-nowline { stroke: var(--ink); stroke-opacity: 0.45; stroke-dasharray: 1 3; }
.c-now { fill: var(--ink); stroke: var(--panel); stroke-width: 2; }
.c-event { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .c-event-t { fill: var(--warn); }
.c-tag rect { fill: var(--panel-3); }
.chart .c-tag text { font-weight: 600; fill: var(--ink); }
.c-tag.now rect { fill: var(--ink); }
.chart .c-tag.now text { fill: var(--bg); }
.chart .c-tag .c-sub { font-weight: 500; fill-opacity: 0.6; }
.c-tag.entry rect { fill: var(--entry); }
.c-tag.exit rect { fill: var(--exit); }
.chart .c-tag.entry text, .chart .c-tag.exit text { fill: var(--on-zone); }
.c-tag.med rect { fill: var(--panel); stroke: var(--ink-2); }
.chart .c-tag.med text { fill: var(--ink-2); }
.c-tag.hov rect { fill: var(--line-2); }
/* In / Out (the spread at your open / close prices now): outlined tags of the "now" family, neutral until their zone is
   reachable at those prices (In past the entry threshold, Out past the exit one), then in that zone's colour, like
   the line past a threshold; at the live point a thin stem through "now" with a hollow diamond at each (not a white
   stroke: that read as part of the spread line) */
.c-tag.io rect { fill: var(--panel); stroke: var(--ink-2); stroke-width: 1; }
.chart .c-tag.io text { fill: var(--ink); }
.chart .c-tag .c-tl { font-weight: 500; fill: var(--muted); }
.c-tag.io.z-entry rect { stroke: var(--entry); }
.c-tag.io.z-exit rect { stroke: var(--exit); }
.chart .c-tag.io.z-entry text { fill: var(--entry-ink); }
.chart .c-tag.io.z-exit text { fill: var(--exit-ink); }
.c-io { stroke: var(--ink-2); stroke-width: 1; stroke-opacity: 0.6; }
.c-io.mk { fill: var(--panel); stroke: var(--ink-2); stroke-width: 1.25; stroke-opacity: 1; stroke-linejoin: round; }
.c-io.mk.z-entry { stroke: var(--entry-ink); }
.c-io.mk.z-exit { stroke: var(--exit-ink); }
.h-x, .h-y { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; stroke-opacity: 0.6; shape-rendering: crispEdges; }
.h-dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }

/* legend at the bottom, the clock (= time zone picker) alone at its right end */
.legend-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 4px; padding: 8px 16px 9px; border-top: 1px solid var(--line); }
/* the legend wraps beside the clock (1060 px: two lines, clock on the right) and goes above it only on phones */
.legend { flex: 1 1 0; min-width: 240px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.lr-r { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-left: auto; }
.key { display: inline-block; flex: none; }
.key.line { width: 14px; height: 2px; border-radius: 1px; background: var(--ink); }
.key.io { width: 7px; height: 7px; margin: 0 2px; border: 1.25px solid var(--ink-2); background: var(--panel); transform: rotate(45deg); }
.key.hatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--line-2); background: repeating-linear-gradient(45deg, var(--hatch-key) 0 1px, transparent 1px 4px); }
.key.prof { width: 12px; height: 10px; background: linear-gradient(var(--faint) 0 2px, transparent 2px 4px, var(--faint) 4px 6px, transparent 6px 8px, var(--faint) 8px 10px); clip-path: polygon(0 0, 55% 0, 55% 40%, 100% 40%, 100% 60%, 75% 60%, 75% 100%, 0 100%); }
/* clock = time zone picker; the menu opens upwards since the clock sits at the bottom */
.tz { position: relative; }
.clock {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; cursor: pointer;
  border: 0; border-radius: var(--r); background: transparent;
  font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background 0.12s;
}
.clock:hover, .clock[aria-expanded="true"] { background: var(--panel-3); }
/* trim the line box to the digits (cap height to baseline), so flex centring centres the ink, not the font's
   ascender/descender space */
.clock span { line-height: 1; text-box: trim-both cap alphabetic; }
.clock .clock-tz { color: var(--muted); }
/* TradingView-style list: "(UTC+3) Moscow" rows sorted by offset, a check on the selected one, scrolls */
.tz-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 10;
  display: grid; align-content: start; width: 250px; max-height: min(440px, 70vh); overflow-y: auto; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: var(--faint) transparent;
}
.tz-menu.flip { right: auto; left: 0; }
.tz-opt {
  display: grid; grid-template-columns: auto 1fr 12px; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px; cursor: pointer; text-align: left;
  border: 0; border-radius: 4px; background: transparent; font-size: 12.5px; color: var(--ink-2);
}
.tz-opt:hover, .tz-opt:focus-visible { background: var(--panel-3); color: var(--ink); outline: 0; }
.tz-opt[aria-selected="true"] { color: var(--ink); }
.tz-opt .tz-o { color: var(--muted); }
.tz-opt .tz-n:only-child { grid-column: 1 / 3; }
.tz-opt[aria-selected="true"]::after {
  content: ''; grid-column: 3; width: 9px; height: 5px; margin-top: -3px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg);
}

/* ---------- signal ---------- */
/* in a zone the section gets a 2 px rule of the zone's colour along its top edge */
.signal { position: relative; }
.signal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.signal[data-state="entry"]::before { background: var(--entry); }
.signal[data-state="exit"]::before { background: var(--exit); }
.pill { color: var(--ink-2); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.signal[data-state="wait"] .pill::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.signal[data-state="entry"] .pill { color: var(--on-zone); background: var(--entry); border-color: var(--entry); }
.signal[data-state="exit"] .pill { color: var(--on-zone); background: var(--exit); border-color: var(--exit); }
.signal[data-state="entry"] .pill::before, .signal[data-state="exit"] .pill::before { background: var(--on-zone); }

.sig-body { padding: 4px 16px 16px; }
.sig-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.big { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; white-space: nowrap; }
.big .unit { margin-left: 7px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.signal[data-state="entry"] .big { color: var(--entry-ink); }
.signal[data-state="exit"] .big { color: var(--exit-ink); }
.sig-meta { display: grid; gap: 3px; justify-items: end; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sig-meta b { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.sig-hint { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.signal[data-state="entry"] .sig-hint { color: var(--ink); }

/* gauge: exit segment, neutral corridor, entry segment, the median tick and the "now" marker */
.gauge { margin-top: 14px; }
.g-track { position: relative; height: 6px; border-radius: 3px; background: var(--panel-3); }
.g-seg { position: absolute; top: 0; bottom: 0; }
.g-seg.entry { background: var(--entry); }
.g-seg.exit { background: var(--exit); }
.g-seg.mid { background: var(--panel-3); }
.g-seg:first-child { left: 0; border-radius: 3px 0 0 3px; }
.g-seg:nth-child(3) { right: 0; border-radius: 0 3px 3px 0; }
.g-med { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ink-2); opacity: 0.7; }
.g-now {
  position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px;
  background: var(--ink); border-radius: 1.5px; box-shadow: 0 0 0 2px var(--bg);
  transition: left 0.35s ease;
}
.g-lbl { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.g-lbl .entry { color: var(--entry-ink); }
.g-lbl .exit { color: var(--exit-ink); }
.gauge.empty .g-seg, .gauge.empty .g-med, .gauge.empty .g-now { display: none; }

/* ---------- position ---------- */
.tk-body { padding: 2px 16px 16px; display: grid; gap: 12px; }
.fg { display: grid; gap: 6px; }
.lbl { font-size: 11.5px; color: var(--muted); }
.f-line { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 6px; }
/* order type and fee per venue: "Arcus  [Limit | Market]" over the fee field; the venue line costs no extra row */
.f-line.fees { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.f-line.fees.single { grid-template-columns: 1fr; }
.vx { display: grid; gap: 6px; min-width: 0; }
.vx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; }
.seg.seg-s { gap: 1px; padding: 1px; }
.seg.seg-s button { height: 18px; padding: 0 8px; font-size: 11.5px; border-radius: 3px; }

/* ---------- key/value rows: trade math and the leg cards ---------- */
.kv { margin: 0; display: grid; padding: 0 16px 6px; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: 12px; min-width: 0; }
.kv dd { margin: 0; font-size: 12.5px; font-weight: 500; text-align: right; white-space: nowrap; }
.big-kv > div { align-items: center; padding: 9px 0; }
.big-kv dt { display: grid; gap: 2px; }
.big-kv dt span { color: var(--ink-2); font-size: 12.5px; }
.big-kv dt small { font-size: 11px; color: var(--muted); }
.big-kv dd { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pos { color: var(--up); }
.neg { color: var(--down); }
.caution { color: var(--warn); }
.kv dd .when { color: var(--muted); font-weight: 400; }
.leg .kv dt { flex-shrink: 0; }
.leg .kv dd.mode { white-space: normal; }
.leg .kv dd .nw { white-space: nowrap; }
/* funding averages per day: 24h / 7d / 30d side by side, each period over its amount */
.big-kv dd.f-avg { display: flex; gap: 12px; }
.f-avg > span { display: grid; justify-items: end; gap: 2px; }
.f-avg i { font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.f-avg b { font-size: 14px; font-weight: 600; line-height: 1.15; }
/* In / Out in Trade math: the zone's colour once that zone is reachable at those prices, like their chart tags */
.big-kv dd.entry { color: var(--entry-ink); }
.big-kv dd.exit { color: var(--exit-ink); }

/* ---------- legs ---------- */
.side-b.long { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.side-b.short { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
/* the ready-to-type order, raised a step off the surface */
.order { display: grid; gap: 3px; margin: 0 16px 6px; padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); }
.order .num { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.order small { font-size: 11.5px; color: var(--muted); }

/* ---------- warnings: closable toasts in the bottom-right corner ---------- */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px));
}
/* spacing as a margin, not a gap, so a closing toast can collapse its slot to nothing (closeToast) */
.toast + .toast { margin-top: 8px; }
.toast {
  position: relative; padding: 11px 40px 12px 14px;
  background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line-2)); border-radius: 8px;
  box-shadow: var(--shadow);
}
.toast b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.toast b svg { width: 12px; height: 12px; flex: none; }
.toast b path { fill: none; stroke: var(--warn); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.toast p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.toast-x {
  position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: transparent; cursor: pointer;
}
.toast-x:hover { background: var(--panel-3); }
.toast-x svg { width: 10px; height: 10px; }
.toast-x path { stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.toast-x:hover path { stroke: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .g-now { transition: none; }
}

/* ---------- wide screens: leg rows in two columns ---------- */
@media (min-width: 1500px) {
  .leg .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .leg .kv > div:nth-child(2) { border-top: 0; }
}

/* ---------- narrow: one column, chart (it carries the pair picker) → signal → position → trade math → legs ---------- */
@media (max-width: 1040px) {
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  .side { display: contents; }
  .chart-panel, .legs { grid-column: auto; grid-row: auto; }
  .chart { flex: none; height: 420px; min-height: 0; }
  .chart-panel { order: 1; border-bottom: 0; }
  .signal { order: 2; }
  .ticket { order: 3; }
  .calc { order: 4; }
  .legs { order: 5; }
  .signal, .legs { border-top: 1px solid var(--line); }
  /* the pair list drops the per-leg prices and funding (the leg cards have them) */
  .pk-c:is(.pk-mid, .pk-fund), .pk-sort:is([data-k="mid"], [data-k="fund"]) { display: none; }
  .pick-menu { grid-template-columns: max-content repeat(6, minmax(84px, max-content)); }
}
@media (max-width: 640px) {
  .bar { padding: 0 12px; }
  .made-by { margin-right: 4px; padding: 0 8px; }
  .made-by .mb-k { display: none; } /* the X icon and handle are enough on a phone */
  .tools { padding: 10px 12px; position: relative; }
  .tools-2 { padding: 8px 12px 2px; }
  .ph, .sig-body, .tk-body { padding-left: 12px; padding-right: 12px; }
  .kv { padding-left: 12px; padding-right: 12px; }
  .order { margin-left: 12px; margin-right: 12px; }
  .legend-row { padding-left: 12px; padding-right: 12px; }
  /* the readout becomes a three-column grid without the dividers */
  .readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; width: 100%; }
  .readout > span { padding: 0; border-left: 0; }
  .readout .ro-head { min-width: 0; align-items: flex-start; }
  /* the dropdown spans the panel instead of hanging off the button's left edge */
  .picker { position: static; }
  /* tighter, so "SHORT US500 Bulk / LONG US500 QFEX" and ⇆ fit 375 px on one line */
  .pick-btn { gap: 8px; padding: 0 9px 0 11px; }
  .pick-sides { gap: 4px; }
  .pick-sides .pk-sep { margin: 0 1px; }
  .pick-pop { left: 12px; right: 12px; top: 54px; width: auto; min-width: 0; } /* just under the 38 px button */
  .pick-info { width: auto; }
  /* too narrow for every column: pair, spread and vs median 24h stay */
  .pick-menu { grid-template-columns: max-content repeat(2, auto); max-width: none; }
  .pk-head, .pick-opt { column-gap: 16px; }
  .pk-c:is(.pk-d7d, .pk-d30d, .pk-vol, .pk-oi), .pk-sort:is([data-k="d7d"], [data-k="d30d"], [data-k="vol"], [data-k="oi"]) { display: none; }
  .legs { grid-template-columns: 1fr; }
  .leg + .leg { border-left: 0; border-top: 1px solid var(--line); }
  .chart { height: 300px; margin-left: 10px; }
  .toasts { right: 16px; bottom: 16px; }
  .big { font-size: 36px; }
}