/* ============================================================================
   Brandon's Karaoke Night — styles
   ----------------------------------------------------------------------------
   One stylesheet for all three surfaces (signup / host / display). Built from
   the approved mockups: tokens.css + the per-page <style> blocks in
   mockups/index.html and mockups/host.html. The display is rebuilt in the SAME
   cream/paper aesthetic (the dark mockup was rejected).

   Each page links this file and sets a body class so the page-scoped sections
   below only apply where they belong:
     <body class="page-signup">  index.html
     <body class="page-host">    host.html
     <body class="page-display"> display.html

   Google Fonts (loaded per-page in the <head>):
     Caveat  — display/handwritten headers
     Nunito  — UI/body
   ============================================================================ */


/* ────────────────────────────────────────────────────────────────────────
   Design tokens (lifted verbatim from mockups/tokens.css)
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* ─── Paper Palette ─── */
  --color-paper:        #F4EBD4;
  --color-paper-light:  #F9F3E2;
  --color-paper-dark:   #EDE0C4;

  /* ─── Ink Palette ─── */
  --color-ink:          #2E2620;
  --color-ink-medium:   #3B2F23;
  --color-ink-light:    #6B5744;
  --color-ink-faint:    #A8937D;

  /* ─── Brand — Denim Blue (primary) ─── */
  --color-denim:        #4A6FA5;
  --color-denim-dark:   #3A5685;
  --color-denim-light:  #C8D9F0;

  /* ─── Accents (functional roles) ─── */
  --color-coral:        #D6533B;   /* NOW SINGING, primary signup CTA */
  --color-coral-hover:  #BB4530;
  --color-coral-light:  #F8E0DA;

  --color-orange:       #E1773A;   /* key-change badge, accent marks */
  --color-orange-light: #FBE9D6;

  --color-teal:         #2FB6C3;   /* key badge / live / confirmed-skip */
  --color-teal-dark:    #239AA6;
  --color-teal-light:   #D4F3F6;

  --color-purple:       #7E5AA2;   /* skip-the-line, pending skip */
  --color-purple-dark:  #66468A;
  --color-purple-light: #EBE2F5;

  --color-done:         #5A7A55;   /* done/sung entries */
  --color-done-light:   #DFF0DC;

  /* ─── Typography ─── */
  --font-display:       'Caveat', 'Comic Sans MS', cursive;
  --font-ui:            'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.5rem;
  --text-display: clamp(2.5rem, 6vw, 5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* ─── Spacing (8px grid) ─── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ─── Touch targets ─── */
  --touch-min:   44px;
  --touch-ipad:  56px;

  /* ─── Border radius ─── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 3px rgba(46,38,32,0.10), 0 1px 2px rgba(46,38,32,0.06);
  --shadow-md:  0 4px 12px rgba(46,38,32,0.12), 0 2px 4px rgba(46,38,32,0.08);
  --shadow-lg:  0 8px 24px rgba(46,38,32,0.14), 0 4px 8px rgba(46,38,32,0.08);
  --shadow-card: 0 2px 8px rgba(46,38,32,0.10);

  /* ─── Motion ─── */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:       cubic-bezier(0.55, 0, 1, 0.45);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}


/* ────────────────────────────────────────────────────────────────────────
   Reset & shared base
   ──────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  color: var(--color-ink);
  min-height: 100vh;
}

/* Two-layer paper grain texture — used on signup, host, and the (re-skinned)
   display. Lifted from the approved signup mockup. */
body.paper-texture {
  background-color: var(--color-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n2)' opacity='0.025'/%3E%3C/svg%3E");
}

