/*
  Check a video. Follows the original layout: a title row, then one workspace box with the two
  first steps and the drop zone on the left, and the summary, start button and tips on the right.
  Only the video itself and the evidence viewer use dark surfaces.
*/

.scan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5) var(--s8);
  align-items: end;
  padding-block: var(--s8) var(--s7);
}

.scan-head .lead {
  max-width: 34rem;
}

.scanner {
  padding-bottom: 0;
}

@media (max-width: 48rem) {
  .scan-head {
    grid-template-columns: 1fr;
    padding-block: var(--s7) var(--s6);
  }
}

/* The workspace box */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow);
}

.workspace__main {
  display: grid;
  align-content: start;
  gap: var(--s6);
  padding: var(--s6);
}

.workspace__controls {
  display: grid;
  gap: var(--s6);
}

/* Step 2 sits under step 1 and spans the whole column; its options follow straight after */
.workspace__controls > .scan-step + .scan-step {
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}

.workspace__controls + .source-switch {
  margin-top: calc(-1 * var(--s3));
}

.workspace__side {
  display: grid;
  align-content: start;
  gap: var(--s6);
  padding: var(--s6);
  background: var(--tint);
}

.workspace__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  color: var(--ink-2);
  background: var(--plum-wash);
  font-size: var(--t-small);
}

.workspace__foot .lucide {
  color: var(--plum);
}

@media (max-width: 62rem) {
  .workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .workspace__main,
  .workspace__side {
    padding: var(--s5);
  }

  .workspace__foot {
    padding: var(--s4) var(--s5);
  }
}

/* Steps */
.scan-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s3);
}

.scan-step__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.scan-step__head h2,
.tips h2 {
  font-size: var(--t-h3);
  font-weight: 680;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.scan-step__num {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--ink-3);
  background: var(--sheet);
  font-size: var(--t-small);
  font-weight: 700;
}

.scan-step__num.is-current {
  border-color: var(--plum);
  color: var(--on-plum);
  background: var(--plum);
}

.scan-step__num.is-complete {
  border-color: var(--plum);
  color: var(--plum);
  background: var(--plum-wash);
}

.scan-step__help {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.scan-step__file {
  justify-self: start;
  cursor: pointer;
}

.field-message {
  color: var(--signal);
  font-size: var(--t-small);
}

.field-message:empty {
  display: none;
}

.field-message.is-info {
  color: var(--ink-3);
}

/* Video type picker */
.model-picker {
  position: relative;
}

.model-picker__trigger {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--sheet);
  text-align: left;
}

.model-picker__trigger:hover,
.model-picker.is-open .model-picker__trigger {
  border-color: var(--plum);
}

.model-picker__value strong {
  font-weight: 620;
}

.model-picker.is-open .model-picker__trigger .lucide {
  transform: rotate(180deg);
}

.model-picker__options {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--s2));
  left: 0;
  display: grid;
  width: max(100%, 22rem);
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--sheet);
  box-shadow: 0 1rem 2.5rem rgb(43 29 49 / 16%);
}

.model-picker__options button {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
}

.model-picker__options button:hover,
.model-picker__options button:focus-visible {
  background: var(--tint);
}

.model-picker__options span {
  display: grid;
  flex: 1;
  gap: var(--s1);
}

.model-picker__options strong {
  font-weight: 640;
}

.model-picker__options small {
  color: var(--ink-3);
  font-size: var(--t-small);
  line-height: 1.45;
}

.model-picker__options .opt-icon {
  margin-top: 0.15em;
  color: var(--plum);
}

.model-picker__options .opt-check {
  margin-top: 0.15em;
  color: var(--plum);
  visibility: hidden;
}

.model-picker__options [aria-selected="true"] {
  background: var(--plum-wash);
}

.model-picker__options [aria-selected="true"] .opt-check {
  visibility: visible;
}

/* Drop zone */
.upload-zone {
  position: relative;
  display: grid;
  min-height: 20rem;
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.upload-zone:hover,
.upload-zone.is-dragging {
  border-color: var(--plum);
  background: var(--plum-wash);
}

.upload-zone.has-preview {
  min-height: 0;
  border: 0;
  background: transparent;
}

.upload-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-zone__prompt {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s7) var(--s5);
  text-align: center;
  cursor: pointer;
}

.upload-zone__icon {
  display: inline-grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin-bottom: var(--s2);
  border-radius: 50%;
  color: var(--plum);
  background: var(--plum-wash);
}

.upload-zone__icon .lucide {
  width: 1.75rem;
  height: 1.75rem;
}

.upload-zone__prompt strong {
  font-size: 1.25rem;
  font-weight: 680;
}

.upload-zone__prompt > span:not(.upload-zone__icon):not(.limits) {
  color: var(--ink-2);
}

.limits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.limit {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--t-small);
}

.limit .lucide {
  color: var(--plum);
}

.upload-zone input[type="file"]:focus-visible + .upload-zone__prompt {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

/* Upload a file / Paste a link: two wide option cards above the video area,
   shown only when the server accepts links */
.source-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.source-switch[hidden] {
  display: none;
}

/* sit closer to the video area they control */
.source-switch:not([hidden]) {
  margin-bottom: calc(var(--s3) - var(--s6));
}

.has-link-option .scan-step__file {
  display: none;
}

.source-switch button {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 4.5rem;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--sheet);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.source-switch button:hover {
  border-color: var(--plum);
}

.source-switch button[aria-selected="true"] {
  border-color: var(--plum);
  background: var(--plum-wash);
  box-shadow: inset 0 0 0 1px var(--plum);
}

.source-switch__icon {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--plum);
  background: var(--plum-wash);
}

.source-switch button[aria-selected="true"] .source-switch__icon {
  color: var(--on-plum);
  background: var(--plum);
}

.source-switch__icon .lucide {
  width: 1.25rem;
  height: 1.25rem;
}

.source-switch__text {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.source-switch__text strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
}

.source-switch__text small {
  color: var(--ink-3);
  font-size: var(--t-small);
  line-height: 1.45;
}

.source-switch button[aria-selected="true"] .source-switch__text small {
  color: var(--ink-2);
}

/* Link box: same frame as the drop zone */
.link-zone {
  display: grid;
}

.link-zone[hidden],
.link-zone__entry[hidden] {
  display: none;
}

.link-zone__entry {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  min-height: 20rem;
  align-content: center;
  padding: var(--s7) var(--s5);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  text-align: center;
}

.link-zone__entry:focus-within {
  border-color: var(--plum);
}

.link-zone__label {
  font-size: 1.25rem;
  font-weight: 680;
}

