/* ═══════════════════════════════════════════════════════════════════
   Scenario simulator — a section of the console, light or dark with it.
   Everything hangs off one wrapper class, `.sim`, so nothing leaks into the rest
   of the admin. Simulator views use these classes and custom properties, not
   Tailwind colour utilities, so the section looks the same whether or not the
   Tailwind build has run. Tokens: docs/design/scenario-simulator-contract.md §8 and
   docs/design/console-theming.md §8.
   ═══════════════════════════════════════════════════════════════════ */

/* Where the job is the same as the console's, a simulator name points at the console token,
   which changes with the theme on its own: no dark block is needed for these. The names that
   are the section's own (chart series, trust colours, one text colour) have a light value here
   and a dark value in the two dark blocks below.
   Light is the default; dark is chosen by the same two selectors the console uses
   (docs/design/console-theming.md §1), scoped to the wrapper. */
.sim {
  /* Surfaces and text: the console's tokens */
  --sim-ground: var(--page);
  --sim-text: var(--ink);
  --sim-raised: var(--field);
  --sim-card: var(--surface);
  --sim-border: var(--line);
  --sim-border-faint: var(--line-faint);
  --sim-control-border: var(--line-strong);
  --sim-muted: var(--ink-muted);
  --sim-accent: var(--accent-ink);
  --sim-accent-hover: var(--accent-strong);
  --sim-on-accent: var(--on-accent);
  /* Between ink and ink-muted; the section's own */
  --sim-text-label: #3d342c;
  /* Series: marks, never text. */
  --sim-lo: #7a2a1c;
  --sim-mid: #c2501e;
  --sim-hi: #b08f00;
  --sim-you: var(--ink);
  --sim-paid: #2a78d6;
  --sim-competitor: #00806a;
  --sim-competitor-2: #7a3fae;
  --sim-competitor-3: #c14389;
  /* Where installs come from: our own two sources are warm, paid is --sim-paid */
  --sim-organic: #b08f00;
  --sim-wom: #c2501e;
  /* Trust: words in a colour, so they are not series colours */
  --sim-trust-sourced: #00806a;
  --sim-trust-benchmark: var(--info);
  --sim-trust-team: var(--attention);
  /* Funnel: how far down a bar is, and the text on it. The step at which the text turns
     differs by theme, so each tone has its own. */
  --sim-tone-1: #dba63a;
  --sim-tone-2: #d08f2e;
  --sim-tone-3: #c77b28;
  --sim-tone-4: #a44a1a;
  --sim-tone-5: #84311d;
  --sim-tone-6: #641f12;
  --sim-on-tone-1: #2a2520;
  --sim-on-tone-2: #2a2520;
  --sim-on-tone-3: #2a2520;
  --sim-on-tone-4: #ffffff;
  --sim-on-tone-5: #ffffff;
  --sim-on-tone-6: #ffffff;
  /* Type */
  --sim-font-head: Montserrat, "Source Sans 3", system-ui, sans-serif;
  --sim-font-body: "Source Sans 3", system-ui, sans-serif;
  --sim-radius: 14px;
  --sim-radius-small: 8px;
  --sim-touch: 44px;

  container-type: inline-size;
  box-sizing: border-box;
  min-width: 0;
  color: var(--sim-text);
  font-family: var(--sim-font-body);
  font-size: 15px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* The dark values, twice with the same content: chosen by the cookie, and by the browser's
   preference when there is no cookie. Keep the two identical (simulator_theme_spec checks). */
:root[data-theme="dark"] .sim {
  --sim-text-label: #EADBC8;
  --sim-lo: #B8553A;
  --sim-mid: #E08A45;
  --sim-hi: #F7D488;
  --sim-you: #FFF6E8;
  --sim-paid: #8CC4F0;
  --sim-competitor: #6FD0C0;
  --sim-competitor-2: #B9A7F2;
  --sim-competitor-3: #E3A0C8;
  --sim-organic: #F7D488;
  --sim-wom: #D9773D;
  --sim-trust-sourced: #6FD0C0;
  --sim-trust-benchmark: #8CC4F0;
  --sim-trust-team: #F7D488;
  --sim-tone-1: #F7D488;
  --sim-tone-2: #F2C375;
  --sim-tone-3: #EFB563;
  --sim-tone-4: #E08A45;
  --sim-tone-5: #A8452C;
  --sim-tone-6: #7A2A1B;
  --sim-on-tone-1: #1B1210;
  --sim-on-tone-2: #1B1210;
  --sim-on-tone-3: #1B1210;
  --sim-on-tone-4: #1B1210;
  --sim-on-tone-5: #FFF6E8;
  --sim-on-tone-6: #FFF6E8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sim {
    --sim-text-label: #EADBC8;
    --sim-lo: #B8553A;
    --sim-mid: #E08A45;
    --sim-hi: #F7D488;
    --sim-you: #FFF6E8;
    --sim-paid: #8CC4F0;
    --sim-competitor: #6FD0C0;
    --sim-competitor-2: #B9A7F2;
    --sim-competitor-3: #E3A0C8;
    --sim-organic: #F7D488;
    --sim-wom: #D9773D;
    --sim-trust-sourced: #6FD0C0;
    --sim-trust-benchmark: #8CC4F0;
    --sim-trust-team: #F7D488;
    --sim-tone-1: #F7D488;
    --sim-tone-2: #F2C375;
    --sim-tone-3: #EFB563;
    --sim-tone-4: #E08A45;
    --sim-tone-5: #A8452C;
    --sim-tone-6: #7A2A1B;
    --sim-on-tone-1: #1B1210;
    --sim-on-tone-2: #1B1210;
    --sim-on-tone-3: #1B1210;
    --sim-on-tone-4: #1B1210;
    --sim-on-tone-5: #FFF6E8;
    --sim-on-tone-6: #FFF6E8;
  }
}

