/* slate-review.css: FDP D1.1 Leg 1 visual shell. */

.slr-shell,
.slr-shell * {
  box-sizing: border-box;
}

.slr-shell {
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
  padding:
    max(var(--space-6), env(safe-area-inset-top, 0px))
    max(var(--space-6), env(safe-area-inset-right, 0px))
    calc(var(--space-9) + env(safe-area-inset-bottom, 0px))
    max(var(--space-6), env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 48% 0%, var(--acc-08), transparent 34%),
    var(--surf-0);
  color: var(--ui-text);
  font: 500 var(--type-body)/1.5 var(--sans);
}

.slr-shell button,
.slr-shell textarea,
.slr-shell input {
  font: inherit;
}

.slr-shell button {
  min-height: 44px;
}

.slr-header {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  max-width: 1480px;
  margin: 0 auto var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ui-line);
}

.slr-back,
.slr-view-switch button,
.slr-pair-selector button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
}

.slr-back {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-radius: var(--radius-m);
  font-size: var(--type-label);
  font-weight: 650;
}

.slr-back:hover {
  background: var(--ink-06);
  color: var(--ui-text);
}

.slr-header__title {
  min-width: 0;
}

.slr-header__phone-title {
  display: none;
}

.slr-header__title h1 {
  margin: 0;
  color: var(--ui-text);
  font: 680 var(--type-heading-1)/1 var(--display);
  letter-spacing: -0.035em;
}

.slr-header__title p {
  max-width: 64ch;
  margin: var(--space-2) 0 0;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slr-header__facts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.slr-header__slate-fact {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
}

.slr-header__slate-fact strong {
  font-size: var(--type-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.slr-header__slate-fact span {
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.2 var(--mono);
}

.slr-provenance {
  position: relative;
}

.slr-provenance summary {
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: var(--type-meta);
  list-style-position: inside;
}

.slr-provenance[open] summary {
  border-color: var(--line-acc);
  color: var(--accent-text);
}

.slr-provenance ul {
  position: absolute;
  z-index: 8;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(320px, 80vw);
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-7);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.6 var(--mono);
}

.slr-header__progress {
  grid-column: 2;
  margin: 0;
  color: var(--ui-text-muted);
  font: 600 var(--type-label)/1.3 var(--mono);
}

.slr-header__progress-phone {
  display: none;
}

.slr-header__actions {
  display: flex;
  grid-column: 3;
  grid-row: 2;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.slr-view-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-1);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface);
}

.slr-view-switch button {
  padding: 0 var(--space-3);
  border-radius: var(--radius-s);
  font-size: var(--type-meta);
  font-weight: 650;
}

.slr-view-switch button[aria-pressed="true"] {
  background: var(--acc-14);
  color: var(--accent-text);
}

.slr-view-switch button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slr-header__disabled-reason {
  flex-basis: 100%;
  max-width: 42ch;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  text-align: right;
}

.slr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 680;
  transition:
    color var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.slr-button:hover:not(:disabled) {
  border-color: var(--line-acc);
  background: var(--surf-3);
  box-shadow: var(--shadow-sm);
}

.slr-button:active:not(:disabled) {
  transform: translateY(1px);
}

.slr-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slr-button--primary {
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--ink-on-accent);
  box-shadow: var(--glow-acc);
}

.slr-button--secondary {
  background: var(--ink-04);
}

.slr-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ui-text-muted);
}

.slr-button--quiet:hover:not(:disabled) {
  background: var(--ink-06);
  color: var(--ui-text);
  box-shadow: none;
}

.slr-workspace,
.slr-comparison,
.slr-state,
.slr-chooser,
.slr-contract-alert {
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
}

.slr-workspace--single {
  display: grid;
  grid-template-columns: 260px minmax(420px, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: var(--space-6);
}

.slr-rail,
.slr-pane,
.slr-verdict,
.slr-state,
.slr-chooser,
.slr-contract-alert {
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--ui-surface);
  box-shadow: var(--shadow-sm);
}

.slr-rail {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100dvh - var(--space-8));
  overflow: hidden;
}

.slr-rail__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--ui-line);
}

.slr-rail__heading h2 {
  margin: 0;
  font: 650 var(--type-heading-3)/1.2 var(--display);
}

