/* Weddings of Hawaii — song chooser
 *
 * Independent stylesheet. It deliberately repeats the token VALUES used by the
 * Weddings of Hawaii selections form so the two pages look related, but it does
 * not import or link that form's stylesheet — the two stay separate on purpose.
 */

:root {
  --ivory: #F5F1E6;
  --cream: #FAF7EF;
  --cream-deep: #F1EADA;
  --ink: #23201A;
  --ink-soft: #5C564A;
  --ink-faint: #8A8271;
  --gold: #A6893A;
  --gold-dark: #8A7130;

  /* Two values added for legibility. The form's --ink-faint (#8A8271) reaches
     only 3.38:1 on --ivory and --gold (#A6893A) only 2.97:1, so neither can
     carry text at 4.5:1 no matter the size. --ink-soft and --gold-dark are used
     unchanged wherever they are already dark enough; these two cover the rest.
     Both clear 4.5:1 on ivory, cream, and gold-wash over either. */
  --ink-muted: #6E685A;   /* tertiary text: 4.91 on ivory, 4.60 on gold-wash */
  --gold-text: #7B652B;   /* gold used AS TEXT: 4.98 on ivory, 4.67 on gold-wash */
  --gold-line: rgba(166, 137, 58, 0.28);
  --gold-wash: rgba(166, 137, 58, 0.07);
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(35, 32, 26, 0.04), 0 4px 14px rgba(35, 32, 26, 0.05);
  --shadow-md: 0 2px 6px rgba(35, 32, 26, 0.05), 0 16px 40px rgba(35, 32, 26, 0.08);
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  /* page-specific, derived from the same palette */
  --page-max: 1240px;
  --page-pad: clamp(1.1rem, 3vw, 2.4rem);
  --bar-h: 3.5rem;

  /* Height reserved for the now-playing bar. Zero until something plays, so
     nothing on the page shifts before then. Everything that must clear the
     bar (page bottom, the mobile sheet) reads this one value. */
  --np-h: 0px;
}

body.is-playing { --np-h: 74px; }

*, *::before, *::after { box-sizing: border-box; }

/* Base size raised 16px -> 17px. Every rem-based size on the page scales with
   it, so the whole type system moves up one step rather than just body copy. */
html { font-size: 106.25%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--gold-text); text-decoration-color: var(--gold-line); }
a:hover { color: var(--gold-text); text-decoration-color: var(--gold-text); }

/* One focus treatment for everything, using the gold wash as the ring. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--gold-wash);
}

.shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------- header */

.masthead { padding: 2.6rem 0 1.4rem; }

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--gold-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.masthead h1 {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
}

.lede { margin: 0 0 0.7rem; max-width: 62ch; color: var(--ink-soft); }
.lede:last-of-type { margin-bottom: 0; }

/* ---------------------------------------------------------------- notice */

.notice {
  margin: 1.8rem 0 0;
  padding: 1rem 1.15rem;
  max-width: 62ch;
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.notice p { margin: 0; }

/* ----------------------------------------------------------- control bar */

.controls {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: 2rem;
  background: var(--ivory);
  border-bottom: 1px solid var(--gold-line);
}

.controls__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.7rem var(--page-pad);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filters { display: flex; gap: 5px; flex-wrap: wrap; }

.filter {
  appearance: none;
  /* Horizontal padding trimmed from 0.8rem so the three buttons still fit on
     one line at 375px after the base size rose to 17px. Vertical padding is
     untouched, so the tap target keeps its height. */
  padding: 0.4rem 0.66rem;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.filter:hover { border-color: var(--gold); background: var(--gold-wash); }
.filter[aria-pressed="true"] {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}

.count {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 0.84rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------- genre chips
   Off: the same outlined pill the row tags use, so the link between a chip
   and the pills on a row is obvious.
   On:  the active-save-control treatment (gold border, gold wash, gold text).
*/

/* Mobile first: one scrolling line. Wrapping all 11 tags at 375px takes three
   lines and pushes the sticky bar to ~260px, a third of the screen, so the row
   scrolls sideways instead. overscroll-behavior stops that scroll chaining out
   to the page, and min-width:0 stops the row widening its flex parent — between
   them the page body never scrolls sideways. */
.genres {
  flex: 1 1 100%;        /* its own line under the version buttons */
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* the chips themselves signal scrollability */
  padding-bottom: 1px;               /* keeps focus rings from being clipped */
}
.genres::-webkit-scrollbar { display: none; }

/* Wide enough to wrap in at most two lines: wrap instead of scrolling. */
@media (min-width: 700px) {
  .genres {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
  }
}

.chip {
  appearance: none;
  flex: 0 0 auto;
  padding: 0.24rem 0.7rem;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-text); }
.chip[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-wash);
  color: var(--gold-text);
  font-weight: 600;
}

/* Saved button — only on narrow screens, where the panel is hidden.
   Scoped to .controls so it outranks the later `.iconbtn { display:inline-flex }`,
   which would otherwise win on source order at equal specificity. */
.controls .saved-toggle { display: none; }

/* ------------------------------------------------------------ page body */

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding: 1.6rem 0 4rem;
  align-items: start;
}