/* Generic visually-hidden helper for screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden { display: none !important; }

/* Shared continuous "live" blink — reused across surfaces */
@keyframes blink-live {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

/* Shared badge base (key / now / skip / me) */
.badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge-key  { background: var(--color-orange-light); color: var(--color-orange); border: 1.5px solid var(--color-orange); }
.badge-skip { background: var(--color-purple-light); color: var(--color-purple); border: 1.5px solid var(--color-purple); }
.badge-me   { background: var(--color-denim); color: white; font-size: 10px; }
.badge-now  {
  background: var(--color-coral);
  color: white;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  padding: 3px 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Accent marks decoration (logo stars/dashes) */
.accent-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 10px;
  color: var(--color-ink-faint);
  user-select: none;
}
.accent-marks .star-teal   { color: var(--color-teal);   font-size: 14px; }
.accent-marks .star-purple { color: var(--color-purple); font-size: 12px; }
.accent-marks .star-orange { color: var(--color-orange); font-size: 14px; }
.accent-marks .dash-coral  { color: var(--color-coral);  font-size: 18px; line-height: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   SIGNUP PAGE  (body.page-signup)
   ════════════════════════════════════════════════════════════════════════ */
.page-signup { padding-bottom: var(--space-12); }

/* ─── Header / Show Hero ─── */
.show-header {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  border-bottom: 2px solid var(--color-paper-dark);
  overflow: hidden;
}

.show-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 40%, rgba(47,182,195,0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(126,90,162,0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(225,119,58,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* Transparent character logo (Brandon + mic), blended on the cream ground.
   Sized large — it's the signup header's focal point. */
.logo-wrap img {
  display: block;
  width: 260px;
  height: auto;
  /* lift the artwork off the page very gently */
  filter: drop-shadow(0 2px 3px rgba(46,38,32,0.12));
}

.venue-name {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.show-meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.show-header .drift {
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,111,165,0.12) 0%, transparent 70%);
  animation: drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 20px) scale(1.2); }
}

/* ─── Empty / closed states ─── */
.state-banner {
  margin: var(--space-6) var(--space-5) 0;
  background: var(--color-paper-dark);
  border: 2px dashed var(--color-ink-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.state-banner .state-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}
.state-banner h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.state-banner p {
  font-size: var(--text-base);
  color: var(--color-ink-light);
  line-height: 1.5;
}

/* ─── Main content layout ─── */
.main {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ─── Signup Card ─── */
.signup-card {
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-top: var(--space-6);
  box-shadow: 4px 4px 0 var(--color-ink);   /* hand-drawn offset shadow */
  position: relative;
}

.signup-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}

/* Form fields */
.field {
  margin-bottom: var(--space-4);
  position: relative;
}

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-medium);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

.field input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  -webkit-appearance: none;
}

.field input::placeholder {
  color: var(--color-ink-faint);
  font-weight: var(--weight-regular);
}
.field input:hover { border-color: var(--color-ink-light); }
.field input:focus {
  border-color: var(--color-denim);
  box-shadow: 0 0 0 3px var(--color-denim-light);
}

/* First name + last initial share one row (keeps "Mike R." distinct from
   "Mike S."). The initial is a narrow field beside the wider first name. */
.name-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}
.name-first { flex: 1 1 auto; min-width: 0; }
.name-initial { flex: 0 0 4.5rem; }
.name-initial input { text-align: center; text-transform: uppercase; }
.name-row label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-medium);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--color-ink);
  z-index: 100;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--color-paper-dark);
}
.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item:focus,
.autocomplete-item.active {
  background: var(--color-denim-light);
  outline: none;
}
.autocomplete-item:active {
  background: var(--color-denim);
  color: white;
  transform: translateX(2px);
}

.autocomplete-item .song-title-ac {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
}
.autocomplete-item .song-artist-ac {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  margin-top: 1px;
}
.autocomplete-empty {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

/* Inline form error (warm DB messages — never harsh) */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-orange-light);
  border: 1.5px solid var(--color-orange);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-medium);
  line-height: 1.45;
}
.form-error .err-icon { flex-shrink: 0; }

/* Key change stepper */
.key-field { margin-bottom: var(--space-5); }

.key-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.key-label-row label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-medium);
  letter-spacing: 0.02em;
}
.key-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.key-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.key-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.key-btn:hover { background: var(--color-orange-light); border-color: var(--color-orange); }
.key-btn:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.key-btn:active {
  transform: scale(0.92);
  background: var(--color-orange);
  color: white;
}
.key-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.key-btn:disabled:hover { background: var(--color-paper); border-color: var(--color-ink); }

.key-display {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  min-width: 80px;
}
.key-display.changed { color: var(--color-orange); }
.key-display .key-label-text {
  display: block;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* Primary CTA */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-heavy);
  color: white;
  background: var(--color-coral);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover {
  background: var(--color-coral-hover);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.btn-primary:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-ink);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: 3px 3px 0 var(--color-ink);
}

/* Secondary — skip the line */
.btn-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-purple);
  background: var(--color-purple-light);
  border: 2px solid var(--color-purple);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-skip:hover { background: var(--color-purple); color: white; }
.btn-skip:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }
.btn-skip:active { transform: scale(0.97); }

/* Sign-someone-else reset (text button on the status card flow) */
.btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-reset:hover { background: var(--color-paper-dark); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-reset:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.btn-reset:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }

/* ─── Tip the host (light, optional — never pushy; opens a links-only sheet) ─── */
.tip-host-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}
.btn-tip-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-light);
  background: transparent;
  border: 2px dashed var(--color-ink-faint);
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.btn-tip-host:hover {
  color: var(--color-purple);
  border-color: var(--color-purple);
  background: var(--color-purple-light);
}
.btn-tip-host:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }
.btn-tip-host:active { transform: scale(0.97); }

