/* --top-h is typed so it can be animated (phones: the header slides away when the bar sticks) */
@property --top-h { syntax: "<length>"; inherits: true; initial-value: 68px; }
:root {
  --bg: #09090c;
  --bg-2: #111116;
  --surface: #16161d;
  --surface-2: #1e1e27;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f1f0f5;
  --muted: #9a98a8;
  --dim: #8b8999;
  --blue: #4f8cff;
  --violet: #a06bff;
  --rose: #ff6b8b;
  --grad: linear-gradient(100deg, var(--blue) 0%, var(--violet) 50%, var(--rose) 100%);
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 "Outfit", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 10px; }

/* ---------- ambient aurora ---------- */
/* Soft gradients with long falloffs, drifting on transform only: each blob is its own GPU layer.
   (They used to sit under an 80px blur filter with a blend mode, which re-blurred a screen-sized
   layer every frame of the drift — the main cost when scrolling on a laptop.) */
.aurora { position: fixed; inset: -20vh -10vw auto; height: 90vh; pointer-events: none; z-index: 0; opacity: 0.55; contain: strict; }
.aurora span { position: absolute; border-radius: 50%; animation: drift 22s var(--ease) infinite alternate; will-change: transform; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 4vw; top: 0; background: radial-gradient(circle closest-side, rgba(79,140,255,.42), rgba(79,140,255,.16) 55%, transparent); }
.aurora span:nth-child(2) { width: 40vw; height: 40vw; left: 34vw; top: -8vh; background: radial-gradient(circle closest-side, rgba(160,107,255,.38), rgba(160,107,255,.14) 55%, transparent); animation-delay: -7s; }
.aurora span:nth-child(3) { width: 38vw; height: 38vw; right: 0; top: 6vh; background: radial-gradient(circle closest-side, rgba(255,107,139,.3), rgba(255,107,139,.11) 55%, transparent); animation-delay: -14s; }
@keyframes drift { to { transform: translate3d(6vw, 8vh, 0) scale(1.15); } }
body::after { /* film grain for edge */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .top, .foot { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(9,9,12,.85), rgba(9,9,12,.55));
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wm { font-weight: 800; font-size: 26px; letter-spacing: -0.055em; line-height: 1; white-space: nowrap; color: var(--text); }
/* the orb is the o: 0.503em sits on the x-height with a 3% overshoot; margins measured for equal gaps either side */
.wm-o { display: inline-block; height: 0.503em; width: 0.503em; vertical-align: -0.008em; margin: 0 0.040em 0 0.080em; overflow: visible; }
.wm-city { font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: #d9d6e4; margin-top: 3px; }
.mark { width: 24px; height: 24px; flex: none; }
/* the mark is the orb itself, drawn still: no animation, so it costs nothing while the page sits idle */
.mark { overflow: visible; filter: drop-shadow(0 0 6px rgba(160,107,255,.35)); }
.search-ic { width: 20px; height: 20px; flex: none; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
.top-actions { display: flex; align-items: center; gap: 10px; }
.sound-toggle, .buddy-link {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font-size: 14px; font-weight: 500; text-decoration: none; transition: .25s var(--ease);
}
.sound-toggle:hover, .buddy-link:hover { background: rgba(255,255,255,.08); }
.sound-toggle[aria-pressed="true"] { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.buddy-link em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 600; }

/* equaliser */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 30%; border-radius: 2px; background: currentColor; opacity: .6; }
.playing .eq i, [aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite; opacity: 1; background: var(--grad); }
.eq i:nth-child(2) { animation-delay: -.3s !important; }
.eq i:nth-child(3) { animation-delay: -.6s !important; }
.eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }

/* ---------- hero ---------- */
.hero { max-width: 1100px; margin: 0 auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 14px; letter-spacing: .02em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
h1 { margin: 0; font-size: clamp(44px, 9vw, 104px); line-height: .95; font-weight: 600; letter-spacing: -0.045em; }
.grad { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s ease-in-out 3 alternate both; } /* plays through the first ~24 s, then rests: no endless repaint */
@keyframes shimmer { to { background-position: 100% 0; } }

.prompt {
  position: relative; display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 36px auto 0; padding: 8px 10px 8px 20px; height: 64px;
  border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  transition: .3s var(--ease);
}
.prompt::before { /* gradient ring on focus */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: var(--grad); opacity: 0; transition: opacity .3s; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.prompt:focus-within::before { opacity: 1; }
.prompt:focus-within { box-shadow: 0 0 0 6px rgba(160,107,255,.08), 0 30px 80px -20px rgba(79,140,255,.35); }
.prompt input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: 400 18px "Outfit", sans-serif; }
.prompt input::placeholder { color: var(--dim); }
.prompt input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.prompt kbd { font: 500 12px "Outfit", system-ui, sans-serif; color: var(--dim); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 9px; margin-right: 8px; }

.sub { margin: 20px auto 0; max-width: 560px; text-wrap: balance; color: var(--muted); font-size: clamp(16px, 2vw, 19px); }
.sub b { color: var(--text); font-weight: 600; }

/* artist autocomplete */
.ac {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30; padding: 8px; text-align: left;
  border-radius: 24px; background: rgba(22,22,29,.97); border: 1px solid var(--line-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  animation: sheetIn .25s var(--ease);
}
.ac-head { padding: 6px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.ac-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 0; border-radius: 16px; background: none; text-align: left; }
.ac-item[aria-selected="true"], .ac-item:hover { background: rgba(255,255,255,.07); }
.ac-item .av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--fallback); background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--c); }
.ac-item.venue .av { border-radius: 12px; display: grid; place-items: center; font-size: 18px; box-shadow: none; background: var(--surface-2); }
.ac-item b { display: block; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item b mark { background: none; color: var(--text); text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.ac-item small { display: block; color: var(--muted); font-size: 13px; }
.ac-item small .up { color: #3ddc84; }
.ac-item > span:nth-child(2) { flex: 1; min-width: 0; }
.ac-item .go { color: var(--dim); font-size: 13px; }
.ac-empty { padding: 12px; color: var(--muted); font-size: 14px; }

.suggest-label { align-self: center; flex: none; white-space: nowrap; font-size: 13px; color: var(--dim); margin-right: 2px; }
#artistSuggest { display: contents; }
.suggest .artist { display: inline-flex; align-items: center; gap: 7px; padding-left: 5px; color: var(--text); }
.suggest .artist i { width: 22px; height: 22px; border-radius: 50%; background: var(--fallback); background-size: cover; background-position: center; }
.suggest-sep { width: 1px; height: 22px; align-self: center; background: var(--line-2); margin: 0 4px; }

/* artist spotlight */
.artist-card {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 24px); margin: 0 0 22px; padding: clamp(14px, 3vw, 22px);
  border-radius: 28px; border: 1px solid var(--line-2); position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%), var(--surface);
}
.artist-card .av { flex: none; width: clamp(76px, 12vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--fallback); background-size: cover; background-position: center; box-shadow: 0 0 0 3px var(--c), 0 20px 50px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.artist-card .info { flex: 1; min-width: 0; }
.artist-card small { font: 500 12px "Outfit", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.artist-card h2 { margin: 4px 0 6px; font-size: clamp(26px, 4.5vw, 46px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.artist-card p { margin: 0; color: var(--muted); font-size: 15px; }
.artist-card p b { color: var(--text); }
.artist-card .play { width: 54px; height: 54px; font-size: 17px; }
.artist-card.playing .play { background: var(--text); color: var(--bg); }

.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.suggest button { border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 14px; transition: .2s var(--ease); }
.suggest button:hover { color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,.07); }

/* ---------- controls ---------- */
.controls {
  position: sticky; top: var(--top-h, 68px); z-index: 15; padding: 8px var(--gutter) 10px; border-bottom: 1px solid var(--line); max-width: 1600px; margin: 0 auto;
  background: rgba(9,9,12,.9); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
}
#controlsSentinel { height: 1px; }
.controls.stuck .rail-wrap { height: 0; overflow: hidden; visibility: hidden; }
.controls.stuck { padding-block: 8px 6px; box-shadow: 0 12px 30px -16px rgba(0,0,0,.8); }

/* Date carousel: slim day pills, arrows on desktop, faded edges */
.rail-wrap { position: relative; margin: 0 calc(var(--gutter) * -1); }
.rail-wrap::before, .rail-wrap::after { display: none; content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--gutter) + 20px); z-index: 2; pointer-events: none; }
.rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
.rail-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg) 30%, transparent); }
.date-rail { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter) - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter) - 24px), transparent); display: flex; gap: 6px; overflow-x: auto; padding: 6px var(--gutter) 8px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.date-rail::-webkit-scrollbar { display: none; }
.rail-arrow {
  position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -19px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 20px; line-height: 1;
  display: grid; place-items: center; padding-bottom: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.5); transition: .2s var(--ease);
}
.rail-arrow:hover { background: var(--text); color: var(--bg); }
.rail-arrow.prev { left: calc(var(--gutter) - 10px); }
.rail-arrow.next { right: calc(var(--gutter) - 10px); }
.day {
  position: relative; flex: none; scroll-snap-align: start; min-width: 60px; height: 76px; padding: 8px 6px 10px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); text-align: center; line-height: 1.1; color: var(--text); transition: .2s var(--ease);
}
.day small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.day.today { border-color: color-mix(in srgb, var(--blue) 55%, transparent); }
.day strong { display: block; font-size: 22px; font-weight: 700; margin: 3px 0 2px; letter-spacing: -.02em; }
.day span { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* busy-ness bar: wider = more gigs that day */
.day .busy { position: absolute; left: 50%; bottom: 5px; width: calc(36px * var(--b)); height: 4px; border-radius: 3px; transform: translateX(-50%); background: var(--grad); opacity: .85; }
.day.no-gigs { opacity: .35; }
.day:hover { border-color: var(--line-2); background: var(--surface-2); }
.day.weekend { background: color-mix(in srgb, var(--rose) 7%, var(--surface)); }
.day.weekend small { color: var(--rose); }
.day.in-range:not(.on) { border-color: color-mix(in srgb, var(--violet) 70%, transparent); background: color-mix(in srgb, var(--violet) 13%, var(--surface)); }
.day.wk { min-width: 84px; }
.day.wk strong { font-size: 15px; margin: 6px 0 5px; }
.rail-gap { flex: none; width: 1px; align-self: stretch; margin: 8px 4px; background: var(--line-2); }
.day.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.day.on small, .day.on span { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.day.on .busy { background: var(--bg); opacity: .5; }
.rail-month {
  flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 6px 0 10px; margin-left: 4px;
  border-left: 1px solid var(--line-2); color: var(--text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}

/* Calendar popover */
.cal-btn .cal-ic { width: 17px; height: 17px; color: var(--muted); }
.cal-btn.active .cal-ic { color: var(--text); }
.pop.cal-pop { width: 320px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 16px; font-weight: 600; }
.cal-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; padding-bottom: 2px; }
.cal-nav:hover:not(:disabled) { background: var(--text); color: var(--bg); }
.cal-nav:disabled { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--dim); padding: 2px 0 4px; }
.cal-day {
  aspect-ratio: 1; display: grid; place-content: center; gap: 1px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; transition: .15s var(--ease);
}
.cal-day small { font-size: 9.5px; font-weight: 500; color: var(--muted); }
.cal-day:disabled { color: var(--dim); opacity: .45; cursor: default; }
.cal-day.l1 { background: color-mix(in srgb, var(--violet) 12%, transparent); }
.cal-day.l2 { background: color-mix(in srgb, var(--violet) 28%, transparent); }
.cal-day.l3 { background: color-mix(in srgb, var(--violet) 48%, transparent); }
.cal-day.l4 { background: color-mix(in srgb, var(--violet) 72%, transparent); }
.cal-day.past { opacity: .4; background: none !important; }
.cal-day.zero:not(.past) { opacity: .5; border: 1px dashed var(--line-2); }
.cal-day:hover:not(:disabled) { border-color: var(--text); }
.cal-day.today { border-color: var(--line-2); }
.cal-day.on { background: var(--text); color: var(--bg); }
.cal-day.on small { color: var(--bg); }
.cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cal-key { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--dim); }
.cal-key i { width: 10px; height: 10px; border-radius: 3px; }
.cal-key i:last-of-type { margin-right: 4px; }
.cal-key .k1 { background: color-mix(in srgb, var(--violet) 10%, transparent); }
.cal-key .k2 { background: color-mix(in srgb, var(--violet) 22%, transparent); }
.cal-key .k1 { background: color-mix(in srgb, var(--violet) 12%, transparent); }
.cal-key .k2 { background: color-mix(in srgb, var(--violet) 28%, transparent); }
.cal-key .k3 { background: color-mix(in srgb, var(--violet) 48%, transparent); }
.cal-key .k4 { background: color-mix(in srgb, var(--violet) 72%, transparent); }
.pop-clear:disabled { opacity: .4; }

/* Genre tabs: always visible, swipe on small screens */
.genre-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter); }
.genre-tabs::-webkit-scrollbar { display: none; }
.genre-tabs .chip { padding: 7px 13px; }
.genre-row .chip.all.on { color: var(--bg); background: var(--text); border-color: var(--text); }
.genre-row .chip.all.on em { color: color-mix(in srgb, var(--bg) 65%, transparent); }

/* Toolbar: when + dropdown filters on one line */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.tb-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.seg button { flex: none; border: 0; background: none; color: var(--muted); padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: .2s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--text); color: var(--bg); }

