/* ==========================================================================
   BTP Aggregator — app styles
   Built only on brand/tokens.css. Dark surface by default. Hard rules:
   no pure white or black, no gradients/shadows/glows, coral leads the card
   headers, denim carries the show band, gold flags an editor's pick and
   nothing else (no gold appears here yet).
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--btp-bg);
  color: var(--btp-paper);
  font-family: var(--btp-font-text);
  font-weight: var(--btp-weight-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Page shell -------------------------------------------------------- */
/* A single narrow column: the list is designed mobile-first, and it stays a
   centered column on wider screens rather than sprawling. */
.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 18px calc(46px + env(safe-area-inset-bottom));
}

/* ---- Top bar: compact lockup + date picker ----------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.lockup-star {
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--btp-coral);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

.lockup-words {
  display: flex;
  flex-direction: column;
  font-family: var(--btp-font-display);
  font-weight: var(--btp-weight-display);
  line-height: 0.8;
  letter-spacing: 0.3px;
}
.lockup-line1 { font-size: 14px; color: var(--btp-paper); }
.lockup-line2 { font-size: 14px; color: var(--btp-coral); }

/* Date trigger: a coral pill that states the selected night and opens the date
   sheet. The .datebtn-native variant wraps the OS date input as the no-JS
   fallback; the script reveals the button trigger and hides the fallback. */
.datebtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-paper);
  background: var(--btp-coral);
  padding: 6px 12px;
  border: none;
  border-radius: var(--btp-radius-pill);
}
.datebtn:hover { background: var(--btp-coral-deep); }
.datebtn svg { flex: none; }
.datebtn-label { line-height: 1; }
/* The explicit display above beats the UA [hidden] rule, so the JS toggle
   between the sheet trigger and the native fallback needs this to bite. */
.datebtn[hidden] { display: none; }
/* The real <input type=date> sits invisible over the fallback pill; clicking it
   opens the native picker (the inline script in home.html handles navigation). */
.datebtn input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---- Day switcher: yesterday / big day / tomorrow ---------------------- */
.daynav {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 24px 0 0;
}

.daynav-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
}
.daynav-right { align-items: flex-end; text-align: right; }

.daynav-rel {
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-ondark-faint);
}

.daynav-date {
  font-family: var(--btp-font-text);
  font-style: italic;
  font-size: 14px;
  line-height: 1.05;
  color: var(--btp-ink-muted);
}
a.daynav-side:hover .daynav-rel,
a.daynav-side:hover .daynav-date { color: var(--btp-coral); }

.daynav-center {
  flex: none;
  text-align: center;
  padding: 0 6px;
}

.daynav-kicker {
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: var(--btp-track-tag);
  color: var(--btp-coral);
}

.daynav-day {
  font-family: var(--btp-font-display);
  font-weight: var(--btp-weight-display);
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: 0.5px;
  color: var(--btp-paper);
  margin-top: 3px;
}

.daynav-full {
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-ondark-muted);
  margin-top: 5px;
}

/* ---- Counts ------------------------------------------------------------ */
.counts {
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-ink-muted);
  text-align: center;
  margin: 16px 0 0;
}

/* ---- Origin filter chips + collapse-all -------------------------------- */
/* Pill controls on the dark surface: active = coral fill, inactive =
   transparent with a dark border. COLLAPSE ALL rides to the right. */
.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  border-top: 1px solid var(--btp-hairline-dark);
  padding-top: 16px;
}

.chip {
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--btp-track-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 15px;
  border-radius: var(--btp-radius-pill);
  background: transparent;
  color: var(--btp-ondark-muted);
  border: 1px solid var(--btp-border-dark);
}
.chip:hover { color: var(--btp-coral); border-color: var(--btp-coral); }

.chip-active {
  background: var(--btp-coral);
  color: var(--btp-paper);
  border-color: var(--btp-coral);
}
.chip-active:hover { color: var(--btp-paper); }

.collapse-all {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--btp-ondark-muted);
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: var(--btp-track-label);
  cursor: pointer;
}
.collapse-all:hover { color: var(--btp-coral); }

/* ---- Venue cards: coral header, cream body ----------------------------- */
.venues {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
}

.venue {
  background: var(--btp-paper);
  border-radius: 5px; /* per brand/components.md venue card recipe */
  overflow: hidden;
  color: var(--btp-ink);
}

.venue-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--btp-coral);
  padding: 9px 16px 10px;
  cursor: pointer;
  list-style: none;
}
.venue-head::-webkit-details-marker { display: none; }