.link-zone__row {
  display: flex;
  width: min(100%, 36rem);
  gap: var(--s2);
}

.link-zone__input {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0 var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--sheet);
  font: inherit;
}

.link-zone__input::placeholder {
  color: var(--ink-3);
}

.link-zone__input:hover,
.link-zone__input:focus {
  border-color: var(--plum);
}

.link-zone__row .btn {
  flex: 0 0 auto;
}

.link-zone__platforms {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
}

.link-zone__platforms[hidden] {
  display: none;
}

.link-zone__platforms > strong {
  font-size: 0.9375rem;
  font-weight: 650;
}

.platform-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--plum-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plum) 35%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
}

.platform-chip::before {
  width: 0.45rem;
  height: 0.8rem;
  margin: -0.2rem 0.1rem 0 0;
  border: solid var(--plum);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
}

.link-zone__entry > .limits {
  margin-top: var(--s1);
}

.link-zone__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 34rem;
  margin-top: var(--s2);
  color: var(--ink-3);
  font-size: var(--t-small);
  text-align: left;
}

.link-zone__note .lucide {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2em;
  color: var(--plum);
}

/* The found video: a dark card in the same place as the upload preview */
.upload-preview__video.link-preview {
  display: grid;
  min-height: 18rem;
  place-items: center;
  background:
    radial-gradient(60% 80% at 50% 40%, rgb(215 166 229 / 16%), transparent 70%),
    #0f0d12;
}

.link-preview__card {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  max-width: 30rem;
  padding: var(--s5);
  color: var(--screen-ink);
  text-align: center;
}

.link-preview__platform {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  color: var(--screen-accent);
  background: rgb(255 255 255 / 8%);
  font-size: var(--t-small);
  font-weight: 600;
}

.link-preview__platform .lucide {
  width: 1rem;
  height: 1rem;
}

.link-preview__card strong {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
}

.link-preview__card > span:last-child {
  color: var(--screen-ink-2);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .link-zone__row {
    flex-direction: column;
  }

  .link-zone__entry {
    padding: var(--s6) var(--s4);
  }

  .source-switch {
    grid-template-columns: 1fr;
  }

  .source-switch__text small {
    white-space: normal;
  }
}

/* Preview: the only dark area until there's a result */
.upload-preview {
  display: grid;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
}

.upload-preview__video {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #000;
}

.upload-preview video {
  width: 100%;
  max-height: 30rem;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.video-analysis-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: var(--s2);
  padding: var(--s5);
  color: var(--screen-ink);
  background: linear-gradient(180deg, rgb(10 9 12 / 30%), rgb(10 9 12 / 88%));
}

.video-analysis-overlay strong {
  font-size: 1.125rem;
  font-weight: 680;
}

.video-analysis-overlay > span:not(.scan-line):not(.analysis-progress):not(.analysis-elapsed) {
  max-width: 34rem;
  color: var(--screen-ink-2);
}

.scan-line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--screen-accent);
  box-shadow: 0 0 1rem var(--screen-accent);
  animation: scan-sweep 2.4s ease-in-out infinite alternate;
}

@keyframes scan-sweep {
  from { top: 0; }
  to { top: calc(100% - 2px); }
}

.analysis-progress {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--screen-rule);
}

.analysis-progress > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--screen-accent);
  transition: width 200ms linear;
}

.analysis-elapsed {
  color: var(--screen-ink-2);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.selected-file {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s2);
}

.selected-file > .lucide {
  color: var(--screen-accent);
}

.selected-file > div {
  display: grid;
  min-width: 0;
  flex: 1;
}

.selected-file strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-file span {
  color: var(--screen-ink-2);
  font-size: var(--t-small);
}

.selected-file .btn {
  min-height: 2.5rem;
  padding: 0 var(--s4);
  border-color: var(--screen-rule);
  color: var(--screen-ink);
  background: transparent;
  cursor: pointer;
}

.selected-file .icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-color: var(--screen-rule);
  color: var(--screen-ink-2);
  background: transparent;
}

/* Summary */
.video-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  margin-top: var(--s2);
}

.video-details__wide {
  grid-column: 1 / -1;
}

.video-details dt {
  color: var(--ink-3);
  font-size: var(--t-small);
}

.video-details dd {
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* A length or quality that can't be checked, such as "5s · too short" */
.video-details dd.is-problem {
  color: var(--signal);
}

/* While a check runs, the video and its type are locked so a second check can't start alongside it */
.model-picker__trigger:disabled,
.source-switch button:disabled {
  cursor: not-allowed;
}

.model-picker__trigger:disabled {
  opacity: 0.6;
}

.model-picker__trigger:disabled:hover {
  border-color: var(--rule-strong);
}

.source-switch button:disabled:not([aria-selected="true"]) {
  opacity: 0.5;
}

.source-switch button:disabled:not([aria-selected="true"]):hover {
  border-color: var(--rule-strong);
}

.scanner.is-locked .selected-file .btn,
.scanner.is-locked .selected-file .icon-btn,
.scanner.is-locked .scan-step__file {
  opacity: 0.45;
  pointer-events: none;
}

/* A check picked back up after a reload has no video to show, only its progress */
.upload-preview.is-resuming video {
  visibility: hidden;
}

.scan-submit {
  width: 100%;
  margin-top: var(--s3);
}

.scan-submit:disabled {
  border-color: var(--rule-strong);
  color: var(--ink-3);
  background: var(--sheet);
  cursor: not-allowed;
}

.scan-review__help {
  text-align: center;
}

.analysis-error {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--signal-wash);
}

.analysis-error .lucide {
  margin-top: 0.15em;
  color: var(--signal);
}

.analysis-error strong {
  color: var(--ink);
}

.tips {
  display: grid;
  gap: var(--s3);
}

.tips .ticks li {
  font-size: 0.9375rem;
}

/* Result */
.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin-top: var(--s8);
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}

.result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.result__head h2 {
  font-size: var(--t-h2);
}

.result.is-alert .result__head h2 {
  color: var(--signal);
}

.verdict {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  padding: 0;
}

.verdict > div {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s6);
}

.verdict > div + div {
  border-left: 1px solid var(--rule);
}

.verdict__label,
.verdict__score-head span {
  color: var(--ink-3);
  font-size: var(--t-small);
}

.verdict__word {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
}

.result.is-alert .verdict__word {
  color: var(--signal);
}

.result.is-clear .verdict__word {
  color: var(--clear);
}

.verdict p {
  color: var(--ink-2);
}

.verdict__score-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}

.verdict__score-head strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  line-height: 1;
}

.analysis-result__scale {
  position: relative;
  margin-block: var(--s3) var(--s5);
}

