/* open-setlist-stash — platform default theme.
   Clean, minimal, content-first. Works for any band's setlist game.
   Forks can override by setting THEME_FILE in .env or by editing this file. */

:root {
  --bg:           #fafaf7;
  --surface:      #ffffff;
  --surface-alt:  #f5f3ee;
  --border:       #e3dfd6;
  --border-soft:  #ecebe5;

  --text:         #1a1a1a;
  --text-soft:    #4a4a4a;
  --text-mute:    #8a8580;

  --accent:       #0e7c66;
  --accent-soft:  #d6ece5;
  --accent-deep:  #095244;

  --error:        #9e2222;
  --error-soft:   #f3dada;
  --warn:         #a07300;

  --radius:       6px;
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --shadow:       0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:    0 6px 20px rgba(0,0,0,0.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ---- masthead ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  border: 0;
}
.brand:hover {
  color: var(--accent);
  text-decoration: none;
  border: 0;
}

.handle {
  font-size: 0.85rem;
  color: var(--text-mute);
}
.handle strong {
  color: var(--text);
  font-weight: 600;
  background: none;
  box-shadow: none;
  padding: 0;
}

.topbar nav {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.topbar nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  border: 0;
  padding: 0.4rem 0;
  transition: color 120ms ease;
}
.topbar nav a:hover {
  color: var(--accent);
  border: 0;
}
/* "Sign out" is a POST, so it's a <form><button> in the nav. Make it read like
   the other nav links (and collapse into the mobile hamburger panel with them). */
.topbar nav .nav-logout { margin: 0; display: inline; }
.topbar nav .nav-logout-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  transition: color 120ms ease;
}
.topbar nav .nav-logout-btn:hover { color: var(--accent); }

/* Hamburger menu button: hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-soft);
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 120ms ease, opacity 120ms ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
/* Open state: morph into an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- content frame ---- */

.content {
  max-width: 760px;
  margin: 2rem auto 1rem;
  padding: 0 1.5rem;
}

.footer {
  color: var(--text-mute);
  text-align: center;
  padding: 3rem 1rem 2rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--border-soft);
  margin-top: 3rem;
}
.footer::before { content: none; }

/* ---- typography ---- */

h1, h2, h3 {
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0.5rem 0 1rem;
}
h1::after { content: none; }
h2 {
  font-size: 1.4rem;
  margin: 1.6rem 0 0.7rem;
  color: var(--text);
}
h2::before { content: none; }
hr.section-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0 0.5rem;
}
h3 {
  font-size: 1.1rem;
  margin: 1.2rem 0 0.5rem;
  color: var(--text-soft);
}

p { margin: 0.6rem 0 0.85rem; }
strong {
  font-weight: 600;
  color: var(--text);
  background: none;
  box-shadow: none;
  padding: 0;
}
em { font-style: italic; color: inherit; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(14,124,102,0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border: 0;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent);
}

code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface-alt);
  color: var(--text);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid var(--border-soft);
}

.muted {
  color: var(--text-mute);
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.5;
}

.error { color: var(--error); font-weight: 500; }
.error-card { border-color: var(--error) !important; background: var(--error-soft) !important; }
.error-card h2 { color: var(--error); }

/* ---- card ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 1.2rem 0;
  box-shadow: var(--shadow-sm);
  transform: none;
  transition: box-shadow 140ms ease;
}
.card:nth-of-type(2n),
.card:nth-of-type(3n),
.card:nth-of-type(4n) {
  box-shadow: var(--shadow-sm);
  transform: none;
}
.card:hover {
  box-shadow: var(--shadow);
  transform: none;
}
.card::before { content: none; }
.card:nth-of-type(2n)::before,
.card:nth-of-type(3n)::before,
.card:nth-of-type(4n)::before { content: none; }
.card.error-card::before { content: none; }
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }

/* ---- forms ---- */

