/* =============================================================================
   Mythos Backtest — components. Semantic tokens only (var(--mythos-*) / var(--bt-*)).
   Six states per interactive element: default, hover, active, focus-visible, disabled, loading.
   ============================================================================= */

/* ---- Buttons (visual 40/36, hit area >= 44 via ::after, never margin) ------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--mythos-space-3);
  height: var(--bt-control-h); padding: 0 15px; border: 1px solid transparent; border-radius: var(--mythos-radius-control);
  font: 600 14px/1.56 var(--mythos-font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--mythos-text-primary);
  transition: background-color var(--mythos-motion-micro) var(--mythos-ease-move), border-color var(--mythos-motion-micro) var(--mythos-ease-move);
}
.btn::after { content: ""; position: absolute; inset: calc(var(--bt-hit) * -1); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--mythos-accent); color: var(--mythos-text-on-accent); }
.btn--primary:hover { background: var(--mythos-accent-hover); }
.btn--primary:active { background: var(--mythos-accent-active); }
.btn--secondary { border-color: var(--mythos-border-control); }
.btn--secondary:hover { background: var(--bt-hover); }
.btn--secondary:active { background: var(--bt-press); }
.btn--ghost:hover { background: var(--bt-hover); }
.btn--ghost:active { background: var(--bt-press); }
.btn--compact { --bt-control-h: var(--mythos-size-control-compact); --bt-hit: 4px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--bt-control-h); padding: 0; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; color: var(--mythos-text-disabled); background: transparent; border-color: var(--mythos-border-hairline);
}
.btn--primary:disabled { background: color-mix(in srgb, var(--mythos-accent) 22%, transparent); border-color: transparent; }
.btn[aria-busy="true"] { cursor: progress; }
.link-btn {
  display: inline; padding: 0; border: 0; background: none; color: var(--mythos-link); font: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; text-align: start;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.icon { width: 24px; height: 24px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 32px; height: 32px; color: var(--mythos-text-secondary); }
@media (forced-colors: active) {
  /* A11Y-1: without gold, primary vs secondary is carried by border style (solid vs dashed). */
  .btn--primary { border: 2px solid ButtonText; }
  .btn--secondary { border: 1px dashed ButtonText; }
}

/* ---- Fields ---------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--mythos-space-2); min-width: 0; }
.field__label { font-size: 14px; font-weight: 500; line-height: 1.56; color: var(--mythos-text-primary); }
.field__optional { font-weight: 400; color: var(--mythos-text-secondary); }
.field__help { font-size: 14px; line-height: 1.56; color: var(--mythos-text-secondary); max-width: var(--mythos-container-prose); }
.field__error { display: flex; gap: var(--mythos-space-2); align-items: flex-start; font-size: 14px; line-height: 1.56; color: var(--bt-danger); max-width: var(--mythos-container-prose); }
.field__error .icon { margin-block-start: 2px; }
.field__extra { display: flex; flex-wrap: wrap; gap: var(--mythos-space-2); align-items: center; font-size: 13px; }
.field--inline { flex-direction: row; align-items: center; gap: var(--mythos-space-4); flex-wrap: wrap; }
.input {
  width: 100%; min-width: 0; height: var(--bt-control-h); padding: 0 var(--mythos-space-4);
  background: var(--mythos-surface); color: var(--mythos-text-primary); font: 400 16px/1.62 var(--mythos-font-text);
  border: 1px solid var(--mythos-border-control); border-radius: var(--mythos-radius-control);
}
.card .input, .dialog .input { background: var(--mythos-ground); }
.input--num { font-family: var(--mythos-font-mono); font-variant-numeric: tabular-nums; }
.input::placeholder { color: var(--mythos-text-disabled); }
.input:focus-visible { outline: 2px solid var(--mythos-focus-ring); outline-offset: 2px; }
.input:disabled { color: var(--mythos-text-disabled); border-color: var(--mythos-border-hairline); cursor: not-allowed; }
.field--error .input, .input[aria-invalid="true"] { border-color: var(--bt-danger); }
.select { position: relative; }
.select .input { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; inset-inline-end: 16px; inset-block-start: 50%; width: 7px; height: 7px; pointer-events: none;
  border-inline-end: 2px solid var(--mythos-text-secondary); border-block-end: 2px solid var(--mythos-text-secondary);
  transform: translateY(-70%) rotate(45deg);
}

/* ---- Checkbox / radio (visual 20, hit 44 via transparent border) -------------------------------- */
input[type="checkbox"]:not(.switch__input), input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 44px; height: 44px; margin: -12px; padding: 0; border: 12px solid transparent;
  background-color: var(--mythos-surface); background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--mythos-border-control); border-radius: 0; cursor: pointer;
}
input[type="checkbox"]:not(.switch__input) { border-radius: var(--mythos-radius-control); }
input[type="radio"] { border-radius: var(--mythos-radius-pill); }
input[type="checkbox"]:not(.switch__input):focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--mythos-focus-ring); outline-offset: -10px; }
input[type="checkbox"]:not(.switch__input):checked { background-color: var(--mythos-accent); box-shadow: inset 0 0 0 1px var(--mythos-accent); }
input[type="checkbox"]:not(.switch__input):checked::after {
  content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 2px; width: 5px; height: 10px;
  border: solid var(--mythos-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="checkbox"]:not(.switch__input):indeterminate { background-color: var(--mythos-accent); box-shadow: inset 0 0 0 1px var(--mythos-accent); }
input[type="checkbox"]:not(.switch__input):indeterminate::after {
  content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 9px; width: 10px; height: 2px; background: var(--mythos-text-on-accent);
}
input[type="radio"]:checked { box-shadow: inset 0 0 0 1px var(--mythos-accent); }
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: var(--mythos-radius-pill); background: var(--mythos-accent);
}
input:disabled { cursor: not-allowed; }
.check, .radio {
  display: flex; align-items: center; gap: var(--mythos-space-3); min-height: var(--mythos-size-touch-min);
  padding-inline-start: 0; cursor: pointer; font-size: 16px;
}
.check--inline { min-height: var(--mythos-size-touch-min); }
.check__box, .radio__dot { display: none; }
.checks, .radios { display: flex; flex-direction: column; gap: var(--mythos-space-1); }
.checks > legend, .radios > legend { margin-block-end: var(--mythos-space-2); }
.col-select { width: 44px; }
.col-select input { margin: -12px; }