.analysis-result__meter {
  display: block;
  height: 0.625rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.analysis-result__meter > span {
  display: block;
  width: var(--result-score, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ink-3);
  transition: width 600ms var(--ease);
}

.result.is-alert .analysis-result__meter > span {
  background: var(--signal);
}

.result.is-clear .analysis-result__meter > span {
  background: var(--clear);
}

.analysis-result__threshold-mark {
  position: absolute;
  top: -0.375rem;
  left: var(--threshold, 50%);
  width: 2px;
  height: 1.375rem;
  background: var(--ink);
  transform: translateX(-1px);
}

.analysis-result__threshold-mark > span {
  position: absolute;
  top: calc(100% + var(--s1));
  left: 50%;
  color: var(--ink-2);
  font-size: var(--t-small);
  white-space: nowrap;
  transform: translateX(-50%);
}

.result__next {
  display: grid;
  gap: var(--s3);
  padding-left: var(--s5);
}

.result__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.result__details dt {
  color: var(--ink-3);
  font-size: var(--t-small);
}

.result__details dd {
  font-weight: 600;
}

@media (max-width: 48rem) {
  .verdict {
    grid-template-columns: 1fr;
  }

  .verdict > div + div {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .verdict > div {
    padding: var(--s5);
  }
}

/* Evidence viewer (dark: it shows video frames) */
.evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s6);
  border-radius: var(--r-lg);
}

.evidence__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

.evidence__intro {
  display: grid;
  gap: var(--s2);
  max-width: 40rem;
}

.evidence__head h3 {
  font-size: 1.25rem;
}

.evidence__head p,
.evidence-note {
  color: var(--screen-ink-2);
  font-size: var(--t-small);
}

.evidence-view {
  display: inline-flex;
  flex: 0 0 auto;
  padding: var(--s1);
  border: 1px solid var(--screen-rule);
  border-radius: var(--r-sm);
}

.evidence-view button {
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: 6px;
  color: var(--screen-ink-2);
  background: transparent;
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}

.evidence-view button.is-active {
  color: var(--screen-ink);
  background: var(--screen-2);
  box-shadow: inset 0 0 0 1px var(--screen-rule);
}

.evidence__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap);
}

@media (max-width: 62rem) {
  .evidence__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .evidence {
    padding: var(--s4);
  }
}

.evidence-viewer,
.evidence-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s4);
}

.evidence-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--evidence-aspect, 16 / 9);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--screen-rule);
  border-radius: var(--r-md);
  background: #000;
  cursor: zoom-in;
}

.evidence-stage__base,
.evidence-stage__heat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.evidence-stage__heat {
  opacity: var(--evidence-opacity, 0.85);
  pointer-events: none;
}

.evidence-stage__zoom {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--screen-ink);
  background: rgb(10 9 12 / 70%);
}

.evidence-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  color: var(--screen-ink-2);
  font-size: var(--t-small);
}

.evidence-play {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #1a1020;
  background: var(--screen-accent);
}

.evidence-range {
  flex: 1;
  min-width: 0;
  accent-color: var(--screen-accent);
}

.evidence-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.evidence-opacity {
  display: flex;
  min-width: 12rem;
  flex: 1;
  align-items: center;
  gap: var(--s3);
}

.evidence-legend {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Mirrors the heat colors drawn by the GPU worker */
.evidence-legend i {
  display: block;
  width: 4.5rem;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgb(116 50 130 / 0%), rgb(170 56 190 / 60%), rgb(230 80 236 / 90%)), #3a3440;
}

.evidence-side h4 {
  font-size: var(--t-small);
  font-weight: 640;
}

.evidence-segments {
  display: grid;
  gap: var(--s3);
}

.evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.evidence-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--screen-rule);
  border-radius: var(--r-sm);
  color: var(--screen-ink-2);
  background: transparent;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.evidence-chip strong {
  color: var(--screen-ink);
  font-weight: 640;
}

.evidence-chip small {
  color: var(--screen-ink-2);
}

.evidence-chip:hover {
  border-color: var(--screen-ink-2);
}

.evidence-chip[aria-pressed="true"],
.evidence-chip.is-active {
  border-color: var(--screen-accent);
  color: var(--screen-ink);
  background: color-mix(in srgb, var(--screen-accent) 12%, transparent);
}

.evidence-timeline {
  display: grid;
  gap: var(--s3);
}

.evidence-timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.evidence-timeline__key {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--screen-ink-2);
  font-size: var(--t-small);
}

.evidence-timeline__key i {
  width: 1rem;
  border-top: 2px dashed var(--screen-ink);
}

.evidence-timeline__plot {
  position: relative;
  height: 9rem;
  border-bottom: 1px solid var(--screen-rule);
}

.evidence-timeline__bars {
  display: flex;
  height: 100%;
  align-items: flex-end;
  gap: var(--s1);
}

/* Bars: red above the threshold, grey below */
.evidence-bar {
  position: relative;
  display: flex;
  height: 100%;
  flex: 1;
  align-items: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
}

.evidence-bar > span {
  display: block;
  width: 100%;
  height: var(--bar-value, 0%);
  border-radius: 3px 3px 0 0;
  background: #6b7280;
}

.evidence-bar.is-above > span {
  background: var(--screen-signal);
}

button.evidence-bar {
  cursor: pointer;
}

button.evidence-bar:hover > span {
  filter: brightness(1.2);
}

.evidence-bar.is-selected > span {
  box-shadow: 0 0 0 2px var(--screen), 0 0 0 3.5px var(--screen-ink);
}

.evidence-timeline__threshold {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: var(--threshold, 50%);
  left: 0;
  border-top: 2px dashed var(--screen-ink);
  pointer-events: none;
}

.evidence-tooltip {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + var(--s2));
  left: var(--tip-x, 0);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--screen);
  background: var(--screen-ink);
  font-size: var(--t-small);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.evidence-timeline__axis {
  display: flex;
  justify-content: space-between;
  color: var(--screen-ink-2);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.evidence-table summary {
  color: var(--screen-ink);
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
}

.evidence-table table {
  width: 100%;
  margin-top: var(--s3);
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.evidence-table th,
.evidence-table td {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--screen-rule);
  text-align: left;
}

.evidence-table th {
  color: var(--screen-ink-2);
  font-weight: 560;
}

/* Larger evidence map */
.map-dialog {
  width: min(58rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--gutter));
  overflow: auto;
  padding: var(--s5);
  border: 1px solid var(--screen-rule);
  border-radius: var(--r-lg);
}

.map-dialog::backdrop {
  background: rgb(10 9 12 / 72%);
}

