/* ═══════════════════════════════════════════════════════════════════
   Scenario simulator — the Assumptions screen.
   Every class here is prefixed `sim-` (this screen's own: sim-asm, sim-reg, sim-edit,
   sim-history, sim-sens, sim-compare, sim-scn), and nothing styles a bare element outside
   those classes, so nothing leaks out of the section. The tokens are sim.css's custom
   properties; the shared chip, table and button classes it builds on are in sim.css.
   Served with the console's other stylesheets.
   ═══════════════════════════════════════════════════════════════════ */

/* Visually hidden, still read aloud (a column heading that is only buttons). */
.sim .sim-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Layout: the registry beside the other three blocks, stacked when narrow ── */
.sim-asm { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sim-asm__registry { flex: 999 1 620px; min-width: 0; }
.sim-asm__side { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sim-asm__side > .sim-card { min-width: 0; }
.sim-asm__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.sim-asm__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-asm__lead { margin: 2px 0 14px; }
.sim-asm__hint { margin: 0 0 8px; font-size: 14px; color: var(--sim-text-label); }
.sim-asm__foot { margin-top: 14px; }
.sim-asm__status { min-height: 1.4em; margin-bottom: 6px; font-size: 13px; color: var(--sim-muted); }
.sim-asm__status[data-problem="true"], .sim-edit__status[data-problem="true"] { color: var(--sim-accent-hover); font-weight: 600; }
.sim-asm__empty { padding: 12px 0; font-size: 14px; color: var(--sim-muted); }

/* ── Filter chips: outlined in the label's colour, filled when pressed ── */
.sim-filter {
  min-height: var(--sim-touch);
  padding: 0 14px;
  border: 1px solid var(--sim-text);
  border-radius: 999px;
  background: transparent;
  color: var(--sim-text);
  font-weight: 600;
}
.sim-filter--sourced { border-color: var(--sim-trust-sourced); color: var(--sim-trust-sourced); }
.sim-filter--benchmark { border-color: var(--sim-trust-benchmark); color: var(--sim-trust-benchmark); }
.sim-filter--team { border-color: var(--sim-trust-team); color: var(--sim-trust-team); }
.sim-filter--guess { border-color: var(--sim-accent); color: var(--sim-accent); }
.sim-filter[aria-pressed="true"] { background: currentColor; }
.sim-filter[aria-pressed="true"] > span { color: var(--sim-on-accent); }

/* ── The registry table ──
   Fixed layout, so that a long text in one row cannot widen a whole column: the columns
   take shares of the card (the <colgroup> in the view), the text cells wrap, and the table
   fits its card from 760 px up. Narrower than that it scrolls sideways inside its box, and
   the Actions column stays pinned to the right edge of the box, so Edit is never out of
   sight. */
.sim-reg { table-layout: fixed; width: 100%; min-width: 760px; }
.sim-reg th, .sim-reg td { padding-left: 6px; padding-right: 6px; overflow-wrap: anywhere; }
.sim-reg td { vertical-align: middle; }
.sim-reg__col-id { width: 6%; }
.sim-reg__col-name { width: 16%; }
.sim-reg__col-value { width: 10%; }
.sim-reg__col-label { width: 13%; }
.sim-reg__col-source { width: 20%; }
.sim-reg__col-actions { width: 15%; }
.sim-reg .sim-reg__mid { color: var(--sim-accent); font-weight: 600; }
/* A number keeps its line (sim.css); a text in a value cell wraps, and reads from the left. */
.sim-reg td.sim-reg__text { white-space: normal; text-align: left; }
.sim-reg .sim-chip { padding-left: 7px; padding-right: 7px; }
.sim-reg .sim-reg__source { color: var(--sim-muted); font-size: 13px; white-space: normal; }
.sim-reg .sim-reg__link { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.sim-reg tr[data-open="true"] > td { background: var(--sim-raised); }
.sim-reg .sim-reg__muted, .sim-reg .sim-reg__asof { display: block; color: var(--sim-muted); font-size: 12px; font-weight: 400; white-space: normal; }
.sim-reg .sim-mini { padding: 0 8px; }

/* The pinned column: opaque (the card's own colour, or the raised colour on the open row) so
   cells sliding under it do not show through, with a hairline on its left edge. A shadow, not a
   border: borders do not travel with a sticky cell in a collapsed table. */
.sim-reg th.sim-reg__actions, .sim-reg td.sim-reg__actions {
  position: sticky;
  right: 0;
  background: var(--sim-card);
  box-shadow: -1px 0 0 var(--sim-border);
  white-space: normal;
}
.sim-reg tr[data-open="true"] > td.sim-reg__actions { background: var(--sim-raised); }

.sim .sim-chip--sourced { border-color: var(--sim-trust-sourced); color: var(--sim-trust-sourced); }
.sim .sim-chip--benchmark { border-color: var(--sim-trust-benchmark); color: var(--sim-trust-benchmark); }
.sim .sim-chip--team { border-color: var(--sim-trust-team); color: var(--sim-trust-team); }

.sim-mini {
  min-height: 36px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--sim-radius-small);
  background: transparent;
  color: var(--sim-accent);
  font-weight: 600;
  text-decoration: underline;
}
.sim-mini:hover { color: var(--sim-accent-hover); }
.sim-mini[aria-expanded="true"], .sim-mini[aria-pressed="true"] { border-color: var(--sim-control-border); text-decoration: none; }
.sim-mini--danger { color: var(--warn); }

/* ── The edit form and the history, under the row ── */
.sim-edit, .sim-history {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-small);
  background: var(--sim-ground);
}
.sim-edit__hint { margin-bottom: 10px; font-size: 13px; color: var(--sim-muted); }
.sim-edit__cells { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sim-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 160px; font-size: 13px; color: var(--sim-muted); }
.sim-field--wide { flex-basis: 100%; }
.sim-field .sim-input, .sim-field .sim-select, .sim-field .sim-textarea { width: 100%; flex: none; color: var(--sim-text); font-size: 14px; }
.sim-edit__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sim-textarea {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--sim-control-border);
  border-radius: var(--sim-radius-small);
  background: var(--sim-ground);
  font: inherit;
  resize: vertical;
}
.sim-select {
  min-height: var(--sim-touch);
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--sim-control-border);
  border-radius: var(--sim-radius-small);
  background: var(--sim-ground);
  color: var(--sim-text);
  font: inherit;
}
.sim-edit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-edit__status { min-height: 1.4em; font-size: 13px; color: var(--sim-muted); }
.sim-button--primary { border-color: var(--sim-accent); background: var(--sim-accent); color: var(--sim-on-accent); }
.sim-button--primary:hover { background: var(--sim-accent-hover); color: var(--sim-on-accent); }
.sim-button[disabled] { opacity: 0.6; cursor: progress; }