form { display: block; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.3rem 0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
legend {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: none;
  padding: 0 0.5rem;
  box-shadow: none;
  transform: none;
}

label {
  display: block;
  margin: 0.85rem 0 0.3rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  padding: 0.55rem 0.75rem;
  background: var(--surface);
}

input::placeholder {
  color: var(--text-mute);
  opacity: 0.7;
  font-style: normal;
  font-family: inherit;
}

/* ---- button ---- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
  margin: 0.7rem 0.5rem 0.5rem 0;
  box-shadow: var(--shadow-sm);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.btn::after { content: ""; margin: 0; }
.btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  transform: none;
  box-shadow: var(--shadow);
}
.btn:hover::after { content: ""; }
.btn:active {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Prominent primary call-to-action (e.g. "Make your picks"). Forces the
   filled accent treatment regardless of sibling context, and reads larger so
   a first-time visitor can't miss it. */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
.btn-lg {
  font-size: 1.05rem;
  padding: 0.75rem 1.5rem;
}
.make-picks-cta {
  margin: 0.6rem 0 1rem;
}

.btn + .btn {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn + .btn::after { content: ""; }
.btn + .btn:hover {
  background: var(--surface-alt);
  color: var(--accent-deep);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.btn + .btn:hover::after { content: ""; }

button[disabled],
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ---- lock countdown ---- */

.lock {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--accent-soft);
  border: 0;
  border-left: 3px solid var(--accent);
  padding: 0.7rem 0.95rem;
  margin: 1rem 0;
  letter-spacing: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: none;
  position: relative;
}
.lock::before { content: none; animation: none; }
.lock strong { color: var(--accent-deep); background: none; box-shadow: none; padding: 0; }
#lock-countdown {
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

/* ---- beta notice (home page, deployment-driven via BETA_NOTICE) ---- */

.beta-notice {
  display: block;
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  color: var(--text-soft);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.beta-notice .badge {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  vertical-align: 0.05em;
}

/* ---- next-show countdown widget (home page) ---- */

.next-show {
  max-width: 34rem;
  margin: 0 auto 1.8rem;
  padding: 0.9rem 1.1rem;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.next-show p { margin: 0.2rem 0; }
.next-show-where { color: var(--text); font-size: 0.98rem; }
.next-show-lock {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  color: var(--text-soft);
}
#home-lock-countdown {
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.next-show-players {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--accent-deep);
}
.next-show-players strong { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .beta-notice, .next-show { max-width: 100%; }
}

/* ---- song picker ---- */

.song-picker {
  margin: 0.85rem 0;
  position: relative;
}
.song-picker .picker-hint {
  margin: 0.35rem 0 0;
  min-height: 1.1rem;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--text-mute);
}
.song-picker-picked input.song-picker-title {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.song-picker-picked::after {
  content: "✓";
  position: absolute;
  right: 0.7rem;
  top: 2.05rem;
  color: var(--accent);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  transform: none;
  pointer-events: none;
}
.song-picker-bad input.song-picker-title {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-soft);
}
.song-picker-bad .picker-hint { color: var(--error); }

/* ---- leaderboard ---- */

.scope-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 1.5rem 0 1rem;
}
.scope-tab {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.6rem 1rem;
  color: var(--text-soft);
  background: transparent;
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
  position: static;
  top: auto;
  box-shadow: none;
}
.scope-tab:hover {
  color: var(--accent);
  background: transparent;
  border-bottom-color: transparent;
  top: auto;
}
.scope-tab.is-active {
  color: var(--accent);
  background: transparent;
  border-bottom-color: var(--accent);
  font-weight: 600;
  top: auto;
  box-shadow: none;
}
.scope-key-list {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-mute);
  margin: 0.6rem 0 1rem;
}
.scope-key-list a { color: var(--text-soft); text-decoration: none; }
.scope-key-list a:hover { color: var(--accent); }