.dd { position: relative; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; transition: .2s var(--ease);
}
.dd-btn .chev { width: 12px; height: 12px; color: var(--dim); transition: transform .2s var(--ease); }
.dd-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
.dd-btn[aria-expanded="true"] { border-color: var(--line-2); background: var(--surface-2); }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-btn.active { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; border-color: transparent; }
.dd-btn.toggle { padding: 0 15px; color: var(--muted); }
.dd-btn.toggle[aria-pressed="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }

.pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(440px, calc(100vw - 2 * var(--gutter)));
  padding: 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.7); animation: pop-in .18s var(--ease);
}
.pop.narrow { width: 220px; padding: 6px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.pop-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.pop-head b { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.pop-clear { border: 0; background: none; color: var(--violet); font-size: 13px; font-weight: 500; padding: 2px 4px; }
.pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-opts { display: grid; }
.pop-opts button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border: 0; background: none; color: var(--muted); text-align: left; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; }
.pop-opts button small { color: var(--dim); font-size: 12px; font-weight: 400; }
.pop-opts button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.pop-opts button.on { color: var(--text); background: rgba(255,255,255,.08); }

.chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 500; transition: .2s var(--ease);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--violet)); }
.chip em { font-style: normal; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.on { color: var(--text); border-color: var(--c, var(--violet)); background: color-mix(in srgb, var(--c, var(--violet)) 16%, transparent); }

/* ---------- results ---------- */
.results { padding: 0 var(--gutter) 40px; max-width: 1600px; margin: 0 auto; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.results-head p { margin: 0; color: var(--muted); font-size: 15px; }
.results-head b { color: var(--text); font-weight: 600; }
.clear { border: 0; background: none; color: var(--violet); font-weight: 500; padding: 4px; }

.day-group { margin-top: 26px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.day-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.day-head h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -0.03em; }
.day-head span { color: var(--dim); font-size: 14px; }
.day-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); align-self: center; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* ---------- tile ---------- */
.tile {
  --c: var(--violet);
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); text-align: left; padding: 0; isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tile .art { position: absolute; inset: 0; z-index: -2; background: var(--fallback); }
.tile .art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9) brightness(.85); }
.tile::before { /* readable scrim */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,9,12,.25) 0%, transparent 30%, rgba(9,9,12,.55) 58%, rgba(9,9,12,.96) 100%);
}
.tile::after { /* glow ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(140deg, var(--c), transparent 40%, transparent 60%, var(--c)); opacity: 0; transition: opacity .4s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.tile:hover, .tile:focus-visible { transform: translateY(-6px); border-color: transparent; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--c) 55%, transparent); outline: none; }
.tile:hover::after, .tile:focus-visible::after, .tile.playing::after { opacity: 1; }
.tile:hover .art img { transform: scale(1.07); filter: saturate(1.1) brightness(.95); }

.tile .badge {
  position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 52px; padding: 6px 0;
  border-radius: 14px; background: rgba(9,9,12,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); line-height: 1.05;
}
.tile .badge small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tile .badge strong { font-size: 20px; font-weight: 700; }
.tile .listen {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: 999px; background: rgba(9,9,12,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 500; color: var(--text);
  opacity: .9; transition: .3s var(--ease);
}
.tile.playing .listen { background: rgba(255,255,255,.92); color: var(--bg); }
/* No preview: service icons to find the artist elsewhere */
.tile .listen.none { padding: 0 5px; gap: 0; }
.listen.none .svcs { display: inline-flex; gap: 4px; align-items: center; }
.tile:hover .listen.none { opacity: 1; }
.svc { --svc-ink: #09090c; display: inline-grid; place-items: center; cursor: pointer; color: rgba(255,255,255,.88); transition: color .2s, transform .2s; }
.tile .svc { width: 26px; height: 26px; border-radius: 50%; }
.tile .svc svg { width: 20px; height: 20px; }
.svc:hover { transform: scale(1.12); }
.svc-spotify:hover { color: #1ed760; }
.svc-apple:hover { color: #fa3c5a; }
.svc-youtube:hover { color: #ff2a2a; }
.tile.playing .listen .eq i { background: var(--bg); }
.tile .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 16px; }
.tile .genre { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }
.tile .genre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.tile h3 { margin: 0; font-size: 21px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .where { margin: 6px 0 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font: 500 12.5px "Outfit", system-ui, sans-serif; color: var(--muted); }
.tile .row .price { color: var(--text); }
.tile .now-playing { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 0px); }
.tile .track { max-height: 0; overflow: hidden; opacity: 0; font-size: 12.5px; color: var(--text); transition: .4s var(--ease); }
.tile.playing .track { max-height: 24px; opacity: .85; margin-top: 6px; }
.tile .progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); }

/* skeletons */
.skeleton { aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -150% 0; } }

.empty { text-align: center; padding: 80px 0; color: var(--muted); }
.empty h3 { color: var(--text); font-size: 24px; font-weight: 600; margin: 14px 0 4px; }
.mark.lg { width: 44px; height: 44px; }

/* ---------- past gigs ---------- */
section.past { padding: 20px var(--gutter) 30px; max-width: 1600px; margin: 0 auto; }
.past-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.past-head .kicker { margin-bottom: 6px; }
.past-head h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.past-head > p { margin: 0; color: var(--muted); font-size: 15px; max-width: 420px; }
.dot.off { background: var(--dim); animation: none; box-shadow: none; }
.past-rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px var(--gutter) 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.past-rail::-webkit-scrollbar { display: none; }
.past-rail .tile { flex: 0 0 clamp(170px, 22vw, 230px); scroll-snap-align: start; }
.past.compact { padding-top: 26px; padding-bottom: 0; }
.past.compact .past-head h2 { font-size: clamp(22px, 3vw, 30px); }
.past.compact .past-head .kicker { display: none; }
.past.compact .past-rail .tile { flex-basis: clamp(150px, 15vw, 190px); aspect-ratio: 1; }
.past.compact .tile h3 { font-size: 15px; }
.past.compact .tile .where, .past.compact .tile .row { display: none; }
.past.compact .tile .genre { font-size: 10.5px; margin-bottom: 3px; }
.past.compact .tile .meta { padding: 12px; }
.past.compact .tile .listen { top: 10px; right: 10px; padding: 0 9px; height: 28px; }
.past.compact .tile .listen .txt { display: none; }
.past.compact .tile .badge { top: 10px; left: 10px; }
.tile.is-past .art img { filter: grayscale(1) brightness(.6) contrast(1.1); }
.tile.is-past:hover .art img { filter: grayscale(0) brightness(.9); }
.tile.is-past .badge { width: auto; padding: 6px 10px; }
.tile.is-past .badge small { color: var(--rose); }
.tile.is-past .badge strong { font-size: 15px; white-space: nowrap; }
.tile.is-past h3 { font-size: 18px; }
.sheet.is-past .cta { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.sheet.is-past #sheetBuddy, .sheet.is-past #sheetCal { display: none; }

/* ---------- Gig Buddy teaser ---------- */
.buddy { padding: 40px var(--gutter) 80px; max-width: 1100px; margin: 0 auto; }
.buddy-card {
  position: relative; padding: clamp(28px, 6vw, 64px); border-radius: 32px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(160,107,255,.22), transparent 55%), radial-gradient(100% 120% at 0% 100%, rgba(79,140,255,.18), transparent 55%), var(--surface);
  border: 1px solid var(--line-2);
}
.buddy-card h2 { margin: 0 0 12px; font-size: clamp(34px, 6vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.buddy-card > p { max-width: 560px; color: var(--muted); font-size: 18px; margin: 0; }
.buddy-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.buddy-points li { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.buddy-points b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

.foot { padding: 30px var(--gutter) 50px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; text-align: center; }
.foot p { margin: 4px 0; }

/* ---------- sheet ---------- */
.sheet {
  width: min(560px, 100vw); max-height: min(92vh, 900px); padding: 0; border: 1px solid var(--line-2); border-radius: 28px;
  background: var(--bg-2); color: var(--text); overflow: auto; box-shadow: 0 40px 120px rgba(0,0,0,.7);
}
.sheet[open] { animation: sheetIn .45s var(--ease); }
.sheet::backdrop { background: rgba(5,5,8,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.sheet .close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(9,9,12,.6); backdrop-filter: blur(10px); }
.sheet-art { position: relative; aspect-ratio: 16 / 10; background: var(--fallback, var(--surface)); }
.sheet-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, var(--bg-2)); }
.sheet-body { padding: 0 26px 26px; margin-top: -30px; position: relative; }
.sheet-meta { margin: 0; font: 500 13px "Outfit", system-ui, sans-serif; color: var(--c, var(--violet)); text-transform: uppercase; letter-spacing: .04em; }
.sheet h2 { margin: 6px 0 6px; font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
.sheet-venue { margin: 0; color: var(--muted); }
.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.sheet-tags span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.sheet-desc { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.sheet-player { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; }
.sheet-player small { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.sheet-player > div { flex: 1; min-width: 0; }
.sheet-player span:not(.eq) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; font-size: 15px; flex: none; }
.artist-svcs { display: flex; gap: 6px; flex: none; }
.artist-svcs .svc { width: 34px; height: 34px; }
.artist-svcs .svc svg { width: 26px; height: 26px; }
.sheet-listen { margin: 0 0 18px; }
.sheet-listen small { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.sheet-listen > div { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-listen .svc { gap: 8px; grid-auto-flow: column; height: 38px; padding: 0 14px 0 9px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.sheet-listen .svc svg { width: 20px; height: 20px; }
.sheet-listen .svc span { color: var(--text); }
.sheet-listen .svc:hover { transform: translateY(-1px); background: rgba(255,255,255,.05); }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cta { flex: 1 1 160px; display: grid; place-items: center; height: 52px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; transition: .2s; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(255,255,255,.4); }
.ghost { flex: 1 1 140px; height: 52px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-weight: 500; }
.ghost.icon { flex: 0 0 52px; padding: 0; font-size: 14px; }
.ghost:hover { background: rgba(255,255,255,.06); }
.sheet-source { margin: 16px 0 0; color: var(--dim); font-size: 12.5px; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; padding: 12px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 500; font-size: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: sheetIn .35s var(--ease); max-width: calc(100vw - 32px); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .top { padding-block: 10px; }
  .wm { font-size: 23px; }
  .wm-city { font-size: 10px; letter-spacing: 0.3em; }
  .buddy-link { display: none; }
  .prompt { height: 56px; }
  .prompt input { font-size: 16px; }
  .prompt kbd { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { aspect-ratio: 3 / 4.4; border-radius: 18px; }
  .tile h3 { font-size: 16px; }
  .tile .where { font-size: 12.5px; }
  .tile .meta { padding: 12px; }
  .tile .badge { top: 10px; left: 10px; width: 44px; }
  .tile .badge strong { font-size: 17px; }
  .tile .listen { top: 10px; right: 10px; padding: 0 9px; }
  .tile .listen .txt { display: none; }
  .tile .row { font-size: 11px; }
  .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 28px 28px 0 0; max-height: 92vh; }
  .suggest { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .suggest button { flex: none; }
  /* Filters: one swipeable row; dropdowns open as a bottom sheet */
  .rail-arrow { display: none; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: none; }
  .tb-sep { display: none; }
  .seg button { padding: 6px 11px; }
  .pop, .pop.narrow { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 70vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom)); animation: sheet-up .22s var(--ease); }
  body.pop-open .controls::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.6); animation: pop-in .2s; }
  .pop-chips .chip { padding: 9px 14px; font-size: 14.5px; }
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- accounts ---------- */
.account-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  color: var(--text); font-size: 14px; font-weight: 500; transition: .2s var(--ease);
}
.account-btn:hover { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; }
.account-btn .me-av:empty { display: none; }
.account-btn.signed-in { padding-left: 4px; }
.me-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: 14px; }

.dd-btn.foryou { gap: 7px; }
.dd-btn.foryou svg { width: 15px; height: 15px; color: var(--rose); }
.dd-btn.foryou[aria-pressed="true"] { color: #fff; background: var(--grad); border-color: transparent; }
.dd-btn.foryou[aria-pressed="true"] svg { color: #fff; }

.follow-btn { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: 14px; transition: .2s var(--ease); }
.follow-btn:hover { background: rgba(255,255,255,.1); }
.follow-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

#sheetFollow[aria-pressed="true"] { background: rgba(255,255,255,.08); border-color: var(--line-2); }
#sheetFollow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost.heart svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.8; transition: .2s var(--ease); }
.ghost.heart[aria-pressed="true"] svg { fill: var(--rose); stroke: var(--rose); }
.ghost.heart[aria-pressed="true"] { border-color: color-mix(in srgb, var(--rose) 50%, transparent); }
.link-btn { border: 0; background: none; color: var(--violet); font-weight: 500; font-size: 14px; padding: 4px 0; margin-top: 14px; }
.link-btn:hover { text-decoration: underline; }

.sheet.account .sheet-body { padding-top: 34px; margin-top: 0; }
.sheet.account h2 { font-size: 28px; margin-bottom: 4px; }
.acct-block { padding: 18px 0; border-top: 1px solid var(--line); }
.acct-block:first-of-type { border-top: 0; padding-top: 8px; }
.acct-block h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.acct-block h3 em { font-style: normal; color: var(--muted); margin-left: 4px; }
.acct-lede { color: var(--muted); margin: 0 0 14px; }
.acct-note { color: var(--dim); font-size: 13.5px; margin: 10px 0 0; }
.acct-note:empty { display: none; }
.acct-email { display: grid; gap: 8px; }
.acct-email input, .acct-import input, .acct-row select {
  height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; min-width: 0;
}
.acct-email input:focus, .acct-import input:focus { outline: none; border-color: var(--violet); }
.acct-email .cta { flex: none; height: 48px; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.acct-providers { display: grid; gap: 8px; margin-top: 8px; }
.acct-providers:empty { display: none; }
.acct-providers .ghost { height: 48px; }
.acct-me { display: flex; align-items: center; gap: 12px; }
.acct-me .me-av { width: 44px; height: 44px; font-size: 18px; }
.acct-me > div { flex: 1; min-width: 0; }
.acct-me small { display: block; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.acct-me .link-btn { margin: 0; }
.acct-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: var(--muted); }
.acct-row select { height: 40px; }
.acct-import { display: flex; gap: 8px; align-items: center; }
.acct-import input { flex: 1; }
.acct-import .ghost { flex: none; height: 48px; padding: 0 18px; }
.acct-import .svc { width: 34px; height: 34px; color: #1ed760; }
.acct-import .svc svg { width: 30px; height: 30px; }
.acct-import.disabled { opacity: .45; pointer-events: none; }
.acct-follows { display: flex; flex-wrap: wrap; gap: 6px; }
.follow-chip { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.follow-chip button { border: 0; background: none; color: var(--text); font-size: 13.5px; padding: 7px 4px 7px 12px; }
.follow-chip .fc-go em { font-style: normal; color: var(--violet); font-size: 12px; margin-left: 6px; }
.follow-chip .fc-x { color: var(--dim); padding: 7px 11px 7px 6px; font-size: 11px; }
.follow-chip .fc-x:hover { color: var(--rose); }
.acct-saved { display: grid; gap: 6px; }
.saved-row { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.saved-row:hover { border-color: var(--line-2); }
.saved-row .d { font: 500 12px "Outfit", system-ui, sans-serif; color: var(--rose); text-transform: uppercase; width: 62px; flex: none; }
.saved-row .n { min-width: 0; font-weight: 500; }
.saved-row small { display: block; color: var(--dim); font-weight: 400; }
@media (max-width: 640px) {
  .account-btn .label { display: none; }
  .account-btn { width: 40px; padding: 0; justify-content: center; }
  .account-btn:not(.signed-in)::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
  .acct-import { flex-wrap: wrap; }
  .acct-import .svc { display: none; }
}
.genre-tabs .chip.empty:not(.on) { opacity: .55; pointer-events: none; }

.cal-dd { display: inline-flex; align-items: center; }
.cal-clear { margin-left: -36px; margin-right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: var(--text); font-size: 16px; line-height: 1; z-index: 1; }
.cal-clear:hover { background: var(--text); color: var(--bg); }
.cal-dd .cal-btn.active { padding-right: 40px; }
.cal-dd .cal-btn.active .chev { display: none; }
.cal-month-btn { border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600; padding: 8px 14px; }
.cal-month-btn:disabled { opacity: .4; }
/* Inside a day-grouped feed the date badge repeats the heading. */
.day-group .tile .badge { display: none; }
@media (min-width: 641px) { .toast { left: auto; right: 28px; transform: none; } }
@media (max-width: 640px) {
  .pop.cal-pop { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 24px 24px 0 0; padding: 10px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
  .pop.cal-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 12px; }
  .cal-day { font-size: 16px; aspect-ratio: auto; height: 48px; }
  .cal-day small { font-size: 10.5px; }
  .day { min-width: 58px; }
}
/* Fixed bottom sheets must escape the sticky bar: backdrop-filter would make it their containing block. */
@media (max-width: 640px) {
  .controls { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9,9,12,.97); }
}

/* Today: blue label + ring, even on a weekend */
.day.today small, .day.today.weekend small { color: var(--blue); }
/* Smooth collapse of the day strip when the bar sticks */
.rail-wrap { transition: none; } /* the fold is driven by scroll position, frame by frame */
.controls.stuck .rail-wrap { height: 0; overflow: hidden; visibility: hidden; }
/* Selected pill / tab: a short pop so the change registers */
.day.on, .genre-tabs .chip.on { animation: sel-pop .25s var(--ease); }
@keyframes sel-pop { 50% { transform: scale(1.05); } }
/* Day stepper: only in the compact (stuck) bar */
.step-btn { display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; padding-bottom: 2px; }
.step-btn:hover:not(:disabled) { background: var(--text); color: var(--bg); }
.step-btn:disabled { opacity: .3; }
.controls.stuck .step-btn { display: grid; place-items: center; }
/* Filters: inline on desktop, a bottom sheet on phones */
.more-btn, .more-head { display: none; }
.more-filters { display: contents; }
.more-btn svg { width: 17px; height: 17px; }
.more-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.more-count[hidden] { display: none; }
@media (max-width: 640px) {
  .more-btn { display: inline-flex; }
  .more-filters {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 80vh; overflow-y: auto;
    padding: 10px var(--gutter) calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
    background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 -20px 60px rgba(0,0,0,.6); animation: sheet-up .22s var(--ease);
  }
  .more-filters::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 10px; }
  .more-filters.open { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  body.more-open .controls::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.6); }
  .more-head { display: flex; align-items: center; justify-content: space-between; }
  .more-head b { font-size: 17px; }
  .more-filters > .dd-btn.toggle { justify-content: center; height: 46px; font-size: 15px; }
  /* Area and Time show their options inline inside the sheet */
  .more-filters .dd > .dd-btn { display: none; }
  .more-filters .dd > .pop, .more-filters .dd > .pop[hidden] { display: block !important; position: static; width: auto; max-height: none; padding: 0; border: 0; background: none; box-shadow: none; animation: none; border-radius: 0; }
  #ddTime .pop-opts { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  #ddTime .pop-opts button { border: 1px solid var(--line); justify-content: center; flex-direction: column; align-items: center; gap: 2px; }
  #ddArea .pop-head b::before { content: ""; }
  .controls.stuck .step-btn { width: 38px; height: 38px; }
}
@media (max-width: 640px) {
  .more-filters #ddTime .pop::before { content: "Time of day"; display: block; margin: 0 2px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
}
@media (max-width: 640px) {
  .more-filters { padding-bottom: 0; }
  .more-head { order: 99; position: sticky; bottom: 0; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line); }
  .more-head b { display: none; }
  #moreDone { flex: 1; height: 48px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 15px; font-weight: 600; }
}
.pop-chips .chip.empty:not(.on) { opacity: .55; }

/* 5. "All genres" stays put while the other tabs scroll */
/* 6. room for the strip arrows */
@media (min-width: 641px) { .date-rail { padding-right: calc(var(--gutter) + 44px); } }
/* 4. mobile sheets dim everything behind them, including the strip */
@media (max-width: 640px) {
  .more-filters.open, .pop:not([hidden]) { box-shadow: 0 0 0 100vmax rgba(0,0,0,.62); }
  body.more-open .controls::before, body.pop-open .controls::before { display: none; }
  /* toggles read as switch rows, not buttons */
  .more-filters > .dd-btn.toggle {
    justify-content: flex-start; gap: 10px; height: 54px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: none; color: var(--text); font-size: 16px;
  }
  .more-filters > .dd-btn.toggle::after {
    content: ""; flex: none; margin-left: auto; width: 44px; height: 26px; border-radius: 13px; background: var(--line-2);
    background-image: radial-gradient(circle at 13px 50%, #fff 9px, transparent 10px); transition: .2s var(--ease);
  }
  .more-filters > .dd-btn.toggle[aria-pressed="true"] { background: none; color: var(--text); border-color: var(--line); }
  .more-filters > .dd-btn.toggle[aria-pressed="true"]::after { background-color: var(--violet); background-image: radial-gradient(circle at 31px 50%, #fff 9px, transparent 10px); }
  .more-filters > .dd-btn.foryou[aria-pressed="true"] svg { color: var(--rose); }
}
.rail-month { position: relative; z-index: 1; }

.controls.has-pick .step-btn { display: grid; place-items: center; }
/* 3. pinned "All genres": nothing visible beneath it */

/* "All genres" sits outside the scrolling tabs, so nothing can slide under it */
.genre-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.genre-row #genreAll .chip { padding: 7px 13px; }
.genre-row .genre-tabs { flex: 1; min-width: 0; margin: 0 calc(var(--gutter) * -1) 0 0; padding: 4px var(--gutter) 4px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); }
@media (min-width: 641px) {
  .date-rail { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--gutter) - 8px), #000 calc(var(--gutter) + 56px), #000 calc(100% - var(--gutter) - 56px), transparent calc(100% - var(--gutter) + 8px)); mask-image: linear-gradient(90deg, transparent calc(var(--gutter) - 8px), #000 calc(var(--gutter) + 56px), #000 calc(100% - var(--gutter) - 56px), transparent calc(100% - var(--gutter) + 8px)); }
  .date-rail.at-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter) - 56px), transparent calc(100% - var(--gutter) + 8px)); mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter) - 56px), transparent calc(100% - var(--gutter) + 8px)); }
}
.rail-month { scroll-snap-align: start; }
.tile .row .tbc { font-family: "Outfit", system-ui, sans-serif; letter-spacing: 0; opacity: .55; }
/* Phone tap targets: 44px for stepper, tabs and toolbar buttons */
@media (max-width: 640px) {
  .controls .step-btn, .controls.stuck .step-btn { width: 44px; height: 44px; }
  .genre-row .chip { min-height: 40px; }
  .toolbar .dd-btn { height: 44px; }
}

