/* Candlefall theme + thin app helpers on top of daisyUI CDN */

[data-theme="candlefall"] {
  /* Candlefall Dark — Coinbase-flavoured. Neutrals carry a slight blue bias
     so a near-black trading UI reads as a product, not a terminal. Blue is
     the only accent; green/red are semantic (direction, P&L, risk) and are
     never used for emphasis. base-300 is deliberately LIGHTER than base-100
     because every card in the templates uses `border-base-300`, and a border
     darker than its own card is invisible on this ground. */
  color-scheme: dark;
  --color-base-100: oklch(19.6% 0.008 274);      /* #141519  card            */
  --color-base-200: oklch(14.9% 0.005 264);      /* #0A0B0D  page            */
  --color-base-300: oklch(27.7% 0.014 267);      /* #25282F  edge / raised   */
  --color-base-content: oklch(97.9% 0.003 265);  /* #F7F8FA                  */
  --color-primary: oklch(60.2% 0.215 264);       /* #3D74FF  cb blue, lifted */
  --color-primary-content: oklch(18.3% 0.065 257);
  --color-secondary: oklch(30.5% 0.017 266);
  --color-secondary-content: oklch(97.9% 0.003 265);
  --color-accent: oklch(73.9% 0.126 198);
  --color-accent-content: oklch(18% 0.03 198);
  --color-neutral: oklch(22.7% 0.010 268);
  --color-neutral-content: oklch(97.9% 0.003 265);
  --color-info: oklch(68.8% 0.166 256);
  --color-info-content: oklch(16% 0.04 256);
  --color-success: oklch(66.9% 0.161 156);       /* #05B169  up              */
  --color-success-content: oklch(15% 0.04 156);
  --color-warning: oklch(77.1% 0.147 67);
  --color-warning-content: oklch(18% 0.04 67);
  --color-error: oklch(65.3% 0.209 19);          /* #F5475C  down            */
  --color-error-content: oklch(15% 0.05 19);
  --radius-selector: 999px;
  --radius-field: 0.5rem;
  --radius-box: 0.875rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

html,
body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
}

/* Every figure on the site carries .tabular already, so this is the one lever
   that moves all data into the mono face — prices, R values, tickets, counts. */
.tabular,
.mono,
code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Headings tighten up on a dark ground; the UI face carries -0.02em well. */
h1, h2, h3, .card-title, .navbar .text-xl {
  letter-spacing: -0.02em;
}

/* daisyUI's default menu-active wash is nearly invisible on candlefall's
   base-100 navbar / base-200 page. Raise contrast with a primary tint. */
.menu :where(li > a.menu-active),
.menu :where(li > .menu-active) {
  background-color: color-mix(in oklab, var(--color-primary) 24%, var(--color-base-100));
  color: var(--color-primary);
  font-weight: 600;
}

/* Market stats overlay drawer (right) */
.stats-drawer-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 55;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.85rem 0.4rem;
  border: 1px solid var(--color-base-300);
  border-right: none;
  border-radius: 0.55rem 0 0 0.55rem;
  background: var(--color-secondary);
  color: var(--color-secondary-content);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.stats-drawer-tab.is-hidden {
  display: none;
}

.stats-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.stats-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  height: 100%;
  width: min(420px, 94vw);
  background: var(--color-base-100);
  border-left: 1px solid var(--color-base-300);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stats-drawer.is-open {
  transform: translateX(0);
}

.stats-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.stats-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
  border-bottom: 1px solid var(--color-base-300);
}

.stats-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.stats-drawer-disclaimer {
  padding: 0.65rem 1rem 1rem;
  border-top: 1px solid var(--color-base-300);
}

/* Long-form setup guide — stacked cards (not daisyUI steps). */
.howto-overview {
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-box, 0.5rem);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  background: color-mix(in oklab, var(--color-base-200) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.howto-overview__lead {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 550;
  color: var(--color-base-content);
}

.howto-overview__label {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

.howto-overview__pieces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.howto-overview__pieces li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
}

.howto-overview__pieces .badge {
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.howto-overview__note {
  margin: 0;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  font-size: 0.75rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
}

.howto-guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
}

.howto-guide > li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  position: relative;
}

.howto-guide > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.78rem;
  top: 1.85rem;
  bottom: -0.85rem;
  width: 2px;
  background: color-mix(in oklab, var(--color-primary) 28%, var(--color-base-300));
  border-radius: 1px;
}

.howto-guide__n {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  background: var(--color-primary);
  color: var(--color-primary-content);
  box-shadow: 0 0 0 3px var(--color-base-100);
}

.howto-guide__card {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-box, 0.5rem);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  background: var(--color-base-100);
}

.howto-guide__title {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-base-content);
}

.howto-guide__intro {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
}

.howto-guide__actions {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto-action;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.howto-guide__actions > li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  counter-increment: howto-action;
}

.howto-guide__actions > li::before {
  content: counter(howto-action);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.howto-guide__tip {
  margin: 0.65rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.4rem;
  border-left: 3px solid color-mix(in oklab, var(--color-info) 55%, transparent);
  background: color-mix(in oklab, var(--color-info) 10%, transparent);
  font-size: 0.74rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.howto-guide__muted {
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.howto-callout {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in oklab, var(--color-success) 28%, transparent);
  background: color-mix(in oklab, var(--color-success) 10%, transparent);
}

.howto-callout__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-success) 75%, var(--color-base-content));
  margin-bottom: 0.25rem;
}

