/* Nyvera shell: menu rail (left), ticker box, simple price chart.
   Every colour is a token defined once for dark and once for light; every movement uses the motion tokens below. */

@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---- Tokens ------------------------------------------------------------------------------- */
:root{
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --rail-w:48px;
  --hair:1px;
  --icon:18px;
  --stroke:1;
  --gap:10px;

  /* Motion: three durations, one curve in, one out. Enter with --ease-out, leave faster with --ease-in. */
  --t-micro:120ms;   /* hover, colour */
  --t-ui:200ms;      /* popovers, tooltips, toggles */
  --t-enter:420ms;   /* first appearance, chart draw-in */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease:var(--ease-out);
  --dur:var(--t-ui);
}

/* Dark (default) */
:root,
:root[data-theme="dark"]{
  --bg:#000;
  --surface:#050505;
  --fg:#f2f2f2;
  --fg-dim:#8a8a8a;
  --fg-faint:#4a4a4a;
  --line:#1f1f1f;
  --line-strong:#3a3a3a;
  --hover:#0f0f0f;
  --focus:#ffffff;
  --flash-up:#16302a;    /* muted green cell */
  --flash-down:#3a1d1f;  /* muted red cell */
  --area:rgba(242,242,242,.07);
  /* 3-D surfaces (ui/gex.js): tint at the floor and at the top, and the strike grid's strength; dark needs more */
  --mesh-lo:.09;
  --mesh-hi:.46;
  --mesh-grid:.9;
  /* signed fields (hedge pressure map): the price flash's green and red at full strength; cells fade toward the background */
  --field-pos:#3f9b78;
  --field-neg:#c0565c;
  /* Balance Map (2026-10-08): both IV walls white; call balances dark amber, put balances dark violet — a dark ribbon fill
     (--bal-*-fill at --bal-fill-a), a boundary colour, and a light shade of the same hue for text */
  --bal-wall:#ffffff;--bal-fill-a:.82;
  --bal-call:#c8901e;--bal-call-fill:#3a2806;--bal-call-text:#f2c76b;
  --bal-put:#8b5cf6;--bal-put-fill:#26144a;--bal-put-text:#c9b3ff;--bal-call-on:#f2c76b;--bal-put-on:#c9b3ff;
  /* the Variant's experimental daily pair (ui/waves-daily.js): its own hues, apart from the walls, bands and gravity zones */
  --bal-prem:#38bdf8;--bal-disc:#f472b6;
  --field-max:.62;
  --gt-max:.96;   /* the Greek Exposure table's own tint ceiling: stronger than the chart field's, there is no candle layer to leave legible */
  /* landscapes (ui/pressure.js): the surface's own hue, apart from the grey grid; lit faces lighten, shaded ones darken */
  --land:#7fa7d6;
  --land-shade:.38;
  color-scheme:dark;
}

/* Light */
:root[data-theme="light"]{
  --bg:#fff;
  --surface:#fafafa;
  --fg:#0a0a0a;
  --fg-dim:#6b6b6b;
  --fg-faint:#b5b5b5;
  --line:#ececec;
  --line-strong:#c4c4c4;
  --hover:#f2f2f2;
  --focus:#000000;
  --flash-up:#d9efe3;
  --flash-down:#f6dcdc;
  --area:rgba(10,10,10,.05);
  --mesh-lo:.03;
  --mesh-hi:.2;
  --mesh-grid:.55;
  --field-pos:#2f8a66;
  --field-neg:#bf4b52;
  /* light theme: white would vanish on the page, so the walls are near-black; the fills stay dark hues at a low alpha and the
     text shades are darker (a lighter shade is unreadable on a light page) */
  --bal-wall:#1b1b1b;--bal-fill-a:.22;
  --bal-call:#9a6a0e;--bal-call-fill:#6b4a0c;--bal-call-text:#6e4a06;
  --bal-put:#6d3fd1;--bal-put-fill:#3d2180;--bal-put-text:#4f2aa8;--bal-call-on:#f2c76b;--bal-put-on:#c9b3ff;/* chip text: light on the dark chip fill in both themes */
  --bal-prem:#0b78a8;--bal-disc:#b8337c;
  --field-max:.42;
  --gt-max:.8;
  --land:#3f6fa8;
  --land-shade:.5;
  color-scheme:light;
}

/* Chart roles of the ported renderers (src/charts.js, src/fractal-chart.js, src/curved-odds-chart.js read them through
   src/chart-layout.js palette()): aliases of the shell tokens where one exists, an explicit value per theme where none does.
   Without these the canvases fall back to the renderers' dark hexes in the light theme. */
:root,
:root[data-theme="dark"]{
  --text:var(--fg);
  --text-2:#a8a8a8;
  --text-3:#6e6e6e;
  --surface-2:#0c0c0c;
  --surface-3:#151515;
  --ok:var(--field-pos);
  --bad:var(--field-neg);
  --signal:#2ad7d7;
  --signal-deep:#009c9c;
  --primary:#59b2fe;
  --primary-ink:var(--bg);
  --warn:#eebc4a;
  --chart-tvc:#e9c25a;
  --path-1:#c3a3f5;--path-2:#f79c74;--path-3:#8fd3c8;
  --lvl-reach:#a4a4a4;--lvl-reference:#868686;--lvl-price-map:#ccbe8a;--lvl-outlook:#a5bad1;
  --lvl-iv:#b897f0;--lvl-breakout:#ee8dbd;--lvl-balance:#7fc4d8;
}
:root[data-theme="light"]{
  --text:var(--fg);
  --text-2:#555555;
  --text-3:#8c8c8c;
  --surface-2:#f0f0f0;
  --surface-3:#e6e6e6;
  --ok:var(--field-pos);
  --bad:var(--field-neg);
  --signal:#0e8f99;
  --signal-deep:#0a6f77;
  --primary:#1f6fbf;
  --primary-ink:var(--bg);
  --warn:#a8790f;
  --chart-tvc:#a07812;
  --path-1:#7a52c2;--path-2:#c4572a;--path-3:#2f8f80;
  --lvl-reach:#6b6b6b;--lvl-reference:#8a8a8a;--lvl-price-map:#8a7a3a;--lvl-outlook:#4f6a8a;
  --lvl-iv:#7a55c0;--lvl-breakout:#b8457f;--lvl-balance:#2f7f96;
}

/* Theme switch: every colour eases across instead of snapping (shell.js adds the class for one transition). */
:root.theme-anim *,:root.theme-anim *::before,:root.theme-anim *::after{
  transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),fill var(--t-ui) var(--ease-out),stroke var(--t-ui) var(--ease-out)!important;
}

/* ---- Base --------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:400 13px/1.4 var(--font-sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
:focus-visible{outline:var(--hair) solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Popovers (settings, ticker list): shell.js toggles [data-open]; [hidden] is set only after the exit transition.
   --pop-x: an optional horizontal nudge a popover's own JS can set (in px) to stay inside the viewport near a
   window edge, without fighting this transform for the enter/exit animation — it defaults to 0 for every
   popover that never sets it. */
.pop{
  opacity:0;transform:translateY(4px) scale(.985) translateX(var(--pop-x,0px));transform-origin:top left;visibility:hidden;
  transition:opacity var(--t-micro) var(--ease-in),transform var(--t-micro) var(--ease-in),visibility 0s linear var(--t-micro);
}
.pop[data-open]{
  opacity:1;transform:translateX(var(--pop-x,0px));visibility:visible;
  transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out),visibility 0s;
}
.pop[hidden]{display:none}

/* First paint: a short, staggered entrance (rail items, ticker, chart). --i is set inline per item. */
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.enter{animation:rise var(--t-enter) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
.enter-x{animation:slide var(--t-enter) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms + 60ms)}

/* ---- Layout ------------------------------------------------------------------------------- */
.shell{display:grid;height:100vh;height:100dvh;grid-template-columns:var(--rail-w) 1fr;grid-template-areas:"rail canvas"}
.canvas{grid-area:canvas;position:relative;background:var(--bg);min-width:0}

/* ---- Rail --------------------------------------------------------------------------------- */
.rail{grid-area:rail;position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 0;background:var(--bg);border-right:var(--hair) solid var(--line);z-index:15}
.rail::before,.rail::after{content:"";position:absolute;right:-1px;width:6px;height:var(--hair);background:var(--line-strong)}
.rail::before{top:0}
.rail::after{bottom:0}

.rail svg{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linejoin:round;stroke-linecap:round}
.rail svg *{vector-effect:non-scaling-stroke}

.rail__logo{display:grid;place-items:center;width:38px;height:38px;color:var(--fg);text-decoration:none}
.rail__logo svg{width:28px;height:28px;overflow:visible}
.rail__logo .logo__curve{stroke-width:1.4}
.rail__logo .logo__tangent{stroke-width:1;transition:stroke var(--t-micro) var(--ease-out)}
.rail__logo .logo__dot{fill:var(--fg);stroke:none;transition:transform var(--t-ui) var(--ease-out);transform-origin:20.8px 17.9px}
.rail__logo:hover .logo__tangent{stroke:var(--fg-dim)}
.rail__logo:hover .logo__dot{transform:scale(1.35)}
/* the mark draws itself once on load: curve, then tangent, then the point lands */
.rail__logo .logo__curve,.rail__logo .logo__tangent{stroke-dasharray:1;animation:draw 700ms var(--ease-out) backwards}
.rail__logo .logo__tangent{animation-delay:260ms}
.rail__logo .logo__dot{animation:rise var(--t-enter) var(--ease-out) 520ms backwards}

.rail__rule{display:block;width:16px;height:var(--hair);background:var(--line-strong);margin:10px 0 8px}
.rail__slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

.rail__btn{
  position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--fg-dim);cursor:pointer;
  transition:color var(--t-micro) var(--ease-out),background-color var(--t-micro) var(--ease-out);
}
.rail__btn svg{transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.rail__btn:hover{color:var(--fg);background:var(--hover)}
.rail__btn:active svg{transform:scale(.92)}

/* Active marker: a hairline on the canvas-facing edge, grows from the centre */
.rail__btn::after{content:"";position:absolute;top:8px;bottom:8px;right:-7px;width:var(--hair);background:var(--fg);transform:scaleY(0);transition:transform var(--t-ui) var(--ease-out)}
.rail__btn[aria-pressed="true"],.rail__btn[aria-expanded="true"]{color:var(--fg)}
.rail__btn[aria-pressed="true"]::after,.rail__btn[aria-expanded="true"]::after{transform:scaleY(1)}

.rail__btn[aria-disabled="true"]{color:var(--fg-faint);cursor:not-allowed}
.rail__btn[aria-disabled="true"]:hover{background:transparent;color:var(--fg-faint)}
.rail__btn[aria-disabled="true"] svg{opacity:.55}
.rail__btn[aria-disabled="true"]:active svg{transform:none}

.rail__settings{margin-top:auto}
.rail__settings svg{transition:transform 480ms var(--ease-out)}
.rail__settings[aria-expanded="true"] svg{transform:rotate(60deg)}

/* Tooltip: always rendered, faded and nudged in on hover/focus */
.rail__btn[data-tip]::before{
  content:attr(data-tip);position:absolute;top:50%;left:calc(100% + 12px);z-index:10;
  padding:3px 7px;white-space:nowrap;pointer-events:none;
  font:400 10px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg);background:var(--bg);border:var(--hair) solid var(--line-strong);
  opacity:0;transform:translate(-4px,-50%);
  transition:opacity var(--t-micro) var(--ease-in),transform var(--t-micro) var(--ease-in);
}
.rail__btn[data-tip]:hover::before,.rail__btn[data-tip]:focus-visible::before{
  opacity:1;transform:translate(0,-50%);
  transition:opacity var(--t-ui) var(--ease-out) 80ms,transform var(--t-ui) var(--ease-out) 80ms;
}
.rail__settings[aria-expanded="true"]::before{opacity:0!important}

