/* Trading Desk. Visual system: the landing-page-design skill, Part B (tokens.css holds every value).
   Dark only. Geist for text, Geist Mono for prices and numbers. The pixel room on the Desk is the one illustration. */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- shell: a floating nav ---------- */
body { min-height: 100dvh; }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: calc(var(--z-menu) + 1); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-part); background: var(--color-ink); color: var(--color-paper); font: var(--button-sm); text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

.bar {
  position: sticky; top: var(--space-sm); z-index: var(--z-sticky-nav);
  display: flex; align-items: center; gap: var(--space-xs);
  width: fit-content; max-width: calc(100% - 2 * var(--space-md)); margin: var(--space-sm) auto 0; padding: var(--space-2xs);
  border-radius: var(--radius-2xl); border: var(--rule-hair) solid var(--color-rule);
}
/* the glass sits on a layer behind the bar's contents: a blur on the bar itself would trap the full screen menu inside it */
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-glass); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); }
/* inside the bar the gap is 4px: inner radius = 16 − 4 = 12 */
.wordmark { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-xl); font: var(--title-3); text-decoration: none; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.tabs { position: relative; display: flex; gap: var(--space-3xs); }
/* the signal red marker under the open tab: it slides from tab to tab */
.tabs__marker { position: absolute; left: 0; bottom: 3px; width: 16px; height: 2px; border-radius: var(--radius-full); background: var(--color-accent); pointer-events: none; opacity: 0; transition: transform var(--dur-move) var(--ease), opacity var(--dur-hover) var(--ease); }
.tabs__marker.is-on { opacity: 1; }
@media (max-width: 60rem) { .tabs__marker { display: none; } }
.tab {
  display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xl); color: var(--color-muted); text-decoration: none; font: var(--title-4); white-space: nowrap;
  transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease), opacity var(--dur-move) var(--ease);
}
.tab[aria-current="page"] { color: var(--color-ink); background: var(--color-paper-4); }
@media (hover: hover) { .tab:hover { color: var(--color-ink); background: var(--color-paper-3); } }
.tab:active { transform: translateY(1px); }
.acct { padding: 0 var(--space-xs); color: var(--color-muted); font: var(--caption-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 26rem; }
.signout { margin: 0; }
.signout .btn { border-radius: var(--radius-xl); }

/* the menu toggle: two lines that turn into a cross */
.menu-btn { all: unset; box-sizing: border-box; display: none; position: relative; width: 40px; height: 40px; margin-left: auto; border-radius: var(--radius-xl); cursor: pointer; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: var(--radius-full); background: var(--color-ink); transition: transform var(--dur-move) var(--ease); }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .menu-btn:hover { background: var(--color-paper-4); } }

@media (max-width: 60rem) {
  .bar { width: calc(100% - 2 * var(--space-md)); }
  .menu-btn { display: block; z-index: calc(var(--z-menu) + 1); }
  .menu {
    position: fixed; inset: 0; z-index: var(--z-menu); flex-direction: column; align-items: stretch; gap: var(--space-lg);
    padding: var(--space-6xl) var(--space-lg) var(--space-lg); overflow-y: auto;
    background: var(--color-scrim); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-move) var(--ease), visibility 0s linear var(--dur-move);
  }
  .menu[data-open] { opacity: 1; visibility: visible; transition: opacity var(--dur-move) var(--ease); }
  .tabs { flex-direction: column; gap: var(--space-2xs); }
  .tab { font: var(--heading-5); padding: var(--space-sm) var(--space-md); }
  .acct { white-space: normal; max-width: none; padding: 0 var(--space-md); }
  .signout { padding: 0 var(--space-md); }
  /* links arrive one after another: 60ms apart, the whole run within 400ms */
  .menu .tab, .menu .acct, .menu .signout { opacity: 0; transform: translateY(var(--space-lg)); transition: opacity var(--dur-move) var(--ease), transform var(--dur-move) var(--ease), color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); }
  .menu[data-open] .tab, .menu[data-open] .acct, .menu[data-open] .signout { opacity: 1; transform: none; }
  .menu[data-open] .tab:nth-child(2) { transition-delay: 60ms; }
  .menu[data-open] .tab:nth-child(3) { transition-delay: 120ms; }
  .menu[data-open] .tab:nth-child(4) { transition-delay: 180ms; }
  .menu[data-open] .tab:nth-child(5) { transition-delay: 240ms; }
  .menu[data-open] .tab:nth-child(6) { transition-delay: 300ms; }
  .menu[data-open] .acct { transition-delay: 360ms; }
  .menu[data-open] .signout { transition-delay: 400ms; }
  html.menu-open { overflow: hidden; }
}

main:focus { outline: none; }
main { position: relative; z-index: 1; padding: var(--space-xl) var(--gutter) var(--space-6xl); }
/* the moving field: behind everything, never in the way of a click */
.ambient { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.signin { position: relative; z-index: 1; }
.view[hidden] { display: none; }
.page-head { display: grid; gap: var(--space-xs); }
.page-head h1 { font: var(--heading-4); }

/* a silver ring fades in around the panel under the pointer */
.ap-card, .rs-panel, .pick, .eq, .bt-form, .skill-pane, .build, .chart-panel, .result, .tiles, .trade, .skill, .rules-grid fieldset { position: relative; }
.ap-card::after, .rs-panel::after, .pick::after, .eq::after, .bt-form::after, .skill-pane::after, .build::after, .chart-panel::after,
.result::after, .tiles::after, .trade::after, .skill::after, .rules-grid fieldset::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--ring-hover); opacity: 0; transition: opacity var(--dur-hover) var(--ease);
}
@media (hover: hover) {
  .ap-card:hover::after, .rs-panel:hover::after, .pick:hover::after, .eq:hover::after, .bt-form:hover::after, .skill-pane:hover::after, .build:hover::after,
  .chart-panel:hover::after, .result:hover::after, .tiles:hover::after, .trade:hover::after, .skill:hover::after, .rules-grid fieldset:hover::after { opacity: 1; }
}
.skill[aria-pressed="true"]::after, .trade[aria-pressed="true"]::after { opacity: 1; box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ---------- panels: one recipe, a charcoal surface, no outline ---------- */
.ap-card, .rs-panel, .pick, .eq, .bt-form, .skill-pane, .build, .chart-panel, .result, .window, .signin, .tiles {
  border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); min-width: 0;
}