.howto-callout p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
}

.howto-fields {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.howto-fields > div {
  display: grid;
  grid-template-columns: 7.25rem 1fr;
  gap: 0.5rem 0.65rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  background: color-mix(in oklab, var(--color-base-200) 70%, transparent);
}

.howto-fields dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--color-base-content);
}

.howto-fields dd {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
}

@media (max-width: 360px) {
  .howto-fields > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.stats-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stats-section h3 {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.stats-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.stats-row .label {
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}

.stats-row .value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.stats-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stats-pill.bullish,
.stats-pill.above_signal {
  background: color-mix(in oklab, var(--color-success) 18%, transparent);
  color: var(--color-success);
}

.stats-pill.bearish,
.stats-pill.below_signal {
  background: color-mix(in oklab, var(--color-error) 18%, transparent);
  color: var(--color-error);
}

.stats-pill.mixed,
.stats-pill.neutral,
.stats-pill.unknown {
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.stats-pill.overbought {
  background: color-mix(in oklab, var(--color-warning) 22%, transparent);
  color: var(--color-warning);
}

.stats-pill.oversold {
  background: color-mix(in oklab, var(--color-info) 18%, transparent);
  color: var(--color-info);
}

.setup-assist-reasons {
  margin: 0;
  padding-left: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
}
.setup-assist-reasons:empty { display: none; }

.setup-finnhub {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-box, 0.5rem);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  background: color-mix(in oklab, var(--color-base-200) 70%, transparent);
}

.setup-finnhub .setup-assist-reasons {
  margin: 0;
  font-size: 0.8rem;
}

/* Verdict: direction, score and confidence read as one object, not a
   sentence. Everything below it is optional detail behind a fold. */

.setup-verdict {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.setup-dir {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.setup-dir[data-direction="BUY"] { color: var(--color-success); }
.setup-dir[data-direction="SELL"] { color: var(--color-error); }

.setup-score {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-left: auto;
}

.setup-score-max {
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

#setup-confidence { margin-left: 0 !important; text-transform: capitalize; }
#setup-confidence[data-confidence="high"] {
  background: color-mix(in oklab, var(--color-success) 18%, transparent);
  color: var(--color-success);
}
#setup-confidence[data-confidence="medium"] {
  background: color-mix(in oklab, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
}

/* BUY vs SELL, side by side — the comparison the score is hiding. */

.setup-sides { display: flex; flex-direction: column; gap: 0.3rem; }

.setup-side {
  display: grid;
  grid-template-columns: 2.6rem 1fr 1.9rem;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.55;
}
.setup-side.is-active { opacity: 1; }

.setup-side-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.setup-side[data-side="BUY"] .setup-side-label { color: var(--color-success); }
.setup-side[data-side="SELL"] .setup-side-label { color: var(--color-error); }

.setup-side-track,
.setup-factor-track {
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  overflow: hidden;
}

.setup-side-fill { display: block; height: 100%; border-radius: 999px; }
.setup-side[data-side="BUY"] .setup-side-fill { background: var(--color-success); }
.setup-side[data-side="SELL"] .setup-side-fill { background: var(--color-error); }

.setup-side-score,
.setup-factor-pts {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

/* The maths, folded away until asked for. */

.setup-fold {
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  padding-top: 0.55rem;
}

.setup-fold > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.setup-fold > summary::-webkit-details-marker { display: none; }
.setup-fold > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.15s ease;
}
.setup-fold[open] > summary::before { transform: rotate(90deg); }
.setup-fold > summary:hover { color: var(--color-base-content); }

.setup-fold-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.55rem;
}

.setup-factors { display: flex; flex-direction: column; gap: 0.3rem; }

.setup-factor {
  display: grid;
  grid-template-columns: 7.5rem 1fr 2.6rem;
  align-items: center;
  gap: 0.5rem;
}

.setup-factor-label {
  font-size: 0.7rem;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
}

.setup-factor-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-info);
}

/* AI analysis: nothing here until the trader asks for it. */

.setup-ai {
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  padding-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.setup-ai-head { display: flex; align-items: center; gap: 0.4rem; }

.setup-ai-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 2px solid color-mix(in oklab, var(--color-info) 45%, transparent);
  padding-left: 0.65rem;
}

.setup-ai-verdict {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
}
.setup-ai-verdict[data-agree="yes"] { color: var(--color-success); }
.setup-ai-verdict[data-agree="no"] { color: var(--color-warning); }

.setup-ai-thesis {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: color-mix(in oklab, var(--color-base-content) 82%, transparent);
}

.setup-ai-risks {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-warning) 85%, var(--color-base-content));
}

.setup-ai-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

body[data-trade-presence="in"] #round-panel {
  border-color: color-mix(in oklab, var(--color-error) 45%, var(--color-base-300));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-error) 25%, transparent);
}

/* Mid-trade the assist is irrelevant — hide the whole card, not just the
   inner section (that left an empty bordered shell under the chart). */
body[data-trade-presence="in"] #setup-assist-card {
  display: none !important;
}

body[data-trade-presence="out"] #position-panel {
  display: none !important;
}