/* ---- Switch (rectangular, radius-control; SHAPE-1). State is also written in text. -------------- */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--mythos-space-4); min-height: var(--mythos-size-touch-min); cursor: pointer; }
.switch__input { position: absolute; inset-inline-start: -2px; inset-block-start: 50%; width: 44px; height: 44px; margin: -22px 0 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch__track { position: relative; flex: none; width: 40px; height: 20px; background: var(--mythos-border-control); border-radius: var(--mythos-radius-control); transition: background-color var(--mythos-motion-micro); }
.switch__thumb { position: absolute; inset-inline-start: 2px; top: 50%; margin-top: -8px; width: 16px; height: 16px; background: var(--mythos-text-primary); border-radius: var(--mythos-radius-control); transition: transform var(--mythos-motion-micro); }
.switch__input:checked ~ .switch__track { background: var(--mythos-accent); }
.switch__input:checked ~ .switch__thumb { transform: translateX(20px); background: var(--mythos-text-on-accent); }
:root[dir="rtl"] .switch__input:checked ~ .switch__thumb { transform: translateX(-20px); }
.switch__input:focus-visible ~ .switch__track { outline: 2px solid var(--mythos-focus-ring); outline-offset: 2px; }
.switch__input:disabled ~ .switch__track { opacity: 0.4; }
.switch__state { font-size: 14px; color: var(--mythos-text-secondary); min-width: 3ch; }
.field--switch { gap: var(--mythos-space-2); }
.field--switch .switch { margin-inline-start: 0; }
@media (prefers-reduced-motion: reduce) { .switch__thumb { transition: none; } }

/* ---- Card, KPI -------------------------------------------------------------------------------- */
.card {
  background: var(--mythos-surface); border: 1px solid var(--mythos-border-hairline); border-radius: var(--mythos-radius-card);
  padding: var(--bt-card-pad); min-width: 0;
}
.card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--mythos-space-4); margin-block-end: var(--mythos-space-5); }
.card__title { color: var(--mythos-text-primary); }
.card__sub { font-size: 14px; color: var(--mythos-text-secondary); margin-block-start: var(--mythos-space-2); max-width: var(--mythos-container-prose); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--bt-gap-interactive); align-items: center; }
.card__body { min-width: 0; }
.card--flat { background: var(--mythos-ground); }
.card--table { padding: var(--mythos-space-5) 0 0; overflow: hidden; }
.card--table > .card__head { padding-inline: var(--mythos-space-5); }
.card--table > .card__body > .stack { padding-inline: var(--mythos-space-5); }
.card--table .table-wrap { border-inline: 0; }
.card--chart { padding: var(--mythos-space-5); }
.kpi-grid { display: grid; gap: var(--mythos-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.kpi-grid--dense { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--mythos-space-4); }
.kpi-grid--dense .kpi__value { font-size: 22px; overflow-wrap: normal; }
.kpi { background: var(--mythos-surface-card); border: 1px solid var(--mythos-border-hairline); border-radius: var(--mythos-radius-card); padding: var(--bt-card-pad); min-width: 0; }
.kpi__label { font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mythos-text-secondary); margin-block-end: var(--mythos-space-2); }
.kpi__value { font: 400 28px/1.2 var(--mythos-font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__value--accent { color: var(--mythos-accent); }
.kpi__value--null { color: var(--mythos-text-secondary); }
.kpi__sub, .kpi__reason { margin-block-start: var(--mythos-space-2); font-size: 13px; line-height: 1.46; color: var(--mythos-text-secondary); }

/* ---- Badge (radius-control, 12 % ground, solid dot, text at the semantic value) ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--mythos-space-2); min-height: 24px; padding: 0 var(--mythos-space-3);
  border-radius: var(--mythos-radius-control); font: 500 13px/1.46 var(--mythos-font-text); white-space: nowrap;
  background: var(--bt-neutral-dim); color: var(--bt-neutral);
}
.badge__dot { width: 6px; height: 6px; border-radius: var(--mythos-radius-pill); background: currentColor; flex: none; }
.badge--success { background: var(--bt-success-dim); color: var(--bt-success); }
.badge--warning { background: var(--bt-warning-dim); color: var(--bt-warning); }
.badge--danger { background: var(--bt-danger-dim); color: var(--bt-danger); }
.badge--info { background: var(--bt-info-dim); color: var(--bt-info); }
.badge--accent { background: var(--mythos-accent-dim); color: var(--mythos-accent); }
.badge--neutral { background: var(--bt-neutral-dim); color: var(--bt-neutral); }
/* status shape cues beyond colour: queued = ring, cancelled = square, interrupted = diamond */
.badge--status-queued .badge__dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.badge--status-cancelled .badge__dot { border-radius: 0; }
.badge--status-interrupted .badge__dot { border-radius: 0; transform: rotate(45deg); }
.badge--sample { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px currentColor; }

/* ---- Table (radius-none, tabular figures, sticky header, cards below 600 px) --------------------- */
.table-block { display: flex; flex-direction: column; gap: var(--mythos-space-4); min-width: 0; }
.table-wrap { overflow: auto; max-height: min(72vh, 720px); border-block: 1px solid var(--mythos-border-hairline); }
.table-wrap:focus-visible { outline-offset: -2px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.56; }
.table th, .table td { padding: var(--bt-row-pad) var(--mythos-space-5); text-align: start; border-bottom: 1px solid var(--mythos-border-hairline); vertical-align: middle; }
.table thead th {
  position: sticky; inset-block-start: 0; z-index: 1; background: var(--mythos-surface); padding-block: 0;
  font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mythos-text-secondary); white-space: nowrap;
}
.table thead th:not(:has(.th-sort)) { padding-block: var(--mythos-space-4); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bt-row-hover); }
.table tbody tr.is-selected { background: var(--mythos-accent-dim); }
.table .col-num, .table .col-date { font-family: var(--mythos-font-mono); font-variant-numeric: tabular-nums; }
.table td.col-num, .table th.col-num { text-align: end; }
.table td.col-primary { padding-block: 0; }
.table .row-empty:hover { background: none; }
.table td.col-date { white-space: nowrap; }
.th-sort {
  display: inline-flex; align-items: center; gap: var(--mythos-space-3); min-height: var(--mythos-size-touch-min); padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
}
.th-sort:hover { color: var(--mythos-text-primary); }
.sort-ind { width: 0; height: 0; border-inline: 4px solid transparent; border-block-start: 5px solid currentColor; opacity: 0.4; }
th[aria-sort="ascending"] .sort-ind { border-block-start: 0; border-block-end: 5px solid currentColor; opacity: 1; }
th[aria-sort="descending"] .sort-ind { opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--mythos-text-primary); }
.row-link { display: inline-flex; align-items: center; min-height: var(--mythos-size-touch-min); font-weight: 500; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--mythos-space-5); }
.table--static .col-primary { padding-block: var(--bt-row-pad); }
.table-sort-mobile { display: none; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mythos-space-4) var(--mythos-space-5); padding-inline: var(--mythos-space-5); padding-block-end: var(--mythos-space-5); }
.card:not(.card--table) .pager { padding-inline: 0; padding-block-end: 0; }
.pager__info, .pager__page { font-size: 14px; color: var(--mythos-text-secondary); }
.pager__ctl { display: flex; align-items: center; gap: var(--mythos-space-5); }
.table--compare th[scope="row"] { font-weight: 500; }
@media (max-width: 599.98px) {
  .table-sort-mobile { display: block; padding-inline: var(--mythos-space-5); }
  .card:not(.card--table) .table-sort-mobile { padding-inline: 0; }
  .table-wrap { overflow: visible; max-height: none; border: 0; padding-inline: var(--mythos-space-4); }
  .card:not(.card--table) .table-wrap { padding-inline: 0; }
  .table, .table tbody { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tr {
    display: block; margin-block-end: var(--mythos-space-4); padding: var(--mythos-space-3) var(--mythos-space-4);
    background: var(--mythos-surface-card); border: 1px solid var(--mythos-border-hairline); border-radius: var(--mythos-radius-card);
  }
  .table tr:hover { background: var(--mythos-surface-card); }
  .table td, .table th[scope="row"] {
    display: flex; justify-content: space-between; align-items: center; gap: var(--mythos-space-4); padding: var(--mythos-space-2) 0;
    border: 0; text-align: end; min-height: 32px;
  }
  .table td.col-select { width: auto; }
  .table td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: start;
    font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mythos-text-secondary);
  }
  .table td.col-primary, .table th[scope="row"].col-primary { display: block; text-align: start; font: 600 16px/1.4 var(--mythos-font-text); padding-block: var(--mythos-space-2); }
  .table td.col-primary::before { display: none; }
  .table .row-empty td { display: block; text-align: start; }
  .table .row-empty td::before { display: none; }
  .row-actions { justify-content: flex-end; }
}

