/* Shared touch and small-screen layout for the two word-timed players. */
*, *::before, *::after { box-sizing: border-box; }
html { height: auto; padding: 0; -webkit-text-size-adjust: 100%; }
body { height: auto; overflow: auto; }
button, a, input { touch-action: manipulation; }
button { min-height: 44px; min-width: 44px; }
.seg { max-width: 100%; }
.seg button { min-height: 44px; }
.seg button:not([aria-pressed="true"]) { color: #c5c8d0; }
input[type=range] { height: 44px; margin: 0; cursor: pointer; }
.line { max-width: min(22ch, 100%); overflow-wrap: anywhere; }
.lyrics { min-height: 280px; padding-block: 24px; }
.time { color: var(--ink-soft, #c5c8d0); }
.projects-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font: 14px var(--latin); text-decoration: none; }
.projects-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.audio-toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: #0b1430f5; border-bottom: 1px solid var(--gold-dim); }
.audio-track-control { min-width: 0; }
.track-menu-label { display: block; font: 11px var(--latin); letter-spacing: .12em; text-transform: uppercase; color: #c5c8d0; margin-bottom: 6px; }
.audio-toolbar #mix { width: auto; }
.audio-toolbar .projects-link { margin-left: auto; }
.stage { height: auto; min-height: 100vh; min-height: 100svh; grid-template-rows: auto minmax(280px, 1fr) auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.stage header { padding-top: 4px; }
.stage header h1 { color: #c5c8d0; }
.stage canvas { pointer-events: none; }
.player { height: auto; min-height: 640px; grid-template-rows: auto minmax(280px, 1fr) auto; }
.player .lyrics { position: relative; }
.player .start { border-radius: 12px; padding: 16px; text-align: center; }
.player .start small { max-width: 28ch; }
.wrap { padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
.wrap > .projects-link { justify-self: start; }
.foot a { color: var(--ink-soft); min-height: 44px; padding: 10px 8px; display: inline-flex; align-items: center; }
#play { width: 52px; height: 52px; }

@media (max-width: 600px) {
  .wrap { gap: 20px; padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  .intro { gap: 6px; }
  .intro h1 { font-size: clamp(25px, 7vw, 36px); line-height: 1.4; }
  .intro .latin-title { font-size: 16px; }
  .intro p { font-size: 14px; line-height: 1.6; }
  .intro p { display: none; } /* The same guidance follows the player in How it works. */
  .player { min-height: 0; border-radius: 16px; grid-template-rows: auto minmax(270px, auto) auto; }
  .p-head { padding: 12px 12px 0; gap: 8px; justify-content: center; }
  .p-head .badge { flex-basis: 100%; text-align: center; font-size: 10px; }
  .audio-toolbar .audio-track-control { width: 100%; }
  .audio-toolbar #mix { width: 100%; }
  .audio-toolbar .projects-link { margin-left: 0; }
  .lyrics { gap: 12px; padding-inline: 16px; }
  #cur { font-size: clamp(27px, 7vw, 36px); line-height: 1.5; }
  #prev, #next { font-size: 17px; line-height: 1.5; }
  #prev { opacity: .75; }
  #next { color: #b6bdcf; opacity: 1; }
  .p-foot { padding: 0 12px 16px; gap: 12px; }
  .p-foot > .row:first-child, .stage footer > .row:first-child {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 12px;
  }
  .row > #play { grid-column: 1; grid-row: 1 / 3; }
  .row > #seek { grid-column: 2; grid-row: 1; width: 100%; }
  .row > .time { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 1.3; }
  .opts { gap: 8px; }
  .seg { width: 100%; display: flex; }
  .seg button { flex: 1; padding: 8px 6px; font-size: 14px; }
  #script { max-width: 320px; }
  #mix { flex-basis: 100%; }
  #nudges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #nudges > button { min-width: 0; padding: 8px 4px; }
  #nudges > #mix { grid-column: 1 / -1; }
  .stage #nudges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage footer { padding-bottom: 16px; gap: 12px; }
  .stage footer > .opts:last-child { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .stage #skip { width: 100%; }
  .notes { grid-template-columns: 1fr; gap: 18px; }
  .notes h2 { font-size: 18px; }
  .foot { font-size: 13px; }
  .foot a { flex: 1 1 40%; border: 1px solid var(--gold-dim); border-radius: 10px; justify-content: center; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .stage, .player { height: auto; }
  .lyrics { min-height: 250px; }
}