.sim-history__title { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.sim-history__item { padding: 8px 0; border-top: 1px solid var(--sim-border); font-size: 14px; }
.sim-history__item:first-of-type { border-top: 0; }
.sim-history__meta { color: var(--sim-muted); font-size: 13px; }
.sim-history__note { margin-top: 2px; font-style: italic; }
.sim-history__changes { margin-top: 4px; }
.sim-history__changes li { overflow-wrap: anywhere; }

/* ── What moves the result: one SVG, drawn at its real width ── */
.sim-sens { display: block; width: 100%; height: 0; overflow: visible; }
.sim-sens__name { fill: var(--sim-text); font-size: 13px; }
.sim-sens__code { fill: var(--sim-muted); font-size: 12px; }
.sim-sens__range { fill: var(--sim-muted); font-size: 13px; }
.sim-sens__track { fill: var(--sim-border-faint); }
.sim-sens__bar { fill: var(--sim-mid); }
.sim-sens__bar--major { fill: var(--sim-accent); }
.sim-sens__mid { fill: var(--sim-you); }

/* ── Compare ── */
.sim-asm__pickers { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.sim-asm__pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 160px; font-size: 13px; color: var(--sim-muted); }
.sim-asm__pick .sim-select { width: 100%; }
.sim-compare { font-variant-numeric: tabular-nums; }
.sim-compare th:first-child, .sim-compare td:first-child { padding-left: 0; }
.sim-compare th:last-child, .sim-compare td:last-child { padding-right: 0; }
.sim-compare th[scope="col"] { color: var(--sim-text); font-size: 13px; }
.sim-compare .sim-compare__section th { padding-top: 14px; color: var(--sim-muted); font-size: 12px; }
.sim-compare .sim-compare__diff { color: var(--sim-accent); }
.sim-compare td:first-child { overflow-wrap: anywhere; }
.sim-compare .sim-compare__result td { font-weight: 600; }
.sim-compare .sim-compare__result td:first-child { font-weight: 400; color: var(--sim-muted); }

/* ── Saved scenarios ── */
.sim-scn { display: flex; flex-direction: column; }
.sim-scn__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--sim-border); }
.sim-scn__item:first-child { border-top: 0; padding-top: 0; }
.sim-scn__who { min-width: 0; flex: 1 1 160px; }
.sim-scn__name { display: block; overflow-wrap: anywhere; font-weight: 600; }
.sim-scn__meta { display: block; font-size: 13px; color: var(--sim-muted); }
.sim-scn__lock { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid var(--sim-control-border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--sim-text-label); }
.sim-scn__actions { display: flex; flex-wrap: wrap; gap: 4px; }
.sim-scn__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.sim-scn__ask { flex: 1 1 100%; font-size: 14px; }
.sim .sim-sens[hidden] { display: none; }

/* The panel under the table: the edit form or a row's history, full width of the card. */
.sim-asm__panel { margin-top: 16px; }
.sim-asm__panel[hidden] { display: none; }
.sim-asm__panel-title { margin: 0 0 8px; font-family: var(--sim-font-head); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.sim-asm__panel-mode { margin-left: 10px; padding: 0 8px; border: 1px solid var(--sim-control-border); border-radius: 999px; font-family: var(--sim-font-body); font-size: 12px; color: var(--sim-text-label); }
.sim-asm__still { margin-top: 12px; }
.sim-asm__still[hidden] { display: none; }

/* Marks on the sensitivity bars: a ring at the Lo end, a dot at the Hi end, a line for Mid. */
.sim-sens__lo { fill: var(--sim-card); stroke: var(--sim-text); stroke-width: 2px; }
.sim-sens__hi { fill: var(--sim-text); stroke: var(--sim-card); stroke-width: 1px; }
.sim-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.sim-dot--lo { border: 2px solid var(--sim-text); background: transparent; }
.sim-dot--hi { background: var(--sim-text); }
.sim-dot--mid { width: 2px; height: 14px; border-radius: 0; background: var(--sim-you); }