/* ---------- the hero: one on every tab ---------- */
.hero { display: grid; gap: var(--space-lg); justify-items: start; padding: var(--space-5xl) 0 var(--space-3xl); }
.hero--center { justify-items: center; text-align: center; padding-top: var(--space-6xl); }
.hero__title {
  max-width: 680px; font: var(--heading-2); text-wrap: balance;
  background: linear-gradient(90deg, var(--color-hero-from), var(--color-hero-to)); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: var(--space-2xs);   /* keeps descenders inside the clipped gradient */
}
.hero__title--xl { font: var(--heading-1); }
.hero__sub { max-width: 680px; font: var(--body-7); color: var(--color-muted); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-xs); }
.hero--center .hero__actions { justify-content: center; }
.hero__proof { font: var(--caption-2); color: var(--color-muted); }
@media (max-width: 40rem) {
  .hero { padding: var(--space-4xl) 0 var(--space-xl); }
  .hero__title { font: var(--heading-4); }
  .hero__title--xl { font: var(--heading-3); }
  .hero__sub { font: var(--body-3); }
}

/* ---------- section heads ---------- */
.section-head { display: grid; gap: var(--space-xs); max-width: 680px; }
.section-head h2 { font: var(--heading-4); }
.section-head__sub { font: var(--body-3); color: var(--color-muted); text-wrap: pretty; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.section-head--row > div { display: grid; gap: var(--space-xs); max-width: 680px; }

/* ---------- the tagline: each word lights up as it crosses the line ---------- */
.tagline { display: grid; justify-items: center; padding: var(--space-6xl) 0; }
.tagline__text { max-width: 680px; font: var(--heading-3); text-align: center; text-wrap: balance; color: var(--color-ink); }
.tagline__word { color: color-mix(in oklab, var(--color-ink) 30%, transparent); transition: color var(--dur-move) var(--ease); }
.tagline__word.is-on { color: var(--color-ink); }
.tagline__word--signal.is-on { color: var(--signal-red-hi); }
@media (max-width: 40rem) { .tagline__text { font: var(--heading-5); } }

/* ---------- sections rise in once ---------- */
.reveal.is-armed:not(.is-in) { opacity: 0; transform: translateY(var(--space-xl)); }
.reveal.is-armed { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
@media (prefers-reduced-motion: reduce) { .reveal.is-armed:not(.is-in) { transform: none; } }

/* ---------- the Desk: the pixel room and the window ---------- */
.desk { max-width: 72rem; margin-inline: auto; display: grid; gap: var(--space-5xl); }
.desk > .hero { padding-bottom: 0; }
.desk > .tagline { margin-block: calc(-1 * var(--space-xl)); }
.room__frame { border-radius: var(--radius-card); overflow: hidden; background: var(--scene-wall); }
.room__scene { position: relative; min-height: 200px; }
.room__scene svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.room__scene[data-state="loading"] { aspect-ratio: 960 / 320; }
.room__meta { margin: var(--space-sm) 0 0; text-align: center; }
.room .monitor { cursor: pointer; }
.room .monitor:focus { outline: none; }
.room .monitor:focus-visible .bezel { stroke: var(--color-ink); stroke-width: 3; }
.room .monitor[aria-pressed="true"] .bezel { stroke: var(--scene-glow); stroke-width: 2; }
@media (hover: hover) { .room .monitor:hover .screen { fill: var(--scene-desk-2); } }
.room .wall { fill: var(--scene-wall); }
.room .foam-a { fill: var(--scene-wall-2); }
.room .foam-b { fill: var(--scene-wall-3); }
.room .bezel { fill: var(--scene-bezel); stroke: var(--scene-bezel); }
.room .screen { fill: var(--scene-screen); }
.room .sticky { fill: var(--scene-sticky); }
.room .desk-top { fill: var(--scene-desk); }
.room .desk-glow { fill: var(--scene-glow); }
.room .desk-leg { fill: var(--scene-desk-2); }
.room .s-up { fill: var(--screen-up); stroke: var(--screen-up); }
.room .s-down { fill: var(--screen-down); stroke: var(--screen-down); }
.room .s-or { fill: var(--color-or); stroke: var(--color-or-line); stroke-width: 0.6; }
/* the monitors' labels are drawn inside the scaled illustration: their sizes are pixel art, not page type */
.room .s-text { fill: var(--screen-text); font: 500 8px var(--font-pixel); }
.room .s-muted { fill: var(--screen-muted); font: 400 7px var(--font-pixel); }
.room .s-tag-up { fill: var(--screen-up); }
.room .s-tag-down { fill: var(--screen-down); }
.room .s-tag-text { fill: var(--scene-bezel); font: 500 7.5px var(--font-pixel); }
.room .px-k { fill: var(--scene-bezel); }
.room .px-d { fill: var(--scene-desk-2); }
.room .px-g { fill: var(--scene-glow); }
.room .px-m { fill: var(--scene-metal); }
.room .px-n { fill: var(--scene-metal-2); }
.room .px-w { fill: var(--scene-white); }
.room .px-1 { fill: var(--scene-can-1); }
.room .px-2 { fill: var(--scene-can-2); }
.room .px-3 { fill: var(--scene-can-3); }
.room .px-r { fill: var(--scene-key-1); }
.room .px-e { fill: var(--scene-key-2); }
.room .px-b { fill: var(--scene-key-3); }
.room .px-y { fill: var(--scene-key-4); }

.trades { display: grid; gap: var(--space-lg); }
.trades__sum { font: var(--body-5); font-family: var(--font-mono); color: var(--color-ink-2); }
.trades__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-sm); }
.trade {
  all: unset; box-sizing: border-box; display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease);
}
.trade[aria-pressed="true"] { background: var(--color-paper-4); }
.trade:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.trade:active { transform: scale(0.98); }
@media (hover: hover) { .trade:hover { background: var(--color-paper-3); } }
.trade__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-sm); align-items: center; margin-bottom: var(--space-xs); }
.trade__sym { font: var(--heading-6); }
.trade__kind { grid-column: 1; grid-row: 2; font: var(--caption-5); color: var(--color-muted); }
.trade__pl { grid-column: 2; grid-row: 1 / 3; font: var(--heading-6); font-family: var(--font-mono); white-space: nowrap; }
.trade__row { display: flex; justify-content: space-between; gap: var(--space-sm); font: var(--caption-5); font-family: var(--font-mono); color: var(--color-ink-2); }
.trade__row span:first-child { font-family: var(--font-sans); color: var(--color-muted); }

