/* No webfont binaries exist for this project -- these are Google Fonts CDN
   substitutes chosen for a warm, editorial, data-forward tone. Swap for real
   brand fonts if Curtain Count settles on any (see design/curtain-count-design). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ---- Tokens ---- */

:root {
  color-scheme: light;
  --curtain-red: #8c2f2f;
  --curtain-red-strong: #6f2323;
  --gold: #b8862f;
  --gold-strong: #96691f;
  --sage: #54724a;
  --rust: #c1553a;
  --amber: #c98a1f;
  --page: #faf5ec;
  --surface-1: #fffcf6;
  --surface-2: #f2e9d8;
  --surface-raised: #ffffff;
  --text-primary: #211b14;
  --text-secondary: #69604f;
  --text-muted: #9c8f78;
  --border: rgba(33, 27, 20, 0.12);
  --border-strong: rgba(33, 27, 20, 0.22);
  --gridline: #e9ddc7;
  --baseline: #cdbc9a;
  --series-opened: #b8862f;
  --series-closed: #c1553a;
  --status-good: #4f7a3d;
  --status-dark: #9c8f78;
  --status-warning: #c98a1f;
  --focus-ring: #8c2f2f;
  --shadow-color: 28 20 8;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --curtain-red: #d9695f;
    --curtain-red-strong: #e88a80;
    --gold: #d9a53f;
    --gold-strong: #e8bc63;
    --sage: #84a86f;
    --rust: #d97a5c;
    --amber: #e0a83a;
    --page: #161616;
    --surface-1: #1e1e1e;
    --surface-2: #282828;
    --surface-raised: #232323;
    --text-primary: #f2f2f0;
    --text-secondary: #b7b7b3;
    --text-muted: #828280;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --gridline: #2e2e2e;
    --baseline: #3d3d3d;
    --series-opened: #d9a53f;
    --series-closed: #d97a5c;
    --status-good: #84a86f;
    --status-dark: #8a8a87;
    --status-warning: #e0a83a;
    --focus-ring: #e88a80;
    --shadow-color: 0 0 0;
  }
}

:root {
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display-xl: clamp(2.4rem, 4vw, 3.4rem);
  --text-display-l: 1.9rem;
  --text-display-m: 1.4rem;
  --text-heading: 1.05rem;
  --text-body: 0.95rem;
  --text-body-s: 0.85rem;
  --text-caption: 0.75rem;
  --text-stat: 2.1rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.03em;
  --tracking-caps: 0.08em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --radius-pill: 999px; --radius-circle: 50%;

  --content-max: 1080px;

  --shadow-card: 0 1px 2px rgba(var(--shadow-color) / 0.06), 0 8px 20px -8px rgba(var(--shadow-color) / 0.14);
  --shadow-raised: 0 2px 4px rgba(var(--shadow-color) / 0.08), 0 16px 32px -12px rgba(var(--shadow-color) / 0.22);
  --shadow-popover: 0 12px 40px -8px rgba(var(--shadow-color) / 0.35), 0 4px 12px rgba(var(--shadow-color) / 0.18);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --blur-scrim: 6px;
}

/* ---- Base ---- */

* { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: var(--leading-normal);
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

a { color: var(--curtain-red); text-decoration: none; }
a:hover { color: var(--curtain-red-strong); text-decoration: underline; }
::selection { background: var(--gold); color: #211b14; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: var(--tracking-tight); }

.tabular { font-variant-numeric: tabular-nums; }

/* ---- Layout ---- */

.page-content {
  max-width: var(--content-max);
  margin: -40px auto 0;
  padding: 0 24px var(--space-20);
  position: relative;
}

.back-link { display: inline-block; margin: var(--space-6) 0 var(--space-4); font-size: var(--text-body-s); }

section { margin-bottom: var(--space-10); }

h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 600;
}

.section-sub {
  color: var(--text-muted);
  font-size: var(--text-body-s);
  margin: 4px 0 var(--space-4);
}

/* ---- Header band ---- */

.header-band {
  background: var(--curtain-red);
  padding: 28px 24px 64px;
  transition: background var(--duration-base) var(--ease-standard);
}

.header-band-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.header-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  color: rgba(253, 246, 234, 0.75);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 8px;
}

.header-band h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  color: #fdf6ea;
}

.header-band h1 a { color: inherit; text-decoration: none; }

.header-tagline {
  color: rgba(253, 246, 234, 0.82);
  margin: 10px 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  max-width: 60ch;
}

/* ---- Card ---- */