/* ---- Ticker box --------------------------------------------------------------------------- */
.ticker{position:absolute;top:var(--gap);left:var(--gap);z-index:12}
.ticker__btn{
  position:relative;display:flex;align-items:baseline;gap:12px;min-width:220px;padding:9px 12px 9px 14px;
  background:var(--bg);border:var(--hair) solid var(--line-strong);cursor:pointer;font-family:var(--font-mono);
  transition:border-color var(--t-micro) var(--ease-out),background-color var(--t-micro) var(--ease-out);
}
.ticker__btn:hover,.ticker__btn[aria-expanded="true"]{border-color:var(--fg)}
.ticker__btn::before,.ticker__btn::after{content:"";position:absolute;width:6px;height:6px;border-color:var(--fg);border-style:solid;transition:width var(--t-ui) var(--ease-out),height var(--t-ui) var(--ease-out)}
.ticker__btn::before{top:-1px;left:-1px;border-width:var(--hair) 0 0 var(--hair)}
.ticker__btn::after{bottom:-1px;right:-1px;border-width:0 var(--hair) var(--hair) 0}
.ticker__btn:hover::before,.ticker__btn:hover::after{width:10px;height:10px}

.ticker__sym{font:500 15px/1 var(--font-mono);letter-spacing:.06em}
/* The price sits in a cell so the update flash (shell.js flash()) has an area to tint */
.ticker__px{font:400 13px/1 var(--font-mono);color:var(--fg-dim);font-variant-numeric:tabular-nums;padding:3px 6px;margin:-3px -6px}
.ticker__chg{font:500 13px/1 var(--font-mono);font-variant-numeric:tabular-nums;margin-left:auto}
.ticker__chg::before{display:inline-block;width:.9em;font-size:9px;vertical-align:1px;color:var(--fg-dim)}
.ticker[data-dir="up"] .ticker__chg::before{content:"▲"}
.ticker[data-dir="down"] .ticker__chg::before{content:"▼"}

.ticker__caret{align-self:center;width:10px;height:10px;fill:none;stroke:var(--fg-dim);stroke-width:1;transition:transform var(--t-ui) var(--ease-out)}
.ticker__btn[aria-expanded="true"] .ticker__caret{transform:rotate(180deg)}

.ticker__list{position:absolute;top:100%;left:0;list-style:none;margin:6px 0 0;padding:4px 0;min-width:100%;background:var(--surface);border:var(--hair) solid var(--line-strong)}
.ticker__opt{
  display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:10px;padding:8px 12px 8px 14px;cursor:pointer;
  font:400 12px/1 var(--font-mono);color:var(--fg-dim);
  transition:background-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out);
}
.ticker__list[data-open] .ticker__opt{animation:rise var(--t-ui) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 30ms)}
.ticker__opt:hover,.ticker__opt.is-active{background:var(--hover);color:var(--fg)}
.ticker__opt[aria-selected="true"]{color:var(--fg)}
.ticker__opt-sym{position:relative;font-weight:500;letter-spacing:.06em;color:var(--fg)}
.ticker__opt-sym::before{content:"";position:absolute;left:-8px;top:50%;width:3px;height:var(--hair);background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)}
.ticker__opt[aria-selected="true"] .ticker__opt-sym::before{transform:scaleX(1)}
.ticker__opt-name{font-family:var(--font-sans);font-size:11px;white-space:nowrap}
.ticker__opt-chg{font-variant-numeric:tabular-nums;text-align:right}
.ticker__note{margin:4px 14px 6px;padding-top:8px;border-top:var(--hair) solid var(--line);font:400 10px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint)}

/* ---- Modules (chart, greek exposure, …): one panel area under the ticker, cross-faded on switch ---- */
.module{
  position:absolute;inset:calc(var(--gap) + 52px) var(--gap) var(--gap) var(--gap);
  display:flex;flex-direction:column;
  transition:opacity var(--t-ui) var(--ease-out) 60ms,transform var(--t-ui) var(--ease-out) 60ms,visibility 0s;
}
.module[hidden]{display:flex;opacity:0;transform:translateY(6px);pointer-events:none;visibility:hidden;transition:opacity var(--t-micro) var(--ease-in),transform var(--t-micro) var(--ease-in),visibility 0s linear var(--t-micro)}
/* frame: hairline corner ticks */
.module::before,.module::after{content:"";position:absolute;width:8px;height:8px;border-color:var(--line-strong);border-style:solid;pointer-events:none}
.module::before{top:0;left:0;border-width:var(--hair) 0 0 var(--hair)}
.module::after{bottom:0;right:0;border-width:0 var(--hair) var(--hair) 0}

/* ---- Dropdown (ui/dropdown.js): caption + value + caret, listbox popover ------------------- */
.dd{position:relative;z-index:6}
/* Every .dd (and .msf__menu, which is also a .dd) sits at the same z-index, so two side by side are tied and
   DOM order decides which one paints on top where they overlap. An open popover can be wider than its own
   button and reach over a later sibling control, or over the canvas below — and since a tie is broken by paint
   order, that later sibling (even just a closed dropdown's small button, or the chart's own repaint) can end up
   drawn over the open popover. :has() lifts the whole wrapper above every sibling and the chart the moment its
   own popover opens, so this can't happen regardless of where it sits in the markup.
   (2026-10-08: found via the Days/Settings popovers in Mean Structure Field, where the toolbar is dense enough
   to make the tie visible, but the bug is generic to any two .dd controls in one bar — fixed shell-wide.) */
.dd:has(>.dd__list[data-open]),.msf__menu:has(>.msf__pop[data-open]){z-index:50}
.dd[hidden]{display:block;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--t-micro) var(--ease-in),visibility 0s linear var(--t-micro)}
.dd{opacity:1;transition:opacity var(--t-ui) var(--ease-out)}
.dd__btn{
  position:relative;display:flex;align-items:center;gap:8px;padding:5px 8px 5px 9px;cursor:pointer;
  background:var(--bg);border:var(--hair) solid var(--line-strong);color:var(--fg);
  font:400 11px/1 var(--font-mono);letter-spacing:.04em;white-space:nowrap;
  transition:border-color var(--t-micro) var(--ease-out);
}
.dd__btn:hover,.dd__btn[aria-expanded="true"]{border-color:var(--fg)}
.dd__cap{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.dd__val{color:var(--fg)}
.dd__caret{width:9px;height:9px;fill:none;stroke:var(--fg-dim);stroke-width:1;transition:transform var(--t-ui) var(--ease-out)}
.dd__btn[aria-expanded="true"] .dd__caret{transform:rotate(180deg)}
.dd__list{
  position:absolute;top:calc(100% + 4px);left:0;min-width:100%;max-height:min(320px,45vh);overflow:auto;list-style:none;margin:0;padding:4px 0;scrollbar-width:thin;
  background:var(--surface);border:var(--hair) solid var(--line-strong);z-index:30;
}
.dd--up .dd__list{top:auto;bottom:calc(100% + 4px);transform-origin:bottom left}
.dd--right .dd__list{left:auto;right:0;transform-origin:top right}
.dd__opt{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 12px;cursor:pointer;white-space:nowrap;
  font:400 11px/1.2 var(--font-mono);color:var(--fg-dim);
  transition:background-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out);
}
.dd__list[data-open] .dd__opt{animation:rise var(--t-ui) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 18ms)}
.dd__opt:hover,.dd__opt.is-active{background:var(--hover);color:var(--fg)}
.dd__opt[aria-selected="true"]{color:var(--fg)}
.dd__opt[aria-selected="true"]::before{content:"";position:absolute;left:4px;width:3px;height:var(--hair);background:var(--fg);margin-top:.5em}
.dd__opt{position:relative}
.dd__hint{font-size:9px;letter-spacing:.06em;color:var(--fg-faint)}
/* the "?" beside a mode: hover for what it does; green marks the mode most used; the key sits at the foot of a menu that has them */
.dd__help{display:inline-grid;place-items:center;width:12px;height:12px;margin-left:7px;border:var(--hair) solid var(--fg-faint);border-radius:50%;font:500 8px/1 var(--font-mono);color:var(--fg-faint);vertical-align:1px;cursor:help;transition:color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out)}
.dd__help:hover{color:var(--fg);border-color:var(--fg)}
.dd__help--common{color:var(--field-pos);border-color:var(--field-pos)}
.dd__help--common:hover{color:var(--field-pos);border-color:var(--field-pos);background:color-mix(in srgb,var(--field-pos) 18%,transparent)}
.dd__note{display:flex;align-items:center;gap:6px;margin-top:3px;padding:6px 12px 3px;border-top:var(--hair) solid var(--line);font:400 9px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint);white-space:nowrap;cursor:default}
.dd__note .dd__help{margin-left:0;cursor:default}
.dd__tip{position:fixed;z-index:90;max-width:270px;padding:8px 10px;background:var(--surface);border:var(--hair) solid var(--line-strong);font:400 10px/1.45 var(--font-mono);color:var(--fg-dim);pointer-events:none}
.dd__tip[hidden]{display:none}
.dd__tip b{color:var(--field-pos);font-weight:500}
.dd__opt[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ---- Greek exposure -------------------------------------------------------------------- */
.gex__stage{position:relative;flex:1;min-height:0}
.gex__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;outline:none;transition:opacity var(--t-ui) var(--ease-out)}
.gex__canvas.is-fading{opacity:0;transition:opacity var(--t-micro) var(--ease-in)}
.gex__canvas.is-dragging{cursor:grabbing}
.gex__canvas.is-rotating{cursor:move}
/* axis dropdowns are placed by gex.js at the axis they label; they glide when the Z axis comes out */
.dd--axis{position:absolute;left:0;top:0;will-change:transform;transition:opacity var(--t-ui) var(--ease-out)}
.dd--axis.dd--pair{display:flex;gap:6px}
.dd--axis .dd__btn{background:var(--bg)}
.gex__plus{
  position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;display:grid;place-items:center;z-index:7;cursor:pointer;
  background:var(--bg);border:var(--hair) solid var(--fg);border-radius:50%;color:var(--fg);
  transition:background-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out);
}
/* hidden until the pointer comes near the origin (gex.js adds .is-shown); keyboard focus shows it too */
.gex__plus{opacity:0;pointer-events:none}
.gex__plus.is-shown,.gex__plus:focus-visible{opacity:1;pointer-events:auto}
.gex__plus{transition:opacity var(--t-ui) var(--ease-out),background-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out)}
.gex__plus svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;transform:scale(.6);transition:transform var(--t-enter) var(--ease-out)}
.gex__plus.is-shown svg,.gex__plus:focus-visible svg{transform:scale(1)}
.gex__plus.is-shown[aria-pressed="true"] svg,.gex__plus:focus-visible[aria-pressed="true"] svg{transform:scale(1) rotate(45deg)}
.gex__plus:hover{background:var(--fg);color:var(--bg)}
.gex__plus::after{content:"";position:absolute;inset:-5px;border:var(--hair) solid var(--line-strong);border-radius:50%;opacity:0;transform:scale(.7);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.gex__plus:hover::after{opacity:1;transform:none}
.gex__plus[data-tip]::before{
  content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-4px,-50%);padding:3px 7px;white-space:nowrap;pointer-events:none;
  font:400 10px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:var(--bg);border:var(--hair) solid var(--line-strong);
  opacity:0;transition:opacity var(--t-micro) var(--ease-in),transform var(--t-micro) var(--ease-in);
}
.gex__plus:hover[data-tip]::before{opacity:1;transform:translate(0,-50%);transition:opacity var(--t-ui) var(--ease-out) 80ms,transform var(--t-ui) var(--ease-out) 80ms}
/* a thin indeterminate bar while exposures are computed */
.gex__loading{position:absolute;left:0;right:0;top:0;height:var(--hair);overflow:hidden;opacity:0;transition:opacity var(--t-ui) var(--ease-out)}
.gex__loading[data-on]{opacity:1}
.gex__loading::before{content:"";position:absolute;top:0;bottom:0;width:30%;background:var(--fg);animation:sweep 1.1s var(--ease-out) infinite}
@keyframes sweep{from{left:-30%}to{left:100%}}