.window { position: relative; z-index: var(--z-raised); overflow: hidden; margin-top: calc(-1 * var(--space-3xl)); }
.window__body:has(> .window__chat:only-child) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.window__head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.window__head h2 { font: var(--title-4); white-space: nowrap; }
.window__head .btn { margin-left: auto; }
.badge { font: var(--caption-4); color: var(--color-ink-2); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-4); white-space: nowrap; }
.window__body { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); min-height: 30rem; }
@media (max-width: 60rem) { .window__body { grid-template-columns: minmax(0, 1fr); } }
/* the chat column is a split of the window, not a card: a divider line, full height */
.window__chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 32rem; padding: var(--space-lg); background: var(--color-paper-3); }
.window__chart { padding: var(--space-lg); min-width: 0; }
.window__chart h3 { font: var(--title-3); }

.log { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-sm); min-height: 0; }
.msg { max-width: 100%; font: var(--body-6); display: grid; gap: var(--space-xs); color: var(--color-ink); }
.msg--me { align-self: stretch; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-part); background: var(--color-paper-4); }
.msg--bot { color: var(--color-ink-2); }
.msg__title { font: var(--body-5); color: var(--color-ink); }
.msg__out { margin: 0; padding: var(--space-sm); border-radius: var(--radius-part); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--caption-5); font-family: var(--font-mono); color: var(--color-ink-2); max-height: 16rem; overflow: auto; }
.msg .verdict { font: var(--heading-6); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; font: var(--button-xsm); white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease);
}
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip:active { transform: scale(0.98); }
@media (hover: hover) { .chip:hover { background: var(--color-paper-4); } }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.help-list li { display: grid; gap: var(--space-3xs); }
.help-list span { color: var(--color-muted); }
.say { display: flex; gap: var(--space-xs); padding-top: var(--space-sm); }
.say .input { flex: 1 1 auto; min-width: 0; }
.say .btn--primary { width: auto; flex: 0 0 auto; }
.v-up { color: var(--color-up); }
.v-down { color: var(--color-down); }

/* ---------- the trade chart ---------- */
.chart .or-label { fill: var(--color-or-line); font: var(--caption-5); }
.chart .range-line { stroke: var(--color-or-line); stroke-width: 1; stroke-dasharray: 4 3; }
.chart .range-label { fill: var(--color-or-line); font: var(--caption-4); }
.chart .zone-target { fill: var(--color-zone-up); }
.chart .zone-stop { fill: var(--color-zone-down); }
.chart .vol--up { fill: var(--color-vol-up); }
.chart .vol--down { fill: var(--color-vol-down); }
.chart .buy-mark { fill: var(--color-up); }
.chart .buy-label { fill: var(--color-up); font: var(--caption-3); }
.chart .flag-pole { stroke: var(--color-ink); stroke-width: 1.5; }
.chart .flag { fill: var(--color-up); }
.chart .ptag--entry, .chart .ptag--target, .chart .ptag--last-up { fill: var(--color-up); }
.chart .ptag--stop, .chart .ptag--last-down { fill: var(--color-down); }
.chart .ptag-text { fill: var(--color-accent-ink); font: var(--caption-3); font-family: var(--font-mono); }
.ohlc { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0 0 var(--space-xs); font: var(--caption-5); font-family: var(--font-mono); }
.ohlc__cell { display: inline-flex; gap: var(--space-2xs); }
.ohlc__k { color: var(--color-muted); font-family: var(--font-sans); }

/* ---------- the interval bar ---------- */
.ivs { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin: 0 0 var(--space-xs); }
.iv {
  all: unset; box-sizing: border-box; min-width: 2.5rem; padding: var(--space-2xs) var(--space-xs); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); font: var(--button-xsm); font-family: var(--font-mono); color: var(--color-muted); cursor: pointer;
  transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.iv[aria-pressed="true"] { color: var(--color-paper); background: var(--color-ink); }
.iv:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .iv:not([aria-pressed="true"]):hover { color: var(--color-ink); background: var(--color-paper-4); } }
.live-note { font: var(--caption-5); color: var(--color-muted); margin: var(--space-2xs) 0 0; }
.live-note--on { color: var(--color-up); }

/* ---------- the order card and its PAPER stamp ---------- */
.order { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-part); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.order__by { display: flex; gap: var(--space-xs); font: var(--caption-5); }
.order__by span { color: var(--color-muted); }
.order__main { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.order__side, .order__sym { font: var(--heading-6); }
.stamp { margin-left: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border: 2px solid var(--color-stamp); border-radius: var(--radius-md); color: var(--color-stamp); font: var(--caption-3); font-family: var(--font-mono); transform: rotate(-6deg); }
.order__when { font: var(--body-6); font-family: var(--font-mono); }
.order__leg, .order__status { font: var(--caption-5); color: var(--color-muted); }
.order--sent { border-color: var(--color-up); }

/* ---------- Autopilot ---------- */
.autopilot { max-width: 72rem; margin-inline: auto; display: grid; gap: var(--space-lg); }
.autopilot > .hero { padding-bottom: var(--space-xl); }
.ap-state { font: var(--heading-5); }
.ap-state--on { color: var(--color-up); }
.ap-state--off { color: var(--color-muted); }
.ap-controls { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.ap-controls .input { width: 14rem; }
.ap-controls .btn--primary { width: auto; }
.btn--kill { border-color: var(--color-down); color: var(--color-down); }
@media (hover: hover) { .btn--kill:hover:not(:disabled) { background: var(--color-paper-4); border-color: var(--color-down); } }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
@media (max-width: 50rem) { .ap-grid { grid-template-columns: minmax(0, 1fr); } }
.ap-card { padding: var(--space-xl); display: grid; gap: var(--space-md); align-content: start; }
.ap-card h2 { font: var(--heading-5); }
.ap-card h3 { font: var(--title-3); margin-top: var(--space-xs); }
/* the feed: a coloured marker before each line says what kind of event it is */
.ap-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); max-height: 20rem; overflow: auto; font: var(--body-6); }
.ap-feed li { display: grid; grid-template-columns: 8px auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-xs); color: var(--color-ink-2); }
.ap-feed li::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-sm); background: var(--color-paper-5); align-self: center; }
.ap-feed .ev--placed::before, .ap-feed .ev--setup::before, .ap-feed .ev--closed::before { background: var(--color-up); }
.ap-feed .ev--blocked::before, .ap-feed .ev--error::before, .ap-feed .ev--warn::before { background: var(--color-down); }
.ap-feed .ev--skip::before { background: var(--color-warn); }
.ap-feed time { color: var(--color-muted); font-family: var(--font-mono); }
.ap-table { overflow-x: auto; min-width: 0; }
.ap-table table { width: 100%; border-collapse: collapse; }
.ap-table th { text-align: left; font: var(--caption-4); color: var(--color-muted); padding: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.ap-table td { padding: var(--space-sm) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: top; font: var(--body-6); font-variant-numeric: tabular-nums; }
.ap-table td.why { color: var(--color-ink-2); max-width: 28rem; }
.ap-table tbody tr { transition: background-color var(--dur-hover) var(--ease); }
@media (hover: hover) { .ap-table tbody tr:hover td { background: var(--color-paper-3); } }
.ap-table tr.row--mine td { background: var(--color-paper-4); }

/* ---------- Results ---------- */
.results { max-width: 76rem; margin-inline: auto; display: grid; gap: var(--space-5xl); }
.results > .hero { padding-bottom: 0; }
.rs-block { display: grid; gap: var(--space-lg); min-width: 0; }
.rs-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.rs-row .help { flex: 1 1 20rem; margin: 0; }
.rs-panel { padding: var(--space-xl); display: grid; gap: var(--space-md); }
.rs-panel h3 { font: var(--title-3); }
.rs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 50rem) { .rs-split { grid-template-columns: minmax(0, 1fr); } }
.rs-split h3, .bt-out h3 { font: var(--title-3); margin-bottom: var(--space-xs); }