/* ---------------------------------------------------------------- songs */

.songs { list-style: none; margin: 0; padding: 0; }

.song {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas:
    "art  meta actions"
    "wave wave wave"
    "ver  ver  ver";
  gap: 4px 12px;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gold-line);
  align-items: start;
}
.song:first-child { border-top: 1px solid var(--gold-line); }

/* the sounding row keeps a standing treatment so it is obvious which is which */
.song.is-playing { background: var(--gold-wash); }
.song.is-playing .song__title { color: var(--gold-text); }

.song__art { grid-area: art; }

.song__art img,
.song__art--empty {
  width: 56px; height: 56px;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.song__art--empty {
  background: var(--cream-deep);
  border: 1px solid var(--gold-line);
}

.song__meta { grid-area: meta; min-width: 0; }

.song__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.25;
}

.song__check {
  color: var(--gold-text);
  font-size: 0.9em;
  margin-left: 0.35em;
}

.song__artist { margin: 0; color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }

.song__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }

.tag {
  padding: 2px 9px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.song__dur { color: var(--ink-muted); font-weight: 500; font-size: 0.82rem; font-variant-numeric: tabular-nums; }

.song__version {
  grid-area: ver;
  margin: 6px 0 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.55;
}
.song__version-lead { color: var(--ink-soft); }
.song__hint { color: var(--ink-muted); font-size: 0.95em; }

.song__actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  align-items: center;
}

.iconbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.38rem 0.7rem;
  background: var(--cream);
  color: var(--ink-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.iconbtn:hover { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-text); }
.iconbtn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-text); }

.iconbtn__glyph { font-size: 0.9em; line-height: 1; }

/* ------------------------------------------------------------- waveform
   Two stacked layers of bars. The gold layer is clipped from the right as
   the preview advances, which fills it left to right. Decorative only. */

.wave {
  grid-area: wave;
  position: relative;
  height: 26px;
  margin: 8px 0 2px;
}

.wave__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.wave__layer--base .wave__bar { background: var(--gold-line); }

.wave__layer--fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.09s linear;
}
.wave__layer--fill .wave__bar { background: var(--gold); }

.wave__bar {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 1px;
}

.empty-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2rem 0;
  color: var(--ink-muted);
}
.empty-note[hidden] { display: none; }
.empty-note p { margin: 0; font-style: italic; }

/* ---------------------------------------------------------------- panel */

.panel {
  background: var(--cream);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem 1.1rem;
}

.panel__title {
  margin: 0 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
}

.panel__hint { margin: 0 0 0.9rem; color: var(--ink-muted); font-size: 0.84rem; }

.saved-list { list-style: none; margin: 0; padding: 0; }

.saved {
  padding: 0.7rem 0;
  border-top: 1px solid var(--gold-line);
}
.saved__title { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.saved__artist { color: var(--ink-soft); font-weight: 500; font-size: 0.85rem; }
.saved__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.btn {
  appearance: none;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-text); }

.btn--primary {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}
.btn--primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

/* chosen card — the one filled, dark surface on the page */

.chosen {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 0.95rem 1rem 1rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow-md);
}

.chosen__label {
  margin: 0 0 0.35rem;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.chosen__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.22;
}