/* ---- Hedge pressure map ------------------------------------------------------------------ */
.hp__legend{display:flex;align-items:center;gap:10px;font:400 9px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap}
.hp__legend i{display:inline-block;width:10px;height:6px;margin-right:5px;vertical-align:1px;opacity:.85}
.hp__legend .pos{background:var(--field-pos)}
.hp__legend .neg{background:var(--field-neg)}
/* field history layers (ui/field-history.js): five stacked canvases under the interaction canvas, the capture scrubber, a
   screen-reader line for keyboard crosshair moves, and the colour-scale note */
.hp__scale{color:var(--fg-dim)}
.hp .chart__bar{height:auto;min-height:28px;flex-wrap:wrap;gap:4px 10px;padding:3px 0 3px 12px}
.hp .chart__readout{flex:1 1 160px;min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.fh-layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out)}
.gex__stage.is-fading>.fh-layer,.gex__stage.is-fading>.gex__canvas{opacity:0;transition:opacity var(--t-micro) var(--ease-in)}
.fh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fh-scrub{display:flex;align-items:center;gap:6px;flex:0 1 220px;min-width:120px}
.fh-scrub__range{flex:1;min-width:60px;height:14px;margin:0;accent-color:var(--fg-dim);cursor:pointer}
.fh-scrub__range:disabled{opacity:.4;cursor:default}
.fh-scrub__label{font:400 9px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap}
.fh-scrub[data-live] .fh-scrub__label,.fh-scrub[data-past] .fh-scrub__label{color:var(--fg)}
/* Greek Exposure module, View: Profile | Map (ui/gex.js sets data-view; the Map is ui/gex-map.js on the shared field layers) */
.gex[data-view="map"] .gex-profile-only,.gex[data-view="surface"] .gex-profile-only,.gex[data-view="table"] .gex-profile-only,.gex[data-view="ladder"] .gex-profile-only,.gex:not([data-view="map"]) .gex-map-only,.gex:not([data-view="surface"]) .gex-surface-only,.gex:not([data-view="table"]) .gex-table-only,.gex:not([data-view="ladder"]) .gex-ladder-only{display:none}
.gex[data-view="table"] .gex-side-ctl{display:none}
.gex[data-view="ladder"] .gex-side-ctl{display:none}
.gex[data-view="profile"] .gex-greek-ctl,.gex[data-view="table"] .gex-greek-ctl{display:none}
.gex[data-view="ladder"] .gex-greek-ctl{display:none}
.gex-map__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.gex[data-view="map"] .chart__bar,.gex[data-view="surface"] .chart__bar,.gex[data-view="table"] .chart__bar,.gex[data-view="ladder"] .chart__bar{height:auto;min-height:28px;flex-wrap:wrap;gap:4px 10px;padding:3px 0 3px 12px}
.gex[data-view="map"] .chart__readout,.gex[data-view="surface"] .chart__readout,.gex[data-view="table"] .chart__readout,.gex[data-view="ladder"] .chart__readout{flex:1 1 160px;min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.gex-surf__legend{gap:10px}
/* Surface settings (ui/gex-surface.js): one panel in the top right corner of the plot, hidden until the pointer comes there */
.gex-surf__ctl{position:absolute;top:10px;right:12px;z-index:8;display:flex;flex-direction:column;gap:5px;min-width:176px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.gex-surf__ctl.is-shown{opacity:1;pointer-events:auto;transform:none}
.gex-surf__ctl .dd{display:block}
.gex-surf__ctl .dd__btn{width:100%;justify-content:space-between;background:var(--bg)}
/* Table view (ui/gex-table.js): strikes × expirations, cells tinted by sign in the field's colours, strength set inline as --k */
.gt__scroll{position:absolute;inset:0;overflow:auto;outline:none;scrollbar-color:var(--line-strong) transparent}
.gt__table{border-collapse:separate;border-spacing:0;min-width:100%;font:400 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.gt__table th,.gt__table td{height:26px;padding:0 14px;border-right:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line);white-space:nowrap}
.gt__table thead th{position:sticky;top:0;z-index:3;height:40px;background:var(--bg);text-align:right;font-weight:400;border-bottom-color:var(--line-strong)}
.gt__table thead .gt__corner{left:0;z-index:4;text-align:left}
.gt__k{display:block;color:var(--fg);font-size:11px}
.gt__u{display:block;margin-top:4px;color:var(--fg-faint);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.gt__s{position:sticky;left:0;z-index:2;background:var(--bg);text-align:left;font-weight:400;color:var(--fg-dim);border-right-color:var(--line-strong)}
.gt__table tr.is-near .gt__s{color:var(--fg)}
/* Cells (2026-10-11): the tint strength rides --gk (a registered number, so it EASES when a poll changes it); strong cells (data-s 2, 3) get weight, the strongest a sign-coloured
   ring; every value carries its scale (.gt__m: M, or B in full ink). Colours are the field's tokens; --gt-max is the table's own, stronger, ceiling than the chart field's. */
@property --gk{syntax:'<number>';inherits:false;initial-value:0}
.gt__c{text-align:right;color:var(--fg);transition:--gk var(--t-enter) var(--ease-out),filter var(--t-micro) var(--ease-out)}
.gt__c.none{color:var(--fg-faint)}
.gt__c.pos{--gt-sign:var(--field-pos);background:color-mix(in srgb,var(--field-pos) calc(var(--gk,0)*var(--gt-max,.9)*100%),transparent)}
.gt__c.neg{--gt-sign:var(--field-neg);background:color-mix(in srgb,var(--field-neg) calc(var(--gk,0)*var(--gt-max,.9)*100%),transparent)}
.gt__m{margin-left:2px;font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--fg-dim)}
.gt__m[data-u="B"]{color:var(--fg);font-size:11px;font-weight:700}
.gt__c[data-s="2"] .gt__n{font-weight:500}
.gt__c[data-s="2"] .gt__m,.gt__c[data-s="3"] .gt__m{color:var(--fg)}
.gt__c[data-s="3"]{font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gt-sign) 80%,transparent)}
.gt__c[data-i]:hover{outline:var(--hair) solid var(--fg);outline-offset:-1px;filter:brightness(1.2)}
/* the pointer's row and column (ui/gex-table.js light()) */
.gt__c.is-hc,.gt__table tr.is-hr .gt__c{filter:brightness(1.14)}
.gt__table tr.is-hr .gt__s,.gt__table thead th.is-hc{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,var(--bg))}
/* a polled value that moved: one edge flash, bright when the cell grew, dim when it shrank (the numbers themselves are never tweened) */
@keyframes gt-flash{from{box-shadow:inset 0 0 0 2px var(--gt-flash)}to{box-shadow:inset 0 0 0 2px transparent}}
.gt__c.is-chg{animation:gt-flash 1000ms var(--ease-out)}
.gt__c.is-grow{--gt-flash:var(--fg)}
.gt__c.is-shrink{--gt-flash:var(--fg-faint)}
/* a new context enters as a wave out from the spot line: rows fade in by distance (--d), each cell's tint grows from nothing by column (--j) */
@keyframes gt-row{from{opacity:0}to{opacity:1}}
@keyframes gt-tint{from{--gk:0}}
.gt__table tbody.is-enter tr{animation:gt-row var(--t-enter) var(--ease-out) both;animation-delay:calc(var(--d,0)*26ms)}
.gt__table tbody.is-enter .gt__c{animation:gt-tint 700ms var(--ease-out) both;animation-delay:calc(var(--d,0)*26ms + var(--j,0)*40ms)}
.gt__spot th,.gt__spot td{height:17px;padding-top:0;padding-bottom:0;border-bottom:var(--hair) solid var(--fg-dim);border-top:var(--hair) solid var(--fg-dim)}
.gt__spot .gt__s{color:var(--bg);background:var(--fg);font-size:9px;letter-spacing:.06em}
.gt .gt__scroll{transition:opacity var(--t-ui) var(--ease-out)}
.gt.is-fading .gt__scroll{opacity:0;transition:opacity var(--t-micro) var(--ease-in)}
/* Ladder view (ui/gex-ladder.js): strikes down the middle, a bar out to each side (negative left, positive right), its value at the tip, one segment per expiration inside the bar.
   --gw (a registered number, 0 to 1) is the bar's share of the track: the bar, its tip label and the entrance all ride it, so one easing moves them together. */
