/* CONSENSUS BADGE — how far several reads of one community agree. Tokens: the surface's --sx-* palette. */
.psim-consensus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-family: var(--sx-sans);
  font-size: 13px;
  color: var(--sx-ink-62);
}
.psim-consensus-words {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--sx-ink-80);
}
.psim-consensus-words::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sx-ink-30);
}
.psim-consensus--agree .psim-consensus-words::before {
  background: var(--sx-jade);
}
.psim-consensus--partial .psim-consensus-words::before {
  background: var(--sx-bronze);
}
.psim-consensus--open .psim-consensus-words {
  color: var(--sx-accent);
}
.psim-consensus--open .psim-consensus-words::before {
  background: var(--sx-accent);
}
.psim-consensus-reads {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.psim-consensus-read + .psim-consensus-read::before {
  content: "·";
  margin-right: 6px;
  color: var(--sx-ink-30);
}
/* ============================================================================
 * SIMULATE — `/pitch/<deal>/simulate`, in the cream pitch kit.
 *
 * Only this screen's own layout lives here: the form, the comparison line, the
 * community cards. Tokens are the surface's `--sx-*` palette; the rail is the
 * platform's own `StageRail` wearing the `.sx-dash` token map; the sections are
 * the kit's `DashDisclosure`. Nothing below 13px (the kit's type floor).
 * ========================================================================== */

.psim {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ——— the form ——— */
.psim-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 22px;
  border: 1px solid var(--sx-hairline);
  border-radius: 12px;
  background: var(--sx-paper);
}
.psim-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.psim-field--wide,
.psim-actions {
  grid-column: 1 / -1;
}
.psim-label {
  font-family: var(--sx-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sx-ink-62);
  padding: 0;
}
.psim-label small {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sx-ink-45);
  margin-left: 6px;
}
.psim-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.psim-segment {
  font-family: var(--sx-sans);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--sx-hairline);
  background: transparent;
  color: var(--sx-ink-80);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.psim-segment:hover:not(:disabled) {
  border-color: var(--sx-ink);
}
.psim-segment.is-on {
  background: var(--sx-ink);
  border-color: var(--sx-ink);
  color: var(--sx-cream);
}
.psim-segment:disabled {
  cursor: default;
  opacity: 0.7;
}
.psim-input {
  width: 100%;
  min-width: 0;
  font-family: var(--sx-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--sx-ink);
  background: var(--sx-cream);
  border: 1px solid var(--sx-hairline);
  border-radius: 8px;
  padding: 10px 12px;
}
.psim-input:focus {
  outline: 2px solid var(--sx-accent-soft);
  border-color: var(--sx-ink-45);
}
.psim-textarea {
  resize: vertical;
  min-height: 96px;
}
.psim-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.psim-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 14px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: var(--sx-cream-deep);
  color: var(--sx-ink);
}
.psim-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psim-chip-x {
  border: 0;
  background: transparent;
  color: var(--sx-ink-62);
  font-size: 16px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}