/* Direction BUY/SELL + risk Low/Med/High — equal columns, no overflow */
.direction-toggle,
.risk-level-toggle {
  display: grid !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.direction-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.risk-level-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.direction-toggle .join-item,
.risk-level-toggle .join-item {
  width: 100%;
  min-width: 0;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.direction-toggle input[value="BUY"] {
  border-color: var(--color-success);
  color: var(--color-success);
}
.direction-toggle input[value="BUY"]:checked {
  background-color: var(--color-success);
  color: var(--color-success-content);
  border-color: var(--color-success);
}
.direction-toggle input[value="SELL"] {
  border-color: var(--color-error);
  color: var(--color-error);
}
.direction-toggle input[value="SELL"]:checked {
  background-color: var(--color-error);
  color: var(--color-error-content);
  border-color: var(--color-error);
}

.risk-level-toggle input[value="low"]:checked {
  background-color: color-mix(in oklab, var(--color-info) 22%, var(--color-base-100));
  border-color: var(--color-info);
  color: var(--color-info);
}
.risk-level-toggle input[value="medium"]:checked {
  background-color: color-mix(in oklab, var(--color-warning) 28%, var(--color-base-100));
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.risk-level-toggle input[value="high"]:checked {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-error-content);
}

#risk-level-hint {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Instrument picker: one row instead of an accordion that could run to half
   the viewport. The live mid sits beside the dropdown rather than inside an
   expanded panel, so the ticket starts at the controls that matter. */
.symbol-picker {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.symbol-select {
  width: 100%;
  min-width: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The live mid gets its own full-width line under the dropdown. Beside it,
   a five-figure crypto price was being truncated to "77573....". */
.symbol-picker .sym-price {
  margin: 0;
  min-width: 0;
  min-height: 1.55rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
  font-variant-numeric: tabular-nums;
}

.symbol-picker .sym-price:empty { display: none; }

/* ---------- Auth pages (login / register / broker enroll) ----------
   One entrance, three forms. The glow is the only decorative element in the
   whole theme; it sits behind the card so the card itself stays flat. */
.auth-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.auth-shell::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 60vh;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 55% 60% at 50% 0%,
      color-mix(in oklab, var(--color-primary) 22%, transparent),
      transparent 70%
    );
  pointer-events: none;
}

.auth-mark {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.75rem;
  border-radius: 0.7rem;
  background: linear-gradient(
    150deg,
    var(--color-primary),
    color-mix(in oklab, var(--color-primary) 55%, var(--color-accent))
  );
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 35%, transparent),
    0 8px 24px -8px color-mix(in oklab, var(--color-primary) 60%, transparent);
}

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

/* ============================================================
   Round screen — trade-management layer
   ------------------------------------------------------------
   Everything here is driven by body[data-trade-presence], which
   round.js already sets on every snapshot. No JavaScript changes.
   ============================================================ */

/* ---------- Sticky vitals bar ----------
   The three numbers that matter mid-trade were in the right rail,
   below the fold. They now sit under the navbar and never move. */
.trade-bar {
  display: none;
  position: sticky;
  top: 4rem;
  z-index: 30;
  background: color-mix(in oklab, var(--color-base-100) 92%, var(--color-error));
  border-bottom: 1px solid color-mix(in oklab, var(--color-error) 35%, var(--color-base-300));
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

body[data-trade-presence="in"] .trade-bar { display: block; }

.trade-bar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.tb-id { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }

.tb-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 25%, transparent);
  flex: none;
}

.tb-symbol { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }

.tb-direction {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.tb-metric { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.tb-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

.tb-value { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.tb-value--muted { color: color-mix(in oklab, var(--color-base-content) 72%, transparent); }

/* Open R is the single loudest thing on screen while a trade is on. */
.tb-metric--hero .tb-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; }

.tb-jump { margin-left: auto; flex: none; }

@media (max-width: 640px) {
  .trade-bar-inner { gap: 0.9rem 1.1rem; padding: 0.5rem 0.75rem; }
  .tb-metric--hero .tb-value { font-size: 1.5rem; }
  .tb-jump { margin-left: 0; width: 100%; }
}

/* ---------- Right rail: management before information ----------
   Flat, the rail is the order ticket. In a trade the open position
   summary sits above Actions so Entry/SL/TP are never covered by the
   sticky Call-the-candle strip. The aside itself is already sticky —
   do not nest another sticky on #actions-panel (it overpainted the
   position card when the rail was taller than the viewport). */
body[data-trade-presence="in"] #position-panel { order: 1; }
body[data-trade-presence="in"] #actions-panel { order: 2; }

/* While the bot owns the round, only Exit stays clickable. JS filters the
   deck; this is the backup so a stale rebuild cannot show protect/bank pads. */
#actions-panel[data-bot-manages="true"] .deck-lane {
  display: none !important;
}
#actions-panel[data-bot-manages="true"] .pad[data-action-id="reverse"] {
  display: none !important;
}

/* ---------- The action deck ----------
   Three lanes in the order a trade progresses — protect what you have, bank
   some of it, then decide how hard to press. Exit spans the deck, set apart
   and hold-to-fire, so it is never hit by muscle memory aimed at Take ½.
   round.js owns the DOM; lanes are structure, so they come from the markup
   rather than from CSS `order`. */

#action-buttons { display: flex; flex-direction: column; gap: 0.55rem; }

