/* Lap replay, comparison and video screens. Every value comes from a token. */
@layer screens {
  /* Status: a replay still loading or that failed, centred in the workspace. */
  .rtg-replay-status {
    display: grid;
    flex: 1 1 auto;
    place-items: center;
  }

  /* Workspace: the stage beside the readings, the chart under the stage, and the transport across the foot, filling the window. */
  .rtg-replay__workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) clamp(calc(var(--pane-sm) - var(--space-9)), 22vw, var(--pane-md));
    grid-template-rows: minmax(var(--pane-sm), 1fr) auto auto;
    grid-template-areas:
      "stage side"
      "chart side"
      "player player";
    gap: var(--space-4) var(--gap-normal);
    min-height: 0;
  }

  .rtg-video .rtg-replay__workspace {
    grid-template-rows: minmax(var(--pane-sm), 1fr) auto;
    grid-template-areas:
      "stage side"
      "player player";
  }

  .rtg-replay__side {
    display: flex;
    flex-direction: column;
    grid-area: side;
    gap: var(--gap-normal);
    min-width: 0;
    min-height: 0;
    contain: size;
  }

  .rtg-replay__empty { padding: var(--space-5); }

  /* Stage: the map and the video, one filling the well and the other in its corner, gliding into each other's place. */
  .rtg-replay__stage {
    grid-area: stage;
    min-height: 0;
  }

  .rtg-replay__view {
    --_thumb-width: calc(var(--space-11) * 4);
    --_thumb-height: calc(var(--_thumb-width) * 9 / 16);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: var(--stroke-hairline) solid transparent;
    background: var(--surface-lowest);
    transition:
      top var(--duration-base) var(--ease-out),
      left var(--duration-base) var(--ease-out),
      width var(--duration-base) var(--ease-out),
      height var(--duration-base) var(--ease-out),
      border-radius var(--duration-base) var(--ease-out),
      border-color var(--duration-hover) var(--ease-standard),
      transform var(--duration-press) var(--ease-incoming);
  }

  .rtg-replay__view.rtg-replay__thumbnail {
    z-index: 2;
    top: calc(100% - var(--_thumb-height) - var(--space-5));
    left: calc(100% - var(--_thumb-width) - var(--space-5));
    width: var(--_thumb-width);
    height: var(--_thumb-height);
    border-color: var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--elevation-3);
  }

  @media (max-width: 1439px) {
    .rtg-replay__view { --_thumb-width: calc(var(--space-11) * 3); }
  }

  @media (min-width: 1920px) {
    .rtg-replay__view { --_thumb-width: var(--pane-sm); }
  }

  .rtg-replay__thumbnail:has(.rtg-replay__swap:active) { transform: scale(var(--press-scale-tile)); }

  @media (hover: hover) {
    .rtg-replay__thumbnail:has(.rtg-replay__swap:hover) { border-color: var(--border-strong); }
  }

  .rtg-replay__swap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--duration-hover) var(--ease-standard);
  }

  @media (hover: hover) {
    .rtg-replay__swap:hover { background: var(--state-hover); }
  }

  .rtg-replay__swap:active { background: var(--state-press); }

  .rtg-replay__swap:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--stroke-focus-ring) var(--border-focus);
  }

  .rtg-replay__view--film .rtg-replay__swap { color: var(--text-on-media-muted); }

  .rtg-replay__swap-caption {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    color: inherit;
  }

  .rtg-replay__swap-badge {
    position: absolute;
    top: calc(var(--space-2) + var(--space-1));
    right: calc(var(--space-2) + var(--space-1));
    display: grid;
    place-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-scrim);
    -webkit-backdrop-filter: blur(var(--blur-card)) saturate(var(--saturation-card));
    backdrop-filter: blur(var(--blur-card)) saturate(var(--saturation-card));
    color: var(--text-on-media);
  }

  .rtg-replay__swap-badge .rtg-icon { --icon-size: var(--icon-inline); }

  /* Glance: the lap time and the distance at the playhead, in glass over the stage's top left. */
  .rtg-replay__glance {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    z-index: 3;
    pointer-events: none;
  }

  .rtg-replay__glance-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .rtg-replay__distance { color: var(--text-body); }

  /* Readings: the chrono at the playhead over what the car read there, as four stat tiles. */
  .rtg-replay__chrono {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--stroke-hairline) solid var(--divider);
  }

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

  /* Channels: the picker of what to draw along the lap, each a card to toggle with its reading at the playhead. */
  .rtg-replay__channels {
    flex: 1 1 auto;
    min-height: 0;
  }

  .rtg-replay__channel-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
  }

  .rtg-replay__limit { padding: 0 var(--space-5) var(--space-4); }

  .rtg-replay__channel.rtg-card {
    display: grid;
    flex: none;
    grid-template-columns: var(--space-3) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    text-align: left;
  }

  .rtg-replay__channel-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-body);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-replay__channel-value { white-space: nowrap; }

  .rtg-replay__channel[aria-pressed="true"] .rtg-replay__channel-name { color: var(--text-primary); }
  .rtg-replay__channel[aria-pressed="true"] .rtg-replay__channel-value { color: var(--on-primary-container); }

  /* Chart panel: the telemetry or the gap along the lap, under the stage. */
  .rtg-replay__chart {
    grid-area: chart;
    padding: var(--space-4) var(--space-5) var(--space-3);
  }

  .rtg-lap-overlay {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .rtg-lap-overlay__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
  }

  .rtg-lap-overlay__head .rtg-legend { gap: var(--space-3) var(--space-6); }

  .rtg-lap-overlay__value {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .rtg-lap-overlay__axis {
    display: flex;
    justify-content: space-between;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xxs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
  }

  /* LapChart: thin lines on a canvas with a playhead; a click or a drag seeks. */
  .rtg-lap-chart {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xs);
    outline: none;
  }

  .rtg-lap-chart:focus-visible { box-shadow: var(--focus-ring); }

  .rtg-lap-chart__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .rtg-lap-chart--seek .rtg-lap-chart__canvas {
    cursor: crosshair;
    touch-action: pan-y;
  }

  /* Player: the glass transport bar along the foot of the workspace. */
  .rtg-player {
    flex-direction: row;
    grid-area: player;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-5);
  }

  .rtg-player__transport {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
  }

  .rtg-player__time,
  .rtg-player__length {
    flex: none;
    min-width: var(--space-11);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
  }

  .rtg-player__time {
    color: var(--text-primary);
    text-align: right;
  }

  .rtg-player__length { color: var(--text-faint); }

  .rtg-player__scrubber {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rtg-player__rate .rtg-button__label {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-tight);
  }

  .rtg-player__hint {
    flex: none;
    margin: 0;
    white-space: nowrap;
  }

  /* LapMap: the speed map's canvas, its glass speed key and its stacked tools. */
  .rtg-lap-map {
    position: absolute;
    inset: 0;
  }

  .rtg-lap-map__canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  .rtg-lap-map--interactive .rtg-lap-map__canvas {
    touch-action: pan-x pan-y;
    cursor: grab;
  }

  .rtg-lap-map--interactive .rtg-lap-map__canvas:active { cursor: grabbing; }
  .rtg-lap-map--interactive .rtg-lap-map__canvas.is-zoomed { touch-action: none; }

  .rtg-lap-map__legend {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    z-index: 1;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    pointer-events: none;
  }

  .rtg-lap-map__ramp {
    width: calc(var(--space-12) + var(--space-9));
    height: calc(var(--space-2) + var(--space-1));
    border-radius: var(--radius-pill);
  }

  .rtg-lap-map__brake {
    width: var(--space-4);
    height: var(--space-2);
    margin-left: var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--text-danger);
  }

  .rtg-lap-map .rtg-map-tools .rtg-icon-button {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--saturation-card));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--saturation-card));
  }

  /* ReplayVideo: one element per chapter, the active one shown and turned upright by its quarter turns. */
  .rtg-replay-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
    background: var(--surface-lowest);
  }

  .rtg-replay-video__picture {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(calc(var(--turns, 0) * 90deg));
  }

  .rtg-replay-video__picture.is-active { display: block; }

  .rtg-replay-video--contain .rtg-replay-video__picture { object-fit: contain; }

  .rtg-replay-video__picture--sideways {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(calc(var(--turns, 0) * 90deg));
  }

  .rtg-replay-video__note {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    text-align: center;
  }

  .rtg-replay-video__controls {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 2;
  }

  .rtg-replay-video__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: var(--space-6) var(--space-4) var(--space-3);
    background: var(--media-protection-bottom);
    color: var(--text-on-media);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    text-align: left;
    pointer-events: none;
  }

  /* Rename: the ghost's name field, and the choice between two names after a concurrent edit. */
  .rtg-rename {
    display: flex;
    flex-direction: column;
  }

  .rtg-rename__conflict.rtg-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .rtg-rename__conflict .rtg-dialog__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
  }

  /* Compare: both laps on the circuit or their videos side by side, a card per lap, the gap where the measured car stands and the gap along the lap. */
  .rtg-compare__drawing {
    position: absolute;
    inset: var(--space-8) var(--space-10);
    display: flex;
  }

  .rtg-compare__switch {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    z-index: 4;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
  }

  .rtg-compare__videos {
    position: absolute;
    inset: calc(var(--space-5) * 2 + var(--control-height-sm)) var(--space-5) var(--space-5);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .rtg-compare__drawing[hidden],
  .rtg-compare__videos[hidden] { display: none; }

  .rtg-compare__video {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: var(--stroke-hairline) solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-lowest);
  }

  .rtg-compare__video-name {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    z-index: 2;
    max-width: calc(100% - var(--space-5) * 3 - var(--space-9));
    gap: var(--space-3);
    pointer-events: none;
  }

  .rtg-compare__video-name .title-xs {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-compare__lap.rtg-card {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--space-4);
  }

  .rtg-compare__lap-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .rtg-compare__lap-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-compare__lap-time {
    flex: none;
    margin-left: auto;
  }

  .rtg-compare__lap-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--stroke-hairline) solid var(--divider);
  }

  .rtg-compare__gap {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .rtg-compare__gap > .rtg-stat-tile { flex: 1 1 auto; }

  .rtg-compare__gap .rtg-stat-tile__delta {
    margin-top: var(--space-3);
    color: var(--text-faint);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    line-height: var(--lh-normal);
  }

  .rtg-compare__chart-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
  }

  .rtg-compare__chart-head .rtg-list-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rtg-compare__plot {
    display: grid;
    grid-template-columns: var(--space-11) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .rtg-compare__gutter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-2) 0;
  }

  .rtg-compare__axis {
    display: flex;
    justify-content: space-between;
    margin: var(--space-2) 0 0 calc(var(--space-11) + var(--space-3));
    color: var(--text-faint);
  }

  .rtg-compare__axis .label-xs { color: inherit; }

  /* Video: the lone video in its well, and the file's facts beside it. */
  .rtg-video__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--surface-lowest);
  }

  .rtg-video__facts {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .rtg-video__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--stroke-hairline) solid var(--divider);
  }

  .rtg-video__fact:first-child { padding-top: 0; }

  .rtg-video__fact dd {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    text-align: right;
    overflow-wrap: anywhere;
  }
}