@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap");
/* PT shared UI theme: loaded after each page's own <style>, so it wins.
   1) Charts are always drawn on black, in both light and dark mode, with the dark-mode
      chart palette (validated against a near-black surface).
   2) Interactive controls get a magenta hover outline, focus ring and active tint (tabs, toggles, the main buttons). */

:root {
  /* ---- type: Geist Mono everywhere (chosen 2026-10-03 from replay/fonts.html; falls back to the Mac's own monospace
     when offline). To change the font, change the @import above and the first name here: pages read it from --font. ---- */
  --font: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mono: var(--font);
  /* ---- charts (theme independent) ---- */
  --chart-bg: #000000;
  --chart-text: #a8a79f;
  --chart-grid: #1c1c1b;
  --chart-border: #2e2e2c;
  --chart-ink: #ffffff;
  --chart-guide: #8e8d86;
  --cc1: #22d3ee; --cc2: #d95926; --cc3: #199e70; --cc4: #c98500; --cc5: #e040fb;   /* categorical, dark steps */
  --chart-up: #22d3ee; --chart-down: #e040fb;                                        /* signed bars, diverging poles */
  /* price charts (Live and Replay draw from these): near-black background, grey axes, grey candles. Up candles are
     dark with a grey edge, down candles solid grey. Replay's faded prior-day candles are dimmer versions of the same. */
  --c-bg: #08080a; --c-text: #a8a79f; --c-axis: #1c1c1f; --c-cross: #4a4a4d; --c-cross-label: #2a2a2d;
  --c-up-fill: #2e2e31; --c-up-edge: #7e7e82; --c-down-fill: #7e7e82; --c-down-edge: #7e7e82; --c-wick: #7e7e82;
  --c-ghost-up-fill: #141416; --c-ghost-up-edge: #3d3d41; --c-ghost-down-fill: #3d3d41; --c-ghost-down-edge: #3d3d41; --c-ghost-wick: #3d3d41;
  --c-vwap: #eda100; --c-vwap-1: #c9921f; --c-vwap-2: #94722a;
  --line-pd: #8e8d86; --line-on: #9085e9; --line-open: #ffffff; --line-s1: #3987e5; --line-s2: #d55181;
  --lg-up: #e040fb; --lg-dn: #22d3ee;
  --pos-long: #7ee3f5; --pos-short: #ec8afc;
  --vwap: #eda100; --vwap-1: #c9921f; --vwap-2: #94722a;

  /* ---- interaction ---- */
  --focus: #d946ef;                       /* magenta, the theme's put / down colour family */
  --focus-tint: rgba(217, 70, 239, 0.14);
  --focus-tint-strong: rgba(217, 70, 239, 0.26);
  --focus-solid: #a21caf;                 /* main buttons (Play): deep enough for white text */
  --focus-solid-hover: #86198f;
}