.deck-lane {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pad {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  align-items: flex-start;
  text-align: left;
  min-height: 4.25rem;
  padding: 0.7rem 0.75rem 0.6rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.65rem;
  background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
  color: var(--color-base-content);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.pad-face { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.pad-sub {
  font-size: 0.7rem;
  line-height: 1.25;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}
.pad-cap {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
  border-radius: 3px;
  padding: 0 0.28rem;
  background: var(--color-base-100);
}

.pad:hover:not(:disabled) { background: color-mix(in oklab, var(--color-base-content) 9%, transparent); }
.pad:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pad:disabled { cursor: not-allowed; opacity: 0.42; }

/* Lane identity — protect is the safe move and reads calm; press is neither
   protective nor destructive and stays quiet. */
.pad[data-lane="protect"]:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-base-300));
}
.pad[data-lane="protect"]:not(:disabled) .pad-face { color: var(--color-success); }

.pad[data-lane="bank"]:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-base-300));
}
.pad[data-lane="bank"]:not(:disabled) .pad-face { color: var(--color-primary); }

.pad[data-lane="press"]:not(:disabled) .pad-face {
  color: color-mix(in oklab, var(--color-base-content) 85%, transparent);
}

/* Exit: full width, apart, and the only pad that will not fire on one press. */
.pad[data-action-id="exit_now"] {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.4rem;
  margin-top: 0.35rem;
  border-color: color-mix(in oklab, var(--color-error) 55%, transparent);
  background: color-mix(in oklab, var(--color-error) 8%, transparent);
}
.pad[data-action-id="exit_now"] .pad-face { color: var(--color-error); font-size: 1rem; }
.pad[data-action-id="exit_now"]:hover:not(:disabled) {
  background: color-mix(in oklab, var(--color-error) 16%, transparent);
}

/* The hold fill is the confirmation. Releasing early cancels it. */
.pad-hold {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: color-mix(in oklab, var(--color-error) 30%, transparent);
  pointer-events: none;
}
.pad[data-holding] .pad-hold {
  width: 100%;
  transition: width var(--hold-ms, 400ms) linear;
}

/* Working and cooling are different states and must not look alike: one is
   waiting on the broker, the other is a deliberate pause after it answered. */
.pad.is-working { opacity: 1; cursor: progress; }
.pad.is-cooling { opacity: 0.55; }
.pad.is-cooling::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: color-mix(in oklab, var(--color-base-content) 35%, transparent);
  transform-origin: right;
  animation: cf-cooloff 600ms linear forwards;
}
@keyframes cf-cooloff { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Shortcut legend, toggled with ? */
#action-buttons[data-legend="on"] .pad-cap,
.strategy-deck[data-legend="on"] .pad-cap {
  color: var(--color-primary-content);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .pad[data-holding] .pad-hold { transition-duration: var(--hold-ms, 400ms); }
  .pad.is-cooling::after { animation-duration: 600ms; }
}

/* ---------- Risk readout on the order ticket ----------
   This is the last thing you read before committing capital; it was
   styled identically to the hint text under every select. */
/* ---------- Controls with a request in flight ----------
   Enter and the trade actions both wait on a broker round-trip. A plain
   disabled button reads as "nothing happened"; this reads as "working". */

.btn.is-working,
button.is-working {
  opacity: 1;
  cursor: progress;
  position: relative;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
}

.btn.is-working::after,
button.is-working::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cf-spin 0.7s linear infinite;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-working::after,
  button.is-working::after { animation-duration: 2.4s; }
}

/* ---------- Money on each R:R leg ----------
   This figure used to ride at the end of a 0.72rem / 48%-opacity caption,
   after the distance — which is why it read as absent. It gets its own line,
   full-strength colour, and the tone of the outcome it describes. */

.rr-money {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.rr-money[data-leg="risk"][data-state="ok"] { color: var(--color-error); }
.rr-money[data-leg="reward"][data-state="ok"] { color: var(--color-success); }

/* Not an amount — keep it quiet and clearly a status, not a number. */
.rr-money[data-state="pending"] {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

/* ---------- Call-the-candle strip ----------
   Folded into the actions deck: one panel during a trade, not two. It is a
   wager, not a trade action, so it never borrows the pads' filled treatment
   or their cool-off — and it keeps a reserved height in every state, because
   a strip that collapses each candle shifts the whole deck under the
   trader's thumb. */

.callstrip {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 8.75rem;           /* reserved — never collapses */
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in oklab, var(--color-base-content) 16%, transparent);
}

.callstrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }

.callstrip-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.callstrip-clock {
  font-size: 0.8rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.callstrip-bar {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  overflow: hidden;
}

.callstrip-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  transition: width 0.25s linear;
}

.callstrip[data-state="open"] .callstrip-bar > span { background: var(--color-info); }
.callstrip[data-state="open"] .callstrip-clock { color: var(--color-info); }

.callstrip-pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }

.cpad {
  position: relative;
  border: 1px dashed color-mix(in oklab, var(--color-base-content) 22%, transparent);
  border-radius: 8px;
  background: transparent;
  padding: 0.45rem 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cpad .cap {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--color-base-content) 42%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
  border-radius: 3px;
  padding: 0 0.25rem;
}

.cpad:hover:not(:disabled) {
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
  border-color: color-mix(in oklab, var(--color-base-content) 38%, transparent);
}
.cpad:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Spent — answered, waiting on the candle. Not a spinner: nothing is in
   flight, so it must not read like the deck's cool-off. */