/* The page behind the section is the console's own (the layout's wrapper carries
   `bg-page text-ink`, and the shell marks it `data-sim-page`). One rule is the section's:
   the light-theme decorations (temple silhouette, petals, garland, prayer flags) are not
   shown on a simulator page, in either theme — its pages are charts and tables. */
div[data-sim-page] [data-admin-decoration] { display: none; }

.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }
.sim h1, .sim h2, .sim p, .sim ul { margin: 0; padding: 0; }
.sim ul { list-style: none; }
.sim button { font: inherit; cursor: pointer; }
.sim a { color: var(--sim-accent); }
.sim a:hover { color: var(--sim-accent-hover); }
.sim :focus-visible { outline: 2px solid var(--sim-accent-hover); outline-offset: 2px; }
.sim code { font-size: 0.9em; color: var(--sim-text-label); }

/* A container cannot be styled by its own container query, so the padding is on an inner wrapper. */
.sim-inner { padding: 16px; }
@container (min-width: 700px) {
  .sim-inner { padding: 28px 32px 40px; }
}

/* ── Headings and text ─────────────────────────────────────────── */
.sim-head { margin-bottom: 20px; }
.sim-title { font-family: var(--sim-font-head); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; }
.sim-sub { margin-top: 4px; color: var(--sim-muted); }
.sim-sub strong { color: var(--sim-text); }
.sim-note { font-size: 13px; color: var(--sim-muted); }
.sim-note--rule { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sim-border); }
.sim-placeholder, .sim-notice {
  padding: 20px 24px;
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius);
  background: var(--sim-card);
  color: var(--sim-muted);
}
.sim-link { text-decoration: underline; }

/* ── Card ──────────────────────────────────────────────────────── */
.sim-card {
  background: var(--sim-card);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius);
  padding: 16px;
}
.sim-card__title { font-family: var(--sim-font-head); font-weight: 600; font-size: 16px; }
.sim-card__title--large { font-size: 18px; }
@container (min-width: 700px) {
  .sim-card { padding: 20px; }
  .sim-chart { padding: 20px 24px; }
}