/* controls: one border language everywhere */
button, select, input, .nav a, .tab {
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.nav a, .tab { border: 1px solid transparent; }

/* hover: magenta outline and a faint magenta tint */
button:hover, select:hover, input[type="date"]:hover, input[type="text"]:hover,
.nav a:hover, .tab:hover {
  border-color: var(--focus);
  background-color: var(--focus-tint);
}
.seg:hover { border-color: var(--focus); }
.seg button:hover { background-color: var(--focus-tint); }

/* A menu's list. On Windows the list that drops down takes its background from the menu itself, so the see-through
   hover tint above fell on white there and the list could not be read until the pointer had left the menu (the user,
   on the Windows app, 2026-10-08). So a menu's hover tint is the same colour made solid, and the entries of every list
   are given their dark background and light text outright. Where a browser draws its own list (the Mac) nothing changes. */
select:hover { background-color: color-mix(in srgb, var(--focus) 14%, var(--surface, #0b0b0b)); }
select option, select optgroup { background-color: var(--surface, #0b0b0b); color: var(--text, #f2f1ec); }

/* focus (keyboard, or an open dropdown / date box): solid magenta ring */
button:focus-visible, select:focus, input:focus-visible, .nav a:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus-tint);
}

/* active tab / selected toggle: magenta tint with a magenta edge */
.nav a.on, .tab.on, .seg button.on {
  background-color: var(--focus-tint-strong);
  box-shadow: inset 0 0 0 1px var(--focus);
  color: var(--text);
}
button.primary { background-color: var(--focus-solid); border-color: var(--focus-solid); color: #fff; }
button.primary:hover { background-color: var(--focus-solid-hover); border-color: var(--focus-solid-hover); }

input[type="checkbox"], input[type="range"] { accent-color: var(--focus); }

/* the COT scatter is a chart too */
#scatterBox svg text { fill: var(--chart-text); }

/* chart panels: black like the charts they hold, in both themes, with light text */
:root {
  --chart-panel-text: #e8e7e1;
  --chart-panel-muted: #8e8d86;
  --chart-panel-soft: #c3c2b7;
}
.charts .panel {
  background: var(--chart-bg);
  border-color: var(--chart-border);
  color: var(--chart-panel-text);
}
.charts .panel h2 { color: #ffffff; }
.charts .panel .sub, .charts .panel .note, .charts .panel .empty { color: var(--chart-panel-muted); }
.charts .panel .legend, .charts .panel .legend label, .charts .panel .stat { color: var(--chart-panel-soft); }
.charts .panel .stat b { color: #ffffff; }
.charts .panel th { color: var(--chart-panel-muted); }
.charts .panel td { color: var(--chart-panel-text); }
.charts .panel th, .charts .panel td { border-bottom-color: var(--chart-border); }
.charts .panel .chip { background: #1a1a19; color: var(--chart-panel-soft); border-color: var(--chart-border); }
.charts .panel.exp { border: 1px dashed var(--chart-guide); }
.charts .panel.exp .tag { color: var(--chart-down); }
#chart { background: var(--chart-bg); }

/* ---- type ---- */
body { font-family: var(--font); font-size: 12px; }
button, select, input, table, svg text { font-family: var(--font); }
.main > .card { width: 372px; }

/* ---- cyan / magenta in place of blue / red on every page (beats the pages' own light and dark values) ---- */
:root:root:root {
  --c1: #22d3ee; --c5: #e040fb;
  --up: #22d3ee; --down: #e040fb;
  --pole-hi: #22d3ee; --pole-lo: #e040fb;
}

/* ---- the product's mark and name at the start of each page's bar (sample A, chosen by the user on 2026-10-05).
   The name is always the one word LucentOptions. Hidden where a page is shown inside another (Replay inside Live). ---- */
.brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text, #e8e7e1); letter-spacing: -.01em; white-space: nowrap; }
.brand svg { width: 18px; height: 18px; display: block; flex: none; }
.brandSep { width: 1px; height: 18px; background: var(--line, #2e2e2c); }
.embed .brand, .embed .brandSep { display: none; }
@media (max-width: 760px) { .brandSep { display: none; } }   /* on a narrow screen the bar wraps and the name has a line to itself */

/* ---- the customer copy (src/customer.py): the source label the data licence asks for, on every page a customer sees,
   and the things a customer is not given (the copy button, the box for other tickers, the owner's count of requests).
   The server adds the label and the class on <html>; the app's own copy and the shared copy have neither. ---- */
/* The label has a strip of its own at the foot of the page, and the page ends above it (the user, 2026-10-07: it lay over
   the last row of a table in the bottom right panel). Nothing a customer reads is under the label, on any page. */
.customer body { padding-bottom: 22px; }
.customer #notes { bottom: 22px; }
.attrib { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; min-height: 22px; padding: 3px 12px 0; text-align: right; font-size: 10px; line-height: 15px; color: var(--text-2, #a8a79f); background: #050505; border-top: 1px solid var(--border, #1f1f1e); }
@media (max-width: 560px) { .customer body { padding-bottom: 40px; } }      /* where the label takes two lines */
.attrib a { color: inherit; text-decoration: none; }
.attrib a:hover { color: var(--text, #e8e7e1); text-decoration: underline; }
.customer .lcopy, .customer #other, .customer #reqTxt { display: none !important; }
.attrib .pre { color: var(--warn, #eda100); font-weight: 600; }      /* shown while customer.licensed is false */
.customer .seg button.own { box-shadow: inset 0 -2px 0 var(--warn, #eda100); }      /* a ticker only the owner's own sign-in is given: a customer is refused it */