/* Birthday Playlist: full-screen "Now Playing" view.
   Blurred cover backdrop, centered cover + title + controls, playlist and
   cue panels slide in from the sides. Sized for a 1920x1080 TV (base ~21px,
   controls >= 56px) down to a 390px phone. */

/* ---------- Fonts ----------
   Set in config.json and loaded by fonts.js (FontFace, local files only),
   which sets --font-title and --font-body on <html>. The values below are
   only used until then, or if fonts.js can't run.
   The one face declared here adds Outfit's accented-letter file (Polish
   and other latin-ext titles) to whatever "Outfit" face config.json loads;
   it is only fetched when such a letter is on screen. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Redaction 100", var(--font-body);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.32);
  --hairline: rgba(255, 255, 255, 0.14);
  --hover: rgba(255, 255, 255, 0.12);
  --drawer-bg: rgba(14, 14, 16, 0.9);
  --accent: #1db954;      /* currently playing row, cue times */
  --danger: #ff8a8a;

  --ring: 3px;            /* focus ring: white, 3px */
  --tap: 56px;            /* minimum control size */
  --full-h: 100vh;
  --np-rest: calc(188px + 17.5rem);  /* height of everything in the column but the cover */
  --cover: min(38vh, 70vw, calc(var(--full-h) - var(--np-rest)));
  --viz-scale: 1.3;       /* visualiser canvas size, relative to the cover */
  /* Space around the cover for the visualiser ring, from what is left over. */
  --ring-room: clamp(0.25rem, calc((var(--full-h) - var(--cover) - var(--np-rest)) / 2), calc(var(--cover) * 0.16));
  --drawer-w: min(34rem, 100vw);

  color-scheme: dark;
}

@supports (height: 100dvh) {
  :root { --full-h: 100dvh; }     /* a phone's visible height, without its address bar */
}

* { box-sizing: border-box; }

html {
  /* ~21px on a 1920x1080 TV, 15px on phones and small laptops. */
  font-synthesis: style;      /* no faked bold for a single-weight title font */
  font-size: clamp(15px, 0.8vw + 0.55vh, 26px);
  -webkit-text-size-adjust: 100%;
  height: 100%;
  background: #16161a;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #16161a;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.35;
}

p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  flex: none;
}

/* ---------- Backdrop: cover colours, blurred and darkened ---------- */

.backdrop {
  position: fixed;
  inset: -15%;
  z-index: 0;
  background: linear-gradient(135deg, hsl(250, 30%, 42%), hsl(300, 35%, 22%));
  /* Muted like a real photo blurred out: softer colour, less brightness. */
  filter: blur(80px) saturate(0.7) brightness(0.8);
  transform: scale(1.1);
}

.backdrop-shade {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(20, 20, 28, 0.1), rgba(10, 10, 14, 0.5) 75%),
    linear-gradient(180deg, rgba(30, 30, 40, 0.35) 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* ---------- Top corners ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  padding-top: max(0.75rem, env(safe-area-inset-top));
  pointer-events: none;           /* the empty middle doesn't block clicks */
}

.topbar > *,
.topbar-right > * { pointer-events: auto; }

.topbar-right { display: flex; gap: 0.25rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: max(var(--tap), 2.8rem);
  height: max(var(--tap), 2.8rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.icon-btn:hover { color: var(--text); background: var(--hover); }
.icon-btn .icon { width: 1.5rem; height: 1.5rem; }
.icon-btn-sm .icon { width: 1.15rem; height: 1.15rem; }
.icon-btn[aria-expanded="true"],
.icon-btn[aria-pressed="true"] { color: var(--text); background: rgba(255, 255, 255, 0.18); }

/* ---------- Now Playing column ---------- */

.now-playing {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 1.5rem;
  overflow: hidden;               /* the visualiser ring may reach past the edges */
  transition: padding 0.25s ease;
}

.np-art { flex: none; margin-top: var(--ring-room); margin-bottom: var(--ring-room); }

/* Cover + visualiser ring. The canvas is centred behind the cover and larger
   than it; app.js draws the bars from just outside the cover's edge. */
.cover-wrap {
  position: relative;
  width: var(--cover);
  height: var(--cover);
  transition: width 0.45s ease, height 0.45s ease, margin 0.45s ease;
}

.viz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cover) * var(--viz-scale, 1.44));
  height: calc(var(--cover) * var(--viz-scale, 1.44));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Square cover: a ring around a square has to clear its corners (half the
   diagonal), which takes much more room than around the round record. So
   the square cover is drawn at 75 % of --cover, in a block of the same
   height as before, and the ring (inner radius ~0.73 x the cover, bars up
   to 0.1 x the cover) fits on a 1080p TV and across a 390px phone. */