.leaderboard-wrap {
  margin: 0.5rem 0 1.5rem;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.leaderboard {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: inherit;
  font-size: 0.93rem;
  box-shadow: var(--shadow-sm);
}
table.leaderboard th,
table.leaderboard td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
table.leaderboard th {
  background: var(--surface-alt);
  color: var(--text-soft);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
table.leaderboard td.num,
table.leaderboard th.num {
  text-align: right;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
}
table.leaderboard tbody tr:hover td { background: var(--surface-alt); }
table.leaderboard tr:last-child td { border-bottom: none; }
table.leaderboard tr.is-me td {
  background: var(--accent-soft) !important;
  font-weight: 500;
}
table.leaderboard tr.is-me td:first-child {
  border-left: 3px solid var(--accent);
  padding-left: calc(0.95rem - 3px);
}
table.leaderboard a {
  color: var(--text);
  text-decoration: none;
  border: 0;
}
table.leaderboard a:hover { color: var(--accent); text-decoration: underline; }

.me-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.65rem;
  padding: 0.12rem 0.4rem;
  border: 0;
  border-radius: 3px;
  margin-left: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  transform: none;
  box-shadow: none;
}

/* ---- leagues ---- */

.league-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.league-name {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.15rem;
  border: 0;
  text-shadow: none;
  line-height: 1.2;
}
.league-name:hover { color: var(--accent); text-decoration: none; text-shadow: none; }

.member-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1rem;
}
.member-list li {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  font-family: inherit;
  font-size: 0.92rem;
  background: transparent;
}
.member-list li:nth-child(even) { background: transparent; }
.member-list li:last-child { border-bottom: none; }
.member-list a { color: var(--text); text-decoration: none; }
.member-list a:hover { color: var(--accent); }

.post-submit-leagues { margin: 0.75rem 0; }
.post-submit-leagues a { margin-right: 0.5rem; }

.claim-stub {
  color: var(--text-mute);
  font-family: inherit;
  font-style: normal;
  font-size: 0.85rem;
}

/* ---- decorative bits (themes can override) ---- */

.stamp,
.stamp.stamp-gold,
.stamp.stamp-teal,
.stamp.stamp-brick,
.stamp.stamp-yellow {
  display: inline-block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  transform: none;
  background: var(--surface-alt);
  text-shadow: none;
  border-radius: 3px;
  user-select: none;
  font-weight: 600;
}