@property --gw{syntax:'<number>';inherits:true;initial-value:0}
.gl__scroll{position:absolute;inset:0;overflow:auto;outline:none;scrollbar-color:var(--line-strong) transparent}
.gl__grid{min-width:520px;font:400 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.gl__head,.gl__row,.gl__spot{display:grid;grid-template-columns:1fr 84px 1fr}
.gl__head{position:sticky;top:0;z-index:3;align-items:end;height:30px;padding-bottom:7px;background:var(--bg);border-bottom:var(--hair) solid var(--line-strong);color:var(--fg-faint);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.gl__hl{text-align:right;padding-right:14px}.gl__hk{text-align:center}.gl__hr{padding-left:14px}
.gl__row{height:26px;border-bottom:var(--hair) solid var(--line)}
.gl__k{display:flex;align-items:center;justify-content:center;color:var(--fg-dim);background:var(--bg);border-left:var(--hair) solid var(--line-strong);border-right:var(--hair) solid var(--line-strong)}
.gl__row.is-near .gl__k{color:var(--fg);font-weight:600}
.gl__side{position:relative;--gl-c:var(--field-pos);--tip:84px;min-width:0;transition:--gw var(--t-enter) var(--ease-out)}
.gl__side[data-sg="neg"]{--gl-c:var(--field-neg)}
.gl__bar{position:absolute;top:4px;bottom:4px;width:calc(var(--gw,0)*(100% - var(--tip)));display:flex}
.gl__side--r .gl__bar{left:0}
.gl__side--l .gl__bar{right:0;flex-direction:row-reverse}
.gl__seg{flex:var(--f,0) 1 0;min-width:0;background:color-mix(in srgb,var(--gl-c) calc(var(--a,.9)*100%),transparent);transition:flex-grow var(--t-enter) var(--ease-out)}
.gl__side--r .gl__seg+.gl__seg{border-left:1px solid color-mix(in srgb,var(--bg) 60%,transparent)}
.gl__side--l .gl__seg+.gl__seg{border-right:1px solid color-mix(in srgb,var(--bg) 60%,transparent)}
.gl__v{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;color:var(--fg)}
.gl__side--r .gl__v{left:calc(var(--gw,0)*(100% - var(--tip)) + 7px)}
.gl__side--l .gl__v{right:calc(var(--gw,0)*(100% - var(--tip)) + 7px);text-align:right}
.gl__side[data-s="2"] .gl__v,.gl__side[data-s="3"] .gl__v{font-weight:600}
.gl__side[data-s="3"] .gl__bar{box-shadow:0 0 0 1px color-mix(in srgb,var(--gl-c) 85%,transparent)}
.gl__side.is-empty .gl__bar,.gl__side.is-empty .gl__v{visibility:hidden}
.gl__side.is-clip .gl__bar::after{content:"";position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--fg)}
.gl__side--r.is-clip .gl__bar::after{right:0}
.gl__side--l.is-clip .gl__bar::after{left:0}
.gl__row.is-hr{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.gl__row.is-hr .gl__k{color:var(--fg)}
.gl__side:hover .gl__bar{filter:brightness(1.2)}
.gl__spot{height:17px;align-items:center;border-top:var(--hair) solid var(--fg-dim);border-bottom:var(--hair) solid var(--fg-dim)}
.gl__spot-tag{justify-self:center;position:relative;z-index:1;white-space:nowrap;padding:3px 8px;background:var(--fg);color:var(--bg);font-size:9px;letter-spacing:.06em}
@keyframes gl-flash{from{box-shadow:0 0 0 2px var(--fg)}to{box-shadow:0 0 0 2px transparent}}
.gl__side.is-chg .gl__bar{animation:gl-flash 1000ms var(--ease-out)}
@keyframes gl-grow{from{--gw:0}}
.gl__body.is-enter .gl__row{animation:gt-row var(--t-enter) var(--ease-out) both;animation-delay:calc(var(--d,0)*26ms)}
.gl__body.is-enter .gl__side{animation:gl-grow 700ms var(--ease-out) both;animation-delay:calc(var(--d,0)*26ms)}
.gl .gl__scroll{transition:opacity var(--t-ui) var(--ease-out)}
.gl.is-fading .gl__scroll{opacity:0;transition:opacity var(--t-micro) var(--ease-in)}

/* ---- Pressure horizon: the state card (top-left of the plot) ------------------------------- */
.ph__card{
  position:absolute;top:12px;left:14px;z-index:5;width:212px;padding:11px 12px 12px;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 88%,transparent);border:var(--hair) solid var(--line-strong);
  font:400 10px/1.3 var(--font-mono);color:var(--fg-dim);
  opacity:0;transform:translateY(4px);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);
}
.ph__card[data-on]{opacity:1;transform:none}
.ph__card::before,.ph__card::after{content:"";position:absolute;width:6px;height:6px;border-color:var(--fg);border-style:solid}
.ph__card::before{top:-1px;left:-1px;border-width:var(--hair) 0 0 var(--hair)}
.ph__card::after{bottom:-1px;right:-1px;border-width:0 var(--hair) var(--hair) 0}
.ph__cap{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.ph__value{display:flex;align-items:baseline;gap:8px;margin:5px 0 9px}
.ph__value b{font:500 24px/1 var(--font-mono);color:var(--fg);font-variant-numeric:tabular-nums}
.ph__value span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.ph__row{display:grid;grid-template-columns:1fr 26px;gap:6px;align-items:center;margin-top:5px}
.ph__row i{grid-column:1/-1;display:block;height:var(--hair);background:var(--line-strong);position:relative;margin-top:2px}
.ph__row i::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:var(--w,0%);background:var(--fg);transition:width var(--t-enter) var(--ease-out)}
.ph__row em{font-style:normal;text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
.ph__note{margin-top:9px;padding-top:7px;border-top:var(--hair) solid var(--line);font-size:9px;line-height:1.45;color:var(--fg-faint)}

/* ---- Pressure horizon: the terrain reading (bottom-left of the plot) ------------------------ */
.ph__read{
  position:absolute;left:14px;bottom:14px;z-index:5;width:300px;max-height:calc(100% - 300px);overflow:hidden auto;padding:11px 12px 10px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);border:var(--hair) solid var(--line-strong);
  font:400 10px/1.35 var(--font-mono);color:var(--fg-dim);scrollbar-width:thin;
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);
}
.ph__read[data-on]{opacity:1;transform:none;pointer-events:auto}
.ph__read::before,.ph__read::after{content:"";position:absolute;width:6px;height:6px;border-color:var(--fg);border-style:solid}
.ph__read::before{top:-1px;left:-1px;border-width:var(--hair) 0 0 var(--hair)}
.ph__read::after{bottom:-1px;right:-1px;border-width:0 var(--hair) var(--hair) 0}
.ph__verdict{margin:5px 0 8px;color:var(--fg);font-size:11px;letter-spacing:.02em}
.ph__obs{display:grid;grid-template-columns:12px 1fr auto;gap:2px 7px;align-items:baseline;padding:6px 0;border-top:var(--hair) solid var(--line)}
.ph__obs b{font-weight:500;color:var(--fg)}
.ph__obs .side{color:var(--fg);text-align:center}
.ph__obs .rec{color:var(--fg-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.ph__obs .rec.is-sig{color:var(--fg)}
.ph__obs p{grid-column:2/-1;margin:0;font-size:9px;line-height:1.4;color:var(--fg-faint)}
.ph__obs i{grid-column:2/-1;display:block;height:var(--hair);background:var(--line-strong);position:relative;margin-top:3px}
.ph__obs i::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:var(--w,0%);background:var(--fg);transition:width var(--t-enter) var(--ease-out)}

/* ---- Chart -------------------------------------------------------------------------------- */

.chart__bar{display:flex;align-items:center;gap:14px;height:28px;padding:0 0 0 12px;border-bottom:var(--hair) solid var(--line)}
.chart__title{font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;flex:none}
.chart__readout{font:400 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg);opacity:0;transition:opacity var(--t-micro) var(--ease-out)}
.chart__readout[data-on]{opacity:1}
.chart__src{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.chart__readout{white-space:nowrap}

/* segmented button groups in the chart bar (timeframes, candles/line) */
.chart__seg{display:flex;border:var(--hair) solid var(--line-strong)}
.chart__seg button{
  position:relative;display:grid;place-items:center;min-width:28px;padding:5px 8px;border:0;background:transparent;cursor:pointer;
  font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim);
  transition:color var(--t-micro) var(--ease-out),background-color var(--t-ui) var(--ease-out);
}
.chart__seg button+button{border-left:var(--hair) solid var(--line-strong)}
.chart__seg button:hover{color:var(--fg)}
.chart__seg button[aria-pressed="true"]{color:var(--bg);background:var(--fg)}
.chart__seg svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.chart__seg svg *{vector-effect:non-scaling-stroke}
.chart__seg svg .fill{fill:currentColor}

/* appears only once the view has been moved off its default */
.chart__reset{
  padding:4px 8px;border:var(--hair) solid var(--line-strong);background:transparent;cursor:pointer;
  font:400 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);
  opacity:1;transform:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out),color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out);
}
.chart__reset:hover{color:var(--fg);border-color:var(--fg)}
.chart__reset[hidden]{display:block;opacity:0;transform:translateX(4px);pointer-events:none;visibility:hidden;transition:opacity var(--t-micro) var(--ease-in),transform var(--t-micro) var(--ease-in),visibility 0s linear var(--t-micro)}

/* the Indicators menu in the price chart's bar */
.chart__ind{position:relative;flex:none}
.chart__indbtn{padding:5px 8px;border:var(--hair) solid var(--line-strong);background:transparent;cursor:pointer;font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim);transition:color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out)}
.chart__indbtn:hover,.chart__indbtn[aria-expanded="true"]{color:var(--fg);border-color:var(--fg)}
.chart__indbtn:not([data-count="0"])::after{content:" · " attr(data-count)}
.chart__indmenu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:190px;padding:6px 0;background:var(--bg);border:var(--hair) solid var(--line-strong)}
.chart__indmenu[hidden]{display:none}
.chart__indhead{padding:6px 12px 4px;font:500 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.chart__inditem{display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;border:0;background:transparent;cursor:pointer;text-align:left;font:400 11px/1 var(--font-mono);color:var(--fg-dim)}
.chart__inditem::before{content:"";width:9px;height:9px;border:var(--hair) solid var(--line-strong);flex:none}
.chart__inditem[aria-checked="true"]{color:var(--fg)}
.chart__inditem[aria-checked="true"]::before{background:var(--fg);border-color:var(--fg)}
.chart__inditem:hover{color:var(--fg);background:var(--line)}
.chart__indhint{padding:6px 12px 2px;font:400 9px/1.3 var(--font-mono);color:var(--fg-faint)}

.chart__stage{position:relative;flex:1;min-height:0}
.chart__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;outline:none;transition:opacity var(--t-ui) var(--ease-out)}
.chart__canvas.is-dragging{cursor:grabbing}
.chart__canvas:focus-visible{box-shadow:inset 0 0 0 var(--hair) var(--focus)}
.chart__canvas.is-fading{opacity:0;transition:opacity var(--t-micro) var(--ease-in)}
.chart__state{position:absolute;inset:0;display:grid;place-items:center;font:400 11px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--fg-faint);pointer-events:none;opacity:0;transition:opacity var(--t-ui) var(--ease-out)}
.chart__state[data-on]{opacity:1}

/* ---- Settings flyout ---------------------------------------------------------------------- */
.settings{
  position:fixed;bottom:10px;left:calc(var(--rail-w) + 8px);z-index:20;width:240px;padding:14px 14px 16px;
  background:var(--surface);border:var(--hair) solid var(--line-strong);transform-origin:bottom left;
}
.settings::before,.settings::after{content:"";position:absolute;width:8px;height:8px;border-color:var(--fg);border-style:solid}
.settings::before{top:-1px;left:-1px;border-width:var(--hair) 0 0 var(--hair)}
.settings::after{bottom:-1px;right:-1px;border-width:0 var(--hair) var(--hair) 0}
.settings__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:var(--hair) solid var(--line)}
.settings__title{margin:0;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.settings__code{font:400 9px/1 var(--font-mono);letter-spacing:.12em;color:var(--fg-faint)}
.settings__group{border:0;margin:0 0 14px;padding:0}
.settings__group:last-child{margin-bottom:0}
.settings__label{padding:0;margin-bottom:7px;font:400 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}

/* Segmented control */
.seg{display:flex;border:var(--hair) solid var(--line-strong)}
.seg__opt{flex:1;position:relative;cursor:pointer}
.seg__opt+.seg__opt{border-left:var(--hair) solid var(--line-strong)}
.seg__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg__opt span{display:block;padding:6px 0;text-align:center;font:400 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim);transition:color var(--t-micro) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.seg__opt:hover span{color:var(--fg)}
.seg__opt input:checked+span{background:var(--fg);color:var(--bg)}
.seg__opt input:focus-visible+span{outline:var(--hair) solid var(--focus);outline-offset:2px}

/* Reduced motion: no movement; colour and opacity changes stay instant */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
}