.chosen__artist { margin: 0 0 0.75rem; color: rgba(245, 241, 230, 0.72); font-size: 0.85rem; }

.versions { display: flex; gap: 6px; flex-wrap: wrap; }

.version {
  appearance: none;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 230, 0.3);
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.version:hover { border-color: var(--gold); background: rgba(166, 137, 58, 0.22); }
.version[aria-pressed="true"] { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

/* the inst-only case: a label, not a control */
.version--static {
  display: inline-block;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px dashed rgba(245, 241, 230, 0.3);
  color: rgba(245, 241, 230, 0.8);
  font-size: 0.76rem;
}

.chosen__instruction {
  margin: 0.8rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 241, 230, 0.16);
  color: rgba(245, 241, 230, 0.85);
  font-size: 0.83rem;
  line-height: 1.5;
}

.chosen__remove {
  margin-top: 0.75rem;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chosen__remove .btn { border-color: rgba(245, 241, 230, 0.3); color: rgba(245, 241, 230, 0.8); }
.chosen__remove .btn:hover { border-color: var(--gold); background: rgba(166, 137, 58, 0.22); color: #fff; }

/* ---------------------------------------------------------------- sheet */

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(35, 32, 26, 0.38);
  z-index: 40;
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -6px 26px rgba(35, 32, 26, 0.12);
  padding: 0.6rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(0);
  transition: transform 0.15s;
}
.sheet[hidden] { display: none; }

.sheet__grip {
  width: 38px; height: 4px;
  margin: 0.35rem auto 0.7rem;
  background: var(--gold-line);
  border-radius: 999px;
}

.sheet__close { position: absolute; top: 0.7rem; right: 1rem; }

/* ----------------------------------------------------------- now playing */

.np {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 -6px 26px rgba(35, 32, 26, 0.12);
  transform: translateY(100%);
  transition: transform 0.15s;
}
.np[hidden] { display: none; }
.np.is-up { transform: translateY(0); }

/* the thin gold progress line sits across the very top of the bar */
.np__progress {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
}

.np__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.6rem var(--page-pad) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
}

.np__art img, .np__art-empty {
  width: 44px; height: 44px;
  border-radius: 6px;
  display: block;
}
.np__art-empty { background: rgba(245, 241, 230, 0.14); }

.np__meta { min-width: 0; flex: 1 1 auto; }

.np__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* artist and the preview note share one line so the note survives on a
   phone, where a third line would not fit */
.np__line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 0.78rem;
}

.np__artist {
  color: rgba(245, 241, 230, 0.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto;
}

.np__sep { color: rgba(245, 241, 230, 0.62); flex: 0 0 auto; }

.np__note {
  color: rgba(245, 241, 230, 0.62);
  font-size: 0.7rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.np__toggle {
  appearance: none;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245, 241, 230, 0.3);
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.np__toggle:hover { border-color: var(--gold); background: rgba(166, 137, 58, 0.22); }

/* Keep the bar clear of the page and of the mobile sheet. */
body { padding-bottom: var(--np-h); }
.sheet { bottom: var(--np-h); }


/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--gold-line);
  padding: 1.6rem 0 3rem;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 0.88rem;
}
.footer p { margin: 0 0 0.35rem; max-width: 62ch; }
.footer p:last-child { margin-bottom: 0; }

/* ============================================================ >= 700px */

@media (min-width: 700px) {
  .song {
    grid-template-columns: 72px 1fr auto;
    gap: 4px 14px;
    padding: 1.15rem 0;
    grid-template-areas:
      "art  meta actions"
      "art  wave wave"
      "art  ver  ver";
  }
  .song__art img, .song__art--empty { width: 72px; height: 72px; }
}

/* ============================================================ >= 980px
   The saved panel appears here; below this it lives in the bottom sheet. */

@media (min-width: 980px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .panel-wrap {
    position: sticky;
    top: calc(var(--bar-h) + 1rem);
  }
  .sheet, .sheet-backdrop { display: none !important; }
}

/* ============================================================ < 980px */

@media (max-width: 979px) {
  .controls .saved-toggle { display: inline-flex; }
  .panel-wrap { display: none; }
}

/* ===================================================== reduced motion
   Copied from the form's stylesheet so both pages behave the same. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}