.psim-chip-x:hover:not(:disabled) {
  background: var(--sx-paper);
  color: var(--sx-ink);
}
.psim-matches {
  list-style: none;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--sx-hairline);
  border-radius: 8px;
  background: var(--sx-paper);
}
.psim-match {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  text-align: left;
  font-family: var(--sx-sans);
  font-size: 14px;
  color: var(--sx-ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.psim-match:hover {
  background: var(--sx-cream);
}
.psim-match small {
  color: var(--sx-ink-45);
  font-size: 13px;
  white-space: nowrap;
}
.psim-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.psim-go:disabled {
  cursor: default;
}
.psim-form-error {
  margin: 0;
  font-size: 14px;
  color: var(--sx-accent);
}

/* ——— the answers ——— */
.psim-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.psim-compare {
  margin: 0;
  font-family: var(--sx-serif);
  font-size: 22px;
  line-height: 1.35;
  color: var(--sx-ink);
}
.psim-rail {
  --md-prov-read: var(--sx-jade, #5c8456);
  --md-prov-stale: var(--sx-bronze, #b8983f);
  --md-surface: var(--sx-cream, #f5f0e6);
  max-width: 520px;
  padding: 4px 0;
}
.psim-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}
.psim-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--sx-hairline);
  border-top: 3px solid var(--sx-ink-30);
  border-radius: 12px;
  background: var(--sx-paper);
}
.psim-card--welcome {
  border-top-color: var(--sx-jade);
}
.psim-card--accept {
  border-top-color: var(--sx-bronze);
}
.psim-card--reject {
  border-top-color: var(--sx-accent);
}
.psim-card--pending {
  opacity: 0.8;
}
.psim-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.psim-card-name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sx-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--sx-ink);
}
.psim-card-size {
  margin: 0;
  font-size: 13px;
  color: var(--sx-ink-45);
}
.psim-lean {
  flex: 0 0 100%;
  font-size: 14px;
  font-weight: 600;
}
.psim-lean--welcome {
  color: var(--sx-jade);
}
.psim-lean--accept {
  color: var(--sx-gold, #9a7424);
}
.psim-lean--reject {
  color: var(--sx-accent);
}
.psim-lean--unknown {
  color: var(--sx-ink-62);
}
.psim-card-headline {
  margin: 0;
  font-family: var(--sx-serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--sx-ink);
}
.psim-card-sowhat {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sx-ink-80);
}
.psim-card-note {
  margin: 0;
  font-size: 15px;
  color: var(--sx-ink-62);
}
.psim-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.psim-claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.psim-claim-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sx-ink);
}
.psim-cite {
  margin-top: 4px;
}
.psim-cite summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--sx-accent);
  width: fit-content;
}
.psim-cite-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--sx-hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psim-cite-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sx-ink-62);
}
.psim-cite-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sx-ink-80);
  overflow-wrap: anywhere;
}
.psim-card-foot {
  border-top: 1px solid var(--sx-hairline-soft);
  padding-top: 10px;
}
.psim-card-foot p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sx-ink-62);
}
.psim-card-foot .psim-card-tally {
  margin-top: 4px;
  color: var(--sx-ink-45);
}

@media (max-width: 700px) {
  .psim-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .psim-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .psim-compare {
    font-size: 19px;
  }
  .psim-card {
    padding: 16px;
  }
}

/* ——— sense before extrapolation (2026-09-24) ——— */
.psim-card--irrelevant {
  border-top-color: var(--sx-ink-30);
}
.psim-lean--irrelevant {
  color: var(--sx-ink-62);
}
.psim-offtopic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
  padding: 18px 20px;
  border: 1px solid var(--sx-hairline);
  border-radius: 12px;
  background: var(--sx-paper);
}
.psim-offtopic-line {
  margin: 0;
  font-family: var(--sx-serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--sx-ink);
}
.psim-offtopic-reason {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sx-ink-62);
}

/* ——— the brand's ideas and the communities list (2026-09-24) ———
 * The list opens in a portal (outside `.sx-root`), so every token below carries its own
 * fallback — the cream kit's own values. */
