/* =============================================================================
   SoundPour customer player
   Brief: claude_code_brief_customer_player.md section 10

   Matches the main site's palette and type. Deliberately not sharing
   css/styles.css: the public site and the customer player serve different
   audiences and will diverge. Brief section 8.2.

   Fonts are imported the same way the main site does. If the venue is
   offline the request fails, display=swap means text renders immediately in
   the fallback, and nothing blocks. The page must never wait on a font.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Geist:wght@300..700&display=swap');

:root {
  --paper:        #ECE3CF;
  --paper-deep:   #E1D5BB;
  --paper-soft:   #F2EBD8;
  --ink:          #2C1A1A;
  --ink-soft:     #5C4A3D;
  --ink-faint:    #8A6F50;
  --rule:         #B8A989;
  --rule-soft:    #D2C4A4;
  --terracotta:   #B85C38;
  --terracotta-deep: #9A4A2C;
  --moss:         #5A6B47;
  --cream:        #FFFDF7;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Stop a mis-tap selecting text on a device someone is prodding all day */
.screen { user-select: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }

button { font-family: inherit; cursor: pointer; }

.screen {
  display: none;
  min-height: 100%;
  flex-direction: column;
}
.screen.active { display: flex; }

.wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px);
}

/* ---------- Wordmark ---------- */

.wordmark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
  text-align: center;
  padding: 22px 0 0;
}

/* ---------- Setup ---------- */

.setup-head { text-align: center; margin-bottom: 34px; }
.setup-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; }
.setup-head p {
  color: var(--ink-soft);
  margin: 12px auto 0;
  max-width: 46ch;
  line-height: 1.6;
}

.q { margin-bottom: 30px; }

.q > label,
.q > .q-label {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  margin-bottom: 12px;
}

.q-note {
  display: block;
  font-size: .85rem;
  color: var(--ink-faint);
  margin: -6px 0 12px;
  line-height: 1.5;
}

/* Contextual help. Tap toggles it, because this is a tablet product and a
   touch screen has no hover. Hover is added on pointer devices only, so a
   tap on a phone does not also fire a phantom hover and fight the toggle.
   The panel reveals inline rather than floating: a popover over a form on a
   narrow screen gets clipped or mispositioned, and there is nothing to gain
   from it here. */
.help {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
  color: var(--ink-faint);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: .76rem;
  font-family: var(--sans);
  line-height: 1;
  padding: 0;
  margin-left: 9px;
  vertical-align: 2px;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.help:hover,
.help[aria-expanded="true"] {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

.help-text {
  display: none;
  margin: 0 0 14px;
  padding: 13px 16px;
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 9px 9px 0;
  font-size: .89rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 60ch;
}
.q:has(.help[aria-expanded="true"]) > .help-text { display: block; }

@media (hover: hover) and (pointer: fine) {
  .q:has(.help:hover) > .help-text { display: block; }
}

input[type="text"],
input[type="time"] {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--cream);
  color: var(--ink);
  width: 100%;
  max-width: 340px;
}
input[type="time"] { max-width: 150px; }
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.hours-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hours-row span { color: var(--ink-soft); font-size: .95rem; }
.hours-label {
  min-width: 92px;
  font-size: .95rem;
  color: var(--ink-soft);
}

/* Option chips. Big enough to hit with a thumb. */
.opts { display: flex; flex-wrap: wrap; gap: 10px; }

.opt {
  border: 1px solid var(--rule);
  background: var(--paper-soft);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: .97rem;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.opt:hover { background: var(--cream); }
.opt[aria-pressed="true"],
.opt.on {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: .95rem;
  cursor: pointer;
}

.primary {
  background: var(--terracotta);
  color: var(--cream);
  border: none;
  border-radius: 11px;
  padding: 17px 34px;
  font-size: 1.06rem;
  letter-spacing: .01em;
  transition: background .16s var(--ease);
}
.primary:hover { background: var(--terracotta-deep); }
.primary:disabled { opacity: .45; cursor: default; }

.setup-foot {
  margin-top: 8px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.linkish {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 2px;
}
.linkish:hover { color: var(--terracotta); }

/* ---------- Priming ---------- */

.priming { text-align: center; margin: auto 0; }
.priming h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 10px; }
.priming p { color: var(--ink-soft); margin: 0 0 26px; }

.bar {
  height: 6px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto 26px;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--terracotta);
  border-radius: 999px;
  transition: width .35s var(--ease);
}

/* The list of titles landing as they cache. Setup only, never on the
   playing screen. Brief 5.2 and 6.2. */
.landing {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  font-size: .93rem;
  color: var(--ink-faint);
  line-height: 1.85;
  max-height: 190px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.landing div { animation: rise .4s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }

.storage-note {
  max-width: 440px;
  margin: 22px auto 0;
  padding: 14px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.6;
}

/* ---------- Playing ---------- */

#screen-play { justify-content: space-between; }

.venue-strip {
  text-align: center;
  padding: 22px 20px 0;
}
.brand {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--terracotta);
}
.brand-sub {
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: 3px;
  letter-spacing: .01em;
}

.now {
  text-align: center;
  padding: clamp(18px, 5vh, 54px) 24px;
  margin: auto 0;
}
.now h1 {
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  line-height: 1.1;
  margin-bottom: 12px;
  overflow-wrap: break-word;
}
.now .coll {
  color: var(--ink-faint);
  font-size: clamp(.95rem, 2.2vw, 1.1rem);
  letter-spacing: .01em;
}

/* The visualiser. Sized in CSS, backed at device pixel ratio in JS. */
.viz {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 84px;
  margin: 26px auto 0;
}
#screen-play.paused .viz { opacity: .3; transition: opacity .6s var(--ease); }

.progress {
  height: 4px;
  background: var(--paper-deep);
  border-radius: 999px;
  max-width: 520px;
  margin: 30px auto 0;
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--terracotta);
}

