/* On Rotation: the preview and its credit, the tracks, the way between the wall and the shelf, and the record you're
   pointing at. */
/* The copy stays centred on its own height, whatever's animated it: the page's animations take CSS's translate over,
   and coming in from the TV that could leave it unshifted, its bottom half (and the way down to the shelf) off the
   window. */
@media (min-width: 761px) and (min-aspect-ratio: 21/20) {
  .room-copy[data-room-copy="rotation"] { translate: none !important; transform: translateY(-50%) !important; }
}
.rot-listen { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1rem; font: clamp(22px, 1.8vw, 28px)/1 var(--osd-font); }
.rot-listen[hidden] { display: none; }
.rot-listen .osd-btn { margin-left: -0.45em; color: #ffe6da; }
.rot-listen .osd-btn:hover, .rot-listen .osd-btn:focus-visible { background: #ffe6da; color: #1a0703; }
.rot-listen .rot-tracks-btn { margin-left: 0; color: #ffcfb8; }
.rot-listen .rot-tracks-btn[hidden] { display: none; }
/* Signing in to Apple Music for full songs: only there once a token's set (assets/musickit-config.js). */
.rot-listen .rot-mk { margin-left: 0; font-size: 0.72em; color: #ffcfb8; }
.rot-listen .rot-mk[hidden] { display: none; }
.rot-listen .rot-mk:disabled { opacity: 0.5; }
/* The record's tracks, opening upward over the copy so nothing below it moves; any one plays from the start. */
.rot-tracklist { position: absolute; z-index: 2; left: -0.6rem; right: -0.6rem; bottom: calc(100% + 0.5rem); max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem 0; background: rgba(14, 7, 5, 0.95); border: 1px solid rgba(255, 207, 184, 0.28); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); scrollbar-width: thin; }
.rot-tracklist[hidden] { display: none; }
.rot-track { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) auto; gap: 0 0.6rem; align-items: baseline; width: 100%; margin: 0; padding: 0.42rem 0.75rem; border: 0; background: none; color: #f3e6de; text-align: left; font: 400 15px/1.3 var(--cap-font); cursor: pointer; }
.rot-track-n, .rot-track-d { font: 20px/1 var(--osd-font); color: #ffb59a; }
.rot-track-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-track[aria-current="true"] .rot-track-t::before { content: "♪ "; color: #ffb59a; }
.rot-track:hover, .rot-track:focus-visible { background: #ffe6da; color: #1a0703; outline: none; }
.rot-track:hover .rot-track-n, .rot-track:hover .rot-track-d, .rot-track:focus-visible .rot-track-n, .rot-track:focus-visible .rot-track-d { color: #1a0703; }
.rot-track:disabled { opacity: 0.4; cursor: default; background: none; color: #f3e6de; }
/* Apple's badge, as Apple draws it: unaltered, no shadow or glow, at least 30 px high, a tenth of its height clear. */
.rot-badge { display: block; line-height: 0; border-radius: 6px; }
.rot-badge img { display: block; width: 118px; height: auto; }
.rot-badge:focus-visible { outline: 2px solid #ffe6da; outline-offset: 3px; }
.rot-credit { flex-basis: 100%; margin: 0; font: 400 13px/1.4 var(--cap-font); color: #f3e6de; opacity: 0.8; }
.rot-levels { margin-top: 0.2rem; }
.rot-levels .osd-btn { margin-left: -0.45em; }
.rot-levels .osd-btn[hidden] { display: none; }
/* The record you're pointing at on the shelf: its cover, sharp, beside what it is. It keeps one height from record to
   record (the details kept to two lines), so going along the row doesn't move the copy under it. */
.rot-peek { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; align-items: start; min-height: 144px; margin: 0 0 1.1rem; animation: rot-peek-in 0.25s ease-out; }
.rot-peek[hidden] { display: none; }
@keyframes rot-peek-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rot-peek { animation: none; } }
/* The cover is its tile on the sheet of covers the shelf already has loaded, so it's there the moment you point. */
.rot-peek-cover { display: block; width: 132px; height: 132px; background: #1a1612 no-repeat; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); }
.rot-peek .osd-k { margin-bottom: 0.3rem; }
.rot-peek-title { margin: 0 0 0.35rem; font: clamp(26px, 2.3vw, 36px)/0.95 var(--osd-font); color: var(--osd); text-shadow: 0 0 14px rgba(255, 120, 80, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.6); text-wrap: balance; }
.rot-peek-title[data-long] { font-size: clamp(20px, 1.7vw, 27px); }
.rot-peek-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font: 400 13px/1.45 var(--cap-font); color: #f3e6de; opacity: 0.85; }
/* My line about the record, when there is one. */
.rot-note { margin: 0 0 1.1rem; max-width: 30em; font: italic 400 16px/1.5 var(--cap-font); color: #f3e6de; }
.rot-note[hidden] { display: none; }

@media (max-width: 760px), (max-aspect-ratio: 21/20) {
  .room-copy[data-room-copy="rotation"] { translate: none !important; transform: none !important; }
  .rot-listen { gap: 0.4rem 0.8rem; margin-bottom: 0.6rem; font-size: 21px; }
  .rot-tracklist { left: 0; right: 0; max-height: 50vh; }
  .rot-badge img { width: 106px; } /* Apple's minimum is 30 px high */
  .rot-credit { font-size: 12px; }
  .rot-levels { font-size: 21px; }
  .rot-peek { min-height: 116px; margin-bottom: 0.6rem; }
  .rot-peek-cover { width: 92px; height: 92px; }
  .rot-peek-title { font-size: 26px; }
  .rot-peek-title[data-long] { font-size: 20px; }
}
/* The search box for the shelf, and what it found under it. */
.rot-search { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; margin: 0 0 1rem; max-width: 30rem; }
.rot-search[hidden] { display: none; }
.rot-find { flex: 1 0 100%; font: 400 17px/1 var(--osd-font); letter-spacing: 0.05em; color: var(--osd); background: rgba(10, 44, 146, 0.35); border: 1px solid rgba(255, 187, 153, 0.45); padding: 0.45rem 0.6rem; text-transform: uppercase; }
.rot-find::placeholder { color: rgba(255, 187, 153, 0.6); }
.rot-find:focus { outline: 2px solid rgba(255, 187, 153, 0.8); outline-offset: 1px; }
.rot-found { flex: 1 0 100%; display: flex; flex-direction: column; gap: 0.15rem; }
.rot-found button { font: 400 14px/1.2 var(--cap-font); text-align: left; color: #f3e6de; background: none; border: 0; padding: 0.15rem 0; cursor: pointer; opacity: 0.85; }
.rot-found button:hover, .rot-found button:focus-visible { opacity: 1; text-decoration: underline; outline: none; }
.rot-found button[aria-current="true"] { opacity: 1; color: var(--osd); }
.rot-found button[aria-current="true"]::before { content: "▸ "; }