:root {
  color-scheme: light;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #111111;
  --body: #2a2a2a;
  --secondary: #555555;
  --muted: #6b6b6b;
  --faint: #999999;
  --ghost: #bbbbbb;
  --rule: #d4d4d4;
  --rule-light: #e8e8e8;
  --soft: #f2f2f2;
  font-family: "Funnel Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin-top: 0; }

::selection { background: rgba(17, 17, 17, 0.08); }

.site-header {
  height: 64px;
  border-bottom: 1px solid var(--rule-light);
  background: var(--paper);
  /* Auto-hide: sticks to the top, slides away on scroll-down, and the JS in
     app.js brings it back the instant you scroll up (or reach the top). */
  position: sticky;
  top: 0;
  z-index: 40;
  transition: transform 240ms ease;
}
.site-header.is-hidden { transform: translateY(-100%); }

.header-inner {
  width: min(1240px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.wordmark {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

nav { display: flex; gap: 28px; }

.nav-link {
  position: relative;
  padding: 22px 0 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease;
}

.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--ink);
}

.demo-label {
  justify-self: end;
  color: var(--faint);
  font-size: 12px;
}

main {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 0 80px;
}

.market-header {
  padding-bottom: 10px;
}

.market-switcher {
  display: flex;
  gap: 26px;
  margin-bottom: 34px;
}

.market-pill {
  position: relative;
  border: 0;
  padding: 0 0 9px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease;
}

.market-pill:hover { color: var(--ink); }
.market-pill.is-active { color: var(--ink); }
.market-pill.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--ink);
}

.market-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