/* Left column of the head: the venue name stacked over its meta line. Takes the
   remaining width so the summary + caret can right-anchor beside it. */
.venue-headmain {
  flex: 1 1 auto;
  min-width: 0;
}

.venue-name {
  display: block;
  font-family: var(--btp-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 0.95;
  color: var(--btp-paper);
}

.venue-caret {
  font-size: 12px;
  color: var(--btp-coral-tint);
  transition: transform 0.15s ease;
  flex: none;
}
.venue:not([open]) .venue-caret { transform: rotate(-90deg); }

.venue-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--btp-paper);
}

/* DOORS + its little clock glyph. */
.venue-doors {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.venue-doors svg { flex: none; }

.venue-hood { color: var(--btp-coral-tint); }

.venue-badge {
  border: 1px solid var(--btp-coral-tint);
  border-radius: var(--btp-radius-pill);
  color: var(--btp-paper);
  padding: 1px 7px;
  font-size: 8.5px;
  /* Age values arrive as data ("all ages") — brand mono tags are always caps. */
  text-transform: uppercase;
}

/* Collapsed-state summary: shown only when the card is closed, so a collapsed
   card still says what's on. Right-anchored beside the name/meta block (pushed
   over by margin-left:auto) and vertically centred by the head's align-items.
   Hidden once the card opens. */
.venue-summary {
  flex: none;
  margin-left: auto;
  text-align: right;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1px;
  /* Sits INSIDE the coral card head, so it reads paper like every other line
     up there. ink-muted is a paper-surface gray and vanishes on coral; the
     coral tint reads as washed-out next to the name and meta. */
  color: var(--btp-paper);
}
.venue[open] .venue-summary { display: none; }

.venue-body { padding: 2px 16px 10px; }

/* Act row: band name anchored left, set time anchored right. The time is
   optional — an act with no stated time shows just its name, no empty gutter
   (the name simply fills the row). */
.act-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--btp-hairline-2);
}
/* The last row of each bill drops its hairline (it is the end of the card, or
   a denim show band follows). */
.act-row-last { border-bottom: none; }

.act-name {
  flex: 1;
  font-family: var(--btp-font-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--btp-ink);
}

.act-time {
  flex: none;
  text-align: right;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--btp-ink-muted);
}

/* The show band: a full-bleed denim band splitting two separate shows in one
   venue card (an early set vs the late bill). Bleeds edge to edge via negative
   side margins that cancel the body padding, and reads as the header for the
   show beneath it. Replaces the old thin coral "brake". */
.show-band {
  background: var(--btp-showband);
  margin: 9px -16px;
  padding: 7px 16px 8px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
/* When the band is a card's series / presenter title it sits directly under the
   coral header, so it hugs it instead of carrying the between-bills top gap. */
.show-band-top { margin-top: 2px; }

/* A band that covers only PART of the night (a free happy hour, a second room)
   boxes its acts with a denim edge in the band's own colour, so the section
   visibly closes. Without it the band reads as an open header and the main bill
   below still looks like it belongs to the happy hour — which is exactly the
   thing the per-group split exists to fix. A card-wide series title gets no
   edge: it already covers every act, so there is nothing to bound. */
.act-group-scoped {
  border-left: 3px solid var(--btp-showband);
  padding-left: 13px;
  margin-left: -16px;
}
.show-band-label {
  font-family: var(--btp-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  line-height: 1.15;
  color: var(--btp-paper);
}
.show-band-meta {
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--btp-showband-meta);
}

/* ---- Empty day / footer ------------------------------------------------ */
.empty-day {
  font-family: var(--btp-font-text);
  font-style: italic;
  font-size: 16px;
  color: var(--btp-ondark-muted);
  margin: 24px 0 0;
  text-align: center;
}

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--btp-hairline-dark);
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-ink-muted);
}
.site-footer a { color: var(--btp-coral); text-decoration: none; }

/* ---- No-snapshot hero -------------------------------------------------- */
.hero { margin-top: 40px; }
.hero-title {
  font-family: var(--btp-font-display);
  font-weight: var(--btp-weight-display);
  font-size: 44px;
  line-height: 0.92;
  margin: 0 0 18px;
  color: var(--btp-paper);
}
.hero-lede {
  font-family: var(--btp-font-text);
  font-size: 18px;
  line-height: 1.55;
  color: var(--btp-ondark-muted);
  margin: 0 0 28px;
}
.hero-note {
  font-family: var(--btp-font-mono);
  font-size: 11px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-ondark-faint);
  margin: 0;
}