.psim-ideas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.psim-link {
  font-family: var(--sx-sans);
  font-size: 14px;
  color: var(--sx-ink-80, rgba(27, 22, 17, 0.8));
  background: transparent;
  border: 0;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  cursor: pointer;
}
.psim-link:hover:not(:disabled) {
  color: var(--sx-ink, #1b1611);
  text-decoration-color: currentColor;
}
.psim-link--menu::after {
  content: " ▾";
  text-decoration: none;
  display: inline-block;
  margin-left: 2px;
}
.psim-menu {
  min-width: 260px;
  border: 1px solid rgba(27, 22, 17, 0.14);
  border-radius: 10px;
  font-family: var(--sx-sans, inherit);
}
.psim-menu-item {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.psim-menu-item[aria-current="true"] {
  font-weight: 600;
}
.psim-choose-row {
  display: flex;
}
.psim-choose {
  font-family: var(--sx-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--sx-ink, #1b1611);
  background: var(--sx-paper, #fffdf8);
  color: var(--sx-ink, #1b1611);
  cursor: pointer;
}
.psim-choose::after {
  content: " ▾";
}
.psim-choose:hover:not(:disabled),
.psim-choose[aria-expanded="true"] {
  background: var(--sx-cream, #f5f0e6);
}
.psim-choose:disabled {
  cursor: default;
  opacity: 0.7;
}
.psim-pop {
  border: 1px solid rgba(27, 22, 17, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(27, 22, 17, 0.14);
  overflow: hidden;
}
.psim-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: var(--sx-sans, inherit);
  color: #1b1611;
}
.psim-pop .psim-list {
  max-height: min(460px, calc(100vh - 160px));
}
.psim-sheet .psim-list {
  flex: 1 1 auto;
}
.psim-sheet-title {
  margin: 0;
  padding: 18px 64px 6px 16px;
  font-size: 17px;
  font-weight: 600;
}
.psim-list-filter {
  margin: 12px 12px 0;
  width: calc(100% - 24px);
  font-size: 15px;
  padding: 8px 10px;
  background: #f5f0e6;
  border: 1px solid rgba(27, 22, 17, 0.14);
  border-radius: 8px;
}
.psim-list-status {
  margin: 8px 14px 4px;
  font-size: 13px;
  color: rgba(27, 22, 17, 0.62);
}
.psim-list-status.is-full {
  color: #1b1611;
  font-weight: 600;
}
.psim-list-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 8px;
}
.psim-group + .psim-group {
  border-top: 1px solid rgba(27, 22, 17, 0.08);
}
.psim-group-title {
  margin: 10px 8px 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 22, 17, 0.62);
}
.psim-options {
  list-style: none;
  margin: 0;
  padding: 0;
}
.psim-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
/* The size and fit words beside a community's name (D053): quiet, to the right; under the name on a phone (see the phone block below). */
.psim-option-tags {
  flex: 0 1 auto;
  margin-left: auto;
  padding-left: 8px;
  font-size: 13px;
  line-height: 1.3;
  text-align: right;
  color: rgba(27, 22, 17, 0.62);
}
.psim-option:hover {
  background: #f5f0e6;
}
.psim-option.is-off {
  cursor: default;
  color: rgba(27, 22, 17, 0.45);
}
.psim-option.is-off:hover {
  background: transparent;
}
.psim-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(27, 22, 17, 0.45);
  background: #fffdf8;
  color: #fffdf8;
}
.psim-check[data-state="checked"] {
  background: #1b1611;
  border-color: #1b1611;
}
.psim-check:focus-visible {
  outline: 2px solid #1b1611;
  outline-offset: 2px;
}
.psim-list-empty {
  margin: 12px 8px;
  font-size: 14px;
  color: rgba(27, 22, 17, 0.62);
}
.psim-list-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  border-top: 1px solid rgba(27, 22, 17, 0.08);
}
.psim-idle {
  margin: 0;
  max-width: 720px;
  padding: 18px 20px;
  border: 1px dashed var(--sx-hairline);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sx-ink-62);
}
@media (max-width: 700px) {
  .psim-choose {
    width: 100%;
  }
  .psim-option {
    padding: 11px 8px;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  /* The name takes the row beside the tick; the size and fit words drop under it, in line with it
     (18px tick + 10px gap = 28px) instead of squeezing a long name into half the sheet (D053). */
  .psim-option-name {
    flex: 1 1 0;
    min-width: 0;
  }
  .psim-option-tags {
    flex: 0 0 100%;
    margin-left: 0;
    padding-left: 28px;
    text-align: left;
  }
}
.psim-list-done {
  font-family: var(--sx-sans, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid #1b1611;
  background: #1b1611;
  color: #f5f0e6;
  cursor: pointer;
}
.psim-list-done:focus-visible {
  outline: 2px solid #1b1611;
  outline-offset: 2px;
}

/* ——— SIMULATE NEXT (2026-09-24): what is tested, where it is asked, two versions ———
 * Behind `SIMULATE_NEXT`; nothing above changes. */
.psim-testing {
  gap: 10px;
}
.psim-types {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psim-sublabel {
  font-family: var(--sx-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--sx-ink-62);
}
.psim-segments--small {
  gap: 6px;
}
.psim-segments--small .psim-segment {
  font-size: 13px;
  padding: 6px 12px;
}
.psim-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sx-ink-62);
}
.psim-soon {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--sx-hairline);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sx-ink-80);
}
.psim-world,
.psim-content {
  gap: 10px;
}
.psim-version-title {
  margin: 6px 0 -8px;
  font-family: var(--sx-serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--sx-ink);
}
.psim-card-badge {
  font-size: 13px;
  color: var(--sx-ink-62);
}
.psim-card-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.psim-card-line {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--sx-hairline);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sx-ink-80);
}