/* ─── Skip-the-line sheet ─── */
.skip-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46,38,32,0.5);
  z-index: 200;
  align-items: flex-end;
  padding: var(--space-4);
}
.skip-sheet-overlay.open {
  display: flex;
  animation: overlay-fade-in 200ms var(--ease-out) forwards;
}
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.skip-sheet {
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
  padding: var(--space-6) var(--space-5) var(--space-8);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 -4px 0 var(--color-ink);
  animation: sheet-slide-up 300ms var(--ease-spring) forwards;
}
@keyframes sheet-slide-up {
  from { transform: translateY(40px); opacity: 0.8; }
  to   { transform: translateY(0);    opacity: 1; }
}

.skip-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.skip-sheet-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-purple);
}

.skip-sheet-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-paper-dark);
  background: var(--color-paper);
  font-size: var(--text-lg);
  color: var(--color-ink-light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
  flex-shrink: 0;
}
.skip-sheet-close:hover { background: var(--color-paper-dark); border-color: var(--color-ink-light); }
.skip-sheet-close:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.skip-sheet-close:active { transform: scale(0.9); }

.skip-sheet p {
  font-size: var(--text-base);
  color: var(--color-ink-light);
  margin-bottom: var(--space-5);
  line-height: 1.6;
}

.pay-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out);
  box-shadow: 2px 2px 0 var(--color-ink);
  text-decoration: none;
}
.pay-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--color-ink); }
.pay-btn:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.pay-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-ink); }
.pay-btn.venmo   { background: #3D95CE; color: white; }
.pay-btn.cashapp { background: #00C244; color: white; }
/* Cash is a physical, no-link option — present it inline with the digital
   buttons but as a static info row (no hover/active lift, since it's not
   clickable). The "I paid — flag me" action below covers all three methods. */
.pay-btn.cash {
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: default;
}
.pay-btn.cash:hover,
.pay-btn.cash:active {
  transform: none;
  box-shadow: 2px 2px 0 var(--color-ink);
}
.pay-btn .pay-icon { font-size: 1.5rem; flex-shrink: 0; }
.pay-btn .pay-text { flex: 1; }
.pay-btn .pay-handle { font-size: var(--text-sm); opacity: 0.85; }
.pay-btn .pay-label  { font-size: var(--text-md); }

/* Mark-as-paid action inside the sheet */
.btn-mark-paid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 56px;
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  color: white;
  background: var(--color-purple);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-mark-paid:hover { background: var(--color-purple-dark); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn-mark-paid:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.btn-mark-paid:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn-mark-paid:disabled { opacity: 0.6; cursor: default; }

.skip-footnote {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  text-align: center;
  margin-top: var(--space-4);
  line-height: 1.5;
}

/* ─── "Browse all songs" link (next to the song-title label) ─── */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.field-label-row label { margin-bottom: 0; }

.browse-songs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-denim);
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.browse-songs-link:hover { color: var(--color-denim-dark); }
.browse-songs-link:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.browse-songs-link:active { transform: scale(0.96); }

/* ─── Browse / search songs panel ─── */
.song-browse-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46,38,32,0.5);
  z-index: 250;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.song-browse-overlay.open {
  display: flex;
  animation: overlay-fade-in 200ms var(--ease-out) forwards;
}

.song-browse-panel {
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 560px;
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 0 var(--color-ink);
  animation: sheet-slide-up 300ms var(--ease-spring) forwards;
  overflow: hidden;
}

.song-browse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-3);
  flex-shrink: 0;
}
.song-browse-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.song-browse-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-paper-dark);
  background: var(--color-paper);
  font-size: var(--text-lg);
  color: var(--color-ink-light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.song-browse-close:hover { background: var(--color-paper-dark); border-color: var(--color-ink-light); }
.song-browse-close:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.song-browse-close:active { transform: scale(0.9); }

.song-browse-search {
  padding: 0 var(--space-5) var(--space-3);
  flex-shrink: 0;
}
.song-browse-search input {
  width: 100%;
  min-height: var(--touch-min);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.song-browse-search input::placeholder { color: var(--color-ink-faint); font-weight: var(--weight-regular); }
.song-browse-search input:focus { box-shadow: 0 0 0 3px var(--color-denim-light); }

.song-browse-controls {
  padding: 0 var(--space-5) var(--space-3);
  flex-shrink: 0;
}

/* By Song / By Artist toggle */
.browse-toggle {
  display: inline-flex;
  background: var(--color-paper-dark);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-bottom: var(--space-3);
}
.browse-toggle-btn {
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-light);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.browse-toggle-btn:hover { color: var(--color-ink); }
.browse-toggle-btn:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.browse-toggle-btn:active { transform: scale(0.96); }
.browse-toggle-btn.is-active {
  background: var(--color-denim);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* A–Z letter strip */
.browse-az-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.browse-az-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink-medium);
  background: var(--color-paper);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.browse-az-btn:hover { border-color: var(--color-ink-light); }
.browse-az-btn:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.browse-az-btn:active { transform: scale(0.92); }
.browse-az-btn.is-active {
  background: var(--color-denim);
  border-color: var(--color-ink);
  color: white;
}

/* Results list (shares the cream row look) */
.song-browse-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-5) var(--space-3);
}
.browse-result-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-min);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-paper);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.browse-result-row:hover { border-color: var(--color-denim); background: var(--color-denim-light); }
.browse-result-row:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.browse-result-row:active { transform: scale(0.99); background: var(--color-denim); }
.browse-result-row:active .browse-result-title,
.browse-result-row:active .browse-result-artist { color: white; }
.browse-result-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.browse-result-artist {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  margin-top: 1px;
}
.browse-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-ink-faint);
  font-size: var(--text-base);
  line-height: 1.5;
}

