/* theme.css — the colour layer.
 *
 * ONE design. The client compared three on a real iPhone, in the street, and chose
 * this one: "The Tool" — a night instrument. The screen is nearly black; every drop
 * of colour the palette allows is spent on saying which venue is playing right now.
 *
 * The two rejected variants (B, "Poster" — a full sunset ground with an inverted lit
 * headline; and C, A's cards on B's ground) are gone: their CSS, their assets and the
 * ?design= switch with them. There is nothing to select between any more, so nothing
 * here is scoped to a variant.
 *
 * core.css decides where things sit and how large they are. This file decides only
 * what colour they are.
 */

:root {
  --ink:        #120709;   /* page ground — wine-black, not neutral black */
  --panel:      #190C11;   /* card ground — a venue that has not started */
  --panel-live: #31131B;   /* card ground — the venue playing now, two steps up */
  --panel-done: #150A0E;   /* card ground — a venue that has finished, one step down */
  --line:       rgba(251, 236, 201, .10);
  --cream:      #FBECC9;   /* 15.6:1 on --panel */
  --cream-dim:  #C9B39A;   /*  9.6:1 on --panel */
  --cream-mute: #A79279;   /*  6.3:1 on --panel — the next-up line */
  --rose:       #FF5C79;   /* THE live accent. Spent nowhere else. */
  --amber:      #FFB850;   /* the quiet accent: the clock, the countdown, "soon" */
  --focus:      #FFB850;

  /* Paper grain — an inline SVG turbulence, about 300 bytes, no request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

body { background: var(--ink); color: var(--cream); }

/* One texture, used quietly: a warm bloom at the top of the screen so the page is
   not a flat rectangle of black, plus a whisper of paper grain. */
.deco--sky {
  display: block;
  background:
    radial-gradient(120% 62% at 50% -14%, rgba(255, 92, 121, .17), transparent 62%),
    radial-gradient(90% 48% at 50% 108%, rgba(255, 184, 80, .07), transparent 70%);
}
.deco--grain {
  display: block;
  background-image: var(--grain);
  opacity: .035;
  mix-blend-mode: screen;
}

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

.head__logo { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .6)); }
.head__day  { color: var(--cream-mute); }
.head__time { color: var(--amber); }

.simflag {
  background: rgba(255, 184, 80, .16);
  color: var(--amber);
  outline: 1px solid rgba(255, 184, 80, .5);
}

.notice {
  background: rgba(255, 184, 80, .14);
  border: 1px solid rgba(255, 184, 80, .45);
  color: var(--amber);
}

/* ---------------------------------------------------------------- cards */

/* THE THREE TIERS.
 *
 * Every card is the same shape and the same type size in every state — the only
 * thing that changes between them is colour. There are three, and they have to be
 * told apart at three metres in the dark, in this order of loudness:
 *
 *   PLAYING       rose. A 4 px edge bar that breathes, a glow around the card, a
 *                 pulsing dot, and the card ground two steps out of the black.
 *   NOT_STARTED   amber, held down. A 2 px edge bar at half strength — no glow, no
 *                 motion, no dot — and the card ground at its base level.
 *   FINISHED      nothing. No bar, no mark, the ground a step darker than base.
 *
 * The "soon" bar is a different hue from the live bar *and* half its width *and*
 * unlit *and* still. Four independent differences, so the ladder survives a cheap
 * screen, a low brightness setting and peripheral vision. It exists because a card
 * with no accent at all read as unfinished rather than as deliberate.
 */

.card {
  background: var(--panel);
  border: 1px solid rgba(251, 236, 201, .07);
}

.card__venue { color: var(--cream-dim); opacity: .82; }
.card__title { color: var(--cream); }
.card__guests { color: var(--cream-dim); }
.kids { color: var(--amber); }

/* The waiting line is typeset as a title — same size, same weight — because it
   occupies the title's slot. Colour is what tells you it is not a show name. */
.card__waiting { color: var(--cream-mute); }

/* -------- NOT_STARTED: the same signal, held down ----------------- */

.card[data-status="NOT_STARTED"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: rgba(255, 184, 80, .62);
}
.card[data-status="NOT_STARTED"] .card__waiting { color: var(--amber); opacity: .72; }

/* -------- PLAYING: the loudest thing on the page ------------------ */

.card[data-status="PLAYING"] {
  background: var(--panel-live);
  border-color: rgba(255, 92, 121, .34);
  box-shadow: 0 0 26px -10px rgba(255, 92, 121, .55);
}
.card[data-status="PLAYING"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--rose);
  box-shadow: 0 0 14px 1px rgba(255, 92, 121, .8);
  animation: breathe 2.1s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.live__dot  { background: var(--rose); box-shadow: 0 0 10px rgba(255, 92, 121, .95); }
.live__ring { background: rgba(255, 92, 121, .55); }

/* -------- FINISHED: the card stays, the signal stops -------------- */

.card[data-status="FINISHED"] { background: var(--panel-done); }
.card[data-status="FINISHED"] .card__venue { opacity: .58; }
.card[data-status="FINISHED"] .card__waiting { color: var(--cream-mute); opacity: .78; }

/* -------- next up: demoted, never decorated ----------------------- */

.next {
  border-top: 1px solid var(--line);
  color: var(--cream-mute);
}
.next__label { color: var(--cream-mute); opacity: .7; }
.next__title { color: var(--cream-mute); }
.next .kids { color: var(--cream-mute); }

/* ------------------------------------------------- message states */

.message__1 { color: var(--cream); }
.message__2 { color: var(--cream-dim); }
.count__cell { background: var(--panel); border: 1px solid var(--line); }
.count__n { color: var(--amber); }
.count__l { color: var(--cream-mute); }

/* ---------------------------------------------------------------- chrome */

.btn {
  background: rgba(251, 236, 201, .07);
  border: 1px solid rgba(251, 236, 201, .28);
  color: var(--cream);
}
.btn:active { background: rgba(251, 236, 201, .15); }
.fail__title { color: var(--cream); }
.fail__body  { color: var(--cream-dim); }
.skip { background: var(--amber); color: var(--ink); font-weight: 700; }
.map { background: var(--ink); }
.map__hint { color: var(--cream-mute); }
.map__btn--close { background: var(--amber); color: var(--ink); }
.map__loading { color: var(--cream-dim); }

/* With motion off, the edge bar stops breathing and stays at full strength. The
   distinction between the three tiers is colour and geometry, never movement. */
@media (prefers-reduced-motion: reduce) {
  .card[data-status="PLAYING"]::before { animation: none; opacity: 1; }
}