.map-dialog__head,
.map-dialog__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.map-dialog__head {
  margin-bottom: var(--s4);
}

.map-dialog__head h2 {
  font-size: 1.25rem;
}

.map-dialog__nav {
  margin-block: var(--s4);
  font-variant-numeric: tabular-nums;
}

.map-dialog .icon-btn {
  border-color: var(--screen-rule);
  color: var(--screen-ink);
  background: transparent;
}

.map-dialog p {
  color: var(--screen-ink-2);
  font-size: var(--t-small);
}

.evidence-stage--large {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .scan-line {
    animation: none;
    top: 50%;
  }
}

/* Video properties and the resolution note (from the first prototype) */
.result__details-wide {
  grid-column: 1 / -1;
}

.result__details dd {
  overflow-wrap: anywhere;
}

.quality-note {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--tint);
  font-size: 0.9375rem;
}

.quality-note .lucide {
  margin-top: 0.2em;
  color: var(--plum);
}

.quality-note strong {
  color: var(--ink);
}

.quality-note[data-tier="medium"] .lucide {
  color: #b7791f;
}

.quality-note[data-tier="low"] .lucide {
  color: var(--signal);
}

/* Resolution guide cards */
.quality-card[data-tier="high"] .card__icon {
  color: var(--clear);
  background: var(--clear-wash);
}

.quality-card[data-tier="medium"] .card__icon {
  color: #9a6214;
  background: #fbf1df;
}

.quality-card[data-tier="low"] .card__icon {
  color: var(--signal);
  background: var(--signal-wash);
}

html[data-resolved-theme="dark"] .quality-card[data-tier="medium"] .card__icon {
  color: #f0b45a;
  background: #3a2c14;
}

html[data-resolved-theme="dark"] .quality-note[data-tier="medium"] .lucide {
  color: #f0b45a;
}

.scanner-page .section--flush {
  padding-top: 0;
}

/* Shown when the server can't take links right now */
.link-zone__off {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 34rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--tint);
  font-size: var(--t-small);
  text-align: left;
}

.link-zone__off[hidden] {
  display: none;
}

.link-zone__off .lucide {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  color: var(--signal);
}

.link-zone__input:disabled,
.link-zone__row .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Note above the preview result */
.result__sample {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  color: var(--ink-2);
  background: var(--plum-wash);
  font-size: var(--t-small);
}

.result__sample[hidden] {
  display: none;
}

.result__sample .lucide {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
  color: var(--plum);
}

.result__sample strong {
  color: var(--ink);
}

/* ---- Result: the answer on top (headline, big score, long bar), the evidence below, details last ---- */
.result {
  gap: var(--s6);
  --verdict: var(--signal);
  --verdict-wash: var(--signal-wash);
}

.result.is-clear {
  --verdict: var(--clear);
  --verdict-wash: color-mix(in srgb, var(--clear) 14%, var(--sheet));
}

.result-hero {
  display: grid;
  padding: var(--s6) var(--s7);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow);
}

.result-facts__quality.quality-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--tint);
  font-size: var(--t-small);
}

.result-facts__quality[hidden] {
  display: none;
}

.result-facts__quality .lucide {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  color: var(--plum);
}

/* The answer on the left, the video properties on the right */
.result-hero__main {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s9);
}

.result-props {
  padding-left: var(--s7);
  border-left: 1px solid var(--rule);
}

@media (max-width: 62rem) {
  .result-props {
    padding: var(--s5) 0 0;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
}

.result-report {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s6);
}

.result-report__text {
  display: grid;
  justify-items: start;
  gap: var(--s3);
  min-width: 0;
}

.result-report__text h2 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--verdict);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.result-report__text .result-hero__sub {
  white-space: normal;
}

/* The score ring: filled up to the score, with a tick at the detector's line */
.result-dial {
  position: relative;
  display: grid;
  width: 11.5rem;
  height: 11.5rem;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--verdict) 0 var(--result-score, 0%), var(--tint) 0);
}

.result-dial::before {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--sheet);
  content: "";
}

.result-dial__line {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--threshold-turn, 0.5) * 1turn));
}

/* The detector's line: exactly as deep as the ring, with a thin gap on each side */
.result-dial__line::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 13px;
  margin-left: -2px;
  border-radius: 1px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--sheet);
  content: "";
}

.result-dial__value {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s1);
  max-width: 7.5rem;
  text-align: center;
}

.result-dial__value strong {
  color: var(--verdict);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.result-dial__value small {
  color: var(--ink-3);
  font-size: 0.75rem;
  line-height: 1.3;
}

@media (max-width: 40rem) {
  .result-report {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .result-report__text {
    justify-items: center;
    text-align: center;
  }

  .result-report__text .result-facts {
    justify-items: center;
  }
}

@media (max-width: 62rem) {
  .result-hero__main {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Video properties: a file card, then simple label / value rows */
.result-props {
  display: grid;
  gap: var(--s3);
}

.result-props h3,
.evidence-check h4 {
  font-size: 1rem;
  font-weight: 650;
}

.result-file {
  display: flex;
  gap: var(--s3);
  align-items: center;
  min-width: 0;
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--tint);
}

.result-file__icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.625rem;
  color: var(--plum);
  background: var(--plum-wash);
}

.result-file__icon .lucide {
  width: 1.125rem;
  height: 1.125rem;
}

.result-file__text {
  display: grid;
  min-width: 0;
}

.result-file__text strong {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-file__meta {
  display: flex;
  gap: 0.375rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.result-file__meta [hidden] {
  display: none;
}

.result-rows {
  margin: 0;
}

.result-rows > div {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
  justify-content: space-between;
  padding: 0.625rem 0.25rem;
  border-bottom: 1px solid var(--rule);
}

.result-rows dt {
  color: var(--ink-2);
}

.result-rows dd {
  display: flex;
  gap: 0.375rem;
  align-items: baseline;
  margin: 0;
  font-weight: 650;
  text-align: right;
}

.result-rows__tag {
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--r-pill);
  color: var(--plum);
  background: var(--plum-wash);
  font-size: 0.75rem;
  font-weight: 650;
}

.result-rows__tag[hidden] {
  display: none;
}

/* Right: the answer */
.result-hero__main {
  display: grid;
  align-content: start;
  gap: var(--s5);
  min-width: 0;
}

/* Round badge before "Likely Deepfake" / "Likely Real" */
.verdict-badge {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--verdict);
  box-shadow: 0 0 0 5px var(--verdict-wash);
}

.verdict-badge .lucide {
  width: 1.3rem;
  height: 1.3rem;
  stroke-width: 2.25;
}

.result-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
}

.result-hero__answer {
  display: grid;
  flex: 1 1 18rem;
  gap: var(--s2);
  min-width: 0;
}

.result-hero__answer h2 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--verdict);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.result-hero__icon {
  flex: 0 0 auto;
  width: 0.8em;
  height: 0.8em;
  stroke-width: 2.25;
}