.slr-rail__heading span {
  color: var(--ui-text-muted);
  font: 600 var(--type-meta)/1 var(--mono);
}

.slr-rail__list,
.slr-rank-strip__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slr-rail__list {
  max-height: calc(100dvh - 148px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.slr-rail__item + .slr-rail__item {
  border-top: 1px solid var(--line-1);
}

.slr-rank-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.slr-rank-card:hover {
  background: var(--ink-04);
}

.slr-rank-card[aria-current="true"] {
  border-left-color: var(--accent);
  background: var(--acc-08);
}

.slr-rank-card__rank {
  display: grid;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  background: var(--surf-2);
  color: var(--ui-text-muted);
  place-items: center;
  font: 700 var(--type-numeral)/1 var(--mono);
}

.slr-rank-card[aria-current="true"] .slr-rank-card__rank {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.slr-rank-card__copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.slr-rank-card__copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.slr-rank-card__copy > span:not(.slr-rank-card__badges) {
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.4 var(--mono);
}

.slr-rank-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.slr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  min-height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  background: var(--ink-04);
  color: var(--ui-text-muted);
  font: 650 var(--type-meta)/1 var(--sans);
  white-space: nowrap;
}

.slr-badge--live {
  border-color: var(--line-acc);
  background: var(--acc-14);
  color: var(--accent-text);
}

.slr-badge--done {
  border-color: var(--edit-40);
  background: var(--edit-12);
  color: var(--edit);
}

.slr-badge--attention {
  border-color: var(--amber-60);
  background: var(--amber-16);
  color: var(--amber);
}

.slr-badge--danger,
.slr-badge--failed {
  border-color: var(--danger);
  background: var(--danger-16);
  color: var(--danger);
}

.slr-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.slr-stage {
  min-width: 0;
}

.slr-pane {
  min-width: 0;
  overflow: hidden;
}

.slr-pane--active {
  border-color: var(--line-acc);
}

.slr-pane__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ui-line);
}

.slr-pane__header > div,
.slr-pane__identity {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.slr-pane__label {
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.slr-pane__engine,
.slr-pane__progress {
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.3 var(--mono);
}

.slr-pane__progress {
  flex: 0 0 auto;
}

.slr-pane__identity {
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.slr-pane__identity > span {
  color: var(--accent-text);
  font: 650 var(--type-meta)/1.2 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.slr-pane__identity h3 {
  margin: 0;
  overflow: hidden;
  color: var(--ui-text);
  font: 660 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
}

.slr-media-box,
.slr-poster,
.slr-pane__gap {
  display: grid;
  place-items: center;
  width: calc(100% - (var(--space-5) * 2));
  max-height: min(56dvh, 560px);
  margin: 0 var(--space-5);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background:
    radial-gradient(circle at 50% 18%, var(--acc-14), transparent 48%),
    var(--surf-0);
}

.slr-media-box[data-aspect="9:16"] {
  width: min(calc(100% - (var(--space-5) * 2)), 315px);
  min-width: min(180px, calc(100% - (var(--space-5) * 2)));
  margin-right: auto;
  margin-left: auto;
}

.slr-media-box > *,
.slr-player-fixture {
  width: 100%;
  height: 100%;
}

.slr-player-fixture {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.slr-player-fixture__mark {
  display: grid;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-pill);
  background: var(--acc-14);
  color: var(--accent-text);
  place-items: center;
}

.slr-poster {
  position: relative;
  min-height: 280px;
  padding: 0;
  color: var(--ui-text);
  cursor: pointer;
}

.slr-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slr-poster__rank {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: grid;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  background: var(--glass-sheet);
  place-items: center;
  font: 700 var(--type-numeral)/1 var(--mono);
}

.slr-poster__play {
  position: relative;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-pill);
  background: var(--glass-sheet);
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 700;
}

.slr-pane__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-5);
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.4 var(--mono);
}

.slr-pane__clip-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slr-pane__gap {
  min-height: 320px;
  padding: var(--space-6);
  color: var(--ui-text-muted);
  text-align: center;
}

.slr-pane__gap strong,
.slr-pane__gap span {
  max-width: 32ch;
}

.slr-pane__gap--error {
  border-color: var(--danger);
  background: var(--danger-16);
  color: var(--ui-text);
}

.slr-pane__gap-rank {
  display: grid;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  place-items: center;
  font: 700 var(--type-numeral)/1 var(--mono);
}

.slr-inline-alert,
.slr-save-error,
.slr-register-state {
  display: grid;
  gap: var(--space-2);
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius-m);
  background: var(--danger-16);
  color: var(--ui-text);
}