/* ── Layout: rail beside the charts, stacked above them when narrow ── */
.sim-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sim-rail { flex: 1 1 280px; min-width: 0; }
/* Beside the charts the rail stays a rail; stacked above them it fills the column. */
@container (min-width: 940px) {
  .sim-rail { max-width: 340px; }
}
.sim-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ── Segmented control and buttons ─────────────────────────────── */
.sim-segmented {
  display: flex;
  border: 1px solid var(--sim-control-border);
  border-radius: var(--sim-radius-small);
  overflow: hidden;
}
.sim-segmented--spread { margin: 14px 0 18px; }
.sim-segmented--spread .sim-segmented__button { flex: 1 1 0; }
.sim-segmented__button {
  min-height: var(--sim-touch);
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--sim-text);
  font-weight: 600;
}
.sim-segmented__button[aria-pressed="true"] { background: var(--sim-accent); color: var(--sim-on-accent); }
.sim-toolbar { display: flex; flex-wrap: wrap; gap: 12px; }

.sim-button {
  min-height: var(--sim-touch);
  padding: 0 16px;
  border: 1px solid var(--sim-control-border);
  border-radius: var(--sim-radius-small);
  background: transparent;
  color: var(--sim-text);
  font-weight: 600;
}
.sim-button:hover { border-color: var(--sim-accent); color: var(--sim-accent-hover); }
.sim-input {
  min-height: var(--sim-touch);
  min-width: 0;
  flex: 1 1 120px;
  padding: 0 12px;
  border: 1px solid var(--sim-control-border);
  border-radius: var(--sim-radius-small);
  background: var(--sim-ground);
  color: var(--sim-text);
  font: inherit;
}
/* The browser's own placeholder grey is about 3 : 1 on the card; a placeholder takes the muted text colour. */
.sim-input::placeholder, .sim-textarea::placeholder { color: var(--sim-muted); opacity: 1; }

/* ── Sliders ───────────────────────────────────────────────────── */
.sim-sliders { display: flex; flex-direction: column; gap: 14px; }
.sim-slider { display: block; }
.sim-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sim-slider__name { font-size: 14px; }
.sim-slider__code { font-size: 12px; color: var(--sim-muted); }
.sim-slider__value {
  font-family: var(--sim-font-head);
  font-weight: 600;
  font-size: 14px;
  text-align: right;
  color: var(--sim-accent);
}
.sim-slider__track { --thumb: 16px; position: relative; display: block; }
.sim-slider__input { display: block; width: 100%; height: 28px; margin: 0; accent-color: var(--sim-accent); }
/* The price floor: a mark on the track at --floor (0 to 1), allowing for the thumb's width. */
.sim-slider__floor {
  position: absolute;
  bottom: 1px;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--floor));
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: var(--sim-text-label);
  pointer-events: none;
}
.sim-slider__floor-note { display: block; font-size: 12px; color: var(--sim-muted); }

/* ── Save as scenario ──────────────────────────────────────────── */
.sim-save { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sim-border); }
.sim-save__label { display: block; margin-bottom: 6px; font-size: 14px; }
.sim-save__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-save__status { min-height: 1.4em; margin-top: 6px; font-size: 13px; color: var(--sim-muted); }

/* ── Figures ───────────────────────────────────────────────────── */
.sim-figures { display: flex; flex-wrap: wrap; gap: 16px; }
.sim-figure { flex: 1 1 200px; min-width: 0; padding: 16px 18px; }
.sim-figure__label, .sim-figure__sub { font-size: 13px; color: var(--sim-muted); }
.sim-figure__value {
  margin: 2px 0;
  font-family: var(--sim-font-head);
  font-weight: 700;
  font-size: 30px;
  overflow-wrap: anywhere;
}

