/*
 * The Slip Optimizer (SlipOptimizer.js) — one slip cut down to the games that
 * fit a target, over the SureTOOLS tab.
 *
 * The shell is the Slip Splitter's, restated under `so-` the way every tool
 * page restates it: a fixed page at z-index 70 that fades while its sheet
 * rises, its own scroller, white cards on the off-white page, the sunken grey
 * inside them, nothing casting a shadow.
 *
 * Most of what is on it is borrowed rather than drawn here. The code field,
 * platform button and sheet are code-input.css's; the stance cards are the
 * Slip Builder's strategy cards (`.slip-strategy`); the switches, steppers,
 * sliders and accordions are slip-controls.css's; the mode switches are the
 * app's segmented control. What is here is the layout around them, the games
 * list with its banker shields, and the result card.
 */

/* --- Shell -------------------------------------------------------------------- */

.slip-optimizer {
  --enter-y: calc(12px * var(--scale));
  --so-gutter: var(--space-4);

  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.slip-optimizer[hidden] {
  display: none;
}

.slip-optimizer [hidden] {
  display: none !important;
}

.slip-optimizer[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.slip-optimizer__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

.slip-optimizer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.so {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--space-8) + var(--safe-bottom));
}

.so-view {
  display: flex;
  flex-direction: column;
}

/* --- Top row and title ----------------------------------------------------------- */

.so-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) 0;
}

.so-top__gap {
  flex: 1;
}

.so-title {
  margin: var(--space-3) var(--so-gutter) 0;
  color: var(--text);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* --- Sections ---------------------------------------------------------------------- */

.so-section {
  display: flex;
  flex-direction: column;
}

.so-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-5) var(--so-gutter) var(--space-3);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.so-label__meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.so-note {
  margin: var(--space-2) var(--so-gutter) 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* A note that sits above its card rather than under it — the games list's. */
.so-label + .so-note {
  margin: calc(var(--space-2) * -1) var(--so-gutter) var(--space-3);
}

.so-card {
  margin: 0 var(--so-gutter);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.so-card--platform .ci-platform-btn {
  width: 100%;
}

.so-card--platform .ci-platform-btn__name {
  flex: 1;
  font-size: var(--text-md);
}

.so-card--list {
  padding-block: var(--space-1);
}

/* The labels inside a card: smaller than a section's, the field's own name. */
.so-field-label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.so-field-label:first-child {
  margin-top: 0;
}

.so-inline-note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* --- Your games -------------------------------------------------------------------- */

.so-games {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.so-game {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.so-game + .so-game {
  border-top: 1px solid var(--border);
}

/* Off reads as off: the row steps back, the switch says why. */
.so-game[data-on="false"] .so-game__text,
.so-game[data-on="false"] .so-game__odds {
  opacity: 0.45;
}

.so-game__banker {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-xs);
  height: var(--control-xs);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-disabled);
  transition:
    background-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.so-game__banker[aria-pressed="true"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.so-game__banker:disabled {
  opacity: 0.4;
}

.so-game__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.so-game__match {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.so-game__teams {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-game__when {
  flex: none;
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
}

.so-game[data-live="false"] .so-game__when {
  color: var(--error);
  font-weight: var(--weight-semibold);
}

.so-game__sel {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.so-game__odds {
  flex: none;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--sd-fade) var(--se-out);
}

/* --- Stance ----------------------------------------------------------------------- */

/* The Slip Builder's strategy cards, three across instead of two: the type
   comes down a step so "Conservative" fits a third of a phone. */
.so-stances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 var(--so-gutter);
}

.so-stance {
  min-width: 0;
  min-height: calc(104px * var(--scale));
  padding: var(--space-3) var(--space-2);
}

.so-stance .slip-strategy__title {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.so-stance .slip-strategy__text {
  width: 100%;
}

.so-stance .slip-strategy__sub {
  font-size: var(--text-2xs);
}

/* --- Revealed controls, readouts, sliders -------------------------------------------- */

.so-reveal > .slip-collapse__inner,
.so-switch__body > .slip-collapse__inner {
  transition: padding-top var(--sd-spring) var(--se-out);
}

.so-reveal[data-shown="true"] > .slip-collapse__inner {
  padding-top: var(--space-3);
}

.so-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.so-readout__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.so-readout__value {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.so-slider {
  margin-top: var(--space-1);
}

.so-slider__ends {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-2);
  color: var(--text-disabled);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.so-steprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-md);
}

.so-steprow__label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* --- Switch rows ------------------------------------------------------------------------ */

.so-switch {
  display: flex;
  flex-direction: column;
}

.so-more .so-switch,
.so-variants .so-switch {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.so-switch__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

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

.so-switch__title {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.so-switch__title--lead {
  font-size: var(--text-md);
}

.so-switch__sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.so-switch__body[data-shown="true"] > .slip-collapse__inner {
  padding-top: var(--space-3);
}

/* --- Three slips ------------------------------------------------------------------------- */

.so-variants {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
}

.so-variants > .so-field-label:first-child {
  margin-top: var(--space-3);
}

.so-slates {
  gap: var(--space-2);
}

.so-slate {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) var(--space-1) var(--space-2);
}

.so-input {
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.so-input::placeholder {
  color: var(--text-disabled);
}

.so-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35);
}

/* --- More options --------------------------------------------------------------------- */

/* The accordion is the card: its head drops the sunken fill and sits flush in
   white, so More Options reads as one of the page's cards that opens. */
.so-more-wrap {
  margin: var(--space-5) var(--so-gutter) 0;
}

.so-more-acc,
.so-details > .slip-acc {
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.so-more-acc > .slip-acc__head,
.so-details > .slip-acc > .slip-acc__head {
  height: var(--control-lg);
  padding: 0 var(--space-3) 0 var(--space-4);
  border-radius: var(--radius-xl);
  background: transparent;
}

.so-more-acc > .slip-acc__head .slip-acc__title,
.so-details > .slip-acc > .slip-acc__head .slip-acc__title {
  font-size: var(--text-md);
}

.so-more {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-4) var(--space-4);
}

.so-caps {
  display: flex;
  flex-direction: column;
}

/* --- The CTA ---------------------------------------------------------------------------- */

.so-cta__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-6) var(--so-gutter) 0;
}

.so-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: calc(54px * var(--scale));
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.so-cta[data-pressed="true"] {
  background: var(--accent-pressed);
}

.so-cta:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
}

.so-cta[data-busy="true"] {
  opacity: 0.7;
}

.so-cta__hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
}

.so-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  align-self: center;
  min-height: var(--tap-floor);
  margin-top: var(--space-5);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: transform var(--spring-duration) var(--spring);
}

