:root {
	/* light-dark() resolves by color-scheme: system preference by default,
	   forced by the data-theme override from the toggle */
	color-scheme: light dark;
	--paper: light-dark(#FFFFFF, #1A1C1F);
	--surface: light-dark(#FFFFFF, #242629);
	--ink: light-dark(#212529, #E9ECEF);
	--muted: light-dark(#6C757D, #9CA3AB);
	--line: light-dark(#DEE2E6, #383B40);
	--accent: light-dark(#0D6EFD, #6EA8FE);
	--accent-ink: light-dark(#FFFFFF, #051B3B);
	--accent-soft: light-dark(rgba(13, 110, 253, 0.10), rgba(110, 168, 254, 0.15));
	--chip: light-dark(#F1F3F5, #2E3136);
	--lucky-bg: light-dark(#FF0066, #D6005A);
	--lucky-ink: #FFFFFF;
	--lucky-shade: #000000;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}
button { font: inherit; color: inherit; cursor: pointer; }
/* rapid taps (day arrows, chips) must not trigger double-tap zoom; pinch zoom stays available */
button, a, input { touch-action: manipulation; }
.lucky-btn, .theme-btn, .pager-btn, .rest-chip, .map-link {
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.theme-switching * { transition: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--paper) 90%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.topbar-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 24px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brandrow {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}
.brandrow .theme-btn { justify-self: end; }
.daypager {
	display: flex;
	align-items: center;
	gap: 8px;
}
.day-label {
	/* fits the longest Czech day name with a date */
	min-width: 165px;
	text-align: center;
	font-weight: 700;
	font-size: 17.5px;
	font-variant-numeric: tabular-nums;
}
.pager-btn {
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	padding-bottom: 3px;
}
.pager-btn:hover:not(:disabled) { background: var(--chip); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.wordmark {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}
.logo {
	width: 26px;
	height: 33px;
	object-fit: contain;
}
.lucky-btn {
	background: var(--lucky-bg);
	color: var(--lucky-ink);
	border: none;
	border-radius: 999px;
	padding: 10px 21px;
	font-weight: 700;
}
.lucky-btn:hover { background: color-mix(in srgb, var(--lucky-bg) 85%, var(--lucky-shade)); }
.lucky-btn:active { background: color-mix(in srgb, var(--lucky-bg) 72%, var(--lucky-shade)); }
.theme-btn {
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 16px;
	line-height: 1;
}
.theme-btn:hover { background: var(--chip); }
/* the toggle shows the theme you are currently in; resolved in CSS rather than by
   menus.js so the icon is already correct on the first paint */
#icon-moon { display: none; }
:root[data-theme="dark"] #icon-sun { display: none; }
:root[data-theme="dark"] #icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) #icon-sun { display: none; }
	:root:not([data-theme]) #icon-moon { display: block; }
}
/* must follow the base topbar rules of equal specificity, otherwise it never applies */
@media (max-width: 600px) {
	.topbar-inner { padding: 16px 16px 8px; gap: 8px; }
	.brandrow { gap: 10px; }
	.wordmark-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.day-label { min-width: 0; font-size: 16px; }
	.daypager { gap: 12px; }
	.pager-btn { width: 42px; height: 42px; font-size: 24px; flex-shrink: 0; }
	.logo { width: 32px; height: 40px; }
	.theme-btn { width: 42px; height: 42px; }
	.theme-btn svg { width: 20px; height: 20px; }
}
/* the day label wraps on the narrowest phones, so give the controls their desktop size back */
@media (max-width: 359px) {
	.day-label { font-size: 15px; }
	.daypager { gap: 8px; }
	.pager-btn { width: 36px; height: 36px; font-size: 21px; }
	.logo { width: 28px; height: 35px; }
	.theme-btn { width: 36px; height: 36px; }
	.theme-btn svg { width: 18px; height: 18px; }
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
@media (max-width: 600px) {
	.toolbar { flex-wrap: nowrap; }
	.toolbar .search { min-width: 0; }
	.toolbar .lucky-btn {
		flex-shrink: 0;
		white-space: nowrap;
		padding: 8px 16px;
		font-size: 14.5px;
	}
}
.search {
	flex: 1 1 auto;
	max-width: 460px;
	min-width: 180px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 16px;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
}
.search::placeholder { color: var(--muted); }

.restrail {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 6px;
	padding-bottom: 2px;
}
.rest-group {
	display: flex;
	align-items: center;
	gap: 6px;
}
.rest-chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.rest-group-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--muted);
	margin-right: 2px;
	white-space: nowrap;
	flex: 0 0 60px;
}
@media (max-width: 600px) {
	/* both groups collapse into a single swipeable row without labels */
	.restrail {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 2px -16px 0;
		padding: 4px 16px 6px;
	}
	.restrail::-webkit-scrollbar { display: none; }
	.rest-group, .rest-chips { display: contents; }
	.rest-group-label { display: none; }
	.rest-group + .rest-group::before {
		content: "";
		width: 1px;
		align-self: stretch;
		background: var(--line);
		margin: 3px 5px;
		flex-shrink: 0;
	}
	.rest-chip { flex-shrink: 0; }
}
.rest-chip {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 15px;
	white-space: nowrap;
	color: var(--muted);
	font-weight: 600;
	font-size: 14.5px;
}
.rest-chip:hover { color: var(--ink); background: var(--chip); }
.rest-chip.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

main { max-width: 1180px; margin: 0 auto; padding: 20px 24px 56px; }
.no-results {
	color: var(--muted);
	text-align: center;
	padding: 40px 0;
	margin: 0;
}
.day-section { display: none; }
.day-section.active { display: block; }
@media (max-width: 600px) {
	main { padding: 16px 16px 48px; }
}

.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 22px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 8px;
}
.card-head h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.rest-link { color: inherit; text-decoration: none; }
.rest-link:hover, .rest-link:focus-visible { text-decoration: underline; }
.card-head-meta {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}
.distance {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: var(--muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.distance svg { align-self: center; }
/* the dot only renders between the minutes and km parts */
.distance > span + span::before { content: "· "; }
.map-link {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	color: var(--accent);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 15px;
}
.map-link svg { align-self: center; }
.map-link--ghost {
	visibility: hidden;
	/* keep only the vertical geometry — the distance must sit flush right */
	width: 0;
	padding-inline: 0;
	border-inline-width: 0;
	margin-left: -10px; /* cancels the card-head-meta gap */
}
@media (max-width: 600px) {
	/* card head stays on a single line: name truncates, km hides, map is icon-only */
	.card-head { align-items: center; }
	.card-head h2 {
		font-size: 17.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}
	.card-head-meta { flex-shrink: 0; }
	.distance { font-size: 13px; }
	.distance-km { display: none; }
	.map-link { padding: 7px; }
	.map-link-text { display: none; }
	/* the shorthand above resets padding-inline, so restate both axes */
	.map-link--ghost { padding: 7px 0; }
}
.map-link:hover, .map-link:focus-visible { background: var(--chip); border-color: var(--accent); }

.rows { display: flex; flex-direction: column; }
.row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 16.5px;
}
.row .name { min-width: 0; }
.row .price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.row.unpriced .price { font-weight: 500; }
@media (max-width: 600px) {
	/* A-Sport prices whole phrases ("k menu 25,-/samostatně 45,-"); kept on one line they
	   set the card's min-content width and the whole page scrolls sideways */
	.row .name { flex: 1 1 auto; }
	.row .price { white-space: normal; text-align: right; }
}
.row.lucky {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
	padding: 16px 14px;
	margin: 6px 0;
}
.row.lucky .name::before {
	content: "Dobrou chuť";
	display: inline-block;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.5;
	border-radius: 999px;
	padding: 4px 13px;
	margin-right: 10px;
	vertical-align: 1px;
}

.card.empty {
	border-style: dashed;
	color: var(--muted);
	min-height: 200px;
	padding: 22px 24px;
}
.card.empty p { margin: auto 0 0; text-align: center; font-size: 16.5px; }
.card.empty p:last-child { margin: auto 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}