.cpad:disabled { opacity: 0.45; cursor: default; }
.cpad[data-picked] {
  opacity: 1;
  border-style: solid;
  border-color: var(--color-info);
  color: var(--color-info);
  background: color-mix(in oklab, var(--color-info) 12%, transparent);
}

.callstrip-status {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.callstrip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.85rem;
  font-size: 0.68rem;
  color: color-mix(in oklab, var(--color-base-content) 42%, transparent);
}
.callstrip-meta b { font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.callstrip-note { flex-basis: 100%; }

.callstrip[data-state="closed"] .callstrip-pads { opacity: 0.55; }

/* ---------- Chart period selector ----------
   The JS toggles DaisyUI's .btn-active, which on this dark theme renders as a
   barely-perceptible shade change — so the selected timeframe read as
   unselected. The state is driven from aria-pressed instead: the JS already
   sets it, and it is the same attribute assistive tech reads, so the visual
   and accessible states cannot drift apart.

   app.css is unlayered, so these rules beat DaisyUI's and Tailwind's layered
   utilities without needing !important. */

[data-chart-period] {
  border-color: color-mix(in oklab, var(--color-base-content) 14%, transparent);
  background: transparent;
  color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.12s ease, color 0.12s ease;
}

[data-chart-period]:hover:not([aria-pressed="true"]) {
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
  color: var(--color-base-content);
}

[data-chart-period][aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 700;
}

[data-chart-period]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  z-index: 1;
}

/* ---------- Money at risk / position size ----------
   Two controls used to be called "risk". One sets the money, one sets the
   distance; the size line below is where they meet. */

.risk-level-amount {
  margin: 0.35rem 0 0.15rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-base-content);
}

.size-preview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.size-preview-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.size-preview-value {
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* A combination that rounds below the broker's lot step cannot be entered —
   flag it here rather than at the rejected order. */
.size-preview[data-state="blocked"] { border-top-color: var(--color-warning); }
.size-preview[data-state="blocked"] .size-preview-value { color: var(--color-warning); }
.size-preview[data-state="blocked"] .stat-note {
  color: color-mix(in oklab, var(--color-warning) 85%, var(--color-base-content));
}

/* ---------- Risk : Reward sliders ----------
   Two legs, colour-coded to the levels they set: risk is the stop (error),
   reward is the target (success). The scale under each slider is redrawn per
   instrument, so the trader can see the range they are working inside. */

.rr-sliders { display: flex; flex-direction: column; gap: 0.95rem; }

.rr-slider { display: flex; flex-direction: column; gap: 0.3rem; }

.rr-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.rr-slider-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.rr-slider-value {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.rr-slider[data-leg="risk"] .rr-slider-value { color: var(--color-error); }
.rr-slider[data-leg="reward"] .rr-slider-value { color: var(--color-success); }
.rr-slider[data-leg="stake"] .rr-slider-value { color: var(--color-warning); }

.rr-range { width: 100%; }
.rr-slider[data-leg="risk"] .rr-range {
  accent-color: var(--color-error);
  --range-bg: var(--color-error);
  --range-thumb: var(--color-error);
}
.rr-slider[data-leg="reward"] .rr-range {
  accent-color: var(--color-success);
  --range-bg: var(--color-success);
  --range-thumb: var(--color-success);
}
.rr-slider[data-leg="stake"] .rr-range {
  accent-color: var(--color-warning);
  --range-bg: var(--color-warning);
  --range-thumb: var(--color-warning);
}
.rr-range:disabled { opacity: 0.4; cursor: not-allowed; }

.rr-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--color-base-content) 36%, transparent);
}

.rr-slider-detail {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.rr-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.rr-summary-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.rr-summary-value { font-size: 0.95rem; font-weight: 700; }

.risk-readout {
  border: 1px solid var(--color-base-300);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-field);
  background: color-mix(in oklab, var(--color-primary) 7%, transparent);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.risk-readout-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.risk-readout-value {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ---------- Position detail ---------- */
.position-summary { line-height: 1.7; }
.position-legs:empty { display: none; }

/* ---------- Candle call, demoted ----------
   Cosmetic by design, so it must not occupy more of the rail than the
   controls that move real money. */

/* ---------- One red, one meaning ----------
   In a trade the ring on the round panel already says "exposure"; the
   pulsing dot beside it was a second alarm for the same fact. */
body[data-trade-presence="in"] #round-state-dot.animate-pulse { animation: none; }

/* ============================================================
   Public home page (/)
   ------------------------------------------------------------
   Same tokens as the app, a wider type scale. The only
   decorative element is the hero glow — everything else is the
   product's own surfaces so the landing page does not promise a
   look the app does not deliver.
   ============================================================ */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--color-base-300);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 45% 55% at 30% 0%,
      color-mix(in oklab, var(--color-primary) 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 45% at 85% 10%,
      color-mix(in oklab, var(--color-success) 10%, transparent),
      transparent 70%
    );
}

.home-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-primary) 80%, var(--color-base-content));
}

.home-h1 {
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

.home-h1 em {
  font-style: normal;
  color: var(--color-primary);
}

.home-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  max-width: 58ch;
  margin: 0;
}

/* ---------- hero illustration ---------- */

.home-hero-art { min-width: 0; }

.home-chart {
  position: relative;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 55%),
    var(--color-base-100);
  padding: 1rem 1rem 1.25rem;
  overflow: hidden;
}

.home-chart svg { width: 100%; height: 240px; display: block; }