/* ---- Larger screens ---------------------------------------------------- */
@media (min-width: 700px) {
  .app { padding-top: 52px; }
  .daynav-day { font-size: 40px; }
}

/* ==========================================================================
   Date sheet — the cream calendar that replaced the OS date picker.
   A bottom sheet pinned to the viewport (position:fixed — the prototype used
   absolute inside a device frame; fixed lands the same result without
   restructuring the page's scroll model). Constrained to the app column width
   and centered. Opened by the coral top-bar pill; built + driven by the inline
   script in home.html. Cell states follow the design handoff table exactly.
   ========================================================================== */
.sheet-scrim {
  position: fixed;
  inset: 0;
  background: var(--btp-bg-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms linear;
  z-index: 40;
}
.sheet-scrim.is-open { opacity: 0.55; pointer-events: auto; }
.sheet-scrim[hidden] { display: none; }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--btp-paper);
  color: var(--btp-ink);
  border-radius: var(--btp-radius-story) var(--btp-radius-story) 0 0;
  padding: 14px 18px calc(34px + env(safe-area-inset-bottom));
  /* Rests off-screen (105% below its own base); .is-open slides it up. The
     -50% X keeps it centered on the column while the Y animates. */
  transform: translate(-50%, 105%);
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 41;
}
.sheet.is-open { transform: translate(-50%, 0); }
.sheet[hidden] { display: none; }

.sheet-grabber {
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--btp-hairline);
  margin: 0 auto 12px;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--btp-track-tag);
  color: var(--btp-ink-muted);
}
.sheet-close {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.sheet-close:hover { color: var(--btp-ink); }

/* The heavy 2px ink dateline that anchors every daily surface. */
.sheet-dateline {
  height: 2px;
  background: var(--btp-ink);
  margin-top: 9px;
}

/* Quick jumps — plain mono text, a coral rule marks the active night (no pills). */
.sheet-quick {
  display: flex;
  gap: 20px;
  margin-top: 12px;
}
.sheet-quickjump {
  font-family: var(--btp-font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: var(--btp-track-label);
  color: var(--btp-ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 2px 0;
  cursor: pointer;
}
.sheet-quickjump.is-active {
  color: var(--btp-coral);
  font-weight: 700;
  border-bottom-color: var(--btp-coral);
}

.sheet-monthnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.sheet-arrow {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btp-coral);
  font-size: 16px;
  background: none;
  border: none;
  cursor: pointer;
}
.sheet-month {
  font-family: var(--btp-font-display);
  font-weight: var(--btp-weight-display);
  font-size: 22px;
  letter-spacing: 0.5px;
}

.sheet-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.sheet-dow span {
  text-align: center;
  font-family: var(--btp-font-mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--btp-ink-muted);
  padding-bottom: 4px;
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sheet-cell {
  position: relative;
  height: 42px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sheet-cell.is-past { cursor: default; }
.sheet-num {
  font-family: var(--btp-font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--btp-ink);
}
.sheet-bar {
  height: 2px;
  border-radius: 2px;
  background: var(--btp-coral);
}
.sheet-star {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  background: var(--btp-gold);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* Cell states — see the handoff table. Later rules win: a selected empty night
   must read as selected, not empty, so is-selected sits after is-empty. */
.sheet-cell.is-empty .sheet-num { color: var(--btp-ink-faint); }   /* known zero shows */
.sheet-cell.is-past  .sheet-num { color: var(--btp-ink-faint); }   /* before today */
.sheet-cell.is-dim   .sheet-num { color: var(--btp-ink-ghost); }   /* adjacent month */
.sheet-cell.is-today { border-color: var(--btp-coral); }
.sheet-cell.is-selected {
  background: var(--btp-coral);
  border-color: var(--btp-coral);
}
.sheet-cell.is-selected .sheet-num { color: var(--btp-paper); }
.sheet-cell.is-selected .sheet-bar { background: var(--btp-paper); }

.sheet-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--btp-hairline);
  font-family: var(--btp-font-mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--btp-ink-muted);
}
.sheet-legend-item { display: flex; align-items: center; gap: 5px; }
.sheet-legend-bar {
  width: 10px;
  height: 2px;
  background: var(--btp-coral);
  display: inline-block;
}
.sheet-legend-star {
  width: 6px;
  height: 6px;
  background: var(--btp-gold);
  display: inline-block;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}