.browse-load-more {
  flex-shrink: 0;
  margin: 0 var(--space-5) var(--space-5);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out);
}
.browse-load-more:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.browse-load-more:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.browse-load-more:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }

/* ─── Personal status sticky card ─── */
.status-card {
  position: sticky;
  bottom: var(--space-4);
  z-index: 50;
  margin: var(--space-5) 0 0;
}
.status-inner {
  background: var(--color-denim);
  color: white;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: 3px 3px 0 var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.status-position {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  flex-shrink: 0;
}
.status-text { flex: 1; }
.status-text .you-are { font-size: var(--text-md); font-weight: var(--weight-heavy); }
.status-text .eta { font-size: var(--text-sm); opacity: 0.85; margin-top: 2px; }
/* status card variants when you're up / done */
.status-inner.singing { background: var(--color-coral); }
.status-inner.done    { background: var(--color-done); }

.status-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-3);
}

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-teal);
  flex-shrink: 0;
  animation: blink-live 1.4s ease-in-out infinite;
}

/* ─── Queue Section ─── */
.queue-section { margin-top: var(--space-8); }

.queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.queue-title {
  /* "Tonight's queue" — same Caveat "queue"→"queuve" misread risk as the host
     queue heading, and this is the signup page read in a loud room. UI font for
     legibility. */
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--color-ink);
}
.queue-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-light);
  background: var(--color-paper-dark);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

.queue-row {
  background: var(--color-paper-light);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  cursor: default;
}
.queue-row:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }

.queue-row.now-singing {
  background: var(--color-coral-light);
  border-color: var(--color-coral);
  box-shadow: 3px 3px 0 var(--color-coral);
}
.queue-row.now-singing:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-coral);
}
.queue-row.my-row { border-color: var(--color-denim); background: var(--color-denim-light); }
.queue-row.skip-pending { border-color: var(--color-purple); background: var(--color-purple-light); }

.row-position {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  color: var(--color-ink-faint);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.queue-row.now-singing .row-position { color: var(--color-coral); }

.row-info { flex: 1; min-width: 0; }
.row-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-row.now-singing .row-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-coral);
}
.row-song {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.row-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.row-eta {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.queue-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-ink-faint);
  font-size: var(--text-base);
}

/* ─── Footer ─── */
.page-footer {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  padding-bottom: var(--space-6);
}

/* ─── iPad adaptation ─── */
@media (min-width: 600px) {
  .logo-wrap img { width: 340px; }
  .signup-card { padding: var(--space-8); }
  .field input { min-height: var(--touch-ipad); font-size: var(--text-md); }
  .name-initial { flex: 0 0 5.5rem; }
  .key-btn { width: var(--touch-ipad); height: var(--touch-ipad); }
  .btn-primary { min-height: var(--touch-ipad); font-size: var(--text-lg); }
  .btn-skip { min-height: 52px; font-size: var(--text-md); }
  .btn-tip-host { min-height: var(--touch-min); font-size: var(--text-base); }

  /* Browse panel: generous walk-up targets, centered as a sheet-card */
  .song-browse-panel { height: 88vh; max-height: 88vh; border-radius: var(--radius-xl); }
  .song-browse-overlay { align-items: center; padding: var(--space-6); }
  .song-browse-search input { min-height: var(--touch-ipad); font-size: var(--text-md); }
  .browse-az-btn { width: var(--touch-ipad); height: var(--touch-ipad); }
  .browse-toggle-btn { min-height: var(--touch-min); font-size: var(--text-base); }
  .browse-result-row { min-height: var(--touch-ipad); }
  .browse-songs-link { font-size: var(--text-base); }

  .queue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: start;
  }
  .queue-row.now-singing { grid-column: 1 / -1; }

  /* Status card not sticky on iPad — shared device */
  .status-card { display: none; }
}

@media (min-width: 834px) {
  .page-signup .main { max-width: 760px; }
  .show-header { padding: var(--space-10) var(--space-8) var(--space-6); }
}


