:root { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #ffffff; color: #142c5b; }
.c2pa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 8px;
  align-items: start;
}
@media (max-width: 800px) { .c2pa-grid { grid-template-columns: 1fr; } }
.c2pa-col h3 {
  margin: 0 0 10px;
  color: #17428c;
  font-size: 1rem;
  font-weight: 600;
}
.c2pa-col .video-js { width: 100%; }

.c2pa-error {
  margin: 0;
  padding: 12px 16px;
  color: #8a1c26;
  background: #fdf0f1;
  border: 1px solid #f0c8cc;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* Click-to-unmute prompt, the same behaviour as ClickToUnmute.jsx in the app:
   both players autoplay muted because no browser allows anything else, so each
   one needs to say the sound is there. One element catches the hover and takes
   the click, and it stops short of the control bar so the controls stay usable
   while muted. */
.unmute-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
}
.unmute-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.unmute-layer:hover .unmute-pill,
.unmute-layer:focus-visible .unmute-pill {
  opacity: 1;
}

/* The skin's single-row control bar needs about 485px. Below that the progress
   control is the only item allowed to shrink, so on a phone the timeline - which
   carries the C2PA validation per segment - was squeezed to 40px behind a 120px
   volume slider, and fullscreen fell off the edge. Keyed to the player's width,
   not the viewport's: two side-by-side columns on a small laptop are just as
   narrow as a phone. */
.c2pa-col { container-type: inline-size; }

@container (max-width: 520px) {
  /* The timeline takes a full-width row of its own above the buttons. */
  .insysplayer > .video-js > .vjs-control-bar > .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    width: auto;
    height: 18px;
    margin: 0;
    background-color: rgba(70, 70, 70, 0.5);
  }

  /* Mute button without the slider: iOS does not let a page set the volume at
     all, so on a phone the slider was 90px that did nothing. */
  .insysplayer > .video-js > .vjs-control-bar > .vjs-volume-menu-button {
    width: 30px;
    justify-content: center;
  }
  .insysplayer > .video-js > .vjs-control-bar > .vjs-volume-menu-button .vjs-menu {
    display: none;
  }
  .insysplayer > .video-js > .vjs-control-bar > .vjs-volume-menu-button::before {
    margin-right: 0;
  }

  /* Repeats what current time and duration already say. */
  .insysplayer > .video-js > .vjs-control-bar > .vjs-remaining-time {
    display: none;
  }

  /* The prompt has to stop above the timeline row too, or it swallows its taps. */
  .unmute-layer { bottom: 48px; }
}