.result.is-alert .result-pill__clear,
.result.is-clear .result-pill__alert {
  display: none;
}

/* One line under the verdict */
.result-hero__sub {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 1.0625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-hero__score {
  display: grid;
  justify-items: end;
  text-align: right;
}

.result-hero__score strong {
  color: var(--verdict);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.9rem + 1.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.result-hero__score span {
  color: var(--ink-3);
  font-size: var(--t-small);
}

/* The long bar: filled to the score, with a marker at the detector's line */
.result-bar {
  position: relative;
  height: 14px;
  margin-bottom: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.result-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--result-score, 0%);
  border-radius: inherit;
  background: var(--verdict);
  transition: width 600ms var(--ease);
}

.result-bar__line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: var(--threshold, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}

.result-bar__line span {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  color: var(--ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Footer: short facts as chips, the button on the right */
.result-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.result-facts {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-facts li,
.result-facts li.quality-note {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--ink-2);
}

.result-facts li[hidden] {
  display: none;
}

.result-facts .lucide {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--plum);
}

.result-facts strong {
  color: var(--ink);
  font-weight: 600;
}

/* Shown on a result that came from only a few usable frames */
.result-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 34rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: #fbf1df;
  font-size: var(--t-small);
  text-align: left;
}

.result-warning .lucide {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  color: #9a6214;
}

.result-warning strong {
  color: var(--ink);
}

html[data-resolved-theme="dark"] .result-warning {
  background: #3a2c14;
}

html[data-resolved-theme="dark"] .result-warning .lucide {
  color: #f0b45a;
}

/* What the second check is, under the chips */
.result-focus .check-note {
  max-width: 48rem;
  padding-left: 2.9rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

@media (max-width: 40rem) {
  .result-focus .check-note {
    padding-left: 0;
  }
}

/* Evidence: a light card, like the rest of the page. The panel's colours are set here, so the
   rules written for the dark version pick up the light ones. */
.result .evidence {
  --screen: var(--sheet);
  --screen-ink: var(--ink);
  --screen-ink-2: var(--ink-2);
  --screen-rule: var(--rule);
  --screen-accent: var(--plum);
  --screen-signal: var(--signal);
  border: 1px solid var(--rule);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: var(--shadow);
}

.result .evidence .evidence-bar:not(.is-above) > span {
  background: color-mix(in srgb, var(--plum) 28%, var(--tint));
}

.result .evidence .evidence-bar__mark,
.result .evidence .evidence-chip__num {
  color: var(--on-plum);
}

.result .evidence .evidence-stage__zoom {
  color: #fff;
}

.result .evidence .evidence-strip__frame {
  opacity: 1;
  filter: saturate(0.45) brightness(0.9);
}

.result .evidence .evidence-strip__frame.is-active,
.result .evidence .evidence-strip__frame:hover {
  filter: none;
}

.result .evidence .evidence-play {
  color: var(--on-plum);
}

.result .evidence .evidence-strip__frame.is-active,
.result .evidence .evidence-strip__frame:hover {
  opacity: 1;
}

.result .evidence .evidence-chip.is-active,
.result .evidence .evidence-chip[aria-pressed="true"] {
  background: var(--plum-wash);
}

/* Evidence: the score over time across the top, then the frames and the moments */
.evidence__timeline-wrap {
  padding-top: var(--s5);
}

.result .evidence-timeline__head h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
}

.evidence-timeline__hint {
  color: var(--screen-ink-2);
  font-size: 0.75rem;
  font-weight: 400;
}

.result .evidence-timeline__plot {
  height: 5.5rem;
  margin-top: var(--s5);
}

.evidence-check {
  display: grid;
  gap: var(--s3);
}

.evidence-check .result__details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
}

.evidence-bar__mark {
  position: absolute;
  bottom: calc(var(--mark-at, 100%) + 6px);
  left: 50%;
  z-index: 2;
  display: grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: 4px;
  color: #1a1020;
  background: var(--screen-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.result .evidence__grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s6);
}

.result .evidence-side {
  gap: var(--s5);
}

.evidence-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s1);
}

.evidence-strip:empty {
  display: none;
}

.evidence-strip__frame {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #000;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 160ms var(--ease);
}

.evidence-strip__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.evidence-strip__frame:hover,
.evidence-strip__frame.is-active {
  opacity: 1;
}

.evidence-strip__frame.is-active {
  outline: 2px solid var(--screen-accent);
  outline-offset: 1px;
}

.evidence-strip__frame:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.result .evidence-chips {
  display: grid;
  gap: var(--s2);
}

.result .evidence-chip {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
}

.evidence-chip__num {
  display: inline-grid;
  min-width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 4px;
  color: #1a1020;
  background: var(--screen-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.result .evidence-chip strong {
  margin-left: auto;
}

/* Details: two cards side by side */
.result-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.result-details .card {
  display: grid;
  align-content: start;
  gap: var(--s4);
}

.result-details h3 {
  font-size: 1.0625rem;
}

@media (max-width: 62rem) {
  .result-hero,
  .result .evidence__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-hero__main {
    order: -1;
  }
}

@media (max-width: 40rem) {
  .result-hero {
    padding: var(--s5) var(--s4);
  }

  .result-hero__score {
    justify-items: start;
    text-align: left;
  }

  .result-hero__foot .btn {
    width: 100%;
  }

  .evidence-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.result-hero__foot > .btn {
  margin-left: auto;
}

.evidence-check .result__details-wide {
  grid-column: span 1;
}

@media (max-width: 62rem) {
  .evidence-check .result__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones and tablets: the check details come last, after the scores and moments */
@media (max-width: 62rem) {
  .result .evidence-viewer {
    display: contents;
  }

  .result .evidence__grid {
    row-gap: var(--s4);
  }

  .result .evidence-side {
    order: 1;
    margin-top: var(--s3);
  }

  .result .evidence-check {
    order: 2;
    margin-top: var(--s3);
  }
}

/* About the check: a row of small chips beside "Where it looked" */
.check-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  max-width: 34rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--tint);
  font-size: var(--t-small);
  white-space: nowrap;
}

.check-chips .lucide {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--plum);
}

.check-chips span {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 62rem) {
  .check-chips {
    justify-content: flex-start;
    max-width: none;
  }
}

.result .evidence__head {
  display: grid;
  justify-content: stretch;
  gap: var(--s4);
}

.result .check-chips {
  justify-content: flex-start;
  max-width: none;
}

/* ===== One result card: the answer on top, "What the detector focused on" below ===== */
/* The lower part of the card is a soft plum band, so no thin line is needed between the two parts.
   It reaches the card's edges, so its margins mirror the card's padding. */
.result-hero {
  --hero-pad-y: var(--s6);
  --hero-pad-x: var(--s7);
}

.result-hero > .result-focus {
  margin: var(--s6) calc(-1 * var(--hero-pad-x)) calc(-1 * var(--hero-pad-y));
  padding: var(--s6) var(--hero-pad-x);
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: color-mix(in srgb, var(--plum-wash) 55%, var(--sheet));
  box-shadow: none;
}

.result-focus .evidence__head {
  display: grid;
  gap: var(--s3);
}

.result-focus .evidence__intro {
  gap: var(--s1);
}

.result-focus .evidence__intro h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.focus-title-icon {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.625rem;
  color: var(--on-plum);
  background: var(--plum);
}

.focus-title-icon .lucide {
  width: 1.125rem;
  height: 1.125rem;
}

.result-focus .evidence__intro p,
.result-focus .check-chips {
  padding-left: 2.9rem;
}

.result-focus .check-chips li {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
}

@media (max-width: 40rem) {
  .result-hero {
    --hero-pad-y: var(--s5);
    --hero-pad-x: var(--s4);
  }

  .result-focus .evidence__intro p,
  .result-focus .check-chips {
    padding-left: 0;
  }
}

.result-again {
  justify-self: start;
  margin-top: var(--s2);
}

/* The reel: a light film strip of the moments, then the score as a smooth line */
.focus-reel {
  --line-gutter: 4.25rem;
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--sheet);
}