.slr-inline-alert span,
.slr-save-error span,
.slr-register-state span {
  color: var(--ui-text-muted);
}

.slr-verdict {
  position: sticky;
  top: var(--space-4);
  overflow: hidden;
}

.slr-verdict__heading {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  border-bottom: 1px solid var(--ui-line);
}

.slr-verdict__heading > span,
.slr-chooser__heading span,
.slr-contract-alert > div > span,
.slr-state__copy > span {
  color: var(--accent-text);
  font: 650 var(--type-meta)/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slr-verdict__heading h2,
.slr-chooser__heading h2,
.slr-contract-alert h2,
.slr-state h2 {
  margin: 0;
  color: var(--ui-text);
  font: 660 var(--type-heading-3)/1.2 var(--display);
}

.slr-verdict__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.slr-verdict-choice {
  min-width: 0;
  padding: 0 var(--space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ink-04);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: var(--type-meta);
  font-weight: 680;
}

.slr-verdict-choice:hover:not(:disabled) {
  border-color: var(--line-acc);
  color: var(--ui-text);
}

.slr-verdict-choice[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--acc-14);
  color: var(--accent-text);
  box-shadow: 0 0 0 2px var(--acc-08);
}

.slr-verdict-choice:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slr-note {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.slr-note__label {
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 680;
}

.slr-note textarea {
  width: 100%;
  min-height: 76px;
  max-height: 176px;
  padding: var(--space-3);
  overflow-y: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  field-sizing: content;
  line-height: 1.5;
  resize: none;
}

.slr-note textarea:hover:not(:disabled) {
  border-color: var(--line-3);
}

.slr-note textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slr-note__hint,
.slr-save-reason {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.slr-register-state {
  margin-top: var(--space-4);
  border-color: var(--ui-line);
  background: var(--ink-04);
}

.slr-register-state--pending {
  border-color: var(--amber-60);
  background: var(--amber-16);
}

.slr-register-state--appended {
  border-color: var(--edit-40);
  background: var(--edit-12);
}

.slr-register-state--failed {
  border-color: var(--danger);
  background: var(--danger-16);
}

.slr-save-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.slr-next-unverdicted {
  margin: 0 var(--space-5) var(--space-4);
}

.slr-action-shelf {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: grid;
  gap: var(--space-2);
  padding:
    var(--space-4)
    var(--space-5)
    max(var(--space-5), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ui-line);
  background: var(--glass-sheet);
}

.slr-action-shelf > .slr-button {
  width: 100%;
  min-height: 52px;
}

.slr-shell:has(:fullscreen) .slr-action-shelf {
  display: none;
}

.slr-comparison {
  display: grid;
  gap: var(--space-4);
}

.slr-rank-strip {
  min-width: 0;
  overflow-x: auto;
  padding: var(--space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--ui-surface);
  scrollbar-width: thin;
}

.slr-rank-strip__list {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  min-width: 100%;
}

.slr-rank-strip__button {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 74px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
}

.slr-rank-strip__button span {
  font-size: var(--type-meta);
}

.slr-rank-strip__button strong {
  color: inherit;
  font: 700 var(--type-numeral)/1 var(--mono);
}

.slr-rank-strip__button[aria-current="true"] {
  border-color: var(--accent);
  background: var(--acc-14);
  color: var(--accent-text);
}

.slr-comparison__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--space-4);
}

.slr-comparison__canvas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.slr-comparison__body--3 .slr-comparison__canvas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.slr-comparison__canvas .slr-pane__identity h3 {
  font-size: var(--type-heading-3);
}

.slr-comparison__canvas .slr-poster {
  min-height: 240px;
}

.slr-pair-selector {
  display: none;
}