.so-clear[data-pressed="true"] {
  background: var(--surface-sunken);
}

/* --- The source, on the result ------------------------------------------------------------ */

.so-source {
  margin: var(--space-4) var(--so-gutter) 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

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

.so-source__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.so-source__label {
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.so-source__code {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-source__meta {
  flex: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.so-source__note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* The invariant, printed on the slip above its games — green while every pick
   is the one loaded, amber once a control has changed one, since that is the
   line the punter should read before booking. */
.so-invariant {
  margin-top: var(--space-3);
  color: var(--success-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.so-invariant[data-tone="changed"] {
  color: var(--warning-strong);
}

.so-variant-switch {
  margin: var(--space-4) var(--so-gutter) 0;
}

/* --- The slip ------------------------------------------------------------------------------- */

.so-slip-host {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) var(--so-gutter) 0;
}

.so-slip {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.so-slip__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.so-slip__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-xs);
  height: var(--control-xs);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
}

.so-slip__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.so-slip__title {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.so-slip__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.so-slip__odds {
  flex: none;
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.so-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.so-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.so-stat__label {
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-stat__value {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.so-target {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.so-target[data-tone="hit"] {
  background: var(--success-soft);
  color: var(--success-strong);
}

.so-target[data-tone="miss"] {
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.so-target[data-tone="neutral"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.so-legs {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.so-leg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

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

.so-leg__match {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.so-leg__teams {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-leg__when {
  flex: none;
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
}

.so-leg__sel {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.so-leg[data-changed="true"] .so-leg__sel {
  color: var(--warning-strong);
}

/* What a changed pick replaced, struck through — the "was" the mini app drew. */
.so-leg__was {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.so-leg__was s {
  color: var(--text-disabled);
}

.so-leg__odds {
  flex: none;
  padding-top: var(--space-2);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.so-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-05);
}

.so-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  height: calc(18px * var(--scale));
  padding: 0 var(--space-15);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.so-flag[data-tone="banker"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.so-flag[data-tone="change"] {
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.so-flag[data-tone="warn"] {
  background: var(--error-soft);
  color: var(--error-strong);
}

.so-slip__note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* --- The booking code ------------------------------------------------------------------------ */

/* First on the result: the code is what the punter came for, so it leads and
   the slip it books follows. The code sits big in a sunken well, the way a
   bookmaker's own receipt prints it. */
.so-code {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

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

.so-code__eyebrow {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.so-code__platform {
  flex: none;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.so-code__value {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-tight);
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.so-code[data-state="booking"] .so-code__value,
.so-code[data-state="failed"] .so-code__value {
  color: var(--text-disabled);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}

.so-code[data-state="booking"] .so-code__value {
  animation: so-breathe 1.2s ease-in-out infinite;
}

@keyframes so-breathe {
  50% {
    opacity: 0.45;
  }
}

.so-code__failed {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.so-code__error {
  flex: 1;
  color: var(--error);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.so-code__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* A slip that came back empty says why, on the slip card. */
.so-slip__error {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.so-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: calc(42px * var(--scale));
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.so-action[data-pressed="true"] {
  background: var(--surface-pressed);
}

.so-action--share {
  background: var(--accent);
  color: var(--accent-text);
}

.so-action--share[data-pressed="true"] {
  background: var(--accent-pressed);
}

/* --- Changes made, left off --------------------------------------------------------------------- */

.so-details {
  gap: var(--space-2);
  margin: var(--space-3) var(--so-gutter) 0;
}

.so-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  list-style: none;
}

.so-log__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.so-log__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.so-log__match {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.so-log__kind,
.so-log__odds {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.so-log__sel {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.so-log__reason {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.so-log__change {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.so-log__change s {
  color: var(--text-disabled);
}

.so-log__change b {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.so-result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: var(--space-5) var(--so-gutter) 0;
}

.so-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: calc(48px * var(--scale));
  border-radius: var(--radius-lg);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  transition: transform var(--spring-duration) var(--spring);
}

.so-secondary[data-pressed="true"] {
  background: var(--accent-soft);
}

/* --- The About sheet ----------------------------------------------------------------------------- */

.slip-optimizer .slip-sheet__panel {
  max-height: min(84dvh, calc(760px * var(--scale)));
}

.slip-optimizer .slip-sheet__title {
  padding: var(--space-1) var(--space-4) var(--space-3);
  font-size: var(--text-lg);
}

.slip-optimizer .slip-sheet__body {
  padding: 0 var(--space-4) var(--space-4);
}

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

.so-about__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.so-about__term {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.so-about__text {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* --- Short screens --------------------------------------------------------------------------------- */

@media (max-height: 700px) {
  .so-title {
    font-size: var(--text-xl);
  }
}

/* --- Motion ----------------------------------------------------------------------------------------- */

/* The slip dealt in, once per answer and once per slip switched to. */
.so-slip-host[data-anim="deal"] > * {
  animation: so-deal var(--sd-spring) var(--se-out) backwards;
}

@keyframes so-deal {
  0% {
    transform: translateY(calc(10px * var(--scale)));
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Reduced motion ----------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .slip-optimizer {
    --sd-fade: 100ms;
    --sd-pop: 0ms;
    --sd-spring: 0ms;
    --se-spring: ease-out;
  }

  .slip-optimizer__sheet {
    transform: none;
  }

  .slip-optimizer [data-anim] > *,
  .slip-optimizer [data-anim],
  .so-code[data-state="booking"] .so-code__value {
    animation: none !important;
  }
}