/* ---- Tabs (derived from the navigation active marker; scroll inside own container) --------------- */
.tabs { display: flex; gap: var(--mythos-space-5); overflow-x: auto; border-block-end: 1px solid var(--mythos-border-hairline); }
.tabs [role="tab"] {
  position: relative; flex: none; min-height: var(--mythos-size-touch-min); padding: 0 var(--mythos-space-2); border: 0; background: none;
  color: var(--mythos-text-secondary); font: 500 14px/1.56 var(--mythos-font-text); cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--mythos-text-primary); box-shadow: inset 0 -2px 0 var(--mythos-accent); }
.tabs [role="tab"]:hover { color: var(--mythos-text-primary); }

/* ---- Alert / banner / empty / error ---------------------------------------------------------------- */
.alert {
  display: grid; grid-template-columns: auto 1fr; gap: var(--mythos-space-4); align-items: start; padding: var(--mythos-space-5);
  border-radius: var(--mythos-radius-card); border-inline-start: 2px solid var(--bt-info); background: var(--bt-info-dim);
}
.alert .icon { margin-block-start: 1px; color: var(--bt-info); }
.alert--success { border-color: var(--bt-success); background: var(--bt-success-dim); }
.alert--success .icon { color: var(--bt-success); }
.alert--warning { border-color: var(--bt-warning); background: var(--bt-warning-dim); }
.alert--warning .icon { color: var(--bt-warning); }
.alert--danger { border-color: var(--bt-danger); background: var(--bt-danger-dim); }
.alert--danger .icon { color: var(--bt-danger); }
.alert__title { font-weight: 600; margin-block-end: var(--mythos-space-2); }
.alert__body { min-width: 0; }
.alert__body .progress { margin-block: var(--mythos-space-3); }
.plain-list { display: flex; flex-direction: column; gap: var(--mythos-space-2); list-style: disc; padding-inline-start: var(--mythos-space-5); }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mythos-space-4); padding: var(--mythos-space-3) var(--mythos-grid-margin-sm); font-size: 14px; border-block-end: 1px solid var(--bt-warning); background: var(--bt-warning-dim); }
.banner .icon { color: var(--bt-warning); }
.banner__text { flex: 1 1 240px; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--mythos-space-4); padding: var(--mythos-space-8) var(--mythos-space-5); }
.empty-state__body { max-width: var(--mythos-container-prose); color: var(--mythos-text-secondary); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bt-gap-interactive); }
.empty-state--error .icon { color: var(--bt-danger); }
.notice { font-size: 13px; line-height: 1.46; color: var(--mythos-text-secondary); }