h1 {
  margin-bottom: 10px;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.market-meta {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.market-meta strong { color: var(--body); font-weight: 500; }

.market-readout {
  display: flex;
  gap: 44px;
  text-align: right;
}
.market-readout span,
.market-readout strong { display: block; }
.market-readout span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}
.market-readout strong {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.product-tabs {
  width: min(468px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 22px 0 4px;
}

.product-tab {
  min-width: 0;
  min-height: 62px;
  border: 1px solid var(--rule);
  padding: 12px 15px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.product-tab:hover { border-color: var(--ink); }

.product-tab strong,
.product-tab span { display: block; }

.product-tab strong {
  margin-bottom: 3px;
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
}

.product-tab span {
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}

.product-tab.is-active {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--secondary);
}

.product-tab.is-active strong { color: var(--ink); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
}

.chart-panel {
  min-width: 0;
  padding: 32px 40px 36px 0;
}

.chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.chart-heading h2, .ticket h2 {
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.chart-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.learn-link,
.text-link {
  color: var(--secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ghost);
  text-underline-offset: 4px;
  transition: color 160ms ease;
}

/* A button that reads as a link: strip native chrome so #positions-empty-action
   matches the anchor .text-links around it. */
button.text-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}
.learn-link:hover,
.text-link:hover { color: var(--ink); }

/* Rules links promoted to outlined pill buttons — same border language as the range /
   amount chips, so "read the rules" reads as a real affordance instead of fine print.
   Added ALONGSIDE .text-link (kept for its layout margins); defined after it so the
   pill's no-underline wins the equal-specificity tie. */
.rules-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
/* Trailing arrow on every rules pill, so the affordance reads as "go there".
   Delivered via ::after so it also applies to #positions-empty-action, whose
   label is set through textContent (which never clears a pseudo-element). */
.rules-link::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5.83203%2014.167L14.1654%205.83366M6.66536%205.83366H14.1654V13.3337%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5.83203%2014.167L14.1654%205.83366M6.66536%205.83366H14.1654V13.3337%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.rules-link:hover { border-color: var(--ink); color: var(--ink); }

.chart-wrap {
  margin-top: 20px;
  border-bottom: 1px solid var(--rule-light);
}

.chart-wrap,
.payoff-chart,
.payoff-chart text,
.live-value,
.market-switcher,
.product-tabs,
button {
  -webkit-user-select: none;
  user-select: none;
}

.payoff-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid { stroke: var(--rule-light); stroke-width: 1; }
.chart-grid-vertical { stroke: #f1f1f1; }
.chart-axis-label, .chart-y-label {
  fill: var(--secondary);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.chart-y-label { text-anchor: end; }

.outcome-line {
  stroke: var(--faint);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.outcome-point {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 3;
}

.chart-handle { cursor: ew-resize; outline: none; touch-action: none; }
.chart-handle .handle-guide {
  stroke: var(--ghost);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.chart-handle circle:not(.handle-hit):not(.handle-dot) {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2;
  transition: r 120ms ease;
}
.chart-handle.is-peak circle:not(.handle-hit):not(.handle-dot) { fill: var(--ink); stroke: var(--paper); stroke-width: 3; }
.chart-handle:hover circle:not(.handle-hit):not(.handle-dot),
.chart-handle:focus-visible circle:not(.handle-hit):not(.handle-dot) { r: 12; }
.chart-handle .handle-value {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.live-value { padding-top: 24px; }
.simulator-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.simulator-copy span { color: var(--muted); font-size: 12px; }
.simulator-copy output {
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.live-value-label {
  display: block;
  margin-bottom: 4px;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 500;
}

/* Range controls — width presets under the chart, numeric steppers in the ticket.
   Monochrome: pressed preset inverts to ink; nothing encodes meaning by hue. */
.chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.preset-group { display: inline-flex; align-items: center; gap: 10px; }
.preset-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.preset-chips { display: inline-flex; gap: 8px; }
.preset-chip {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 15px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.preset-chip:hover { border-color: var(--ink); color: var(--ink); }
.preset-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chart-chips { display: inline-flex; flex-wrap: wrap; gap: 8px 16px; }
.chart-chip {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Reset-to-fit: an interactive chip shown only while the valuation axis is panned
   off its auto-frame. Pill mirrors the odds-toggle so the controls read as one set. */
.chart-chip-action {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chart-chip-action:hover { border-color: var(--ink); color: var(--ink); }
.chart-chip-action[hidden] { display: none; }

/* Ola A — "Market odds" toggle (mirror of preset-chip; pressed inverts to ink). */
.chart-controls-left { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.odds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.odds-toggle:hover { border-color: var(--ink); color: var(--ink); }
.odds-toggle .odds-dot { width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: 0.5; }
.odds-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.odds-toggle[aria-pressed="true"] .odds-dot { opacity: 0.85; }
.odds-toggle[hidden] { display: none; }

/* Ola A — density overlay marks. Monochrome: everything is ink at graded opacity;
   the distribution reads by weight, never by hue. */
.density-fill { fill: rgba(17, 17, 17, 0.10); }
.density-line { fill: none; stroke: rgba(17, 17, 17, 0.55); stroke-width: 1.5; }
.density-band { fill: rgba(17, 17, 17, 0.05); }
.density-median { stroke: rgba(17, 17, 17, 0.5); stroke-width: 1.5; stroke-dasharray: 3 3; }
.no-exit-rect { fill: rgba(17, 17, 17, 0.16); }
.no-exit-pct { fill: var(--secondary); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.no-exit-cap { fill: var(--muted); font-size: 10px; letter-spacing: 0.02em; }

/* Ola A5 — settled outcome marker on the chart canvas. */
.settled-mark-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 3; }
.settled-mark-diamond { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.settled-mark-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Ola B/C — demo, learning, lifecycle, and credibility surfaces. All stay
   monochrome: hierarchy, opacity, texture, and text carry the state. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.how-link { border:0; padding:0; color:var(--secondary); background:transparent; font-size:12px; cursor:pointer; text-decoration:underline; text-decoration-color:var(--ghost); text-underline-offset:3px; }
.status-freshness, .status-provenance { color:var(--faint); font-size:11px; white-space:nowrap; }
.status-provenance { color:var(--secondary); text-decoration:none; }
.status-provenance:hover { text-decoration:underline; text-underline-offset:3px; }
.narrative-band { color:var(--secondary); font-size:12px; }
.amount-presets { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.amount-presets button { min-height:30px; border:1px solid var(--rule); border-radius:999px; padding:4px 9px; color:var(--secondary); background:transparent; font-size:11px; cursor:pointer; }
.amount-presets button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--surface); }
.amount-presets button:hover, .amount-presets button:focus-visible { border-color:var(--ink); color:var(--ink); }
.amount-presets button[aria-pressed="true"]:hover, .amount-presets button[aria-pressed="true"]:focus-visible { color:var(--surface); }
.amount-presets button.is-arming { border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 2px rgba(17,17,17,.15); font-weight:600; }
.shares-mirror { min-height:16px; margin:7px 0 0; color:var(--faint); font-size:11px; font-variant-numeric:tabular-nums; }
.demo-escape { display:inline-block; margin-top:9px; color:var(--ink); font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.demo-banner { position:fixed; right:18px; bottom:18px; z-index:20; display:flex; flex-wrap:wrap; gap:7px; max-width:330px; padding:10px 12px; border:1px solid var(--ink); background:var(--surface); box-shadow:0 12px 28px rgba(17,17,17,.12); color:var(--secondary); font-size:12px; }
.demo-banner strong { color:var(--ink); font-weight:600; }
.beta-ack { display:flex; align-items:flex-start; gap:9px; margin-top:18px; padding:10px; border:1px solid var(--rule-light); color:var(--secondary); font-size:12px; line-height:1.45; cursor:pointer; }
.beta-ack input { flex:0 0 auto; margin:2px 0 0; }
.tx-lifecycle { margin-top:18px; padding:14px; border:1px solid var(--rule-light); background:var(--paper); }
.tx-steps { display:flex; gap:8px; margin:0 0 12px; padding:0; list-style:none; overflow-x:auto; }
.tx-steps li { min-width:max-content; color:var(--faint); font-size:11px; }
.tx-steps li::before { content:"○ "; }
.tx-steps li[data-state="active"] { color:var(--ink); font-weight:600; }
.tx-steps li[data-state="active"]::before { content:"◌ "; }
.tx-steps li[data-state="complete"] { color:var(--secondary); }
.tx-steps li[data-state="complete"]::before { content:"✓ "; }
.tx-status { margin:0; color:var(--ink); font-size:13px; line-height:1.45; }
.tx-status.is-error { color:var(--secondary); }
.tx-hash { margin:8px 0 0; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.tx-hash a { color:var(--secondary); }
.tx-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tx-actions button { flex:0 0 auto; border:1px solid var(--rule); border-radius:10px; padding:9px 14px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; transition:background 160ms ease, border-color 160ms ease, color 160ms ease; }
.tx-actions button:hover { border-color:var(--ink); }
.tx-actions button.is-primary { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.tx-actions button.is-primary:hover { background:var(--body); border-color:var(--body); }
.onboarding-dialog { width:min(490px,calc(100% - 32px)); }
.onboarding-kicker { margin:0 0 8px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.onboarding-example { margin:16px 0 0; padding:12px; border-left:2px solid var(--ink); background:var(--soft); color:var(--secondary); font-size:13px; line-height:1.5; }
.onboarding-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:26px; }
.onboarding-dots { display:flex; gap:5px; }
.onboarding-dots span { width:6px; height:6px; border:1px solid var(--muted); border-radius:50%; }
.onboarding-dots span.is-active { background:var(--ink); border-color:var(--ink); }
.onboarding-actions { display:flex; gap:8px; }
.dialog-back { border:0; padding:9px 10px; color:var(--secondary); background:transparent; cursor:pointer; }
.coach-mark { position:absolute; z-index:8; width:min(290px,calc(100vw - 48px)); display:grid; gap:7px; padding:13px; border:1px solid var(--ink); background:var(--surface); box-shadow:0 12px 28px rgba(17,17,17,.12); color:var(--secondary); font-size:12px; line-height:1.45; }
.coach-mark strong { color:var(--ink); font-size:13px; }
.coach-mark button { justify-self:start; border:0; padding:0; color:var(--ink); background:transparent; font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
/* Ola D — friendlier solid-surface system. Persistent product cards separate by
   tonal layers and generous rounding, never perimeter outlines or card shadows. */
:root { --canvas: #f2f2f2; --surface-quiet: #f2f2f2; --surface-tint: #f7f7f7; --radius-card: 20px; --radius-control: 14px; }
body, html { background: var(--canvas); }
.site-header { border-bottom: 0; background: var(--canvas); }
.status-strip { margin: 0 24px; border: 0; border-radius: 14px; background: var(--surface-quiet); }
.status-strip-inner { min-height: 34px; }
.app-grid { gap: 20px; }
.panel { border: 0; border-radius: var(--radius-card); background: var(--surface); padding: 22px; }
.trading-panel { padding: 24px; }
.panel-title-row { border-bottom: 0; padding-bottom: 8px; }
.trading-panel .workspace { gap: 20px; }
.trading-panel .chart-panel { padding: 10px 8px 0 0; }
.trade-ticket { align-self: start; padding: 20px; border: 0; border-radius: var(--radius-card); background: var(--surface); }
.ticket-heading { margin-bottom: 16px; }
.ticket-heading h2 { margin-top: 3px; }
.ticket-step { display: block; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.ticket-gloss { max-width: 24ch; margin: 4px 0 0; color: var(--secondary); font-size: 12px; line-height: 1.4; }
.ticket-summary { padding-top: 0; border-top: 0; }
.amount-field { margin-top: 18px; }
.amount-field > span:first-child b { color: var(--ink); font-weight: 600; }
.amount-input-wrap { border: 0; border-radius: var(--radius-control); background: var(--surface-quiet); }
.amount-input-wrap:focus-within { outline: 2px solid rgba(17,17,17,.5); outline-offset: 2px; }
.quote-detail { margin: 14px 0; border-top: 0; }
.quote-detail > summary { padding: 9px 0; }
.test-result { margin-top: 12px; padding: 14px; border: 0; border-radius: var(--radius-control); background: var(--surface-quiet); }
.test-result > strong { font-size: 28px; }
.amount-presets { margin-top: 9px; }
.amount-presets button { min-height: 34px; border: 0; border-radius: 10px; background: var(--surface-quiet); }
.amount-presets button:hover, .amount-presets button:focus-visible { background: #e2e2e2; border-color: transparent; }
.amount-presets button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.funding-path { margin-top: 16px; padding: 15px; border: 0; border-radius: var(--radius-control); background: var(--surface-quiet); }
.funding-copy strong { display:block; margin-top:3px; color:var(--ink); font-size:14px; font-weight:600; }
.funding-copy p { margin:5px 0 0; color:var(--secondary); font-size:12px; line-height:1.4; }
.funding-path .primary-button { margin-top:14px; border:0; border-radius:12px; }
.funding-secondary { width:100%; margin-top:10px; border:0; border-radius:10px; padding:10px 12px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:500; cursor:pointer; }
.risk-note { margin-top:8px; font-size:11px; }
.shared-market-note { margin:12px 0 0; padding:0; color:var(--secondary); text-align:left; }
.shared-market-note summary { cursor:pointer; font-size:11px; list-style:none; }
.shared-market-note summary::-webkit-details-marker { display:none; }
.shared-market-note summary::after { content:"+"; margin-left:6px; color:var(--muted); }
.shared-market-note[open] summary::after { content:"−"; }
.shared-market-note p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.resolve-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:14px 18px; border-radius:16px; background:var(--surface-quiet); color:var(--secondary); font-size:12px; line-height:1.45; }
.resolve-strip strong { color:var(--ink); font-weight:600; }
.resolve-strip b { color:var(--ink); font-weight:500; }
.resolve-strip .text-link { margin-left:auto; }
.rail { gap:20px; }
.positions-panel { margin-top:20px; }
.positions-panel .positions-empty { border:0; border-radius:14px; background:var(--surface-quiet); padding:22px; }
.position-card { border:0; border-radius:16px; background:var(--surface-tint); }
.positions-panel .position-card { border-color:transparent; }
.position-status { border:0; background:var(--surface-quiet); }
.position-metrics { border-top:0; border-bottom:0; border-radius:12px; background:var(--surface-quiet); padding:14px; }
.position-card-footer button { border:0; border-radius:10px; background:var(--surface-quiet); }
.position-card-footer button:hover { background:var(--ink); color:var(--surface); }
.app-main .settlement { margin-top:20px; border:0; border-radius:var(--radius-card); background:var(--surface); padding:0 20px; }
.settlement summary { padding:20px 0; }
.settlement-body { border-top:0; }
.tx-lifecycle, .beta-ack { border:0; border-radius:14px; background:var(--surface-quiet); }
.demo-banner { border:0; border-radius:14px; background:var(--ink); color:var(--surface); }
.demo-banner strong { color:var(--surface); }
.coach-mark { border:0; border-radius:14px; }
/* Ola A5 — settled first-class summary. Promotes the verified value to the hero
   of the state and fills the vacuum under the chart with the settlement facts. */
.settled-summary[hidden] { display: none; }
.settled-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px;
}
.settled-eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.settled-hero {
  color: var(--ink);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.settled-facts {
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 2px 0 0;
  max-width: 46ch;
}

/* Steppers are inert on a settled/closed market — dim and un-clickable. */
.range-steppers.is-locked { opacity: 0.5; }
.range-steppers.is-locked .stepper-input,
.range-steppers.is-locked .stepper-btn { cursor: default; pointer-events: none; }

/* Settled: preserve the selected band as quiet context; controls are hidden by state. */
.payoff-chart.is-settled-frame #payout-line { opacity: 0.22; }
.payoff-chart.is-settled-frame #payout-area { opacity: 0.22; }
.payoff-chart.is-settled-frame .chart-handle { display: none; }
/* Nothing is editable once trading is closed — drop the band's drag affordance. */
.market-trading-unavailable .range-band-hit { display: none; }

.range-steppers {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-light);
}
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.stepper-cap { color: var(--muted); font-size: 12px; font-weight: 500; }
.stepper-control {
  display: flex;
  align-items: center;
  width: 152px;
  height: 38px;
  border: 1px solid var(--rule);
  background: var(--surface);
  transition: border-color 160ms ease;
}
.stepper-control:focus-within { border-color: var(--ink); }
.stepper-btn {
  width: 34px;
  height: 100%;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--secondary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease;
}
.stepper-btn:hover { color: var(--ink); }
.stepper-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Market narrative — the single home for implied value + exit chance. */
.market-narrative {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.market-narrative output,
.market-narrative strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.narrative-sep { margin: 0 8px; color: var(--ghost); }
.narrative-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Dominant result — payout headline, max-return multiple, P/L by glyph (never hue). */
.result-multiple {
  margin-top: 4px;
  color: var(--secondary) !important;
  font-size: 13px !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.result-line { display: block; }
/* .test-result span / .position-metrics span force block; keep the glyph inline. */
.pl-glyph { color: inherit; font-size: 0.9em; margin-right: 3px; }
.test-result .pl-glyph,
.position-metrics .pl-glyph { display: inline; }

.breakeven-copy {
  margin: 0 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--rule-light);
  border-radius: 999px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.position-metrics .position-pl { color: var(--ink); }

.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;
}

/* P4: break-even overlay + exit-value scrub — display-only, strictly monochrome
   (rgba(17,17,17,·) / ink-secondary-muted). No hue encodes meaning anywhere. */
#zero-pl-line { stroke: rgba(17, 17, 17, 0.55); stroke-width: 1.5; stroke-dasharray: 6 3; }
.be-marker line { stroke: rgba(17, 17, 17, 0.5); stroke-width: 1; stroke-dasharray: 4 3; }
.be-marker .be-label { fill: var(--secondary); text-anchor: middle; font-weight: 600; font-size: 13px; }
#be-caption { fill: var(--secondary); font-size: 12px; font-weight: 500; }
#scrub-marker { pointer-events: none; }
#scrub-line { stroke: rgba(17, 17, 17, 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
#scrub-knob { fill: var(--ink); cursor: ew-resize; }
#scrub-label { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
#scrub-val { fill: var(--ink); }
#scrub-pl { fill: var(--secondary); }
#scrub-label.is-hint { font-weight: 400; font-size: 12px; }
#scrub-label.is-hint #scrub-val { fill: var(--muted); font-weight: 400; }
/* The hit band is transparent but grabbable; it sits in the mid-plot gap between
   the handle circles (which are later in the DOM, so they keep priority). */
#scrub-hit { fill: transparent; pointer-events: all; cursor: ew-resize; touch-action: none; }

/* ==========================================================================
   SIMPLE RANGE BAND GRAPH — valuation on Y, current browser session on X.
   Pure presentation over the existing Low / Peak / High triangular engine.
   ========================================================================= */
/* The viewBox tracks the rendered width, so the SVG draws 1:1 at every size. */
.range-band-chart { width: 100%; height: auto; }
.range-band-chart .handle-hit { r: 24; }
.range-band-chart.is-compact .handle-hit { r: 22; }
.range-band-chart .chart-grid { stroke: var(--rule-light); stroke-width: 1; }
.range-band-chart .range-value-grid { stroke: rgba(17,17,17,.09); }
.range-band-chart .range-value-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.chart-session-label { fill: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.range-band-chart .payout-grid { stroke: rgba(17,17,17,.14); }
/* The payout axis ticks name what the shape means: 100% at the apex, $0 at each
   bound. Without them the triangle is decoration; with them it is a payoff diagram. */
.range-band-chart .payout-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}
.range-band-chart .chart-x-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* The payout triangle. Filled softly so the sloping edges carry the reading. */
.range-band {
  fill: rgba(17, 17, 17, 0.10);
  stroke: none;
  pointer-events: none;
}
.range-edge { display: none; }
/* Only the two slopes are stroked — never the baseline, which IS $0 and would
   otherwise close the shape into a region that looks uniformly paying. */
.range-peak-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}
.reference-area { fill: url(#reference-area-fill); pointer-events: none; }
/* Lighter and thinner than the user's own peak line: one is the market's estimate,
   the other is the level you chose. They default to the same value, so they must
   not be the same weight. */
.reference-history {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
/* One sample so far: the flat reading is drawn lighter so it never masquerades
   as a traded history. */
.reference-history.is-flat { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.reference-current { fill: var(--secondary); stroke: var(--surface); stroke-width: 2.5; pointer-events: none; }
.reference-current-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.range-band-hit { fill: transparent; pointer-events: all; cursor: grab; touch-action: none; }
.range-band-hit:active { cursor: grabbing; }
.range-band-chart.is-band-dragging .range-band { stroke: rgba(17,17,17,.45); }
.range-band-chart .chart-handle { cursor: ew-resize; touch-action: none; }
.range-band-chart .handle-hit { fill: transparent; stroke: none; pointer-events: all; }
.range-band-chart .handle-dot {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2;
  transition: filter 120ms ease;
}
.range-band-chart .chart-handle.is-peak .handle-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.range-band-chart .chart-handle:hover .handle-dot,
.range-band-chart .chart-handle:focus-visible .handle-dot { filter: drop-shadow(0 2px 4px rgba(17,17,17,.28)); }
.range-band-chart .chart-handle:focus-visible { outline: none; }
/* G12-a: high-contrast keyboard focus ring drawn on the dot itself, so the SVG
   handle shows a visible focus state without relying on a UA outline. */
.range-band-chart .chart-handle:focus-visible .handle-dot {
  stroke: var(--ink);
  stroke-width: 4;
  paint-order: stroke;
  filter: drop-shadow(0 0 0 3px var(--surface)) drop-shadow(0 2px 4px rgba(17,17,17,.28));
}
.range-band-chart .chart-handle:focus-visible .handle-dot { stroke-width: 3; }
/* The low/high bounds already draw their own edges, so their handle guides would
   double up. Only the peak keeps a guide, and it is the solid emphasis line. */
.range-band-chart .handle-guide { stroke: none; }
.range-band-chart .chart-handle.is-peak .handle-guide { stroke: none; }
.range-band-chart .handle-kind {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
}
.range-band-chart .handle-value {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.range-band-chart #scrub-line { stroke: rgba(17,17,17,.5); stroke-width: 1; stroke-dasharray: 2 4; }
.range-band-chart #scrub-knob { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.range-band-chart #scrub-hit { display: none; }
.scrub-tooltip rect { fill: var(--ink); }
.scrub-tooltip text { fill: var(--surface); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.scrub-tooltip #scrub-pl { fill: rgba(255,255,255,.74); font-weight: 500; }
/* Resting state: a muted inline hint, never a floating black card over the band. */
#scrub-marker.is-resting #scrub-line { stroke: rgba(17,17,17,.26); }
#scrub-marker.is-resting .scrub-tooltip rect { fill: none; }
#scrub-marker.is-resting .scrub-tooltip text { fill: var(--muted); font-size: 11px; font-weight: 500; }
.range-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.range-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.range-chart-legend i { display: inline-block; width: 18px; }
.legend-range { height: 8px; border-radius: 3px; background: rgba(17,17,17,.13); border-top: 1px solid var(--ink); }
.legend-reference { height: 0; border-top: 2px solid var(--secondary); }
.range-band-chart #zero-pl-line,
.range-band-chart #be-caption,
.range-band-chart #outcome-line,
.range-band-chart #outcome-point { display: none !important; }

/* Compact canvas: same 1:1 scale, slightly tighter type so the right gutter fits. */
.range-band-chart.is-compact .range-value-label { font-size: 11px; }
.range-band-chart.is-compact .handle-kind { font-size: 8px; }
.range-band-chart.is-compact .handle-value { font-size: 12px; }
.range-band-chart.is-compact .chart-session-label { font-size: 9px; }

@media (max-width: 720px) {
  .range-chart-legend { gap: 7px 12px; font-size: 10px; }
}

.range-input {
  width: 100%;
  height: 18px;
  margin: 16px 0 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.range-input::-webkit-slider-runnable-track { height: 2px; background: var(--rule-light); }
.range-input::-moz-range-track { height: 2px; background: var(--rule-light); }
.range-input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -6.5px;
  appearance: none;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.18);
}
.range-input::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
}

.coverage-field {
  margin-top: 22px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--rule-light);
}

.coverage-field > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.coverage-field label {
  color: var(--muted);
  font-size: 12px;
}

.coverage-field output {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticket {
  min-width: 0;
}

.ticket-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.ticket-heading h2 { margin-bottom: 0; font-size: 22px; }
.live-price { text-align: right; }
.live-price small {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.live-price i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: live-dot 2.4s ease-in-out infinite;
}
@keyframes live-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.live-price strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ticket-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule-light);
}
.ticket-summary div { display: flex; justify-content: space-between; gap: 16px; }
.ticket-summary span, .ticket-summary strong { display: block; }
.ticket-summary span { color: var(--muted); font-size: 12px; }
.ticket-summary strong { font-size: 13px; font-weight: 500; line-height: 1.35; text-align: right; }

.amount-field {
  display: block;
  margin-top: 24px;
}
.amount-field > span:first-child { color: var(--muted); font-size: 12px; }
.amount-input-wrap {
  height: 56px;
  margin-top: 9px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 20px;
  font-weight: 500;
  transition: border-color 160ms ease;
}
.amount-input-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.amount-input-wrap input::-webkit-inner-spin-button,
.amount-input-wrap input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.amount-input-wrap > span:last-child { color: var(--muted); font-size: 12px; font-weight: 500; }
.amount-input-wrap:focus-within { border-color: var(--ink); }

.quote-lines {
  margin: 24px 0;
  display: grid;
  gap: 13px;
}
.quote-lines div { display: flex; justify-content: space-between; gap: 20px; }
.quote-lines dt, .quote-lines dd { font-size: 13px; }
.quote-lines dt { color: var(--muted); }
.quote-lines dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* "You pay" doubles as the max-loss anchor; the note names it inline. */
.amount-note { font-weight: 400; }
.amount-note::before { content: "· "; }

/* Secondary trade math, collapsed under the cost anchor and the result. */
.quote-detail { margin: 20px 0; border-top: 1px solid var(--rule-light); }
.quote-detail > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
}
.quote-detail > summary::-webkit-details-marker { display: none; }
.quote-detail > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.quote-detail[open] > summary::after { transform: rotate(-135deg); }
.quote-detail .quote-lines { margin: 12px 0 4px; }

.test-result {
  padding: 16px 0;
  border-top: 1px solid var(--rule-light);
}
.test-result span, .test-result > strong, .test-result small { display: block; }
.test-result span { color: var(--muted); font-size: 12px; }
.test-result span strong { color: var(--body); font-weight: 500; }
.test-result > strong {
  margin-top: 7px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.test-result small { margin-top: 6px; color: var(--secondary); font-size: 12px; }
.test-result small.is-loss { color: var(--muted); }

.primary-button {
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 15px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.primary-button:hover { background: var(--body); border-color: var(--body); }
.primary-button:active { transform: scale(0.995); }
.primary-button:disabled {
  background: var(--surface-quiet);
  border-color: var(--rule-light);
  color: var(--muted);
  cursor: not-allowed;
}

.risk-note, .shared-market-note, .prototype-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
.risk-note { color: var(--secondary); }
.shared-market-note { margin-top: 8px; color: var(--muted); }
.prototype-note { margin-top: 5px; color: var(--faint); }

.market-activity {
  padding: 38px 0;
  border-top: 1px solid var(--rule-light);
}

.activity-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.activity-heading h2 {
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.activity-heading p,
.activity-heading > span {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.activity-tally {
  margin: 0 0 10px;
  color: var(--secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.activity-tally[hidden] { display: none; }

.activity-list {
  border-top: 1px solid var(--rule-light);
}

.activity-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 90px 64px 38px;
  gap: 14px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--rule-light);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.activity-row strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-row > span:not(.activity-side),
.activity-row time {
  color: var(--secondary);
  text-align: right;
}

.activity-row time { color: var(--faint); }

.activity-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.activity-side.buy { background: var(--ink); color: var(--paper); }
.activity-side.sell { border: 1px solid var(--rule); color: var(--secondary); }

.activity-row.is-reset {
  grid-template-columns: minmax(0, 1fr) 38px;
  color: var(--faint);
  font-size: 12px;
}
.activity-row.is-reset span { text-align: left; color: var(--faint); }

.portfolio {
  padding: 38px 0;
  border-top: 1px solid var(--rule-light);
}

.portfolio-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.portfolio-heading h2 {
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.portfolio-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.portfolio-balance { text-align: right; }
.portfolio-balance span,
.portfolio-balance small { display: block; color: var(--muted); font-size: 11px; }
.portfolio-balance strong {
  display: block;
  margin: 4px 0;
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.portfolio-balance small.is-positive { color: var(--body); }
.portfolio-balance small.is-negative { color: var(--body); }

.positions-empty {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.positions-list { display: grid; gap: 12px; }

.position-card {
  padding: 22px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.position-card-heading,
.position-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.position-card-heading h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.position-card-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.position-status {
  padding: 4px 11px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.position-status.closed { border-color: var(--rule); color: var(--muted); }

/* G1: market-drift-since-entry context line. Neutral secondary text — the glyph
   carries direction without color so it never reads as a P/L gain/loss badge. */
.position-drift {
  margin: 12px 0 0;
  color: var(--secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.position-drift .drift-glyph { color: var(--ink); font-size: 10px; }

.position-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}

.position-metrics span,
.position-metrics strong { display: block; }
.position-metrics span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.position-metrics strong { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.position-metrics .profit { color: var(--ink); }
.position-metrics .loss { color: var(--secondary); }

.position-card-footer { align-items: center; }
.position-card-footer small { color: var(--muted); font-size: 11px; }
.position-card-footer button {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.position-card-footer button:hover { background: var(--ink); color: var(--paper); }

.settlement {
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}
.settlement summary {
  padding: 22px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}
.settlement summary::-webkit-details-marker { display: none; }
.settlement summary span { font-size: 14px; font-weight: 500; }
.settlement summary small { color: var(--muted); font-size: 12px; }
.settlement summary::after { content: "+"; color: var(--muted); font-size: 20px; }
.settlement[open] summary::after { content: "\2212"; }
.settlement-body { padding: 0 0 26px; border-top: 1px solid var(--rule-light); }
.settlement-body > p { max-width: 680px; margin: 22px 0; color: var(--body); font-size: 13px; line-height: 1.55; }
.settlement-terms { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.settlement-terms dt { margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.settlement-terms dd { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.55; }
.settlement-details { margin-top: 4px; }
.settlement .settlement-details > summary::after { content: none; }
.settlement-steps {
  margin: 4px 0 8px; padding-left: 18px;
  color: var(--secondary); font-size: 12px; line-height: 1.55;
}
.settlement-steps li { margin: 2px 0; }

.settlement-body .text-link {
  display: inline-block;
  margin-top: 24px;
}

.docs-main {
  width: min(900px, calc(100% - 48px));
  padding-top: 56px;
}

.docs-intro {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule-light);
}

.docs-intro h1 {
  max-width: 720px;
  margin-bottom: 16px;
}

.docs-intro p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

.docs-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 54px;
  padding-top: 36px;
}

.docs-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 13px;
}

.docs-toc a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  transition: color 160ms ease;
}

.docs-toc a:hover { color: var(--ink); }

.docs-toc-label {
  margin-top: 10px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-toc-label:first-child { margin-top: 0; }

.docs-content { min-width: 0; }

.docs-section {
  padding: 0 0 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule-light);
  scroll-margin-top: 30px;
}

.docs-section:last-child { margin-bottom: 0; }

.docs-section h2 {
  margin-bottom: 13px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.docs-section h3 {
  margin: 28px 0 9px;
  font-size: 15px;
  font-weight: 500;
}

.docs-section p,
.docs-section li,
.docs-section dd {
  color: var(--body);
  font-size: 14px;
  line-height: 1.65;
}

.docs-section ul,
.docs-section ol { padding-left: 20px; }

.docs-section li + li { margin-top: 7px; }

.plain-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 26px;
}

.plain-options > div,
.plain-example,
.important-note {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.plain-options strong,
.plain-example > strong,
.important-note strong {
  font-size: 13px;
  font-weight: 500;
}

.plain-options p,
.plain-example p,
.important-note p { margin: 6px 0 0; }

.plain-steps {
  margin: 14px 0 24px;
  padding-left: 22px;
}

.important-note {
  margin: 22px 0 0;
  border-color: var(--rule);
  background: var(--soft);
}

.plain-example { margin: 18px 0; }

.plain-example dl {
  margin: 12px 0 0;
  border-top: 1px solid var(--rule-light);
}

.plain-example dl div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-light);
}

.plain-example dt,
.plain-example dd { font-size: 13px; }

.plain-example dt { color: var(--muted); }
.plain-example dd { margin: 0; color: var(--ink); font-weight: 500; }

.math-details {
  margin-top: 20px;
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}

.math-details summary {
  padding: 14px 0;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.math-details .formula { margin-top: 0; }

.settlement-table {
  margin: 16px 0 26px;
  border-top: 1px solid var(--rule-light);
}

.settlement-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-light);
}

.settlement-row > * {
  color: var(--body);
  font-size: 13px;
  line-height: 1.5;
}

.settlement-row > strong { color: var(--ink); font-weight: 500; }

.settlement-head > * {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.formula {
  margin: 18px 0;
  padding: 17px 19px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.term-list {
  margin: 18px 0 0;
  border-top: 1px solid var(--rule-light);
}

.term-list div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-light);
}

.term-list dt {
  font-size: 13px;
  font-weight: 500;
}

.term-list dd { margin: 0; }

dialog {
  width: min(440px, calc(100% - 32px));
  border: 1px solid var(--rule);
  padding: 32px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(17, 17, 17, 0.14);
}
dialog::backdrop { background: rgba(17, 17, 17, 0.35); }
.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease;
}
.dialog-close:hover { color: var(--ink); }
dialog h2 { margin-bottom: 10px; padding-right: 42px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
dialog > p { color: var(--body); font-size: 13px; line-height: 1.55; }
.dialog-grid { margin: 24px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule-light); }
.dialog-grid div { padding: 16px 0; }
.dialog-grid span, .dialog-grid strong { display: block; }
.dialog-grid span { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.dialog-grid strong { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dialog-note { margin-bottom: 0; color: var(--secondary); }
.dialog-submit { margin-top: 22px; }

button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .chart-panel { padding-right: 0; }
}

@media (max-width: 620px) {
  .header-inner, main { width: min(100% - 30px, 1240px); }
  main { overflow-x: hidden; }
  .header-inner { grid-template-columns: 1fr auto; }
  .header-inner > nav { display: flex; gap: 18px; }
  .demo-label { display: none; }
  .market-switcher { gap: 22px; overflow-x: auto; }
  .market-title-row { display: block; }
  .market-meta { max-width: 240px; line-height: 1.4; }
  .market-readout { margin-top: 20px; text-align: left; }
  .chart-heading { display: block; }
  .learn-link { display: inline-block; margin-top: 12px; }
  .payoff-chart { min-width: 0; }
  .chart-wrap { overflow-x: visible; }
  .settlement summary { grid-template-columns: 1fr auto; }
  .settlement summary small { display: none; }
  .settlement-terms { grid-template-columns: 1fr; gap: 18px; }
  .product-tabs { width: 100%; grid-template-columns: 1fr 1fr; }
  .product-tab { min-height: 68px; }
  .portfolio-heading { display: block; }
  .portfolio-balance { margin-top: 18px; text-align: left; }
  .position-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .position-card-footer { align-items: flex-end; }
  .activity-row {
    grid-template-columns: 52px minmax(0, 1fr) 70px 32px;
    gap: 8px;
  }
  .activity-row.is-reset { grid-template-columns: minmax(0, 1fr) 32px; }
  .activity-row > span:nth-of-type(3) { display: none; }
  .activity-heading > span { padding-top: 3px; }
  .docs-main { width: min(100% - 30px, 900px); padding-top: 36px; }
  .docs-layout { grid-template-columns: 1fr; gap: 28px; }
  .docs-toc {
    position: static;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule-light);
  }
  .docs-toc-label { grid-column: 1 / -1; }
  .term-list div { grid-template-columns: 1fr; gap: 5px; }
  .plain-options { grid-template-columns: 1fr; }
  .settlement-head { display: none; }
  .settlement-row { grid-template-columns: 1fr; gap: 5px; }
}

/* ============ App shell (dashboard) ============ */

.header-inner.is-app { grid-template-columns: auto 1fr auto; gap: 34px; }
.header-inner.is-app nav { justify-self: start; }

.header-status {
  display: flex;
  align-items: center;
  gap: 18px;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 500;
}
.live-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: live-dot 2.4s ease-in-out infinite;
}

.balance-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  height: 34px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
}
.balance-chip span { color: var(--muted); font-size: 11px; }
.balance-chip strong {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.status-strip {
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  background: var(--surface);
}
.status-strip-inner {
  width: min(1340px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 38px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.status-strip-inner strong { color: var(--ink); font-weight: 500; }
.status-volume { display: inline-flex; align-items: center; gap: 8px; }
.status-bar {
  position: relative;
  width: 90px;
  height: 3px;
  border-radius: 999px;
  background: var(--rule-light);
  overflow: hidden;
}
.status-bar b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--ink);
  transition: width 600ms ease;
}
.status-right { margin-left: auto; }

.app-main {
  width: min(1340px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 64px;
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 380px);
  grid-template-areas:
    "market ticket"
    "resolve ticket"
    "evidence ticket";
  gap: 20px 24px;
  align-items: start;
}

.trading-panel { grid-area: market; min-width: 0; }
.trade-ticket { grid-area: ticket; min-width: 0; }
.resolve-strip { grid-area: resolve; }
.rail { grid-area: evidence; }

.panel {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  padding: 18px 20px;
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.panel-heading h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.panel-note { color: var(--muted); font-size: 11px; }

.rail {
  display: grid;
  gap: 16px;
}

/* trading panel */
.trading-panel { padding: 20px 24px 24px; }

.panel-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-light);
}
.panel-market h1 {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.panel-market-meta { color: var(--muted); font-size: 12px; }
.panel-market-meta strong { color: var(--body); font-weight: 500; }

.trading-panel .market-readout { display: flex; gap: 34px; text-align: right; }
.trading-panel .market-readout span { margin-bottom: 3px; font-size: 11px; }
.trading-panel .market-readout strong { font-size: 18px; }

.trading-panel .product-tabs {
  width: min(380px, 100%);
  padding: 14px 0 2px;
  gap: 8px;
}
.trading-panel .product-tab { min-height: 50px; padding: 9px 13px; }
.trading-panel .product-tab strong { font-size: 13px; margin-bottom: 1px; }
.trading-panel .product-tab span { font-size: 11px; }

.trading-panel .workspace { display: block; }
.trading-panel .chart-panel { padding: 14px 0 0; }
.trading-panel .chart-heading h2 { font-size: 14px; margin-bottom: 3px; }
.trading-panel .chart-heading p { font-size: 12px; }
.trading-panel .chart-wrap { margin-top: 8px; border-bottom: 0; }
.trading-panel .live-value { margin-top: 24px; padding-top: 0; border-top: 0; }
.trading-panel .live-value-label { font-size: 12px !important; }
.trading-panel .simulator-copy span { font-size: 11px; }
.trading-panel .simulator-copy output { font-size: 17px; }

.trade-ticket {
  padding: 20px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.trade-ticket .ticket-heading { margin-bottom: 8px; }
.trade-ticket .ticket-heading h2 { font-size: 18px; }
.trade-ticket .ticket-gloss { max-width:none; font-size:11px; line-height:1.35; }
.trade-ticket .amount-field { margin-top: 14px; }
.trade-ticket .amount-field > span:first-child { font-size: 11px; }
.trade-ticket .amount-input-wrap { height: 48px; margin-top: 6px; padding: 0 12px; }
.trade-ticket .amount-input-wrap input { font-size: 18px; }
.trade-ticket .quote-lines { margin: 14px 0; gap: 8px; }
.trade-ticket .quote-lines dt, .trade-ticket .quote-lines dd { font-size: 12px; }
.trade-ticket .test-result { padding: 0; }
.trade-ticket .test-result span { font-size: 11px; }
.trade-ticket .test-result > strong { font-size: 30px; margin-top: 5px; }
.trade-ticket .primary-button { margin-top: 10px; padding: 12px 16px; font-size: 13px; }
.trade-ticket .risk-note { font-size: 11px; margin-top: 8px; }

/* markets card */
.markets-list { display: grid; }
.market-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  gap: 6px 14px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  margin: 0 -10px 0 -12px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-light);
}
.market-row:last-child { border-bottom: 0; }
.market-row:hover { background: var(--soft); }
.market-row.is-active { border-left-color: var(--ink); background: var(--soft); }
.market-row .market-row-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.market-row .market-row-stats {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.market-row .market-row-stats strong { color: var(--ink); font-weight: 500; }
.market-row svg { display: block; width: 52px; height: 16px; }
.market-row polyline { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.75; }

/* stats card */
.stats-value { margin-bottom: 8px; }
.stats-value span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.stats-value strong {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#stats-spark { display: block; width: 100%; height: 48px; margin: 4px 0 10px; }
#stats-spark polyline { fill: none; stroke: var(--ink); stroke-width: 1.6; }
#stats-spark path { fill: rgba(17, 17, 17, 0.05); }
.stats-lines { margin: 0; display: grid; gap: 7px; }
.stats-lines div { display: flex; justify-content: space-between; gap: 14px; }
.stats-lines dt { color: var(--muted); font-size: 12px; }
.stats-lines dd { margin: 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* activity + positions inside panels */
.panel .activity-list { border-top: 0; }
.panel .activity-row {
  grid-template-columns: 42px minmax(0, 1fr) 58px 52px;
  gap: 8px;
  min-height: 38px;
  font-size: 11px;
}
.panel .activity-row > span:nth-of-type(2) { display: none; }
.panel .activity-row strong { font-size: 12px; }
.panel .activity-row time { font-size: 10px; }
.panel .activity-row.is-reset { grid-template-columns: minmax(0, 1fr) 58px; font-size: 11px; }
.panel .activity-side { font-size: 10px; padding: 2px 0; }

.positions-panel { margin-top: 16px; }
.positions-panel .positions-empty {
  border: 1px dashed var(--rule);
  background: transparent;
  padding: 22px;
  font-size: 12px;
}
.positions-panel .positions-list { gap: 10px; }
.positions-panel .position-card { padding: 16px 18px; border-color: var(--rule-light); }
#positions-count { color: var(--muted); font-weight: 500; }

.app-main .settlement { margin-top: 16px; border: 0; border-top: 1px solid var(--rule-light); }

/* Carries the capital-risk disclosure ("You can lose the full amount. No audit
   yet."). At --faint it measured 2.54:1 against the canvas — the least legible text
   on the page was the most consequential sentence on it. --secondary is 6.66:1. */
.app-footer {
  padding: 22px 0 0;
  color: var(--secondary);
  font-size: 12px;
}

@media (max-width: 1099px) {
  .app-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "market"
      "ticket"
      "resolve"
      "evidence";
  }
  .trade-ticket { width: min(100%, 560px); justify-self: center; }
}

@media (max-width: 720px) {
  .header-inner.is-app { grid-template-columns: auto 1fr; }
  .header-status { display:flex; grid-column:1 / -1; justify-content:flex-end; gap:10px; padding-bottom:8px; }
  .header-status .status-freshness, .header-status .status-provenance { display:none; }
  .site-header { height:auto; min-height:64px; }
  .header-inner.is-app { min-height:64px; height:auto; flex-wrap:wrap; }
  .status-strip-inner { width: calc(100% - 30px); gap: 14px; overflow-x: auto; white-space: nowrap; }
  .status-right { display: none; }
  .app-main { width: calc(100% - 30px); }
  .panel { padding: 14px; }
  .trading-panel { padding: 16px; }
  .panel-title-row { display: block; }
  .trading-panel .market-readout { margin-top: 12px; text-align: left; }
}

.trading-panel .market-switcher {
  gap: 18px;
  margin-bottom: 10px;
}
.trading-panel .market-pill { font-size: 13px; padding-bottom: 6px; }

/* Final cascade for Ola D solid-surface redesign. Kept last so legacy sheet
   rules cannot restore technical outlines or square cards. */
body, html { background: var(--canvas); }
.site-header { border-bottom: 0; background: var(--canvas); }
.status-strip { margin: 0 24px; border: 0; border-radius: 14px; background: var(--surface-quiet); }
.app-grid { gap: 20px; }
.panel { border: 0; border-radius: var(--radius-card); background: var(--surface); padding: 22px; }
.trading-panel { padding: 24px; }
.panel-title-row { border-bottom: 0; padding-bottom: 8px; }
.trading-panel .workspace { gap: 20px; }
.trading-panel .chart-panel { padding: 10px 0 0; }
.trade-ticket { align-self:start; margin-top:0; padding:20px; border:0; border-radius:var(--radius-card); background:var(--surface); }
.ticket-heading { margin-bottom:16px; }
.ticket-heading h2 { margin-top:3px; }
.ticket-step { display:block; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.ticket-gloss { max-width:24ch; margin:4px 0 0; color:var(--secondary); font-size:12px; line-height:1.4; }
.ticket-summary { padding-top:0; border-top:0; }
.amount-field { margin-top:18px; }
.amount-field > span:first-child b { color:var(--ink); font-weight:600; }
.amount-input-wrap { border:0; border-radius:var(--radius-control); background:var(--surface-quiet); }
.amount-input-wrap:focus-within { border-color:transparent; outline:2px solid rgba(17,17,17,.5); outline-offset:2px; }
.quote-detail { margin:14px 0; border-top:0; }
.quote-detail > summary { padding:9px 0; }
.test-result { margin-top:12px; padding:14px; border:0; border-radius:var(--radius-control); background:var(--surface-quiet); }
.test-result > strong { font-size:28px; }
.amount-presets { margin-top:9px; }
.amount-presets button { min-height:34px; border:0; border-radius:10px; background:var(--surface-quiet); }
.amount-presets button:hover, .amount-presets button:focus-visible { background:#e2e2e2; border-color:transparent; }
.amount-presets button[aria-pressed="true"] { background:var(--ink); color:var(--surface); }
.funding-path { margin-top:12px; padding:15px; border:0; border-radius:var(--radius-control); background:var(--surface-quiet); }
.funding-copy strong { display:block; margin-top:3px; color:var(--ink); font-size:14px; font-weight:600; }
.funding-copy p { margin:5px 0 0; color:var(--secondary); font-size:12px; line-height:1.4; }
.funding-path .primary-button { margin-top:14px; border:0; border-radius:12px; }
.funding-secondary { width:100%; margin-top:10px; border:0; border-radius:10px; padding:10px 12px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:500; cursor:pointer; }
.risk-note { margin-top:8px; font-size:11px; }
.shared-market-note { margin:12px 0 0; padding:0; color:var(--secondary); text-align:left; }
.shared-market-note summary { cursor:pointer; font-size:11px; list-style:none; }
.shared-market-note summary::-webkit-details-marker { display:none; }
.shared-market-note summary::after { content:"+"; margin-left:6px; color:var(--muted); }
.shared-market-note[open] summary::after { content:"−"; }
.shared-market-note p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.resolve-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:14px 18px; border-radius:16px; background:var(--surface-quiet); color:var(--secondary); font-size:12px; line-height:1.45; }
.resolve-strip strong { color:var(--ink); font-weight:600; }
.resolve-strip b { color:var(--ink); font-weight:500; }
.resolve-strip .text-link { margin-left:auto; }
.rail { gap:20px; }
.positions-panel { margin-top:20px; }
.positions-panel .positions-empty { border:0; border-radius:14px; background:var(--surface-quiet); padding:22px; }
.position-card { border:0; border-radius:16px; background:var(--surface-tint); }
.positions-panel .position-card { border-color:transparent; }
.position-status { border:0; background:var(--surface-quiet); }
.position-metrics { border-top:0; border-bottom:0; border-radius:12px; background:var(--surface-quiet); padding:14px; }
.position-card-footer button { border:0; border-radius:10px; background:var(--surface-quiet); }
.position-card-footer button:hover { background:var(--ink); color:var(--surface); }
.app-main .settlement { margin-top:20px; border:0; border-radius:var(--radius-card); background:var(--surface); padding:0 20px; }
.settlement summary { padding:20px 0; }
.settlement-body { border-top:0; }
.tx-lifecycle, .beta-ack { border:0; border-radius:14px; background:var(--surface-quiet); }
.demo-banner { border:0; border-radius:14px; background:var(--ink); color:var(--surface); }
.demo-banner strong { color:var(--surface); }
/* The ticket already states "You can lose the full amount. Unaudited capped-beta
   market." directly under the CTA, and this fixed card overlapped the end of that
   ticket. Drop the duplicate rather than cover the decision surface. */
.demo-banner { display: none !important; }
.coach-mark { border:0; border-radius:14px; }
@media (max-width:1099px) { .trade-ticket { position:static; padding:20px; margin-top:0; } }
@media (max-width:720px) { .status-strip { margin:0 15px; overflow:hidden; } .status-strip-inner { max-width:100%; } .trading-panel .chart-panel { padding-right:0; } .trade-ticket { width:100%; padding:16px; } .resolve-strip { padding:14px; } .resolve-strip .text-link { margin-left:0; } .coach-mark { max-width:calc(100% - 24px); } }

/* Ola E — state-aware first view. A final market should lead with a truthful
   next action, rather than with an inert trade composer. */
.market-action-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.72fr); gap:22px; align-items:center; margin:12px 0 4px; padding:20px; border-radius:16px; background:var(--surface-quiet); }
.market-action-eyebrow { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.market-action-panel h2 { margin:0; color:var(--ink); font-size:22px; font-weight:600; letter-spacing:-.025em; }
.market-action-panel p { max-width:62ch; margin:7px 0 0; color:var(--secondary); font-size:13px; line-height:1.48; }
.market-action-panel .market-action-fact { color:var(--muted); font-size:11px; }
.market-action-buttons { display:grid; gap:8px; align-self:stretch; align-content:center; }
.market-action-buttons .primary-button { margin:0; min-height:46px; border-radius:12px; }
.market-action-secondary { min-height:42px; border:0; border-radius:12px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; }
.market-action-secondary:hover { background:#e2e2e2; }
.market-action-panel.is-compact { padding:13px 16px; }
.market-action-panel.is-compact h2 { font-size:17px; }
.market-action-panel.is-compact .market-action-fact { display:none; }
.terminal-ticket-summary { padding:18px; border-radius:14px; background:var(--surface-quiet); }
.terminal-ticket-summary h2 { margin:5px 0 0; font-size:18px; }
.terminal-ticket-summary p { margin:7px 0 0; color:var(--secondary); font-size:12px; line-height:1.45; }
.terminal-ticket-summary button { width:100%; margin-top:14px; border:0; border-radius:10px; padding:11px 12px; background:var(--ink); color:var(--surface); font-size:12px; font-weight:600; cursor:pointer; }
.market-is-settled .trade-ticket { display:block; }
.market-is-settled .chart-panel { padding-right:0; }
.market-is-settled .chart-heading { max-width:760px; }
.market-is-settled .chart-wrap { max-width:900px; }
.market-trading-unavailable .chart-handle { display:none; }
.market-is-settled .live-chip i { animation:none; background:var(--muted); }
.primary-button:focus-visible, .market-action-secondary:focus-visible, .terminal-ticket-summary button:focus-visible { outline:2px solid var(--surface); outline-offset:2px; box-shadow:0 0 0 4px var(--ink); }
@media (max-width:720px) { .market-action-panel { grid-template-columns:1fr; gap:16px; margin-top:14px; padding:17px; } .market-action-panel h2 { font-size:20px; } .market-action-buttons { grid-template-columns:1fr; } .market-action-buttons .primary-button, .market-action-secondary { width:100%; } }

/* ============================================================================
   Redesign wave (P0+P1): easier deposit + digestible data.
   Refs: DROPS / Voltrex / Polymarket. UI-only; numeric engine untouched.
   Grayscale-only — the app encodes P/L by glyph (▲/▼), never by hue, so this
   wave adds NO profit/loss color. Emphasis comes from size, weight, placement.
   These rules live last and use .trading-panel prefixes to win over the dense
   overrides above without editing them.
   ========================================================================= */
:root {
  --num-hero: 38px;
  --num-display: 26px;
  --num-title: 20px;
  --surface-active: #e6e6e6;
}

/* WHAT — the paying range is the position's identity; promote it to display. */
.trade-ticket .ticket-summary { padding: 12px 0 0; gap: 8px; }
.trade-ticket .ticket-summary span { font-size: 11px; }
.trade-ticket .ticket-summary strong {
  font-size: var(--num-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* HOW MUCH — larger amount input for a primary decision + tap target. */
.trade-ticket .amount-field { margin-top: 12px; }
.trade-ticket .amount-input-wrap { height: 48px; margin-top: 6px; padding: 0 14px; }
.trade-ticket .amount-input-wrap input { font-size: var(--num-title); }

/* Fixed-$ amount tiles, each carrying the max payout that stake buys. */
.trade-ticket .amount-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.amount-presets button {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 58px;
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px;
  border: 1px solid var(--rule-light);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 140ms ease;
}
.amount-presets button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface);
  transition: background 140ms ease;
}
.amount-presets .preset-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.amount-presets .preset-payout {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.amount-presets button:hover:not(:disabled),
.amount-presets button:focus-visible { border-color: var(--ink); }
.amount-presets button:hover:not(:disabled)::before,
.amount-presets button:focus-visible::before { background: var(--surface); }
.trade-ticket .amount-presets button[aria-pressed="true"],
.trade-ticket .amount-presets button[aria-pressed="true"]:hover:not(:disabled),
.trade-ticket .amount-presets button[aria-pressed="true"]:focus-visible {
  border-color: var(--ink) !important;
  color: var(--surface) !important;
  box-shadow: inset 0 0 0 100px var(--ink);
}
.trade-ticket .amount-presets button[aria-pressed="true"]::before,
.trade-ticket .amount-presets button[aria-pressed="true"]:hover:not(:disabled)::before,
.trade-ticket .amount-presets button[aria-pressed="true"]:focus-visible::before {
  background: var(--ink);
}
.amount-presets button[aria-pressed="true"] .preset-amount,
.amount-presets button[aria-pressed="true"]:hover .preset-amount,
.amount-presets button[aria-pressed="true"]:focus-visible .preset-amount { color: var(--surface); }
.amount-presets button[aria-pressed="true"] .preset-payout,
.amount-presets button[aria-pressed="true"]:hover .preset-payout,
.amount-presets button[aria-pressed="true"]:focus-visible .preset-payout { color: rgba(255, 255, 255, 0.72); }
.amount-presets button:disabled { opacity: 0.4; cursor: not-allowed; }
.trade-ticket .shares-mirror { margin-top: 8px; }

/* OUTCOME — one consolidated decision card holding the payout headline, the
   break-even band, and the always-visible breakdown (no more collapsed <details>). */
.trade-summary-card {
  margin-top: 12px;
  padding: 13px;
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
}
.trade-summary-card .test-result { padding: 0; border-top: 0; margin: 0; }
.trade-summary-card #result-lead { font-size: 11px; color: var(--muted); }
.trade-ticket .trade-summary-card .test-result > strong {
  margin-top: 5px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
/* Max-return chip — neutral tinted badge (stays grayscale). */
.trade-summary-card .result-multiple {
  display: inline-block !important;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-active);
  color: var(--secondary) !important;
  font-size: 11px !important;
  font-weight: 600;
}
/* Mirrors .result-multiple exactly: the downside gets the same chip treatment as
   the upside, so neither side of the decision reads as the louder one. Needs the
   same specificity as the max-loss <dd> rules or it inherits their 30px display size. */
.trade-ticket .trade-summary-card .max-loss-line dd.loss-share {
  display: inline-block;
  width: auto;
  margin: 7px 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-active);
  color: var(--secondary);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.trade-ticket .trade-summary-card .test-result small {
  margin-top: 9px;
  font-size: 12px;
  color: var(--body);
}
.trade-summary-card .breakeven-copy {
  margin: 9px 0 0;
  padding: 8px 10px;
  background: var(--surface);
  border-color: var(--surface);
  font-size: 11px;
  line-height: 1.4;
}

/* Always-visible breakdown, banded like an order summary (DROPS/Voltrex). */
.trade-summary-card .quote-lines {
  margin: 13px -15px -15px;
  padding: 0;
  gap: 0;
  border-bottom-left-radius: var(--radius-control);
  border-bottom-right-radius: var(--radius-control);
  overflow: hidden;
}
.trade-summary-card .quote-lines div {
  padding: 9px 15px;
  gap: 16px;
  align-items: baseline;
}
.trade-summary-card .quote-lines div:nth-child(even) { background: var(--surface-tint); }
.trade-ticket .trade-summary-card .quote-lines dt { font-size: 12px; color: var(--muted); }
.trade-ticket .trade-summary-card .quote-lines dd { font-size: 13px; color: var(--body); text-align: right; }
/* The paired downside/upside anchors carry extra weight so the payout never
   reads without its max loss (both grayscale; no red). */
.trade-summary-card .ql-loss dt,
.trade-summary-card .ql-strong dt { color: var(--body); font-weight: 500; }
.trade-ticket .trade-summary-card .ql-loss dd,
.trade-ticket .trade-summary-card .ql-strong dd { color: var(--ink); font-weight: 600; }

/* ACT — single black CTA carrying the upside line. */
.trade-ticket .funding-path .primary-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  padding: 12px 16px;
}
#preview-button-label { font-size: 14px; font-weight: 600; }
.cta-sub { font-size: 11px; font-weight: 500; opacity: 0.82; font-variant-numeric: tabular-nums; }
.cta-sub[hidden] { display: none; }

/* Demote the market-action panel's "focus the input" button to an outline so the
   ticket's Review button is the only solid black CTA on the page. */
.market-action-buttons .primary-button.is-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 0;
}
.market-action-buttons .primary-button.is-quiet:hover {
  background: var(--surface);
  border-color: var(--ink);
}

/* Value-history panel gets a current-value hero + windowed change. */
.stats-value strong { display: block; font-size: var(--num-display); letter-spacing: -0.02em; }
.stats-delta {
  display: block;
  margin-top: 4px;
  color: var(--secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.stats-delta[hidden] { display: none; }

/* ============================================================================
   TICKET v2 — de-duplicated structure + sticky right rail (UI/CSS only).
   Redundancy cut: paying-range summary row, "Max payout"/"Max return"/"You pay"
   breakdown rows, and the CTA "Win up to $X" sub are gone. What remains:
   payout hero → always-visible Max loss → collapsed cost/risk breakdown → CTA.
   ============================================================================ */

/* Max loss — always visible, paired with the payout hero (never collapses).
   Grayscale only; the downside must never hide behind a disclosure. */
.trade-summary-card .max-loss-line { margin: 12px 0 0; padding: 0; }
.trade-summary-card .max-loss-line div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 10px 12px;
  background: var(--surface); border-radius: var(--radius-control);
}
.trade-summary-card .max-loss-line dt {
  margin: 0; font-size: 12px; font-weight: 500; color: var(--body);
}
.trade-ticket .trade-summary-card .max-loss-line dd {
  margin: 0; font-size: 30px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Cost & risk breakdown — collapsed by default; only the mechanical reference
   numbers (price per share, shares) that aren't shown anywhere else. */
.breakdown-details { margin-top: 6px; }
.breakdown-details > summary {
  min-height: 40px;
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; font-size: 12px; color: var(--muted);
}
.breakdown-details > summary::-webkit-details-marker { display: none; }
.breakdown-details > summary span::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}
.breakdown-details[open] > summary span::after { transform: translateY(2px) rotate(-135deg); }
.trade-summary-card .breakdown-details .quote-lines {
  margin: 6px 0 0; padding: 0; gap: 0;
  border: 1px solid var(--rule-light); border-radius: var(--radius-control);
  overflow: hidden;
}
.trade-summary-card .breakdown-details .quote-lines div {
  padding: 8px 12px; gap: 16px; align-items: baseline;
}
.trade-summary-card .breakdown-details .quote-lines div:nth-child(even) {
  background: var(--surface-tint);
}

/* --------------------------------------------------------------------------
   PAGE-LEVEL TRADE RAIL — the ticket is the only right-column occupant.
   Sticky is enabled only when the two-column layout and a comfortable viewport
   height both fit. Short viewports use normal document scrolling.
   -------------------------------------------------------------------------- */
.rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-trade-summary { display:none; }

/* Three fields, three handles, same left-to-right order: the numeric row reads as
   the chart's own axis restated in digits. */
.chart-panel .range-steppers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.chart-panel .stepper { display: grid; gap: 6px; }
.chart-panel .stepper-cap { font-size: 11px; }
.chart-panel .stepper-control { width: 100%; height: 40px; border: 0; border-radius: 10px; background: var(--surface-quiet); }
.chart-panel .stepper-btn { width: 30px; }
.chart-panel .stepper-input { font-size: 13px; }

/* Numbered steps. The badge is decorative (aria-hidden) — the heading text alone
   still reads correctly to a screen reader. */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  vertical-align: 2px;
}
.step-badge[hidden] { display: none; }

.decision-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(112px, .75fr);
  gap: 10px;
  align-items: stretch;
}
.decision-pair .test-result,
.decision-pair .max-loss-line {
  min-width: 0;
  container-type: inline-size;
  margin: 0;
  padding: 10px;
  border-radius: var(--radius-control);
  background: var(--surface);
}
.trade-summary-card .max-loss-line div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  background: transparent;
}
.trade-ticket .trade-summary-card .max-loss-line dd { font-size: 30px; text-align: left; }
.result-shape-note { margin: 8px 0 0; color: var(--secondary); font-size: 11px; line-height: 1.4; }
.mechanics-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.trade-ticket .funding-path { padding: 0; background: transparent; }
.trade-ticket .funding-path > p:first-child { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.4; }
.trade-ticket > .breakdown-details { margin-top: 8px; padding: 0 2px; }
.trade-ticket > .breakdown-details .quote-lines { margin: 4px 0 0; }
.trade-ticket > .breakdown-details .quote-lines div { padding: 8px 10px; }
.trade-ticket > .breakdown-details .mechanics-note { padding: 0 2px; }

@media (min-width: 1100px) and (min-height: 760px) {
  @supports (position: sticky) {
    body:not(.market-trading-unavailable) .trade-ticket {
      position: sticky;
      top: 16px;
      align-self: start;
    }
  }
}

@media (max-width: 1099px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .rail { grid-template-columns: 1fr; }
  .mobile-trade-summary:not([hidden]) {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    margin-top:14px;
    padding:12px;
    border-radius:14px;
    background:var(--ink);
    color:var(--surface);
  }
  .mobile-trade-summary div { display:grid; gap:2px; min-width:0; }
  .mobile-trade-summary span { color:rgba(255,255,255,.72); font-size:11px; }
  .mobile-trade-summary strong { color:var(--surface); font-size:15px; font-variant-numeric:tabular-nums; }
  .mobile-trade-summary button { min-height:44px; border:0; border-radius:10px; padding:0 14px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:600; }
  .chart-panel .range-steppers { gap: 6px; }
  .decision-pair { grid-template-columns: 1fr 120px; }
  .payoff-chart { min-width: 0; }
  .chart-wrap { overflow-x: visible; }
  .chart-handle circle { r: 14; }
  .chart-handle .handle-value { font-size: 17px; }
  .preset-chip, .odds-toggle, .learn-link { min-height: 44px; display:inline-flex; align-items:center; }
  .coach-mark { display:none !important; }
  .demo-banner { position:static; max-width:none; margin:16px 15px 0; box-shadow:none; }
}

/* ---------------------------------------------------------------------------
   Phase 4 — page structure. Positions / Activity / About collapse into one
   tabbed surface; settlement becomes three always-visible columns.
   Strictly monochrome; the active tab is carried by weight + underline, never
   by hue alone.
   -------------------------------------------------------------------------- */
.rail { grid-template-columns: 1fr; }

.portfolio-tabs {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule-light);
}
.tablist { display: flex; gap: 4px; }
.tablist .tab {
  position: relative;
  min-height: 44px;
  border: 0;
  padding: 0 14px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease;
}
.tablist .tab:hover { color: var(--ink); }
.tablist .tab.is-active { color: var(--ink); font-weight: 600; }
.tablist .tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
}
.tablist .tab #positions-count { color: var(--muted); font-weight: 500; }
.tabs-balance {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.tabs-balance strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab-panel { padding-top: 18px; }
.tab-panel[hidden] { display: none; }
.tab-panel:focus-visible { outline: 2px solid rgba(17, 17, 17, .5); outline-offset: 4px; }

.portfolio-tabs .positions-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  padding: 34px 22px;
  background: var(--surface-quiet);
  /* --muted lands at 4.42:1 on this tinted panel — one notch under WCAG AA. */
  color: var(--secondary);
  font-size: 13px;
}
.portfolio-tabs .positions-empty[hidden] { display: none; }
.empty-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ghost);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.empty-icon circle { fill: var(--surface); }

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.about-grid h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.about-grid p { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.55; }
.portfolio-tabs #panel-about .text-link { display: inline-block; margin-top: 22px; }

/* The three settlement outcomes: the answer to "what decides my payout" is no
   longer behind a disclosure. Scoped to .settlement-columns so #admin keeps the
   original <details> styling it still relies on. */
.settlement-columns {
  margin-top: 16px;
  padding: 26px 20px 24px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.settlement-columns-head h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.settlement-columns-head p {
  max-width: 680px;
  margin: 0 0 22px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.55;
}
/* The anti-rug guarantee is the one claim that de-risks holding to settlement;
   give it a quiet left rule so it reads as a promise, not fine print. */
.settlement-columns-head p.settlement-guarantee {
  flex: 1 1 100%;
  margin-top: 6px;
  color: var(--ink);
}
.settlement-columns .settlement-terms { gap: 28px; }
.settlement-columns .settlement-terms dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.settlement-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--secondary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settlement-columns > .text-link { display: inline-block; margin-top: 22px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 20px; }
  .settlement-columns .settlement-terms { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 620px) {
  .tabs-row { flex-wrap: wrap; gap: 8px; }
  .tablist .tab { padding: 0 10px; font-size: 12px; }
  .tabs-balance { order: -1; width: 100%; }
}

/* The rail now holds a single panel. Read it as a horizontal strip — value,
   sparkline, grid step — instead of a tall column with dead space where the
   Activity panel used to sit. */
.rail .panel {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(140px, 1fr) minmax(0, auto);
  align-items: center;
  column-gap: 32px;
  row-gap: 0;
}
.rail .panel .panel-heading { grid-column: 1 / -1; }
.rail .panel .stats-value { margin: 0; }
.rail .panel #stats-spark { margin: 0; height: 44px; }
.rail .panel .stats-lines { align-self: center; }
.rail .panel .stats-lines div { gap: 10px; }

@media (max-width: 720px) {
  .rail .panel { grid-template-columns: 1fr; row-gap: 14px; }
  .rail .panel #stats-spark { height: 48px; }
}

/* ---------------------------------------------------------------------------
   One accent, one meaning. Structural surfaces stay neutral; indigo is reserved
   for the user's selected range, its values and the upside created by that choice.
   -------------------------------------------------------------------------- */
:root {
  --accent: #4338CA;
  --accent-strong: #3730A3;
  --accent-wash: rgba(67, 56, 202, 0.10);
  --accent-edge: rgba(67, 56, 202, 0.28);
}

/* The payout triangle — the single largest expression of "your range". */
.range-band { fill: var(--accent-wash); }
.range-peak-line { stroke: var(--accent); }
.range-band-chart.is-band-dragging .range-band { stroke: var(--accent-edge); }

/* Handles: the peak is the value you are betting on, so it carries the accent
   solid; the bounds ring it. Shape and size already distinguish them. */
.range-band-chart .handle-dot { stroke: var(--accent); }
.range-band-chart .chart-handle.is-peak .handle-dot { fill: var(--accent); stroke: var(--surface); }
.range-band-chart .chart-handle:hover .handle-dot,
.range-band-chart .chart-handle:focus-visible .handle-dot {
  filter: drop-shadow(0 2px 4px rgba(67, 56, 202, 0.32));
}
.range-band-chart .handle-value { fill: var(--accent-strong); }
.legend-range { background: var(--accent-wash); border-top-color: var(--accent); }

/* The three numeric fields are the same selection stated in digits. Tinting the
   focused control only — not every field — keeps the accent meaning "this is
   what you are setting right now". */
.chart-panel .stepper-control:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.chart-panel .stepper-input:focus { color: var(--accent-strong); }

/* Settled: the range you chose is history, so the accent recedes with it.
   Colour must not survive the state that makes it meaningless. */
.payoff-chart.is-settled-frame .range-band { fill: rgba(17, 17, 17, 0.10); }
.payoff-chart.is-settled-frame .range-peak-line { stroke: var(--ink); }

/* Deliberately NOT accented, and why:
   - .reference-history / .reference-current — the market's estimate, not yours.
   - .primary-button, .preset-chip, .amount-presets — ink already reads as the
     one action; accenting them would spend the accent on chrome.
   - .tablist .tab.is-active — weight + underline carry it; colour would be
     a second, redundant channel on a control that is not a selection.
   - every P/L figure — sign belongs to the glyph. */

@media (prefers-contrast: more) {
  :root { --accent: #3730A3; --accent-wash: rgba(55, 48, 163, 0.16); }
}

/* ---------------------------------------------------------------------------
   Figma pass — visual refinements. Layout, copy and every number are unchanged;
   this is weight, rhythm and separation only.
   -------------------------------------------------------------------------- */

/* Status strip: hairline separators turn a run-on sentence of facts into
   discrete cells, which is how the eye actually scans a status bar. */
.status-strip-inner { gap: 0; }
.status-strip-inner > * {
  padding: 0 20px;
  border-left: 1px solid var(--rule-light);
  min-width: 0;
}
/* The freshness line is the only elastic cell; let it truncate rather than run
   under the chain link on the right. */
.status-strip-inner .status-freshness {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Only the market cell needs nowrap — its icon and label must stay on one line.
   Forcing nowrap on every cell overflows the strip at narrow widths. */
#status-market { white-space: nowrap; }
.status-strip-inner > *:first-child { padding-left: 0; border-left: 0; }
.status-strip-inner > *:last-child { padding-right: 0; }
.status-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
}
#status-market { color: var(--body); }

/* "How it resolves" gains a shield and a two-line stack, so the deadline stops
   competing with the sentence that explains the rule. */
.resolve-strip {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
}
.resolve-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--secondary);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.resolve-copy { min-width: 0; flex: 1 1 auto; }
.resolve-copy p { margin: 0; }
.resolve-copy p + p { margin-top: 4px; }
.resolve-strip .text-link { margin-left: auto; flex: 0 0 auto; align-self: center; }

@media (max-width: 720px) {
  .status-strip-inner > * { padding: 0 12px; }
  .resolve-strip { flex-wrap: wrap; }
  .resolve-strip .text-link { margin-left: 0; }
}

/* The market title sat flush against the panel edge while every other block had
   a rule under it. A hairline gives step 1 a top boundary to start from. */
.trading-panel .panel-title-row {
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule-light);
}

/* The implied value earns a card of its own. Previously it was a run of prose
   under the chart; the figure is the point, so it gets figure treatment. */
.narrative-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-card, 16px);
  background: var(--surface);
}
.narrative-icon {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--accent-wash);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The valuation is the one number the sentence exists to deliver — accent it
   for the same reason the chart's peak is accented: it is the value in play. */
.narrative-card #outcome-value {
  color: var(--accent-strong);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.narrative-card .market-narrative { align-self: center; }
.narrative-card .narrative-sub { margin-top: 0; }

@media (max-width: 620px) {
  .narrative-card { grid-template-columns: 1fr; row-gap: 10px; padding: 16px; }
  .narrative-icon { grid-row: auto; }
}

/* Settlement icons sit in soft tiles: three parallel outcomes read as three
   parallel objects, not as three sentences that happen to start with a glyph. */
.settlement-columns .settlement-terms dt { gap: 10px; }
.settlement-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  border: 1px solid var(--rule-light);
  background: var(--surface);
  stroke: var(--secondary);
}
.settlement-columns .settlement-terms dd { padding-left: 40px; }

/* Empty state: a ringed icon reads as a placeholder, where a bare stroke on a
   tinted slab read as a broken image. */
.portfolio-tabs .positions-empty { padding: 44px 22px; gap: 14px; background: transparent; }
.empty-icon {
  width: 56px;
  height: 56px;
  padding: 15px;
  border-radius: 999px;
  background: var(--surface-quiet);
  stroke: var(--muted);
}
.empty-icon circle { fill: var(--surface-quiet); }
.portfolio-tabs .positions-empty #positions-empty-copy { max-width: 42ch; text-align: center; }

/* --- Ticket, Figma pass ---------------------------------------------------
   Cards gain a hairline instead of a fill: on a tinted panel, a border reads as
   "two separate figures" where two grey slabs read as one. */
.ticket-heading { align-items: flex-start; }
.ticket-balance {
  margin: 4px 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.ticket-balance strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The stake is the primary input: a large quiet field, explicit token mark and
   token name. The mark is decorative; USDC remains written out in text. */
.trade-ticket .amount-input-wrap {
  height: 68px;
  margin-top: 12px;
  padding: 0 18px;
  gap: 12px;
  border-radius: 16px;
}
.trade-ticket .amount-input-wrap input {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.amount-currency-mark {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}
.trade-ticket .amount-input-wrap > span:last-child {
  color: var(--secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

.trade-ticket .trade-summary-card { padding: 0; background: transparent; }
.decision-pair { gap: 12px; }
.decision-pair .test-result,
.decision-pair .max-loss-line {
  padding: 14px;
  border: 1px solid var(--rule-light);
  background: var(--surface);
}

/* The multiple is the upside, so it keeps the product accent. */
.trade-ticket .trade-summary-card .result-multiple {
  background: var(--accent-wash) !important;
  color: var(--accent-strong) !important;
  font-weight: 600 !important;
}

/* Profitable row: green remains a semantic success signal. The check and copy
   still carry the meaning when colour is unavailable. */
.breakeven-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-control, 12px);
  background: rgba(22, 101, 52, 0.07);
}
.breakeven-row[hidden] { display: none; }
.breakeven-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: #166534;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trade-ticket .trade-summary-card .breakeven-row .breakeven-copy {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #14532D;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

/* Risk note gets a lock: the one line users skip is the one that says they can
   lose everything. #risk-note is a textContent sink, so the icon is a sibling. */
.trade-ticket .risk-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.trade-ticket .risk-note::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--lock-mask) center / contain no-repeat;
  mask: var(--lock-mask) center / contain no-repeat;
  opacity: .75;
}
/* The reassurance line sits under the risk line and must never outweigh it:
   lighter, smaller, no lock icon. The downside stays visually primary. */
.trust-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--secondary);
  opacity: .85;
}
.gas-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--secondary);
}
.gas-note a { color: var(--ink); text-decoration: underline; }
:root {
  --lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* Trade mechanics reads as a control, not as loose text under the CTA. */
.trade-ticket > .breakdown-details {
  margin-top: 12px;
  padding: 0;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-control, 12px);
  background: var(--surface);
}
.trade-ticket > .breakdown-details > summary { padding: 0 14px; }
.trade-ticket > .breakdown-details .quote-lines,
.trade-ticket > .breakdown-details .mechanics-note { padding: 0 14px; }
.trade-ticket > .breakdown-details .mechanics-note { padding-bottom: 12px; }

/* CTA: taller and rounder, matching the mockup's weight. */
.trade-ticket .primary-button { padding: 15px 16px; border-radius: 12px; }
.trade-ticket .funding-path { margin-top: 14px; }

/* The loss figure was breaking across two lines ("−" then "$100") in the narrow
   column. It is one number and must read as one. */
.trade-ticket .trade-summary-card .max-loss-line dd#quote-maxloss-value {
  white-space: nowrap;
  font-size: clamp(22px, 2.1vw, 30px);
}
.trade-ticket .trade-summary-card .test-result > strong { white-space: nowrap; }
/* Both cards start at the top; space-between was stretching the loss card to
   match a taller neighbour and pushing its chip to the floor. */
.trade-summary-card .max-loss-line div { justify-content: flex-start; }
/* Large balances must fit the narrow downside card without escaping it. The
   figure stays on one line and scales from the card width, not the viewport. */
.trade-summary-card .max-loss-line { overflow: hidden; }
.trade-ticket .trade-summary-card .max-loss-line dd#quote-maxloss-value {
  max-width: 100%;
  font-size: clamp(20px, 18cqw, 30px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.decision-pair .test-result { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.decision-pair .test-result > strong { margin: 0; }
.trade-ticket .trade-summary-card .result-multiple { margin-top: 0 !important; }

/* --- Chart, Figma pass ----------------------------------------------------
   Labels move to a band above the plot and each drops a dashed connector to its
   own vertex. A label and the point it names become one object. */
.range-band-chart .handle-guide {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: .38;
  pointer-events: none;
}
.range-band-chart .chart-handle.is-peak .handle-guide { stroke: var(--accent); opacity: .5; }
.range-band-chart .handle-kind { font-size: 9px; letter-spacing: .08em; }
.range-band-chart .handle-value { font-size: 15px; }

/* Payout ticks now sit in the right gutter, start-anchored. The inline
   text-anchor loses to a CSS rule, so the old `end` default must be scoped off. */
.range-band-chart .payout-label { text-anchor: start; }
.range-band-chart .chart-y-label { text-anchor: start; }

/* Legend becomes a full row: keys left, live reading right. */
.range-chart-legend {
  align-items: center;
  gap: 9px 20px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-light);
}
.legend-latest { margin-left: auto; color: var(--secondary); }
.legend-latest strong {
  margin-left: 5px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* A live reading deserves a liveness cue, and it must not be colour alone:
   the word "Latest" and the pulse animation both say it. */
.legend-pulse {
  width: 7px !important;
  height: 7px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--ink);
  animation: legend-pulse 2.4s ease-in-out infinite;
}
@keyframes legend-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .legend-pulse { animation: none; } }

@media (max-width: 620px) {
  .range-band-chart .handle-value { font-size: 13px; }
  .legend-latest { margin-left: 0; }
}

/* Pre-existing failure surfaced while measuring this pass: --faint on the strip
   is 2.37:1. The freshness line states when the data was last read — a reader
   who cannot see it cannot judge whether the numbers are stale. */
.status-strip-inner .status-freshness { color: var(--secondary); }


/* A flat reading is a real state, and a straight line drawn across a card is a
   poor way to say it — it reads as a divider, or as a bug. Dash it and hand the
   space back to a plain statement of the fact. */
#stats-spark polyline { stroke-linecap: round; }
.rail .panel.is-flat #stats-spark { opacity: .8; }
.rail .panel.is-flat #stats-spark polyline {
  stroke: var(--ghost);
  stroke-dasharray: 4 6;
  stroke-width: 1.5;
  /* preserveAspectRatio="none" stretches the dash pattern with the box; this
     keeps the dashes the size they were authored at. */
  vector-effect: non-scaling-stroke;
}
.rail .panel #stats-spark { align-self: center; }

/* "How it resolves" and the value rail now sit OUTSIDE .app-grid, as siblings of
   the tabs — which already ran full width. Reparenting is the fix; assigning the
   ticket a different grid-row is not, because grid-area sets row and column
   together and overriding one lifts a sticky ticket out of its own cell, where
   it lands on top of whatever follows.

   The grid keeps only the two columns that are genuinely side by side. */
.app-grid { grid-template-areas: "market ticket"; }
.app-main > .resolve-strip { margin-top: 20px; }
.app-main > .rail { margin-top: 20px; }

/* With the full width available the rail reads as a row of facts instead of one
   number stranded beside empty space. */
.app-main > .rail .panel {
  grid-template-columns: minmax(0, auto) minmax(200px, 1fr) minmax(0, auto);
  column-gap: 40px;
}

@media (max-width: 1099px) {
  .app-grid { grid-template-areas: "market" "ticket"; }
}

/* --- Settlement section: breathing room ------------------------------------
   `.app-main .settlement { padding: 0 20px }` outranked .settlement-columns and
   flattened the vertical padding to zero, so the section sat hard against its
   own edges and "Read the complete rules" ended 1px from the bottom. */
.app-main .settlement-columns { padding: 30px 32px 28px; }

/* Subtitle rides beside the title rather than stacking under it, as in the
   design: one heading line, then the three outcomes. */
.settlement-columns-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 26px;
}
.settlement-columns-head h2 { margin: 0; }
.settlement-columns-head p { margin: 0; max-width: 62ch; }

/* The copy hangs under its own icon+label, and the columns keep a real gutter
   so three blocks of prose never run together. */
.settlement-columns .settlement-terms { gap: 24px 44px; }
.settlement-columns .settlement-terms dd { padding-left: 42px; }
.settlement-columns > .text-link { margin-top: 26px; }

/* Earlier variants flip these pills to inline-block for their top margin, which
   collapses the masked ::after arrow (an inline ::after ignores width/height).
   Keep them inline-flex so the arrow keeps its box and the 8px gap. */
.settlement-columns > .rules-link,
.portfolio-tabs #panel-about .rules-link { display: inline-flex; }

/* A hairline closes the intro zone before the three outcomes begin, so the
   card reads as "the promise" then "the three ways it settles" instead of one
   dense block of prose. */
.settlement-columns .settlement-columns-head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-light);
}

/* The IPO calculation used to live inside the IPO column; expanding it left the
   other two outcomes staring at a tall empty gutter. Promoted to a full-width
   band under the columns, it spans the card and reads as its own zone. */
.settlement-columns > .settlement-calc {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-light);
}
.settlement-columns > .settlement-calc .settlement-steps { max-width: 68ch; }

@media (max-width: 900px) {
  .app-main .settlement-columns { padding: 24px 20px 22px; }
  .settlement-columns .settlement-terms dd { padding-left: 42px; }
}

/* The subtitle is one line beside the title, not a wrapped paragraph. */
.settlement-columns-head p { max-width: none; flex: 1 1 auto; }

/* --- Steppers: keep the control, drop the echo -----------------------------
   The three values are already stated in large type above the plot, with these
   exact three labels. Repeating them 40px below said the same thing twice.
   What the chart cannot do is precise entry — so the fields stay, the captions
   go, and one line names the row's purpose instead of naming each field again.
   The captions remain in the accessibility tree via the inputs' aria-labels. */
.chart-panel .range-steppers .stepper-cap {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.chart-panel .range-steppers { position: relative; margin-top: 14px; }
.steppers-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
}
/* The order low -> peak -> high still reads off the x axis, and each field sits
   under the handle it mirrors, so the row needs no per-field caption. */

/* The hint belongs to the fields below it, not to the legend above — give it a
   seam so the two rows do not read as one block. */
.steppers-hint { margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule-light); }
.range-chart-legend { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Transposed chart (?chart=v). Valuation reads down the left edge, the three
   chosen values become horizontal levels, and the unchanged payout function
   reads left-to-right. This is the current data with swapped axes, not a new
   chart type or a discrete approximation.
   -------------------------------------------------------------------------- */
/* The fill is deliberately quiet: the two slopes remain the primary reading. */
.chart-v .range-band-chart .range-band { fill: rgba(67, 56, 202, .08); }

/* In this orientation the dots already sit on the three exact vertices. Keep the
   selected levels readable through the shape without turning them into rails. */
.chart-v .range-band-chart .handle-guide {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: none;
  opacity: .18;
}
.chart-v .range-band-chart .chart-handle.is-peak .handle-guide {
  stroke-width: 1.25;
  opacity: .3;
}
.chart-v .range-band-chart .chart-handle { cursor: ns-resize; }
.chart-v .range-band-chart .handle-value { font-size: 13px; }
.chart-v .range-band-chart .handle-kind { font-size: 8px; }
/* Off-view: a bound panned or dragged past the visible window pins to the near edge.
   Its guide can no longer claim to sit at that level, so dash and fade it — the pinned
   dot and the ▲/▼ chevron on the value label carry the "beyond the view" meaning. The
   value stays fully legible so the chosen number is never lost off-screen. */
.chart-v .range-band-chart .chart-handle.is-offview .handle-guide {
  stroke-dasharray: 3 4;
  opacity: .28;
}
/* Pinned dot reads as hollow: it marks where an off-view level clamps to the edge,
   not a level that truly sits here. */
.chart-v .range-band-chart .chart-handle.is-offview .handle-dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}
/* The market reference keeps its grey, dashed treatment — it is the market's
   estimate, not your choice, and must never read as one of your three levels. */
.chart-v .reference-history { stroke-dasharray: 5 4; opacity: .8; }

/* The graph, its axis title and its legend read as one object. Padding lives on
   the outer card so chartWrap.clientWidth remains the exact SVG viewBox width. */
.chart-card {
  margin-top: 20px;
  padding-top: 14px;
  border: 1px solid var(--rule-light);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
}
.chart-axis-title {
  margin: 0 20px 4px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 600;
}
.chart-card .chart-wrap { margin-top: 0; border-bottom: 0; }
.chart-v .range-band-chart .range-value-grid {
  stroke: rgba(17,17,17,.09);
  stroke-dasharray: 4 5;
}
.chart-v .range-band-chart .payout-grid { stroke: rgba(17,17,17,.10); }
.chart-card .range-chart-legend {
  min-height: 56px;
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--rule-light);
}
.chart-card .legend-range {
  height: 0;
  border-radius: 0;
  border-top: 2px solid var(--accent);
  background: none;
}
.chart-card .legend-reference {
  border-top: 2px dashed var(--secondary);
}
.chart-card .legend-latest {
  gap: 8px;
  margin-left: auto;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--surface-quiet);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.chart-card .legend-latest strong { margin-left: 2px; }
.legend-live-dot {
  width: 8px !important;
  height: 8px;
  border-radius: 999px;
  background: var(--secondary);
}

/* Exact inputs are the three explicit anchors below the chart. */
.chart-panel .range-steppers {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}
.chart-panel .range-steppers .stepper-cap {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.chart-panel .stepper { gap: 9px; }
.chart-panel .stepper-control {
  height: 54px;
  border: 1px solid var(--rule-light);
  border-radius: 14px;
  background: var(--surface);
}
.chart-panel .stepper-btn { width: 42px; font-size: 18px; }
.chart-panel .stepper-input { font-size: 17px; font-weight: 600; }

/* Dialogs use the same radius language as the app: cards are 20px, controls
   14px, and primary actions 12px. The modal should never look like a square
   browser default floating over an otherwise rounded product. */
dialog {
  overflow: hidden;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 0 24px 72px rgba(17, 17, 17, .16);
}
dialog::backdrop {
  background: rgba(17, 17, 17, .32);
  backdrop-filter: blur(2px);
}
/* Fixed height + footer pinned to the bottom: the three steps have different
   content heights (step 2 adds the example box), and without this the dialog
   re-centers per step and the Next button jumps around the screen. */
.onboarding-dialog {
  width: min(680px, calc(100% - 32px));
  padding: 36px 40px 34px;
  min-height: 430px;
}
.onboarding-dialog[open] { display: flex; flex-direction: column; }
.dialog-close {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 20px;
}
.dialog-close:hover { background: var(--surface-quiet); }
.onboarding-kicker { margin-bottom: 12px; }
.onboarding-dialog h2 {
  max-width: 18ch;
  margin-bottom: 14px;
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.12;
  font-weight: 600;
}
.onboarding-dialog > #onboarding-copy {
  max-width: 48ch;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.55;
}
.onboarding-example {
  padding: 14px 16px;
  border-left: 0;
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
}
.onboarding-footer { margin-top: auto; padding-top: 34px; }
.onboarding-dots { gap: 7px; }
.onboarding-dots span { width: 8px; height: 8px; border-color: var(--ghost); }
.onboarding-actions { gap: 10px; }
.dialog-back {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule-light);
  border-radius: 12px;
  background: var(--surface);
  font-weight: 500;
}
.dialog-back:hover { border-color: var(--ink); color: var(--ink); }
.onboarding-actions .primary-button {
  min-width: 116px;
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 14px;
}
#preview-dialog { border-radius: var(--radius-card); }
#preview-dialog .dialog-submit { border-radius: 12px; }

/* App header: aligned to the same 1340px frame as the market content. A small
   range-shaped mark and pill navigation give it identity without adding noise. */
.site-header {
  height: 78px;
  padding: 10px 0 6px;
  background: var(--canvas);
}
.header-inner,
.header-inner.is-app {
  width: min(1340px, calc(100% - 48px));
  height: 62px;
  padding: 0 12px 0 18px;
  border: 1px solid var(--rule-light);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(17,17,17,.02), 0 10px 30px rgba(17,17,17,.035);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Hunch brand: the burst mark from the Hunch repo, freed from its green
   circle -- just the mark itself in charcoal, next to the lowercase word. */
.wordmark-hunch { gap: 9px; }
.wordmark-hunch .wordmark-glyph {
  width: 24px;
  height: 24px;
  color: #26282c;
}
.wordmark-hunch span {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #26282c;
}
.header-inner nav {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-quiet);
}
.header-inner .nav-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--secondary);
  font-size: 12px;
}
.header-inner .nav-link:hover { background: rgba(255,255,255,.72); }
.header-inner .nav-link.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(17,17,17,.08);
}
.header-inner .nav-link.is-active::after { display: none; }
.header-status { gap: 10px; }
.live-chip {
  position: relative;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--surface-quiet);
  cursor: help;
  outline: none;
}
.live-chip i { background: #38B778; }
/* Demo sandbox: amber dot + ring so "Demo" never reads like the live green state. */
.live-chip.is-demo i { background: #C88A00; }
.live-chip.is-demo { box-shadow: inset 0 0 0 1px rgba(200, 138, 0, .45); }
.live-chip:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.live-chip-tooltip {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: min(290px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  display: none;
  pointer-events: none;
}
.live-chip-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}
.live-chip:hover .live-chip-tooltip,
.live-chip:focus-visible .live-chip-tooltip,
.live-chip:focus-within .live-chip-tooltip {
  display: block;
}
.how-link {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  text-decoration: none;
}
.how-link:hover { background: var(--surface-quiet); color: var(--ink); }
.header-inner .wallet-chip {
  min-height: 38px;
  padding: 0 16px;
  border-color: var(--rule) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
}
.header-inner .wallet-chip:hover { border-color: var(--ink) !important; }

/* Compact market facts. Four cells fill the strip evenly; freshness stacks its
   timestamp and cadence with a green liveness dot instead of a redundant chain link. */
.status-strip {
  width: min(1340px, calc(100% - 48px));
  margin: 0 auto;
  border: 1px solid var(--rule-light);
  border-radius: 14px;
  background: var(--surface);
}
.status-strip-inner {
  width: 100%;
  min-height: 72px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(230px, 1.25fr) minmax(270px, 1.45fr) minmax(220px, 1.15fr) minmax(220px, 1.1fr);
  align-items: center;
}
.status-strip-inner > * {
  min-width: 0;
  padding: 0 26px;
  border-left: 1px solid var(--rule-light);
}
.status-strip-inner > *:first-child { padding-left: 0; border-left: 0; }
.status-strip-inner > *:last-child { padding-right: 0; }
.status-strip-inner .status-freshness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  overflow: visible;
  white-space: normal;
  color: var(--secondary);
  line-height: 1.45;
}
#freshness { display: block; white-space: pre-line; }
.freshness-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #38B778;
  box-shadow: 0 0 0 3px rgba(56, 183, 120, .10);
}

/* Range setup spacing. The heading, explanation and presets are three separate
   reading units; give each one enough air to avoid becoming a single text block. */
.trading-panel .chart-heading h2 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.25;
}
.trading-panel .chart-heading p {
  font-size: 13px;
  line-height: 1.5;
}
.trading-panel .chart-controls {
  margin-top: 16px;
  margin-bottom: 18px;
}
.preset-group { gap: 16px; }
.preset-label {
  font-size: 12px;
  letter-spacing: .02em;
}
.preset-chips { gap: 10px; }
.preset-chip {
  min-height: 38px;
  padding: 7px 18px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Market read + resolution rows. The same live values and rule text are grouped
   into scannable columns: signal, headline figures, context, then the rules link.
   -------------------------------------------------------------------------- */
.narrative-card {
  grid-template-columns: 56px minmax(390px, .95fr) minmax(310px, 1.05fr);
  grid-template-rows: auto;
  column-gap: 22px;
  row-gap: 0;
  align-items: center;
  padding: 20px 24px;
}
.narrative-icon {
  grid-row: auto;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 12px;
  background: var(--accent-wash);
  stroke: var(--accent);
}
.narrative-primary { min-width: 0; }
/* G10: the distribution band leads. A range ("Most likely $A–$B") is the honest
   headline of a probabilistic market; the single centered point drops to support
   below it. When the band is hidden (degenerate market) it collapses with no gap
   and the kicker+point take the lead unchanged. */
.narrative-card .narrative-primary .narrative-band {
  display: block;
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.narrative-card .narrative-primary .narrative-band[hidden] { display: none; }
.narrative-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.narrative-card .market-narrative {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  line-height: 1;
}
.narrative-card #outcome-value {
  color: var(--accent-strong);
  font-size: 31px;
  font-weight: 600;
}
.narrative-divider {
  width: 1px;
  height: 38px;
  flex: 0 0 auto;
  background: var(--rule-light);
}
.narrative-chance {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--secondary);
  font-size: 11px;
  line-height: 1.35;
}
.narrative-chance strong {
  color: var(--ink);
  font-size: 29px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.narrative-context {
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--rule-light);
}
.narrative-card .narrative-band {
  display: block;
  margin: 0 0 13px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.4;
}
.narrative-card .narrative-band[hidden] { display: none; }
.narrative-card .narrative-sub {
  margin: 0;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.4;
}
.narrative-card .narrative-sub .text-link { font-size: inherit; }

.resolve-strip {
  display: grid;
  grid-template-columns: 30px max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border: 1px solid var(--rule-light);
  background: var(--surface);
}
.resolve-icon { width: 24px; height: 24px; margin: 0; }
.resolve-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.resolve-copy { min-width: 0; }
.resolve-copy p { color: var(--secondary); font-size: 12px; line-height: 1.35; }
.resolve-copy p + p { margin-top: 5px; }
.resolve-copy b { color: var(--ink); font-weight: 600; }
.resolve-strip .resolve-rules {
  margin: 0;
  align-self: center;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.resolve-rules span { margin-left: 5px; text-decoration: none; }

@media (max-width: 1099px) {
  .status-strip { overflow: hidden; }
  .status-strip-inner {
    width: 100%;
    grid-template-columns: max-content max-content max-content max-content max-content;
    overflow-x: auto;
    white-space: nowrap;
  }
  .status-strip-inner .status-freshness { display: flex; white-space: nowrap; }
  .narrative-card { grid-template-columns: 52px minmax(0, 1fr); row-gap: 16px; }
  .narrative-context { grid-column: 2; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--rule-light); }
}

@media (max-width: 720px) {
  .site-header { height: auto; padding: 8px 0; }
  .header-inner.is-app {
    width: calc(100% - 24px);
    min-height: 108px;
    height: auto;
    padding: 10px;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    border-radius: 16px;
  }
  .header-inner nav { justify-self: end; }
  .header-status {
    grid-column: 1 / -1;
    width: 100%;
    padding: 8px 0 0;
    border-top: 1px solid var(--rule-light);
    justify-content: flex-end;
  }
  .header-status .how-link { margin-right: auto; }
  .live-chip-tooltip { right: auto; left: 0; }
  .live-chip-tooltip::before { right: auto; left: 18px; }
  .status-strip { width: calc(100% - 24px); }
  .resolve-strip { grid-template-columns: 26px minmax(0, 1fr); gap: 10px 14px; }
  .resolve-title { align-self: center; }
  .resolve-copy { grid-column: 2; }
  .resolve-strip .resolve-rules { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  dialog { width: calc(100% - 24px); padding: 26px 22px 22px; border-radius: 18px; }
  .onboarding-dialog { width: calc(100% - 24px); padding: 28px 22px 22px; }
  .onboarding-dialog h2 { font-size: 27px; }
  .onboarding-dialog > #onboarding-copy { font-size: 14px; }
  .onboarding-footer { margin-top: 28px; }
  .onboarding-actions .primary-button { min-width: 100px; }
  .header-inner nav { gap: 3px; }
  .header-inner .nav-link { padding: 0 10px; font-size: 11px; }
  .wordmark { gap: 7px; font-size: 17px; }
  .chart-v .range-band-chart .handle-value { font-size: 12px; }
  .trade-ticket .ticket-heading { flex-wrap: wrap; gap: 8px 14px; }
  .trade-ticket .ticket-balance { width: 100%; margin: 0; }
  .trade-ticket .amount-input-wrap { height: 62px; padding: 0 15px; }
  .trade-ticket .amount-input-wrap input { font-size: 27px; }
  .amount-currency-mark { width: 25px; height: 25px; }
  .trading-panel .chart-heading h2 { margin-bottom: 9px; }
  .trading-panel .chart-heading p { line-height: 1.55; }
  .trading-panel .chart-heading .learn-link { min-height: 0; margin-top: 14px; }
  .trading-panel .chart-controls { margin-top: 18px; }
  .chart-controls-left { width: 100%; }
  .preset-group { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .preset-chips { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .preset-chip { justify-content: center; min-width: 0; padding: 7px 10px; }
  .chart-card { margin-top: 16px; padding-top: 12px; border-radius: 14px; }
  .chart-axis-title { margin: 0 14px 2px; }
  .chart-card .range-chart-legend { gap: 10px 14px; padding: 12px 14px; }
  .chart-card .legend-latest { width: 100%; margin-left: 0; justify-content: center; }
  .chart-panel .range-steppers { margin-top: 18px; }
  .chart-panel .stepper-control { height: 48px; }
  .chart-panel .stepper-btn { width: 34px; }
  .chart-panel .stepper-input { font-size: 14px; }
  .narrative-card { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; column-gap: 12px; }
  .narrative-icon { width: 38px; height: 38px; padding: 9px; }
  .narrative-card .market-narrative { flex-wrap: wrap; gap: 10px 14px; }
  .narrative-card #outcome-value { font-size: 27px; }
  .narrative-divider { height: 31px; }
  .narrative-chance strong { font-size: 25px; }
  .narrative-context { grid-column: 1 / -1; }
}