/* ---- Balance map: the levels as numbers, each with a copy button ----------------------- */
/* ---- Balance Map tokens (2026-10-08), shared by this stylesheet and ui/waves.js (which reads them from the section, so a
   palette set on the section reaches the canvas too). The defaults reproduce the Default theme exactly. ---- */
:root{--bal-curve-call:var(--fg);--bal-curve-put:var(--fg);--bal-curve-hover:var(--fg);--bal-call-hi:var(--bal-call-text);--bal-put-hi:var(--bal-put-text);
  --bal-ref:var(--fg);--bal-ref-tag:var(--fg);--bal-cross:var(--fg);--bal-grid:var(--line);--bal-wall-chip:var(--bal-wall);--bal-wall-ink:var(--bg);--bal-flat:0}
/* Graphite: a neutral grey-and-white palette for the Balance Map only, chosen from its Theme dropdown (nyvera.bw.palette).
   It redefines the shell tokens inside the section, so the toolbar, dropdowns, popovers, the level list and the canvas all
   follow, and nothing outside the Balance Map changes. --bal-flat:1 drops the gradients and the glow. */
.bw[data-palette="graphite"]{
  --bg:#111214;--surface:#1B1D20;--line:#26292D;--line-strong:#34373C;--hover:#26292D;--fg:#F2F3F5;--fg-dim:#B8BDC5;--fg-faint:#858C96;
  --bal-wall:#FFFFFF;--bal-wall-chip:#E9EBEE;--bal-wall-ink:#111214;
  --bal-call:#CBC6BE;--bal-put:#C4CBD5;--bal-call-fill:#494640;--bal-put-fill:#414852;--bal-fill-a:.78;
  --bal-call-text:#E7E3DD;--bal-put-text:#DFE5EC;--bal-call-on:#F2F3F5;--bal-put-on:#F2F3F5;
  --bal-curve-call:#94918C;--bal-curve-put:#929BA8;--bal-call-hi:#DDE1E7;--bal-put-hi:#DDE1E7;--bal-curve-hover:#FFFFFF;
  --bal-ref:#B8BDC5;--bal-ref-tag:#F2F3F5;--bal-cross:#F2F3F5;--bal-grid:#26292D;--bal-flat:1;--bal-prem:#9CCBE3;--bal-disc:#E0A9C8;
  background:var(--bg);color:var(--fg)}
.bw[data-palette="graphite"] .chart__bar{background:var(--surface)}
.bw[data-palette="graphite"] .dd__btn,.bw[data-palette="graphite"] .dd__list{background:var(--surface);border-color:var(--line-strong)}
.bw[data-palette="graphite"] .dd__btn:hover,.bw[data-palette="graphite"] .dd__btn[aria-expanded="true"]{border-color:var(--fg-dim)}
.bw__levels{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;padding:8px 2px 2px;border-top:var(--hair) solid var(--line);min-height:38px;font:400 10px/1.2 var(--font-mono);color:var(--fg-dim)}
.bw__levels:empty{display:none}
.bw__lv{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 9px;border:var(--hair) solid var(--line-strong);background:var(--surface);animation:rise var(--t-ui) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 24ms)}
.bw__lv::before{content:"";width:6px;height:6px;background:var(--c,var(--fg))}
.bw__lv .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.bw__lv .v{color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bw__copy{display:grid;place-items:center;width:22px;height:22px;padding:0;border:var(--hair) solid var(--line);background:transparent;color:var(--fg-dim);cursor:pointer;transition:border-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out)}
.bw__copy:hover{border-color:var(--fg);color:var(--fg)}
.bw__copy svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2}
.bw__copy[data-done]{border-color:var(--field-pos);color:var(--field-pos)}
.bw__lv--all{margin-left:auto;padding-left:9px}
.bw__lv--all::before{display:none}
/* the Pine Script generator under the levels (ui/waves.js, ui/waves-pine.js) */
.bw__pine{padding:8px 2px 2px;border-top:var(--hair) solid var(--line);font:400 10px/1.3 var(--font-mono);color:var(--fg-dim)}
.bw__pine[hidden]{display:none}
.bw__pine-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bw__pine-bar [hidden]{display:none}
.bw__pine-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.bw__pine-note{flex:1 1 240px;min-width:0;color:var(--fg-dim)}
.bw__pine-out{display:block;box-sizing:border-box;width:100%;height:220px;margin-top:8px;padding:8px;border:var(--hair) solid var(--line-strong);background:var(--surface);color:var(--fg);font:400 10px/1.45 var(--font-mono);resize:vertical;white-space:pre;overflow:auto;tab-size:4}
.bw__pine-out[hidden]{display:none}
.bw__pine-levels{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:6px 0 0}
.bw__pine-grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.bw__pine-grp .k{margin-right:4px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.bw__pine-tg[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
.bw__pine-tg[aria-pressed="false"]{color:var(--fg-faint)}
.msf__toggle[data-done]{border-color:var(--field-pos);color:var(--field-pos)}

/* ---- Volatility (projected daily reach) and Mean Structure Field ------------------------------------ */
/* many controls: the bar may wrap to a second row rather than squeeze them */
.vol .chart__bar,.msf .chart__bar{height:auto;min-height:28px;flex-wrap:wrap;gap:4px 10px;padding:3px 0 3px 12px}
/* flex:auto (the default) sizes a flex item to its own content, so without a fixed basis this span's box grows
   and shrinks with readout.textContent on every hover-driven pointermove — in a flex-wrap row that reflows
   every sibling after it (Days, Settings, the toggles) each time, which looks like the toolbar "glitching"
   whenever you hover, worst over a long readout such as an open cycle state's. A fixed basis makes the box's
   width independent of its content; overflow:hidden + ellipsis still truncates longer text exactly as before. */
.vol .chart__readout,.msf .chart__readout{flex:1 1 160px;min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis}
/* the local crosshair is drawn on its own layer over the chart, so a hover never redraws the chart */
.xh__overlay{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* on/off toggles in the chart bar (Split, the Stats / Bands panels) */
.msf__toggle{
  padding:5px 8px;border:var(--hair) solid var(--line-strong);background:var(--bg);cursor:pointer;white-space:nowrap;
  font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim);
  transition:color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out),background-color var(--t-ui) var(--ease-out);
}
.msf__toggle:hover{color:var(--fg);border-color:var(--fg)}
.msf__toggle[aria-pressed="true"],.msf__toggle[aria-expanded="true"]{color:var(--bg);background:var(--fg);border-color:var(--fg)}
/* Split view: off by default; when on, the two panes replace the single switched canvas */
.msf[data-split="on"] .msf__main{display:none}
.msf__split{position:absolute;inset:0;display:none;grid-template-columns:1fr minmax(220px,30%);gap:var(--gap);height:100%}
.msf[data-split="on"] .msf__split{display:grid}
.msf__pane{min-width:0;min-height:0}
@media (max-width:760px){.msf__split{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}}
/* collapsible statistics / reach-band panel under the chart (closed by default) */
.mod__panel{display:block;max-height:40%;overflow:auto;scrollbar-width:thin;padding:8px 2px 4px}
.mod__panel[hidden]{display:none}
/* the HTML the ported model functions emit (bandTableHTML, levelInspectorHTML) and the Volatility stats table */
.metrics-table{width:100%;border-collapse:collapse;margin:0 0 8px;font:400 10px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-dim)}
.metrics-table th{text-align:left;font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding:4px 8px;border-bottom:var(--hair) solid var(--line-strong)}
.metrics-table td{padding:4px 8px;border-bottom:var(--hair) solid var(--line);vertical-align:top}
.metrics-table td:first-child{color:var(--fg)}
.chart-caption,.mod__panel>p{margin:0 0 8px;font:400 10px/1.5 var(--font-mono);color:var(--fg-faint)}
.chart-caption b{font-weight:500;color:var(--fg)}
.odds-profile{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0 0 8px;font:400 10px/1.4 var(--font-mono)}
.odds-profile div{display:contents}
.odds-profile dt{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.odds-profile dd{margin:0;color:var(--fg)}
/* Days and Settings popovers: the dropdown's button and listbox chrome, holding checkboxes and grouped controls */
.msf__menu{position:relative}
.msf__pop{
  position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:220px;max-height:min(70vh,560px);overflow:auto;scrollbar-width:thin;
  padding:8px 10px 10px;background:var(--surface);border:var(--hair) solid var(--line-strong);transform-origin:top right;
  font:400 11px/1.3 var(--font-mono);color:var(--fg-dim);
}
.msf__pop--wide{width:min(360px,calc(100vw - 80px))}
.msf__pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:7px;margin-bottom:4px;border-bottom:var(--hair) solid var(--line)}
.msf__pop-acts{display:flex;gap:6px}
.msf__link{padding:2px 4px;border:0;background:transparent;cursor:pointer;font:400 10px/1 var(--font-mono);letter-spacing:.04em;color:var(--fg-dim);text-decoration:underline;text-underline-offset:2px;transition:color var(--t-micro) var(--ease-out)}
.msf__link:hover{color:var(--fg)}
.msf__checks{display:flex;flex-direction:column}
.msf__check{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;color:var(--fg-dim);transition:background-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out)}
.msf__check:hover{background:var(--hover);color:var(--fg)}
.msf__check[data-empty]{color:var(--fg-faint)}
.msf__hint{margin-left:auto;font-size:9px;letter-spacing:.06em;color:var(--fg-faint)}
.msf__note{margin:6px 0 0;font-size:9px;line-height:1.45;color:var(--fg-faint)}
.msf__pop input[type="checkbox"]{margin:0;accent-color:var(--fg);cursor:pointer}
.msf__settings[hidden]{display:none}
.msf__settings details{border-bottom:var(--hair) solid var(--line)}
.msf__settings summary{padding:8px 2px;cursor:pointer;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);transition:color var(--t-micro) var(--ease-out)}
.msf__settings summary:hover,.msf__settings details[open]>summary{color:var(--fg)}
.graph-settings-grid{display:flex;flex-direction:column;padding:0 2px 8px}
.graph-settings-grid label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px;cursor:pointer;color:var(--fg-dim)}
.graph-settings-grid label:hover{color:var(--fg)}
.graph-settings-grid select{max-width:60%;padding:3px 4px;background:var(--bg);color:var(--fg);border:var(--hair) solid var(--line-strong);font:400 10px/1.2 var(--font-mono);cursor:pointer}
.graph-settings-grid input[type="color"]{width:34px;height:18px;padding:0;border:var(--hair) solid var(--line-strong);background:transparent;cursor:pointer}
.graph-settings-grid input:disabled{opacity:.4;cursor:not-allowed}
.graph-settings-note{margin:4px 2px 0;font-size:9px;line-height:1.45;color:var(--fg-faint)}