body:not(.is-vinyl) { --art: calc(var(--cover) * 0.75); }
body:not(.is-vinyl) .cover-wrap {
  width: var(--art);
  height: var(--art);
  margin: calc((var(--cover) - var(--art)) / 2);   /* the block stays --cover square */
}
body:not(.is-vinyl) .cover-np {
  width: var(--art);
  height: var(--art);
}
body:not(.is-vinyl) .viz {
  width: calc(var(--art) * 1.74);
  height: calc(var(--art) * 1.74);
}

.cover {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, hsl(250, 30%, 52%), hsl(300, 35%, 26%));
  color: rgba(255, 255, 255, 0.85);
}

.cover svg { width: 38%; height: 38%; fill: currentColor; }
.cover.has-art svg { display: none; }     /* embedded cover art replaces the placeholder */

.cover-np {
  position: relative;
  width: var(--cover);
  height: var(--cover);
  border-radius: 12px;
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.5), 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
  transition: border-radius 0.45s ease, width 0.45s ease, height 0.45s ease;
}

.cover-np svg { transition: opacity 0.3s; }

/* ---------- Vinyl cover (pure CSS) ----------
   The cover becomes the record: cropped to a circle, grooves from a
   repeating radial gradient, a label ring and a centre hole. It spins while
   playing; animation-play-state freezes it in place on pause. */

.cover-np::before,
.cover-np::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* Grooves over everything outside the label */
.cover-np::before {
  inset: 0;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(0, 0, 0, 0.55) 31.4% 32.4%, transparent 33%),
    repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2.5px 3px, rgba(255, 255, 255, 0.06) 3.5px 4px),
    radial-gradient(circle, transparent 0 32%, rgba(8, 8, 12, 0.5) 33%, rgba(8, 8, 12, 0.72) 70%, rgba(8, 8, 12, 0.82) 100%);
}

/* Centre hole */
.cover-np::after {
  left: 50%;
  top: 50%;
  width: 4.5%;
  height: 4.5%;
  transform: translate(-50%, -50%);
  background: #0c0c10;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.12);
}

body.is-vinyl .cover-np {
  border-radius: 50%;
  animation: vinyl-spin 8s linear infinite;
  animation-play-state: paused;
}

body.is-vinyl .cover-np.is-spinning { animation-play-state: running; }
body.is-vinyl .cover-np::before,
body.is-vinyl .cover-np::after { opacity: 1; }
body.is-vinyl .cover-np svg { opacity: 0; }

