/* Propfirm Calculator — design system (Stripe-ish calm).
   All tokens and components live here. No preprocessor, no @import.
   Edit tokens in :root to reshape the look. */

:root {
  /* Surfaces & text */
  --bg:            #f7f9fc;
  --surface:       #ffffff;
  --surface-alt:   #f7f9fc;
  --border:        #e6ebf1;
  --border-strong: #d4dbe4;
  --text:          #0a2540;
  --text-muted:    #687385;
  --text-faint:    #96a1b0;

  /* Accent (lavender) */
  --accent:        #635bff;
  --accent-hover:  #544dff;
  --accent-soft:   #eef3ff;

  /* Semantic */
  --success:       #0f7c4a;
  --success-soft:  #d7f7e8;
  --warning:       #b45309;
  --warning-soft:  #fef3c7;
  --danger:        #b91c1c;
  --danger-soft:   #fee2e2;

  /* Elevation */
  --shadow-sm:     0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:     0 4px 12px rgba(17, 24, 39, 0.06);
  --shadow-focus:  0 0 0 3px rgba(99, 91, 255, 0.25);

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-full: 999px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --fs-hero:    30px;
  --fs-h1:      22px;
  --fs-h2:      16px;
  --fs-body:    14px;
  --fs-small:   13px;
  --fs-eyebrow: 11px;
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* Layout */
  --max-content: 1120px;
  --nav-h:       56px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h2); }

p {
  margin: 0 0 var(--space-3);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-alt);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--nav-h);
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.nav__brand {
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-3) 0;
}

.nav__brand:hover { color: var(--text); }

.nav__tabs {
  display: flex;
  gap: var(--space-4);
  flex: 1 1 auto;
  align-items: stretch;
  min-height: var(--nav-h);
}

.nav__tab {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border: 0;
  background: transparent;
}

.nav__tab:hover { color: var(--text); }

.nav__tab--active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav__user {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  padding: var(--space-3) 0;
}

.nav__user:hover { color: var(--text); }

/* ---------- Main layout ---------- */
.main {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-5);
}

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.messages li {
  padding: var(--space-3) var(--space-4);
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
}

/* ---------- Page header ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-5);
}

.page-header__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-header__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}

.page-header__subtitle {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.page-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card__header--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin: 0;
}

.card__title--hero {
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-tight);
}

.card__body {
  padding: var(--space-4) var(--space-5);
}

.card__body > *:last-child {
  margin-bottom: 0;
}

.card__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.card__grid > .card {
  flex: 1 1 300px;
  min-width: 0;
  margin-bottom: 0;
}

.card--muted {
  background: var(--surface-alt);
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------- Buttons ---------- */
.btn,
button.btn,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.btn:hover,
button[type="submit"]:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

.btn:focus-visible,
button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn[disabled],
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--secondary,
button.btn--secondary,
button.secondary {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
}

.btn--secondary:hover,
button.btn--secondary:hover,
button.secondary:hover {
  background: var(--border);
  color: var(--text);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  padding: 0 8px;
}

.btn--ghost:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.btn--sm {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-eyebrow);
}

/* ---------- Inputs ---------- */
.label,
label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select,
.input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  appearance: none;
}

textarea {
  height: auto;
  min-height: 90px;
  padding: var(--space-2) 10px;
  resize: vertical;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

input[disabled],
select[disabled],
textarea[disabled] {
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field__help {
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}

.field__error {
  font-size: var(--fs-eyebrow);
  color: var(--danger);
  font-weight: var(--fw-medium);
}

/* ---------- Form layout ---------- */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .form__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.form__actions--start {
  justify-content: flex-start;
}

/* Django's as_p fallback: give legacy <p>-wrapped fields a sensible look. */
form p {
  margin: 0 0 var(--space-3);
}

form p label {
  margin-bottom: var(--space-1);
}

/* ---------- Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  height: 20px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pill--accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
}

.pill--success {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-soft);
}

.pill--warning {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning-soft);
}

.pill--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-soft);
}

/* ---------- Segmented control ---------- */
.segmented-control {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  gap: 2px;
  margin-bottom: var(--space-4);
  max-width: 100%;
  overflow-x: auto;
}

.segmented-control a,
.segmented-control button {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}

.segmented-control a:hover,
.segmented-control button:hover {
  color: var(--text);
}

.segmented-control a.is-active,
.segmented-control button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-small);
  /* Prevent any single column from blowing out a dense table. */
  table-layout: auto;
}

/* Dense tables (frontier, etc.) — tighter padding so more columns fit. */
.card .table th,
.card .table td {
  padding: var(--space-2) var(--space-3);
}

.table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  /* Stick to the viewport top while scrolling long tables. */
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Same treatment for the sweep page's heatmap. */
.heatmap thead th {
  position: sticky;
  top: 0;
  background: var(--surface-alt);
  z-index: 2;
}
.heatmap tbody th {
  position: sticky;
  left: 0;
  background: var(--surface-alt);
  z-index: 1;
}

.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--surface-alt);
}

.table tbody tr.is-optimal td {
  background: var(--accent-soft);
}

.table tbody tr.is-survival td {
  background: var(--success-soft);
}

/* Inline semantic text colors for gain/loss cells. */
.danger { color: var(--danger); }
.success { color: var(--success); }

.table tbody tr.is-optimal td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

.table--nums td,
.table .num {
  font-variant-numeric: tabular-nums;
}