/* Statistics: two matching-system machines side by side */
.stx{overflow:hidden}
.stx__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;overflow:auto;scrollbar-width:thin;padding:10px 2px 6px;min-height:0;flex:1}
.stx__m{min-width:0;display:flex;flex-direction:column;gap:12px}
.stx__head{display:flex;flex-direction:column;gap:3px;border-bottom:var(--hair) solid var(--line);padding-bottom:6px}
.stx__head h3{margin:0;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.stx__head span,.stx__foot,.stx__none{font:400 10px/1.4 var(--font-mono);color:var(--fg-dim)}
.stx__foot{grid-column:1/-1;margin:0}
.stx__t{border-collapse:collapse;width:100%;font:400 10px/1.3 var(--font-mono);color:var(--fg-dim)}
.stx__t caption{text-align:left;padding:0 0 4px;font:500 10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.stx__t caption span{display:block;text-transform:none;letter-spacing:0;font-weight:400;color:var(--fg-faint)}
.stx__t th,.stx__t td{padding:3px 6px;text-align:right;border-bottom:var(--hair) solid var(--line);white-space:nowrap}
.stx__t thead th{color:var(--fg-faint);font-weight:400}
.stx__t th:first-child,.stx__t tbody th{text-align:left;font-weight:400;color:var(--fg)}
.stx__rate{color:var(--fg)}
.stx .chart__bar{height:auto;min-height:28px;flex-wrap:wrap;gap:4px 10px;padding:3px 0 3px 12px}

/* Volatility · Session range (2026-10-08 redesign, looks only): ladder + sorted bullish / bearish level cards + excursion bars */
.vol .gex__stage{overflow:auto;scrollbar-width:thin}
.vr{position:relative;display:flex;flex-direction:column;gap:26px;padding:18px 4px 18px 2px;font-family:var(--font-sans);color:var(--fg);font-variant-numeric:tabular-nums;max-width:1400px}
.vr[hidden]{display:none}
.vr__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.vr__head h2{margin:0;font:600 22px/1.15 var(--font-sans);letter-spacing:-.01em}
.vr__head p{margin:6px 0 0;font:400 11px/1.3 var(--font-sans);color:var(--fg-dim)}
.vr__head p span{margin:0 6px;color:var(--fg-faint)}
.vr__origin{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.vr__origin span{font:400 11px/1.2 var(--font-sans);color:var(--fg-dim)}
.vr__origin b{font:500 30px/1.1 var(--font-sans);letter-spacing:-.01em}
.vr__main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
/* ladder: levels placed by price */
.vr__ladder{position:relative;border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.vr__lv{position:absolute;inset:0;pointer-events:none}
.vr__line{position:absolute;left:84px;right:68px;height:0;border-top:1px solid var(--fg-dim)}
.vr__px,.vr__pc{position:absolute;transform:translateY(-50%);white-space:nowrap}
.vr__px{left:0;font:400 19px/1 var(--font-sans);color:var(--fg)}
.vr__px i{font-style:normal;font-size:15px;color:var(--fg-dim)}
.vr__pc{right:0;font:500 11px/1 var(--font-sans);color:var(--fg)}
.vr__lv--wall .vr__line{border-top:1px dashed var(--fg)}
.vr__lv--median .vr__line{border-top:2px solid var(--fg);box-shadow:0 0 8px color-mix(in srgb,var(--fg) 55%,transparent)}
.vr__lv--ref .vr__line{border-top:1px solid var(--fg-faint)}
.vr__lv--ref .vr__pc{color:var(--fg)}
.vr__lv--obs .vr__line{border-top:1px dotted var(--fg-dim)}
.vr__lv--obs .vr__px{font-size:13px;color:var(--fg-dim)}
.vr__lv--obs .vr__pc{color:var(--fg-dim)}
.vr__lv--bear .vr__line{border-top-color:var(--fg-dim)}
.vr__lv--bear.vr__lv--median .vr__line{box-shadow:0 0 8px color-mix(in srgb,var(--fg-dim) 55%,transparent)}
.vr__band{position:absolute;left:92px;right:76px;background:color-mix(in srgb,var(--fg) 7%,transparent);border:var(--hair) solid var(--line)}
.vr__unit{position:absolute;left:0;bottom:-20px;font:400 9px/1 var(--font-sans);letter-spacing:.06em;color:var(--fg-dim)}
/* level cards, sorted into bullish then bearish */
.vr__cards{display:flex;flex-direction:column;gap:14px}
.vr__grp h3{display:flex;justify-content:space-between;margin:0 0 2px;padding:0 0 6px;border-bottom:var(--hair) solid var(--line-strong);font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.vr__grp h3 span:last-child{color:var(--fg-faint);letter-spacing:.06em}
.vr__card{display:flex;flex-direction:column;gap:7px;padding:12px 0 12px;border-bottom:var(--hair) solid var(--line)}
.vr__cap{display:flex;align-items:center;gap:7px;font:400 11px/1 var(--font-sans);color:var(--fg-dim)}
.vr__cap i{width:6px;height:6px;background:var(--fg)}
.vr__card--bear .vr__cap i{background:var(--fg-dim)}
.vr__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vr__big{font:400 26px/1.1 var(--font-sans);letter-spacing:-.01em}
.vr__sm{font:400 11px/1 var(--font-sans);color:var(--fg-dim)}
.vr__row--meta{font:400 11px/1 var(--font-sans);color:var(--fg-dim)}
.vr__ct{color:var(--fg-dim)}
.vr__bar{height:3px;background:var(--line)}
.vr__bar b{display:block;height:100%;background:var(--fg)}
.vr__card--bear .vr__bar b{background:var(--fg-dim)}
.vr__card--none .vr__big{color:var(--fg-faint)}
/* forward excursion bars */
.vr__sec{display:flex;justify-content:space-between;gap:12px;padding-top:14px;border-top:var(--hair) solid var(--line);font:400 11px/1 var(--font-sans);color:var(--fg-dim)}
.vr__exs{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:-10px}
.vr__exs h4{margin:0 0 10px;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.vr__ex{display:grid;grid-template-columns:62px minmax(0,1fr) 62px 56px;align-items:center;gap:12px;padding:6px 0;font:400 10px/1 var(--font-sans)}
.vr__exn{color:var(--fg);letter-spacing:.02em}
.vr__track{height:3px;background:var(--line)}
.vr__track b{display:block;height:100%;background:var(--fg)}
.vr__ex--lower .vr__track b{background:var(--fg-dim)}
.vr__exp{text-align:right;color:var(--fg)}
.vr__exc{text-align:right;color:var(--fg-dim)}
.vr__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:var(--hair) solid var(--line);font:400 10px/1.3 var(--font-sans);color:var(--fg-dim)}
@media (max-width:900px){.vr__main,.vr__exs{grid-template-columns:1fr;gap:28px}.vr__head h2{font-size:18px}.vr__origin b{font-size:22px}}

/* World globe: the button beside the ticker box and the sphere's stage */
.ticker .globe-btn{position:absolute;left:100%;top:0;bottom:0;width:42px;height:auto;margin-left:8px;background:var(--bg);border:var(--hair) solid var(--line-strong);color:var(--fg-dim)}
.ticker .globe-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}
.ticker .globe-btn .g-land{fill:currentColor;fill-opacity:.7;stroke:none}
.ticker .globe-btn:hover,.ticker .globe-btn[aria-pressed="true"]{color:var(--fg);border-color:var(--fg);background:var(--bg)}
.ticker .globe-btn::before,.ticker .globe-btn::after{display:none}
.ticker .globe-btn:hover svg{transform:rotate(14deg)}
.globe .gex__stage{overflow:hidden}
.globe .gex__canvas{cursor:grab;touch-action:none}
.globe .gex__canvas.is-dragging{cursor:grabbing}

/* Globe · news: the panel slides in from the right while the globe moves left (ui/globe.js) */
.globe .gex__stage{position:relative}
.gnews{position:absolute;top:0;right:0;bottom:0;width:min(46%,560px);display:flex;flex-direction:column;background:var(--bg);border-left:var(--hair) solid var(--line-strong);transform:translateX(104%);opacity:0;pointer-events:none;transition:transform var(--t-ui) var(--ease-out),opacity var(--t-ui) var(--ease-out);z-index:3}
.globe[data-news="on"] .gnews{transform:none;opacity:1;pointer-events:auto}
.gnews__head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--hair) solid var(--line)}
.gnews__head h2{margin:0;margin-right:auto;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.gnews__scope{display:flex;border:var(--hair) solid var(--line-strong)}
.gnews__scope button{padding:6px 10px;border:0;background:transparent;color:var(--fg-dim);font:400 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.gnews__scope button+button{border-left:var(--hair) solid var(--line-strong)}
.gnews__scope button:hover{color:var(--fg)}
.gnews__scope button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.gnews__close{display:grid;place-items:center;width:26px;height:26px;border:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);cursor:pointer}
.gnews__close:hover{color:var(--fg);border-color:var(--fg)}
.gnews__close svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2}
.gnews__state{margin:0;padding:18px 16px;font:400 11px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint)}
.gnews__state[hidden]{display:none}
.gnews__list{flex:1;min-height:0;overflow:auto;margin:0;padding:0;list-style:none;scrollbar-width:thin}
.gnews__list li{padding:14px 16px;border-bottom:var(--hair) solid var(--line)}
.gnews__title{display:block;color:var(--fg);text-decoration:none;font:500 14px/1.35 var(--font-sans)}
.gnews__title:hover,.gnews__title:focus-visible{text-decoration:underline;text-underline-offset:3px}
.gnews__meta{margin-top:6px;font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-faint)}
.gnews__sum{margin:8px 0 0;font:400 12px/1.5 var(--font-sans);color:var(--fg-dim)}
.gnews__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.gnews__tags span{padding:3px 6px;border:var(--hair) solid var(--line-strong);font:400 9px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim)}
.gnews__foot{margin:0;padding:10px 16px;border-top:var(--hair) solid var(--line);font:400 9px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--fg-faint)}
@media (max-width:820px){.gnews{width:100%}}
@media (prefers-reduced-motion:reduce){.gnews{transition:none}}

.globe__side{position:absolute;z-index:4;display:flex;flex-direction:column;gap:10px;transform:translateY(-50%);left:calc(50% + 40vmin);top:50%}
.globe__btn{min-width:104px;padding:11px 20px;font-size:12px;letter-spacing:.08em;text-align:center}

/* Globe · news: the sector row (display only) and the narrow-screen rule for the side buttons */
.gnews__sectors{padding:12px 16px 14px;border-bottom:var(--hair) solid var(--line)}
.gnews__sectors h3{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.gnews__sectors h3 span:last-child{color:var(--fg-faint);letter-spacing:.04em;text-transform:none;font-weight:400}
.gnews__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.gnews__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 9px;border:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);font:400 10px/1 var(--font-mono);letter-spacing:.04em;cursor:default}
.gnews__chip i{font-style:normal;color:var(--fg-faint)}
.gnews__chip--group{border-style:dashed}
@media (max-width:820px){.globe[data-news="on"] .globe__side{display:none}}