/* ===================== Centred day strip + orb (v2) ===================== */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --near { syntax: "<number>"; initial-value: 0; inherits: true; }

/* Symmetry: the toolbar and genre tabs centre under the centred hero */
.toolbar { justify-content: center; }
.wk-btn em { font-style: normal; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.wk-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.wk-btn[aria-pressed="true"] em { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.genre-row { justify-content: center; }
.genre-row .genre-tabs { flex: 0 1 auto; margin-right: 0; padding-right: 12px; }

/* The strip: every tile can sit in the middle (half-width padding both sides), snapping to centre */
.date-rail, .date-rail.at-start {
  --tile: 62px;
  align-items: center; gap: 8px; height: 184px; padding: 0 calc(50% - var(--tile) / 2);
  scroll-snap-type: x proximity; scroll-padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.date-rail .day {
  scroll-snap-align: center; min-width: var(--tile); width: var(--tile); height: 80px; padding: 9px 4px 11px;
  /* grows as it nears the middle (--near: 0 far → 1 centred), set by coverflow() */
  transform: scale(calc(.9 + var(--near) * .14)); transition: transform .25s var(--ease), opacity .25s, background .2s, border-color .2s;
  opacity: calc(.78 + var(--near) * .22);
}
.date-rail .rail-month { scroll-snap-align: none; height: 80px; }
/* Past nights: dimmed but clickable */
.date-rail .day.past { opacity: calc(.32 + var(--near) * .4); filter: saturate(.4); }
.date-rail .day.past:hover { opacity: .9; filter: none; }
.date-rail .day.past small { color: var(--dim); }
.date-rail .day.no-gigs { opacity: calc(.28 + var(--near) * .3); }
.rail-wrap { padding-inline: var(--gutter); }
.rail-arrow.prev { left: calc(var(--gutter) - 6px); }
.rail-arrow.next { right: calc(var(--gutter) - 6px); }
@media (min-width: 641px) { .date-rail { padding-right: calc(50% - var(--tile) / 2); } }

/* The focus day (picked day, or tonight): larger, no box — it floats on the orb */
.date-rail .day.focus {
  --tile: 96px; min-width: 96px; width: 96px; height: 104px; margin-inline: 14px; z-index: 2;
  background: none; border-color: transparent; opacity: 1; filter: none; isolation: isolate; transform: scale(calc(.92 + var(--near) * .16));
}
.date-rail .day.focus small { font-size: 12px; color: #fff; letter-spacing: .14em; }
.date-rail .day.focus strong { font-size: 38px; margin: 2px 0 0; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.date-rail .day.focus span { color: rgba(255,255,255,.8); font-size: 12.5px; }
.date-rail .day.focus .busy { display: none; }
.date-rail .day.focus.on { background: none; color: #fff; }

/* Orb: a dark glass bubble with an iridescent, slowly turning rim and a soft wobble (pure CSS) */
.orb { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; z-index: -1; pointer-events: none; }
.orb i, .orb::before, .orb::after { content: ""; position: absolute; inset: 0; border-radius: 47% 53% 51% 49% / 52% 46% 54% 48%; animation: orb-morph 9s ease-in-out infinite alternate; }
/* glass core: deep centre, faint top highlight, inner rim light */
.orb i {
  background:
    radial-gradient(60% 42% at 38% 22%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(closest-side, #0b0b10 55%, #17141f 82%, #2a2140 100%);
  box-shadow: inset 0 0 18px rgba(160,107,255,.35), inset 0 -10px 24px rgba(255,107,139,.18);
}
/* iridescent rim: a turning conic gradient cut to a thin ring */
.orb::before {
  inset: -3px;
  background: conic-gradient(from var(--ang), #4f8cff, #a06bff 22%, #ff6b8b 45%, #ffb36b 58%, #4f8cff 80%, #6be0ff 92%, #4f8cff);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 91%, #000 97%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 86%, #000 91%, #000 97%, transparent 100%);
  animation: orb-morph 9s ease-in-out infinite alternate, orb-turn 7s linear infinite;
}
/* halo: the same colours, blurred */
.orb::after {
  inset: -6px; z-index: -1; filter: blur(14px); opacity: .5;
  background: conic-gradient(from var(--ang), #4f8cff, #a06bff, #ff6b8b, #ffb36b, #4f8cff);
  animation: orb-morph 9s ease-in-out infinite alternate, orb-turn 7s linear infinite, orb-breathe 4.5s ease-in-out infinite;
}
@keyframes orb-turn { to { --ang: 360deg; } }
@keyframes orb-breathe { 50% { opacity: .78; } }
@keyframes orb-morph {
  0% { border-radius: 47% 53% 51% 49% / 52% 46% 54% 48%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 53% 47% 45% 55% / 47% 55% 45% 53%; transform: rotate(8deg) scale(1.03); }
  66% { border-radius: 50% 50% 56% 44% / 55% 48% 52% 45%; transform: rotate(-6deg) scale(.98); }
  100% { border-radius: 45% 55% 49% 51% / 49% 53% 47% 51%; transform: rotate(4deg) scale(1.02); }
}
/* Tonight when nothing is picked: the orb idles (slower, dimmer) — a picked day gets the full show */
.day.focus:not(.on) .orb { opacity: .7; }
.day.focus:not(.on) .orb::before, .day.focus:not(.on) .orb::after { animation-duration: 9s, 14s, 6s; }
.day.focus.past .orb { filter: saturate(.5); }
.day.focus:hover .orb { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .orb i, .orb::before, .orb::after { animation: none !important; }
  .date-rail .day { transition: none; }
}

/* Tiles: playing a preview lights them up in their genre colour, like the orb */
.tile.playing { transform: translateY(-6px); border-color: transparent; animation: tile-glow 2.4s ease-in-out infinite; }
.tile.playing::after {
  opacity: 1; padding: 2px;
  background: conic-gradient(from var(--ang), var(--c), #a06bff 25%, transparent 40%, var(--c) 55%, #ff6b8b 75%, transparent 88%, var(--c));
  animation: orb-turn 3.2s linear infinite;
}
@keyframes tile-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 22px 60px -20px color-mix(in srgb, var(--c) 80%, #a06bff),
      -18px 0 50px -24px rgba(79,140,255,.55), 18px 0 50px -24px rgba(255,107,139,.5);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 30px 90px -16px color-mix(in srgb, var(--c) 70%, #ff6b8b),
      -26px -6px 70px -18px rgba(160,107,255,.75), 26px 6px 70px -18px rgba(255,179,107,.55);
  }
}
.tile.playing .art img { transform: scale(1.09); filter: saturate(1.2) brightness(1); }
/* a soft colour wash rising from the bottom while it plays */
.tile .art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%); opacity: 0; transition: opacity .6s var(--ease); mix-blend-mode: screen; }
.tile.playing .art::after { opacity: .9; animation: wash 2.4s ease-in-out infinite; }
@keyframes wash { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tile.playing, .tile.playing::after, .tile.playing .art::after { animation: none; } }

/* Day headings: centred between two hairlines */
.day-head { justify-content: center; }
.day-head .line:first-child { background: linear-gradient(-90deg, var(--line-2), transparent); }
.results-head { justify-content: center; text-align: center; }

@media (max-width: 640px) {
  .date-rail { --tile: 54px; height: 128px; gap: 6px; }
  .date-rail .day { height: 72px; }
  .date-rail .day.focus { --tile: 80px; min-width: 80px; width: 80px; height: 92px; margin-inline: 10px; }
  .date-rail .day.focus strong { font-size: 32px; }
  .orb { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  .toolbar { justify-content: flex-start; }
  .genre-row { justify-content: flex-start; }
}

.genre-row #genreAll .chip { white-space: nowrap; }
@media (max-width: 640px) { .date-rail { height: 156px; } }
@media (max-width: 640px) { .date-rail .day { height: 80px; padding: 8px 3px 12px; } }

/* ===================== v3: critic round 1 ===================== */
/* 1. A glass bubble, not a ring: bigger, specular highlight, inner iridescent film, uneven rim, livelier wobble */
.orb { width: 148px; height: 148px; margin: -74px 0 0 -74px; }
.orb i {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.30), rgba(255,255,255,.06) 16%, transparent 26%),
    radial-gradient(circle at 70% 78%, rgba(255,179,107,.16), transparent 30%),
    radial-gradient(closest-side, #07070b 50%, #120f1a 76%, #251c38 100%);
  box-shadow: inset 0 0 22px rgba(160,107,255,.35), inset 0 -12px 26px rgba(255,107,139,.2), inset 8px 6px 18px rgba(79,140,255,.18);
}
/* inner film: the rim colours bleeding inward, faintly */
.orb b { position: absolute; inset: 0; border-radius: inherit; opacity: .38; mix-blend-mode: screen;
  background: conic-gradient(from calc(var(--ang) + 90deg), #4f8cff, #a06bff, #ff6b8b, #ffb36b, #6be0ff, #4f8cff);
  -webkit-mask: radial-gradient(closest-side, transparent 55%, #000 82%, transparent 100%); mask: radial-gradient(closest-side, transparent 55%, #000 82%, transparent 100%);
  animation: orb-morph 9s ease-in-out infinite alternate, orb-turn 11s linear infinite reverse; }
/* uneven rim: thicker bottom-right, thinner top-left */
.orb::before {
  -webkit-mask: radial-gradient(closest-side at 49% 49%, transparent 88%, #000 92%, #000 97%, transparent 100%);
  mask: radial-gradient(closest-side at 49% 49%, transparent 88%, #000 92%, #000 97%, transparent 100%);
}
.orb::after { filter: blur(22px); opacity: .5; }
@keyframes orb-morph {
  0% { border-radius: 44% 56% 52% 48% / 55% 44% 56% 45%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; transform: rotate(10deg) scale(1.035); }
  66% { border-radius: 49% 51% 59% 41% / 58% 46% 54% 42%; transform: rotate(-8deg) scale(.975); }
  100% { border-radius: 42% 58% 47% 53% / 47% 55% 45% 53%; transform: rotate(5deg) scale(1.02); }
}
.orb b, .orb i { pointer-events: none; }
.date-rail .day.focus { width: 104px; min-width: 104px; margin-inline: 22px; }
.date-rail, .date-rail.at-start { height: 196px; }
.focus-month { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* 2. Past days are ghosts: no box, just day + number, faint; the strip fades at both edges */
.date-rail .day.past:not(.focus) { background: none; border-color: transparent; }
.date-rail .day.past:not(.focus) .busy { display: none; }
.date-rail .day.past:not(.focus):hover { background: var(--surface); border-color: var(--line); }
.date-rail .day.past.no-gigs { opacity: calc(.3 + var(--near) * .3); }
.date-rail, .date-rail.at-start {
  -webkit-mask-image: linear-gradient(90deg, transparent var(--gutter), #000 calc(var(--gutter) + 90px), #000 calc(100% - var(--gutter) - 90px), transparent calc(100% - var(--gutter)));
  mask-image: linear-gradient(90deg, transparent var(--gutter), #000 calc(var(--gutter) + 90px), #000 calc(100% - var(--gutter) - 90px), transparent calc(100% - var(--gutter)));
}
/* month markers: a slim tick with the short name above, not a stray divider */
.date-rail .rail-month { width: 2px; padding: 0; margin: 0 4px; border: 0; background: var(--line-2); height: 44px; align-self: center; position: relative; font-size: 0; overflow: visible; }
.date-rail .rail-month::after { content: attr(data-m); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }

/* 3. Genres: centred and wrapped on wide screens; on phones they scroll with both edges fading */
@media (min-width: 1024px) {
  .genre-row { flex-wrap: wrap; justify-content: center; max-width: 1080px; margin-inline: auto; gap: 6px; }
  .genre-row .genre-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; padding: 4px 0; -webkit-mask-image: none; mask-image: none; }
  .controls.stuck .genre-row { flex-wrap: nowrap; max-width: none; }
  .controls.stuck .genre-row .genre-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 4px 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); }
}
/* Phone toolbar: a gradient overlay fades the right edge (a CSS mask would trap the fixed bottom sheets inside it) */
@media (max-width: 640px) {
  .controls { --fade-bg: rgba(9,9,12,.97); }
  .controls::after { content: ""; position: absolute; top: 8px; right: 0; width: 44px; height: 46px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--fade-bg)); }
}

/* 5. Short result grids sit in the middle instead of hugging the left */
@media (min-width: 641px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 296px)); justify-content: center; }
}

/* 6. Stuck bar: opaque enough that nothing reads through it; headings land clear of it */
.controls.stuck { background: rgba(11,11,15,.95); }
.day-group { scroll-margin-top: 190px; }

/* 7. Playing tile = the orb's language: its palette, a thin turning rim at the orb's pace, a breathing halo, "Playing" + EQ */
.tile.playing::after {
  padding: 1.5px;
  background: conic-gradient(from var(--ang), #4f8cff, #a06bff 22%, #ff6b8b 45%, #ffb36b 58%, var(--c) 72%, #6be0ff 88%, #4f8cff);
  animation: orb-turn 7s linear infinite;
}
@keyframes tile-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(160,107,255,.25), 0 26px 70px -22px rgba(160,107,255,.7), -22px 0 60px -26px rgba(79,140,255,.6), 22px 8px 60px -26px rgba(255,107,139,.55); }
  50% { box-shadow: 0 0 0 1px rgba(255,107,139,.3), 0 32px 90px -18px rgba(255,107,139,.65), -28px -8px 80px -20px rgba(160,107,255,.75), 28px 10px 80px -20px rgba(255,179,107,.55); }
}
.tile.playing { animation: tile-glow 4.5s ease-in-out infinite; }
.tile .art::after { background: radial-gradient(110% 60% at 50% 112%, rgba(160,107,255,.55), rgba(255,107,139,.25) 40%, transparent 70%); }
.tile.playing .listen .txt { font-size: 0; }
.tile.playing .listen .txt::after { content: "Playing"; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .tile.playing { box-shadow: 0 0 0 1px rgba(160,107,255,.4), 0 26px 70px -22px rgba(160,107,255,.6); }
}

/* 8. Sound pill before the first click: "Tap for sound" with a pulsing dot */
.sound-toggle.armed .eq { display: none; }
.sound-toggle.armed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 0 rgba(255,107,139,.6); animation: arm-pulse 1.6s ease-out infinite; }
@keyframes arm-pulse { 70% { box-shadow: 0 0 0 8px rgba(255,107,139,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,139,0); } }

@media (max-width: 640px) {
  .orb { width: 122px; height: 122px; margin: -61px 0 0 -61px; }
  .date-rail .day.focus { width: 84px; min-width: 84px; margin-inline: 16px; }
  .date-rail, .date-rail.at-start { height: 168px; }
  .focus-month { top: -24px; }
  .date-rail, .date-rail.at-start {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
}
/* v3.1 */
@media (min-width: 1024px) {
  .controls:not(.stuck) .genre-row .genre-tabs { display: contents; }
}
.date-rail .rail-month:has(+ .day.focus) { visibility: hidden; }
.focus-month { top: -42px; }
@media (max-width: 640px) { .focus-month { top: -34px; } }
/* v4: critic round 2 */
@media (min-width: 641px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 284px)); justify-content: center; }
  .controls.stuck .genre-row { max-width: 1180px; margin-inline: auto; justify-content: safe center; }
  .controls.stuck .genre-row .genre-tabs { flex: 0 1 auto; }
}
.tile.playing::after {
  background: conic-gradient(from var(--ang), #4f8cff 0 4%, #6be0ff 14%, #a06bff 30%, #ff6b8b 48%, #ffb36b 62%, #ffd27a 72%, #4f8cff 88%, #4f8cff);
}
@keyframes tile-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(160,107,255,.25), 0 10px 34px -10px rgba(160,107,255,.55), -12px 0 30px -14px rgba(79,140,255,.6), 12px 0 30px -14px rgba(255,179,107,.5); }
  50% { box-shadow: 0 0 0 1px rgba(255,107,139,.3), 0 12px 40px -10px rgba(255,107,139,.5), -14px -4px 38px -12px rgba(79,140,255,.7), 14px 4px 38px -12px rgba(255,179,107,.6); }
}
/* v5: critic round 3 */
/* Stuck bar on wide screens: compact genre chips (no counts) so the row fits centred */
@media (min-width: 1024px) {
  .controls.stuck .genre-row { gap: 6px; }
  .controls.stuck .genre-row .chip { padding: 5px 11px; font-size: 13px; }
  .controls.stuck .genre-row .chip em { display: none; }
  .controls.stuck .genre-row .genre-tabs { gap: 6px; overflow: visible; padding: 4px 0; -webkit-mask-image: none; mask-image: none; }
}
/* Phone rows fade into the page at the right edge instead of slicing */
@media (max-width: 640px) {
  .controls::after { width: 52px; background: linear-gradient(90deg, transparent, var(--bg) 80%); }
  .suggest { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .genre-row .genre-tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 52px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 52px), transparent); }
}
.tile.playing::after { background: conic-gradient(from var(--ang), #4f8cff 0 12%, #6be0ff 20%, #a06bff 34%, #ff6b8b 50%, #ffb36b 62% 76%, #4f8cff 90%, #4f8cff); }

/* ===================== v6: WebGL lens ===================== */
.lens { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.rail-wrap.has-lens .date-rail { height: 228px; }
/* the strip under the lens is cut away; the lens draws those days itself, magnified */
.rail-wrap.has-lens .date-rail {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--lens) - 2px), #000 calc(var(--lens) + 8px)), linear-gradient(90deg, transparent var(--gutter), #000 calc(var(--gutter) + 90px), #000 calc(100% - var(--gutter) - 90px), transparent calc(100% - var(--gutter)));
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--lens) - 2px), #000 calc(var(--lens) + 8px)), linear-gradient(90deg, transparent var(--gutter), #000 calc(var(--gutter) + 90px), #000 calc(100% - var(--gutter) - 90px), transparent calc(100% - var(--gutter)));
  mask-composite: intersect;
}
/* every day is the same size under a lens (the lens does the enlarging) */
.rail-wrap.has-lens .date-rail .day.focus { --tile: 62px; width: 62px; min-width: 62px; height: 80px; margin-inline: 0; background: var(--surface); border-color: var(--line); transform: scale(calc(.9 + var(--near) * .14)); }
.rail-wrap.has-lens .date-rail .day.focus.past { background: none; border-color: transparent; }
.rail-wrap.has-lens .date-rail .day.focus .busy { display: block; }
.lens-month { display: none; }
.rail-wrap.has-lens .lens-month { display: block; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
@media (max-width: 640px) {
  .rail-wrap.has-lens .date-rail { height: 184px; }
  .rail-wrap.has-lens .date-rail .day.focus { --tile: 54px; width: 54px; min-width: 54px; }
}

/* Sound: before the first click the hovered tile asks for it (browsers block audio until then) */
.tile.needs-click .listen .txt { font-size: 0; }
.tile.needs-click .listen .txt::after { content: "Click to hear"; font-size: 12px; }
.tile.needs-click .listen { background: rgba(255,255,255,.92); color: var(--bg); animation: arm-pulse-w 1.6s ease-out infinite; }
.tile.needs-click .listen .eq i { background: var(--bg); }
@keyframes arm-pulse-w { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
.sound-toggle.armed::before { display: none; }
.sound-toggle.armed .eq { display: inline-flex; }
.sound-toggle.armed .eq i { animation-play-state: paused; }

/* day positions (offsetLeft) are measured from the strip itself, not its wrapper */
.date-rail { position: relative; }

/* tiles crossing the lens rim fade (see coverflow) */
.rail-wrap.has-lens .date-rail .day { opacity: calc((.78 + var(--near) * .22) * (1 - var(--under, 0))); }
.rail-wrap.has-lens .date-rail .day.past { opacity: calc((.32 + var(--near) * .4) * (1 - var(--under, 0))); }

/* ===================== v7: snapping, sticky days ===================== */
/* Native snapping: every day clicks into the lens; a hard flick can still travel several days */
.rail-wrap.has-lens .date-rail { scroll-snap-type: x mandatory; scroll-behavior: auto; }
.rail-wrap.has-lens .date-rail .day { scroll-snap-align: center; scroll-snap-stop: normal; }
/* touch: every swipe stops at the next day (moving one day at a time is the common case; the arrows
   and the date picker are there for big jumps) */
@media (pointer: coarse) { .rail-wrap.has-lens .date-rail .day { scroll-snap-stop: always; } }

/* Day headings stay pinned under the filter bar while you scroll through that day */
.day-group { content-visibility: visible; }
.day-head {
  position: sticky; top: calc(var(--top-h, 68px) + var(--bar-h, 104px) - 1px); z-index: 6;
  margin: 0 calc(var(--gutter) * -1) 14px; padding: 10px var(--gutter) 10px;
  background: linear-gradient(180deg, rgba(9,9,12,.94) 70%, rgba(9,9,12,0));
}
.day-head h2 { transition: font-size .2s var(--ease); }


/* ===================== v8: site-wide pass (critic round 1) ===================== */
/* Numbers line up without a second typeface */
.tile .row, .sheet-meta, .saved-row .d, .artist-card small, .prompt kbd { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tile .row { font-size: 13px; font-weight: 500; }
.sheet-meta { font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.eyebrow, .kicker, .ac-head { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.eyebrow { margin: 0 0 6px; }

/* Header: one primary action */
.account-btn:not(.signed-in) { background: var(--text); color: var(--bg); border-color: var(--text); }
.account-btn:not(.signed-in):hover { background: #fff; }
.sound-toggle, .buddy-link { background: none; border-color: var(--line); color: var(--muted); }
.sound-toggle:hover, .buddy-link:hover { color: var(--text); border-color: var(--line-2); }

h1 { font-size: clamp(42px, 7vw, 88px); }
.hero .sub { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 16px; }
.hero .sub b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero .sub .dot { flex: none; }
.prompt:focus-within kbd { display: none; }
.ac-item .av svg { width: 20px; height: 20px; color: var(--muted); }
.ac-item.genre .av { border-radius: 12px; box-shadow: none; background: color-mix(in srgb, var(--c) 18%, var(--surface-2)); display: grid; place-items: center; }
.ac-item.genre .av i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ac-item.all { border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; margin-top: 4px; }
.ac-item.all .av { border-radius: 12px; box-shadow: none; background: var(--surface-2); display: grid; place-items: center; }
.ac-item.all b { font-weight: 500; }

/* Search chip in the filter bar */
.q-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 8px 0 13px; border-radius: 999px; border: 1px solid var(--text); background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; max-width: 240px; }
.q-chip svg { width: 15px; height: 15px; flex: none; }
.q-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-chip b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.12); font-size: 15px; font-weight: 500; }

/* Filter bar: the ‹ › steppers only appear in the compact (stuck) bar, where the strip is hidden */
.controls.has-pick:not(.stuck) .step-btn { display: none; }
/* Calendar sits above the lens and never runs off-screen */
.toolbar { position: relative; z-index: 8; }
.pop.cal-pop { max-height: calc(100vh - 160px); overflow-y: auto; }
.cal-grid, .cal-day { animation: none !important; }
/* Past days: dimmer than today, still readable */
.rail-wrap.has-lens .date-rail .day.past { opacity: calc((.5 + var(--near) * .4) * (1 - var(--under, 0))); filter: saturate(.5); }
.date-rail .day.past small { color: var(--muted); }

/* Genres: one row in both states — centred when it fits, scrolling with soft edges when it doesn't */
.genre-row, .controls.stuck .genre-row { flex-wrap: nowrap; justify-content: safe center; max-width: 1180px; margin-inline: auto; }
.genre-row .genre-tabs, .controls:not(.stuck) .genre-row .genre-tabs, .controls.stuck .genre-row .genre-tabs {
  display: flex; flex: 0 1 auto; flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding: 4px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
}
.controls.stuck .genre-row .chip em { display: inline; }
.controls.stuck .genre-row .chip { padding: 6px 12px; font-size: 13.5px; }
.genre-tabs .chip.empty:not(.on) { display: none; }

/* Day headings: a solid band, compact, the date quieter than the word */
.day-head {
  background: rgba(9,9,12,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); min-height: 48px; padding: 8px var(--gutter); margin-bottom: 16px;
}
.day-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.day-head .dh-date { color: var(--muted); font-weight: 500; margin-left: 4px; }
.day-head span { font-size: 13px; color: var(--muted); }
.day-head .line { display: none; }

/* Tiles without artwork: a designed card, not a grey blur */
.tile .art-name { display: none; }
.tile.no-art .art {
  background:
    radial-gradient(90% 70% at 15% 10%, color-mix(in srgb, var(--c) 45%, transparent), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--c) 25%, #a06bff 10%), transparent 65%),
    #121218;
}
.tile.no-art .art-name {
  display: block; position: absolute; left: 14px; right: 14px; top: 16px; max-height: 58%; overflow: hidden;
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; line-height: .92; letter-spacing: -0.045em; text-transform: none;
  color: color-mix(in srgb, var(--c) 30%, #fff 18%); opacity: .55; word-break: break-word;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.tile.no-art::before { background: linear-gradient(180deg, transparent 35%, rgba(9,9,12,.75) 70%, rgba(9,9,12,.96) 100%); }
/* "find them on" icons only on hover (they're secondary); hidden on touch, where the sheet has them */
.tile .listen.none { opacity: 0; transition: opacity .25s var(--ease); }
.tile:hover .listen.none, .tile:focus-visible .listen.none { opacity: 1; }
@media (hover: none) { .tile .listen.none { display: none; } }
.tile .progress { height: 3px; opacity: .6; }

/* Gig sheet: one action row, a sticky ticket button */
.sheet-venue a { color: var(--muted); font-size: 14px; margin-left: 6px; text-underline-offset: 3px; }
.sheet-venue a:hover { color: var(--text); }
.sheet-actions { position: sticky; bottom: 0; z-index: 2; margin: 18px -24px 0; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(30,30,39,0), var(--surface-2) 30%); display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.sheet-actions .cta { justify-content: center; text-align: center; }
.sheet-actions .ghost.icon { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; }
.sheet-actions .ghost.icon svg { width: 20px; height: 20px; }
#sheetFollow { height: 46px; }

/* Empty state: ways out */
.empty-fixes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.empty-fixes .chip { padding: 9px 16px; }

/* Gig Buddy + footer */
.buddy-cta { margin-top: 24px; display: inline-flex; }
.foot { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr; gap: 32px; text-align: left; max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter) 56px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.foot .wm { font-size: 24px; }
.foot-brand p { margin: 10px 0 0; }
.foot-fresh { color: var(--dim); font-size: 13px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foot-links a, .foot-links .link-btn { color: var(--text); text-decoration: none; font-size: 14px; padding: 0; }
.foot-links a:hover, .foot-links .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-legal p { margin: 0 0 10px; color: var(--dim); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; gap: 22px; } }

/* Mobile: while the bar is stuck the header slides away, so gigs get the room */
@media (max-width: 640px) {
  .top { transition: transform .25s var(--ease); }
  body.bar-stuck .controls, body.bar-stuck .day-head { --top-h: 0px; }
  body.bar-stuck .top { transform: translateY(-100%); }
  /* the header's height glides to 0 as it slides away, so the bar and the day headings (both placed
     from --top-h) move up with it instead of jumping 68 px. Animated on just those elements: on
     <body> it would restyle the whole page on every frame of the glide. */
  .controls, .day-head { transition: --top-h .25s var(--ease); }
  .hero .sub { font-size: 14.5px; }
  .tile .svc { width: 44px; height: 44px; }
}

/* Reduced motion: no lifts or shimmer */
@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover, .tile.playing { transform: none !important; animation: none !important; }
  .grad { animation: none; }
}

/* The filter area is transparent until it sticks, so the hero glow runs through it without a hard edge */
.controls:not(.stuck) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }

/* chips inside the scrolling row start at the left edge (centring an overflowing row hides its start) */
.genre-row .genre-tabs, .controls:not(.stuck) .genre-row .genre-tabs, .controls.stuck .genre-row .genre-tabs { justify-content: flex-start; }


/* ===================== v9: site-wide pass (critic round 2) ===================== */
/* Calendar: fixed cell boxes */
.cal-grid { grid-auto-rows: 44px; }
.cal-day { aspect-ratio: auto; height: 44px; padding: 0; margin: 0; }

/* Fallback tiles: never break words, two lines at most, varied by hue; the pill keeps its corner */
.tile.no-art { container-type: inline-size; }
.tile.no-art .art-name {
  top: 58px; right: 18px; font-size: clamp(34px, 15cqi, 64px); line-height: .95; max-height: calc(2 * .95em);
  word-break: keep-all; overflow-wrap: normal; hyphens: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tile.no-art { border-top: 2px solid color-mix(in srgb, var(--c) 70%, transparent); }

/* Search: the dropdown sits above the filter bar */
.hero { position: relative; z-index: 30; }
.ac { z-index: 40; }

/* Genre row: one gap, a divider after "All genres", a soft right fade */
.genre-row { gap: 8px; }
#genreAll { padding-right: 8px; border-right: 1px solid var(--line-2); }
.genre-row .genre-tabs, .controls:not(.stuck) .genre-row .genre-tabs, .controls.stuck .genre-row .genre-tabs {
  gap: 8px; padding: 4px 32px 4px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}

/* Stuck bar: one solid slab with the day heading (mobile included) */
.controls.stuck { background: rgba(9,9,12,.97) !important; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
@media (max-width: 640px) { .controls.stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0a0a0d !important; } }

/* Summary line hidden when nothing is filtered (the hero already says how many) */
.results-head.quiet { display: none; }

/* Gig sheet: full-bleed action band, listen buttons in one row, quiet metadata */
.sheet-actions { margin: 18px -26px 0; padding: 14px 26px calc(14px + env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line); }
.sheet-listen > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-listen .svc { justify-content: center; padding: 0 10px; }
.sheet-meta { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.sheet-meta b { color: var(--c, var(--violet)); font-weight: 700; }
.sheet-venue { font-size: 15px; }

/* Tile preview control: a play glyph + "Preview"; the bars only while playing */
.tile .listen .play-ic { width: 13px; height: 13px; }
.tile .listen .eq { display: none; }
.tile.playing .listen .eq { display: inline-flex; }
.tile.playing .listen .play-ic { display: none; }
@media (max-width: 640px) { .tile .listen { width: 34px; height: 34px; padding: 0; justify-content: center; } }
@media (max-width: 640px) { .grid > .tile:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }

/* Mini player */
.mini {
  position: fixed; left: 50%; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 12px; width: min(420px, calc(100vw - 32px));
  padding: 8px 8px 8px 8px; border-radius: 18px; background: rgba(22,22,29,.94); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); transform: translate(-50%, 140%); transition: transform .3s var(--ease); pointer-events: none;
}
.mini.on { transform: translate(-50%, 0); pointer-events: auto; }
.mini-art { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); }
.mini-txt { flex: 1; min-width: 0; line-height: 1.25; }
.mini-txt b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-txt small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .eq i { background: var(--violet); }
.mini-stop { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; }
.mini-stop svg { width: 18px; height: 18px; }
.toast { bottom: 90px; }

/* Account: a sample alert so people know what they're signing up for; genres in a tidy grid */
.alert-sample { display: flex; gap: 12px; align-items: center; margin: 4px 0 18px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.as-art { flex: none; width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(80% 80% at 20% 20%, #a06bff, transparent 70%), radial-gradient(80% 80% at 100% 100%, #ff6b8b, transparent 70%), #16161d; }
.alert-sample small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.alert-sample b { display: block; font-size: 14.5px; font-weight: 600; }
.alert-sample em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
#acctGenres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#acctGenres .chip { justify-content: flex-start; }

/* Gig Buddy eyebrow dot + footer tap targets + zero-count areas */
.buddy-card .kicker { gap: 12px; }
.dot { box-shadow: 0 0 0 3px rgba(61,220,132,.18); animation: none; }
.foot-links { gap: 2px; }
.foot-links a, .foot-links .link-btn { display: inline-block; padding: 10px 0; }
.pop-chips .chip.empty:not(.on) { display: none; }

/* Past strip days stay readable (≥3:1) */
.date-rail .day.past strong { color: #b9b7c6; }

#genreAll:has(+ .genre-tabs:empty) { border-right: 0; }


/* ===================== v10: site-wide pass (critic round 3) ===================== */
/* Fallback type: whole words, sized to fit, three compositions */
.tile.no-art .art-name {
  -webkit-line-clamp: unset; display: flex; flex-direction: column; max-height: none; overflow: visible; white-space: nowrap;
  font-size: min(64px, calc((100cqi - 36px) / (var(--chars, 8) * 0.56)));
}
.tile.no-art .art-name > span { display: block; }
.tile.no-art .art-name.v1 { align-items: flex-end; text-align: right; left: 18px; right: 18px; }
.tile.no-art .art-name.v2 { top: auto; bottom: 34%; left: auto; right: -6px; font-size: min(240px, 70cqi); line-height: .8; opacity: .22; -webkit-mask-image: none; mask-image: none; }

/* Gig sheet: tall on phones, the action band docked at the bottom */
.sheet { max-height: min(92dvh, 900px); }
@media (max-width: 640px) { .sheet { max-height: 92dvh; } .sheet-art { aspect-ratio: auto; height: 38dvh; } }
.sheet-actions { position: sticky; bottom: 0; }
.sheet-body > .link-btn { margin-top: 4px; }
.sheet-source { margin: 6px 0 0; }
.sheet-player .eq { display: none; }
.sheet-player.playing .eq { display: inline-flex; }
.sheet-player.playing .dur { display: none; }
.sheet-player .dur { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Empty state */
.empty-fixes .chip.dym { border-color: var(--line-2); color: var(--text); }
body.no-results .rail-wrap { opacity: .5; }
body.no-results #genreAll { border-right: 0; }

/* Mini player: content never hides under it; the bars move */
body.playing main { padding-bottom: 96px; }
.mini .eq { display: inline-flex; }
.mini.on .eq i { animation: eq .9s ease-in-out infinite; }
.mini.on .eq i:nth-child(2) { animation-delay: -.3s; }
.mini.on .eq i:nth-child(3) { animation-delay: -.6s; }
.mini.on .eq i:nth-child(4) { animation-delay: -.15s; }

/* Calendar opens upward when there's no room below; its footer always shows */
.pop.cal-pop.up { top: auto; bottom: calc(100% + 8px); }
.pop.cal-pop { max-height: none; overflow: visible; }

/* Footer */
.foot { max-width: none; margin: 0; padding-inline: max(var(--gutter), calc((100vw - 1180px) / 2)); }
.foot .brand { color: var(--text); }
.foot-links .link-btn { font: inherit; color: var(--text); margin: 0; }
.foot-links a, .foot-links .link-btn { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.buddy-cta { flex: none; height: 46px; padding: 0 24px; box-shadow: none; }
.buddy-cta:hover { box-shadow: none; background: #fff; }

/* Header: the sound pill is quiet; only its icon carries colour when on */
.sound-toggle[aria-pressed="true"] { background: none; border: 1px solid var(--line); color: var(--muted); }
.sound-toggle[aria-pressed="true"] .eq i { background: var(--grad); }
.sound-toggle[aria-pressed="true"]:hover { color: var(--text); border-color: var(--line-2); }

/* Hero a little tighter so the feed peeks above the fold */
h1 { font-size: clamp(40px, 6.4vw, 80px); }
.rail-wrap.has-lens .date-rail { height: 212px; }

/* Steppers that can't step are hidden, not greyed */
.step-btn:disabled { visibility: hidden; }

/* Account alert sample breathing room */
.alert-sample { margin-top: 24px; }
.as-art { background: radial-gradient(90% 70% at 15% 10%, #4f8cff99, transparent 60%), radial-gradient(80% 60% at 100% 100%, #ff6b8b88, transparent 65%), radial-gradient(60% 60% at 60% 40%, #a06bff66, transparent 70%), #121218; }


/* ===================== v11: site-wide pass (critic round 4) ===================== */
/* Steppers: removed when they can't step (no holes, out of the tab order) */
.step-btn:disabled { display: none !important; }

/* Empty search: no dead filters above the message */
body.no-results-q .genre-row, body.no-results-q .rail-wrap { display: none; }

/* Fallback type: two layouts, always inside the tile */
.tile.no-art .art-name.v2 { display: none; }

/* Gig sheet: the action band sits on the very bottom edge */
.sheet-body { padding-bottom: 0; }
.sheet-actions { padding-bottom: calc(16px + env(safe-area-inset-bottom)); margin-bottom: 0; }
#sheetFollow { padding: 0 18px; }

/* Mini player progress */
.mini { position: fixed; overflow: hidden; }
.mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.mini-bar i { display: block; height: 100%; width: 0; background: var(--grad); }

/* Account: less bulk at the top */
.account h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.1; }
.account .acct-lede { font-size: 15px; }

/* Waitlist button = Sign in */
.buddy-card .buddy-cta, .buddy-cta { box-shadow: none !important; filter: none; border: 1px solid var(--text); }

/* Footer: three even columns */
.foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* A little more of the feed above the fold */
.rail-wrap.has-lens .date-rail { height: 200px; }
/* Tighter vertical rhythm above the feed (first gigs above the fold at 1280×820) */
.prompt { height: 58px; }
.toolbar { margin: 2px 0 4px; }
.rail-wrap.has-lens .date-rail { height: 184px; }
.day-group:first-child { margin-top: 8px; }
.hero h1 { margin-top: 0; }
.rail-wrap.has-lens .date-rail { height: 176px; }
.toolbar { margin-bottom: 0; }
.genre-row { margin-top: 0; }

.rail-wrap.has-lens .lens-month { top: -16px; }


/* ===================== v12: site-wide pass (critic round 5) ===================== */
/* Month label: now drawn inside the lens */
.rail-wrap.has-lens .lens-month { display: none; }

/* Phone filter row: full-bleed scroller with the page gutter, fading at the right */
@media (max-width: 640px) {
  .toolbar { margin: 2px calc(var(--gutter) * -1) 6px; padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); justify-content: flex-start; }
  .controls::after { top: 0; height: 58px; width: 48px; }
  .controls.stuck::after { background: linear-gradient(90deg, transparent, #0a0a0d 80%); }
}

/* Fallback artwork: colour mesh + a quiet seeded pattern + venue monogram; the title below is the only name */
.tile .art-pattern, .tile .art-mono { display: none; }
.tile.no-art .art-pattern { display: block; position: absolute; inset: 0; opacity: .1; }
.tile.no-art .art-pattern.rings { background: repeating-radial-gradient(circle at var(--px) var(--py), #fff 0 1px, transparent 1.5px 18px); }
.tile .art-pattern.wave {
  background: repeating-linear-gradient(var(--ph), #fff 0 1px, transparent 1.5px 14px);
  -webkit-mask-image: radial-gradient(70% 60% at var(--px) var(--py), #000, transparent 75%); mask-image: radial-gradient(70% 60% at var(--px) var(--py), #000, transparent 75%);
}
.tile .art-mono {
  display: grid; place-items: center; position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); font-weight: 700; font-size: 17px;
}
.tile.no-art .art-name { display: none; }

/* Did you mean: the suggestion is the primary action */
.empty-fixes .chip.dym.primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; }
.empty-fixes .chip.dym .av { width: 28px; height: 28px; border-radius: 50%; background: var(--fallback); background-size: cover; }
.empty-fixes .link-btn { flex-basis: 100%; margin-top: 4px; color: var(--muted); }

/* Results area sits on the page background (no glow band behind the summary) */
.results { background: var(--bg); position: relative; }

/* Mini-player: blurred pill, a visible progress bar, out of the way while its tile is fully visible */
.mini { background: rgba(18,18,22,.85); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.mini-bar { height: 4px; }
.mini.on.in-view { transform: translate(-50%, 140%); }

/* Footer legal text: calmer measure */
.foot-legal p { font-size: 13px; line-height: 1.6; max-width: 42ch; }

/* Gig Buddy points with icons */
.buddy-points li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; }
.buddy-points li svg { grid-row: span 2; width: 26px; height: 26px; color: var(--violet); margin-top: 2px; }


/* ===================== v13: site-wide pass (critic round 6) ===================== */
/* Readable meta over any artwork; the genre label never melts into a same-colour poster */
.tile::before { background: linear-gradient(to top, rgba(9,9,12,.94) 0, rgba(9,9,12,.7) 38%, rgba(9,9,12,.18) 62%, rgba(9,9,12,.12) 80%, rgba(9,9,12,.3) 100%); }
.tile .genre { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6); color: color-mix(in srgb, var(--c) 78%, #fff); }

/* The hero glow fades into the feed instead of stopping at a line */
.results { background: linear-gradient(180deg, rgba(9,9,12,0), var(--bg) 160px); }

/* Every tile starts as its mesh + pattern; the photo fades in when it has loaded */
.tile .art { background:
    radial-gradient(90% 70% at 15% 10%, color-mix(in srgb, var(--c) 45%, transparent), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--c) 25%, #a06bff 10%), transparent 65%), #121218; }
.tile .art img { opacity: 0; transition: opacity .3s var(--ease), transform 1.2s var(--ease), filter .6s; }
.tile .art img.in { opacity: 1; }
.tile:not(.no-art) .art-pattern { display: block; position: absolute; inset: 0; opacity: .08; background: repeating-radial-gradient(circle at var(--px) var(--py), #fff 0 1px, transparent 1.5px 18px); }
.tile:not(.no-art) .art img.in ~ .art-pattern, .tile:not(.no-art) .art:has(img.in) .art-pattern { display: none; }

/* Playing tile: its progress matches the mini-player */
.tile .progress { height: 4px; opacity: 1; }

/* Gig sheet: starts near the top on phones; icon buttons get labels on hover */
@media (max-width: 640px) { .sheet { margin: 6dvh 0 0; height: 94dvh; max-height: 94dvh; } .sheet-art { height: 34dvh; } }
@media (hover: hover) {
  .sheet-actions .ghost.icon { position: relative; }
  .sheet-actions .ghost.icon::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 4px 8px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s var(--ease); }
  .sheet-actions .ghost.icon:hover::after, .sheet-actions .ghost.icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}

/* Account sample alert: the same mesh + rings art as tiles */
.as-art { position: relative; overflow: hidden; background:
    radial-gradient(90% 70% at 15% 10%, #a06bffaa, transparent 60%), radial-gradient(80% 60% at 100% 100%, #ff6b8b88, transparent 65%), #121218; }
.as-art::after { content: ""; position: absolute; inset: 0; opacity: .14; background: repeating-radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 1.5px 9px); }

/* Gig Buddy cards: icon, title and text on one grid, top-aligned */
.buddy-points li { grid-template-columns: 28px 1fr; grid-template-rows: auto 1fr; align-items: start; align-content: start; }
.buddy-points li svg { grid-row: 1 / 3; }
.buddy-points li b { grid-column: 2; margin: 0; }

/* ===================== v14: site-wide pass (critic round 7) ===================== */
/* Gig sheet: a column, so the action band always sits on the bottom edge */
.sheet[open] { display: flex; flex-direction: column; }
.sheet-art { flex: none; }
.sheet-body { flex: 1 0 auto; display: flex; flex-direction: column; }
.sheet-actions { margin-top: auto; }
.sheet-desc, .sheet-player, .sheet-listen, .sheet-body > .link-btn, .sheet-source { flex: none; }

/* The glow layer fades out on its own — no seam wherever the page is scrolled */
.aurora { -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%); }

/* Mini-player: docked bottom-right on desktop, out of the centre column */
@media (min-width: 900px) {
  .mini { left: auto; right: 24px; bottom: 24px; width: 360px; transform: translateY(140%); }
  .mini.on { transform: translateY(0); }
  .mini.on.in-view { transform: translateY(140%); }
}
body.playing { scroll-padding-bottom: 96px; }

/* Tiles: one overlay style — the Preview pill, or nothing */
.tile .listen.none { display: none !important; }
/* Genre label sits in a small dark pill whenever there's a photo behind it */
.tile:not(.no-art) .genre { background: rgba(9,9,12,.72); padding: 3px 9px 3px 8px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Phones: spare sheet height goes to the photo, not to a gap above the buttons */
@media (max-width: 640px) { .sheet-art { flex: 1 1 34dvh; height: auto; min-height: 34dvh; } .sheet-body { flex: 0 0 auto; } }
.sheet-body > .link-btn { align-self: flex-start; }

.sheet-source { margin-bottom: 16px; }

/* ===================== v15: critic round 8 ===================== */
/* Photo tiles: a firm floor under the text, and a soft blur behind the meta block only */
.tile:not(.no-art)::before { background: linear-gradient(to top, rgba(9,9,12,.96) 0, rgba(9,9,12,.96) 30%, rgba(9,9,12,.78) 42%, rgba(9,9,12,.2) 64%, rgba(9,9,12,.12) 82%, rgba(9,9,12,.3) 100%); }
.tile:not(.no-art) .meta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px);
}
/* Pattern + monogram are the placeholder on every tile; they hide once a photo has loaded */
.tile .art-pattern { display: block; position: absolute; inset: 0; opacity: .1; }
.tile .art-pattern.rings { background: repeating-radial-gradient(circle at var(--px) var(--py), #fff 0 1px, transparent 1.5px 18px); }
.tile .art-mono { display: grid; }
.tile .art:has(img.in) .art-pattern, .tile .art:has(img.in) .art-mono { display: none; }
/* Glow fades out a touch lower */
.aurora { -webkit-mask-image: linear-gradient(#000 40%, transparent 85%); mask-image: linear-gradient(#000 40%, transparent 85%); }

/* ---------- The orb in flight and docked as the mascot (public/orb.js, public/mascot.js) ----------
   Home: inside the day strip (.lens above). Once the strip folds, the canvas moves to <body> and is
   positioned by transform each frame. While flying it passes over the filter bar; docked it sits under
   it (and under the mobile Filters sheet, which lives inside the bar). */
.lens.flying { position: fixed; left: 0; top: 0; transform-origin: 50% 50%; z-index: 16; will-change: transform; }
.lens.flying.docked { z-index: 12; }
.lens.flying.launch { z-index: 25; } /* leaving the strip: above the header and bar */
html.orb-anchored .lens.flying { z-index: 47; } /* in the chat panel's header */
body.more-open .lens.flying, body.pop-open .lens.flying { z-index: 12; }

/* The mascot button: an invisible, round hit area kept over the docked orb by orb.js */
.mascot {
  position: fixed; left: 0; top: 0; z-index: 13; padding: 0; border: 0; border-radius: 50%; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mascot:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
/* No WebGL: a CSS glass orb in the corner instead */
.mascot.fallback {
  left: 26px; top: auto; bottom: 26px; width: 80px; height: 80px;
  background: radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.18), transparent 60%), radial-gradient(70% 70% at 60% 70%, rgba(160,107,255,.35), transparent 70%), #111116;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 10px 30px rgba(0,0,0,.5);
}
body.more-open .mascot, body.pop-open .mascot { visibility: hidden; }

/* Chat panel: opens up out of the orb */
.chat {
  position: fixed; left: 20px; bottom: 20px; z-index: 44; width: min(372px, calc(100vw - 32px));
  max-height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: rgba(22,22,29,.96); border: 1px solid var(--line-2); border-radius: 24px;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(160,107,255,.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform-origin: 54px calc(100% - 54px); opacity: 0; transform: scale(.25);
  transition: opacity .18s var(--ease), transform .38s cubic-bezier(.3,1.35,.5,1);
}
.chat.open { opacity: 1; transform: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px 16px; }
.chat-head > div { flex: 1; min-width: 0; }
.chat-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; } /* the orb flies in here */
.chat-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.chat-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.chat-head p a { text-underline-offset: 2px; }
.chat-head p a:hover { color: var(--text); }
.chat-soon { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #d9ccff; background: rgba(160,107,255,.18); border: 1px solid rgba(160,107,255,.35); vertical-align: 1px; }
.chat-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 14px; }
.chat-x:hover { color: var(--text); background: var(--surface-2); }
.chat-body { padding: 4px 20px 12px; overflow-y: auto; }
.msg { margin: 0 0 8px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); font-size: 14.5px; line-height: 1.45; max-width: 92%; width: fit-content; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.chat-chips button { padding: 8px 14px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: 13.5px; font-weight: 500; }
.chat-chips button:hover { background: var(--surface-2); border-color: rgba(160,107,255,.5); }
.chat-form { display: flex; gap: 8px; margin: 4px 14px 14px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-2); }
.chat-form:focus-within { border-color: rgba(160,107,255,.6); }
.chat-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.chat-form input::placeholder { color: var(--dim); }
.chat-form button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; }
.chat-form button svg { width: 18px; height: 18px; }
.msg.me { margin-left: auto; border-radius: 18px 18px 6px 18px; background: rgba(160,107,255,.22); border: 1px solid rgba(160,107,255,.3); }
/* Loud, the AI assistant (mascot.js setupLoud). Text labels carry every state; colour only backs them up. */
.chat-new { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); display: grid; place-items: center; }
.chat-new svg { width: 17px; height: 17px; }
.chat-new:hover { color: var(--text); background: var(--surface-2); }
.loud-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 16px 8px; }
.loud-mode { display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); }
.loud-mode label { position: relative; }
.loud-mode input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.loud-mode span { display: block; min-width: 64px; padding: 7px 14px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.loud-mode input:checked + span { background: var(--text); color: var(--bg); }
.loud-mode span:has(.loud-a11y) { display: flex; align-items: center; justify-content: center; gap: 6px; }
.loud-a11y { width: 17px; height: 17px; flex: none; }
.loud-mode input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.loud-state { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.loud-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); flex: none; }
.loud-state[data-state="listening"] .loud-dot { background: #3ddc84; }
.loud-state[data-state="speaking"] .loud-dot { background: var(--violet); animation: loud-pulse 1s ease-in-out infinite; }
.loud-state[data-state="thinking"] .loud-dot, .loud-state[data-state="searching"] .loud-dot, .loud-state[data-state="connecting"] .loud-dot { background: #ffc857; animation: loud-pulse 1.4s ease-in-out infinite; }
.loud-state[data-state="muted"] .loud-dot { background: var(--rose); }
@keyframes loud-pulse { 50% { transform: scale(1.5); opacity: .55; } }
.loud-voice { padding: 0 16px 10px; }
.loud-voice-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.loud-voice-btns button { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; }
.loud-voice-btns button:hover:not(:disabled) { border-color: rgba(160,107,255,.6); }
.loud-voice-btns button:disabled { opacity: .45; cursor: not-allowed; }
.loud-voice-btns .loud-call { background: var(--grad); border-color: transparent; color: #fff; }
.loud-voice-btns .loud-call.live { background: #c4304f; }
.loud-voice-btns .loud-mic[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #18060b; }
.loud-read { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--muted); cursor: pointer; }
.loud-read input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--violet); }
.chat.is-loud .chat-body { min-height: 120px; }
.msg.bot a, .loud-gigs a { color: #c9b0ff; text-decoration: underline; text-underline-offset: 2px; }
.msg.partial { color: var(--muted); font-style: italic; }
.msg.error { background: rgba(255,107,139,.12); border: 1px solid rgba(255,107,139,.4); }
.loud-gigs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; max-width: 92%; }
.loud-gigs li { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); }
.loud-gig-name { display: block; font-weight: 700; font-size: 14.5px; }
.loud-gig-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .loud-dot { animation: none !important; } }
.msg .show-me { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; }
@media (max-width: 640px) {
  /* phones: a bottom sheet */
  .chat { left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); transform-origin: 40px 100%; transform: translateY(40%) scale(.9); }
  .chat.open { transform: none; }
  .chat-avatar { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .chat { transition: opacity .15s; transform: none; } }
/* Frosted glass behind the docked orb (orb.js sizes and moves it with the orb) */
.orb-frost {
  position: fixed; left: 0; top: 0; z-index: 11; border-radius: 50%; pointer-events: none; will-change: transform;
  -webkit-backdrop-filter: blur(3px) saturate(1.5) brightness(1.08); /* Safari: frosted */
  backdrop-filter: blur(3px) saturate(1.5) brightness(1.08);
  backdrop-filter: url(#orb-refract) saturate(1.35) brightness(1.06); /* Chromium: real refraction */
  box-shadow: 0 10px 24px rgba(0,0,0,.45); /* lifts it off the cards */
  /* feathered edge, inside the glass's lumpy rim, so no refracted crescent shows outside it */
  -webkit-mask-image: radial-gradient(circle, #000 84%, transparent 100%); mask-image: radial-gradient(circle, #000 84%, transparent 100%);
}
/* at rest on the feed: a dark, softly blurred backing so the cards beneath read as a calm blur, not bent
   letters. Its own layer (above the refraction, under the glass), faded in as it nears its corner. */
.orb-back {
  position: fixed; left: 0; top: 0; z-index: 11; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: rgba(9,9,12,.72);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  -webkit-mask-image: radial-gradient(circle, #000 84%, transparent 100%); mask-image: radial-gradient(circle, #000 84%, transparent 100%);
  opacity: 0; /* set per frame from the orb's distance to its corner */
}
body.more-open .orb-back, body.pop-open .orb-back { z-index: 11; }
html.orb-anchored .orb-frost { z-index: 46; box-shadow: none; }
.orb-frost:not(.docked) { z-index: 15; }
body.more-open .orb-frost, body.pop-open .orb-frost { z-index: 11; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { html.chat-sheet-open, html.chat-sheet-open body { overflow: hidden; } }

/* ---------- The orb talks: a speech bubble beside it (public/mascot.js; orb.js moves it each frame) ---------- */
.orb-say {
  position: fixed; left: 0; top: 0; z-index: 13; width: max-content; max-width: min(280px, calc(100vw - 132px));
  padding: 12px 38px 12px 16px; border-radius: 20px 20px 20px 6px;
  background: rgba(28,26,38,.96); border: 1px solid rgba(160,107,255,.35);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04), 0 0 32px -8px rgba(160,107,255,.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; scale: .7; transform-origin: 0 100%; transition: opacity .18s var(--ease), scale .34s cubic-bezier(.3,1.5,.5,1);
  box-sizing: border-box;
}
.say-body { position: relative; overflow: hidden; transition: height .28s cubic-bezier(.3,1.25,.5,1); }
.orb-say.measure, .orb-say.measure .say-body { transition: none; visibility: hidden; }
.orb-say.measure .say-text span, .orb-say.measure .say-chips button { opacity: 1; }
.orb-say.on { opacity: 1; scale: 1; }
/* the tail points back at the orb */
.orb-say::before { content: ""; position: absolute; left: -7px; bottom: 14px; width: 12px; height: 12px; background: rgba(28,26,38,.96); border-left: 1px solid rgba(160,107,255,.35); border-bottom: 1px solid rgba(160,107,255,.35); transform: rotate(45deg); border-radius: 0 0 0 3px; }
.say-text { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; cursor: pointer; }
.say-dots { display: none; gap: 5px; padding: 6px 2px; }
.orb-say.typing .say-dots { display: inline-flex; }
.orb-say.typing .say-text { display: none; }
.say-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9b8ff; animation: sayDot 1s infinite ease-in-out; }
.say-dots i:nth-child(2) { animation-delay: .15s; }
.say-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sayDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.say-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.say-chips button { opacity: 0; transform: translateY(4px); transition: opacity .18s ease-out, transform .18s ease-out; transition-delay: calc(var(--i, 0) * 60ms); }
.say-chips.in button { opacity: 1; transform: none; }
.say-chips button { padding: 6px 12px; min-height: 32px; border-radius: 999px; border: 1px solid rgba(160,107,255,.45); background: rgba(160,107,255,.14); color: var(--text); font-size: 13px; font-weight: 600; }
.say-chips button:hover { background: rgba(160,107,255,.3); }
@keyframes chipsIn { from { opacity: 0; transform: translateY(4px); } }
.say-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.say-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
body.more-open .orb-say, body.pop-open .orb-say, body.chat-open .orb-say { visibility: hidden; }
@media (max-width: 640px) { .orb-say { max-width: calc(100vw - 112px); } }
@media (prefers-reduced-motion: reduce) { .orb-say { transition: opacity .15s; scale: 1; } .say-dots i { animation: none; opacity: .8; } }

/* the words are laid out from the start (so the bubble never resizes) and fade in a word at a time */
.say-text span { opacity: 0; transition: opacity .16s ease-out; }
.say-text span.in { opacity: 1; }
.orb-say.typing .say-text { display: block; visibility: hidden; }
.orb-say.typing .say-dots { display: inline-flex; position: absolute; left: 0; top: 2px; }
@media (prefers-reduced-motion: reduce) { .say-text span, .say-chips button, .say-body { transition: none; } }

/* "Ask me anything": says what the orb is whenever it isn't talking (then just a chat mark) */
.orb-ask {
  position: fixed; left: 0; top: 0; z-index: 13; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid rgba(160,107,255,.45); background: rgba(16,14,24,.97); color: var(--text);
  font: 600 14px/1 "Outfit", system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  box-shadow: -16px 0 16px -4px rgba(9,9,12,.9), 0 8px 24px rgba(0,0,0,.5), 0 0 22px -6px rgba(160,107,255,.5); /* left halo joins it to the orb */
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.orb-ask.on { opacity: 1; pointer-events: auto; }
.orb-ask svg { width: 17px; height: 17px; color: #c9b8ff; }
.orb-ask:hover { background: rgba(48,40,72,.95); }
.orb-ask.mini { width: 34px; padding: 0; justify-content: center; }
.orb-ask.mini span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.more-open .orb-ask, body.pop-open .orb-ask, body.chat-open .orb-ask { visibility: hidden; }
.lens.flying.docked { filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }

/* Off-screen once the bar has stuck: stop repainting the hero's shimmer and live-dot pulse */
body.bar-stuck .grad, body.bar-stuck .dot { animation-play-state: paused; }

/* The day-step buttons arrive with the compact bar: they grow in from nothing (and the pills ease
   aside) instead of popping in and shoving the row over in one frame. */
.controls .step-btn { transition: width .22s var(--ease), opacity .22s var(--ease), display .22s allow-discrete; }
@starting-style { .controls.stuck .step-btn { width: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .controls .step-btn { transition: none; } }

/* ===================================================================================================
   The fold, driven by the scroll on the compositor (CSS scroll-driven animations).
   app.js measures on load/resize: --fold-a (scrollY where the bar sticks), --fold-b (--fold-a + R),
   --fold-r (R: the strip's footprint, how far the genre row rises) and --h0 (the bar's full height).
   Layout never changes: the strip fades and squeezes, the genre row slides up by R, the bar's own
   background (.bar-bg) shortens to the compact height and fades in, the edge line rides up with it,
   and the day-step buttons fade in (their space is always kept). Nothing below the bar moves, so the
   feed stays snug under the bar's edge all the way, frame for frame with the scroll — even when the
   main thread is busy. The old .stuck rules no longer apply: the compact state is .compact.
   =================================================================================================== */
:root { --fold-a: 100000px; --fold-b: 100001px; --fold-c: 100002px; --fold-r: 0px; --h0: 0px; --top-h-full: 68px; } /* until measured: never fold */
.controls { pointer-events: none; }
.controls > * { pointer-events: auto; }
.controls .bar-bg, .controls .bar-edge { position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none; }
.controls .bar-bg {
  height: var(--h0); background: rgba(9,9,12,.95);
  backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
}
.controls .bar-edge { height: 1px; background: var(--line); box-shadow: 0 12px 30px -10px rgba(0,0,0,.8); }
@media (max-width: 640px) { .controls .bar-bg { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0a0a0d; } }

.controls .rail-wrap, .controls .date-rail, .controls .genre-row, .controls .bar-bg, .controls .bar-edge, .controls .step-btn {
  animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto;
  animation-timeline: scroll(root); animation-range: var(--fold-a) var(--fold-b);
}
.controls .rail-wrap { animation-name: fold-strip-fade; }      /* the strip (and its arrows, month label) fade out */
.controls .date-rail { animation-name: fold-strip-squeeze; }   /* ...while squeezing toward their middle */
.controls .genre-row { animation-name: fold-genre; }            /* the genre row rises into the strip's place */
.controls .bar-bg { animation-name: fold-bg; }                  /* the bar's background arrives and shortens */
.controls .bar-edge { animation-name: fold-edge; }
.controls .step-btn { animation-name: fold-steps; }
@keyframes fold-strip-fade { from { opacity: 1; } 42% { opacity: 0; animation-timing-function: linear; } to { opacity: 0; } }
@keyframes fold-strip-squeeze { from { transform: none; } to { transform: translateY(calc(var(--fold-r) * -0.45)) scale(.94, .55); } }
@keyframes fold-genre { from { transform: none; } to { transform: translateY(calc(var(--fold-r) * -1)); } }
@keyframes fold-bg { from { opacity: 0; clip-path: inset(0 0 0 0); } 35% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 var(--fold-r) 0); } }
@keyframes fold-edge { from { opacity: 0; transform: translateY(var(--h0)); } 35% { opacity: 1; } to { opacity: 1; transform: translateY(calc(var(--h0) - var(--fold-r))); } }
@keyframes fold-steps { from, 70% { opacity: 0; visibility: hidden; } 72% { visibility: visible; } to { opacity: 1; visibility: visible; } }
/* the opacity curves ease (so the strip doesn't just stop); the movements stay linear, locked to the scroll */
.controls .rail-wrap { animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
/* the step buttons' space is always kept, so the pill row never shifts; shown outright once a day is picked */
.controls .step-btn, .controls .step-btn:disabled { display: grid !important; place-items: center; }
.controls .step-btn:disabled { visibility: hidden !important; }
/* the strip can't be reached while folded away (app.js also makes it inert) */
.controls.compact .rail-wrap { pointer-events: none; }
/* where the orb was, the day under it shows again as it lifts off (no hole while the strip fades) */
.controls.folding .rail-wrap.has-lens .date-rail .day { --under: 0 !important; visibility: visible !important; }
@media (max-width: 640px) { .controls.compact::after { background: linear-gradient(90deg, transparent, #0a0a0d 80%); } }
/* Browsers without scroll-driven animations: app.js writes the same transforms each frame instead. */
@supports not (animation-timeline: scroll()) {
  .controls .rail-wrap, .controls .date-rail, .controls .genre-row, .controls .bar-bg, .controls .bar-edge, .controls .step-btn { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* still tied to the scroll (it's the user's own motion), just without the squeeze */
  @keyframes fold-strip-squeeze { from, to { transform: none; } }
}

/* Phones: once the strip has folded, the header slides away as a second scroll-driven phase
   (--fold-b → --fold-c, the header's height of scrolling) while the bar's sticky top glides from the
   header's height to 0 with it, so the bar's edge still moves exactly with the content. Day headings
   pin under the bar wherever it is. (Browsers without scroll timelines keep the timed slide.) */
@media (max-width: 640px) {
  @supports (animation-timeline: scroll()) {
    .top, .controls, .day-head {
      animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto;
      animation-timeline: scroll(root); animation-range: var(--fold-b) var(--fold-c);
    }
    .top { animation-name: slide-header; transition: none; }
    .controls { animation-name: bar-rise; }
    .day-head { animation-name: head-rise; }
    @keyframes slide-header { from { transform: none; } to { transform: translateY(-100%); } }
    @keyframes bar-rise { from { top: var(--top-h-full); } to { top: 0px; } }
    @keyframes head-rise { from { top: calc(var(--top-h-full) + var(--bar-h) - 1px); } to { top: calc(var(--bar-h) - 1px); } }
    .controls, .day-head { transition: none; }
  }
}

/* The docked orb sits full size in the bottom-left corner: leave the page room to scroll its last
   lines (the footer) clear of it */
.foot { padding-bottom: calc(var(--orb-dock, 120px) + 40px); }
@media (max-width: 640px) { .foot { padding-bottom: calc(var(--orb-dock, 110px) + 32px + env(safe-area-inset-bottom)); } }

/* Hero lockup sign-off (H3 hero tier: >=96px, stacked city) */
.signoff { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--text); padding: 64px 0 40px; }
.signoff .wm { font-size: clamp(76px, 11vw, 132px); }
.signoff .wm-o { margin: 0 -0.008em 0 0.035em; filter: drop-shadow(0 0 0.05em rgba(125, 82, 255, 0.18)); }
.signoff .wm-city { font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0.5em; padding-left: 0.5em; margin: 0; color: #d9d6e4; }
.signoff:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: 12px; }
.foot-sign { grid-column: 1 / -1; }
.foot .signoff { padding: 24px 0 36px; border-bottom: 1px solid var(--line); }
.foot-brand p:first-child { margin-top: 0; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; gap: 20px; } .foot-links .link-btn { text-align: left; } }
/* City tokens (source of truth: .claude/skills/loudsyd-browser-test/scripts/brandart.mjs CITIES) */
:root { --city-rim-a: #6f9bff; --city-rim-mid: #b58cff; --city-rim-b: #f2b56b; }

/* First-visit hint: "Hover any gig to hear the artist" in the first day heading, gone after the first listen */
.listen-hint {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  animation: hint-in .5s var(--ease) .6s both;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.listen-hint:hover { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; }
.listen-hint .eq { height: 12px; }
.listen-hint .eq i { animation: eq .9s ease-in-out infinite; opacity: 1; background: var(--grad); }
.listen-hint.bye { opacity: 0; transform: translateY(-50%) scale(.94); }
@keyframes hint-in { from { opacity: 0; transform: translateY(-50%) translateX(8px); } }
/* Phones and narrow windows: its own centred line under the date */
@media (max-width: 760px) {
  .day-head:has(.listen-hint) { flex-wrap: wrap; row-gap: var(--s-2); padding-bottom: var(--s-4); }
  .listen-hint { position: static; transform: none; flex-basis: auto; margin: 0 auto; height: 28px; font-size: 12.5px; }
  .day-head .listen-hint { order: 9; }
  .day-head:has(.listen-hint)::after { content: ""; order: 8; flex-basis: 100%; }
  .listen-hint.bye { transform: scale(.94); }
  @keyframes hint-in-m { from { opacity: 0; } }
  .listen-hint { animation-name: hint-in-m; }
}
@media (prefers-reduced-motion: reduce) { .listen-hint, .listen-hint .eq i { animation: none; } }
.chat.is-loud .msg { white-space: pre-line; } /* keep the line breaks in Loud's replies */
/* Short screens (e.g. a laptop at 200–400% zoom): the whole Loud panel scrolls, and the message box
   stays stuck to its bottom so it can always be reached (WCAG 1.4.10 Reflow). */
.chat.is-loud { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 560px) {
  .chat.is-loud .chat-body { min-height: 0; flex: none; overflow: visible; }
  .chat.is-loud .chat-form { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -12px 18px 6px rgba(22,22,29,.96); }
}

/* The day-step arrows take no room until the bar folds: they slide in over the last part of the
   fold, so the date pill sits straight on the row (in line with the search box and genre row)
   instead of floating between two invisible gaps. */
.controls { --step-w: 38px; }
.controls .step-btn { animation-name: fold-steps-w; overflow: hidden; min-width: 0; padding: 0; }
@keyframes fold-steps-w {
  from, 70% { width: 0; margin-right: -8px; border-width: 0; opacity: 0; visibility: hidden; }
  72% { visibility: visible; }
  to { width: var(--step-w); margin-right: 0; border-width: 1px; opacity: 1; visibility: visible; }
}
@supports not (animation-timeline: scroll()) {
  .controls .step-btn { width: calc(var(--step-w) * var(--step-k, 0)); margin-right: calc(-8px * (1 - var(--step-k, 0))); border-width: calc(1px * var(--step-k, 0)); }
}

/* Landing rhythm: the hero and results spacing is set only here, from one scale.
   Desktop: header→title 24–32, title→count 16, count→search 24, search→artists 12. Phones: header→title 24–48 (by
   screen height), title→count 16, count→search 24, search→artists 16; the strip sits evenly between
   the filter pills and the genres; genres→day heading 24 (heading padding included). */
:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; }
.hero { padding: clamp(var(--s-5), 3.4vh, var(--s-6)) var(--gutter) var(--s-3); }
.hero .sub { margin-top: var(--s-4); }
.prompt { margin-top: var(--s-5); }
.suggest { margin-top: var(--s-3); }
.results { padding-top: var(--s-3); }
.results:has(> .results-head.quiet) { padding-top: 0; } /* no summary line: the day heading follows the genres */
/* The date strip: the tall strip leaves room for the orb's glow, so its bottom margin tucks under
   it; the genre row then sits clear of the orb's rim. (Without WebGL there's no orb: plain strip.) */
.controls:not(.stuck) .rail-wrap { margin-block: var(--s-3) calc(-1 * var(--s-4)); }
.controls:not(.stuck) .rail-wrap.has-lens { margin-block: 0 calc(-1 * var(--s-4)); }
@media (min-width: 641px) {
  .controls .genre-row { margin-top: var(--s-4); } /* the orb clears the genre chips as it clears the pills */
}
@media (max-width: 640px) {
  .controls { --step-w: 44px; }
  .hero { padding-top: clamp(var(--s-5), 4.6vh, var(--s-7)); }
  .prompt { margin-top: var(--s-5); }
  .suggest { margin-top: var(--s-4); }
  .suggest::after { content: ""; flex: 0 0 calc(var(--gutter) - var(--s-2)); } /* + the 8px gap: ends on the gutter (overflow drops end padding) */
  .controls:not(.stuck) .rail-wrap.has-lens { margin-block: var(--s-1) var(--s-2); } /* orb clear of the genre chips */
  /* the right-edge fade has to paint above the pill row (z 8), or the Filters pill just slices off */
  .controls::after { z-index: 9; }
  body.pop-open .controls::after, body.more-open .controls::after { display: none; }
  /* Filters is its icon (with its count badge) so the whole pill row fits a phone screen */
  .controls .more-btn { width: 44px; padding: 0; justify-content: center; gap: 0; font-size: 0; position: relative; }
  .controls .more-btn svg { width: 19px; height: 19px; }
  .controls .more-count { position: absolute; top: -3px; right: -3px; font-size: 11px; }
}