.slr-chooser {
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.slr-chooser__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--ui-line);
}

.slr-chooser__heading > div {
  display: grid;
  gap: var(--space-1);
}

.slr-chooser__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  padding: var(--space-5);
}

.slr-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  min-height: 92px;
  padding: var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ink-04);
  cursor: pointer;
}

.slr-choice:has(input:checked) {
  border-color: var(--line-acc);
  background: var(--acc-08);
}

.slr-choice input {
  width: 20px;
  height: 20px;
  margin: var(--space-1) 0 0;
  accent-color: var(--accent);
}

.slr-choice > span {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.slr-choice strong {
  color: var(--ui-text);
  font-size: var(--type-label);
}

.slr-choice small,
.slr-choice em {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.4;
}

.slr-choice em {
  color: var(--amber);
  font-style: normal;
}

.slr-choice--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.slr-chooser__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-5);
}

.slr-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-7);
  min-height: 360px;
  padding: var(--space-8);
}

.slr-state__copy {
  display: grid;
  gap: var(--space-3);
}

.slr-state__copy p,
.slr-contract-alert p {
  max-width: 62ch;
  margin: 0;
  color: var(--ui-text-muted);
}

.slr-state__actions,
.slr-contract-alert__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.slr-state--complete {
  border-color: var(--edit-40);
  background: var(--edit-08);
}

.slr-state--error,
.slr-contract-alert {
  border-color: var(--danger);
}

.slr-state--loading {
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
}

.slr-state--loading .slr-state__actions {
  grid-column: 1 / -1;
}

.slr-skeleton {
  display: grid;
  grid-template-columns: 0.7fr 1.4fr 0.9fr;
  gap: var(--space-3);
  min-height: 220px;
}

.slr-skeleton span {
  display: block;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: linear-gradient(120deg, var(--ink-04), var(--ink-12), var(--ink-04));
}

.slr-contract-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: var(--danger-16);
}

.slr-contract-alert > div:first-child {
  display: grid;
  gap: var(--space-2);
}

.slr-confirm {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  align-items: end;
  padding:
    var(--space-5)
    max(var(--space-5), env(safe-area-inset-right, 0px))
    max(var(--space-5), env(safe-area-inset-bottom, 0px))
    max(var(--space-5), env(safe-area-inset-left, 0px));
  background: var(--sheet-scrim);
}

.slr-confirm__sheet {
  display: grid;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: var(--space-6);
  gap: var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
}