/* Globe · sector web: replaces the globe when a sector is chosen; the panel shows the makeup and the relationships */
.globe[data-sector="on"] #globe-canvas{visibility:hidden}
.globe[data-sector="on"] .globe__side{display:none}
.globe[data-sector="on"] #gnews-state,.globe[data-sector="on"] #gnews-list,.globe[data-sector="on"] #gnews-foot{display:none}
.gnews__chip{cursor:pointer;transition:color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out),background-color var(--t-micro) var(--ease-out)}
.gnews__chip:hover{color:var(--fg);border-color:var(--fg)}
.gnews__chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.gnews__chip[aria-pressed="true"] i{color:var(--bg)}
.gnews__detail{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.gnews__detail[hidden]{display:none}
.gnews__dhead{padding:14px 16px 12px;border-bottom:var(--hair) solid var(--line)}
.gnews__dhead h3{margin:10px 0 0;font:600 18px/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--fg)}
.gnews__dsub{margin:6px 0 0;font:400 10px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint)}
.gnews__back{padding:5px 9px;border:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);font:400 10px/1 var(--font-mono);letter-spacing:.06em;cursor:pointer}
.gnews__back:hover{color:var(--fg);border-color:var(--fg)}
.gnews__dsec{padding:14px 16px;border-bottom:var(--hair) solid var(--line)}
.gnews__dsec h4{margin:0 0 10px;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.gnews__ind{margin:12px 0 6px;font:400 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.gnews__cos,.gnews__rels{margin:0;padding:0;list-style:none}
.gnews__cos li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:var(--hair) solid var(--line);font:400 13px/1.3 var(--font-sans);color:var(--fg)}
.gnews__tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.gnews__tags span{padding:3px 6px;border:var(--hair) solid var(--line-strong);font:400 9px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim)}
.gnews__rel{padding:11px 0;border-bottom:var(--hair) solid var(--line)}
.gnews__relhead{font:500 13px/1.35 var(--font-sans);color:var(--fg)}
.gnews__rel .gnews__sum{margin:5px 0 0}
.gnews__foot2{margin:0;padding:12px 16px 18px;font:400 10px/1.5 var(--font-mono);letter-spacing:.03em;color:var(--fg-faint)}
.gnews__dsec .gnews__back{margin-top:12px}
/* the web itself */
.gweb{position:absolute;left:0;top:0;bottom:0;right:min(46%,560px);z-index:2;background:var(--bg);overflow:hidden}
.gweb[hidden]{display:none}
.gw__svg{position:absolute;inset:0;width:100%;height:100%}
.gw__e{stroke:var(--fg-faint);stroke-width:1;fill:none;transition:opacity var(--t-micro) var(--ease-out),stroke var(--t-micro) var(--ease-out)}
.gw__e--structure{stroke:var(--line-strong);stroke-width:1}
.gw__e--supplies,.gw__e--depends_on{stroke:var(--fg);stroke-width:1.4}
.gw__e--competes_with{stroke:var(--fg-dim);stroke-width:1.3;stroke-dasharray:5 4}
.gw__e--earns_revenue_from{stroke:var(--fg-dim);stroke-width:1.3;stroke-dasharray:1.5 3.5}
.gw__e.is-inferred{opacity:.6}
.gw__e.is-hot{stroke:var(--fg);stroke-width:2.2}
.gw__e.is-dim{opacity:.1}
.gw__arrow{fill:var(--fg-dim)}
.gw__hit{stroke:transparent;stroke-width:12;fill:none;cursor:default}
.gw__n{cursor:default;outline:none;transition:opacity var(--t-micro) var(--ease-out)}
.gw__n--company,.gw__n--instrument{cursor:pointer}
.gw__n.is-dim{opacity:.18}
.gw__c{fill:var(--bg);stroke:var(--fg);stroke-width:1.2}
.gw__n--sector .gw__c{fill:var(--fg)}
.gw__n--sector .gw__l{font-weight:600;font-size:13px}
.gw__n--industry .gw__c{stroke:var(--fg-dim);stroke-dasharray:none}
.gw__n--instrument .gw__c{fill:var(--fg);stroke:none}
.gw__n.is-external .gw__c{stroke:var(--fg-faint);stroke-dasharray:3 3}
.gw__n.is-external .gw__l{fill:var(--fg-faint)}
.gw__n.is-external.gw__n--instrument .gw__c{fill:var(--fg-faint)}
.gw__n.is-selected .gw__c{fill:var(--fg)}
.gw__n:focus-visible .gw__c{stroke-width:2.4}
.gw__l{fill:var(--fg);font:400 11px var(--font-sans);pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.gw__n--instrument .gw__l{font:400 9px var(--font-mono);letter-spacing:.05em;fill:var(--fg-dim)}
.gw__n--industry .gw__l{fill:var(--fg-dim);font-size:10px}
.gw__tip{position:absolute;left:0;top:0;width:240px;padding:9px 11px;background:var(--bg);border:var(--hair) solid var(--fg);pointer-events:none;opacity:0;transition:opacity var(--t-micro) var(--ease-out);z-index:3}
.gw__tip[data-on]{opacity:1}
.gw__t1{font:500 12px/1.35 var(--font-sans);color:var(--fg)}
.gw__t2{margin-top:4px;font:400 11px/1.45 var(--font-sans);color:var(--fg-dim)}
.gw__t3{margin-top:6px;font:400 9px/1.3 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-faint)}
.gw__legend{position:absolute;left:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px 14px;font:400 9px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-faint);pointer-events:none}
.gw__legend span{display:inline-flex;align-items:center;gap:6px}
.gw__legend i{display:inline-block;width:18px;height:0;border-top:1.4px solid var(--fg)}
.gw__legend .k-com{border-top:1.3px dashed var(--fg-dim)}
.gw__legend .k-rev{border-top:1.3px dotted var(--fg-dim)}
.gw__legend .k-ext{border-top:1.3px dashed var(--fg-faint)}
@media (max-width:820px){.gweb{display:none}}

/* Obsidian-style vault: a live graph on a faint dotted ground, glowing bubbles, and the company page rows */
.gweb{background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--fg) 9%,transparent) 1px,transparent 1px);background-size:24px 24px;cursor:grab}
.gw__svg{touch-action:none;user-select:none;-webkit-user-select:none}
.gw__svg.is-dragging{cursor:grabbing}
.gw__e{transition:none}
.gw__e.is-lit{stroke:var(--fg);stroke-width:1.8;opacity:1}
.gw__n{transition:opacity var(--t-ui) var(--ease-out)}
.gw__n .gw__c{transition:fill var(--t-ui) var(--ease-out),stroke-width var(--t-ui) var(--ease-out),filter var(--t-ui) var(--ease-out)}
.gw__n.is-hover .gw__c,.gw__n.is-selected .gw__c{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--fg) 75%,transparent));stroke-width:2.2}
.gw__n--company .gw__c{fill:color-mix(in srgb,var(--fg) 14%,var(--bg))}
.gw__n--company.is-hover .gw__c,.gw__n--company.is-selected .gw__c{fill:var(--fg)}
.gw__n--industry .gw__c{fill:color-mix(in srgb,var(--fg) 6%,var(--bg))}
.gw__n--sector .gw__c{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--fg) 45%,transparent))}
.gw__n.is-external .gw__c{fill:transparent}
.gw__svg.is-far .gw__n--instrument .gw__l{display:none}
.gw__hint{margin-left:6px;color:var(--fg-faint)}
.gnews__quote{display:flex;align-items:baseline;gap:14px;padding:8px 0;border-bottom:var(--hair) solid var(--line);font-variant-numeric:tabular-nums}
.gnews__qsym{font:500 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg)}
.gnews__qpx{font:400 18px/1 var(--font-sans);color:var(--fg)}
.gnews__qch{margin-left:auto;font:400 11px/1 var(--font-mono);letter-spacing:.04em;color:var(--fg-dim)}

.gw__n.is-pinned .gw__c{stroke-dasharray:2 2.5}

/* Hedge Pressure · a key to the lines on the map, bottom left of the plot (larger symbols and type, vector so it stays sharp at any pixel ratio) */
.hp__key{position:absolute;left:14px;bottom:30px;z-index:2;display:flex;flex-direction:column;gap:4px;padding:7px 9px;background:color-mix(in srgb,var(--bg) 92%,transparent);border:var(--hair) solid var(--line-strong);pointer-events:none;font:400 8.5px/1.2 var(--font-mono);letter-spacing:.03em;color:var(--fg-dim);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hp__key-row{display:grid;grid-template-columns:22px 70px 1fr;align-items:center;gap:7px;white-space:nowrap}
.hp__key-row svg{width:22px;height:9px;stroke:var(--fg);fill:none;overflow:visible;stroke-linecap:butt;shape-rendering:geometricPrecision}
.hp__key-row b{font-weight:500;color:var(--fg);text-transform:uppercase;letter-spacing:.06em;font-size:8.5px}
.hp .chart__state[data-on] ~ .hp__key{display:none}
@media (max-width:700px){.hp__key-row span{display:none}.hp__key-row{grid-template-columns:34px auto}}

/* Globe · news events: the key (top left), and the card for the event in focus (bottom left) */
.gev__key{position:absolute;left:16px;top:14px;z-index:2;display:flex;flex-direction:column;gap:7px;padding:10px 12px;background:color-mix(in srgb,var(--bg) 90%,transparent);border:var(--hair) solid var(--line);pointer-events:none;font:400 10px/1.2 var(--font-mono);letter-spacing:.05em;color:var(--fg-dim)}
.gev__khead{font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.gev__krow{display:flex;align-items:center;gap:10px;text-transform:uppercase}
.gev__kfoot{max-width:210px;color:var(--fg-faint);letter-spacing:.03em;line-height:1.4}
.gev__sym{position:relative;display:inline-block;width:22px;height:18px;flex:none}
.gev__sym::before,.gev__sym::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.gev__sym--major::before{width:7px;height:7px;background:var(--fg)}
.gev__sym--major::after{width:18px;height:18px;border:1.4px solid var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 25%,transparent)}
.gev__sym--notable::before{width:6px;height:6px;background:var(--fg)}
.gev__sym--notable::after{width:13px;height:13px;border:1.2px solid var(--fg)}
.gev__sym--minor::before{width:4px;height:4px;background:var(--fg-dim)}
.gev__sym--minor::after{display:none}
.gev{position:absolute;left:16px;bottom:16px;z-index:3;width:min(290px,calc(50% - 32px));display:flex;flex-direction:column;gap:6px;padding:9px 11px;background:var(--bg);border:var(--hair) solid var(--line-strong)}
.gev[hidden]{display:none}
.gev[data-tier="major"]{border-color:var(--fg)}
.gev__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gev__badge{padding:3px 6px;background:var(--fg);color:var(--bg);font:500 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.gev[data-tier="notable"] .gev__badge{background:transparent;color:var(--fg);border:var(--hair) solid var(--fg)}
.gev[data-tier="minor"] .gev__badge{background:transparent;color:var(--fg-dim);border:var(--hair) solid var(--line-strong)}
.gev__nav{display:inline-flex;align-items:center;gap:8px;font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim)}
.gev__nav button{padding:3px 6px;border:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);font:400 9px/1 var(--font-mono);letter-spacing:.06em;cursor:pointer;text-transform:uppercase}
.gev__nav button:hover{color:var(--fg);border-color:var(--fg)}
.gev__title{color:var(--fg);text-decoration:none;font:500 12px/1.35 var(--font-sans)}
.gev__title:hover,.gev__title:focus-visible{text-decoration:underline;text-underline-offset:3px}
.gev__meta,.gev__where{font:400 9px/1.35 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint)}
.gev__tags{display:flex;flex-wrap:wrap;gap:5px}
.gev__tags span{padding:2px 5px;border:var(--hair) solid var(--line-strong);font:400 9px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim)}
.gev__why{font:400 10px/1.4 var(--font-sans);color:var(--fg-dim)}
.globe[data-sector="on"] .gev,.globe[data-sector="on"] .gev__key{display:none}
@media (max-width:820px){.gev{width:calc(100% - 32px)}.gev__key{display:none}}