.cc-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.cc-card.raised { box-shadow: var(--shadow-raised); }
.cc-card.unpadded { padding: 0; }

/* ---- Stat tiles ---- */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.stat-tile { padding: var(--space-4); }

.stat-tile .value {
  font-family: var(--font-body);
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-tile .label { color: var(--text-secondary); font-size: var(--text-body-s); margin-top: 4px; }
.stat-tile.flagged .value { color: var(--status-warning); }

@media (max-width: 640px) {
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Trend chart ---- */

.trend-chart-card { padding: var(--space-5); position: relative; }

.chart-legend {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-body-s);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.chart-legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.swatch.opened, .chart-line.opened, .chart-point.opened { color: var(--series-opened); }
.swatch.closed, .chart-line.closed, .chart-point.closed { color: var(--series-closed); }
.swatch.open-count, .chart-line.open-count, .chart-point.open-count { color: var(--status-good); }
.swatch.opened { background: var(--series-opened); }
.swatch.closed { background: var(--series-closed); }
.swatch.open-count { background: var(--status-good); }

.chart-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { fill: currentColor; cursor: pointer; }
.chart-gridline { stroke: var(--gridline); stroke-width: 1; }
.chart-axis-label { fill: var(--text-muted); font-size: 10px; }

#chart-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--surface-1);
  padding: 6px 10px;
  border-radius: var(--radius-s);
  font-size: var(--text-caption);
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.08s ease;
  white-space: nowrap;
  z-index: 60;
}

#chart-tooltip.visible { opacity: 1; }

/* ---- Venues section header / controls ---- */

.venues-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.venues-controls { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.venue-search {
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  padding: 7px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  min-width: 220px;
}

.filter-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.filter-btn.is-active {
  border-color: var(--curtain-red);
  background: color-mix(in srgb, var(--curtain-red) 12%, transparent);
  color: var(--curtain-red);
}

.filter-group { display: flex; gap: 6px; align-items: center; }
.filter-group + .filter-group { padding-left: var(--space-2); border-left: 1px solid var(--border); }

.venues-loading { color: var(--text-muted); font-size: var(--text-caption); margin-top: var(--space-2); }
.venues-loading[hidden] { display: none; }

/* ---- Venue table ---- */

.venue-table-wrap { overflow-x: auto; }

table.venues {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-s);
  table-layout: fixed;
}

table.venues .col-venue { width: 260px; }
table.venues .col-type { width: 132px; }
table.venues td { overflow-wrap: break-word; }

table.venues th {
  text-align: left;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  border-bottom: 1px solid var(--gridline);
  padding: var(--space-2) 10px;
}

table.venues td {
  padding: 10px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: top;
}

table.venues tr:last-child td { border-bottom: none; }

table.venues tbody tr.venue-row { cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
table.venues tbody tr.venue-row:hover { background: var(--surface-2); }
table.venues tbody tr.venue-row[hidden] { display: none; }

.venue-row-link { color: var(--curtain-red); font-weight: 500; }
.venue-row-link:hover { color: var(--curtain-red-strong); text-decoration: none; }

.org-name { color: var(--text-muted); font-size: var(--text-caption); }

.current-show {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-s);
  font-weight: 500;
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.current-show.is-flagged { color: var(--status-warning); }

.upcoming-shows { margin-top: 4px; margin-left: 16px; }

.upcoming-show {
  font-size: var(--text-body-s);
  font-weight: 500;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.upcoming-show.is-more { color: var(--curtain-red); }

.status-badge {
  display: inline-block;
  font-size: var(--text-caption);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.status-badge.is-open { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }
.status-badge.is-dark { background: var(--surface-2); color: var(--text-secondary); }
.status-badge.is-flagged { background: color-mix(in srgb, var(--status-warning) 18%, transparent); color: var(--status-warning); }

/* ---- Tag ---- */

.cc-tag {
  display: inline-block;
  font-size: var(--text-caption);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 3px 8px;
  margin-right: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
}

.cc-tag.is-subsidised { background: color-mix(in srgb, var(--sage) 16%, transparent); color: var(--status-good); }
.cc-tag.is-west-end { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-strong); }
.cc-tag.is-fringe { background: color-mix(in srgb, var(--rust) 16%, transparent); color: var(--rust); }

/* ---- Status badge ---- */

.cc-status-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex-shrink: 0; margin-left: 2px; }
.cc-status-dot.is-showing { background: var(--status-good); }
.cc-status-dot.is-dark { background: var(--status-dark); }
.cc-status-dot.is-flagged { background: var(--status-warning); }

/* ---- Venue detail ---- */

.venue-detail-card { padding: var(--space-6); }

.venue-meta-card { padding: var(--space-4) var(--space-5); }

.venue-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.venue-meta-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.venue-meta-city { font-size: var(--text-body-s); color: var(--text-secondary); }

.closing-note { font-size: var(--text-body-s); margin-left: 4px; }
.closing-note.extended { color: var(--status-good); }
.closing-note.closing-early { color: var(--status-warning); }

.empty-state { color: var(--text-muted); font-size: var(--text-body); padding: var(--space-6) 0; }

/* ---- Timeline ---- */

.timeline { position: relative; margin-top: var(--space-10); }
.timeline-line { position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--gridline); z-index: 0; }

.timeline-row { display: flex; gap: 16px; align-items: flex-start; position: relative; z-index: 1; margin-top: var(--space-3); }
.timeline-row.is-label { align-items: baseline; margin-top: var(--space-2); }
.timeline-row.is-note { margin-top: 4px; }

.timeline-gutter { width: 28px; flex-shrink: 0; display: flex; justify-content: center; }
.timeline-content { flex: 1; min-width: 0; }

.timeline-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.timeline-label-note { font-size: var(--text-caption); color: var(--text-muted); margin: 0; }

.timeline-dot { border-radius: var(--radius-circle); box-shadow: 0 0 0 4px var(--page); flex-shrink: 0; }
.timeline-dot.is-upcoming { width: 12px; height: 12px; margin-top: 10px; border: 2px solid var(--gold); background: var(--page); }
.timeline-dot.is-today { width: 16px; height: 16px; margin-top: 16px; background: var(--curtain-red); }
.timeline-dot.is-dark { width: 16px; height: 16px; margin-top: 16px; background: var(--status-dark); }
.timeline-dot.is-flagged { width: 16px; height: 16px; margin-top: 16px; background: var(--status-warning); }
.timeline-dot.is-history { width: 9px; height: 9px; margin-top: 6px; background: var(--text-muted); }

.timeline-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 8px;
}