/* two versions: one row per community */
.psim-versions-key {
  margin: -8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sx-ink-62);
}
.psim-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.psim-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
  padding: 16px 20px;
  border: 1px solid var(--sx-hairline);
  border-left: 3px solid var(--sx-ink-30);
  border-radius: 12px;
  background: var(--sx-paper);
}
.psim-row--A,
.psim-row--B {
  border-left-color: var(--sx-jade);
}
.psim-row-name {
  margin: 0;
  font-family: var(--sx-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--sx-ink);
}
.psim-row-better {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sx-ink);
}
.psim-row-cells {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  align-items: baseline;
}
.psim-row-cell {
  display: contents;
}
.psim-row-key {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sx-ink-62);
}
.psim-row-lean {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.psim-lean--waiting {
  color: var(--sx-ink-45);
  font-weight: 400;
}
.psim-row-more {
  grid-column: 1 / -1;
}
.psim-row-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 8px;
}
@media (max-width: 700px) {
  .psim-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px;
  }
  .psim-row-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ——— the whole world and a piece of content, wired (2026-09-24) ——— */
.psim-content-wrap[hidden] {
  display: none;
}
.psim-content-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.psim-world-results {
  gap: 22px;
}
.psim-world-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 20px;
}
.psim-stop {
  margin-bottom: 8px;
}
.psim-world-card {
  max-width: 720px;
}
.psim-card-line--quiet {
  color: var(--sx-ink-62);
  font-style: italic;
}
/* ============================================================================
 * /simulate in the MAIN APP (2026-09-27) — the pitch's Simulate screen wearing the app's theme.
 *
 * The screen's own sheets (`pitch-surface-simulate.css`, `simulate/*.css`, the rail's `.sx-dash`
 * map) speak the cream kit's `--sx-*` tokens. On the pitch those are declared by `.sx-root`, which
 * must NEVER be mounted inside the app: it also sizes itself to the viewport and locks the page
 * scroll (`html:has(.sx-root) { overflow: hidden }`). So this wrapper declares the same tokens — the
 * type scale, radii and rhythm copied as they are, every COLOUR mapped onto the app's glass
 * `--md-*` contract so the screen follows light and dark with the rest of the app. Layout only
 * beyond that; zero new hex.
 *
 * NO COLOUR OF THE PITCH'S OWN (2026-09-27). Every colour below is a `--md-*` token or a
 * `color-mix()` of one: the verdict hues are the app's (bet → positive, risk → negative,
 * watch → warning, whitespace → accent, strength → the glass kit's blue-cyan chart hue), the card
 * line, shadow and tile are the app's own border, elevation and sunken surface, and the chart's
 * three roles (the customer · this world · everything else) take the app's chart palette in the
 * same roles `.sx-dash` gives them. That makes both rules ALIAS ROOTS, not a dress
 * (`guard:design-dress`); the pitch's `.sx-root` keeps its cream values untouched.
 * ========================================================================== */