/* Four primary controls. Words, not icons. */
.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 24px);
  width: 100%;
}

.ctl {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 13px;
  color: var(--ink);
  padding: clamp(18px, 3.4vh, 30px) 8px;
  font-size: clamp(.95rem, 2.1vw, 1.12rem);
  font-family: var(--serif);
  transition: background .16s var(--ease), transform .1s var(--ease);
}
.ctl:hover { background: var(--cream); }
.ctl:active { transform: scale(.97); }

/* At either end of the calm to busy range the button stops working, so it
   has to stop looking like it works. */
.ctl:disabled {
  opacity: .34;
  cursor: default;
  background: var(--paper-soft);
}
.ctl:disabled:active { transform: none; }

/* The calm to busy scale. Seven positions, centre is neutral. Segments fill
   outward from the middle towards whichever end you have pushed it to, so
   the two buttons visibly drive one axis between them. */
.scale {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 0;
}
.scale i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--paper-deep);
  transition: background .18s var(--ease);
}
.scale i.mid { background: var(--rule-soft); }
.scale i.on  { background: var(--terracotta); }
.ctl.lit {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}
.ctl small {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  opacity: .8;
  margin-top: 5px;
  letter-spacing: .02em;
}

/* Something different. Deliberately secondary: pressed once or twice a day,
   not several times a service. Brief 6.2. */
.secondary-row {
  display: flex;
  justify-content: center;
  padding: 14px 20px 0;
}
.ctl-2 {
  background: none;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  color: var(--ink-soft);
  padding: 10px 22px;
  font-size: .92rem;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.ctl-2:hover { border-color: var(--terracotta); color: var(--terracotta); }
.ctl-2.lit { border-color: var(--terracotta); color: var(--terracotta); }

.foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 22px clamp(14px, 3vw, 24px) 26px;
  color: var(--ink-faint);
  font-size: .85rem;
}

/* Pause. Present enough to find at closing time, quiet enough that nobody
   reaches for it instead of Skip. */
.ctl-pause { min-width: 96px; padding: 11px 20px; }
.ctl-pause.lit {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

/* Paused is a state the room can see at a glance, not a hidden toggle. */
#screen-play.paused .now h1,
#screen-play.paused .now .coll { opacity: .42; }
#screen-play.paused .progress > i { background: var(--rule); }

.vol { display: flex; align-items: center; gap: 10px; min-width: 190px; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--paper-deep);
  flex: 1;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 3px solid var(--paper);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--terracotta);
  cursor: pointer;
}

/* Queue, closed by default. A visible track list on the counter is an
   invitation for staff to fiddle with it. Brief 6.2. */
#queue-panel {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px 18px;
  width: 100%;
}
#queue-panel ol {
  margin: 0; padding: 0; list-style: none;
  font-size: .92rem; color: var(--ink-soft); line-height: 2;
}
#queue-panel li { display: flex; justify-content: space-between; gap: 14px; }
#queue-panel span { color: var(--ink-faint); flex: none; }

/* ---------- Gate and lease ---------- */

.centred {
  margin: auto;
  text-align: center;
  padding: 40px 24px;
  max-width: 560px;
}
.centred h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); margin-bottom: 14px; }
.centred p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 28px; }
.centred a { color: var(--terracotta); }

/* Only ever shown when playback was actually blocked, so it can be read off
   the device rather than described down the phone. */
.gate-note {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-faint);
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 auto 20px;
  max-width: 460px;
  word-break: break-word;
}