.table .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sweep-style heatmap table */
.heatmap {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.heatmap th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.heatmap tbody th {
  text-align: right;
  background: var(--surface-alt);
  color: var(--text-muted);
}

.heatmap td {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* Smaller secondary line under the heatmap axis labels (dollar offsets). */
.heatmap__sub {
  font-size: 10px;
  font-weight: var(--fw-normal);
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Metric list ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.metrics__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.metrics__label {
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semi);
}

.metrics__value {
  font-size: var(--fs-body);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}

.metrics__value--lg {
  font-size: 20px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
}

/* ---------- Chart ---------- */
.chart-wrap {
  width: 100%;
  max-width: 100%;
}

.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart__grid {
  stroke: var(--border);
  stroke-dasharray: 2 3;
}

.chart__axis {
  stroke: var(--border-strong);
}

.chart__point {
  fill: var(--text-muted);
  transition: fill 0.12s ease, r 0.12s ease;
}

.chart__point:hover {
  fill: var(--text);
}

.chart__point--optimal {
  fill: var(--accent);
}

.chart__halo {
  fill: var(--accent);
  fill-opacity: 0.18;
}

.chart__label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  fill: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.chart__tick {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  fill: var(--text-muted);
}

/* ---------- Formula card ---------- */
.formula {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface-alt);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--lh-loose);
}

.formula strong {
  font-weight: var(--fw-bold);
}

/* ---------- Banner ---------- */
.banner {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

.banner--warning {
  background: var(--warning-soft);
  border-color: #f6d77a;
  color: var(--warning);
}

.banner--danger {
  background: var(--danger-soft);
  border-color: #f5b3b3;
  color: var(--danger);
}

.banner__title {
  font-weight: var(--fw-semi);
  margin-right: var(--space-1);
}

/* ---------- Empty state ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  color: var(--text-faint);
}

.empty-state__title {
  color: var(--text);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
}

.empty-state__desc {
  max-width: 40ch;
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin: 0;
}

/* ---------- Auth shell ---------- */
.auth-shell {
  max-width: 420px;
  margin: var(--space-7) auto;
}

.auth-shell .card {
  margin-bottom: 0;
}

.auth-shell h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-3);
}

/* ---------- Optimize page layout ---------- */
.optimize-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.optimize-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.optimize-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .optimize-results {
    flex-direction: row;
    align-items: flex-start;
  }
  .optimize-rail {
    flex: 0 0 320px;
    position: sticky;
    top: var(--space-4);
  }
  .optimize-main {
    flex: 1;
    min-width: 0;
  }
}

.optimize-footer {
  color: var(--text-muted);
  font-size: var(--fs-eyebrow);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

/* ---------- Utilities ---------- */
.ta-right  { text-align: right; }
.ta-left   { text-align: left; }
.ta-center { text-align: center; }

.muted { color: var(--text-muted); }
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }

.inline {
  display: inline-block;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.hidden-mobile { display: initial; }
.hidden-desktop { display: none; }

/* ---------- Responsive: mobile table → cards ---------- */
@media (max-width: 719px) {
  .main {
    padding: var(--space-4);
  }

  .nav {
    padding: 0 var(--space-4);
  }

  .nav__tabs {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    min-height: auto;
    padding-bottom: var(--space-2);
  }

  .page-header__title { font-size: 24px; }

  .metrics { grid-template-columns: 1fr; }

  .hidden-mobile { display: none; }
  .hidden-desktop { display: initial; }

  .table { background: transparent; }

  .table thead {
    display: none;
  }

  .table tbody tr {
    display: block;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-sm);
  }

  .table tbody tr:hover td {
    background: transparent;
  }

  .table tbody tr.is-optimal {
    border-left: 3px solid var(--accent);
  }

  .table tbody tr.is-optimal td {
    background: transparent;
  }

  .table tbody tr.is-optimal td:first-child {
    box-shadow: none;
  }

  .table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-1) 0;
    border: 0;
    gap: var(--space-3);
    text-align: right;
  }

  .table tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--fw-semi);
    text-align: left;
    flex: 0 0 auto;
  }

  .table tbody td[data-label=""]::before {
    display: none;
  }

  .form__actions {
    justify-content: stretch;
  }

  .form__actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 959px) {
  .optimize-rail {
    position: static;
  }
}

/* ---------- Market strip (live prices bar) ---------- */
.market-strip {
  margin-bottom: var(--space-4);
}
.market-strip__body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
}
.market-strip__label {
  margin-right: 0;
}
.market-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.market-strip__symbol {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.market-strip__price {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.market-strip__source {
  margin-left: auto;
  color: var(--text-faint);
  font-size: var(--fs-eyebrow);
}

/* ---------- Explainer (<details> card) ---------- */
.explainer {
  margin-bottom: var(--space-4);
}
.explainer__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.explainer__summary::-webkit-details-marker { display: none; }
.explainer__summary::marker { content: ""; }
.explainer__summary::before {
  content: "▸";
  color: var(--text-muted);
  margin-right: var(--space-2);
  transition: transform 0.15s ease;
}
details[open] .explainer__summary::before {
  transform: rotate(90deg);
}
.explainer__hint {
  color: var(--text-faint);
  font-size: var(--fs-small);
}
.explainer__body {
  border-top: 1px solid var(--border);
}
.explainer__body p {
  margin: 0 0 var(--space-3);
  color: var(--text);
  line-height: var(--lh-loose);
  max-width: 68ch;
}
.explainer__heading {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin: var(--space-5) 0 var(--space-2);
}
.explainer__heading:first-child {
  margin-top: 0;
}

/* ---------- Glossary definition list ---------- */
.glossary {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-4);
}
.glossary dt {
  font-weight: var(--fw-semi);
  color: var(--text);
}
.glossary dd {
  margin: 0;
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
@media (max-width: 639px) {
  .glossary {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }
  .glossary dd {
    margin-bottom: var(--space-3);
  }
}

/* ---------- KV list (used for "Best setup found" card) ---------- */
.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.kv dt {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.kv dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}