/* ---- Skeleton (static: no shimmer, no loop; MOTION-1) ------------------------------------------------ */
.skeleton-block { display: flex; flex-direction: column; gap: var(--mythos-space-3); padding: var(--mythos-space-2) 0; }
.skeleton { display: block; height: 16px; background: var(--mythos-surface-card); border-radius: var(--mythos-radius-control); }
.skeleton--w40 { width: 40%; } .skeleton--w70 { width: 70%; } .skeleton--w100 { width: 100%; }
.skeleton--card { height: 88px; }
.skeleton--chart { height: 240px; width: 100%; }
.skeleton-grid { display: grid; gap: var(--mythos-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ---- Progress (determinate only) ----------------------------------------------------------------------- */
.progress { display: flex; align-items: center; gap: var(--mythos-space-4); }
.progress__bar { appearance: none; -webkit-appearance: none; flex: 1; height: 8px; border: 0; background: var(--mythos-border-hairline); border-radius: var(--mythos-radius-control); overflow: hidden; }
.progress__bar::-webkit-progress-bar { background: var(--mythos-border-hairline); }
.progress__bar::-webkit-progress-value { background: var(--mythos-accent); }
.progress__bar::-moz-progress-bar { background: var(--mythos-accent); }
.progress__num { font: 400 14px/1.44 var(--mythos-font-mono); min-width: 4ch; text-align: end; }

/* ---- Key/value lists, logs ------------------------------------------------------------------------------ */
.kv { display: grid; gap: var(--mythos-space-3); }
.kv--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--mythos-space-4) var(--mythos-space-5); }
.kv__row { min-width: 0; }
.kv dt { font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mythos-text-secondary); margin-block-end: var(--mythos-space-1); }
.kv dd { font-size: 14px; line-height: 1.56; overflow-wrap: anywhere; }
.log { max-height: 320px; overflow: auto; padding: var(--mythos-space-3); background: var(--mythos-ground-deep); border: 1px solid var(--mythos-border-hairline); border-radius: var(--mythos-radius-control); font: 400 13px/1.5 var(--mythos-font-mono); }
.log__line { display: grid; grid-template-columns: 8ch 7ch 1fr; gap: var(--mythos-space-3); padding-block: 1px; }
.log__time, .log__level { color: var(--mythos-text-secondary); }
.log__line--error .log__level { color: var(--bt-danger); font-weight: 600; }
.log__line--warn .log__level, .log__line--warning .log__level { color: var(--bt-warning); font-weight: 600; }
.log__empty { color: var(--mythos-text-secondary); }
.code { font-family: var(--mythos-font-mono); font-weight: 600; }
.event-list { display: flex; flex-direction: column; gap: var(--mythos-space-4); }
.event-list li { padding-block-end: var(--mythos-space-4); border-block-end: 1px solid var(--mythos-border-hairline); }
.event-list li:last-child { border: 0; padding: 0; }
.event-list__msg { margin-block: var(--mythos-space-2); overflow-wrap: anywhere; }
.artifact-list { display: flex; flex-direction: column; gap: var(--mythos-space-2); }
.artifact-list a { display: inline-flex; align-items: center; min-height: var(--mythos-size-touch-min); }
.disclosure > summary { display: flex; align-items: center; min-height: var(--mythos-size-touch-min); font-weight: 500; }
.disclosure[open] > summary { margin-block-end: var(--mythos-space-3); }