.slr-confirm__sheet > span {
  color: var(--amber);
  font: 650 var(--type-meta)/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slr-confirm__sheet h2,
.slr-confirm__sheet p {
  margin: 0;
}

.slr-confirm__sheet h2 {
  color: var(--ui-text);
  font: 660 var(--type-heading-3)/1.2 var(--display);
}

.slr-confirm__sheet p {
  color: var(--ui-text-muted);
}

.slr-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.slr-shell :is(button, textarea, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* canvas: the tighter three-column review grid */
@media (min-width: 960px) and (max-width: 1199px) {
  .slr-workspace--single {
    grid-template-columns: 220px minmax(300px, 1fr) 280px;
    gap: var(--space-4);
  }

  .slr-pane__identity,
  .slr-pane__meta,
  .slr-verdict__heading,
  .slr-note {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .slr-verdict__choices {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

/* tablet through compact: horizontal rail and two calm columns */
@media (min-width: 640px) and (max-width: 959px) {
  .slr-shell {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .slr-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .slr-header__facts {
    display: none;
  }

  .slr-workspace--single {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--space-4);
  }

  .slr-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }

  .slr-rail__heading {
    padding: var(--space-3) var(--space-4);
  }

  .slr-rail__list {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .slr-rail__item {
    flex: 0 0 210px;
    border-top: 0;
    border-right: 1px solid var(--line-1);
    scroll-snap-align: center;
  }

  .slr-rank-card {
    height: 100%;
    border-bottom: 3px solid transparent;
    border-left: 0;
  }

  .slr-rank-card[aria-current="true"] {
    border-bottom-color: var(--accent);
  }

  .slr-comparison__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .slr-comparison__body > .slr-verdict {
    position: static;
  }
}

/* compact: phone review flow */
@media (max-width: 640px) {
  .slr-shell {
    padding:
      0
      max(var(--space-3), env(safe-area-inset-right, 0px))
      calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
      max(var(--space-3), env(safe-area-inset-left, 0px));
  }

  .slr-header {
    position: sticky;
    z-index: 10;
    top: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    margin-right: calc(var(--space-3) * -1);
    margin-bottom: var(--space-3);
    margin-left: calc(var(--space-3) * -1);
    padding:
      max(var(--space-2), env(safe-area-inset-top, 0px))
      max(var(--space-3), env(safe-area-inset-right, 0px))
      var(--space-2)
      max(var(--space-3), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--ui-line);
    background: var(--glass-sheet);
    backdrop-filter: blur(18px);
  }

  .slr-back {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .slr-back span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .slr-header__title {
    display: grid;
    min-width: 0;
    justify-items: center;
  }

  .slr-header__phone-title {
    display: block;
    color: var(--ui-text);
    font: 680 var(--type-label)/1.2 var(--display);
  }

  .slr-header__title h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .slr-header__title p {
    width: 100%;
    margin-top: var(--space-1);
    font-size: var(--type-meta);
    text-align: center;
  }

  .slr-header__facts,
  .slr-header__actions {
    display: none;
  }

  .slr-header__progress {
    grid-column: 3;
    grid-row: 1;
    font-size: var(--type-meta);
    text-align: right;
  }

  .slr-header__progress-desktop {
    display: none;
  }

  .slr-header__progress-phone {
    display: inline;
  }

  .slr-workspace--single,
  .slr-comparison__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .slr-rail {
    position: static;
    max-height: none;
    border-radius: var(--radius-m);
  }

  .slr-rail__heading {
    display: none;
  }

  .slr-rail__list {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding: 50%;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .slr-rail__item {
    flex: 0 0 92px;
    border-top: 0;
    border-right: 1px solid var(--line-1);
    scroll-snap-align: center;
  }

  .slr-rank-card {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 72px;
    padding: var(--space-2);
    border-bottom: 3px solid transparent;
    border-left: 0;
    text-align: center;
  }

  .slr-rank-card[aria-current="true"] {
    border-bottom-color: var(--accent);
  }

  .slr-rank-card__copy strong,
  .slr-rank-card__copy > span:not(.slr-rank-card__badges) {
    display: none;
  }

  .slr-rank-card__badges {
    justify-content: center;
    margin: 0;
  }

  .slr-rank-card__badges .slr-badge {
    width: 8px;
    min-height: 8px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: currentColor;
    color: var(--accent-text);
    text-indent: 100%;
  }

  .slr-pane,
  .slr-verdict,
  .slr-state,
  .slr-chooser,
  .slr-contract-alert {
    border-radius: var(--radius-m);
  }

  .slr-pane {
    display: flex;
    flex-direction: column;
  }

  .slr-pane__header {
    order: 0;
  }

  .slr-media-box,
  .slr-poster,
  .slr-pane__gap {
    order: 1;
  }

  .slr-pane__identity {
    order: 2;
  }

  .slr-pane__meta {
    order: 3;
  }

  .slr-inline-alert {
    order: 4;
  }

  .slr-pane__header {
    padding: var(--space-2) var(--space-3);
  }

  .slr-pane__engine {
    display: none;
  }

  .slr-pane__identity {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }

  .slr-pane__identity h3 {
    font-size: var(--type-heading-3);
  }

  .slr-media-box,
  .slr-poster,
  .slr-pane__gap {
    width: calc(100% - (var(--space-3) * 2));
    margin-right: var(--space-3);
    margin-left: var(--space-3);
  }

  .slr-media-box[data-aspect="9:16"] {
    width: min(calc(100% - (var(--space-3) * 2)), 315px);
    min-width: min(180px, calc(100% - (var(--space-3) * 2)));
    margin-right: auto;
    margin-left: auto;
  }

  .slr-pane__meta {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .slr-verdict {
    position: static;
    overflow: visible;
  }

  .slr-verdict__heading,
  .slr-verdict__choices,
  .slr-note {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .slr-action-shelf {
    margin-right: calc(var(--space-3) * -1);
    margin-left: calc(var(--space-3) * -1);
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .slr-rank-strip {
    border-radius: var(--radius-m);
  }

  .slr-rank-strip__button {
    min-width: 68px;
  }

  .slr-comparison__canvas,
  .slr-comparison__body--3 .slr-comparison__canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .slr-comparison__body--3 .slr-pane--phone-hidden {
    display: none;
  }

  .slr-comparison__canvas .slr-pane__header {
    align-items: start;
  }

  .slr-comparison__canvas .slr-pane__progress,
  .slr-comparison__canvas .slr-pane__clip-id {
    display: none;
  }

  .slr-comparison__canvas .slr-pane__identity h3 {
    font-size: var(--type-label);
  }

  .slr-comparison__canvas .slr-media-box,
  .slr-comparison__canvas .slr-poster,
  .slr-comparison__canvas .slr-pane__gap {
    width: calc(100% - (var(--space-2) * 2));
    min-width: 0;
    min-height: 220px;
    margin-right: var(--space-2);
    margin-left: var(--space-2);
  }

  .slr-comparison__canvas .slr-media-box[data-aspect="9:16"] {
    width: calc(100% - (var(--space-2) * 2));
  }

  .slr-comparison__canvas .slr-pane__meta {
    justify-content: center;
  }

  .slr-pair-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--ui-line);
    border-radius: var(--radius-m);
    background: var(--ui-surface);
  }

  .slr-pair-selector button {
    border-radius: var(--radius-s);
    font: 650 var(--type-meta)/1 var(--mono);
  }

  .slr-pair-selector button[aria-pressed="true"] {
    background: var(--acc-14);
    color: var(--accent-text);
  }

  .slr-chooser__heading,
  .slr-chooser__actions,
  .slr-state,
  .slr-contract-alert {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .slr-chooser__list {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-3);
  }

  .slr-chooser__actions,
  .slr-state__actions,
  .slr-contract-alert__actions {
    justify-content: stretch;
  }

  .slr-chooser__actions .slr-button,
  .slr-state__actions .slr-button,
  .slr-contract-alert__actions .slr-button {
    width: 100%;
  }

  .slr-state,
  .slr-contract-alert {
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .slr-state--loading {
    grid-template-columns: minmax(0, 1fr);
  }

  .slr-skeleton {
    grid-template-columns: minmax(0, 1fr);
    min-height: 260px;
  }

  .slr-skeleton span:not(:first-child) {
    display: none;
  }

  .slr-inline-alert,
  .slr-save-error,
  .slr-register-state {
    margin-right: var(--space-3);
    margin-left: var(--space-3);
  }

  .slr-confirm {
    padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
    padding-left: max(var(--space-3), env(safe-area-inset-left, 0px));
  }

  .slr-confirm__sheet {
    padding: var(--space-5);
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }

  .slr-confirm__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* phone: verdict choices may wrap only at the named phone breakpoint */
@media (max-width: 480px) {
  .slr-verdict__choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .slr-verdict-choice {
    font-size: var(--type-label);
  }
}

@media (pointer: coarse) {
  .slr-shell button,
  .slr-shell textarea,
  .slr-shell input,
  .slr-provenance summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slr-shell,
  .slr-shell *,
  .slr-shell *::before,
  .slr-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .slr-rail,
  .slr-pane,
  .slr-verdict,
  .slr-state,
  .slr-chooser,
  .slr-contract-alert,
  .slr-rank-strip,
  .slr-choice,
  .slr-media-box,
  .slr-poster,
  .slr-pane__gap,
  .slr-button,
  .slr-verdict-choice,
  .slr-note textarea,
  .slr-badge,
  .slr-confirm__sheet {
    border-color: CanvasText;
    box-shadow: none;
  }

  .slr-rank-card[aria-current="true"],
  .slr-rank-strip__button[aria-current="true"],
  .slr-verdict-choice[aria-checked="true"],
  .slr-pair-selector button[aria-pressed="true"] {
    border: 3px solid Highlight;
    background: Canvas;
    color: CanvasText;
  }

  .slr-badge__dot {
    border: 1px solid CanvasText;
    background: Highlight;
  }

  .slr-shell :is(button, textarea, input, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}