/* ════════════════════════════════════════════════════════════════════════
   HOST CONSOLE  (body.page-host)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Login gate ─── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.login-card {
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  width: 100%;
  max-width: 360px;
  box-shadow: 5px 5px 0 var(--color-ink);
  text-align: center;
}
.login-logo {
  width: 120px;
  height: auto;
  margin: 0 auto var(--space-3);
  display: block;
  filter: drop-shadow(0 2px 3px rgba(46,38,32,0.12));
}
.login-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}
.login-subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  margin-bottom: var(--space-6);
}
.login-field { margin-bottom: var(--space-4); text-align: left; }
.login-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-medium);
  margin-bottom: var(--space-2);
}
.login-field input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.login-field input:hover { border-color: var(--color-ink-light); }
.login-field input:focus { border-color: var(--color-denim); box-shadow: 0 0 0 3px var(--color-denim-light); }

.login-error {
  font-size: var(--text-sm);
  color: var(--color-coral);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
  text-align: left;
}

.btn-login {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  background: var(--color-denim);
  color: white;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-login:hover { background: var(--color-denim-dark); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn-login:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.btn-login:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn-login:disabled { opacity: 0.6; cursor: progress; }

/* ─── App chrome (post-login) ─── */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.top-bar {
  background: var(--color-ink);
  color: white;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-bar-logo {
  width: 44px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.top-bar-titles { flex: 1; min-width: 0; }
.top-bar-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.top-bar-subtitle {
  font-size: var(--text-xs);
  opacity: 0.6;
  font-weight: var(--weight-medium);
}
.topbar-live {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-teal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  animation: blink-live 1.4s ease-in-out infinite;
}

/* Sign-out text button in the top bar */
.btn-signout {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-signout:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); color: white; }
.btn-signout:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.btn-signout:active { transform: scale(0.96); }

.console-body {
  flex: 1;
  padding: var(--space-5);
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Panels ─── */
.panel {
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: 3px 3px 0 var(--color-ink);
}
.panel-title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  color: var(--color-ink-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.panel-title::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Show header editor */
.show-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.show-fields .field-full { grid-column: 1 / -1; }
/* Let each grid cell shrink below its content's intrinsic min-width so the
   native iOS date/time controls don't blow past the column edge. */
.show-field { min-width: 0; }
.show-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}
.show-field input {
  width: 100%;
  min-width: 0;            /* key fix: lets native date/time shrink inside the grid cell */
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-md);
  outline: none;
  box-sizing: border-box;
  /* iOS Safari renders type=date/time as a non-shrinking native control with its
     own chrome (the doubled/offset box) — strip the default appearance so it
     respects width/border/padding like the text inputs. */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
/* iOS centers date/time text in a fixed inner field by default; align it left and
   let the picker fill the control so it visually matches the text inputs. */
.show-field input[type="date"],
.show-field input[type="time"] {
  text-align: left;
}
.show-field input[type="date"]::-webkit-date-and-time-value,
.show-field input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}
.show-field input:focus { border-color: var(--color-denim); box-shadow: 0 0 0 3px var(--color-denim-light); }
.show-field input:hover { border-color: var(--color-ink-light); }

/* Save-show button */
.btn-save-show {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-save-show:hover { background: var(--color-paper-dark); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-save-show:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.btn-save-show:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }

/* Open/Closed toggle */
.signups-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-paper);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
/* CLOSED state turns coral-red */
.signups-toggle-row.closed {
  background: var(--color-coral-light);
  border-color: var(--color-coral);
}
.toggle-label-group { flex: 1; }
.toggle-label-group .toggle-label {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.toggle-label-group .toggle-sub {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  margin-top: 2px;
}
.signups-toggle-row.closed .toggle-sub { color: var(--color-coral-hover); font-weight: var(--weight-bold); }

.toggle-pill {
  position: relative;
  width: 64px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-ink);
  cursor: pointer;
  background: var(--color-coral);
  transition: background-color var(--duration-base) var(--ease-out);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.toggle-pill.open-state { background: var(--color-teal); }
.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid var(--color-ink);
  transition: transform var(--duration-base) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.toggle-pill.open-state .toggle-knob { transform: translateX(30px); }
.toggle-pill:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.toggle-pill:hover .toggle-knob { transform: scale(1.08); }
.toggle-pill.open-state:hover .toggle-knob { transform: translateX(30px) scale(1.08); }

.status-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.status-pill.open   { background: var(--color-teal-light);  color: var(--color-teal-dark); border: 1.5px solid var(--color-teal); }
.status-pill.closed { background: var(--color-coral-light); color: var(--color-coral-hover); border: 1.5px solid var(--color-coral); }

/* Utility buttons row */
.util-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.btn-util {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  box-shadow: 2px 2px 0 var(--color-ink);
}
.btn-util:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-util:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.btn-util:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn-util.qr { background: var(--color-denim); color: white; }
.btn-util.qr:hover { background: var(--color-denim-dark); }
.btn-util.new-show { background: var(--color-paper); color: var(--color-ink); }
.btn-util.new-show:hover { background: var(--color-paper-dark); }

/* No active show — create flow */
.no-show-card {
  text-align: center;
  padding: var(--space-6) var(--space-5);
}
.no-show-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.no-show-card p {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  margin-bottom: var(--space-5);
}
.btn-create-show {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  background: var(--color-coral);
  color: white;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-create-show:hover { background: var(--color-coral-hover); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn-create-show:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 3px; }
.btn-create-show:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--color-ink); }

/* ─── Pending skip panel ─── */
.pending-skip-panel {
  background: var(--color-purple-light);
  border: 2px solid var(--color-purple);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: 3px 3px 0 var(--color-purple);
}
.pending-skip-panel .panel-title { color: var(--color-purple); }
.pending-skip-panel .panel-title::before { background: var(--color-purple); }

.skip-request {
  background: white;
  border: 2px solid var(--color-purple);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.skip-request:last-child { margin-bottom: 0; }
.skip-request-info { flex: 1; min-width: 0; }
.skip-request-name { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-ink); }
.skip-request-song { font-size: var(--text-sm); color: var(--color-ink-light); margin-top: 2px; }
.skip-request-detail { font-size: var(--text-xs); color: var(--color-purple); font-weight: var(--weight-semibold); margin-top: var(--space-1); }

.btn-confirm-skip {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-purple);
  color: white;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-confirm-skip:hover { background: var(--color-purple-dark); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-confirm-skip:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.btn-confirm-skip:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }

/* ─── Queue panel ─── */
.queue-panel { margin-bottom: var(--space-5); }
.queue-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.queue-panel-title {
  /* UI font (Nunito), not the Caveat script — at small sizes the handwritten
     "Queue" misreads as "Queuve". This is a functional panel label, so legible
     beats decorative. */
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--color-ink);
  flex: 1;
}
.queue-panel-title .count {
  font-size: var(--text-base);
  color: var(--color-ink-light);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
}