.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
@media (max-width: 70rem) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .picks { grid-template-columns: minmax(0, 1fr); } }
.pick { padding: var(--space-lg) var(--space-md); display: grid; gap: var(--space-xs); align-content: start; transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease); }
@media (hover: hover) { .pick:hover { background: var(--color-paper-3); transform: translateY(calc(-1 * var(--space-2xs))); } }
.pick--flag { box-shadow: inset 0 0 0 1px var(--color-warn); }
.pick__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.pick__sym { font: var(--heading-5); }
.pick__rank { color: var(--color-muted); font: var(--caption-2); font-family: var(--font-mono); }
.pick__big { font: var(--heading-6); font-family: var(--font-mono); margin-bottom: var(--space-2xs); }
.pick__line { font: var(--caption-2); color: var(--color-ink-2); overflow-wrap: break-word; }
.pick__flag { font: var(--caption-1); color: var(--color-warn); }
.rulesw { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; }
.rulesw dt { color: var(--color-muted); font: var(--caption-1); }
.rulesw dd { margin: 0; font: var(--body-6); }
@media (max-width: 40rem) { .rulesw { grid-template-columns: minmax(0, 1fr); } .rulesw dd { margin-bottom: var(--space-xs); } }

/* the figures: one surface, big numbers, no box around each */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-xl) var(--space-lg); padding: var(--space-xl); }
.tile-stat { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.tile-stat__label { color: var(--color-muted); font: var(--caption-1); }
.tile-stat__value { font: var(--heading-3); font-family: var(--font-mono); color: var(--color-ink); }
.tile-stat__note { color: var(--color-muted); font: var(--caption-5); }

.eq { margin: 0; padding: var(--space-xl); display: grid; gap: var(--space-sm); }
.eq figcaption { color: var(--color-muted); font: var(--caption-2); }
.eq__plot { position: relative; min-width: 0; }
.eq__plot svg { display: block; width: 100%; height: auto; max-height: 22rem; touch-action: none; }
.eq .grid-line { stroke: var(--color-rule-2); stroke-width: 1; }
.eq .zero-line { stroke: var(--color-paper-5); stroke-width: 1; }
.eq .axis-text { fill: var(--color-muted); font: var(--caption-5); font-family: var(--font-mono); }
.eq .end-text { fill: var(--color-ink); font: var(--caption-3); font-family: var(--font-mono); }
.eq .eq-line { fill: none; stroke: var(--color-series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.eq .eq-cross { stroke: var(--color-muted); stroke-width: 1; }
.eq .eq-dot { fill: var(--color-series-1); stroke: var(--color-paper-2); stroke-width: 2; }
.eq-tip { position: absolute; pointer-events: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-part); background: var(--color-paper-4); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-panel); font: var(--caption-2); font-family: var(--font-mono); white-space: nowrap; }
.eq-tip[hidden] { display: none; }
.eq-tip b { font-weight: 600; }

.bt-form { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: end; padding: var(--space-xl); }
.bt-form .field { margin: 0; min-width: 9rem; }
.bt-syms { flex: 1 1 16rem; }
.bt-go { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.bt-go .btn { width: auto; }
.bt-out { display: grid; gap: var(--space-md); min-width: 0; }
.bt-warn { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--color-warn); background: var(--color-paper-2); color: var(--color-ink); font: var(--body-6); }

/* ---------- pop-ups ---------- */
.toasts { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast); display: grid; gap: var(--space-xs); width: min(24rem, calc(100% - 2 * var(--space-md))); }
.toast { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-4); color: var(--color-ink); box-shadow: var(--shadow-panel); font: var(--body-6); border: var(--rule-hair) solid var(--color-paper-5); animation: toast-in var(--dur-move) var(--ease); }
.toast--placed, .toast--setup, .toast--closed { border-color: var(--color-up); }
.toast--blocked, .toast--error, .toast--warn { border-color: var(--color-down); }
.toast--skip { border-color: var(--color-warn); }
.toast strong { display: block; margin-bottom: var(--space-3xs); font: var(--body-4); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-xs)); } to { opacity: 1; transform: none; } }

/* ---------- Skills ---------- */
.skills { max-width: 76rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.skills__hero { grid-column: 1 / -1; }
@media (max-width: 70rem) { .skills { grid-template-columns: minmax(0, 1fr); } }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.skill {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-sm); align-items: center;
  padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease);
}
.skill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.skill:active { transform: scale(0.98); }
.skill[aria-pressed="true"] { background: var(--color-paper-4); }
@media (hover: hover) { .skill:hover { background: var(--color-paper-3); } }
/* inside a 16px card with 12px padding: 16 − 12 = 4 */
.skill__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-paper-4); color: var(--color-ink); }
.picon { width: 22px; height: 22px; fill: currentColor; }
.skill[aria-pressed="true"] .skill__icon { color: var(--color-up); }
.skill__name { font: var(--title-4); }
.skill__job { font: var(--caption-5); color: var(--color-muted); }
.skill-pane { padding: var(--space-xl); display: grid; gap: var(--space-lg); }
.pane-head { display: grid; gap: var(--space-2xs); }
.pane-head h2 { font: var(--heading-5); }
.workon { display: grid; gap: var(--space-2xs); padding: var(--space-sm); border-radius: var(--radius-part); background: var(--color-paper-3); }
.workon .input:not(.input--narrow) { flex: 1 1 16rem; }
.skill-pane h3 { font: var(--title-3); margin-bottom: var(--space-xs); }
.pane-out { max-height: 32rem; }
.pane-actions { flex-wrap: wrap; }
.pane-actions .input { flex: 0 1 12rem; }