/* ---- Forms ------------------------------------------------------------------------------------------------ */
.form { display: flex; flex-direction: column; gap: var(--mythos-space-6); }
.form__note { font-size: 14px; color: var(--mythos-text-secondary); }
.form-body { display: flex; flex-direction: column; gap: var(--mythos-space-8); }
.form-group { display: flex; flex-direction: column; gap: var(--mythos-space-5); }
.form-group__title { font: 600 18px/1.32 var(--mythos-font-text); padding: 0; margin-block-end: var(--mythos-space-5); }
.form-grid { display: grid; gap: var(--mythos-space-6); grid-template-columns: 1fr; }
@media (min-width: 960px) { .form-grid:not(.form-grid--one) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--bt-gap-interactive); }
.error-summary { padding: var(--mythos-space-5); border-radius: var(--mythos-radius-card); border-inline-start: 2px solid var(--bt-danger); background: var(--bt-danger-dim); display: flex; flex-direction: column; gap: var(--mythos-space-3); }
.error-summary ul { display: flex; flex-direction: column; gap: var(--mythos-space-2); list-style: disc; padding-inline-start: var(--mythos-space-5); }
.error-summary .link-btn { min-height: 28px; font-weight: 500; }
@media (max-width: 599.98px) { .form__actions .btn--primary { width: 100%; } }

/* ---- Dialog (full-screen at sm), toast ---------------------------------------------------------------------- */
.dialog-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--mythos-space-5); background: var(--bt-scrim); animation: bt-fade var(--mythos-motion-overlay) var(--mythos-ease-enter); }
.dialog {
  width: 100%; max-width: 480px; padding: var(--mythos-space-6); background: var(--mythos-surface); border: 1px solid var(--mythos-border-hairline);
  border-radius: var(--mythos-radius-overlay); box-shadow: var(--mythos-shadow-overlay); display: flex; flex-direction: column; gap: var(--mythos-space-4);
  animation: bt-rise var(--mythos-motion-overlay) var(--mythos-ease-enter);
}
.dialog__body { color: var(--mythos-text-secondary); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--bt-gap-interactive); margin-block-start: var(--mythos-space-4); }
@media (max-width: 599.98px) {
  .dialog-backdrop { padding: 0; }
  .dialog { max-width: none; height: 100%; border-radius: 0; justify-content: center; }
  .dialog__actions { flex-direction: column-reverse; } .dialog__actions .btn { width: 100%; }
}
.toast-region { position: fixed; z-index: 60; inset-inline-end: var(--mythos-space-5); inset-block-end: var(--mythos-space-5); width: min(420px, calc(100vw - 2 * var(--mythos-space-5))); pointer-events: none; }
.toast-list { display: flex; flex-direction: column; gap: var(--mythos-space-3); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--mythos-space-3); padding: var(--mythos-space-3) var(--mythos-space-3) var(--mythos-space-3) var(--mythos-space-4);
  background: var(--mythos-surface-card); border: 1px solid var(--mythos-border-hairline); border-inline-start: 2px solid var(--bt-success);
  border-radius: var(--mythos-radius-card); box-shadow: var(--mythos-shadow-floating);
  animation: bt-toast-in var(--mythos-motion-enter) var(--mythos-ease-enter);
}
.toast .icon { color: var(--bt-success); }
.toast--danger { border-inline-start-color: var(--bt-danger); } .toast--danger .icon { color: var(--bt-danger); }
.toast--warning { border-inline-start-color: var(--bt-warning); } .toast--warning .icon { color: var(--bt-warning); }
.toast__text { flex: 1; font-size: 14px; }
/* The toast's 35 degree entrance is the view's one gesture (A-012): travel = 20 px along 35 degrees, same absolute direction in RTL. */
@keyframes bt-toast-in { from { opacity: 0; transform: translate(-16.4px, 11.5px); } to { opacity: 1; transform: none; } }
@keyframes bt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation-name: bt-fade; }
  .dialog { animation-name: bt-fade; }
}