.focus-reel__film {
  position: relative;
  padding: 1.625rem 0.625rem;
  border-radius: 0.75rem;
  background: var(--tint);
}

.focus-reel__film::before,
.focus-reel__film::after {
  position: absolute;
  right: 0.5rem;
  left: 0.5rem;
  height: 0.625rem;
  background: radial-gradient(circle at 0.5rem 50%, var(--rule-strong) 0 0.22rem, transparent 0.25rem) 0 0 / 1.375rem 100% repeat-x;
  content: "";
}

.focus-reel__film::before {
  top: 0.5rem;
}

.focus-reel__film::after {
  bottom: 0.5rem;
}

.focus-reel__film ol {
  display: grid;
  grid-template-columns: repeat(var(--moments, 5), minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.focus-reel__moment {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.focus-reel__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  cursor: zoom-in;
}

.focus-reel__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: #2c2733;
  object-fit: cover;
  transition: transform 160ms var(--ease);
}

.focus-reel__moment.is-above .focus-reel__frame img {
  border-color: var(--signal);
}

.focus-reel__frame:hover img {
  transform: translateY(-2px);
}

.focus-reel__frame:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.focus-reel__num {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  display: grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: 0.3125rem;
  color: #fff;
  background: #74407f;
  font-size: 0.75rem;
  font-weight: 700;
}

.focus-reel__flag {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  display: grid;
  width: 1.375rem;
  height: 1.375rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #c4243b;
}

.focus-reel__flag .lucide {
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 2.5;
}

.focus-reel__zoom {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0.375rem;
  color: #fff;
  background: rgb(0 0 0 / 55%);
}

.focus-reel__zoom .lucide {
  width: 0.75rem;
  height: 0.75rem;
}

/* The seconds a moment covers, then its score; in a narrow reel the score drops to a second line */
.focus-reel__time {
  color: var(--ink-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.focus-reel__time > span {
  white-space: nowrap;
}

.focus-reel__moment.is-above .focus-reel__time {
  color: var(--signal);
  font-weight: 700;
}

/* The chart leaves a margin on the right (--line-gutter) for the line's label, so it never covers the curve */
.focus-reel__chart {
  position: relative;
  margin-top: var(--s3);
  margin-right: var(--line-gutter);
}

.focus-reel__chart svg {
  display: block;
  width: 100%;
  height: 7.5rem;
  overflow: visible;
}

.focus-reel__area--above {
  fill: var(--signal);
  opacity: 0.22;
}

.focus-reel__area--below {
  fill: color-mix(in srgb, var(--ink-3) 14%, var(--tint));
  opacity: 0.35;
}

.focus-reel__curve {
  fill: none;
  stroke: var(--signal);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.focus-reel__line {
  stroke: var(--ink-2);
  stroke-dasharray: 6 6;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.focus-reel__marks {
  position: absolute;
  inset: 0;
}

.focus-reel__mark {
  position: absolute;
  display: grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--sheet);
  font-size: 0.6875rem;
  font-weight: 800;
  transform: translate(-50%, -50%);
  cursor: zoom-in;
}

.focus-reel__mark.is-below,
.focus-reel__span.is-below .focus-reel__mark {
  background: color-mix(in srgb, var(--plum) 45%, var(--ink-3));
}

/* A moment on the chart: its number at its own score, centred on the seconds it covers */
.focus-reel__span {
  position: absolute;
  height: 0;
  color: var(--signal);
}

.focus-reel__span.is-below {
  color: color-mix(in srgb, var(--plum) 45%, var(--ink-3));
}


.focus-reel__span .focus-reel__mark {
  top: 0;
  left: 50%;
}

.focus-reel__line-label {
  position: absolute;
  top: var(--line-at, 48%);
  left: calc(100% + 0.625rem);
  display: grid;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-50%);
}

.focus-reel__line-label b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.focus-reel__axis {
  display: flex;
  justify-content: space-between;
  margin-right: var(--line-gutter);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.focus-reel figcaption {
  color: var(--ink-2);
  font-size: var(--t-small);
}

.focus-reel figcaption strong {
  color: var(--signal);
}

@media (max-width: 40rem) {
  .focus-reel {
    --line-gutter: 3.25rem;
    padding: var(--s3);
  }

  .focus-reel__film {
    padding: 1.5rem 0.375rem;
  }

  .focus-reel__film ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--s3);
  }
}

/* The popup for one moment: drag to compare the frame with where the detector looked */
.moment-dialog {
  width: min(58rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--gutter));
  overflow: auto;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 2rem 5rem rgb(20 10 25 / 40%);
}

.moment-dialog::backdrop {
  background: rgb(20 12 24 / 60%);
}

.moment-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.moment-dialog__label {
  color: var(--plum);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.moment-dialog__head h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--s3);
  margin-top: 0.25rem;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-variant-numeric: tabular-nums;
}

.moment-dialog__score b {
  color: var(--signal);
}