/* the scanner's screen: the same dark surfaces, the room's screen colours for the data */
.skill-pane--dark { --color-up: var(--screen-up); --color-down: var(--screen-down); --color-vol-up: var(--screen-vol-up); --color-vol-down: var(--screen-vol-down); }
.scan-head { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.scan-head h2 { font: var(--heading-6); }
.scan-count { color: var(--color-muted); font: var(--body-6); }
.scan-count strong { font: var(--heading-6); font-family: var(--font-mono); color: var(--color-ink); }
.scan-time { margin-left: auto; color: var(--color-muted); font: var(--caption-2); }
.scan-controls .input--narrow { flex: 0 1 15rem !important; width: 15rem; }
.scan-grid { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-md); }
@media (max-width: 50rem) { .scan-grid { grid-template-columns: minmax(0, 1fr); } }
.scan-list { display: grid; gap: var(--space-xs); align-content: start; }
.scan-hit {
  all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-part); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease);
}
.scan-hit[aria-pressed="true"] { border-color: var(--color-up); }
.scan-hit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.scan-hit:active { transform: scale(0.98); }
@media (hover: hover) { .scan-hit:hover { background: var(--color-paper-4); } }
.scan-hit__sym { font: var(--body-5); }
.scan-hit__at { color: var(--color-up); font: var(--caption-2); font-family: var(--font-mono); }
.scan-detail { padding: var(--space-md); border-radius: var(--radius-part); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); display: grid; gap: var(--space-xs); min-width: 0; }
.scan-detail__head { display: flex; align-items: baseline; gap: var(--space-sm); }
.scan-detail__sym { font: var(--heading-6); }
.scan-chart svg { height: 240px; }
.scan-chart { min-height: 240px; }
.scan-flag { color: var(--color-up); font: var(--body-5); }
.scan-detail .btn { justify-self: start; }
.scan-note { color: var(--color-muted); font: var(--caption-2); }

/* the news list */
.news-tabs { display: flex; gap: var(--space-2xs); flex-wrap: wrap; border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-xs); }
.news-tab {
  all: unset; box-sizing: border-box; padding: var(--space-2xs) var(--space-sm); display: inline-flex; align-items: center; border-radius: var(--radius-pill); font: var(--title-4); color: var(--color-muted); cursor: pointer;
  transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.news-tab[aria-selected="true"] { color: var(--color-ink); background: var(--color-paper-4); }
.news-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .news-tab:hover { color: var(--color-ink); } }
.news-list { display: grid; gap: 0; }
.news-item { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-2xs); }
.news-title { font: var(--body-2); color: var(--color-ink); text-decoration: none; max-width: 70ch; }
a.news-title:hover { text-decoration: underline; }
.news-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); font: var(--caption-5); color: var(--color-muted); align-items: center; }
.tchip { padding: 0 var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-paper-4); color: var(--color-ink); font: var(--caption-4); font-family: var(--font-mono); }
.ttag { color: var(--color-ink-2); }

/* the Entry Timer's plan */
.plan-card { display: grid; gap: var(--space-xs); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-2xs); }
.plan-sym { font: var(--body-2); }
.plan-title { font: var(--heading-6); }
.plan-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-xs) 0; }
@media (max-width: 40rem) { .plan-cells { grid-template-columns: minmax(0, 1fr); } }
.plan-cell { padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); border-radius: var(--radius-part); }
.plan-cell--range { border-color: var(--color-ink-2); }
.plan-cell--rule { border-color: var(--color-warn); }
.plan-cell--timer { border-color: var(--color-up); }
.plan-k { font: var(--caption-5); color: var(--color-muted); }
.plan-big { font: var(--heading-6); font-family: var(--font-mono); }
.plan-small { font: var(--caption-5); color: var(--color-muted); }

/* ---------- the Lab ---------- */
.lab {
  display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  grid-template-areas: "hero hero" "build chart" "build result"; max-width: var(--container); margin-inline: auto; align-items: start;
}
.lab__hero { grid-area: hero; padding-bottom: var(--space-lg); }
.build { grid-area: build; }
.chart-panel { grid-area: chart; }
.result { grid-area: result; }
.build, .chart-panel, .result { padding: var(--space-xl); }
.build h2 { font: var(--heading-5); margin-bottom: var(--space-lg); }
.chart-panel h2, .result h2 { font: var(--heading-6); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.panel-head h1, .panel-head h2, .panel-head h3 { white-space: nowrap; flex: 0 0 auto; }
.panel-head .help { text-align: right; }
@media (max-width: 75rem) { .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "build" "chart" "result"; } }

/* ---------- controls: hover, active, focus, disabled, busy ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); white-space: nowrap; cursor: pointer;
  border: var(--rule-hair) solid var(--color-paper-5); border-radius: var(--radius-part);
  background: var(--color-paper-3); color: var(--color-ink); font: var(--button-md);
  transition: transform var(--dur-move) var(--ease), background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.btn::before { content: ""; position: absolute; inset: -4px; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--color-paper-4); transform: scale(1.02); } }
.btn--primary { width: 100%; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) { .btn--primary:hover:not(:disabled) { background: var(--signal-red-deep); border-color: var(--signal-red-deep); } }
.btn--hero { width: auto; font: var(--button-lg); border-radius: var(--radius-xl); text-decoration: none; }
.btn--quiet { background: none; border-color: transparent; color: var(--color-muted); font: var(--button-sm); }
@media (hover: hover) { .btn--quiet:hover:not(:disabled) { color: var(--color-ink); background: var(--color-paper-4); } }
.btn--small { padding: var(--space-2xs) var(--space-sm); font: var(--button-sm); }
.btn[data-busy="true"] { cursor: progress; opacity: 0.7; }
.wordmark:focus-visible, .tab:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); min-width: 0; }
.field > label, legend { font: var(--title-4); color: var(--color-ink-2); }
.pair { display: flex; gap: var(--space-xs); min-width: 0; }
.pair > .input { flex: 1 1 auto; min-width: 0; }
.pair > select.input { flex: 0 0 auto; width: auto; max-width: 60%; }
.input {
  padding: var(--space-xs) var(--space-sm); width: 100%; font: var(--body-3);
  border: var(--rule-hair) solid var(--color-paper-5); border-radius: var(--radius-part);
  background: var(--color-paper-3); color: var(--color-ink);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.input--narrow { flex: 0 0 9.5rem !important; width: 9.5rem; }
.input::placeholder { color: var(--color-muted); }
.input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
@media (hover: hover) { .input:hover:not(:disabled) { background: var(--color-paper-4); } }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
select.input { cursor: pointer; }
.help { font: var(--body-6); color: var(--color-muted); min-height: 1lh; }
.form-error { color: var(--color-error); font: var(--body-6); margin-bottom: var(--space-sm); }
.group { margin-bottom: var(--space-2xs); }

/* ticker suggestions */
.suggest { list-style: none; margin: 0; padding: var(--space-2xs) 0; border-radius: var(--radius-part); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); }
.suggest button { all: unset; box-sizing: border-box; display: flex; gap: var(--space-sm); width: 100%; padding: var(--space-xs) var(--space-sm); cursor: pointer; align-items: center; transition: background-color var(--dur-hover) var(--ease); }
.suggest button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@media (hover: hover) { .suggest button:hover { background: var(--color-paper-4); } }
.suggest .sym { font: var(--body-5); font-family: var(--font-mono); min-width: 4.5rem; color: var(--color-ink); }
.suggest .nm { color: var(--color-muted); font: var(--caption-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* the four way switch: 4px inside a full pill */
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0 0 var(--space-md); padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: flex; align-items: center; justify-content: center; padding: var(--space-xs) 0; border-radius: var(--radius-pill); color: var(--color-muted); font: var(--button-sm); transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); }
.seg__opt input:checked + span { color: var(--color-select-ink); background: var(--color-select); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .seg__opt input:not(:checked):hover + span { color: var(--color-ink); background: var(--color-paper-4); } }