/* Globe · Heatmap: the terminal's stocks as a treemap, in the globe's place */
.globe[data-heat="on"] #globe-canvas{visibility:hidden}
.globe[data-heat="on"] .globe__side,.globe[data-heat="on"] .gev,.globe[data-heat="on"] .gev__key{display:none}
.gheat{position:absolute;inset:0;z-index:2;background:var(--bg);overflow:hidden}
.gheat[hidden]{display:none}
.globe[data-news="on"] .gheat{right:min(46%,560px)}
.gheat__bar{position:absolute;left:14px;top:10px;right:14px;z-index:3;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gheat__read{flex:1 1 160px;min-width:0;font:400 11px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gheat__stage{position:absolute;left:14px;right:14px;top:50px;bottom:78px}
.gheat .chart__state{z-index:1}
.gh__root{position:absolute;inset:0}
.gh__sector{position:absolute;border:var(--hair) solid var(--line-strong);background:color-mix(in srgb,var(--bg) 94%,var(--fg))}
.gh__head{padding:3px 6px;font:500 9px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);overflow:hidden;white-space:nowrap}
.gh__tile{position:absolute;margin:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;color:var(--fg);text-align:center;cursor:default;outline:none;
 background:color-mix(in srgb,var(--line) 70%,var(--bg));transition:filter var(--t-micro) var(--ease-out)}
.gh__tile.is-up{background:color-mix(in srgb,var(--field-pos) calc(14% + var(--k)*66%),var(--bg))}
.gh__tile.is-down{background:color-mix(in srgb,var(--field-neg) calc(14% + var(--k)*66%),var(--bg))}
.gh__tile:hover,.gh__tile:focus-visible{filter:brightness(1.25);outline:var(--hair) solid var(--fg);outline-offset:-1px;z-index:2}
.gh__sym{font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;line-height:1}
.gh__pct{font-family:var(--font-mono);font-variant-numeric:tabular-nums;line-height:1;opacity:.9}
.gh__tip{position:absolute;left:0;top:0;width:240px;padding:9px 11px;background:var(--bg);border:var(--hair) solid var(--fg);pointer-events:none;opacity:0;transition:opacity var(--t-micro) var(--ease-out);z-index:4}
.gh__tip[data-on]{opacity:1}
.gh__t1{font:500 12px/1.35 var(--font-sans);color:var(--fg)}
.gh__t2{margin-top:4px;font:500 13px/1.3 var(--font-mono);color:var(--fg);font-variant-numeric:tabular-nums;white-space:pre}
.gh__t3{margin-top:5px;font:400 9px/1.35 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint)}
.gheat__key{position:absolute;left:14px;bottom:12px;z-index:3;display:flex;flex-direction:column;gap:4px;max-width:min(560px,calc(100% - 28px));font:400 10px/1.4 var(--font-mono);letter-spacing:.03em;color:var(--fg-dim);pointer-events:none}
.gheat__key:empty{display:none}
@media (max-width:820px){.globe[data-news="on"] .gheat{right:0}}

/* Data tab: the calendar of scheduled data and central-bank events */
.dat{overflow:hidden}
.dat .chart__bar{height:auto;min-height:28px;flex-wrap:wrap;gap:4px 10px;padding:3px 0 3px 12px}
.dat__ctl{display:flex;flex-direction:column;gap:10px;padding:12px 2px 12px;border-bottom:var(--hair) solid var(--line)}
.dat__seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:var(--hair) solid var(--line-strong)}
.dat__seg-btn{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:9px 12px;border:0;border-right:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);cursor:pointer;text-align:left}
.dat__seg-btn:last-child{border-right:0}
.dat__seg-btn:hover{color:var(--fg)}
.dat__seg-btn[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.dat__seg-l{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.dat__seg-h{font:400 10px/1 var(--font-mono);letter-spacing:.04em;opacity:.7}
.dat__fg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dat__fl{flex:none;width:58px;font:500 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.dat__chips{display:flex;flex-wrap:wrap;gap:6px}
.dat__chip{padding:6px 10px;border:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);font:400 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.dat__chip:hover{color:var(--fg);border-color:var(--fg)}
.dat__chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.dat__chip--all{border-style:dashed}
.dat__list{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:0 2px}
.dat__empty{margin:22px 0;font:400 12px/1.6 var(--font-mono);letter-spacing:.03em;color:var(--fg-faint)}
.dat__day{padding-bottom:6px}
.dat__dh{position:sticky;top:0;z-index:1;margin:0;padding:14px 0 8px;background:var(--bg);font:500 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.dat__row{display:grid;grid-template-columns:52px 44px 34px minmax(0,1fr) auto 48px;align-items:center;gap:12px;padding:9px 0;border-bottom:var(--hair) solid var(--line);font:400 12px/1.35 var(--font-sans)}
.dat__time{font:400 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-dim)}
.dat__cur{font:500 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--fg);padding:3px 0;text-align:center;border:var(--hair) solid var(--line-strong)}
.dat__impact{display:inline-flex;gap:3px}
.dat__impact i{width:5px;height:11px;background:var(--line-strong)}
.dat__impact[data-level="1"] i:nth-child(-n+1),.dat__impact[data-level="2"] i:nth-child(-n+2),.dat__impact[data-level="3"] i{background:var(--fg)}
.dat__row--holiday .dat__title{color:var(--fg-faint);font-style:italic}
.dat__row--high .dat__title{font-weight:500}
.dat__title{color:var(--fg);min-width:0}
.dat__fp{font:400 10px/1.2 var(--font-mono);letter-spacing:.03em;color:var(--fg-faint);white-space:nowrap;text-align:right}
.dat__basis{font:500 8px/1 var(--font-mono);letter-spacing:.1em;padding:3px 5px;text-align:center;border:var(--hair) solid var(--line-strong);color:var(--fg-dim)}
.dat__basis--schedule{border-style:dashed}
.dat__note{margin:0;padding:10px 2px 14px;font:400 10px/1.5 var(--font-mono);letter-spacing:.02em;color:var(--fg-faint)}
@media (max-width:760px){.dat__seg{grid-template-columns:repeat(2,1fr)}.dat__row{grid-template-columns:44px 38px 30px minmax(0,1fr) 44px}.dat__fp{display:none}}

/* Field charts (Hedge Pressure, Greek Exposure Map): the time-zoom buttons */
.fh__zoom{position:absolute;right:82px;bottom:30px;z-index:3;display:flex;border:var(--hair) solid var(--line-strong);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.fh__zoom button{min-width:26px;padding:5px 7px;border:0;border-right:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);font:400 10px/1 var(--font-mono);letter-spacing:.04em;cursor:pointer}
.fh__zoom button:last-child{border-right:0}
.fh__zoom button:hover{color:var(--fg);background:var(--hover,transparent)}


/* Balance Map: the price-zoom buttons */
.bw__zoom{right:120px;bottom:36px}

/* Globe: the data calendar in the globe's place */
.gcal{position:absolute;inset:0;z-index:2;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.gcal[hidden]{display:none}
.globe[data-news="on"] .gcal{right:min(46%,560px)}
.gcal__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap}
.gcal__body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 14px 12px}
.gcal .dat__list{flex:1;min-height:0}
@media (max-width:820px){.globe[data-news="on"] .gcal{right:0}}
.globe[data-cal="on"] #globe-canvas{visibility:hidden}
.globe[data-cal="on"] .globe__side,.globe[data-cal="on"] .gev,.globe[data-cal="on"] .gev__key{display:none}

/* static levels on the Greek Exposure Map: the Levels button sits in the empty top of the price-axis margin; its panel opens leftward over the map */
.lv__btn{position:absolute;top:1px;right:6px;z-index:3;height:16px;padding:0 6px;background:var(--bg);color:var(--fg-dim);border:var(--hair) solid var(--line-strong);font:400 9px/14px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.lv__btn[aria-pressed="true"]{color:var(--fg)}
.lv__btn:hover,.lv__btn:focus-visible{color:var(--fg);border-color:var(--fg)}
.lv__panel{position:absolute;top:20px;right:6px;z-index:3;width:min(330px,calc(100% - 20px));max-height:calc(100% - 60px);overflow:auto;scrollbar-width:thin;padding:8px 10px;background:color-mix(in srgb,var(--bg) 96%,transparent);border:var(--hair) solid var(--line-strong);font:400 9.5px/1.4 var(--font-mono);color:var(--fg-dim)}
.lv__panel[hidden]{display:none}
.lv__row{display:grid;grid-template-columns:auto 112px 1fr;align-items:baseline;gap:8px;margin:5px 0;color:var(--fg)}
.lv__row input[type=checkbox]{margin:0;accent-color:var(--fg)}
.lv__name{text-transform:uppercase;letter-spacing:.06em}
.lv__val{color:var(--fg-dim);white-space:normal}
.lv__row--n{grid-template-columns:112px auto auto auto 1fr;margin-top:8px}
.lv__n{width:22px;height:18px;padding:0;background:none;color:var(--fg-dim);border:var(--hair) solid var(--line-strong);font:inherit;cursor:pointer}
.lv__n[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
.lv__msg{margin:6px 0 0;color:var(--fg)}
.lv__foot{margin:8px 0 0;color:var(--fg-faint)}


/* the globe button: a small turning Earth drawn on a canvas (ui/globe-icon.js) */
.ticker .globe-btn .globe-ico{width:26px;height:26px;display:block;transition:transform var(--t-ui) var(--ease-out)}
.ticker .globe-btn:hover .globe-ico{transform:scale(1.08)}

/* Volatility: an empty answer says why and offers the settings that have data (buttons; the plain state text cannot be clicked) */
.vol__empty{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 24px;text-align:center;font:400 11px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--fg-faint)}
.vol__empty[hidden]{display:none}
.vol__empty-h{margin:0 0 4px;color:var(--fg-dim);letter-spacing:.06em}
.vol__empty-p{margin:0;max-width:560px}
.vol__empty-opts{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.vol__empty-btn{padding:4px 12px;background:none;border:var(--hair) solid var(--line-strong);color:var(--fg);font:inherit;letter-spacing:.04em;cursor:pointer}
.vol__empty-btn:hover,.vol__empty-btn:focus-visible{border-color:var(--fg)}

/* Export layout fixes: keep controls reachable and preserve chart space on narrow screens. */
.bw__lv{max-width:100%;min-width:0}
.bw__lv .v{min-width:0;overflow-wrap:anywhere}
.bw__copy,.bw__lv::before{flex-shrink:0}
@media (max-width:900px){
 .chart__bar{height:auto;min-height:28px;flex-wrap:wrap;gap:6px 10px;padding:5px 0 5px 8px;flex-shrink:0}
 .chart__src{flex:1 1 140px}
 .chart__readout{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .chart__seg,.dd{flex-shrink:0}
 .bw__levels{max-height:24vh;overflow:auto;flex-shrink:0;scrollbar-width:thin}
 .bw__lv .k{flex-shrink:0}
}

/* the account block (src/portal-shell.js) in the settings popover: who is signed in, Operations for an administrator, Sign out (merge of 2026-10-12) */
.settings .account-nav{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:10px;border-top:var(--hair) solid var(--line);font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-dim)}
.settings .account-nav .account-name{color:var(--fg);text-transform:uppercase}
.settings .account-nav a,.settings .account-nav button{padding:5px 8px;border:var(--hair) solid var(--line-strong);background:transparent;color:var(--fg-dim);font:inherit;text-decoration:none;cursor:pointer;transition:color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out)}
.settings .account-nav a:hover,.settings .account-nav button:hover{color:var(--fg);border-color:var(--fg)}