/*
 * Responsive historical-evidence treatment for the Coventry Player Focus proof.
 *
 * One authentic owner screenshot remains the source of truth. The primary panel
 * uses one shared content measure so its heading, description, proof controls and
 * evidence always align. Phone width remains fluid; tablet and desktop widths are
 * capped by the practical four-button row rather than by the full insight column.
 *
 * Focused historical evidence still uses the deterministic Thomas/van Ewijk crop
 * below the desktop breakpoint. Desktop keeps the complete portrait screenshot
 * and adds a restrained focus rectangle over the same source coordinates.
 */

.player-focus-panel--primary {
  --player-focus-content-measure: 100%;
}

.player-focus-panel--primary > .player-focus-panel__head,
.player-focus-panel--primary > h2,
.player-focus-panel--primary > .player-focus-panel__intro,
.player-focus-panel--primary > .player-focus-mode-controls,
.player-focus-panel--primary > .player-focus-stage {
  box-sizing: border-box;
  width: min(100%, var(--player-focus-content-measure));
  margin-inline: auto;
}

/* The complete-source state respects the 609x852 source geometry rather than
   squeezing a portrait screenshot into the base 16:9 evidence frame. */
.historical-evidence[data-evidence-view="establishing"] .historical-evidence__media {
  min-height: 0;
  aspect-ratio: 609 / 852;
}

/* Tablet: four proof controls remain on one row, but their shared content width
   stops growing with the surrounding panel. 410px leaves roughly 97px per button
   after the three 7px gaps, which is close to the useful lower bound for the
   current labels while retaining visible horizontal breathing room. */
@media (min-width: 560px) and (max-width: 899px) {
  .player-focus-panel--primary {
    --player-focus-content-measure: 410px;
  }

  .player-focus-mode-button {
    padding-inline: 7px;
  }
}

/* Phone + tablet focused evidence: use the calibrated pair crop. The image width
   follows the same shared content measure as the four controls at tablet size. */
@media (max-width: 899px) {
  .historical-evidence[data-evidence-view="coventryPair"] .historical-evidence__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 295 / 190;
  }
}

/* Desktop: 440px is the shared content measure for the heading, controls and
   evidence. At the source ratio the complete screenshot is about 616px tall,
   keeping the entire historical team substantially more likely to fit inside a
   normal desktop browser viewport without sacrificing the aligned composition. */
@media (min-width: 900px) {
  .player-focus-panel--primary {
    --player-focus-content-measure: 440px;
  }

  .historical-evidence__media {
    width: 100%;
    min-height: 0;
    margin-inline: auto;
    aspect-ratio: 609 / 852;
  }

  .historical-evidence__media[data-fit="contain"] .historical-evidence__image,
  .historical-evidence__media[data-fit="crop"] .historical-evidence__image {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  .historical-evidence[data-evidence-view="coventryPair"] .historical-evidence__media::after {
    position: absolute;
    z-index: 1;
    left: 49.2611%;
    top: 76.8779%;
    width: 48.4401%;
    height: 22.3005%;
    border: 3px solid rgba(4, 245, 255, 0.92);
    border-radius: 9px;
    box-shadow:
      0 0 0 2px rgba(8, 0, 18, 0.58),
      0 0 22px rgba(4, 245, 255, 0.28);
    pointer-events: none;
    content: "";
  }

  .historical-evidence[data-evidence-view="coventryPair"] .historical-evidence__caption span::before {
    content: "FULL SOURCE · ";
  }
}