.practice { margin: var(--space-xs) 0 var(--space-md); color: var(--color-muted); }
.practice summary { cursor: pointer; font: var(--body-6); padding: var(--space-xs) 0; }
.practice[open] summary { margin-bottom: var(--space-xs); }

/* ---------- states ---------- */
.state-note { color: var(--color-muted); font: var(--body-6); max-width: 52ch; }
[data-state="error"] .state-note { color: var(--color-error); }
.skeleton { border-radius: var(--radius-part); background: var(--color-paper-3); min-height: 280px; animation: pulse 1.6s var(--ease) infinite alternate; }
.skeleton--rows { min-height: 160px; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }

/* ---------- the option chain ---------- */
.chain { margin-bottom: var(--space-md); border-radius: var(--radius-part); border: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.chain table { width: 100%; border-collapse: collapse; font: var(--body-6); font-family: var(--font-mono); }
.chain th { background: var(--color-paper-3); color: var(--color-muted); font: var(--caption-4); text-align: right; padding: var(--space-xs); white-space: nowrap; }
.chain th:first-child, .chain td:first-child { text-align: left; }
.chain td { text-align: right; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.chain td > button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: var(--space-xs); cursor: pointer; text-align: inherit; }
.chain td > button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.chain tr.near td { color: var(--color-ink); }
.chain tr td { color: var(--color-ink-2); transition: background-color var(--dur-hover) var(--ease); }
.chain tr[aria-selected="true"] td { background: var(--color-paper-4); color: var(--color-ink); }
@media (hover: hover) { .chain tr:hover td { background: var(--color-paper-3); } }
.chain .spot td { border-top: var(--rule-hair) solid var(--color-accent); }

/* ---------- the chart, the signature ---------- */
.chart { position: relative; min-height: 340px; }
.chart svg { width: 100%; height: 340px; }
.chart .grid { stroke: var(--color-rule-2); stroke-width: 1; }
.chart .axis { fill: var(--color-muted); font: var(--caption-5); font-family: var(--font-mono); }
.chart .up, .tile__chart .up { fill: var(--color-up); stroke: var(--color-up); }
.chart .down, .tile__chart .down { fill: var(--color-down); stroke: var(--color-down); }
.chart .wick, .tile__chart .wick { stroke-width: 1; }
.chart .or-box, .tile__chart .or-box { fill: var(--color-or); stroke: var(--color-or-line); stroke-width: 1; }
.chart .trig-ok { fill: var(--color-up); }
.chart .trig-check { fill: none; stroke: var(--color-accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile__chart .or-line { stroke: var(--color-accent); stroke-width: 1; opacity: 0.6; }
.tile__chart .trig { fill: none; stroke: var(--color-ink); stroke-width: 1.5; }
.chart .lvl { stroke-width: 1.5; }
.chart .lvl--entry { stroke: var(--color-or-line); }
.chart .lvl--stop { stroke: var(--color-down); }
.chart .lvl--target { stroke: var(--color-up); }
.chart .lvl-tag { font: var(--caption-3); font-family: var(--font-mono); paint-order: stroke; stroke: var(--color-paper-2); stroke-width: 3px; }
.chart .lvl-tag--entry { fill: var(--color-or-line); }
.chart .lvl-tag--stop { fill: var(--color-down); }
.chart .lvl-tag--target { fill: var(--color-up); }
.chart .trig { fill: none; stroke: var(--color-ink); stroke-width: 1.5; }
.state-panel {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-2xl);
  margin: 0 0 var(--space-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-part);
  background: var(--color-paper-3); color: var(--color-ink); font: var(--body-6); font-family: var(--font-mono);
}
.state-panel div { display: grid; gap: var(--space-3xs); }
.state-panel dt { color: var(--color-muted); font: var(--caption-5); }
.state-panel dd { margin: 0; color: var(--color-ink); }
.state-panel .v-up { color: var(--color-up); }
.state-panel .v-down { color: var(--color-down); }
.state-panel .v-accent { color: var(--color-accent); }

/* ---------- the result ---------- */
#result { margin-top: var(--space-md); }
.result-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-2xl); }
@media (max-width: 60rem) { .result-grid { grid-template-columns: minmax(0, 1fr); } }
.result h3 { font: var(--title-3); margin-bottom: var(--space-xs); }
.plan { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-lg); margin: 0 0 var(--space-lg); }
.plan dt { color: var(--color-muted); font: var(--body-6); }
.plan dd { margin: 0; text-align: right; font: var(--body-6); font-family: var(--font-mono); }
.verdict { font: var(--heading-5); margin-bottom: var(--space-xs); }
.verdict--pass { color: var(--color-up); }
.verdict--block { color: var(--color-down); }
/* reasons: a coloured marker before each line */
.lines { margin: 0 0 var(--space-md); padding: 0; list-style: none; display: grid; gap: var(--space-xs); font: var(--body-6); }
.lines li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: var(--space-xs); align-items: baseline; color: var(--color-ink-2); max-width: 70ch; }
.lines li::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-sm); background: var(--color-paper-5); }
.lines--block li { color: var(--color-ink); }
.lines--block li::before { background: var(--color-down); }
.lines--warn li::before { background: var(--color-warn); }
.ticket { margin: 0 0 var(--space-md); padding: var(--space-md); border-radius: var(--radius-part); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); font: var(--body-6); font-family: var(--font-mono); }
.ticket p + p { margin-top: var(--space-2xs); }
.ticket .status { color: var(--color-muted); font: var(--caption-2); }
.step { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
.step .pair .btn { flex: 0 0 auto; }
.step .btn--primary { width: auto; flex: 0 0 auto; }
.done { padding: var(--space-md); border-radius: var(--radius-part); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-up); }
.tm-out { margin: var(--space-sm) 0 0; padding: var(--space-md); border-radius: var(--radius-part); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); white-space: pre-wrap; font: var(--body-6); font-family: var(--font-mono); color: var(--color-ink-2); max-height: 22rem; overflow: auto; }
.notes { font: var(--body-6); color: var(--color-muted); display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }

/* ---------- sign in: the front door, its heading in the hero gradient ---------- */
.signin { max-width: 26rem; margin: 14dvh auto 0; padding: var(--space-3xl) var(--space-2xl); }
.signin h1 {
  font: var(--heading-4); margin-bottom: var(--space-xs); max-width: 680px;
  background: linear-gradient(90deg, var(--color-hero-from), var(--color-hero-to)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.signin .help { margin-bottom: var(--space-lg); }
.signin .btn--primary { margin-top: var(--space-xs); }
.signin .back { display: inline-block; margin-top: var(--space-md); font: var(--body-5); color: var(--color-ink-2); }

/* ---------- rules ---------- */
.rules { max-width: 72rem; margin-inline: auto; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 50rem) { .rules-grid { grid-template-columns: minmax(0, 1fr); } }
.rules-grid fieldset { padding: var(--space-xl); margin: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.rules-grid legend { float: left; width: 100%; font: var(--heading-5); color: var(--color-ink); padding: 0; margin-bottom: var(--space-md); }
.rules-grid legend + * { clear: both; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; margin-bottom: var(--space-2xs); cursor: pointer; font: var(--body-6); }
.switch input { appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 24px; margin: 0; border-radius: var(--radius-full); background: var(--color-paper-4); border: var(--rule-hair) solid var(--color-paper-5); cursor: pointer; transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-muted); transition: transform var(--dur-move) var(--ease), background-color var(--dur-hover) var(--ease); }
.switch input:checked { background: var(--color-select); border-color: var(--color-select); }
.switch input:checked::after { transform: translateX(20px); background: var(--color-select-ink); }
.switch input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch input:disabled { opacity: 0.5; cursor: not-allowed; }
.rules-actions { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-2xl); }
.rules-actions .btn--primary { width: auto; }

/* the cards reset their box with all: unset above; their hover ring needs them positioned */
.trade, .skill { position: relative; }

/* ---------- How to use: a quiet toggle under each heading ---------- */
.howto { max-width: 72ch; font: var(--body-6); color: var(--color-ink-2); }
.howto summary {
  display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full);
  background: var(--color-paper-3); color: var(--color-ink-2); font: var(--caption-1); cursor: pointer; list-style: none;
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: "?"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-accent-ink); font: var(--caption-3); }
.howto[open] summary { color: var(--color-ink); background: var(--color-paper-4); }
.howto summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .howto summary:hover { color: var(--color-ink); background: var(--color-paper-4); } }
.howto ol, .howto p { margin: var(--space-sm) 0 0; padding: var(--space-md) var(--space-md) var(--space-md) var(--space-2xl); border-radius: var(--radius-lg); background: var(--color-paper-3); display: grid; gap: var(--space-xs); }
.howto p { padding-left: var(--space-md); }
.hero .howto { justify-self: start; }
.hero--center .howto { justify-self: center; text-align: left; }
.rules-grid fieldset .howto { margin-bottom: var(--space-md); }

/* ---------- the day's trade, at the top of the Desk ---------- */
.today { display: grid; gap: var(--space-xl); padding: var(--space-3xl) 0 var(--space-2xl); }
.today__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.today__head > div:first-child { display: grid; gap: var(--space-xs); min-width: 0; max-width: 46rem; }
.today__title { font: var(--heading-3); overflow-wrap: break-word; min-width: 0; }
.today__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.today__tools .btn--primary { width: auto; flex: 0 0 auto; }
.today__label { font: var(--caption-2); color: var(--color-muted); }
.today__date { width: auto; color-scheme: dark; }
:root[data-theme="light"] .today__date { color-scheme: light; }
.today__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
@media (max-width: 64rem) { .today__grid { grid-template-columns: minmax(0, 1fr); } }
.today__chart, .today__why { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.today__back { margin-top: var(--space-sm); }
.today__why { display: grid; gap: var(--space-md); align-content: start; }
.today__why h2 { font: var(--title-2); }
.why5 { display: grid; gap: var(--space-sm); counter-reset: why; padding: 0; margin: 0; list-style: none; }
.why5 li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); counter-increment: why; }
.why5 li:last-child { border-bottom: 0; padding-bottom: 0; }
.why5 li::before { content: counter(why); grid-row: span 2; font: var(--caption-2); font-family: var(--font-mono); color: var(--color-accent-text); padding-top: 2px; }
.why5 b { font: var(--body-4); color: var(--color-ink); }
.why5 p { font: var(--body-6); color: var(--color-ink-2); text-wrap: pretty; }
.happened { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-3); }
.happened b { font: var(--body-4); }
.happened p { font: var(--body-6); color: var(--color-ink-2); }
.happened .v-up, .happened .v-down { font-family: var(--font-mono); }

.cal__sub { font: var(--title-3); margin: var(--space-md) 0 var(--space-xs); }
.cal__skips { display: grid; gap: var(--space-2xs); padding-left: var(--space-lg); font: var(--body-6); color: var(--color-ink-2); }
#pnl-setup { margin-top: var(--space-md); width: auto; }

/* ---------- Results: the daily trade, day by day ---------- */
#dh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-lg); padding: var(--space-xl); }
.dh-tile { display: grid; gap: var(--space-3xs); align-content: start; }
.dh-tile span { font: var(--caption-2); color: var(--color-muted); }
.dh-tile strong { font: var(--heading-4); font-family: var(--font-mono); }
.dh-tile small { font: var(--caption-5); color: var(--color-muted); }
.rules-list { display: grid; gap: var(--space-xs); padding-left: var(--space-lg); font: var(--body-6); color: var(--color-ink-2); max-width: 75ch; }
.rs-block .ot__how + .ot__how { margin-top: var(--space-sm); }
.ot__how .picks { margin-top: var(--space-md); }