.btn-add-singer {
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  background: var(--color-denim);
  color: white;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-add-singer:hover { background: var(--color-denim-dark); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-add-singer:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.btn-add-singer:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }

/* Call up next — the primary "start the queue" action. Coral = primary CTA,
   matching the "Start the show" button; only shown when the now-singing slot
   is empty and someone's waiting. */
.btn-call-next {
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  background: var(--color-coral);
  color: white;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-call-next:hover { background: var(--color-coral-hover); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-call-next:focus-visible { outline: 3px solid var(--color-coral); outline-offset: 2px; }
.btn-call-next:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn-call-next:disabled { opacity: 0.6; cursor: default; }

.host-queue { list-style: none; }

.host-queue-row {
  background: var(--color-paper-light);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.host-queue-row:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.host-queue-row.now-singing {
  background: var(--color-coral-light);
  border-color: var(--color-coral);
  box-shadow: 3px 3px 0 var(--color-coral);
}

/* Grab handle — drag-to-reorder (Pointer Events). Replaces the old up/down
   arrow column: one ergonomic handle keeps the 375px row uncluttered while
   making drag the primary reorder. Big touch target (≥44px, roomier on phones);
   keyboard users move the row with the arrow keys on the focused handle. */
.drag-handle {
  flex-shrink: 0;
  width: 40px;
  min-height: 56px;            /* ergonomic press-and-drag target on a phone */
  align-self: stretch;
  border: none;
  background: none;
  color: var(--color-ink-faint);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: grab;
  touch-action: none;          /* let Pointer Events own the gesture — no scroll-steal */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}
.drag-handle:hover { background: var(--color-denim-light); color: var(--color-denim-dark); }
.drag-handle:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.drag-handle:active { cursor: grabbing; transform: scale(0.92); }
.drag-handle.is-inert { opacity: 0.25; cursor: default; pointer-events: none; }
.host-queue-row.now-singing .drag-handle { visibility: hidden; }

/* The lifted row tracks the finger 1:1 (no transition lag on its own transform),
   sits above its neighbours, and reads as "picked up" via shadow only. */
.host-queue-row.is-dragging {
  transition: box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow-lg);
  border-color: var(--color-denim);
  cursor: grabbing;
}
.host-queue-row.is-dragging .drag-handle { cursor: grabbing; }
/* The dragged row must NOT animate its own translate — it follows the pointer. */
.host-queue-row.is-dragging,
.host-queue-row.is-dragging:hover { transition: box-shadow var(--duration-fast) var(--ease-out); }

/* While a reorder is in progress: other rows ease into the gap (transform only),
   and row :hover lift is suppressed so the list stays calm under the finger. */
body.is-reordering .host-queue-row:not(.is-dragging) {
  transition: transform var(--duration-base) var(--ease-out);
}
body.is-reordering .host-queue-row:hover { transform: none; }
body.is-reordering { cursor: grabbing; }

.host-row-pos {
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  color: var(--color-ink-faint);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.host-queue-row.now-singing .host-row-pos { color: var(--color-coral); }

.host-row-content { flex: 1; min-width: 0; }
.host-row-name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.host-queue-row.now-singing .host-row-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-coral);
}
.host-row-song {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.host-row-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.host-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.row-action-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.row-action-btn:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }

.btn-done-row {
  background: var(--color-teal);
  border-color: var(--color-ink);
  color: white;
  font-size: 1.2rem;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  box-shadow: 2px 2px 0 var(--color-ink);
}
.btn-done-row:hover { background: var(--color-teal-dark); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-done-row:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }

.btn-edit-row { color: var(--color-ink-light); }
.btn-edit-row:hover { background: var(--color-paper-dark); border-color: var(--color-ink-light); color: var(--color-ink); }
.btn-edit-row:active { transform: scale(0.9); }
.btn-edit-row.cancelling { color: var(--color-denim); }

.btn-delete-row { color: var(--color-ink-faint); }
.btn-delete-row:hover { background: #FFECEA; border-color: var(--color-coral); color: var(--color-coral); }
.btn-delete-row:active { transform: scale(0.9); }

/* Inline edit mode */
.host-queue-row.editing {
  border-color: var(--color-denim);
  background: var(--color-denim-light);
  flex-wrap: wrap;
}
.inline-edit-fields {
  display: none;
  width: 100%;
  margin-top: var(--space-3);
  gap: var(--space-2);
}
.editing .inline-edit-fields { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inline-field { flex: 1 1 120px; }
.inline-field.song { flex: 2 1 180px; }
.inline-field.key { flex: 0 0 80px; }
.inline-field input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: white;
  border: 1.5px solid var(--color-denim);
  border-radius: var(--radius-sm);
  outline: none;
  min-height: 44px;
}
.inline-field input:focus { box-shadow: 0 0 0 2px var(--color-denim-light); }
.inline-edit-save {
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-denim);
  color: white;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.inline-edit-save:hover { background: var(--color-denim-dark); }
.inline-edit-save:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }

.host-queue-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-ink-faint);
  font-size: var(--text-base);
}