.moment-dialog__score small {
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
}

.moment-dialog__score.is-below b {
  color: var(--ink-2);
}

.moment-dialog .icon-btn {
  flex: 0 0 auto;
}

.moment-dialog .evidence-compare {
  aspect-ratio: var(--evidence-aspect, 16 / 9);
}

.moment-dialog__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
}

.moment-dialog__foot .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The frames of the moment: one box each with its time and score */
.moment-frames {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s4);
}

.moment-frames__list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(var(--frames, 8), minmax(0, 1fr));
  gap: 0.375rem;
}

.moment-frame {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.0625rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.4375rem 0.125rem 0;
  border: 1.5px solid var(--rule);
  border-radius: 0.625rem;
  color: var(--ink-2);
  background: var(--sheet);
  font: inherit;
  cursor: pointer;
}

.moment-frame:hover {
  border-color: color-mix(in srgb, var(--plum) 50%, var(--rule));
}

.moment-frame__time {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.moment-frame b {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.moment-frame.is-above b {
  color: var(--signal);
}

.moment-frame i {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0.375rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--plum) 40%, var(--tint)) var(--v), var(--tint) 0);
}

.moment-frame.is-above i {
  background: linear-gradient(90deg, var(--signal) var(--v), var(--tint) 0);
}

.moment-frame.is-active {
  border-color: var(--plum);
  background: var(--plum-wash);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plum) 18%, transparent);
}

.moment-frame.is-active .moment-frame__time {
  color: var(--plum);
  font-weight: 700;
}

.moment-frame:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.moment-dialog .evidence-play {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  color: var(--on-plum);
  background: var(--plum);
  cursor: pointer;
}

@media (max-width: 40rem) {
  .moment-frames {
    align-items: flex-start;
  }

  .moment-frames__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.moment-dialog__note {
  margin-top: var(--s3);
  color: var(--ink-2);
  font-size: var(--t-small);
}


.evidence-compare {
  --split: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--evidence-aspect, 4 / 3);
  border-radius: var(--r-md);
  background: #2c2733;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.evidence-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.evidence-compare__heat {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--split));
}

.evidence-compare__label {
  position: absolute;
  top: var(--s3);
  z-index: 2;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 0.625rem;
  color: #fff;
  background: rgb(255 255 255 / 14%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  font-size: 0.8125rem;
  font-weight: 600;
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .evidence-compare__label {
    background: rgb(20 16 24 / 60%);
  }
}

.evidence-compare__label .lucide {
  width: 0.875rem;
  height: 0.875rem;
}

.evidence-compare__label--face {
  left: var(--s3);
}

.evidence-compare__label--map {
  right: var(--s3);
}

.evidence-compare__label--map .lucide {
  color: #e8a8f5;
}

.evidence-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 3;
  width: 2.75rem;
  margin-left: -1.375rem;
  cursor: ew-resize;
}

.evidence-compare__divider::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0.5rem rgb(0 0 0 / 40%);
  content: "";
}

.evidence-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  color: #74407f;
  background: #fff;
  box-shadow: 0 0.375rem 1.25rem rgb(0 0 0 / 35%);
  transform: translate(-50%, -50%);
}

.evidence-compare__divider:focus-visible {
  outline: none;
}

.evidence-compare__divider:focus-visible .evidence-compare__handle {
  outline: 3px solid #d7a6e5;
  outline-offset: 3px;
}

.evidence-compare__zoom {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  z-index: 4;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  background: rgb(0 0 0 / 60%);
  cursor: pointer;
}

.evidence-compare__zoom:hover {
  background: rgb(0 0 0 / 80%);
}

.evidence-compare__zoom .lucide {
  width: 1rem;
  height: 1rem;
}

.evidence-dots {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.evidence-dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--rule-strong);
  cursor: pointer;
  transition: width 160ms var(--ease), background-color 160ms var(--ease);
}

.evidence-dot:hover {
  background: color-mix(in srgb, var(--plum) 50%, var(--rule-strong));
}

.evidence-dot.is-active {
  width: 1.5rem;
  background: var(--plum);
}

.evidence-dot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}


@media (max-width: 40rem) {
  .moment-dialog {
    padding: var(--s4);
  }

  .moment-dialog__foot .btn {
    padding-inline: var(--s3);
  }
}

.moment-dialog__foot .btn {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .moment-dialog__word {
    display: none;
  }

  .result-focus .evidence__intro h3 {
    font-size: 1.125rem;
  }
}

/* ---- Sample videos under the drop zone. Clips from the chosen detector's own training dataset are left out ---- */
.samples {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}

.samples:empty {
  display: none;
}

.samples__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
}

.samples__head h3 {
  margin: 0;
  font-size: 1rem;
}

.samples__head small {
  color: var(--ink-3);
  font-size: var(--t-small);
}

.samples__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--s3);
}

.sample-card {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sample-card:hover {
  border-color: var(--plum);
}

.sample-card:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 2px;
}

.sample-card[aria-pressed="true"] {
  border-color: var(--plum);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plum) 20%, transparent);
}

.sample-card:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.sample-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #120d15;
}

.sample-card__thumb img,
.sample-card__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.sample-card__tag {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  padding: 0.125rem 0.45rem;
  border-radius: 0.375rem;
  background: #c4243b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.sample-card__tag.is-real {
  background: #17705f;
}

.sample-card__time {
  position: absolute;
  right: var(--s2);
  bottom: var(--s2);
  padding: 0.0625rem 0.4rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.sample-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #74407f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.sample-card__play svg {
  width: 1rem;
  height: 1rem;
}

.sample-card[aria-pressed="true"] .sample-card__play {
  background: #74407f;
  color: #fff;
}

.sample-card.is-loading .sample-card__play svg {
  animation: sample-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes sample-pulse {
  to { opacity: 0.3; }
}

.sample-card__body {
  display: grid;
  gap: 0.125rem;
  padding: var(--s2) var(--s3) var(--s3);
}

.sample-card__body strong {
  font-size: 0.9rem;
  line-height: 1.3;
}

.sample-card__body small {
  color: var(--ink-3);
  font-size: 0.78rem;
}

.sample-card__fair {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--s1);
  color: var(--clear);
  font-size: 0.76rem;
  font-weight: 600;
}

.sample-card__fair svg {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
}

.samples__note,
.samples__empty {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--plum-wash);
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.45;
}

.samples__note svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  color: var(--plum);
}

@media (prefers-reduced-motion: reduce) {
  .sample-card,
  .sample-card.is-loading .sample-card__play svg {
    transition: none;
    animation: none;
  }
}