/* ---------- Today's one trade ---------- */
.onetrade { display: grid; gap: var(--space-lg); }
.ot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-lg); }
@media (max-width: 60rem) { .ot { grid-template-columns: minmax(0, 1fr); } }
.ot__main, .ot__why, .ot__none { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.ot__main { box-shadow: inset 0 0 0 1px var(--color-accent); }
.ot__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md); }
.ot__sym { font: var(--heading-2); }
.ot__side { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-accent-ink); font: var(--button-sm); text-transform: uppercase; letter-spacing: 0.08em; }
.ot__status { font: var(--body-5); color: var(--color-ink-2); }
.ot__rule { font: var(--body-2); color: var(--color-ink); max-width: 60ch; }
.ot__figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-lg); }
.ot__fig { display: grid; gap: var(--space-3xs); }
.ot__fig span { font: var(--caption-2); color: var(--color-muted); }
.ot__fig strong { font: var(--heading-5); font-family: var(--font-mono); }
.ot__fig small { font: var(--caption-5); color: var(--color-muted); }
.ot__why h3, .ot__none h3 { font: var(--title-2); }
.ot__stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); font: var(--body-6); }
.ot__stat b { font: var(--body-4); font-family: var(--font-mono); }
.ot__verdict { font: var(--body-6); color: var(--color-ink-2); }
.ot__honest { font: var(--caption-2); color: var(--color-muted); }
.ot__how { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.ot__how summary { cursor: pointer; font: var(--title-3); padding: var(--space-2xs) 0; }
.ot__how[open] summary { margin-bottom: var(--space-md); }
.ot__how td.why { min-width: 16rem; }

/* ---------- the theme switch in the nav ---------- */
.theme-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-xl); color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease); }
.theme-btn svg { width: 18px; height: 18px; fill: currentColor; }
.theme-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-btn:active { transform: scale(0.94); }
@media (hover: hover) { .theme-btn:hover { background: var(--color-paper-4); color: var(--color-ink); } }
.theme-btn .ic-sun { display: none; }
:root[data-theme="light"] .theme-btn .ic-sun { display: block; }
:root[data-theme="light"] .theme-btn .ic-moon { display: none; }
@media (max-width: 60rem) { .menu .theme-btn { margin-left: var(--space-sm); } }

/* ---------- the P&L calendar ---------- */
.pnl { display: grid; gap: var(--space-lg); }
.pnl__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.pnl__nav { display: flex; align-items: center; gap: var(--space-xs); }
.pnl__month { min-width: 9.5rem; text-align: center; font: var(--title-2); }
.icon-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-xl); background: var(--color-paper-3); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease); }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) { .icon-btn:hover { background: var(--color-paper-4); } }
.pnl__sum { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.pnl__fig { display: grid; gap: var(--space-3xs); }
.pnl__fig span { font: var(--caption-2); color: var(--color-muted); }
.pnl__fig strong { font: var(--heading-5); font-family: var(--font-mono); color: var(--color-ink); }
.cal { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.cal__dow { font: var(--caption-4); color: var(--color-muted); padding: 0 var(--space-2xs) var(--space-2xs); }
/* a cell: the tint carries the sign and the size of the day; the words stay in ink */
.cal__day {
  all: unset; box-sizing: border-box; position: relative; display: grid; align-content: space-between; gap: var(--space-2xs);
  min-height: 84px; padding: var(--space-xs); border-radius: var(--radius-lg); background: var(--color-paper-3); color: var(--color-ink); cursor: pointer;
  transition: transform var(--dur-move) var(--ease), background-color var(--dur-hover) var(--ease);
}
.cal__day[data-tone="up"] { background: rgb(var(--cal-up) / calc(0.14 + 0.5 * var(--k, 0))); }
.cal__day[data-tone="down"] { background: rgb(var(--cal-down) / calc(0.14 + 0.5 * var(--k, 0))); }
.cal__day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-accent); }
.cal__day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .cal__day:hover { transform: translateY(calc(-1 * var(--space-3xs))); } }
.cal__day--empty, .cal__day--weekend { cursor: default; }
.cal__day--weekend { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.cal__day--today .cal__n { color: var(--color-accent-text); }
.cal__n { font: var(--caption-3); color: var(--color-muted); }
.cal__pl { font: var(--body-4); font-family: var(--font-mono); }
.cal__t { font: var(--caption-5); color: var(--color-ink-2); }
.cal__pad { min-height: 84px; }
.cal__detail { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-xs); }
.cal__detail h3 { font: var(--title-3); }
.cal__note { font: var(--caption-2); color: var(--color-muted); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); font: var(--caption-2); color: var(--color-muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-sm); vertical-align: -1px; margin-right: var(--space-2xs); }
.legend .lg-up { background: rgb(var(--cal-up) / 0.55); }
.legend .lg-down { background: rgb(var(--cal-down) / 0.55); }
@media (max-width: 40rem) {
  .cal { padding: var(--space-sm); }
  .cal__grid { gap: var(--space-2xs); }
  .cal__day, .cal__pad { min-height: 56px; padding: var(--space-2xs); }
  .cal__t { display: none; }
  .cal__pl { font: var(--caption-3); font-family: var(--font-mono); }
}

/* ---------- Today's 5 setups ---------- */
.setups { display: grid; gap: var(--space-lg); }
.setups__panel { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); display: grid; gap: var(--space-md); min-width: 0; }
.setups__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.setups__bar .input { width: auto; }
.setups__rule { font: var(--caption-2); color: var(--color-muted); max-width: 72ch; }
.setups table td { white-space: nowrap; }
.setups td.why { white-space: normal; min-width: 14rem; }
.setups .sym { font: var(--body-4); }
.setups .lv { font-family: var(--font-mono); }
.tag { display: inline-block; padding: 0 var(--space-xs); border-radius: var(--radius-full); background: var(--color-paper-4); color: var(--color-ink); font: var(--caption-4); }
.tag--flag { background: transparent; box-shadow: inset 0 0 0 1px var(--color-warn); color: var(--color-ink); }
.tag--on { background: var(--color-accent); color: var(--color-accent-ink); }

.legend { margin-top: var(--space-sm); }
.cal__grid .skeleton { grid-column: 1 / -1; }
.section-head--row > .pnl__nav { display: flex; }
#setups-body { min-width: 0; }
.lv--stack { display: grid; gap: var(--space-3xs); }