.home-chart .lvl { stroke-width: 1; stroke-dasharray: 4 5; }
.home-chart .lvl-tp { stroke: var(--color-success); opacity: 0.75; }
.home-chart .lvl-sl { stroke: var(--color-error); opacity: 0.75; }
.home-chart .lvl-entry { stroke: var(--color-base-content); opacity: 0.28; stroke-dasharray: 2 4; }

.home-chart .candles line { stroke-width: 7; stroke-linecap: butt; }
.home-chart .candles .up { stroke: var(--color-success); }
.home-chart .candles .dn { stroke: var(--color-error); }

.home-tag {
  position: absolute;
  right: 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  white-space: nowrap;
}

.home-tag--tp { top: 3.05rem; color: var(--color-success); }
.home-tag--entry { top: 7.35rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.home-tag--sl { top: 11.6rem; color: var(--color-error); }

/* ---------- sections ---------- */

.home-section { padding: 4.5rem 0; }
.home-section--alt { background: var(--color-base-100); border-block: 1px solid var(--color-base-300); }

.home-h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.home-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  max-width: 62ch;
  margin: 0 0 2.5rem;
}

/* ---------- numbered steps ----------
   Numbered because a round genuinely is a sequence: you cannot manage a
   position you have not entered. */

.home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--color-base-300);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.home-steps li {
  background: var(--color-base-200);
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-section--alt .home-steps li { background: var(--color-base-100); }

.home-step-n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.home-steps h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; }

.home-steps p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
  margin: 0;
}

/* ---------- cards ---------- */

.home-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.home-grid--two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.home-card {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.home-section--alt .home-card { background: var(--color-base-200); }

.home-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; }

.home-card p {
  font-size: 0.9rem;
  line-height: 1.62;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  margin: 0;
}

.home-card--feature {
  border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-base-300));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 9%, transparent), transparent 60%),
    var(--color-base-200);
}

/* ---------- footer + risk ---------- */

.home-footer {
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  padding: 3rem 0 2.5rem;
}

.home-risk {
  border: 1px solid color-mix(in oklab, var(--color-warning) 35%, var(--color-base-300));
  border-radius: var(--radius-box);
  background: color-mix(in oklab, var(--color-warning) 6%, transparent);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.home-risk h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-warning);
  margin: 0;
}

.home-risk p {
  font-size: 0.82rem;
  line-height: 1.62;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
  margin: 0;
  max-width: 92ch;
}

@media (max-width: 640px) {
  .home-section { padding: 3rem 0; }
  .home-chart svg { height: 190px; }
  .home-tag--tp { top: 2.6rem; }
  .home-tag--entry { top: 6rem; }
  .home-tag--sl { top: 9.4rem; }
}

/* ============================================================
   Round page — card system
   ------------------------------------------------------------
   One vocabulary for every card: a head, a hero stat, labelled
   micro-copy, budget meters, and a commit footer. Before this,
   each card invented its own spacing and its own idea of what a
   label looked like.
   ============================================================ */

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Every small caps label on the page, one definition. */
.stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.stat-note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  margin: 0;
}

/* ---------- Session card ----------
   Flat, the countdown is the only thing that matters: it is what gates
   entry. Live, the details take over and the clock stops being the point. */

/* What you are about to trade (or are trading), in one place. Previously the
   only symbol on this card came from the last resolved round, so it
   contradicted the ticket's Instrument dropdown. */
.session-instrument {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.session-instrument-value {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-left: auto;
}

.session-instrument-dir {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.session-instrument-dir[data-direction="BUY"] { color: var(--color-success); }
.session-instrument-dir[data-direction="SELL"] { color: var(--color-error); }

.session-clock { display: flex; flex-direction: column; gap: 0.15rem; }

.session-countdown {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: var(--color-primary);
}

/* The clock is never hidden any more: in a trade it becomes the max-hold
   countdown, which is the single most time-critical number on the page. */
.session-clock[data-clock="hold"] .session-countdown { color: var(--color-error); }
.session-clock[data-clock="closed"] .session-countdown {
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.session-price {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  /* Reserve a line so mark/R/$ updates don't shove Session content around. */
  min-height: 1.4em;
}

/* A resting order is not a position — it reads as a held instruction, so it
   takes the warning hue rather than the live-round red. */
.resting-order {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem;
  border-radius: var(--radius-box, 0.75rem);
  border: 1px solid color-mix(in oklab, var(--color-warning) 45%, transparent);
  background: color-mix(in oklab, var(--color-warning) 8%, transparent);
}

.resting-order-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.resting-order-symbol {
  font-weight: 600;
  font-size: 0.9rem;
}

.resting-order-price {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

.order-type-toggle .btn { flex: 1 1 0; min-width: 0; }

.session-details { display: flex; flex-direction: column; gap: 0.55rem; }
.session-details:empty { display: none; }

.session-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.session-facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 46%, transparent);
}

.session-facts dd {
  margin: 0;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-base-content);
}

.session-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

/* The last-trade recap reports a result rather than explaining the UI, so it
   sits a step above the advisory notes sharing this element. */
.session-last-trade {
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
}

/* ---------- Hero stat ---------- */

.stat-hero { display: flex; flex-direction: column; gap: 0.1rem; }

.stat-hero-value {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
  min-height: 1.05em;
}

.stat-hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
}