/* ---- "Sample result" note, built into the top edge of the result card ---- */
.result-hero > .result__sample {
  order: -2;
  align-items: center;
  margin: calc(-1 * var(--hero-pad-y)) calc(-1 * var(--hero-pad-x)) var(--s5);
  padding: var(--s3) var(--hero-pad-x);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 1px solid var(--rule);
  background: var(--tint);
}

.result__sample-tag {
  flex: 0 0 auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--plum);
  color: var(--sheet);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The seconds one moment covers, shaded behind the curve while its number or picture is pointed at */
.focus-reel__band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  border-inline: 1.5px dashed color-mix(in srgb, var(--signal) 55%, transparent);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--signal) 13%, transparent);
  pointer-events: none;
}

.focus-reel__band.is-below {
  border-color: color-mix(in srgb, var(--plum) 45%, transparent);
  background: color-mix(in srgb, var(--plum) 12%, transparent);
}

.focus-reel__band small {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--sheet);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.focus-reel__band.is-near-start small {
  left: 0;
  transform: none;
}

.focus-reel__band.is-near-end small {
  right: 0;
  left: auto;
  transform: none;
}

.focus-reel__span.is-active .focus-reel__mark {
  box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px color-mix(in srgb, currentColor 30%, transparent);
}

.focus-reel__mark {
  cursor: pointer;
}

/* ===== Result layout R2: verdict on the left, "How this was scanned" on the right,
   the moments in the middle band, and the video's details in one strip along the bottom ===== */
.result-scan {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: var(--r-md);
  background: var(--tint);
}

.result-scan h3 {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-scan .check-chips {
  justify-content: flex-start;
  max-width: none;
}

.result-scan .check-chips li {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.result-scan .check-note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.5;
}

/* The moments band no longer ends the card: the details strip comes after it */
.result-hero > .result-focus {
  margin-bottom: 0;
  border-radius: 0;
}

.result-props--strip {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto;
  gap: 0;
  align-items: stretch;
  margin: 0 calc(-1 * var(--hero-pad-x)) calc(-1 * var(--hero-pad-y));
  padding: 0;
  border-top: 1px solid var(--rule);
  border-left: 0;
}

.result-props--strip .result-file {
  padding: var(--s4) var(--hero-pad-x);
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: none;
}

.result-props--strip .result-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.result-props--strip .result-rows > div {
  display: grid;
  align-content: center;
  justify-content: start;
  gap: 0.15rem;
  padding: var(--s4) var(--s5);
  border-bottom: 0;
  border-right: 1px solid var(--rule);
}

.result-props--strip .result-rows > div:last-child {
  border-right: 0;
}

.result-props--strip .result-rows dt {
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-props--strip .result-rows dd {
  justify-content: flex-start;
  text-align: left;
}

/* Quality is the strip's last cell, labelled like the others, instead of a row of its own */
.result-props--strip .quality-note {
  display: grid;
  align-content: center;
  gap: 0.15rem;
  max-width: 17rem;
  margin: 0;
  padding: var(--s4) var(--hero-pad-x) var(--s4) var(--s5);
  border-left: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink-2);
  background: none;
  font-size: var(--t-small);
}

.result-props--strip .quality-note::before {
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  content: "Quality";
}

.result-props--strip .quality-note > .lucide {
  display: none;
}

.result-props--strip .quality-note > span {
  display: grid;
  gap: 0.1rem;
}

.result-props--strip .quality-note strong {
  color: var(--ink);
  font-size: 1rem;
}

@media (max-width: 62rem) {
  .result-props--strip {
    grid-template-columns: 1fr;
    padding: 0;
    border-top: 1px solid var(--rule);
  }

  .result-props--strip .result-file {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .result-props--strip .quality-note {
    max-width: none;
    padding: var(--s4) var(--hero-pad-x);
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
}

@media (max-width: 40rem) {
  .result-props--strip .result-rows {
    grid-template-columns: 1fr;
  }

  .result-props--strip .result-rows > div {
    display: flex;
    justify-content: space-between;
    padding: var(--s3) var(--hero-pad-x);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}

/* ---- Sample videos (layout SA): dataset chips over one sliding strip of clips ---- */
.samples__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.samples__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.8rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink-2);
  font: 600 0.85rem/1 var(--font);
  cursor: pointer;
}

.samples__chip:hover {
  border-color: var(--plum);
}

.samples__chip[aria-pressed="true"] {
  border-color: var(--plum);
  background: var(--plum-wash);
  color: var(--plum);
}

.samples__chip:focus-visible,
.sample-tile:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 2px;
}

.samples__chip.is-locked {
  cursor: not-allowed;
  opacity: 0.6;
}

.samples__chip.is-locked span:not(.visually-hidden) {
  text-decoration: line-through;
}

.samples__chip .lucide {
  width: 0.85rem;
  height: 0.85rem;
}

.samples__strip {
  display: grid;
  grid-auto-columns: 12.5rem;
  grid-auto-flow: column;
  gap: var(--s3);
  margin: -4px;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.samples__strip.has-more-end {
  mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}

.samples__strip.has-more-start.has-more-end {
  mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 3rem), transparent);
}

.samples__strip.has-more-start:not(.has-more-end) {
  mask-image: linear-gradient(90deg, transparent, #000 2.5rem);
}

.sample-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: #120d15;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}

.sample-tile img,
.sample-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.sample-tile:hover img {
  transform: scale(1.04);
}

.sample-tile:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.sample-tile__text {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 0.1rem;
  padding: 1.75rem 0.65rem 0.55rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.sample-tile__text strong {
  font-size: 0.86rem;
  line-height: 1.25;
}

.sample-tile__text small {
  font-size: 0.72rem;
  opacity: 0.85;
}

.sample-tile__tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.45rem;
  border-radius: 0.375rem;
  background: #c4243b;
  font-size: 0.68rem;
  font-weight: 700;
}

.sample-tile__tag.is-real {
  background: #17705f;
}

.sample-tile__time {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.0625rem 0.4rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.sample-tile__picked {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  background: #fff;
  color: #74407f;
  font-size: 0.72rem;
  font-weight: 700;
}

.sample-tile__picked .lucide {
  width: 0.8rem;
  height: 0.8rem;
}

.sample-tile[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--plum);
}

.sample-tile[aria-pressed="true"] .sample-tile__picked {
  display: inline-flex;
}

.sample-tile[aria-pressed="true"] .sample-tile__time {
  display: none;
}

.sample-tile.is-loading img {
  opacity: 0.6;
}

@media (max-width: 40rem) {
  .samples__strip {
    grid-auto-columns: 75%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sample-tile img {
    transition: none;
  }
}