/* ─── QR Modal ─── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46,38,32,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal-overlay.open { display: flex; }

.qr-modal {
  background: var(--color-paper-light);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: 6px 6px 0 var(--color-ink);
  text-align: center;
  max-width: 360px;
  width: 100%;
  animation: modal-pop 300ms var(--ease-spring) forwards;
}
@keyframes modal-pop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.qr-modal h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.qr-modal p {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  margin-bottom: var(--space-5);
}

/* QR canvas container — the qrcode lib draws into #qr-canvas */
.qr-canvas-wrap {
  width: 220px;
  height: 220px;
  background: white;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border: 2px solid var(--color-paper-dark);
}
.qr-canvas-wrap canvas, .qr-canvas-wrap img { display: block; max-width: 100%; height: auto; }

.qr-url {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  word-break: break-all;
  margin-bottom: var(--space-5);
  font-family: 'Courier New', monospace;
}
.qr-modal-btns { display: flex; gap: var(--space-3); }
.btn-qr-action {
  flex: 1;
  min-height: var(--touch-min);
  padding: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-ink);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-qr-action:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn-qr-action:focus-visible { outline: 3px solid var(--color-denim); outline-offset: 2px; }
.btn-qr-action:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn-qr-action.print { background: var(--color-denim); color: white; }
.btn-qr-action.close { background: var(--color-paper); color: var(--color-ink); }

.console-footer {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  border-top: 1px dashed var(--color-paper-dark);
  max-width: 600px;
  margin: 0 auto;
}

/* ─── Desktop: two-column layout ─── */
@media (min-width: 900px) {
  .console-body {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .left-col { position: sticky; top: 68px; }
  .queue-panel { margin-bottom: 0; }
}

/* Print: QR modal only (for the Print button) */
@media print {
  body.page-host * { visibility: hidden; }
  body.page-host .qr-modal, body.page-host .qr-modal * { visibility: visible; }
  body.page-host .qr-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none;
    border: none;
  }
  body.page-host .qr-modal-btns { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   DISPLAY  (body.page-display) — CREAM aesthetic, landscape TV, read-only.
   Rebuilt in the same warm palette as signup/host (the dark mockup was rejected).
   ════════════════════════════════════════════════════════════════════════ */
.page-display {
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100vh;
}

/* Soft warm radial accents behind everything (cream, not dark glow blobs) */
.page-display::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(214,83,59,0.10) 0%, transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(74,111,165,0.10) 0%, transparent 42%),
    radial-gradient(circle at 70% 12%, rgba(47,182,195,0.08) 0%, transparent 38%);
}