/* ---------- Budget meters ----------
   A bar, not a dial. "How much of the budget is gone" is a length
   comparison; a ring makes the eye estimate an arc for the same answer,
   and both numbers were already printed beside the old dials. */

.meters { display: flex; flex-direction: column; gap: 0.85rem; }

.meter { display: flex; flex-direction: column; gap: 0.3rem; }

.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.meter-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.meter-value { font-size: 0.8125rem; font-weight: 600; }

.meter-track {
  position: relative;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--color-base-300);
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value, 0) * 1%);
  border-radius: 999px;
  background: var(--color-success);
  transition: width 240ms ease, background-color 240ms ease;
}

.meter[data-tone="warning"] .meter-fill { background: var(--color-warning); }
.meter[data-tone="error"]   .meter-fill { background: var(--color-error); }
.meter[data-tone="error"]   .meter-value { color: var(--color-error); }
.meter[data-tone="warning"] .meter-value { color: var(--color-warning); }

/* ---------- Key/value grid ---------- */

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-base-300);
}

.kv-grid > div { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }

.kv-grid dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

.kv-grid dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
}

/* ---------- Decisions summary cards ---------- */

.decisions-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.decisions-summary-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: color-mix(in oklab, var(--color-base-200) 70%, var(--color-base-100));
}

.decisions-summary-card dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

.decisions-summary-card dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in oklab, var(--color-base-content) 90%, transparent);
  overflow-wrap: anywhere;
}

/* ---------- Order ticket ----------
   Eight decisions in one column with no grouping is a form people scroll
   past rather than read. The group titles are the cheapest possible fix. */

.ticket-group-title {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 42%, transparent);
  margin: 0.4rem 0 -0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-base-300);
}

.ticket-group-title:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.ticket-commit {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-base-300);
}

/* ---------- Candle call ---------- */




/* ---------- Page-level engine banner ----------
   A server-wide failure is not a property of the Round card. */

.engine-banner {
  max-width: 80rem;
  margin: 1rem auto 0;
  width: calc(100% - 2rem);
}

/* ---------- Setup assist, now its own card ---------- */

#setup-assist-card .setup-assist {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Interior user pages — shared furniture
   ------------------------------------------------------------
   Every page was starting straight into a card whose card-title
   was doing page-title duty, so nothing on screen said where you
   were. One header pattern fixes that across all of them.
   ============================================================ */

.page-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.25rem;
}

.page-head h1 {
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.page-head p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  max-width: 68ch;
  margin: 0;
}

/* ---------- Leaderboard: your own standing ----------
   It was an alert underneath the table — the number you came for, last. */

.standing {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 40%, var(--color-base-300));
  border-radius: var(--radius-field);
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
}

.standing-value {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- A checkbox whose consequence needs explaining ----------
   A bare label cannot carry the sentence that stops someone misreading
   what the setting does. */

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.toggle-row > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.toggle-row-title { font-size: 0.875rem; font-weight: 500; }

.toggle-row .checkbox { margin-top: 0.15rem; flex: none; }

/* ---------- Progressive disclosure ----------
   Reference material that matters once and is noise on every later visit. */

.ticket-details {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  padding: 0.65rem 0.85rem;
  background: color-mix(in oklab, var(--color-base-100) 60%, transparent);
}

.ticket-details > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
  list-style: none;
}

.ticket-details > summary::-webkit-details-marker { display: none; }

.ticket-details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--color-primary);
  transition: transform 140ms ease;
}

.ticket-details[open] > summary::before { transform: rotate(90deg); }

.ticket-details > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Tables read better with the identifier column carrying weight. */
.table th { font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; }

/* The dollar figure and the budget percentage are the same fact at two
   resolutions, so they read as one line rather than two competing stats. */
.stat-hero-sep { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); }

/* ---- Drag-to-set confirmation ------------------------------------------
   A stop dragged by hand is the one action with no fixed destination, so it
   is the one that gets asked back. The strip sits above the deck rather than
   in a dialog: the trader has to keep looking at the line they just moved
   while they answer, and a modal over the chart would take exactly that
   away. It borrows the pads' shapes so Confirm reads as the same kind of
   object as Breakeven does, and nothing else on the deck is reachable while
   it is open. */

.levelconfirm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 45%, transparent);
  border-radius: 0.65rem;
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
}

