/* Lowertown product palette, dark roles (social-poster-generator/Resources/Brand/product-palette.css):
   hue lives in the ground, the voice on top is off-white or Noir. One filled terracotta per view —
   Play/pause on the board, "Got it" inside the alert. Marine tints mark state (now playing). */
:root {
  --bg: #0B0B0C; --pane: #1C1B19; --pane-2: #2E2C29; --line: #2E2C29;
  --ink: #F3F1EA; --ink-dim: #B8B3A7; --ink-faint: #8E8A80;
  --primary: #E1735C; --primary-ink: #0B0B0C;             /* terracotta-3 on Noir, 6.4:1 */
  --selected: #0A465D; --selected-ink: #BED4DC;           /* marine-1 / marine-5, 6.7:1 */
  --now: #076C2D; --now-ink: #C4E5D1;                     /* verdant-1 / verdant-5 */
  --ok: #77C795; --late: #FFAA99; --focus: #3D778D;       /* verdant-4, terracotta-4, marine-3 */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tap: max(48px, 3.5rem);
}
/* One scale for the whole board: 16px at the 1180-wide safe area the spec was drawn for, ~14px on a
   4:3 iPad (1024/1080 wide), never below 13px. Everything below is in rem so the page shrinks as one. */
html { font-size: clamp(13px, 1.356vw, 17px); }
* { box-sizing: border-box; }
/* The overlay and sheet set display:grid/flex below — without this the `hidden` attribute would lose. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Two panes: the music surface (two columns inside, transport across both) and Today. */
.board { height: 100vh; height: 100dvh; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid; gap: 0.875rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.pane { background: var(--pane); border-radius: 1.125rem; padding: 1.25rem 1.375rem; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.pane h2, .mix-label { flex: none; margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-label .hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.empty { color: var(--ink-faint); font-size: 1.125rem; padding: 0.5rem 0; }

/* Date + clock head the Today pane (they are the day's, not the music's). */
.hdr { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.875rem; }

/* Music surface */
.hdr b { font-size: 1.375rem; font-weight: 700; }
.clock { font-size: 1.25rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.music-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Art + title on the left, slot chips + song list on the right; the top row is the only thing that
   gives way when the pane runs short — the transport never collapses. */
.mtop { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.mleft, .mright { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.art { width: 100%; max-width: 17rem; aspect-ratio: 1; flex: none; object-fit: cover; border-radius: 0.875rem; background: var(--pane-2); }
.art-empty { background: linear-gradient(135deg, #2E2C29, #1C1B19); }
.music-title { flex: none; font-size: 1.875rem; font-weight: 700; line-height: 1.15; margin-top: 1rem; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.music-sub { flex: none; font-size: 1.25rem; color: var(--ink-dim); margin-top: 0.25rem; }
.music-from { flex: none; font-size: 1.0625rem; color: var(--ink-faint); margin-top: 0.375rem; line-height: 1.3; }
.music-from b { color: var(--ink-dim); font-weight: 600; }
/* Slot chips: a wrapping row, the one feeding the current track lit. */
.slot { flex: none; margin-bottom: 1.125rem; }
/* The label may wrap: its hint ("no need to queue these") is the point of the row. */
.slot .mix-label { white-space: normal; line-height: 1.3; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-size: 1rem; line-height: 1.2; padding: 0.4375rem 0.75rem; border-radius: 2rem; background: var(--pane-2); color: var(--ink-dim); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.on { background: var(--selected); color: var(--selected-ink); font-weight: 700; }
.chip.on::before { content: '▶ '; font-size: .75em; }
/* The song list takes what's left of the column; rows never shrink, the list clips. */
.songs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: none; }
.queue-list li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 1.25rem; line-height: 1.2; min-width: 0; padding: 0.375rem 0; border-top: 1px solid var(--line); }
.queue-list li:first-child { border-top: 0; }
.queue-list .q-i { color: var(--ink-faint); flex: none; width: 1.25em; font-variant-numeric: tabular-nums; font-size: 0.875em; }
.queue-list .q-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-list .q-artist { color: var(--ink-faint); font-size: 0.875em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 45%; margin-left: auto; }
.queue-more { flex: none; margin-top: 0.375rem; font-size: 0.875rem; color: var(--ink-faint); }
/* Idle side block (schedule gap): the next slot's time range as the lit tag, its playlists under it. */
.mix { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.tags { display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; }
.tag { font-size: 1.125rem; line-height: 1.2; padding: 0.6875rem 1rem; border-radius: 0.75rem; background: var(--pane-2); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag.on { background: var(--selected); color: var(--selected-ink); font-weight: 700; }
.tag.when { white-space: normal; }
.actions { flex: none; display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.875rem; }
.ghost { min-height: var(--tap); padding: 0 1.5rem; border-radius: 1.75rem; border: 1.5px solid var(--ink-faint); color: var(--ink-dim); font-size: 1.25rem; }
.ghost:active { background: var(--pane-2); }
/* Song limit reached: dashed and dimmed, and `disabled` so a tap does nothing. */
.ghost.limited { border-style: dashed; opacity: 0.45; }
.ghost.limited:active { background: none; }
.music-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.75rem; }
/* Transport: Play/pause disc + the Next pill, across the full pane width. */
.ctl { --big: 7rem; --play: 9.125rem; flex: none; display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.125rem; }
.btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--pane-2); display: grid; place-items: center; color: var(--ink); }
.btn.big { width: var(--play); height: var(--play); background: var(--primary); color: var(--primary-ink); }
.ico { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.btn.big .ico { width: 4.5rem; height: 4.5rem; }
.btn:active { transform: scale(.94); }
.btn.next-up { flex: 1; min-width: 0; width: auto; height: var(--big); display: flex; align-items: center; gap: 0.875rem; padding: 0 1.125rem 0 0;
  border-radius: 0.875rem; background: var(--pane-2); border: 3px solid var(--ink-dim); overflow: hidden; text-align: left; position: relative; }
.btn.next-up .ico { width: 2.75rem; height: 2.75rem; flex: none; margin-left: auto; }
.btn.next-up > * { position: relative; z-index: 1; }
/* Song progress: a marine tint sweeps left→right behind the pill as the current song plays
   (--p is 0–1, set by board.js once a second from data-started/data-duration). */
.btn.next-up[data-started]::before { content: ''; position: absolute; inset: 0; background: var(--selected); transform-origin: left center;
  transform: scaleX(var(--p, 0)); transition: transform 1s linear; z-index: 0; }
.btn.next-up.snap::before { transition: none; }
.next-art { width: calc(var(--big) - 0.375rem); height: calc(var(--big) - 0.375rem); flex: none; border-radius: 0.625rem 0 0 0.625rem; object-fit: cover; background: var(--pane); }
.next-text { min-width: 0; display: flex; flex-direction: column; }
.next-label { font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.next-name { font-size: 1.375rem; font-weight: 600; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-artist { font-size: 1.0625rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-foot { display: flex; align-items: center; margin-top: 0.625rem; min-height: 1.4em; }
.status { font-size: 0.875rem; color: var(--ink-faint); }

/* Today: one scrolling list — events, shift changes as notes, a Now rule, Tomorrow at the end.
   Everything today comes before anything tomorrow; when the list is short Tomorrow sits at the
   bottom, when it is long it scrolls with the rest. */
#today { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; }
.onnow { flex: none; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin-bottom: 0.75rem; }
.onnow .mix-label { margin: 0 0.25rem 0 0; }
.onnow .chip { font-size: 1.0625rem; color: var(--ink); }
.onnow .chip::before { content: ''; display: inline-block; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--ok); margin-right: 0.5rem; }
.tl { flex: none; display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 0.875rem; padding: 0.75rem 0; border-top: 1px solid var(--line); align-items: flex-start; }
.tl-row:first-child, .tl-now + .tl-row { border-top: 0; }
.tl-row.past { opacity: .45; }
/* Time and poster share the narrow left column so titles line up whatever the row holds. */
.tl-t { flex: none; width: 4.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tl-time { font-size: 1.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.01em; }
.tl-img { width: 4.75rem; height: 4.75rem; border-radius: 0.5rem; object-fit: cover; background: var(--pane-2); }
.tl-c { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.ev-title { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.ev-now { font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }
/* The managers' note: two lines, then …; the tap-through sheet has all of it. */
.ev-notes { font-size: 1.125rem; font-weight: 500; color: var(--ink-dim); line-height: 1.3; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-more { margin-left: auto; flex: none; font-size: 1.75rem; color: var(--ink-faint); padding-left: 0.5rem; align-self: center; }
.tl-row.has-more { cursor: pointer; }
.tl-row.has-more:active { background: var(--pane-2); border-radius: 0.75rem; }
/* The live event keeps its geometry — colour only, nothing around it moves. */
.tl-row.now .tl-time, .tl-row.now .ev-title { color: var(--ok); }
/* Shift changes: a note between the events, half an event row tall. */
.tl-row.staff { padding: 0.4375rem 0; align-items: baseline; }
.tl-row.staff .tl-time { font-size: 0.9375rem; font-weight: 600; color: var(--ink-faint); }
.tl-row.staff .tl-c { display: block; font-size: 1rem; line-height: 1.25; color: var(--ink-dim); }
.tl-row.staff b { font-weight: 600; color: var(--ink); }
.tl-row.staff .in { color: var(--ok); } .tl-row.staff .out, .tl-row.staff .dot, .tl-row.staff .until { color: var(--ink-faint); }
.tl-row.staff.late .tl-time, .tl-row.staff.late .in { color: var(--late); }
.tl-now { flex: none; display: flex; align-items: center; gap: 0.5rem; color: var(--primary); font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 0.25rem 0; }
.tl-now::after { content: ''; flex: 1; height: 2px; background: var(--primary); opacity: .6; }
.tl-tomorrow { flex: none; margin-top: auto; padding-top: 1rem; opacity: .8; }
.tl-tomorrow .mix-label + .tl-row { border-top: 0; }

/* Alert modal — blocks everything until acknowledged */
.overlay { position: fixed; inset: 0; background: rgba(11,11,12,.82); display: grid; place-items: center; padding: 1.5rem; z-index: 50; }
.alert-card { width: min(62.5rem, 100%); max-height: 100%; overflow-y: auto; background: var(--pane); border: 2px solid var(--primary); border-radius: 1.5rem; padding: 2.25rem 2.5rem; box-shadow: 0 30px 80px rgba(11,11,12,.6); }
.alert-card.has-img { display: grid; grid-template-columns: minmax(0, 36%) 1fr; column-gap: 2rem; align-items: start; width: min(70rem, 100%); }
.alert-img { width: auto; max-width: 100%; height: auto; max-height: 56vh; border-radius: 1rem; justify-self: start; grid-row: 1; }
.alert-card.has-img .alert-actions, .alert-card.has-img .alert-hint { grid-column: 1 / -1; }
.alert-kicker { font-size: 1.125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.alert-text { font-size: 3rem; font-weight: 700; line-height: 1.15; margin-top: 0.625rem; text-wrap: balance; }
.alert-note { font-size: 2rem; font-weight: 600; line-height: 1.3; margin-top: 1rem; white-space: pre-wrap; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }
.alert-hint { font-size: 1.125rem; color: var(--ink-faint); margin-top: 0.75rem; }
.chip-btn, .alert-actions .chip { min-height: 4rem; padding: 0 1.75rem; border-radius: 2rem; background: var(--pane-2); font-size: 1.5rem; font-weight: 600; color: var(--ink); white-space: normal; }
.alert-actions .chip.primary { background: var(--primary); color: var(--primary-ink); }
.alert-actions .chip:active { transform: scale(.96); }

/* Event detail sheet — read from across the bar: poster at its real ratio, time and the
   managers' notes are the big text, the marketing blurb is clamped to a few lines. */
.evd { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: 2rem; padding-top: 1.25rem; }
.evd.no-img { grid-template-columns: 1fr; }
.evd-img { width: auto; max-width: 100%; height: auto; max-height: 62vh; border-radius: 1rem; justify-self: start; }
.evd-body { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 1.625rem; line-height: 1.35; }
.evd-title { font-size: 2.75rem; font-weight: 700; line-height: 1.1; text-wrap: balance; }
.evd-time { font-size: 1.875rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.evd-time.now { color: var(--now-ink); }
.evd-label.about { margin-top: auto; }
.evd-label { font-size: 1.0625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-top: 1rem; }
.evd-notes { font-size: 2.375rem; font-weight: 700; line-height: 1.25; white-space: pre-wrap; }
.evd-desc { font-size: 1.5rem; color: var(--ink-dim); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* Change-music sheet */
.sheet-scrim { position: fixed; inset: 0; background: rgba(11,11,12,.55); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; background: var(--pane); border-radius: 1.5rem 1.5rem 0 0; z-index: 40;
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); transform: translateY(0); }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.75rem; border-bottom: 1px solid var(--line); font-size: 1.5rem; }
.sheet.event { cursor: pointer; }
.sheet.event:active { background: var(--pane-2); }
.sheet-body { overflow-y: auto; padding: 0.5rem 1.75rem 1.75rem; -webkit-overflow-scrolling: touch; }
.src-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.src-option { min-height: var(--tap); padding: 0 1.25rem; border-radius: 1.75rem; background: var(--pane-2); font-size: 1.125rem; display: inline-flex; align-items: center; gap: 0.5rem; }
/* The slot's own playlists are outlined (a tap pulls one song up next); the one playing is lit. */
.src-option.slot { background: none; border: 1.5px solid var(--selected); color: var(--ink-dim); }
.src-option.current { background: var(--selected); color: var(--selected-ink); font-weight: 700; }
.src-badge { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 1rem; background: var(--selected); color: var(--selected-ink); }
.src-option.current .src-badge { background: var(--selected-ink); color: var(--selected); }
.src-option:active { transform: scale(.96); }
.src-hint { margin-top: 0.875rem; font-size: 0.9375rem; color: var(--ink-faint); }
.busy { opacity: .5; pointer-events: none; }

/* Search box + results (Change-music sheet) */
.sheet-search { padding: 0.875rem 1.75rem 0.375rem; }
#search-q { width: 100%; box-sizing: border-box; min-height: var(--tap); padding: 0 1.25rem; border-radius: 0.875rem; border: 1.5px solid var(--ink-faint);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1.375rem; -webkit-appearance: none; appearance: none; }
#search-q:focus { outline: none; border-color: var(--selected-ink); }
#search-q::placeholder { color: var(--ink-faint); }
.results { display: flex; flex-direction: column; gap: 1.125rem; padding-top: 0.375rem; }
.res-group { display: flex; flex-direction: column; gap: 0.5rem; }
.res-group .mix-label { margin-bottom: 0; }
.res { display: flex; align-items: center; gap: 0.875rem; width: 100%; min-height: 4rem; padding: 0.375rem 0.5rem 0.375rem 0.375rem; border-radius: 0.875rem; background: var(--pane-2); text-align: left; color: var(--ink); }
.res:active { transform: scale(.985); }
.res-art { width: 3.25rem; height: 3.25rem; flex: none; border-radius: 0.625rem; object-fit: cover; background: var(--pane); }
.res-playlist .res-art.art-empty, .res-artist .res-art.art-empty { border-radius: 50%; }
.res-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.res-name { font-size: 1.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-sub { font-size: 0.9375rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-action { flex: none; font-size: 0.9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--selected-ink);
  padding: 0.5rem 0.875rem; border-radius: 1.25rem; border: 1.5px solid var(--selected); }
.res-track .res-action { color: var(--ink-dim); border-color: var(--ink-faint); }
.res.added { background: var(--selected); color: var(--selected-ink); }
.res.added .res-sub { color: var(--selected-ink); opacity: .8; }
.res.added .res-action { color: var(--selected-ink); border-color: var(--selected-ink); }
.res.failed .res-action { color: var(--ink); border-color: var(--ink-faint); }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise .22s ease-out; }
  .alert-card { animation: pop .18s ease-out; }
  @keyframes rise { from { transform: translateY(1.5rem); opacity: 0; } }
  @keyframes pop { from { transform: scale(.96); opacity: 0; } }
}
@media (orientation: portrait) {
  .board { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mtop { flex: none; }
  .art { max-width: 11rem; }
}