/*
 * Shared layout corrections. Keep these after the page/theme styles so the
 * homepage's ID selectors cannot cancel the common responsive breakpoints.
 */
body:is(#plex-cinema, .pz-page) .pz-head .pz-nav {
  min-width: 0;
}

/* Put navigation on its own line before the account tools run out of room. */
@media (min-width: 781px) and (max-width: 1600px) {
  body:is(#plex-cinema, .pz-page) .pz-head {
    flex-wrap: wrap;
    gap: 14px;
    padding-block: 10px;
  }

  body:is(#plex-cinema, .pz-page) .pz-head .pz-brand {
    margin-right: auto;
  }

  body:is(#plex-cinema, .pz-page) .pz-head .pz-nav {
    order: 5;
    flex: 1 0 100%;
    justify-content: center;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* Explicit zero minimums let long titles fit narrow outer Fold displays. */
#plex-cinema .rankings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#plex-cinema .rank-card,
#plex-cinema .rank-table-wrap,
.pzc-detail-top > *,
.pzc-dialog-head > *,
.pzc-controls > * {
  min-width: 0;
}

.pzc-media h2,
.pzc-dialog h2,
.pzc-detail-top p,
.pzc-seasons summary,
.pzc-episode-title {
  overflow-wrap: anywhere;
}

@media (max-width: 780px) {
  body:is(#plex-cinema, .pz-page) .pz-head .pz-nav {
    flex: 1 0 100%;
    order: 5;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #plex-cinema .rankings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pzc-dialog {
    max-width: calc(100vw - 20px);
    max-height: 88dvh;
    overscroll-behavior: contain;
  }

  .pzc-detail-meta {
    grid-template-columns: minmax(80px, 30%) minmax(0, 1fr);
    gap: 8px 12px;
  }

  .pzc-controls input,
  .pzc-controls select,
  .pzc-dialog input,
  .pzc-dialog textarea,
  .pzc-dialog select {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  /* Keep every table column visible instead of clipping the whole panel. */
  #plex-cinema .rank-card {
    width: 100%;
    max-width: 100%;
    padding: 10px;
  }

  #plex-cinema .rank-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  #plex-cinema .rank-table th,
  #plex-cinema .rank-table td {
    padding: 7px 4px !important;
    font-size: 11px !important;
  }

  #plex-cinema .rank-table th:first-child {
    width: 20px;
  }

  #plex-cinema .rank-table th:nth-child(2) {
    width: 28px;
    font-size: 0 !important;
  }

  #plex-cinema .rank-table th:nth-child(2)::after {
    content: '↕';
    font-size: 12px;
  }

  #plex-cinema .rank-table th:nth-child(3),
  #plex-cinema .rank-table td:nth-child(3) {
    overflow-wrap: anywhere;
  }

  #plex-cinema .rank-metric-heading {
    width: 88px;
  }

  #plex-cinema .rank-metric {
    min-height: 32px;
    padding-inline: 4px;
  }

  /* Preserve the cinematic composition while shortening stacked actions. */
  #plex-cinema .pz-hero {
    min-height: 0;
    padding-block: 32px;
  }

  #plex-cinema .pz-hero-copy > p {
    font-size: 14px;
    line-height: 1.65;
  }

  #plex-cinema .pz-actions {
    gap: 8px;
  }

  #plex-cinema .pz-action {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    justify-content: center;
    padding: 11px 7px;
    font-size: 11px;
    text-align: center;
  }

  #plex-cinema .pz-action.primary {
    flex-basis: 100%;
    font-size: 13px;
  }

  /* Keep the accessible full label; only the visual control becomes compact. */
  body:is(#plex-cinema, .pz-page) #pz-season-sound .pz-sound-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    font-size: 0;
  }

  body:is(#plex-cinema, .pz-page) #pz-season-sound .pz-sound-toggle::before {
    content: '♫';
    font-size: 20px;
    line-height: 1;
  }

  body:is(#plex-cinema, .pz-page) #pz-season-sound .pz-sound-toggle[aria-pressed='true']::before {
    content: '🔊';
  }

  .pzc-dialog-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .pzc-dialog-head > h2 {
    flex: 1 1 150px;
  }

  .pzc-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pzc-actions .pzc-button,
  .pzc-media-content {
    min-width: 0;
  }
}


/* The server decides visibility before card controls are created in JavaScript. */
#plex-cinema[data-social-enabled="false"] .pz-reactions { display: none; }

/* Keyboard users can pass the repeated header and ticker in one action. */
.pz-skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 12px 18px; border: 2px solid var(--accent, #e5a00d); border-radius: 9px;
  background: #0d141b; color: #fff4d5; font: 600 14px/1.4 Inter, "Segoe UI", sans-serif;
  text-decoration: none; transform: translateY(-180%);
}
.pz-skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}