.sticker {
  display: inline-block;
  font-family: "IBM Plex Sans", sans-serif;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 0;
  padding: 0.2rem 0.55rem;
  transform: none;
  box-shadow: none;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.donut {
  display: none;
}

.patch {
  display: inline-block;
  font-family: "IBM Plex Sans", sans-serif;
  color: #fff;
  background: var(--accent);
  border: 0;
  outline: none;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0;
  font-size: 0.95rem;
  text-shadow: none;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transform: none;
  font-weight: 600;
}
.patch:hover { color: #fff; background: var(--accent-deep); }

/* ---- blog (generic engine styling; theme variables only) ---- */

.blog-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.blog-list-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.blog-list-item:last-child { border-bottom: 0; }
.blog-list-title {
  font-size: 1.2rem;
  font-weight: 600;
}
.blog-list-meta,
.post-meta {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-top: 0.2rem;
}
.blog-list-summary {
  margin: 0.4rem 0 0;
  color: var(--text-soft);
}

.post-header { margin-bottom: 1.4rem; }
.post-body {
  font-size: 1.02rem;
  line-height: 1.7;
}
.post-body h2 { margin-top: 1.8rem; }
.post-body p { margin: 0.9rem 0; }
.post-body a {
  color: var(--accent);
  text-decoration: underline;
}
.post-body a:hover { color: var(--accent-deep); }
.post-body code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--surface-alt);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.post-body pre {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
.post-body pre code { background: none; padding: 0; }

/* Readable post table (the gap table especially). */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92rem;
}
.post-body th,
.post-body td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.post-body thead th {
  border-bottom: 2px solid var(--border);
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
}
.post-body tbody tr:nth-child(even) { background: var(--surface-alt); }
.post-body td:not(:first-child),
.post-body th:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

.post-back { margin-top: 2rem; }
.post-back a { color: var(--text-mute); }

@media (max-width: 640px) {
  .post-body { font-size: 0.97rem; }
  .post-body table { font-size: 0.84rem; }
  .post-body th, .post-body td { padding: 0.45rem 0.5rem; }
}

/* ---- responsive ---- */

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.85rem 1.1rem; }
  /* Show the hamburger; collapse the inline nav into a toggled panel. */
  .nav-toggle { display: inline-flex; }
  .topbar nav {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.4rem;
    border-top: 1px solid var(--border-soft);
  }
  /* Collapsed by default on mobile; the hamburger toggles .nav-open to reveal
     the full menu (auth items included). The :not(.nav-open) selector raises
     specificity to (0,0,2,1) on purpose: a deployment THEME is loaded AFTER
     this file, and a plain `.topbar nav { display: flex }` in that theme would
     otherwise win on source order and leak the inline desktop nav back onto
     mobile — exactly the Lot Poster (Tweezer) bug, where the hamburger showed
     but the links never hid. Higher specificity beats a later same-specificity
     theme rule, so the collapse holds for any theme. */
  .topbar nav:not(.nav-open) { display: none; }
  .topbar nav.nav-open { display: flex; }
  /* Each direct child is a full-width row. The logout <form> is the row; its
     <button> just fills it (no second border/padding). */
  .topbar nav a,
  .topbar nav .nav-logout {
    font-size: 0.95rem;
    width: 100%;
    padding: 0.7rem 0.2rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .topbar nav .nav-logout-btn {
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .topbar nav a:last-child,
  .topbar nav .nav-logout:last-child { border-bottom: 0; }
  .brand { font-size: 1.05rem; }
  .content { margin: 1.4rem auto 0.5rem; padding: 0 1.1rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }
  table.leaderboard { font-size: 0.88rem; }
  table.leaderboard th, table.leaderboard td { padding: 0.55rem 0.6rem; }
}

/* ---- /shows table: reflow to labeled cards on mobile ----
   The 4-column shows table (Show / Venue / Players / Status) is wider than a
   phone viewport, and unlike the standings table its rows have no natural
   "identity" column to anchor a horizontal scroll. Reflow each row into a
   compact card: the date is the card header, the other fields sit under it as
   left-aligned "LABEL value" lines fed by each cell's data-label. Self-
   contained (scoped to .shows-table) so no other leaderboard table is touched;
   desktop (>640px) keeps the plain table entirely.

   Selectors are scoped as `table.leaderboard.shows-table` (two classes) ON
   PURPOSE: a deployment theme (lot-poster, wappy-poster) loads AFTER this file
   and restyles `table.leaderboard` / `table.leaderboard td` (chrome + mobile
   padding) at single-class specificity. Matching on both classes raises us to
   (0,2,x) so the card layout wins regardless of source order, same lesson as
   the mobile-nav collapse above. */
@media (max-width: 640px) {
  table.leaderboard.shows-table,
  table.leaderboard.shows-table tbody,
  table.leaderboard.shows-table tr { display: block; width: 100%; }

  /* Header row is redundant once cells self-label; keep it for assistive tech. */
  table.leaderboard.shows-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Table chrome off; each row becomes the bordered card. */
  table.leaderboard.shows-table {
    border: 0;
    box-shadow: none;
    background: none;
    font-size: 0.95rem;
  }
  table.leaderboard.shows-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0.9rem;
    margin: 0 0 0.6rem;
  }
  table.leaderboard.shows-table tr:last-child { margin-bottom: 0; }
  table.leaderboard.shows-table tbody tr:hover td { background: none; }

  /* Cells stack tightly; each is a "LABEL  value" row. Flex keeps a wrapped
     value (long venue names) hanging-indented under the value column instead
     of falling back under the label. */
  table.leaderboard.shows-table td {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    border-bottom: 0;
    padding: 0.12rem 0;
    text-align: left;
  }
  table.leaderboard.shows-table td.num { text-align: left; }
  table.leaderboard.shows-table td::before {
    content: attr(data-label);
    flex: none;
    min-width: 4.25rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
  }

  /* Date is the card header: prominent, no label, with a hairline divider. */
  table.leaderboard.shows-table td.show-date {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-soft);
  }
  table.leaderboard.shows-table td.show-date::before { content: none; }
}

/* ---- rich footer (multi-column) ---- */

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  max-width: 680px;
  margin: 0 auto 2rem;
  text-align: left;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 130px;
}
.footer-col h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin: 0 0 0.2rem;
}
.footer-col a {
  color: var(--text-mute);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-col a:hover { color: var(--accent); }
.footer-version {
  font-size: 0.78rem;
  color: var(--text-mute);
  margin-top: 0.2rem;
}
.footer-credit {
  border-top: 1px solid var(--border-soft);
  padding-top: 1.2rem;
  line-height: 1.6;
}

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

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 1.6rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.stat-card .stat-value {
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-deep);
  letter-spacing: -0.02em;
}
.stat-card .stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-section { margin-top: 1.8rem; }
.stat-section > p.muted { margin-top: -0.2rem; }