/* ── Chart ─────────────────────────────────────────────────────── */
.sim-chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.sim-chart__head .sim-note { margin-top: 2px; }
.sim-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; font-size: 13px; color: var(--sim-muted); }
.sim-legend__item { display: flex; align-items: center; gap: 6px; }
.sim-swatch { display: inline-block; width: 22px; height: 2px; }
.sim-swatch--you { height: 4px; border-radius: 2px; background: var(--sim-you); }
.sim-swatch--hi { background: var(--sim-hi); }
.sim-swatch--mid { background: var(--sim-mid); }
.sim-swatch--lo { background: var(--sim-lo); }

/* The chart is drawn at this box's real pixel size (the controller sets the viewBox to
   it), so text keeps its CSS size at any width. The height is the only thing set here. */
.sim-svg { display: block; width: 100%; height: 340px; }
@container (max-width: 520px) {
  .sim-svg { height: 220px; }
}
.sim-chart__years { stroke: var(--sim-border-faint); stroke-width: 1px; fill: none; }
.sim-chart__grid { stroke: var(--sim-border); stroke-width: 1px; fill: none; }
.sim-chart__band { fill: var(--sim-accent); opacity: 0.07; stroke: none; }
.sim-chart__line { fill: none; stroke-width: 2px; stroke-linejoin: round; }
.sim-chart__line--lo { stroke: var(--sim-lo); }
.sim-chart__line--mid { stroke: var(--sim-mid); }
.sim-chart__line--hi { stroke: var(--sim-hi); }
.sim-chart__line--you { stroke: var(--sim-you); stroke-width: 3.5px; stroke-linecap: round; }
.sim-chart__ticks text, .sim-chart__ends text, .sim-chart__years-labels text { font-size: 12px; }
.sim-chart__ticks text { fill: var(--sim-muted); }
.sim-chart__ends text { fill: var(--sim-text-label); }
.sim-chart__years-labels text { fill: var(--sim-muted); }

/* ── Shared by the screens of wave 3: trust chips and tables ─────────
   Sourced, Benchmark and Team are outlined; Guess is filled, so that guesses are
   the loudest thing on screen. A wide table scrolls inside its card. */
.sim-chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--sim-control-border);
  border-radius: 999px;
  color: var(--sim-text-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.sim-chip--guess { border-color: var(--sim-accent); background: var(--sim-accent); color: var(--sim-on-accent); }
.sim-code { color: var(--sim-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
/* position: relative keeps absolutely placed children (screen-reader-only labels in a
   cell) inside the scroll box; without it they widen the whole page. */
.sim-table-wrap { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sim-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sim-table th, .sim-table td { padding: 9px 12px; border-bottom: 1px solid var(--sim-border-faint); text-align: left; vertical-align: top; }
.sim-table th { color: var(--sim-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sim-table .sim-num { text-align: right; white-space: nowrap; }
.sim-table tr:last-child td { border-bottom: 0; }

/* ── Scenario bar: which scenario Funnel and Pricing show, and a switch for it ── */
.sim-scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.sim-scenario-bar__showing { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.sim-scenario-bar__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sim-scenario-bar__label { color: var(--sim-muted); font-size: 13px; }
.sim-scenario-bar__name { font-family: var(--sim-font-head); font-weight: 600; font-size: 18px; }
.sim-scenario-bar__locked { color: var(--sim-muted); font-size: 13px; font-weight: 600; }
.sim-scenario-bar__differences { margin-top: 4px; }
.sim-scenario-bar__choose { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.sim-scenario-bar__choose .sim-segmented { max-width: 100%; }
.sim-scenario-bar__warning { max-width: 36ch; }
.sim-scenario-bar__link { flex: 1 1 100%; display: inline-flex; align-items: center; min-height: var(--sim-touch); }
.sim-scenario-bar [hidden] { display: none; }
.sim-main > .sim-scenario-bar { margin-bottom: 0; }