/* Light catching the record: stays put while the disc turns under it. */
body.is-vinyl .cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 70deg,
                             transparent 200deg, rgba(255, 255, 255, 0.07) 230deg, transparent 270deg);
  pointer-events: none;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.np-column {
  position: relative;             /* text above the visualiser ring */
  z-index: 1;
  width: max(var(--cover), 24rem);
  max-width: 100%;
  flex: 1 1 0;                    /* the rest of the screen; the lyrics inside it give way first */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* A song with nothing to show in the lyrics block: cover and controls, centred. */
body.no-lyrics:not(.lyrics-view) .np-art { margin-top: auto; }
body.no-lyrics:not(.lyrics-view) .np-column { flex: none; margin-bottom: auto; }

.np-meta {
  flex: none;
  margin-top: 0.25rem;
  text-align: center;
  min-width: 0;
}

.np-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.np-artist {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.np-title,
.np-artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The controls in as few rows as possible, so the column fits the screen.
   The HTML order is unchanged, and it is the remote's Up/Down order. */
.np-controls {
  flex: none;
  align-self: center;             /* wider than the cover, like the lyrics */
  width: min(max(36rem, 640px), calc(100vw - 3rem));
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "seek    seek      seek"
    "section transport cut"
    "skip    volume    right"
    "status  status    status";
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.seekrow { grid-area: seek; }
.buttons { grid-area: transport; }
.volume-row { grid-area: volume; }
.bar-status { grid-area: status; }
#section-btn { grid-area: section; justify-self: end; width: 100%; }
#cut-btn { grid-area: cut; justify-self: start; width: 100%; }
#skip-intro-btn { grid-area: skip; justify-self: start; }
.extras-right { grid-area: right; justify-self: end; }

/* Progress row: elapsed | thin bar | -remaining */
.seekrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.time {
  flex: none;
  min-width: 3em;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.seekrow .time:first-child { text-align: right; }

.seek {
  --pct: 0%;
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: var(--tap);             /* hit area; the visible bar is thin */
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}

.seek:disabled { cursor: default; opacity: 0.5; }

.seek::-webkit-slider-runnable-track {
  height: 0.3rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--text) var(--pct), var(--faint) var(--pct));
}

.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.3rem;
  height: 0.3rem;
  margin-top: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s;
}

.seek:hover::-webkit-slider-thumb,
.seek:focus::-webkit-slider-thumb,
.seek:active::-webkit-slider-thumb { transform: scale(3); }

.seek::-moz-range-track { height: 0.3rem; border-radius: 999px; background: var(--faint); }
.seek::-moz-range-progress { height: 0.3rem; border-radius: 999px; background: var(--text); }
.seek::-moz-range-thumb { width: 0.9rem; height: 0.9rem; border: 0; border-radius: 50%; background: var(--text); }

/* Transport row */
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ctl {
  display: grid;
  place-items: center;
  width: max(var(--tap), 3rem);
  height: max(var(--tap), 3rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.ctl:hover { background: var(--hover); }
.ctl:active { transform: scale(0.92); }
.ctl .icon { width: 2.1rem; height: 2.1rem; }

.ctl-play {
  width: max(72px, 4.2rem);
  height: max(72px, 4.2rem);
}

.ctl-play .icon { width: 2.9rem; height: 2.9rem; }
.ctl-play .icon-pause { display: none; }
.ctl-play.is-playing .icon-play { display: none; }
.ctl-play.is-playing .icon-pause { display: block; }

.ctl[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.ctl[aria-disabled="true"]:hover { background: transparent; }
.ctl[aria-disabled="true"]:active { transform: none; }

/* Secondary controls: Skip intro | cues (placed by the .np-controls grid) */
.extras { display: contents; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0 1.2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.pill .icon { width: 1.05rem; height: 1.05rem; }
.pill:hover { background: rgba(255, 255, 255, 0.2); }
.pill[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.pill[aria-disabled="true"]:hover { background: rgba(255, 255, 255, 0.12); }

.extras-right { display: flex; align-items: center; gap: 0.35rem; }

/* Live row (Milestone 7): Next section | Cut now, big enough to hit in a hurry */
.live { display: contents; }

.live .pill {
  max-width: 15rem;
  justify-content: center;
  min-height: max(var(--tap), 2.9rem);
  font-size: 1rem;
}

.live .pill .icon { width: 1.3rem; height: 1.3rem; }
.pill-cut { background: rgba(255, 99, 99, 0.24); }
.pill-cut:hover { background: rgba(255, 99, 99, 0.36); }
.pill-cut[aria-disabled="true"]:hover { background: rgba(255, 99, 99, 0.24); }

/* Master volume row: speaker | thin bar (same look as the seek bar) | speaker */
.volume-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.volume-row .vol-icon { width: 1.15rem; height: 1.15rem; color: var(--muted); }
body.is-ducked .volume-row .vol-icon { color: #ffd166; }   /* ducked for an announcement */

/* ---------- Lyrics ----------
   A window of about three lines between the title/artist and the progress
   bar. app.js keeps the current line in the middle; the window's height is
   fixed, so the controls don't move when a song has no lyrics. The Lyrics
   button hides it. */

.lyrics {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1 1 0;                     /* whatever height is left; scrolls inside */
  min-height: 0;
  flex-direction: column;
  align-self: center;              /* may be wider than the column: lyric lines are long */
  width: min(44rem, calc(100vw - 3rem));
  margin-top: 0.9rem;
}
.lyrics.is-empty { display: none; }   /* no lyrics and no intro: no gap */

.lyrics-scroll {
  position: relative;             /* offsetTop of the lines is measured from here */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.lyrics-scroll::-webkit-scrollbar { display: none; }

.lyrics-lines {
  margin: 0;
  padding: 3rem 0;                /* the first and last lines can still reach the middle */
  list-style: none;
}

.lyric {
  display: block;
  width: 100%;
  min-height: calc(1.22em + 0.4em);
  margin: 0;
  padding: 0.2em 0.5rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.34);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transform: scale(0.86);
  transform-origin: center center;
  transition: color 0.12s linear, transform 0.25s ease, background-color 0.15s;
}

.lyric:hover { color: rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.06); }
.lyric.is-active { color: var(--text); transform: none; }

.lyrics-plain { padding: 3rem 0.5rem; text-align: center; }
.plain-line { margin: 0 0 0.25em; font-size: 1.25rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.plain-gap { height: 0.9em; }

/* Wide screens with a drawer open: stay clear of it. */
@media (min-width: 1100px) {
  body.playlist-open .lyrics, body.cues-open .lyrics { width: min(44rem, calc(100vw - var(--drawer-w) - 4rem)); }
  body.playlist-open.cues-open .lyrics { width: min(44rem, calc(100vw - 2 * var(--drawer-w) - 4rem)); }
}

/* Lyrics view (the Lyrics button): no cover; title on top, controls at the
   bottom, the lyrics in everything between. */
body.lyrics-view .np-art { display: none; }
body.lyrics-view .np-column { width: 100%; }
body.lyrics-view .np-meta { margin-top: 0.75rem; padding: 0 4.5rem; }
body.lyrics-view .lyrics { width: 100%; margin-top: 1rem; }
body.lyrics-view .np-controls { margin-top: auto; padding-top: 0.75rem; }
body.lyrics-view .lyric { font-size: 2.6rem; }
body.lyrics-view .plain-line { font-size: 2rem; }

/* Status: only shown while loading or on an error. */
.bar-status {
  min-height: 1.3em;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bar-status:not(.is-error):not(.is-busy) { visibility: hidden; }
.bar-status.is-error { color: var(--danger); white-space: normal; }

/* ---------- Drawers (playlist left, cues right) ---------- */

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: var(--drawer-w);
  display: flex;
  flex-direction: column;
  background: var(--drawer-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.45);
}

.drawer[hidden] { display: none; }
.drawer-left { left: 0; border-right: 1px solid var(--hairline); }
.drawer-right { right: 0; border-left: 1px solid var(--hairline); }

.drawer-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1rem 1rem 1.5rem;
  padding-top: max(1.5rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--hairline);
}

.drawer-heading { min-width: 0; }

.drawer-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.drawer-meta { margin-top: 0.2rem; font-size: 0.9rem; color: var(--muted); }

.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 1.5rem;
  scroll-padding: 0.75rem 0;
}

.drawer-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 1.25rem 0.75rem 0;
  border-top: 1px solid var(--hairline);
}

.note { font-size: 0.8rem; color: var(--muted); padding: 0 0.75rem; }
.drawer-foot .note { padding: 0; }

.list-message { padding: 0.75rem; color: var(--muted); }
.list-message.is-error { color: var(--danger); }

/* Track list (rows are built by app.js) */
.track-list { margin: 0; padding: 0; list-style: none; }
.track-list > li { display: flex; align-items: center; gap: 0.35rem; }
.track-list > li > .row { flex: 1 1 auto; min-width: 0; }

/* Reorder mode: Move up / Move down on each row (pointer, touch), and the
   song picked up with OK (remote: Up/Down move it). */
.moves { display: none; flex: none; gap: 0.25rem; }
.track-list.is-reordering .moves { display: flex; }
.move-btn {
  display: grid;
  place-items: center;
  width: max(var(--tap), 2.8rem);
  height: max(var(--tap), 2.8rem);
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
}
.move-btn .icon { width: 1.6rem; height: 1.6rem; }
.move-btn:hover:not(:disabled) { background: var(--hover); }
.move-btn:disabled { opacity: 0.25; cursor: default; }
.track-list.is-reordering .row { cursor: grab; }
.row.is-moving,
.row.is-moving:focus {
  background: rgba(29, 185, 84, 0.22);
  box-shadow: inset 0 0 0 2px var(--accent);
  cursor: grabbing;
}
.reorder-btn { flex: none; }
.reorder-btn[aria-pressed="true"] { background: var(--accent); color: #000; }

.row {
  width: 100%;
  min-height: max(var(--tap), 3.4rem);
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  scroll-margin: 0.75rem 0;
}

.row:hover { background: var(--hover); }

.col-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.col-album { display: none; }
.col-dur { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.col-title { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.t-text { display: flex; flex-direction: column; min-width: 0; }
.t-title, .t-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-title { color: var(--text); font-family: var(--font-title); font-weight: 600; }
.t-artist { font-size: 0.85rem; }

.cover-sm {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.3rem;
}

.row.is-current { background: rgba(255, 255, 255, 0.07); }
.row.is-current .t-title,
.row.is-current .num { color: var(--accent); }
.row.is-current:hover { background: var(--hover); }

.row.is-unavailable .t-title,
.row.is-unavailable .t-artist { opacity: 0.5; }
.row.is-unavailable .col-dur { color: var(--danger); font-size: 0.8rem; }

.eq {
  display: none;
  height: 0.95rem;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.14rem;
}

.eq i {
  display: block;
  width: 0.2rem;
  height: 100%;
  border-radius: 0.1rem;
  background: var(--accent);
  transform-origin: bottom;
  transform: scaleY(0.4);
}

.row.is-current.is-playing .num { display: none; }
.row.is-current.is-playing .eq { display: inline-flex; }
.row.is-current.is-playing .eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.row.is-current.is-playing .eq i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.7s; }
.row.is-current.is-playing .eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.1s; }

@keyframes eq {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* Cue list (built by app.js) */
.cue-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cue {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
  cursor: pointer;
  scroll-margin: 0.75rem 0;
}

.cue:hover { background: var(--hover); }

.cue-time {
  flex: none;
  min-width: 4.2em;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.cue-text { display: flex; flex-direction: column; min-width: 0; }
.cue-label { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cue-desc { font-size: 0.8rem; color: var(--muted); }

#cue-note { padding: 0 0.75rem 0.6rem; }
#cue-empty { padding: 0.75rem; }

/* Transition settings */
.settings {
  margin-top: 1.5rem;
  padding: 1.25rem 0.75rem 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.section-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.setting { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.setting-label { font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 0.4rem; }

.step-btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.step-btn:hover { background: rgba(255, 255, 255, 0.2); }
.step-btn .icon { width: 1.2rem; height: 1.2rem; }
.step-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }

.step-value { min-width: 3.6em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.toggle {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.toggle-text { display: flex; flex-direction: column; }
.toggle-hint { font-size: 0.8rem; color: var(--muted); }

.switch {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition: background-color 0.15s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s;
}

.toggle[aria-pressed="true"] .switch { background: var(--accent); }
.toggle[aria-pressed="true"] .switch::after { transform: translateX(1.1rem); }

/* Hints */
.hints {
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.hints div { display: flex; align-items: center; gap: 0.6rem; }
.hints dt { display: flex; gap: 0.2rem; min-width: 4.4rem; }
.hints dd { margin: 0; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--faint);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: center;
}

/* Wide screens: an open drawer pushes the Now Playing column aside
   instead of covering the cover. */
@media (min-width: 1100px) {
  body.playlist-open .now-playing { padding-left: calc(var(--drawer-w) + 1.5rem); }
  body.cues-open .now-playing { padding-right: calc(var(--drawer-w) + 1.5rem); }
  body.playlist-open .topbar { padding-left: calc(var(--drawer-w) + 1rem); }
  body.cues-open .topbar { padding-right: calc(var(--drawer-w) + 1rem); }
  body.playlist-open.cues-open { --cover: min(38vh, 70vw, calc(100vw - 2 * var(--drawer-w) - 6rem), calc(var(--full-h) - var(--np-rest) - 124px)); }
  /* Both drawers leave a narrow middle: the controls take more rows. */
  body.playlist-open.cues-open .np-controls {
    width: calc(100vw - 2 * var(--drawer-w) - 3rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "seek seek"
      "transport transport"
      "section cut"
      "skip right"
      "volume volume"
      "status status";
  }
}

/* One drawer on a smaller screen: the same, in the space it leaves. */
@media (min-width: 1100px) and (max-width: 1250px) {
  body.playlist-open, body.cues-open { --cover: min(38vh, 70vw, calc(var(--full-h) - var(--np-rest) - 124px)); }
  body.playlist-open .np-controls, body.cues-open .np-controls {
    width: calc(100vw - var(--drawer-w) - 3rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "seek seek"
      "transport transport"
      "section cut"
      "skip right"
      "volume volume"
      "status status";
  }
}

/* ---------- Focus ring: white, 3px, on every control ----------
   :focus first, as a fallback for older TV browsers without :focus-visible;
   the :not() rule hides the ring after mouse clicks in browsers that have it. */

.icon-btn:focus,
.ctl:focus,
.pill:focus,
.seek:focus,
.step-btn:focus,
.seg:focus,
.ed-flag:focus,
.ed-wave:focus {
  outline: var(--ring) solid #fff;
  outline-offset: 3px;
}

.row:focus,
.cue:focus,
.lyric:focus,
.toggle:focus,
.ed-track:focus {
  outline: var(--ring) solid #fff;
  outline-offset: calc(var(--ring) * -1);   /* inside, so the scrolling drawer doesn't clip it */
}

.row:focus { background: var(--hover); }
.toggle:focus { padding-left: 0.6rem; padding-right: 0.6rem; }

.icon-btn:focus:not(:focus-visible),
.ctl:focus:not(:focus-visible),
.pill:focus:not(:focus-visible),
.seek:focus:not(:focus-visible),
.step-btn:focus:not(:focus-visible),
.row:focus:not(:focus-visible),
.cue:focus:not(:focus-visible),
.lyric:focus:not(:focus-visible),
.toggle:focus:not(:focus-visible),
.ed-track:focus:not(:focus-visible),
.seg:focus:not(:focus-visible),
.ed-flag:focus:not(:focus-visible),
.ed-wave:focus:not(:focus-visible) {
  outline: none;
}

.toggle:focus:not(:focus-visible) { padding-left: 0; padding-right: 0; }
.row:focus:not(:focus-visible) { background: transparent; }
.row.is-current:focus:not(:focus-visible) { background: rgba(255, 255, 255, 0.07); }
.row:hover:focus:not(:focus-visible) { background: var(--hover); }

/* ---------- Phone ---------- */

@media (max-width: 700px) {
  :root {
    --np-rest: 500px;
    --tap: 52px;
  }

  /* Cover and title on top, controls pinned to the bottom. */
  .now-playing { padding: 2.4rem 16px 0; }
  body.lyrics-view .now-playing { padding-top: 4.25rem; }

  .np-column {
    width: 100%;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .np-controls {
    width: 100%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "seek seek seek seek seek seek"
      "transport transport transport transport transport transport"
      "skip skip section section cut cut"
      "volume volume volume right right right"
      "status status status status status status";
    gap: 0.25rem 0.4rem;
  }

  #section-btn, #cut-btn, #skip-intro-btn { justify-self: stretch; justify-content: center; }
  .np-controls .pill { gap: 0.3rem; padding: 0 0.35rem; font-size: 0.82rem; }
  .np-controls .pill .icon { width: 1rem; height: 1rem; }

  .np-meta { margin-top: 0.25rem; text-align: left; }
  body.lyrics-view .np-meta { margin-top: 0; padding: 0; }
  body.lyrics-view .lyric { font-size: 1.7rem; }
  body.lyrics-view .plain-line { font-size: 1.35rem; }
  .lyrics { width: 100%; margin-top: 0.5rem; }
  .lyrics-lines { padding: 2.2rem 0; }
  .lyric { font-size: 1.2rem; text-align: left; padding-left: 0; padding-right: 0; transform-origin: left center; }
  .lyrics-plain { padding: 2.2rem 0; text-align: left; }
  .plain-line { font-size: 1.05rem; }
  .np-title { font-size: 1.35rem; }
  .np-artist { font-size: 1rem; }

  .buttons { gap: 1.75rem; }
  .ctl-play { width: 76px; height: 76px; }
  .ctl-play .icon { width: 3rem; height: 3rem; }

  .hints { display: none; }
}

/* However tall the lyrics area is, the first and last lines can reach its middle. */
@supports (height: 1cqh) {
  .lyrics-scroll { container-type: size; }
  .lyrics-lines, .lyrics-plain { padding-top: 50cqh; padding-bottom: 50cqh; }
}

@media (prefers-reduced-motion: reduce) {
  .now-playing, .icon-btn, .ctl, .pill, .switch, .switch::after, .seek::-webkit-slider-thumb, .lyric { transition: none; }
  body.is-vinyl .cover-np { animation: none; }   /* app.js also skips the visualiser */
  .row.is-current.is-playing .eq i { animation: none; transform: scaleY(0.7); }
}

/* ---------- Cue editor (Milestone 6): a separate full-screen view ----------
   PC tool, laid out for 1920x1080; one column on phones. Marker colours:
   intro end yellow, jump cyan, fade out orange, cut to next red. */

.editor {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: #16161a;
  color: var(--text);
}

.editor[hidden] { display: none; }

.kind-intro { --mc: #ffd166; }
.kind-jump, .kind-target { --mc: #4cc9f0; }
.kind-fadeOut { --mc: #f4a261; }
.kind-next { --mc: #ff6b6b; }
.kind-bad { --mc: #9a9a9a; }

.ed-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.ed-head .drawer-heading { flex: 1 1 auto; }

#ed-title {
  font-size: 1.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

.ed-head-right { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.ed-dirty {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #ffd166;
  font-size: 0.85rem;
  font-weight: 700;
}

.ed-dirty::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

.ed-dirty[hidden] { display: none; }

.ed-msgbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.2rem;
  padding: 0.25rem 1.5rem;
}

.ed-msg { font-size: 0.85rem; color: var(--muted); }
.ed-msg.is-ok { color: var(--accent); font-weight: 600; }
.ed-msg.is-error { color: var(--danger); font-weight: 600; }

.ed-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
}

.ed-tracks {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0.75rem;
  border-right: 1px solid var(--hairline);
}

.ed-tracks .section-title { padding: 0 0.75rem; }

.ed-track-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ed-track {
  width: 100%;
  min-height: 3.3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.ed-track:hover { background: var(--hover); }
.ed-track.is-current { background: rgba(255, 255, 255, 0.11); color: var(--text); }
.ed-track-num { min-width: 1.4em; text-align: right; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ed-track-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ed-track .t-artist { font-size: 0.78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.dot { display: none; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ffd166; }
.dot.is-on, .has-dot .dot { display: inline-block; }

.ed-main {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Waveform: flag lanes above (markers) and below (jump targets) the canvas. */
.ed-wave {
  --ft: 4.6rem;           /* three lanes of marker flags */
  --fb: 2.9rem;           /* two lanes of jump-target flags */
  --ruler: 22px;          /* RULER_PX in editor.js */
  position: relative;
  flex: none;
  height: clamp(13rem, 33vh, 21rem);
  padding: var(--ft) 0 var(--fb);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.ed-wave.is-loading .ed-canvas { opacity: 0.3; }
.ed-canvas { display: block; width: 100%; height: 100%; }

.ed-wave-msg {
  position: absolute;
  inset: var(--ft) 0 var(--fb);
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}

.ed-wave-msg[hidden] { display: none; }

.ed-markers { position: absolute; inset: 0; pointer-events: none; }

.ed-marker { position: absolute; top: 0; bottom: 0; width: 0; }

.ed-marker::before {
  content: "";
  position: absolute;
  left: -1px;
  width: 2px;
  background: var(--mc);
}

.ed-marker.row-top::before {
  top: calc(var(--lane, 0) * 1.5rem + 0.2rem);
  bottom: calc(var(--fb) + var(--ruler));
}

.ed-marker.row-bottom::before {
  top: var(--ft);
  bottom: calc(var(--lane, 0) * 1.5rem + 0.2rem);
  width: 0;
  border-left: 2px dashed var(--mc);
  background: none;
}

.ed-marker.is-selected::before { left: -2px; width: 4px; }
.ed-marker.row-bottom.is-selected::before { width: 0; border-left-width: 3px; }

.ed-flag {
  position: absolute;
  left: 0;
  top: calc(var(--lane, 0) * 1.5rem);
  max-width: 15rem;
  padding: 0.12rem 0.5rem;
  border: 0;
  border-radius: 0.3rem;
  background: var(--mc);
  color: #111;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
}

.row-bottom .ed-flag {
  top: auto;
  bottom: calc(var(--lane, 0) * 1.5rem);
  padding: 0 0.45rem;
  border: 1px dashed var(--mc);
  background: #16161a;
  color: var(--mc);
}

.is-flipped .ed-flag { left: auto; right: 0; }
.is-selected .ed-flag { box-shadow: 0 0 0 2px #fff; }
.has-error .ed-flag { background: #3b1c1f; color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.has-error .ed-flag::before { content: "\26A0\FE0E  "; }
.is-selected.has-error .ed-flag { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 2px #fff; }

.ed-playhead {
  position: absolute;
  top: calc(var(--ft) - 0.4rem);
  bottom: var(--fb);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.ed-playhead::before {           /* small handle on top */
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  border: 6px solid transparent;
  border-top-color: #fff;
}

.ed-playhead[hidden] { display: none; }

.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ed-bar .ctl-play { width: 3.4rem; height: 3.4rem; }
.ed-bar .ctl-play .icon { width: 1.8rem; height: 1.8rem; }
.ed-sep { width: 1px; height: 2rem; margin: 0 0.6rem; background: var(--hairline); }

.ed-time {
  min-width: 9.5em;
  margin-left: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ed-time span { color: var(--muted); font-weight: 500; }

.ed-add { display: flex; align-items: center; gap: 0.5rem; }

.swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--mc);
}

.swatch-intro { --mc: #ffd166; }

.ed-input {
  min-height: 2.6rem;
  padding: 0 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.ed-input:focus { outline: var(--ring) solid #fff; outline-offset: 1px; }
.ed-input[aria-invalid="true"] { border-color: var(--danger); }
.ed-input::placeholder { color: var(--faint); }
select.ed-input option { background: #222; color: #fff; }
#ed-add-label { width: 11rem; }
.ed-num { width: 8.5rem; font-variant-numeric: tabular-nums; }

.ed-startat { display: flex; align-items: center; gap: 0.4rem; }
.ed-startat .setting-label { margin-right: 0.3rem; font-size: 0.9rem; }

.seg {
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.seg[aria-pressed="true"] { background: #fff; border-color: #fff; color: #111; }
.seg[aria-disabled="true"] { opacity: 0.35; cursor: default; }

.ed-error { color: var(--danger); font-size: 0.85rem; font-weight: 600; }
.ed-error[hidden] { display: none; }

.ed-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.ed-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ed-list-wrap > .ed-error { margin-top: 0.4rem; }
.ed-list-wrap .cue-list { margin-top: 0.6rem; }
.ed-list-wrap .note { margin-top: 0.6rem; padding: 0; }

.ed-entry { box-shadow: inset 4px 0 var(--mc); }
.ed-entry .cue-time { color: var(--mc); min-width: 5.2em; }
.ed-entry.is-selected { background: rgba(255, 255, 255, 0.16); }
.ed-entry.has-error .cue-desc { color: var(--danger); }

.ed-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 4px 0 var(--mc);
}

.ed-detail[hidden] { display: none; }

.ed-field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ed-field[hidden] { display: none; }
.ed-field > label { min-width: 4.5rem; font-size: 0.9rem; font-weight: 600; }
#ed-f-label { flex: 1; min-width: 8rem; }
.ed-inline-label { margin-left: 0.6rem; font-size: 0.9rem; font-weight: 600; }
.ed-tip { padding: 0; }

.pill-sm { min-height: 2.4rem; padding: 0 0.9rem; font-size: 0.8rem; }
.pill-primary { background: var(--accent); color: #0b0b0b; }
.pill-primary:hover { background: #25d366; }
.pill-danger { align-self: flex-start; color: var(--danger); }
.pill[hidden] { display: none; }

.ed-hints {
  margin-top: auto;
  padding: 1rem 0.75rem 0.25rem;
  font-size: 0.78rem;
}

.ed-hints dt { min-width: 5.2rem; }

@media (max-width: 700px) {
  .ed-head { flex-wrap: wrap; padding: 1rem; }
  .ed-head-right { width: 100%; justify-content: space-between; }
  .ed-msgbar { padding: 0.35rem 1rem; }
  .ed-body { display: block; overflow-y: auto; }
  .ed-tracks { max-height: 32vh; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .ed-main { overflow: visible; padding: 0.75rem 1rem 2rem; }
  .ed-wave { height: 15rem; }
  .ed-add { flex-wrap: wrap; width: 100%; }
  .ed-sep { display: none; }
  #ed-add-label { flex: 1; width: auto; min-width: 0; }
  .ed-lower { grid-template-columns: minmax(0, 1fr); }
}