.gate-btn {
  background: var(--terracotta);
  color: var(--cream);
  border: none;
  border-radius: 15px;
  padding: clamp(26px, 5vh, 40px) clamp(34px, 8vw, 76px);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.6vw, 1.8rem);
  width: 100%;
  max-width: 460px;
  transition: background .16s var(--ease);
}
.gate-btn:hover { background: var(--terracotta-deep); }

/* ---------- Feedback ---------- */

.fb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 8000;
}
.fb-overlay[hidden] { display: none; }

.fb-panel {
  position: relative;
  background: var(--paper);
  border-radius: 12px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px clamp(22px, 4vw, 34px) 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.fb-panel h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 8px; }
.fb-sub { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0 0 20px; }

.fb-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 26px; line-height: 1;
  color: var(--ink-faint);
  padding: 4px 8px;
}
.fb-close:hover { color: var(--terracotta); }

.fb-stars { display: flex; gap: 6px; margin-bottom: 18px; }
.fb-star {
  background: none; border: none; padding: 2px;
  font-size: 34px; line-height: 1;
  color: var(--rule);
  transition: color .12s var(--ease), transform .1s var(--ease);
}
.fb-star:hover { transform: scale(1.1); }
.fb-star.on { color: var(--terracotta); }

.fb-panel textarea,
.fb-panel input[type="email"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 14px;
  resize: vertical;
}
.fb-panel textarea:focus,
.fb-panel input[type="email"]:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
  border-color: var(--terracotta);
}

/* Honeypot: off-screen, real people never see or fill it. */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fb-send {
  width: 100%;
  background: var(--terracotta);
  color: var(--cream);
  border: none;
  border-radius: 10px;
  padding: 15px;
  font-family: var(--serif);
  font-size: 1.05rem;
  transition: background .16s var(--ease);
}
.fb-send:hover { background: var(--terracotta-deep); }
.fb-send:disabled { opacity: .5; cursor: default; }

.fb-error {
  color: var(--terracotta-deep);
  font-size: .88rem;
  margin: 12px 0 0;
  text-align: center;
}
.fb-error[hidden] { display: none; }
#fb-thanks[hidden], #fb-form-wrap[hidden] { display: none; }
#fb-thanks { text-align: center; }
#fb-thanks .fb-send { margin-top: 20px; }

/* ---------- Dev panel ---------- */
/* Not shipped to customers. Only rendered when ?dev=1 is on the URL. */

#dev {
  position: fixed;
  top: 0; right: 0;
  width: min(430px, 100vw);
  height: 100vh;
  overflow-y: auto;
  background: #16120F;
  color: #D9CDB8;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 14px 16px 60px;
  z-index: 9999;
  border-left: 2px solid var(--terracotta);
  display: none;
}
#dev.open { display: block; }
#dev h4 {
  font: 600 11px/1.4 ui-monospace, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 20px 0 7px;
  border-bottom: 1px solid #38302A;
  padding-bottom: 5px;
}
#dev h4:first-child { margin-top: 0; }
#dev table { width: 100%; border-collapse: collapse; }
#dev td { padding: 1px 0; vertical-align: top; }
#dev td:first-child { color: #8D8071; padding-right: 10px; white-space: nowrap; }
#dev td:last-child { text-align: right; }
#dev .num { color: #E8B98F; }
#dev .good { color: #9FBF7F; }
#dev .warn { color: #E08A5E; }
#dev button {
  background: #2A231D;
  color: #D9CDB8;
  border: 1px solid #453A31;
  border-radius: 6px;
  padding: 7px 11px;
  font: 11px ui-monospace, monospace;
  margin: 0 5px 5px 0;
}
#dev button:hover { background: #3A312A; border-color: var(--terracotta); }
#dev pre {
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.55;
  max-height: 340px;
  overflow-y: auto;
}
#dev-toggle {
  position: fixed;
  top: 10px; right: 10px;
  z-index: 10000;
  background: #16120F;
  color: var(--terracotta);
  border: 1px solid var(--terracotta);
  border-radius: 7px;
  padding: 7px 12px;
  font: 11px ui-monospace, monospace;
  display: none;
}
#dev-toggle.on { display: block; }
body.dev-open #dev-toggle { right: min(440px, 100vw); }

/* ---------- Narrow screens ---------- */

@media (max-width: 620px) {
  .controls { grid-template-columns: repeat(2, 1fr); }
  .now { padding-top: 10px; padding-bottom: 10px; }
  #dev { width: 100vw; }
  body.dev-open #dev-toggle { right: 10px; top: auto; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* A constantly moving graphic is exactly what this preference is asking
     not to see, so it goes entirely rather than being slowed down. */
  .viz { display: none; }
}

@media (max-height: 560px) {
  .viz { height: 52px; margin-top: 16px; }
}