/* ---- Charts (inline SVG; static) ------------------------------------------------------------------------------- */
.chart { display: flex; flex-direction: column; gap: var(--mythos-space-3); min-width: 0; }
.chart__title { font: 600 16px/1.4 var(--mythos-font-text); }
.chart__caption { font-weight: 400; font-size: 13px; color: var(--mythos-text-secondary); }
.chart__plot { min-width: 0; }
.chart__svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.chart--square .chart__svg { max-width: 420px; margin-inline: auto; }
.chart__grid line { stroke: var(--mythos-border-hairline); stroke-width: 1; }
.chart__axisline { stroke: var(--mythos-border-control); stroke-width: 1; }
.chart__baseline { stroke: var(--mythos-text-secondary); stroke-width: 1; stroke-dasharray: 4 4; }
.chart__tick { fill: var(--mythos-text-secondary); font: 400 13px var(--mythos-font-mono); font-variant-numeric: tabular-nums; }
.chart__axislabel { fill: var(--mythos-text-secondary); font: 500 13px var(--mythos-font-text); }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line.is-dashed { stroke-dasharray: 7 4; }
.chart__swatch .chart__line { stroke-width: 3; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--mythos-space-2) var(--mythos-space-5); font-size: 14px; }
.chart__legend li { display: inline-flex; align-items: center; gap: var(--mythos-space-3); }
.chart__bar.is-neg { fill: var(--bt-danger); }
.chart__data { font-size: 14px; }
.chart__data > summary { display: flex; align-items: center; min-height: var(--mythos-size-touch-min); color: var(--mythos-text-secondary); }
.chart__table { border-collapse: collapse; margin-block-end: var(--mythos-space-4); }
.chart__table caption { text-align: start; font-weight: 600; padding-block-end: var(--mythos-space-2); }
.chart__table th, .chart__table td { padding: var(--mythos-space-1) var(--mythos-space-5) var(--mythos-space-1) 0; text-align: start; }
.chart__table .num { text-align: end; font-family: var(--mythos-font-mono); font-variant-numeric: tabular-nums; }
.chart-stack { display: grid; gap: var(--mythos-space-5); }
.chart__line.series-1, .chart__swatch .series-1 { stroke: var(--bt-series-1); } .chart__area.series-1, .chart__dot.series-1, .chart__bar.series-1 { fill: var(--bt-series-1); }
.chart__line.series-2 { stroke: var(--bt-series-2); } .chart__area.series-2, .chart__dot.series-2, .chart__bar.series-2 { fill: var(--bt-series-2); }
.chart__line.series-3 { stroke: var(--bt-series-3); } .chart__area.series-3, .chart__dot.series-3, .chart__bar.series-3 { fill: var(--bt-series-3); }
.chart__line.series-4 { stroke: var(--bt-series-4); } .chart__area.series-4, .chart__dot.series-4, .chart__bar.series-4 { fill: var(--bt-series-4); }
.chart__line.series-5 { stroke: var(--bt-series-5); } .chart__area.series-5, .chart__dot.series-5, .chart__bar.series-5 { fill: var(--bt-series-5); }
.chart__line.series-6 { stroke: var(--bt-series-6); } .chart__area.series-6, .chart__dot.series-6, .chart__bar.series-6 { fill: var(--bt-series-6); }
.chart__line.series-7 { stroke: var(--bt-series-7); } .chart__area.series-7, .chart__dot.series-7, .chart__bar.series-7 { fill: var(--bt-series-7); }
.chart__line.series-8 { stroke: var(--bt-series-8); } .chart__area.series-8, .chart__dot.series-8, .chart__bar.series-8 { fill: var(--bt-series-8); }
/* areas are a 20 % wash of the series colour; the line carries the data */
.chart__area { fill-opacity: 0.2; stroke: none; }
/* non-colour series cues: dash patterns beyond the first series */
.chart__line.series-2 { stroke-dasharray: 7 4; } .chart__line.series-3 { stroke-dasharray: 2 4; }
.chart__line.series-4 { stroke-dasharray: 10 3 2 3; } .chart__line.series-5 { stroke-dasharray: 14 4; }
.chart__line.series-6 { stroke-dasharray: 1 3; } .chart__line.series-7 { stroke-dasharray: 8 3 2 3 2 3; } .chart__line.series-8 { stroke-dasharray: 3 3; }
.chart__line.is-dashed.series-1 { stroke-dasharray: 7 4; }

