/* ---------- Tokens ---------- */
/* Nordic print: flat color blocks with a little grain, simple shapes, firm rules instead of
   boxes. Fjord blue and lingonberry for the two of you, pine and saffron for the rest. Light and
   dark follow the system unless the header's switch picks one (data-theme on <html>). */
:root {
	color-scheme: light dark;
	--bg: light-dark(#f6f5f1, #0e1120);
	--surface: light-dark(#ffffff, #161a2c);
	--raised: light-dark(#ecebe4, #1f2438);
	--text: light-dark(#121417, #eceef4);
	--soft: light-dark(#2e323a, #c8ccd8);
	--muted: light-dark(#5a5e66, #9aa0b4);
	--faint: light-dark(#696d75, #878da1);
	--line: light-dark(#e2e1da, #232842);
	--border: light-dark(#d0cfc7, #303652);
	/* Accent text and rules; fills use --accent-fill with --on-accent on top */
	--accent: light-dark(#1f3d8c, #9db3ff);
	--accent-fill: light-dark(#1f3d8c, #5b7fe0);
	--on-accent: light-dark(#ffffff, #0e1120);
	--ok: light-dark(#1d4a3b, #6fcfa4);
	--likely: light-dark(#8a6400, #e0b657);
	--warn: light-dark(#a33a22, #ff8a70);

	/* The print inks, for color blocks and marks */
	--ink: #121417;
	--paper: #f6f5f1;
	--fjord: light-dark(#1f3d8c, #2a4aa8);
	--lingon: light-dark(#d9412b, #d24a33);
	--pine: light-dark(#1d4a3b, #22604c);
	--saffron: light-dark(#e3a92b, #d9a23a);

	--c-music: #d9412b;
	--c-jazz: light-dark(#1f3d8c, #5b7fe0);
	--c-trivia: #e3a92b;
	--c-food: light-dark(#9c2a4f, #c94a74);
	--c-dance: #e46f8c;
	--c-comedy: #f08a3c;
	--c-karaoke: light-dark(#6b3f8f, #9a6bc4);
	--c-art: #2a8c88;
	--c-market: light-dark(#1d4a3b, #3f8c6c);
	--c-open-mic: #a8652e;
	--c-class: #7c9a3a;
	--c-theater: light-dark(#4c6ea8, #7a98cf);
	--c-misc: light-dark(#7a7d85, #a3a6ae);

	--sans:
		"Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--serif: "Spectral", Georgia, serif;
	--header-h: 3.75rem;
	--panel-w: 18rem;
	--radius: 4px;
	/* Gray print grain, soft-lit onto color blocks so they read as ink on paper */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* Each category gets its own print color, used for dots on listings, venues and the map. */
.cat-live-music {
	--cat: var(--c-music);
}
.cat-jazz {
	--cat: var(--c-jazz);
}
.cat-trivia {
	--cat: var(--c-trivia);
}
.cat-food-drink-special {
	--cat: var(--c-food);
}
.cat-dance {
	--cat: var(--c-dance);
}
.cat-comedy {
	--cat: var(--c-comedy);
}
.cat-karaoke {
	--cat: var(--c-karaoke);
}
.cat-art {
	--cat: var(--c-art);
}
.cat-market {
	--cat: var(--c-market);
}
.cat-open-mic {
	--cat: var(--c-open-mic);
}
.cat-class {
	--cat: var(--c-class);
}
.cat-theater {
	--cat: var(--c-theater);
}
.cat-misc {
	--cat: var(--c-misc);
}

/* ---------- Base ---------- */
* {
	box-sizing: border-box;
}

html {
	scroll-padding-top: 4rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* The phone filter sheet is open: the page behind it stays put. (On <body>: hiding <html>'s
   overflow jumps Chrome to the end of the page.) */
.sheet-open body {
	overflow: hidden;
}

a {
	color: var(--text);
	text-decoration-color: var(--border);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	a:hover {
		color: var(--accent);
		text-decoration-color: currentColor;
	}
}

::selection {
	background: var(--accent-fill);
	color: var(--on-accent);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem 2rem;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Section headings in Spectral italic, the old print look */
h2 {
	font-size: 1.6rem;
	font-style: italic;
	line-height: 1.15;
}

section > h2 {
	padding-block: 0.5rem;
}

.muted {
	color: var(--muted);
}

.empty {
	margin: 0;
	padding: 1rem 0;
	color: var(--muted);
}

.dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--cat, var(--muted));
}

/* Small uppercase labels: filter group names and counts */
.group-title,
.date-count,
.ticket-eyebrow,
.step {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* Controls behave like controls: no text selection, no double-tap zoom, no tap flash */
button,
summary,
.opt,
.range-link,
.active-pill,
.icon-action {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
}

/* ---------- Header ---------- */
/* Phones: the wordmark and theme switch, with the nav on its own row below. Wider: one row. */
/* Constrained to the content width, so its rule matches the footer's closing one. */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.75rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem max(0.25rem, env(safe-area-inset-right, 0px)) 0
		max(1rem, env(safe-area-inset-left, 0px));
	border-bottom: 2px solid var(--text);
	background: var(--bg);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-right: auto;
	color: var(--text);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
}

.brand-place {
	color: var(--muted);
	font-weight: 500;
}

@media (hover: hover) {
	.brand:hover {
		color: var(--text);
	}
}

/* Two overlapping circles, fjord and lingonberry: the two of you */
.brand-mark {
	flex: none;
	display: block;
	width: 2.4rem;
	height: 1.8rem;
}

.brand-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.brand-mark .m-one {
	fill: var(--fjord);
}

.brand-mark .m-two {
	fill: var(--lingon);
}

.brand-mark .m-both {
	fill: var(--text);
}

nav {
	display: flex;
	order: 3;
	justify-content: space-between;
	width: 100%;
	padding-right: 0.75rem;
}

nav a {
	padding: 0.7rem 0 0.55rem;
	border-bottom: 3px solid transparent;
	color: var(--soft);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s;
}

nav a[aria-current="page"] {
	border-bottom-color: var(--lingon);
	color: var(--text);
	font-weight: 700;
}

@media (hover: hover) {
	nav a:hover {
		border-bottom-color: var(--border);
		color: var(--text);
	}
}

.theme-toggle {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}

.theme-toggle svg {
	width: 1.05rem;
	height: 1.05rem;
}

@media (hover: hover) {
	.theme-toggle:hover {
		color: var(--accent);
	}
}

/* Shows what a tap switches to: the moon in light, the sun in dark */
.theme-toggle .i-sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle .i-sun {
	display: block;
}

:root[data-theme="dark"] .theme-toggle .i-moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .i-sun {
		display: block;
	}
	:root:not([data-theme="light"]) .theme-toggle .i-moon {
		display: none;
	}
}

/* ---------- Footer ---------- */
/* Same container as the header: the closing rule spans the element (full width until the
   1200px cap), while the text keeps its gutters via .footer-row. */
footer {
	max-width: 1200px;
	margin: 3.5rem auto 0;
	padding-bottom: 2rem;
	color: var(--muted);
	font-size: 0.82rem;
}

/* © left; the reminder and links right. On narrow screens the info stacks under, left-aligned:
   plain block layout, because iOS Safari mislays a wrapped flex line with an auto margin and
   pushes the right-aligned text past the screen edge. */
.footer-row {
	padding: 0 1rem;
}

@media (min-width: 640px) {
	.footer-row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 0.25rem 2rem;
	}

	.footer-info {
		text-align: right;
	}
}

/* The horizon: one lingonberry sun setting into the closing rule */
footer::before {
	content: "";
	display: block;
	height: 1.5rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--text);
	background: radial-gradient(
		circle 1.5rem at 50% 100%,
		var(--lingon) 97%,
		transparent
	);
}

footer p {
	margin: 0.15rem 0;
}

footer a {
	color: var(--soft);
}

/* ---------- Hero ---------- */
/* A slim print band per page: its title over grainy color, a circle of the second ink cropped
   at the right edge. The shapes are decoration only. */
.hero {
	--block: var(--fjord);
	--shape: var(--lingon);
	--on-block: var(--paper);
	position: relative;
	display: flex;
	align-items: center;
	min-height: 4rem;
	margin: 1rem 0 1.25rem;
	padding: 0.75rem 4.5rem 0.75rem 1rem;
	overflow: hidden;
	isolation: isolate;
	background: var(--grain), var(--block);
	background-blend-mode: soft-light;
	color: var(--on-block);
}

.hero > * {
	position: relative;
	z-index: 1;
}

.hero::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -2.25rem;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: var(--grain), var(--shape);
	background-blend-mode: soft-light;
	transform: translateY(-15%);
}

body[data-page="week"] .hero {
	--block: var(--pine);
	--shape: var(--saffron);
}

body[data-page="map"] .hero {
	--block: var(--lingon);
	--shape: var(--fjord);
}

body[data-page="venues"] .hero,
body[data-page="venue"] .hero {
	--block: var(--saffron);
	--shape: var(--pine);
	--on-block: var(--ink);
}

body[data-page="about"] .hero {
	--block: var(--pine);
	--shape: var(--lingon);
}

/* Title, with an optional control beside it */
.hero-top {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	min-width: 0;
}

.hero h1 {
	min-width: 0;
	color: inherit;
	font-size: clamp(1.75rem, 7vw, 2.25rem);
	letter-spacing: -0.015em;
	line-height: 1.1;
}

body[data-page="tonight"] .hero h1,
body[data-page="week"] .hero h1 {
	font-style: italic;
}

/* A line about the page, under its band */
.intro {
	max-width: 40rem;
	margin: -0.5rem 0 1.25rem;
	color: var(--muted);
}

.intro > * {
	margin: 0;
}

/* ---------- Buttons ---------- */
button {
	font: inherit;
}

.surprise {
	display: inline-flex;
	flex: none;
	align-self: flex-start;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.5rem;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--on-block, var(--surface));
	color: var(--ink);
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.surprise-star {
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	fill: var(--lingon);
	transition: transform 0.3s;
}

@media (hover: hover) {
	.surprise:hover {
		background: var(--saffron);
	}
	.surprise:hover .surprise-star {
		transform: rotate(90deg);
	}
}

/* ---------- Filters ---------- */
/* One grid for the filters and the results: search across the top, then (on wide screens)
   the panel beside the results. */
.filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.filter-top {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Today | This week | a picked day */
.range {
	display: flex;
	flex: 1 1 100%;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.range-link,
.date-field {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.3rem;
	padding: 0 0.9rem;
	border-radius: 6px;
	color: var(--soft);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.range-link[aria-current="page"],
.date-field.picked {
	background: var(--accent-fill);
	color: var(--on-accent);
}

@media (hover: hover) {
	.range-link:not([aria-current="page"]):hover {
		color: var(--text);
		background: var(--raised);
	}
}

/* The calendar glyph and label are ours (phones draw an empty date input as a blank box); the
   native picker covers the whole field, invisible, so a tap anywhere opens it. */
.date-field {
	position: relative;
	min-width: 0;
	cursor: pointer;
}

.date-field svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	pointer-events: none;
}

/* The native input lies invisible over the field; our label shows the day, short. */
.date-input {
	position: absolute;
	inset: 0;
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.date-input::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	opacity: 0;
	cursor: pointer;
}

.search-row {
	display: flex;
	flex: 1 1 18rem;
	gap: 0.5rem;
}

.search-field {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
}

.search-field svg {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	width: 1rem;
	height: 1rem;
	color: var(--muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.search-field input {
	width: 100%;
	height: 2.75rem;
	padding: 0 0.9rem 0 2.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 1rem;
}

.search-field input::placeholder {
	color: var(--faint);
}

.search-field input:focus-visible {
	outline-offset: 0;
	border-color: var(--accent);
}

.sheet-open {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.45rem;
	height: 2.75rem;
	padding: 0 0.95rem;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.sheet-open svg {
	width: 1rem;
	height: 1rem;
}

.sheet-open[hidden] {
	display: none;
}

.count {
	min-width: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--accent-fill);
	color: var(--on-accent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25rem;
	text-align: center;
}

.count[hidden] {
	display: none;
}

/* Each filter that's set, as a pill that removes it */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.active-filters[hidden] {
	display: none;
}

.active-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.25rem;
	padding: 0 0.55rem 0 0.8rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-size: 0.85rem;
	cursor: pointer;
}

.active-pill svg {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--muted);
}

@media (hover: hover) {
	.active-pill:hover {
		border-color: var(--accent);
	}
}

.active-clear {
	padding: 0.4rem 0.5rem;
	color: var(--accent);
	font-size: 0.88rem;
	text-decoration: none;
}

/* The panel: foldable groups of options */
.sheet-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0 0.4rem 0.75rem;
}

.sheet-head h2 {
	margin-right: auto;
	font-size: 1.35rem;
}

.sheet-head a {
	padding: 0.5rem;
	color: var(--accent);
	font-size: 0.9rem;
	text-decoration: none;
}

.sheet-close {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.group {
	border-top: 1px solid var(--line);
}

.group-summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	color: var(--text);
	list-style: none;
	cursor: pointer;
}

.group-summary::-webkit-details-marker {
	display: none;
}

.group-title {
	flex: 1;
}

/* A plus that turns into a minus as the group opens */
.group-summary::after {
	content: "+";
	width: 1rem;
	color: var(--faint);
	font-size: 1.1rem;
	text-align: center;
}

.group[open] > .group-summary::after {
	content: "−";
}

.opts {
	display: flex;
	flex-direction: column;
	padding-bottom: 0.6rem;
}

.opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 6px;
	color: var(--soft);
	font-size: 0.95rem;
	line-height: 1.25;
	cursor: pointer;
}

@media (hover: hover) {
	.opt:hover {
		background: var(--raised);
		color: var(--text);
	}
}

.opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.opt-box {
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	border: 1.5px solid var(--border);
	border-radius: 3px;
}

.opt-radio .opt-box {
	border-radius: 50%;
}

.opt:has(input:checked) {
	color: var(--text);
}

.opt input:checked + .opt-box {
	border-color: var(--accent-fill);
	background: var(--accent-fill);
	box-shadow: inset 0 0 0 2px var(--surface);
}

.opt:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.opt-label {
	flex: 1;
}

.opt-hint {
	color: var(--faint);
	font-size: 0.82rem;
}

.opt-n {
	color: var(--faint);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

/* Options that would give nothing fade, but stay pickable */
.opt-none:not(:has(input:checked)) {
	opacity: 0.5;
}

/* Neighborhoods past the first few wait behind "All 16 neighborhoods" (with JS) */
.filters.js .opt-extra:not(:has(input:checked)) {
	display: none;
}

.filters.js .group.all .opt-extra {
	display: flex;
}

.opts-more {
	margin: -0.4rem 0 0.6rem;
	padding: 0.45rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--accent);
	font-size: 0.9rem;
	cursor: pointer;
}

.opts-more[hidden],
.sheet-done[hidden],
.sheet-backdrop[hidden] {
	display: none;
}

.sheet-foot:empty {
	display: none;
}

/* Wide screens: the panel is a sidebar that stays in view while the results scroll */
@media (min-width: 900px) {
	.filters {
		grid-template-columns: var(--panel-w) minmax(0, 1fr);
		column-gap: 2.5rem;
	}
	.filter-top,
	.active-filters {
		grid-column: 1 / -1;
	}
	/* The When switch fills the panel's column, so its edges line up with the filters below */
	.filter-top:has(.range) {
		display: grid;
		grid-template-columns: var(--panel-w) minmax(0, 1fr);
		column-gap: 2.5rem;
	}
	.range-link,
	.date-field {
		flex: 1 1 auto;
		padding: 0 0.6rem;
	}
	.filter-panel {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
		align-self: start;
		max-height: calc(100vh - var(--header-h) - 2rem);
		overflow-y: auto;
		margin-left: -0.75rem;
		border-bottom: 1px solid var(--line);
		scrollbar-width: thin;
		scrollbar-color: var(--line) transparent;
	}
	.sheet-open {
		display: none;
	}
	.sheet-backdrop,
	.sheet-done {
		display: none;
	}
}

/* Phones and tablets, with JS: the panel is a bottom sheet behind the Filters button, its
   options chips that wrap. Without JS it stays in the page. */
@media (max-width: 899.98px) {
	.filters.js .filter-panel {
		position: fixed;
		inset: auto 0 0;
		z-index: 1100;
		display: flex;
		flex-direction: column;
		max-height: 88dvh;
		border-radius: 18px 18px 0 0;
		border-top: 1px solid var(--border);
		background: var(--surface);
		box-shadow: 0 -12px 40px rgb(0 0 0 / 0.25);
		transform: translateY(100%);
		visibility: hidden;
	}
	.filters.js .filter-panel.open {
		transform: none;
		visibility: visible;
	}
	/* Slides only while opening or closing (the client sets .sliding for that long) */
	.filters.js .filter-panel.sliding {
		transition:
			transform 0.25s ease,
			visibility 0s 0.25s;
	}
	.filters.js .filter-panel.sliding.open {
		transition: transform 0.25s ease;
	}
	.filters.js .sheet-head {
		padding: 0.6rem 0.25rem 0.25rem 1.25rem;
	}
	.filters.js .sheet-head::before {
		content: "";
		position: absolute;
		top: 0.45rem;
		left: 50%;
		width: 2.5rem;
		height: 4px;
		border-radius: 999px;
		background: var(--border);
		transform: translateX(-50%);
	}
	.filters.js .sheet-close {
		display: inline-grid;
		place-items: center;
	}
	.filters.js .sheet-body {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 1.25rem 1rem;
	}
	.filters.js .group {
		border-top: 0;
	}
	.filters.js .group-summary {
		padding: 0;
	}
	.filters.js .opts {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	.filters.js .opt {
		min-height: 2.5rem;
		padding: 0 0.85rem;
		gap: 0.4rem;
		border: 1px solid var(--border);
		border-radius: 999px;
		font-size: 0.9rem;
	}
	.filters.js .opt-box,
	.filters.js .opt-hint {
		display: none;
	}
	.filters.js .opt-label {
		flex: none;
	}
	.filters.js .opt:has(input:checked) {
		border-color: var(--accent-fill);
		background: var(--accent-fill);
		color: var(--on-accent);
	}
	.filters.js .opt:has(input:checked) .opt-n {
		color: var(--on-accent);
	}
	.filters.js .opts-more {
		margin: 0.4rem 0 0.5rem;
		padding-left: 0;
	}
	.filters.js .sheet-foot {
		padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
	}
	.sheet-done {
		width: 100%;
		height: 3.25rem;
		border: 0;
		border-radius: var(--radius);
		background: var(--accent-fill);
		color: var(--on-accent);
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
	}
	.sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1050;
		background: rgb(0 0 0 / 0.45);
	}
	/* Without JS the panel sits inline above the results */
	.filters:not(.js) .filter-panel {
		border-bottom: 1px solid var(--line);
	}
}

@media (max-width: 559.98px) {
	.range-link,
	.date-field {
		padding: 0 0.5rem;
		font-size: 0.88rem;
	}
}

.results {
	min-width: 0;
}

/* ---------- Day and time-of-day headings ---------- */
/* The day at the top of Today: the same tear-off block and italic name as This week's days,
   and how much is on */
.date-heading {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0.25rem 0 0;
	padding: 0.6rem 0 0.25rem;
}

.date-weekday {
	font-family: var(--serif);
	font-size: 1.65rem;
	font-style: italic;
	line-height: 1.15;
}

.date-count {
	margin-left: auto;
	color: var(--muted);
}

/* Sections that fold: the time-of-day groups, each day of the week, the happy hour shelf */
.fold-summary {
	list-style: none;
	cursor: pointer;
}

.fold-summary::-webkit-details-marker {
	display: none;
}

.fold-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fold-heading::after {
	content: "";
	flex: none;
	width: 0.42rem;
	height: 0.42rem;
	margin: 0 0.3rem 0.2rem 0.6rem;
	border-right: 1.5px solid var(--faint);
	border-bottom: 1.5px solid var(--faint);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

details[open] > .fold-summary .fold-heading::after {
	margin-bottom: -0.15rem;
	transform: rotate(-135deg);
}

.fold-summary:focus-visible {
	outline-offset: -2px;
}

/* Time-of-day and day headings: Spectral italic beside a small print mark, the count at the end */
.part-heading,
.day-heading {
	gap: 0.65rem;
	color: var(--text);
}

.part-heading {
	min-height: 2.75rem;
	padding: 1.1rem 0 0.55rem;
	font-size: 1.5rem;
}

.part-hours,
.part-count {
	font-family: var(--sans);
	font-size: 0.85rem;
	font-style: normal;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--faint);
}

.part-count {
	margin-left: auto;
	font-weight: 600;
}

/* One shape per part of the day: sunrise, sun, sunset, moon, night */
.part-mark {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.part-morning {
	height: 0.5rem;
	border-radius: 1rem 1rem 0 0;
	background: var(--saffron);
}

.part-afternoon {
	border-radius: 50%;
	background: var(--saffron);
}

.part-evening {
	height: 0.5rem;
	border-radius: 1rem 1rem 0 0;
	background: var(--lingon);
}

.part-night {
	border-radius: 50%;
	box-shadow: inset -0.3rem -0.15rem 0 0 var(--fjord);
}

.part-late {
	width: 0.8rem;
	height: 0.8rem;
	background: var(--fjord);
	transform: rotate(45deg);
}

/* Happy hours: a ring in the deal color */
.part-specials {
	border: 2.5px solid var(--c-food);
	border-radius: 50%;
}

/* Trivia: a diamond in the trivia color */
.part-trivia {
	width: 0.7rem;
	height: 0.7rem;
	background: var(--c-trivia);
	transform: rotate(45deg);
}

/* Each day of the week: a tear-off calendar block and its name, staying up while its listings
   scroll by */
.day {
	margin-top: 1.75rem;
}

.day:first-child {
	margin-top: 0.25rem;
}

.day-summary {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 0.6rem 0;
	background: var(--bg);
}

.day-heading {
	font-size: 1.65rem;
}

.day-heading.fold-heading::after {
	margin-left: 0.5rem;
}

.cal {
	display: inline-flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	background: var(--grain), var(--cal-bg, var(--pine));
	background-blend-mode: soft-light;
	color: var(--paper);
	font-family: var(--sans);
	font-style: normal;
	line-height: 1;
}

.day:first-child .cal,
.cal-today {
	--cal-bg: var(--lingon);
}

.cal-m {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cal-d {
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.03em;
}

/* Happy hours: folded away in a shelf of one-line rows */
.specials {
	border-bottom: 1px solid var(--line);
}

.specials-heading {
	color: var(--text);
}

.day > .specials .specials-heading {
	padding-top: 0.75rem;
}

.special-list {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.special-row {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem 0;
	border-top: 1px solid var(--line);
	font-size: 0.92rem;
}

.special-when {
	color: var(--soft);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.special-body {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	min-width: 0;
}

.special-where {
	font-weight: 600;
}

.special-where a {
	text-decoration: none;
}

.special-deal {
	color: var(--muted);
}

.special-deal a {
	color: inherit;
}

@media (max-width: 559.98px) {
	.special-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.1rem 0.5rem;
	}
	.special-when {
		grid-column: 1;
		font-size: 0.85rem;
	}
	.special-body {
		grid-column: 1;
		flex-direction: column;
	}
	.special-row .icon-action {
		grid-row: 1 / span 2;
		grid-column: 2;
	}
}

/* ---------- Listings ---------- */
/* Each listing is a flyer: a firm rule across the top with a strip of its category's color at
   the left, like tape. What it is, cost and freshness sit under the venue. */
.card {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0.15rem 0.9rem;
	padding: 1.3rem 0 0.7rem;
	border-top: 1.5px solid var(--soft);
}

.card::before {
	content: "";
	position: absolute;
	top: -1.5px;
	left: 0;
	width: 2.5rem;
	height: 4px;
	background: var(--cat, var(--muted));
}

.card-time {
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	font-variant-numeric: tabular-nums;
}

.card-start {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.card-end {
	color: var(--faint);
	font-size: 0.8rem;
}

.card-when {
	color: var(--accent);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
}

.card h3 {
	font-family: var(--serif);
	font-size: 1.35rem;
	line-height: 1.18;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.card p {
	margin: 0;
}

.card-where {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.92rem;
}

.card-where a {
	color: var(--text);
	font-weight: 500;
}

/* The title opens the listing's own page (every action, and its venue and day) */
.card-link {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.card-link:hover {
		text-decoration: underline;
		text-decoration-color: var(--border);
	}
}

.vibes {
	color: var(--muted);
	font-style: italic;
}

.card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.9rem;
	margin-top: 0.65rem;
	color: var(--faint);
	font-size: 0.8rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 600;
}

.chip::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--cat);
}

.cost {
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 600;
}

.badge,
.outdoor {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.badge::before {
	content: "";
	width: 0.38rem;
	height: 0.38rem;
	border-radius: 50%;
	background: var(--ok);
}

.badge-likely::before {
	background: var(--likely);
}

.badge-stale {
	color: var(--warn);
}

.badge-stale::before {
	background: var(--warn);
}

.card-actions {
	grid-column: 2;
	display: flex;
	margin: 0.2rem 0 0 -0.7rem;
}

.icon-action {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--faint);
	cursor: pointer;
}

.icon-action svg {
	width: 1.05rem;
	height: 1.05rem;
}

@media (hover: hover) {
	.icon-action:hover {
		color: var(--accent);
	}
}

.icon-action[hidden] {
	display: none;
}

/* "⋯": calendar, source and report, out of the way until asked for */
.card-more {
	position: relative;
}

.card-more > summary {
	list-style: none;
}

.card-more > summary::-webkit-details-marker {
	display: none;
}

.card-more[open] > summary {
	color: var(--accent);
}

.card-menu {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 13rem;
	padding: 0.3rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
}

.card-menu a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: var(--radius);
	color: var(--text);
	font-size: 0.92rem;
	text-decoration: none;
	white-space: nowrap;
}

.card-menu svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--faint);
}

@media (hover: hover) {
	.card-menu a:hover {
		background: var(--raised);
	}
}

.icon-action:focus-visible {
	outline-offset: -2px;
}

/* Wider: actions sit at the end of the title's row, in tighter buttons so the title keeps room */
@media (min-width: 720px) {
	.card {
		grid-template-columns: 5rem minmax(0, 1fr) auto;
		gap: 0 1.25rem;
		align-items: start;
		padding: 1.55rem 0 1.75rem;
	}
	.card::before {
		width: 3rem;
	}
	.card-time {
		grid-row: auto;
	}
	.card-start {
		font-size: 1.05rem;
	}
	.card h3 {
		font-size: 1.45rem;
	}
	.card-actions {
		grid-column: auto;
		margin: -0.45rem -0.5rem 0 0;
	}
	.card-actions .icon-action {
		width: 2.25rem;
		height: 2.25rem;
	}
	/* The actions sit at the card's right edge here, so the menu opens leftward */
	.card-menu {
		right: 0;
		left: auto;
	}
}

/* Below a listing's card on its own page: its venue and the rest of its day */
.listing-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.action {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

@media (hover: hover) {
	.action:hover {
		border-color: var(--accent);
		color: var(--text);
	}
}

/* ---------- Empty results and the subscribe line ---------- */
.empty-message {
	margin: 1.5rem 0 0.5rem;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-style: italic;
}

.empty-ideas {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.empty-ideas li {
	padding: 0.4rem 0;
	border-top: 1px solid var(--line);
}

.empty-ideas .part-count {
	margin-left: 0.4rem;
	color: var(--faint);
}

.subscribe {
	display: flex;
	gap: 0.6rem;
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.88rem;
}

.subscribe svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.2rem;
	color: var(--accent);
}

.subscribe a {
	color: var(--soft);
}

/* ---------- Surprise ticket ---------- */
.ticket {
	margin: 0.5rem 0 1.5rem;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	animation: ticket-in 0.25s ease;
}

@keyframes ticket-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
}

.ticket-head,
.ticket-part {
	position: relative;
	padding: 1rem 1.25rem;
}

.ticket-head h2 {
	font-size: 1.6rem;
}

.ticket-eyebrow {
	color: var(--accent);
}

.ticket-empty p {
	margin: 0;
	padding-right: 2.5rem;
}

.ticket-close {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

@media (hover: hover) {
	.ticket-close:hover {
		color: var(--text);
	}
}

.ticket-part .card {
	border-top: 0;
	padding-bottom: 0;
}

.ticket-part .card::before {
	display: none;
}

.ticket-tear {
	border-top: 1px dashed var(--border);
}

.step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--muted);
}

.step-n {
	display: inline-grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--accent-fill);
	color: var(--on-accent);
	font-size: 0.72rem;
	letter-spacing: 0;
}

.ticket-foot {
	padding: 0 1.25rem 1.1rem;
}

.ticket-foot button {
	min-height: 2.75rem;
	padding: 0 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
}

@media (hover: hover) {
	.ticket-foot button:hover {
		border-color: var(--accent);
	}
}

/* ---------- Venues ---------- */
.hood-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.25rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}

/* Underlined in the accent, so they read as links */
.hood-link {
	padding: 0.35rem 0;
	color: var(--text);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
}

/* Each neighborhood: a serif heading over the same firm rule as a listing, clear of the
   sticky header when jumped to */
.hood {
	scroll-margin-top: calc(var(--header-h) + 0.5rem);
}

.hood-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem 0.6rem;
}

.hood-heading .part-count {
	font-family: var(--sans);
	font-size: 0.85rem;
}

main section + section {
	margin-top: 1.5rem;
}

main .hood + .hood {
	margin-top: 2.25rem;
}

.venue-list {
	margin: 0;
	padding: 0;
	border-top: 1.5px solid var(--soft);
	list-style: none;
	column-gap: 2.5rem;
}

.venue-list li {
	break-inside: avoid;
	border-bottom: 1px solid var(--line);
}

.venue-row {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0.6rem 0;
	color: var(--text);
	text-decoration: none;
}

.venue-name {
	min-width: 0;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.3;
}

@media (hover: hover) {
	.venue-row:hover .venue-name {
		color: var(--accent);
	}
}

.venue-info {
	display: inline-flex;
	flex: none;
	gap: 0.6rem;
	align-items: center;
	color: var(--faint);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.venue-dots {
	display: inline-flex;
	gap: 0.2rem;
}

.venue-dots .dot {
	width: 0.45rem;
	height: 0.45rem;
}

.venue-meta {
	margin: 0 0 0.5rem;
	color: var(--muted);
}

/* Venue pages open with where it is: a pinned map (a link to directions) beside the facts */
.venue-top {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.venue-map {
	position: relative;
	display: block;
	height: 11rem;
	overflow: hidden;
	border: 1.5px solid var(--soft);
	border-radius: var(--radius);
	background: var(--raised);
	isolation: isolate;
}

.venue-tiles img {
	position: absolute;
	max-width: none;
	width: 256px;
	height: 256px;
}

.venue-tiles-dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .venue-tiles-light {
		display: none;
	}
	:root:not([data-theme="light"]) .venue-tiles-dark {
		display: block;
	}
}

:root[data-theme="dark"] .venue-tiles-light {
	display: none;
}

:root[data-theme="dark"] .venue-tiles-dark {
	display: block;
}

.venue-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1rem;
	height: 1.1rem;
	border: 3px solid var(--paper);
	border-radius: 50%;
	background: var(--lingon);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
	transform: translate(-50%, -50%);
}

.venue-map-cta {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
}

.venue-map-credit {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0.1rem 0.35rem;
	background: rgb(255 255 255 / 0.75);
	color: #333;
	font-size: 0.62rem;
}

@media (min-width: 720px) {
	.venue-top {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: center;
		gap: 1.5rem;
	}
	.venue-map {
		height: 13rem;
	}
}

/* ---------- About ---------- */
.prose {
	max-width: 40rem;
}

.prose p,
.prose ul {
	margin: 0 0 0.75rem;
}

.prose ul {
	padding-left: 1.25rem;
}

.prose li + li {
	margin-top: 0.4rem;
}

.prose li .badge {
	margin-right: 0.25rem;
}

.missing {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

/* ---------- Map ---------- */
.map {
	height: 60vh;
	min-height: 360px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

@media (min-width: 900px) {
	.map {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
		height: calc(100vh - var(--header-h) - 2rem);
	}
}

.popup-list {
	margin: 0.4rem 0 0;
	padding-left: 1rem;
}

.leaflet-container {
	background: var(--raised);
	font-family: var(--sans);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: var(--surface);
	color: var(--text);
}

.leaflet-popup-content-wrapper {
	border-radius: var(--radius);
}

.leaflet-container a.leaflet-popup-close-button {
	color: var(--muted);
}

/* ---------- Larger screens ---------- */
@media (min-width: 720px) {
	html {
		scroll-padding-top: calc(var(--header-h) + 4rem);
	}
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		flex-wrap: nowrap;
		gap: 1.75rem;
		height: var(--header-h);
		padding: 0 max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
		padding-right: max(1rem, calc((100vw - 1200px) / 2 + 1rem));
	}
	nav {
		order: 0;
		gap: 1.75rem;
		width: auto;
		padding-right: 0;
	}
	nav a {
		padding: 1.15rem 0 0.95rem;
	}
	.theme-toggle {
		margin-left: -0.75rem;
	}
	main {
		padding: 0 1.5rem 2rem;
	}
	.hero {
		min-height: 5rem;
		margin-top: 1.5rem;
		padding: 0.9rem 6rem 0.9rem 1.5rem;
	}
	.hero::after {
		right: -2.5rem;
		width: 7.5rem;
		height: 7.5rem;
	}
	.day-summary {
		top: var(--header-h);
	}
	.venue-list {
		columns: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		/* biome-ignore lint/complexity/noImportantStyles: reduced motion must override component transitions */
		transition: none !important;
		/* biome-ignore lint/complexity/noImportantStyles: reduced motion must override component animations */
		animation: none !important;
	}
}

/* ---------- Toast ("Link copied") ---------- */
.toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 1200;
	margin: 0;
	padding: 0.6rem 1rem;
	border-radius: var(--radius);
	background: var(--text);
	color: var(--bg);
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0.5rem);
	transition:
		opacity 0.2s,
		transform 0.2s;
}

.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}