.timeline-eyebrow.is-today { color: var(--curtain-red); }
.timeline-eyebrow.is-dark { color: var(--text-muted); }
.timeline-eyebrow.is-flagged { color: var(--status-warning); }

.timeline-show-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.timeline-show-title { font-family: var(--font-display); font-weight: 600; }
.timeline-show-title.is-upcoming { font-size: var(--text-heading); }
.timeline-show-title.is-today { font-size: var(--text-display-m); }
.timeline-show-sub { margin: 6px 0 0; font-size: var(--text-body-s); color: var(--text-secondary); }

.timeline-history-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--gridline);
}

.timeline-row:last-child .timeline-history-row { border-bottom: none; padding-bottom: 0; }

.timeline-history-title { font-size: var(--text-body); font-weight: 600; flex: 1; min-width: 140px; }
.timeline-history-range { font-size: var(--text-body-s); color: var(--text-secondary); white-space: nowrap; }
.timeline-history-status { font-size: var(--text-body-s); color: var(--text-muted); }

/* ---- Not found ---- */

.not-found-card { padding: var(--space-8); text-align: left; }

/* ---- Dashboard <-> venue detail slide track ---- */

.page-track-outer { overflow-x: hidden; }

.page-track {
  display: flex;
  width: 200%;
  align-items: flex-start;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.track-panel { width: 50%; flex-shrink: 0; min-width: 0; }

/* Both panels are always in the DOM as flex siblings, so without this the
   document's height would be the taller of the two regardless of which one
   is actually scrolled into view -- the hidden panel is clipped to the
   viewport height so it can't stretch the page past the visible one. */
#dashboard-panel { max-height: none; overflow: visible; }
#detail-panel { max-height: 100vh; overflow: hidden; }

.page-track.is-detail-open { transform: translateX(-50%); }
.page-track.is-detail-open #dashboard-panel { max-height: 100vh; overflow: hidden; }
.page-track.is-detail-open #detail-panel { max-height: none; overflow: visible; }

.dashboard-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  color: rgba(253, 246, 234, 0.9);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-s);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.dashboard-back-link:hover { color: #fdf6ea; text-decoration: none; }

/* ---- Footer ---- */

footer.site-footer {
  color: var(--text-muted);
  font-size: var(--text-caption);
  margin-top: var(--space-16);
  border-top: 1px solid var(--gridline);
  padding-top: var(--space-4);
  line-height: var(--leading-normal);
}