:root { color-scheme: dark; --bg:#111; --surface:#232323; --surface-2:#2d2d2d; --text:#f7f5f7; --muted:#c2b7c7; --accent:#c73bd2; --accent-light:#ec62f4; --focus:#fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html { min-width:100%; min-height:100%; background:var(--bg); }
body { margin:0; min-width:100%; min-height:100vh; min-height:100dvh; overflow-x:clip; background:var(--bg); color:var(--text); font-size:16px; }
button { font:inherit; }
.skip-link { position:fixed; z-index:10; top:.5rem; left:.5rem; padding:.7rem 1rem; color:#111; background:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-header { border-bottom:1px solid #303030; }
.header-inner, main { width:min(100%, 62rem); margin:auto; }
.header-inner { display:flex; align-items:center; gap:.55rem; min-height:4.35rem; padding:env(safe-area-inset-top) 1.1rem 0; }
.music-note { flex:0 0 auto; width:1.35rem; height:1.35rem; color:var(--accent-light); }
h1 { margin:0; font-size:1.2rem; line-height:1.2; letter-spacing:-.025em; }
main { padding:1.15rem 1.1rem calc(6.25rem + env(safe-area-inset-bottom)); }
.filters { display:grid; gap:1.05rem; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { margin-bottom:.5rem; color:#ded5e0; font-size:.91rem; }
legend:not(.visually-hidden) { display:flex; align-items:center; gap:.42rem; }
.legend-icon { flex:0 0 auto; fill:none; stroke:#aaa; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.control-row, .view-controls { display:flex; flex-wrap:wrap; gap:.42rem; }
#stage-controls { display:grid; grid-template-columns:max-content max-content; max-width:100%; }
.pill, .view-button { max-width:100%; min-height:2.3rem; border:1px solid transparent; border-radius:.45rem; padding:.4rem .7rem; overflow-wrap:anywhere; color:var(--muted); background:var(--surface-2); cursor:pointer; font-size:.94rem; line-height:1.2; }
.pill[aria-pressed="true"] { background:var(--accent); color:#fff; font-weight:700; }
.pill[data-stage="Club David"][aria-pressed="true"] { background:#c43c3c; }
.pill[data-stage="Full Circle Book Coop"][aria-pressed="true"] { background:#3374c7; }
.pill[data-stage="Icon Inside"][aria-pressed="true"] { background:#b9570c; }
.pill[data-stage="Icon Outside"][aria-pressed="true"] { background:#bd3978; }
.pill[data-stage="Vishnu Bunny"][aria-pressed="true"] { background:#277b4c; }
.pill[aria-pressed="true"]::before, .view-button[aria-pressed="true"]::before { content:"✓"; margin-right:.35rem; }
.filters > fieldset:last-child { position:fixed; z-index:5; right:0; bottom:0; left:0; width:100%; padding:.62rem 1.1rem calc(.62rem + env(safe-area-inset-bottom)); border-top:1px solid #363036; background:rgba(17,17,17,.96); box-shadow:0 -.45rem 1.4rem rgba(0,0,0,.3); }
.view-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; width:100%; margin:0; }
.view-button { width:100%; min-width:0; background:transparent; }
.view-button[aria-pressed="true"] { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:700; }
button:hover { color:#fff; border-color:#777; }
button:focus-visible, a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.status { min-height:1px; overflow:hidden; width:1px; height:1px; position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.schedule { margin-top:1.3rem; }
.stage-section { --stage-color:var(--accent); }
.stage-section[data-stage="Club David"] { --stage-color:#c43c3c; }
.stage-section[data-stage="Full Circle Book Coop"] { --stage-color:#3374c7; }
.stage-section[data-stage="Icon Inside"] { --stage-color:#b9570c; }
.stage-section[data-stage="Icon Outside"] { --stage-color:#bd3978; }
.stage-section[data-stage="Vishnu Bunny"] { --stage-color:#277b4c; }
.stage-section + .stage-section { margin-top:1.5rem; }
.stage-heading { display:flex; align-items:center; gap:.55rem; margin-bottom:.62rem; }
.stage-heading h2 { display:inline-block; margin:0; padding:.22rem .68rem; border-radius:999px; background:var(--stage-color); font-size:.8rem; line-height:1.22; }
.act-count { color:#ddd1e1; font-size:.83rem; }
.performance-list { display:grid; gap:.46rem; padding:0; margin:0; list-style:none; }
.performance-card { position:relative; display:grid; grid-template-columns:5rem minmax(0,1fr) 2.6rem; align-items:center; min-height:3.1rem; padding:.25rem .28rem .25rem .92rem; overflow:hidden; border:1px solid #313131; border-radius:.43rem; background:var(--surface); }
.performance-card::before { content:""; position:absolute; inset:0 auto 0 0; width:.23rem; background:var(--stage-color); }
.performance-card time { color:#c8bacd; font-size:.88rem; font-weight:600; white-space:nowrap; }
.performance-card time::before { content:"◷"; margin-right:.4rem; color:#aaa; }
.band-name { min-width:0; padding:.35rem; overflow-wrap:anywhere; font-size:.9rem; font-weight:700; }
.card-stage { display:none; min-width:0; padding:0 .35rem .35rem; color:var(--muted); font-size:.75rem; overflow-wrap:anywhere; }
.favorites-section .band-name { align-self:end; padding-bottom:.08rem; }
.favorites-section .card-stage { display:block; grid-column:2; align-self:start; }
.favorites-section .favorite-button { grid-column:3; grid-row:1 / span 2; }
.favorites-section .performance-card time { grid-row:1 / span 2; }
.favorites-section .performance-card[data-stage="Club David"]::before { background:#c43c3c; }
.favorites-section .performance-card[data-stage="Full Circle Book Coop"]::before { background:#3374c7; }
.favorites-section .performance-card[data-stage="Icon Inside"]::before { background:#b9570c; }
.favorites-section .performance-card[data-stage="Icon Outside"]::before { background:#bd3978; }
.favorites-section .performance-card[data-stage="Vishnu Bunny"]::before { background:#277b4c; }
.performance-card.has-conflict { border-color:#ff5b5b; background:#541f24; }
.performance-card.has-conflict::before { background:#ff5b5b!important; }
.performance-card.has-conflict time, .performance-card.has-conflict .card-stage { color:#ffe1e1; }
.conflict-warning { margin:0 0 .65rem; padding:.75rem .9rem; border:1px solid #ff5b5b; border-radius:.43rem; color:#fff; background:#7b2028; font-weight:700; line-height:1.4; }
.favorite-button { display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid transparent; border-radius:50%; color:#cfc6d2; background:transparent; cursor:pointer; font-size:1.2rem; }
.favorite-button[aria-pressed="true"] { color:var(--accent-light); }
.empty-state, .loading { margin:2rem 0; padding:1.4rem; border:1px solid #393939; border-radius:.65rem; background:var(--surface); color:#d7cddd; text-align:center; line-height:1.5; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:601px) {
  main { padding-bottom:2.5rem; }
  .filters { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:1.3rem; }
  .filters > fieldset:last-child { position:static; grid-column:1/-1; width:auto; padding:0; border:0; background:transparent; box-shadow:none; }
  .view-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; width:100%; margin-top:.1rem; border:1px solid #353535; border-radius:.48rem; overflow:hidden; background:var(--surface-2); }
  .view-button { width:100%; border-radius:0; }
  .view-button + .view-button { border-left-color:#454545; }
}
@media (min-width:900px) {
  html { background:#242424; }
  body { background:linear-gradient(135deg,#191919,#2a1d2b); }
  .site-header { background:#111; }
  main { margin-top:1.5rem; padding:2rem; border:1px solid #343434; border-radius:1rem; background:#111; }
  .filters { grid-template-columns:1fr 1.5fr; }
  .view-controls { display:flex; width:auto; border:0; border-radius:0; overflow:visible; background:transparent; }
  .view-button { width:auto; border-radius:.45rem; }
  .view-button + .view-button { border-left-color:transparent; }
  .view-button[aria-pressed="true"] { background:var(--surface); border-color:#353535; }
  .schedule { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1.7rem; }
  .schedule:has(.favorites-section) { grid-template-columns:1fr; }
  .stage-section + .stage-section { margin-top:0; }
}
@media (prefers-reduced-motion:no-preference) { button { transition:background-color .15s,color .15s,border-color .15s,transform .15s; } button:active { transform:scale(.97); } }