.app-sim {
  /* The card surface: opaque in both themes (the glass surface token is translucent in dark). */
  --app-sim-paper: color-mix(in srgb, var(--md-surface) 100%, var(--md-bg));
  --sx-cream: var(--md-bg);
  --sx-cream-deep: color-mix(in srgb, var(--md-text) 6%, var(--md-bg));
  --sx-paper: var(--app-sim-paper);
  --sx-ink: var(--md-text);
  --sx-ink-80: color-mix(in srgb, var(--md-text) 80%, transparent);
  --sx-ink-62: color-mix(in srgb, var(--md-text) 62%, transparent);
  --sx-ink-45: color-mix(in srgb, var(--md-text) 45%, transparent);
  --sx-ink-30: color-mix(in srgb, var(--md-text) 30%, transparent);
  --sx-ink-12: color-mix(in srgb, var(--md-text) 12%, transparent);
  --sx-hairline: var(--md-border);
  --sx-hairline-soft: color-mix(in srgb, var(--md-border) 60%, transparent);
  --sx-ink-75: color-mix(in srgb, var(--md-text) 75%, transparent);
  --sx-ink-70: color-mix(in srgb, var(--md-text) 70%, transparent);
  --sx-ink-65: color-mix(in srgb, var(--md-text) 65%, transparent);
  --sx-ink-60: color-mix(in srgb, var(--md-text) 60%, transparent);
  --sx-ink-55: color-mix(in srgb, var(--md-text) 55%, transparent);
  --sx-ink-50: color-mix(in srgb, var(--md-text) 50%, transparent);
  --sx-ink-soft: var(--sx-ink-62);
  --sx-muted: var(--sx-ink-45);
  --sx-rule: var(--sx-hairline);
  --sx-paper-veil: color-mix(in srgb, var(--app-sim-paper) 72%, transparent);
  --sx-reveal-delay: 0ms;
  --sx-accent: var(--md-negative);
  --sx-accent-soft: color-mix(in srgb, var(--md-negative) 10%, transparent);
  --sx-bronze: var(--md-warning);
  --sx-bronze-soft: color-mix(in srgb, var(--md-warning) 14%, transparent);
  --sx-jade: var(--md-positive);
  --sx-jade-soft: color-mix(in srgb, var(--md-positive) 12%, transparent);
  --sx-serif: var(--gs-serif, "Playfair Display", Georgia, serif);
  --sx-sans: var(--md-font-sans);
  --sx-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sx-display: 2.5rem;
  --sx-display-lh: 2.75rem;
  --sx-lede: 1rem;
  --sx-title: 1.0625rem;
  --sx-title-lh: 1.5rem;
  --sx-body: 0.9375rem;
  --sx-body-lh: 1.5rem;
  --sx-caption: 0.875rem;
  --sx-caption-lh: 1.25rem;
  --sx-foot: 0.8125rem;
  --sx-foot-lh: 1.125rem;
  --sx-stat: 1.25rem;
  --sx-eyebrow: 0.6875rem;
  --sx-radius-card: 1rem;
  --sx-radius-tile: 0.75rem;
  --sx-card-line: var(--md-border);
  --sx-card-shadow: var(--md-shadow);
  --sx-tile-fill: var(--md-surface-2);
  --sx-card-pad: 1.25rem;
  --sx-card-gap: 1.5rem;
  --sx-section-gap: 2rem;
  --sx-bet: var(--md-positive);
  --sx-bet-soft: color-mix(in srgb, var(--md-positive) 12%, transparent);
  --sx-whitespace: var(--md-accent);
  --sx-whitespace-soft: var(--md-accent-soft);
  --sx-watch: var(--md-warning);
  --sx-watch-soft: color-mix(in srgb, var(--md-warning) 14%, transparent);
  --sx-risk: var(--md-negative);
  --sx-risk-soft: color-mix(in srgb, var(--md-negative) 12%, transparent);
  --sx-strength: var(--md-chart-industry);
  --sx-strength-soft: color-mix(in srgb, var(--md-chart-industry) 12%, transparent);
  --sx-chart-accent: var(--md-chart-brand);
  --sx-chart-olive: var(--md-chart-competitive);
  --sx-chart-sand: var(--md-chart-industry);
  --sx-measure: 72rem;
  --sx-max: var(--sx-measure);
  --sx-gutter: clamp(1.25rem, 4vw, 3rem);
  --sx-chapter-gap: clamp(5rem, 12vh, 9rem);
  --sx-rail-w: 14.5rem;
  --sx-lens-h: 2.5rem;
  color: var(--md-text);
  font-family: var(--md-font-sans);
  min-width: 0;
}