/* ---- Advanced disclosure (one component everywhere): native details/summary, 44 px summary, chevron ----------------- */
.advanced { min-width: 0; }
.advanced__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mythos-space-4); list-style: none;
  min-height: var(--mythos-size-touch-min); padding: 0 var(--mythos-space-4); cursor: pointer;
  border: 1px solid var(--mythos-border-control); border-radius: var(--mythos-radius-control);
  background: var(--mythos-surface-card); color: var(--mythos-text-primary); font-weight: 600; font-size: 14px;
  transition: background-color var(--mythos-motion-micro) var(--mythos-ease-move);
}
.advanced__summary::-webkit-details-marker { display: none; }
.advanced__summary::marker { content: ""; }
.advanced__summary:hover { background: var(--bt-hover); }
.advanced__summary:active { background: var(--bt-press); }
.advanced__summary:focus-visible { outline: 2px solid var(--mythos-focus-ring); outline-offset: 2px; }
.advanced__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mythos-space-2) var(--mythos-space-4); min-width: 0; }
.advanced__hint { font-weight: 400; color: var(--mythos-text-secondary); }
.advanced__chev { color: var(--mythos-text-secondary); transition: transform var(--mythos-motion-micro) var(--mythos-ease-move); }
.advanced[open] > .advanced__summary .advanced__chev { transform: rotate(180deg); }
.advanced__body { display: flex; flex-direction: column; gap: var(--mythos-space-6); padding-block: var(--mythos-space-6) var(--mythos-space-2); min-width: 0; }
.advanced .advanced > .advanced__summary { border-style: dashed; }
.adv-section { display: flex; flex-direction: column; gap: var(--mythos-space-4); min-width: 0; }
.adv-section__title { color: var(--mythos-text-primary); }
.adv-host { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .advanced__chev { transition: none; } }

/* ---- Figures: signed values are coloured by sign as well, never by colour alone ------------------------------------ */
.kpi-grid--summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--mythos-space-4); }
.kpi-grid--summary .kpi { padding: var(--mythos-space-5); }
.kpi-grid--summary .kpi__value { font-size: 24px; overflow-wrap: normal; }
.kpi-grid--summary .kpi__sub { white-space: nowrap; font-size: 12px; }
.kpi__value--pos { color: var(--bt-success); }
.kpi__value--neg { color: var(--bt-danger); }
.tone--pos { color: var(--bt-success); }
.tone--neg { color: var(--bt-danger); }
.limits-list { max-width: var(--mythos-container-prose); }

/* ---- New test: numbered steps and the two domain cards --------------------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: var(--mythos-space-7); }
.step { display: flex; flex-direction: column; gap: var(--mythos-space-4); min-width: 0; }
.step__title { display: flex; align-items: center; gap: var(--mythos-space-4); font: 600 18px/1.32 var(--mythos-font-text); }
.step__num {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--mythos-border-control);
  border-radius: var(--mythos-radius-control); font: 500 14px/1 var(--mythos-font-mono); color: var(--mythos-text-secondary);
}
.step__body { min-width: 0; }
.step__note { margin-block-start: var(--mythos-space-3); font-size: 14px; line-height: 1.56; color: var(--mythos-text-secondary); max-width: var(--mythos-container-prose); }
.simple-form { gap: var(--mythos-space-7); }
.choice-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mythos-space-4); }
@media (min-width: 600px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  display: flex; align-items: flex-start; gap: var(--mythos-space-4); min-height: 88px; padding: var(--mythos-space-5); cursor: pointer;
  border: 1px solid var(--mythos-border-control); border-radius: var(--mythos-radius-card); background: var(--mythos-surface-card);
  transition: background-color var(--mythos-motion-micro) var(--mythos-ease-move);
}
.choice:hover { background: var(--bt-hover); }
.choice.is-selected { border-color: var(--mythos-accent); background: var(--mythos-accent-dim); box-shadow: inset 0 0 0 1px var(--mythos-accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--mythos-focus-ring); outline-offset: 2px; }
.choice__text { display: flex; flex-direction: column; gap: var(--mythos-space-2); min-width: 0; }
.choice__title { font: 600 18px/1.32 var(--mythos-font-text); }
.choice__hint { font-size: 14px; line-height: 1.56; color: var(--mythos-text-secondary); }

/* ---- Recent tests (compact list) ------------------------------------------------------------------------------------------ */
.recent__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mythos-space-4); margin-block-end: var(--mythos-space-3); }
.recent__list { border-block: 1px solid var(--mythos-border-hairline); }
.recent__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--mythos-space-2) var(--mythos-space-5);
  padding-block: var(--mythos-space-2); border-block-end: 1px solid var(--mythos-border-hairline);
}
.recent__row:last-child { border-block-end: 0; }
.recent__name { overflow-wrap: anywhere; }
.recent__result { font: 400 14px/1.44 var(--mythos-font-mono); font-variant-numeric: tabular-nums; text-align: end; min-width: 8ch; }
@media (max-width: 599.98px) {
  .recent__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "result status"; }
  .recent__name { grid-area: name; }
  .recent__result { grid-area: result; text-align: start; }
  .recent__status { grid-area: status; }
}