.display-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  height: calc(100vh - 96px);   /* minus footer */
}

/* ─── NOW SINGING — left ─── */
.now-singing-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  border-right: 2px solid var(--color-paper-dark);
  position: relative;
  overflow: hidden;
}
.now-singing-panel::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,83,59,0.10) 0%, transparent 62%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: panel-breathe 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes panel-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 0.7; }
}

.now-label {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}
.mic-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-coral);
  animation: blink-mic 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-mic {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.6); }
}

.now-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: 0.95;
  margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
  position: relative;
  z-index: 1;
}
.now-name-underline {
  display: block;
  height: 6px;
  width: 100%;
  max-width: 320px;
  background: var(--color-coral);
  border-radius: 3px;
  margin-top: 0.5rem;
  transform-origin: left;
  animation: underline-breathe 3s ease-in-out infinite;
}
@keyframes underline-breathe {
  0%, 100% { transform: scaleX(1);    opacity: 1; }
  50%      { transform: scaleX(0.92); opacity: 0.65; }
}

.now-song {
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 2.6vw, 2.4rem);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-bottom: clamp(0.3rem, 0.8vw, 0.75rem);
  position: relative;
  z-index: 1;
  line-height: 1.2;
}
.now-artist {
  font-size: clamp(1rem, 1.9vw, 1.7rem);
  font-weight: var(--weight-medium);
  color: var(--color-ink-light);
  position: relative;
  z-index: 1;
}
.now-key-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: clamp(0.75rem, 1.5vw, 1.5rem);
  background: var(--color-orange-light);
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-pill);
  padding: 0.35rem 1.1rem;
  font-size: clamp(0.8rem, 1.3vw, 1.2rem);
  font-weight: var(--weight-heavy);
  color: var(--color-orange);
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
  width: fit-content;
}
.now-empty {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--color-ink-light);
  position: relative;
  z-index: 1;
}

/* ─── UP NEXT — right ─── */
.up-next-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem);
  position: relative;
  z-index: 1;
}
.up-next-label {
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-light);
  margin-bottom: clamp(1rem, 2.5vw, 2.5rem);
}
.up-next-list {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.5vw, 1.4rem);
}
.up-next-item {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: clamp(0.75rem, 1.4vw, 1.4rem);
  background: var(--color-paper-light);
  border: 2px solid var(--color-paper-dark);
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: 2px 2px 0 var(--color-paper-dark);
}
.up-next-item.skip { border-color: var(--color-purple); background: var(--color-purple-light); }
.next-pos {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: var(--weight-bold);
  color: var(--color-ink-faint);
  width: clamp(2rem, 3.5vw, 3.2rem);
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.next-info { flex: 1; min-width: 0; }
.next-name {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 2.3vw, 2.1rem);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.next-song {
  font-size: clamp(0.8rem, 1.4vw, 1.25rem);
  color: var(--color-ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.2rem;
  font-weight: var(--weight-medium);
}
.next-key {
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  font-weight: var(--weight-heavy);
  color: var(--color-orange);
  background: var(--color-orange-light);
  border: 1.5px solid var(--color-orange);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.06em;
}
.next-skip {
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  font-weight: var(--weight-heavy);
  color: var(--color-purple);
  background: white;
  border: 1.5px solid var(--color-purple);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.up-next-empty {
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: var(--color-ink-faint);
  font-weight: var(--weight-medium);
}

/* ─── Display footer ─── */
.display-footer {
  position: relative;
  z-index: 1;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  border-top: 2px solid var(--color-paper-dark);
  background: var(--color-paper-light);
}
.footer-logo-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer-logo {
  width: 64px; height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(46,38,32,0.12));
}
.footer-show-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.footer-venue {
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  color: var(--color-ink-light);
  font-weight: var(--weight-medium);
}
.footer-center { text-align: center; }
.footer-queue-count {
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  color: var(--color-ink-light);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-align: right;
}
.footer-qr-hint {
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  color: var(--color-ink-light);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}
.footer-qr-hint strong { color: var(--color-denim); }
.footer-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}
.footer-live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-teal);
  animation: blink-mic 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Narrow / portrait fallback so a phone preview still reads */
@media (max-width: 760px) {
  .page-display { overflow-y: auto; height: auto; min-height: 100vh; }
  .display-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .now-singing-panel {
    border-right: none;
    border-bottom: 2px solid var(--color-paper-dark);
    padding: 2.5rem 1.5rem 2rem;
  }
  .up-next-panel { padding: 1.5rem 1.5rem 2rem; }
  .display-footer {
    flex-wrap: wrap;
    gap: 0.75rem;
    height: auto;
    padding: 1rem 1.5rem;
  }
  .footer-center, .footer-right { display: none; }
}