/* The page's own hero carries the heading; the form sits flush under it. */
.app-sim .psim {
  gap: 20px;
}

/* The community list, its phone sheet and the ideas menu open in a PORTAL, outside this wrapper and
   outside the glass surface, so they can inherit neither set of tokens. While this screen is mounted,
   dress them in the app's own global theme (the popover tokens every app menu uses); the pitch never
   matches `body:has(.app-sim)`, so its cream list is untouched. */
body:has(.app-sim) .psim-pop,
body:has(.app-sim) .psim-sheet,
body:has(.app-sim) .psim-menu {
  --sx-paper: hsl(var(--popover));
  --sx-cream: hsl(var(--popover));
  --sx-ink: hsl(var(--popover-foreground));
  --sx-ink-80: color-mix(in srgb, hsl(var(--popover-foreground)) 80%, transparent);
  --sx-ink-62: color-mix(in srgb, hsl(var(--popover-foreground)) 62%, transparent);
  --sx-ink-45: color-mix(in srgb, hsl(var(--popover-foreground)) 45%, transparent);
  --sx-ink-30: color-mix(in srgb, hsl(var(--popover-foreground)) 30%, transparent);
  --sx-ink-12: color-mix(in srgb, hsl(var(--popover-foreground)) 12%, transparent);
  --sx-hairline: hsl(var(--border));
  --sx-hairline-soft: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
  background: hsl(var(--popover)) !important;
  color: hsl(var(--popover-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

@media (max-width: 480px) {
  .app-sim .psim-form {
    padding: 16px;
  }
}

/* The kit's button lifts to its event red on hover; in the app it lifts to the app's own accent. */
.app-sim .sx-btn:hover:not(:disabled) {
  background: var(--md-accent);
  border-color: var(--md-accent);
  color: hsl(var(--primary-foreground));
}

/* Fix it's price sits on its own line under the button and its intro. */
.app-sim .psim-fix-head {
  flex-wrap: wrap;
}
.app-sim .psim-fix-price {
  flex-basis: 100%;
  margin: 0;
}

/* ——— D048 (owner 2026-10-11): on a phone the one-line answer ("Welcomed by X; rejected by Y") sits above the form and
 * stays pinned while the cards scroll. The page draws it a second time directly above the form (`psim-compare--pin`):
 * hidden everywhere by default, shown on a phone only inside the `.app-sim` wrapper, and there the results' own copy is
 * hidden — so exactly one copy is on screen and exposed to a screen reader at any width. The default is "hidden" for
 * EVERY mount, not just `.app-sim`: the saved-run replay (`/simulate?run=`) and the decision-study mount pass the same
 * `appExtras` and draw the pin but have no `.app-sim` wrapper, so a hide that lived only under `.app-sim` left the line
 * on screen twice there (review, round 9). Only the --md-* tokens the .app-sim wrapper already maps (no new colour,
 * nothing in the pitch's stylesheet). The main scroller's top padding clears the phone menu bar; sticky top 0
 * lands at y=56px with a zero safe-area inset (measured at 375px in `tools/op-phone-r4-layout.mjs`). */
.psim .psim-compare--pin {
  display: none;
}
@media (max-width: 700px) {
  .app-sim .psim-compare--pin {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-sm);
    background: var(--app-sim-paper);
    box-shadow: var(--md-shadow);
    font-size: 15px;
    line-height: 1.35;
  }
  .app-sim .psim:has(> .psim-compare--pin) .psim-results > .psim-compare {
    display: none;
  }
  /* "Scroll to the first answer" lands the cards below the pin, not under it. */
  .app-sim .psim-cards,
  .app-sim .psim-world-card {
    scroll-margin-top: calc(var(--app-shell-top, 3.5rem) + 5rem);
  }
}