/* ---- BET workspace ------------------------------------------------------------------------------------------------------------ */
.bet-page > * { max-width: 1040px; }
.bet-page > .page-head { margin-block-end: var(--mythos-space-6); }
.bet-page > * + * { margin-block-start: var(--mythos-space-6); }
.bet-body { display: flex; flex-direction: column; gap: var(--mythos-space-7); min-width: 0; }
.bet-banner {
  display: flex; align-items: flex-start; gap: var(--mythos-space-4); padding: var(--mythos-space-4) var(--mythos-space-5);
  border: 1px solid var(--bt-warning); border-inline-start-width: 2px; border-radius: var(--mythos-radius-card); background: var(--bt-warning-dim);
}
.bet-banner .icon { flex: none; margin-block-start: 2px; color: var(--bt-warning); }
.bet-banner__body { display: flex; flex-direction: column; gap: var(--mythos-space-1); min-width: 0; font-size: 14px; line-height: 1.56; }
.bet-banner__link { display: inline-flex; align-items: center; min-height: var(--mythos-size-touch-min); font-weight: 500; width: fit-content; }
.bet-banner--short .bet-banner__body { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--mythos-space-5); }
.bet-rules__cols { display: grid; gap: var(--mythos-space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .bet-rules__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bet-rules__h, .bet-sub__title { font: 600 16px/1.4 var(--mythos-font-text); margin-block-end: var(--mythos-space-3); }
.bet-sub { display: flex; flex-direction: column; margin-block-start: var(--mythos-space-5); }
.bet-steps .step__body, .bet-steps .bet-dataset { min-width: 0; }
.choice-grid--bet { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .choice-grid--bet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .choice-grid--bet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice--bet .choice__text { gap: var(--mythos-space-2); }
.bet-choice__badge { display: flex; }
.bet-choice__nums { font: 400 13px/1.46 var(--mythos-font-mono); color: var(--mythos-text-secondary); overflow-wrap: anywhere; }
.choice.is-disabled { cursor: not-allowed; opacity: 0.6; }
.bet-steps .advanced { margin-block-start: var(--mythos-space-4); }
.bet-steps .table-wrap { margin-block-end: var(--mythos-space-4); max-height: none; }
.table--bet th, .table--bet td { vertical-align: top; }
.table--text td { text-align: start; font-size: 14px; min-width: 150px; }
@media (max-width: 599.98px) {
  .table--text td { display: block; text-align: start; min-width: 0; }
  .table--text td::before { display: block; max-width: none; margin-block-end: var(--mythos-space-1); }
}
.bet-json {
  margin: 0; padding: var(--mythos-space-4); max-height: 420px; overflow: auto; white-space: pre; tab-size: 2;
  font: 400 13px/1.5 var(--mythos-font-mono); background: var(--mythos-ground); border: 1px solid var(--mythos-border-hairline); border-radius: var(--mythos-radius-card);
}
.bet-json:focus-visible { outline-offset: -2px; }
.bet-recent { margin-block-start: var(--mythos-space-4); }
.bet-recent > h2 { margin-block-end: var(--mythos-space-3); }
.bet-variant { display: flex; flex-direction: column; gap: var(--mythos-space-2); }
.bet-variant__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mythos-space-3) var(--mythos-space-4); }
.bet-variant__id { font: 600 18px/1.32 var(--mythos-font-text); }
.bet-variant__note { font-size: 14px; color: var(--mythos-text-secondary); }
.kpi-grid--bet .kpi__sub { white-space: normal; overflow-wrap: anywhere; }
.bet-notes { max-width: var(--mythos-container-prose); }
.bet-notes__title { font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mythos-text-secondary); margin-block-end: var(--mythos-space-3); }
.bet-fair { display: flex; flex-direction: column; gap: var(--mythos-space-3); }
.bet-col__tag, .bet-col__ctx { display: block; font: 400 12px/1.34 var(--mythos-font-text); letter-spacing: 0; text-transform: none; color: var(--mythos-text-secondary); white-space: normal; }
.table--bet th.col-num { text-align: end; }
.bet-wait { display: flex; flex-direction: column; border-block: 1px solid var(--mythos-border-hairline); }
.bet-wait__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mythos-space-3) var(--mythos-space-5); padding-block: var(--mythos-space-3); border-block-end: 1px solid var(--mythos-border-hairline); }
.bet-wait__row:last-child { border-block-end: 0; }
.bet-wait__name { font-weight: 600; min-width: 6ch; }
.bet-wait__row .progress { flex: 1 1 160px; }