table.stat-table { width: 100%; border-collapse: collapse; }
table.stat-table th, table.stat-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
table.stat-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  font-weight: 600;
}
table.stat-table td.num, table.stat-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.stat-table tbody tr:last-child td { border-bottom: 0; }
.stat-rank { color: var(--text-mute); font-variant-numeric: tabular-nums; width: 2rem; }

/* ---- docs / connect page ---- */

.doc-steps { counter-reset: step; padding-left: 0; list-style: none; }
.code-block {
  position: relative;
  background: #12201c;
  color: #e8f3ee;
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin: 0.7rem 0 1.1rem;
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
.code-block code {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  white-space: pre;
}
.tool-list { list-style: none; padding-left: 0; }
.tool-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.tool-list li:last-child { border-bottom: 0; }
.tool-list code {
  font-weight: 600;
  color: var(--accent-deep);
}

@media (max-width: 640px) {
  .footer-cols { gap: 1.6rem 2.2rem; }
  .stat-card .stat-value { font-size: 1.6rem; }
}

/* Footer columns on narrow screens.
   The three columns have very different natural widths (the "Explore" column
   carries the long "Data provided by ..." credit), so once the row no longer
   fits, flex-wrap produces a ragged 2-then-1 layout and then a full stack in
   which every column is a centred BOX of a different width whose text is still
   left-aligned. The result reads as off-centre inside a footer that is
   otherwise centred. Below the width where all three can sit side by side,
   collapse them into a single full-width centred stack so the headings and
   links share one axis. Desktop keeps the multi-column row untouched. */
@media (max-width: 600px) {
  .footer-cols {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-col {
    align-items: center;
    width: 100%;
    min-width: 0;
  }
}

/* Live setlist on the per-show leaderboard page. Uses theme variables so
   any mounted theme (denim Wappy Picks, etc.) inherits the styling. */
.setlist {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  max-width: 100%;
  overflow: hidden;
}
.setlist > h2 { margin-top: 0; }
.setlist-live {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  vertical-align: middle;
}
.setlist-set { margin: 0.75rem 0; }
.setlist-set-name {
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
  color: var(--accent-deep);
}
.setlist-songs {
  margin: 0;
  line-height: 1.9;
  color: var(--text);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
/* Songs may wrap between each other; keep a short title intact when it fits,
   but never let a pathological token push past the grey box. */
.setlist-song {
  display: inline;
  overflow-wrap: break-word;
  word-break: break-word;
}
.setlist-trans { color: var(--text-mute); white-space: nowrap; }
/* `.setlist-song--advisory` and `.setlist-tag` lived here to style the per-song
   "via X" marker. The marker was removed from the template once its explanatory
   legend went away; the `advisory` flag itself is still computed and passed to
   the template, so restoring the styling is a template-only change. */
.setlist-note { margin-top: 0.75rem; font-size: 0.85rem; }

/* ---- home hero (single centered column) ---- */

/* Single shared-width column for the ENTIRE homepage: hero (tagline,
   next-show, CTA, beta notice) and How-it-works both live inside this one
   wrapper so every block shares the same left/right edges instead of each
   being independently centered at its own (different) width. */
.home-page {
  max-width: 640px;
  margin: 0 auto;
}
.home-hero {
  text-align: center;
}
.home-tagline {
  margin: 0.4rem 0 1.4rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
/* next-show + beta-notice ship their own max-width (34rem) for use
   elsewhere in the app; inside the single-column home page they fill the
   shared .home-page width instead so their edges match How-it-works. */
.home-page .next-show,
.home-page .beta-notice {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Single hero CTA: handle input + Start playing, centered. Replaces the
   old fieldset/legend form chrome on the home page. */
.handle-cta {
  margin: 0.5rem 0 1.2rem;
  text-align: center;
}
.handle-cta-label {
  display: block;
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.handle-cta-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  justify-content: center;
}
.handle-cta-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}
.handle-cta-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.handle-cta-help {
  margin: 0.6rem 0 0;
}

/* Showtime. The next-show card becomes the live card in place — same box,
   different voice — so the page reads as one board instead of a "next show"
   panel with a live button stacked above it. Theme vars only, so the Wappy
   denim theme inherits it without an override. */
.next-show--live {
  border-color: var(--error);
  box-shadow: var(--shadow-sm);
}
.next-show--live .next-show-lock {
  color: var(--text);
}
.live-label {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  color: var(--error);
}
.live-now {
  margin: 0.9rem 0 0.1rem;
}
.live-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.live-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 0 0 var(--error);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(158, 34, 34, 0.55); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(158, 34, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(158, 34, 34, 0); }
}
/* Respect reduced-motion: keep the dot, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
.live-now-where {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

/* Morning-after "last show's setlist" link, sits under the picks CTA. */
.recent-show {
  margin: 0.2rem 0 1.2rem;
}
.recent-show-btn {
  font-size: 0.95rem;
}

/* Signed-in welcome card, full width of the shared home column. */
.home-welcome {
  margin: 0.5rem 0 1.2rem;
  text-align: center;
}

/* How it works: same shared column, no width of its own. Headings + the
   summary line center; bullet lists stay left-aligned for readability. */
.home-how {
  margin: 1.75rem 0 0;
  text-align: left;
}
.home-how h2 { text-align: center; }
.home-how .how-it-works-steps { text-align: center; }

/* ---- Sign in with Google ---------------------------------------------
   Deliberately opts OUT of the per-brand poster themes. Those themes load
   after this file and rewrite .btn wholesale (uppercase Anton, orange field,
   hard offset shadow, a "✦" glyph via ::after), which would leave the Google
   button unrecognizable. Google's mark on a white field IS the recognition,
   so the rules below are written as `a.btn.btn-google` (0,2,1) to outrank
   both the themes' `.btn` (0,1,0) and their `.btn + .btn` (0,2,0), wherever
   the button lands among its siblings. */
a.btn.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #747775;
  border-radius: var(--radius);
  padding: 0.7rem 1.5rem;
  font-family: "IBM Plex Sans", Roboto, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transform: none;
  /* Symmetric, unlike the .btn margin both the base and poster themes set
     (which carries a right margin only). Inside the centered .save-account
     card that asymmetry would leave the button visibly off-centre. */
  margin: 0.85rem 0 0.5rem;
}
/* Drop the poster themes' decorative ::after glyph: Google's guidelines
   don't allow extra ornament inside the button. */
a.btn.btn-google::after,
a.btn.btn-google:hover::after { content: ""; margin: 0; }
a.btn.btn-google:hover {
  background: #f2f2f2;
  color: #1f1f1f;
  border-color: #5f6368;
  transform: none;
  box-shadow: var(--shadow);
}
a.btn.btn-google:active {
  transform: none;
  box-shadow: var(--shadow-sm);
}
a.btn.btn-google:focus-visible {
  outline: 3px solid #4285f4;
  outline-offset: 2px;
}
a.btn.btn-google .google-g {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

/* "or" rule separating the handle form from the Google button on the
   anonymous home page. The rules either side are drawn by pseudo-elements so
   the markup stays a single <p>. */
.auth-alt { margin: 1.2rem 0 0; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  color: var(--text-mute);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.auth-alt-help { margin: 0.6rem 0 0; }

/* Post-signup "save your account" card. A player who just claimed a handle is
   one cleared cookie away from losing it, so this gets an accent edge and a
   real button rather than reading as another muted footnote. */
.save-account {
  margin: 0.5rem 0 1.2rem;
  text-align: center;
  border-left: 4px solid var(--accent);
}
.save-account-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.save-account-help { margin: 0.6rem 0 0; font-size: 0.85rem; }

@media (max-width: 480px) {
  .handle-cta-row { flex-direction: column; }
  .handle-cta-row .btn { width: 100%; }
  /* Full-bleed tap target on phones, where this button matters most. */
  a.btn.btn-google { display: flex; width: 100%; }
}