/*
 * HUD feedback salvage after the #842 rollback.
 *
 * Keep the existing lap-result and ScoreFeedback runtimes as state owners.
 * This file only gives the already-existing surfaces the placements that tested
 * well: lap feedback owns the full top instrumentation lane, and scoring
 * callouts sit inside the relevant paper box without covering the live value.
 */

/* --------------------------------------------------------------------------
 * Lap result / LAP VOID
 * -------------------------------------------------------------------------- */

.lap-result-toast {
  --turn-lap-feedback-map-width: min(24vw, 138px);
  --turn-lap-feedback-map-shell: calc(var(--turn-lap-feedback-map-width) + 13.5px);
  --turn-lap-feedback-gap: clamp(6px, 1vw, 9px);
  top: max(7.5px, env(safe-area-inset-top));
  right: calc(
    var(--turn-peripheral-right-edge, max(9px, env(safe-area-inset-right)))
    + var(--turn-lap-feedback-map-shell)
    + var(--turn-lap-feedback-gap)
  );
  left: var(--turn-peripheral-left-edge, max(9px, env(safe-area-inset-left)));
  width: auto;
  /* As tall as the stats bar beside it, and taller when the lap time needs it (#1037). */
  height: auto;
  min-height: var(--turn-peripheral-stats-height, clamp(43.5px, 8vh, 49.5px));
  align-content: center;
  padding: 4.5px 9px 5.25px;
  transform-origin: left top;
}

/* LAP VOID is the same component and therefore uses the same complete lane. */
.lap-result-toast.is-invalid {
  width: auto;
}

/* The existing handedness state already mirrors the stats/minimap top bar.
 * Mirror this independent overlay to the same physical side without changing
 * DOM or screen-reader order.
 */
:root.turn-left-handed-controls .lap-result-toast {
  right: var(--turn-peripheral-right-edge, max(9px, env(safe-area-inset-right)));
  left: calc(
    var(--turn-peripheral-left-edge, max(9px, env(safe-area-inset-left)))
    + var(--turn-lap-feedback-map-shell)
    + var(--turn-lap-feedback-gap)
  );
  transform-origin: right top;
}

/* --------------------------------------------------------------------------
 * Category 2 race cues
 * -------------------------------------------------------------------------- */

/* PATIENT ON BOARD and STEERING CENTRED already share #message,
 * which is a compact yellow TURN pill at 22% from the top. CHASE YOUR BEST is
 * already in the same visual lane at 20%. The blank-screen confirmation was
 * the remaining outlier: move only that existing surface into the same lane
 * and give it the same fully rounded pill silhouette. Keep its neutral paper
 * colour and its existing status semantics/timing.
 *
 * screen-blanking.js appends its stylesheet at runtime, so the body-qualified
 * selector deliberately has enough specificity to keep this placement without
 * changing the feature runtime or its cache identity.
 */
body .turn-screen-blank-toast {
  top: 20%;
  border-radius: 749.25px;
}

/* --------------------------------------------------------------------------
 * DRIFT / FLOW event callout
 * -------------------------------------------------------------------------- */

/*
 * The existing ScoreFeedback engine still owns timing, priority, speech and
 * data. We only move its existing transient callout into the paper footprint.
 * data-channel tells us which paper the current event belongs to.
 *
 * The large live score stays untouched; the callout borrows the BEST corner.
 */
:root .score-feedback .score-feedback-callout,
:root .score-feedback[data-score-layout="dual"] .score-feedback-callout {
  z-index: 4;
  top: auto;
  right: 5.25px;
  bottom: 4.5px;
  left: auto;
  box-sizing: border-box;
  width: max-content;
  max-width: 58%;
  min-width: 46.5px;
  padding: 3.75px 5.25px 4.5px;
  overflow: hidden;
  border: 2px solid var(--turn-outline);
  border-radius: 7.5px;
  box-shadow: 2.25px 2.25px 0 var(--turn-shadow-color);
  transform-origin: right bottom;
}

/* A single unlocked DRIFT row still sits inside the reserved two-row score
 * footprint. Anchor its callout to the bottom of the actual DRIFT paper rather
 * than the bottom of that reserved container.
 */
:root .score-feedback[data-score-layout="single"] .score-feedback-callout[data-channel="drift"] {
  top: auto;
  bottom: calc(100% - var(--score-feedback-paper-height) + 4.5px);
}

/* In dual-score mode the DRIFT paper is the upper half; FLOW remains anchored
 * to the lower paper. Using the live container height keeps this correct when
 * short landscape viewports shrink both paper rows together.
 */
:root .score-feedback[data-score-layout="dual"] .score-feedback-callout[data-channel="drift"] {
  top: auto;
  bottom: calc(50% + 5.25px);
}

:root .score-feedback .score-feedback-callout[data-channel="flow"] {
  top: auto;
  bottom: 4.5px;
}

:root .score-feedback .score-feedback-callout strong {
  font-size: max(var(--turn-text-floor, 11px), clamp(0.39rem, 1.15vw, 0.51rem));
  letter-spacing: .045em;
  line-height: 1;
}

:root .score-feedback .score-feedback-callout b {
  margin-top: 1.5px;
  font-size: max(var(--turn-text-floor, 11px), clamp(0.54rem, 1.7vw, 0.75rem));
  line-height: 1;
}

:root.turn-left-handed-controls .score-feedback .score-feedback-callout,
:root.turn-left-handed-controls .score-feedback[data-score-layout="dual"] .score-feedback-callout {
  right: auto;
  left: 5.25px;
  transform-origin: left bottom;
}

@media (max-width: 570px) and (orientation: landscape) {
  .lap-result-toast {
    --turn-lap-feedback-map-width: min(21vw, 106.5px);
    --turn-lap-feedback-map-shell: calc(var(--turn-lap-feedback-map-width) + 12px);
  }
}

@media (max-height: 322.5px) {
  .lap-result-toast {
    padding: 3.75px 7.5px 4.5px;
  }

  body .turn-screen-blank-toast {
    top: 16%;
  }

  :root .score-feedback .score-feedback-callout,
  :root .score-feedback[data-score-layout="dual"] .score-feedback-callout {
    right: 3.75px;
    bottom: 3.75px;
    padding: 3px 4.5px 3.75px;
    border-radius: 6.75px;
  }

  :root .score-feedback[data-score-layout="single"] .score-feedback-callout[data-channel="drift"] {
    bottom: calc(100% - var(--score-feedback-paper-height) + 3.75px);
  }

  :root .score-feedback[data-score-layout="dual"] .score-feedback-callout[data-channel="drift"] {
    bottom: calc(50% + 4.5px);
  }

  :root .score-feedback .score-feedback-callout[data-channel="flow"] {
    bottom: 3.75px;
  }

  :root.turn-left-handed-controls .score-feedback .score-feedback-callout,
  :root.turn-left-handed-controls .score-feedback[data-score-layout="dual"] .score-feedback-callout {
    right: auto;
    left: 3.75px;
  }
}

@media (max-height: 270px) and (orientation: landscape) {
  .lap-result-toast {
    --turn-lap-feedback-map-width: min(16vw, 72px);
    --turn-lap-feedback-map-shell: calc(var(--turn-lap-feedback-map-width) + 9px);
    padding: 3px 6px 3.75px;
    border-width: 1.5px;
    border-radius: 7.5px;
    box-shadow: 1.5px 1.5px 0 var(--turn-shadow-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lap-result-toast {
    transform: none;
  }
}