.levelconfirm-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.levelconfirm-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.levelconfirm-price {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.levelconfirm-r {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.levelconfirm-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.levelconfirm-pads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

/* While the pointer is still down there is nothing to confirm yet — the
   strip is a live readout of where the line currently is, and the pads would
   only invite a click that cannot land. */
.levelconfirm[data-state="dragging"] .levelconfirm-pads { display: none; }

/* A level the server will refuse says so before the trader lets go, and the
   Confirm pad goes with it. Finding out after the round trip is worse.
   Blocked is a separate attribute from the drag phase because a level can be
   refused while the pointer is still moving and again once it has stopped. */
.levelconfirm[data-blocked] {
  border-color: color-mix(in oklab, var(--color-error) 50%, transparent);
  background: color-mix(in oklab, var(--color-error) 8%, transparent);
}
.levelconfirm[data-blocked] .levelconfirm-note { color: var(--color-error); }
.levelconfirm[data-blocked] .levelconfirm-r { color: var(--color-error); }

.deck-hint {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: color-mix(in oklab, var(--color-base-content) 42%, transparent);
}
.deck-hint b { font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }

/* ---- Discipline card ----------------------------------------------------
   Deliberately unlike the leaderboard table next to it. That one is a
   ranking; this one is a mirror, and it should not read as a position in a
   race. No rank, no comparison, no colour that implies pass or fail — a
   trader who protected two of three rounds that ran has something to work on,
   not a grade. */

.discipline {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 40rem) {
  .discipline { grid-template-columns: 1fr; gap: 0.9rem; }
}

.discipline-score {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.discipline-value {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.discipline-bars {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.discipline-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.discipline-track {
  margin: 0.3rem 0 0.2rem;
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  overflow: hidden;
}

.discipline-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in oklab, var(--color-primary) 70%, transparent);
}

/* A component without enough rounds behind it is shown, greyed, rather than
   hidden — its absence from the score is information, and a card that
   silently drops a row looks like it is missing one. */
.discipline-bar[data-counted="no"] { opacity: 0.5; }
.discipline-bar[data-counted="no"] .discipline-track > span { background: transparent; }

/* The one line on this card that names a specific failure. Marked, not
   alarming: it is a fact about past rounds, not a warning about a live one. */
.discipline-flag {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--color-warning) 35%, transparent);
  background: color-mix(in oklab, var(--color-warning) 8%, transparent);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Reverse shares the exit strip: full width, set apart from the lanes, held
   rather than clicked. It is not painted with Exit's red — that colour means
   "this ends the trade and nothing follows", and a reverse is the other kind
   of irreversible: it ends one position and starts another. Warning, not
   danger, so the two are never confused at a glance. */
.pad[data-action-id="reverse"] {
  border-color: color-mix(in oklab, var(--color-warning) 40%, var(--color-base-300));
  background: color-mix(in oklab, var(--color-warning) 6%, transparent);
}
.pad[data-action-id="reverse"] .pad-face { color: var(--color-warning); }
.pad[data-action-id="reverse"]:hover:not(:disabled) {
  background: color-mix(in oklab, var(--color-warning) 12%, transparent);
}

/* Strategies cockpit ------------------------------------------------------
   One annunciator lamp beside the headline. Six states, six colours, and the
   colour is never the only signal — the headline says the same thing in
   words, because a lamp alone is exactly the ambiguity this page had before.

   The lamp names are engine states, not colours: `armed` and `trading` are
   both "working", `held` is ours to clear, `setup` is theirs, `limit` is
   nobody's until tomorrow. Keep the mapping here, not in JS. */
.bot-lamp {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--color-base-300);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-base-300) 30%, transparent);
}
.bot-lamp[data-lamp="armed"],
.bot-lamp[data-lamp="trading"] {
  background: var(--color-success);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-success) 22%, transparent);
}
.bot-lamp[data-lamp="setup"],
.bot-lamp[data-lamp="held"],
.bot-lamp[data-lamp="limit"] {
  background: var(--color-warning);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-warning) 22%, transparent);
}
.bot-lamp[data-lamp="off"] {
  background: var(--color-base-content);
  opacity: 0.35;
  box-shadow: none;
}

/* Only the live-trading state pulses. A bot that is merely armed does not
   need to demand attention; one holding real risk does. */
.bot-lamp[data-lamp="trading"] { animation: bot-lamp-pulse 2.4s ease-in-out infinite; }
@keyframes bot-lamp-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-success) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-success) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-lamp[data-lamp="trading"] { animation: none; }
}

#bot-session-clock .session-countdown {
  font-size: 1.75rem;
}
#bot-session-clock[data-clock="active"] .session-countdown {
  color: var(--color-success);
}
#bot-session-clock[data-clock="before"] .session-countdown,
#bot-session-clock[data-clock="after"] .session-countdown {
  color: var(--color-info);
}

/* Zone labels. The numbers encode the reading order — is it on, where does it
   trade, what does it cost — which is the whole argument of this page, so they
   are information rather than decoration. Set quietly: they orient, they do
   not compete with the state headline. */
.zone-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}

/* Four figures, each with one short note. A grid of tiles gave every row a
   heading and a paragraph; this is a table that reads in one pass. */
.risk-rows {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(5rem, auto) 1fr;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.35rem;
}
.risk-rows dt {
  font-size: 0.8rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.risk-rows dd { margin: 0; font-size: 0.8rem; }
.risk-rows dd.risk-amount {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.risk-rows dd.risk-note {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}
@media (max-width: 30rem) {
  .risk-rows { grid-template-columns: 1fr auto; }
  .risk-rows dd.risk-note { grid-column: 1 / -1; }
}

/* One decision per line, and the verb is in the sentence rather than in a
   badge beside it — the feed is read, not scanned for status. */
.decision-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.35rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-base-200);
}
.decision-row .decision-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  flex: 0 0 3.2rem;
}

/* Strategy selection rows: details live in the info popover; the toggle is the
   control. On state uses the theme success green (toggle-success). */
.strategy-card dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.strategy-card dd { margin: 0 0 0.6rem; font-size: 0.85rem; line-height: 1.45; }

/* Info popovers open above the row (list sits low in the setup drawer) and
   flip / scroll when the viewport would otherwise clip them. */
.strategy-info-popover {
  inset: auto;
  margin: 0;
  max-height: min(28rem, calc(100dvh - 1.5rem));
  overflow-x: hidden;
  overflow-y: auto;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}