/*
Theme Name: KantoHub
Theme URI: http://localhost/kantohub
Author: KantoHub
Description: A local business directory theme that works like a web app. Search businesses by name, category, location or anything on their menu, with live results from a custom REST endpoint and a reusable "KantoHub Search" block.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kantohub
Tags: directory, business, custom-post-type, block-styles, wide-blocks
*/

/* Layout: minimalist. One 1200px column, hairline stone borders, 6px corners, paper and mist bands alternating; midnight is the only accent. */
:root {
	/* Palette */
	--kh-paper: #fdfdfd;    /* page background */
	--kh-ink: #13171e;      /* text */
	--kh-midnight: #182a45; /* primary: buttons, links, active states */
	--kh-mist: #f7f5f6;     /* alternate bands, hover fills */
	--kh-stone: #e6e3e4;    /* borders, dividers */

	/* Derived */
	--kh-surface: #ffffff;
	--kh-muted: #626771;
	--kh-primary: var(--kh-midnight);
	--kh-primary-deep: #0e1a2d;
	--kh-on-primary: #ffffff;
	--kh-line: var(--kh-stone);
	--kh-open: #2f7a4f;
	--kh-closed: #8a8e96;
	--kh-danger: #a3261c;      /* errors, destructive actions */
	--kh-danger-deep: #861d15; /* danger hover */
	--kh-on-danger: #ffffff;
	--kh-danger-soft: #fdf3f2; /* error backgrounds */
	--kh-warning: #8a5a00;     /* warnings, waiting */
	--kh-warning-soft: #fdf3df;
	--kh-warning-line: #f1cf87;
	--kh-danger-line: #f2aaa3;
	--kh-open-soft: #e5f3ea;    /* success / open backgrounds */
	--kh-open-line: #cfe5d7;
	--kh-heart: #e0465b;        /* saved heart, counts, active pins */
	--kh-heart-soft: #fff1f2;
	--kh-heart-line: #f4c7cc;
	--kh-promo: #d33a47;        /* sale, promo, deals */
	--kh-star: #e8a33d;         /* star ratings */
	--kh-verified: #1877f2;     /* Verified badge */
	/* Chart series, in this order (style guide: Charts). Fixed per business, never by rank. */
	--kh-chart-1: #2a78d6;
	--kh-chart-2: #eb6834;
	--kh-chart-3: #1baf7a;
	--kh-chart-4: #eda100;
	--kh-chart-5: #e87ba4;
	--kh-chart-6: #008300;
	/* Small icons drawn in CSS (select arrows, checks), in the theme's colours. */
	--kh-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626771' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--kh-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
	--kh-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
	--kh-icon-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
	--kh-secondary: #e7eef8;    /* secondary: soft midnight tint, e.g. the "Write a review" button */
	--kh-secondary-deep: #d6e1f1;
	--kh-on-secondary: var(--kh-midnight);

	--kh-font-display: Manrope, system-ui, sans-serif;
	--kh-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--kh-radius: 6px;
	--kh-radius-lg: 10px;
	--kh-radius-xl: 16px;   /* dashboard panels, bottom sheets */
	/* Shadows: resting, panel, small control on a photo, dropdown menu, floating card, dialog. */
	--kh-shadow-sm: 0 1px 2px rgba(19, 23, 30, 0.08);
	--kh-shadow-panel: 0 1px 2px rgba(19, 23, 30, 0.04), 0 8px 24px rgba(19, 23, 30, 0.04);
	--kh-shadow-control: 0 2px 6px rgba(19, 23, 30, 0.18);
	--kh-shadow-menu: 0 16px 40px rgba(19, 23, 30, 0.12);
	--kh-shadow-float: 0 18px 44px rgba(19, 23, 30, 0.18);
	--kh-shadow-dialog: 0 30px 80px rgba(0, 0, 0, 0.35);
	--kh-gutter: clamp(16px, 4vw, 32px);
	--kh-max: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Full-bleed layers (the hero map) must never cause sideways scrolling. clip keeps the sticky header working. */
html, body { overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--kh-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--kh-ink);
	background: var(--kh-paper);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

a { color: var(--kh-midnight); text-underline-offset: 3px; }
a:hover { color: var(--kh-primary-deep); }

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

h1, h2, h3, h4 {
	font-family: var(--kh-font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	color: var(--kh-on-primary);
	background: var(--kh-midnight);
	border-radius: var(--kh-radius);
}

.container {
	width: 100%;
	max-width: calc(var(--kh-max) + var(--kh-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--kh-gutter);
}

.band--mist { background: var(--kh-paper); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--kh-paper);
	border-bottom: 1px solid var(--kh-stone);
}

.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 0; position: relative; }
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 68px;
}

/* Logo block: a flex box, so the logo sits exactly in the middle of the header row (no inline baseline gap). */
.site-brand { display: flex; flex: none; align-items: center; }
.site-brand .custom-logo-link { display: flex; align-items: center; }
.site-brand__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kh-font-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kh-ink);
	text-decoration: none;
}

/* Logo mark: pin with K on a midnight tile (inc/brand.php > kh_brand_mark()). */
.site-brand__mark { display: block; flex: none; width: 32px; height: 32px; }

/* Wordmark: "Kanto" heavy, "Hub" light. */
.wordmark { letter-spacing: -0.02em; }
.wordmark__a { font-weight: 800; color: var(--kh-ink); }
.wordmark__b { font-weight: 500; color: var(--kh-midnight); }

.site-header__search { flex: 1; max-width: 440px; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* Log in / Join (or My business / Log out) */
.site-auth { display: flex; align-items: center; gap: 6px; }
/* Divider only when a menu sits before the buttons. */
.site-nav__list + .site-auth { padding-left: 16px; border-left: 1px solid var(--kh-stone); }
.site-auth__link { padding: 8px 12px; font-size: 0.95rem; font-weight: 500; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius); }
.site-auth__link:hover { color: var(--kh-ink); background: var(--kh-mist); }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding: 8px 12px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--kh-ink);
	text-decoration: none;
	border-radius: var(--kh-radius);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { background: var(--kh-mist); }

/* Call-to-action menu item: add the CSS class "menu-cta" to it in Appearance > Menus. */
.site-nav__list > .menu-cta > a { color: var(--kh-on-primary); background: var(--kh-midnight); }
.site-nav__list > .menu-cta > a:hover { color: var(--kh-on-primary); background: var(--kh-primary-deep); }

.nav-toggle {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 1.5px;
	margin-inline: auto;
	background: var(--kh-ink);
	content: "";
	position: relative;
}

.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }

@media (max-width: 860px) {
	.site-header__inner { flex-wrap: wrap; padding-block: 10px; }
	.site-header__search { order: 3; flex-basis: 100%; max-width: none; }
	.nav-toggle { display: block; }
	.site-nav { display: none; flex-basis: 100%; order: 4; }
	.site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 12px; }
	.site-nav__list { flex-direction: column; align-items: stretch; }
	.site-auth { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--kh-stone); }
	.site-auth > * { flex: 1; text-align: center; justify-content: center; }
}

/* Compact header search */
.mini-search {
	display: flex;
	gap: 6px;
	padding: 4px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
}

.mini-search:focus-within { border-color: var(--kh-midnight); }

.mini-search input {
	flex: 1;
	min-width: 0;
	padding: 7px 10px;
	font: inherit;
	font-size: 0.95rem;
	color: inherit;
	background: transparent;
	border: 0;
	outline: 0;
}

/* The glass is the search button (no separate Search button), like the home search. */
.mini-search { align-items: center; padding: 2px 4px 2px 2px; }
.mini-search input { padding-left: 2px; }
.mini-search__go { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; color: var(--kh-muted); cursor: pointer; background: none; border: 0; border-radius: 50%; }
.mini-search__go:hover { color: var(--kh-midnight); }
.mini-search__go:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 1px; }
/* Live results under it, like the home search (blocks/search/style.css .kh-search__results). */
.mini-search { position: relative; }
.mini-search .kh-search__results { text-align: left; }
@media (max-width: 860px) { .mini-search .kh-search__results { max-height: min(60vh, 480px); } }

/* Search boxes: our own × instead of the browser's (blocks/search/view.js adds it while there's text). */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.kh-search__clear { display: grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--kh-muted); cursor: pointer; background: none; border: 0; border-radius: 50%; }
.kh-search__clear[hidden] { display: none; }
.kh-search__clear:hover { color: var(--kh-ink); background: var(--kh-mist); }
.kh-search__clear:active { background: var(--kh-stone); }
.kh-search__clear:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 1px; }

/* No browser autofill tint in the search boxes (our own panel lists recent searches). */
.mini-search input:-webkit-autofill,
.kh-search__input:-webkit-autofill { -webkit-text-fill-color: var(--kh-ink); box-shadow: 0 0 0 40px var(--kh-surface) inset; transition: background-color 9999s; }

/* Recent searches in the results panel (blocks/search/view.js). */
.kh-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px 6px; }
.kh-recent__title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.kh-recent__clear { padding: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--kh-midnight); cursor: pointer; background: none; border: 0; }
.kh-recent__clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.kh-recent__clear:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; border-radius: 2px; }
.kh-recent { display: flex; align-items: center; gap: 4px; border-radius: var(--kh-radius); }
.kh-recent:hover { background: var(--kh-mist); }
.kh-recent__link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 10px; font-size: 0.95rem; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius); }
.kh-recent__link svg { flex: none; color: var(--kh-muted); }
.kh-recent__link:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: -2px; }
.kh-recent__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-recent__remove { display: grid; flex: none; place-items: center; width: 32px; height: 32px; margin-right: 4px; padding: 0; font-size: 1.15rem; line-height: 1; color: var(--kh-muted); cursor: pointer; background: none; border: 0; border-radius: 50%; }
.kh-recent__remove:hover { color: var(--kh-ink); background: var(--kh-stone); }
.kh-recent__remove:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 1px; }

/* ---------- Shared pieces ---------- */
.eyebrow {
	margin: 0 0 8px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kh-muted);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--kh-on-primary);
	text-decoration: none;
	background: var(--kh-midnight);
	border: 1px solid var(--kh-midnight);
	border-radius: var(--kh-radius);
	cursor: pointer;
}

.button:hover { color: var(--kh-on-primary); background: var(--kh-primary-deep); border-color: var(--kh-primary-deep); }

.button--ghost { color: var(--kh-ink); background: var(--kh-surface); border-color: var(--kh-stone); }
.button--ghost:hover { color: var(--kh-ink); background: var(--kh-mist); border-color: var(--kh-stone); }

.kh-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--kh-ink);
	text-decoration: none;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
}

.kh-chip:hover { color: var(--kh-ink); background: var(--kh-mist); }
.kh-chip.is-active { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.kh-chip--small { padding: 3px 9px; font-size: 0.8rem; }

/* Status reads as quiet text, not a pill. */
.kh-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
}

.kh-badge::before {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	content: "";
}

/* "Open right now": a live green dot before the label. */
.eyebrow--live { display: inline-flex; align-items: center; gap: 8px; color: var(--kh-open); }
.eyebrow--live::before {
	width: 7px;
	height: 7px;
	background: currentColor;
	border-radius: 50%;
	animation: kh-live 2s ease-out infinite;
	content: "";
}

@keyframes kh-live {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kh-open) 45%, transparent); }
	100% { box-shadow: 0 0 0 8px transparent; }
}

.kh-badge--open { color: var(--kh-open); }
.kh-badge--closed { color: var(--kh-closed); }

.section { padding-block: clamp(40px, 6vw, 72px); }

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 28px;
}

.section__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.section__sub { margin: 6px 0 0; color: var(--kh-muted); }
.section__more { font-size: 0.95rem; font-weight: 500; color: var(--kh-ink); text-decoration: none; }
.section__more::after { content: " →"; }
.section__more:hover { text-decoration: underline; }

.page-head { padding-block: clamp(32px, 5vw, 56px) 0; }
.page-head__title { margin: 0 0 20px; font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.page-head__desc { max-width: 65ch; color: var(--kh-muted); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.empty-state {
	display: grid;
	justify-items: start;
	gap: 6px;
	max-width: 560px;
	padding: 32px;
	background: var(--kh-mist);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
}

.empty-state h2 { margin: 0; font-size: 1.3rem; }
.empty-state p { margin: 0 0 10px; color: var(--kh-muted); }
.empty-state--page { margin-block: 56px; }

/* ---------- Front page ---------- */
.hero { border-bottom: 1px solid var(--kh-stone); }
.hero:has(.kh-search.has-orbit) { border-bottom: 0; } /* The orbit band ends in its own curve. */
.hero .kh-search { padding-block: clamp(56px, 9vw, 112px) clamp(40px, 6vw, 72px); }
/* Orbit hero: room under the circling photos for the category tiles that ride up over the curve (.section--lift). */
.hero .kh-search.has-orbit { padding-bottom: clamp(150px, 14vw, 190px); }
@media (max-width: 640px) { .hero .kh-search.has-orbit { padding-bottom: 140px; } }

.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-tile {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 4px;
	height: 100%;
	padding: 28px 16px;
	color: var(--kh-ink);
	text-align: center;
	text-decoration: none;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	transition: border-color 0.15s ease, transform 0.2s ease;
}

.category-tile:hover { color: var(--kh-ink); border-color: var(--kh-midnight); transform: translateY(-2px); }
.category-tile__icon { width: 28px; height: 28px; margin-bottom: 10px; color: var(--kh-ink); transition: transform 0.2s ease; }
.category-tile:hover .category-tile__icon { transform: scale(1.08); }
.category-tile__name { font-weight: 600; }
.category-tile__count { font-size: 0.85rem; color: var(--kh-muted); font-variant-numeric: tabular-nums; }

/* Last slide: "View all categories" in primary. */
.category-tile--all { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.category-tile--all:hover { color: var(--kh-on-primary); background: var(--kh-primary-deep); border-color: var(--kh-primary-deep); }
.category-tile--all .category-tile__icon { color: var(--kh-on-primary); }
.category-tile--all .category-tile__count { color: rgba(255, 255, 255, 0.72); }
.category-tile--all .category-tile__count span { display: inline-block; transition: transform 0.2s ease; }
.category-tile--all:hover .category-tile__count span { transform: translateX(3px); }

/* ---------- One-row slider (assets/js/slider.js) ---------- */
.kh-slider { --kh-slide-gap: 16px; --kh-slides: 6; }

.kh-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--kh-slide-gap) * (var(--kh-slides) - 1)) / var(--kh-slides));
	gap: var(--kh-slide-gap);
	margin: 0;
	/* Room for the hover lift and focus ring, which the scroller would otherwise clip. */
	padding: 4px 2px 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 2px;
	scrollbar-width: none;
}

.kh-slider__track::-webkit-scrollbar { display: none; }
.kh-slider__item { scroll-snap-align: start; min-width: 0; }

.kh-slider.is-dragging .kh-slider__track { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.kh-slider.is-dragging .category-tile { pointer-events: none; }

@media (max-width: 1024px) { .kh-slider { --kh-slides: 4; } }
@media (max-width: 640px) { .kh-slider { --kh-slide-gap: 12px; --kh-slides: 2.4; } }

/* Dots under a slider (slider.js fills them in, one per page). */
.kh-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.kh-slider__dots[hidden] { display: none; }
.kh-slider__dot { width: 8px; height: 8px; padding: 0; cursor: pointer; background: var(--kh-stone); border: 0; border-radius: 999px; transition: width 0.25s ease, background-color 0.25s ease; }
.kh-slider__dot:hover { background: var(--kh-muted); }
.kh-slider__dot[aria-current="true"] { width: 24px; background: var(--kh-midnight); }
.kh-slider__dot:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 3px; }

/* Home page categories: no heading, the tiles ride up over the hero's curved edge.
   Above the hero's band and orbit, below its search and live results (blocks/search/style.css). */
.section--lift { position: relative; z-index: 2; margin-top: -140px; padding-top: 0; }
@media (max-width: 640px) { .section--lift { margin-top: -56px; } } /* Phones: the orbit sits lower, so the tiles rise less. */
.section--lift .category-tile { box-shadow: 0 1px 2px rgba(19, 23, 30, 0.04), 0 12px 28px -14px rgba(14, 26, 45, 0.28); }
/* The track scrolls sideways, so it clips anything outside its box: give the tiles' shadows room
   (about 26px below, 14px at the sides) and pull the margins back so the tiles stay where they were. */
@media (min-width: 641px) {
	.section--lift .kh-slider__track {
		margin: 0 -16px -24px;
		padding: 4px 16px 30px;
		scroll-padding-inline: 16px;
		/* Fade the side room, so a sliver of the next tile and the end of a shadow dissolve instead of stopping at a hard edge. */
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kh-slider__track { scroll-behavior: auto; }
	.kh-slider__dot { transition: none; }
}

/* ---------- Listing photos (Pro): business card and cover (inc/gallery.php) ----------
   The photos sit on top of each other and slide in from the right on their own
   (assets/js/photo-slider.js): waiting on the right, showing, or gone to the left.
   Each one fills the box, cropped from the middle. */
.photo-slider { position: absolute; inset: 0; overflow: hidden; }
.photo-slider__item { position: absolute; inset: 0; transform: translateX(100%); transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.photo-slider__item.is-active { transform: none; }
.photo-slider__item.is-prev { transform: translateX(-100%); }
.photo-slider__item.is-jump { transition: none; } /* Back to the right without crossing the box. */
.photo-slider__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.photo-slider--cover { z-index: -2; } /* Behind the shade and the title, like the single cover photo. */
@media (prefers-reduced-motion: reduce) { .photo-slider__item { transition: none; } }

/* Editor › Photos: what Pro adds, for Free accounts (template-parts/editor/gallery.php). */
.gallery-field__locked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; background: var(--kh-mist); border: 1px dashed var(--kh-stone); border-radius: var(--kh-radius-lg); }
.gallery-field__locked p { flex: 1 1 260px; margin: 0; font-size: 0.9rem; color: var(--kh-muted); }

/* ---------- Business cards ---------- */
.business-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 24px;
}

/* Fixed 4 / 2 / 1 columns: with 8 cards every row is full at every width. */
.business-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) { .business-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .business-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Up to 3 cards (related places on a business page): one row of 3 on wide
   screens. Below 900px a sideways row that runs to the screen edges, so the
   next card peeks in and it's clear there's more to swipe. */
.business-grid.business-grid--slide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.business-grid.business-grid--slide {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(80%, 320px);
		gap: 16px;
		margin-inline: calc(var(--kh-gutter) * -1);
		padding: 4px var(--kh-gutter) 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--kh-gutter);
		scrollbar-width: none;
	}
	.business-grid--slide::-webkit-scrollbar { display: none; }
	.business-grid--slide > * { scroll-snap-align: start; }
}
/* Phones: the small cards, as in the 2-column grids, with a third peeking in. */
@media (max-width: 640px) {
	.business-grid.business-grid--slide { grid-auto-columns: 42%; gap: 12px; }
}

/* The ad card (template-parts/ad-card.php) has the same shell. */
.business-card,
.ad-card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	transition: border-color 0.15s ease;
}

.business-card:hover,
.ad-card:hover { border-color: var(--kh-midnight); }

/* Ad card: only the posters, filling the whole card at 4:5 (about a business card's shape on every screen), sliding when 2–3 (.photo-slider--ad). */
.ad-card::before { content: ""; padding-top: 125%; } /* At least 4:5 tall; taller when the row is (it stretches, the posters fill it). */
.ad-card__link { position: absolute; inset: 0; display: block; overflow: hidden; color: inherit; background: var(--kh-mist); }
.ad-card__link:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: -2px; border-radius: var(--kh-radius-lg); }
.ad-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

.business-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	overflow: hidden;
	background: var(--kh-mist);
	border-bottom: 1px solid var(--kh-stone);
	text-decoration: none;
}

.business-card__media img { width: 100%; height: 100%; object-fit: cover; }

.business-card__monogram {
	font-family: var(--kh-font-display);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--kh-midnight);
	opacity: 0.55;
}

/* Column flex so the location row sits on the bottom edge of every card in a row. */
.business-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; min-width: 0; }

.business-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.business-card__cat { font-size: 0.85rem; color: var(--kh-muted); }

.business-card__title { margin: 0; font-size: 1.15rem; }
.business-card__title a { color: var(--kh-ink); text-decoration: none; }
.business-card__title a::after { position: absolute; inset: 0; content: ""; }

.business-card__where,
.business-card__excerpt { margin: 0; font-size: 0.95rem; color: var(--kh-muted); }
.business-card__where { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--kh-stone); font-size: 0.9rem; }
.business-card__distance { font-weight: 600; color: var(--kh-midnight); white-space: nowrap; }
.section__note { margin: 8px 0 0; font-size: 0.9rem; color: var(--kh-muted); }
.business-card__match { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--kh-midnight); }

/* Two lines max keeps card heights even. */
.business-card__excerpt,
.business-card__match {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-bottom: 6px;
}

/* ---------- Single listing ---------- */
.listing__head { padding-block: clamp(32px, 5vw, 52px) 24px; }
.listing__crumbs { display: flex; gap: 8px; font-size: 0.9rem; color: var(--kh-muted); }
.listing__crumbs a { color: inherit; text-decoration: none; }
.listing__crumbs a:hover { color: var(--kh-ink); text-decoration: underline; }
.listing__title { margin: 10px 0 10px; font-size: clamp(2rem, 5vw, 3.2rem); }
.listing__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; color: var(--kh-muted); }

/* Cover photo hero: the photo in the page's width (the .container's content
   box, rounded), not the whole screen, so it isn't stretched or zoomed in;
   dark gradient from the bottom so the white title stays readable on any
   image (WCAG contrast on the darkest part). Phones: edge to edge. */
.listing-cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: min(var(--kh-max), 100% - var(--kh-gutter) * 2);
	min-height: clamp(320px, 52vh, 480px);
	margin: 16px auto 0;
	padding-block: 0;
	border-radius: var(--kh-radius-xl);
	overflow: hidden;
	color: #fff;
	background: var(--kh-midnight);
	isolation: isolate;
}

.listing-cover__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.listing-cover__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(14, 22, 36, 0.92) 0%, rgba(14, 22, 36, 0.7) 32%, rgba(14, 22, 36, 0.25) 62%, rgba(14, 22, 36, 0.1) 80%, rgba(14, 22, 36, 0.35) 100%),
		linear-gradient(to right, rgba(14, 22, 36, 0.35), rgba(14, 22, 36, 0) 60%);
}

/* No cover photo yet: the same banner in the brand navy (fixed, so it stays
   dark in dark mode too), until the owner uploads one. */
.listing-cover--plain { background: linear-gradient(160deg, #182a45 0%, #13223a 60%, #0e1a2d 100%); }

.listing-cover__content { padding-block: clamp(80px, 14vh, 140px) clamp(28px, 4vw, 44px); }
/* Behind the cover, across the whole width: the first photo blurred and a little
   darker, fading into the page towards the bottom (like a Facebook page's band),
   so the sides aren't empty. Takes each photo's own colours; fades into the dark
   page in dark mode. None without a photo, and none on phones (no sides). */
.listing-cover-wrap { position: relative; isolation: isolate; overflow: hidden; }
.listing-cover__backdrop { position: absolute; inset: -40px; z-index: -1; background: center / cover no-repeat; filter: blur(40px) brightness(0.8) saturate(1.2); transform: translateZ(0); }
.listing-cover-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 30%, var(--kh-paper) 92%); } /* Over the blur (later in the page), under the cover. */
@media (max-width: 640px) {
	.listing-cover { width: 100%; margin-top: 0; border-radius: 0; }
	.listing-cover__backdrop { display: none; }
}
.listing-cover .listing__crumbs { color: rgba(255, 255, 255, 0.78); }
.listing-cover .listing__crumbs a:hover { color: #fff; }
.listing-cover .listing__title { max-width: 18ch; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25); }
.listing-cover .listing__meta { color: rgba(255, 255, 255, 0.85); }
.listing-cover .kh-badge--open { color: #8ee6b0; }
.listing-cover .kh-badge--closed { color: #d4d7dd; }

.listing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: start;
	padding-block: 28px;
}

@media (max-width: 900px) {
	.listing__layout { grid-template-columns: 1fr; }
}

.listing__main { display: grid; gap: 40px; min-width: 0; }
.listing__section h2 { margin: 0 0 14px; font-size: 1.3rem; }

.entry-content { max-width: 68ch; font-size: 1.05rem; }

/* ---------- Menu (inc/menu.php kh_render_menu()): food-app style rows ---------- */

/* Chips to jump between groups; they stay under the header while scrolling the menu. */
.menu-nav { position: sticky; top: var(--kh-sticky-top, var(--kh-header-h, 69px)); z-index: 4; display: flex; gap: 8px; margin: 0 0 6px; padding: 8px 0 10px; overflow-x: auto; scrollbar-width: none; background: var(--kh-paper); }
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav a { flex: none; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; color: var(--kh-ink); text-decoration: none; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 999px; transition: border-color 0.15s ease, background-color 0.15s ease; }
.menu-nav a:hover { border-color: var(--kh-midnight); background: var(--kh-mist); }
.menu-group { scroll-margin-top: calc(var(--kh-sticky-top, var(--kh-header-h, 69px)) + 60px); }

.menu-list { display: grid; margin: 0; padding: 0; list-style: none; }

/* One item: name, description, price on the left; the photo on the right. */
.menu-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--kh-stone); }
.menu-item:last-child { border-bottom: 0; }
.menu-item__info { display: grid; justify-items: start; gap: 4px; flex: 1; min-width: 0; }
.menu-item__name { font-weight: 700; line-height: 1.35; }
.menu-item__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.85rem; line-height: 1.45; color: var(--kh-muted); }
.menu-item__price { flex: none; max-width: 40%; font-weight: 700; line-height: 1.35; color: var(--kh-ink); text-align: right; font-variant-numeric: tabular-nums; }
.menu-item__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.menu-size { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; font-size: 0.8rem; white-space: nowrap; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: 999px; font-variant-numeric: tabular-nums; }
.menu-size__label { font-weight: 500; color: var(--kh-muted); }
.menu-size__price { font-weight: 700; color: var(--kh-ink); }

.menu-item__photo { position: relative; flex: none; width: 96px; height: 96px; padding: 0; overflow: hidden; cursor: pointer; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.menu-item__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.menu-item__photo:hover img,
.menu-item__photo:focus-visible img { transform: scale(1.06); }
.menu-item__photo:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
@media (max-width: 520px) { .menu-item__photo { width: 84px; height: 84px; border-radius: var(--kh-radius-lg); } }

/* Groups: a plain heading per group (tap to fold), no boxes or grey bars. */
.menu-accordion { display: grid; gap: 10px; }
.menu-group__head { display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; cursor: pointer; list-style: none; user-select: none; border-bottom: 1px solid var(--kh-stone); }
.menu-group__head::-webkit-details-marker { display: none; }
.menu-group__head:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; border-radius: var(--kh-radius); }
.menu-group__name { font-family: var(--kh-font-display); font-size: 1.15rem; font-weight: 700; }
.menu-group__count { margin-left: auto; font-size: 0.8rem; color: var(--kh-muted); }
.menu-group__chevron { flex: none; color: var(--kh-muted); transition: transform 0.2s ease; }
.menu-group[open] .menu-group__chevron { transform: rotate(180deg); }

/* ---------- Menu photo pop-up (assets/js/menu-modal.js) ---------- */
.menu-modal {
	width: min(560px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	padding: 0;
	overflow: hidden;
	color: var(--kh-ink);
	background: var(--kh-surface);
	border: 0;
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-dialog);
}

.menu-modal::backdrop { background: rgba(14, 22, 36, 0.72); backdrop-filter: blur(2px); }
.menu-modal[open] { animation: kh-modal-in 0.18s ease-out; }

@keyframes kh-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.menu-modal__panel { display: grid; max-height: calc(100vh - 32px); }
.menu-modal__media { position: relative; background: var(--kh-mist); touch-action: pan-y; }
.menu-modal__img { display: block; width: 100%; max-height: min(62vh, 520px); object-fit: cover; aspect-ratio: 1 / 1; }

/* Close and prev / next: white icons with a soft shadow over the photo (like the sheet grip),
   no round background. SVGs, so they sit dead centre (text glyphs like × and ‹ don't). */
.menu-modal__close,
.menu-modal__nav {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	background: none;
	border: 0;
	border-radius: 50%;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
	transition: transform 0.15s ease;
	cursor: pointer;
}
.menu-modal__close { top: 8px; right: 8px; }
.menu-modal__close:hover { transform: scale(1.12); }
.menu-modal__nav { top: 50%; transform: translateY(-50%); }
.menu-modal__close svg,
.menu-modal__nav svg { display: block; }
.menu-modal__nav--prev { left: 6px; }
.menu-modal__nav--next { right: 6px; }
.menu-modal__nav:hover { transform: translateY(-50%) scale(1.12); }
.menu-modal__close:focus-visible,
.menu-modal__nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.menu-modal__body { display: grid; gap: 6px; padding: 18px 22px 22px; }
.menu-modal__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu-modal__title { margin: 0; font-size: 1.3rem; }
/* "1 / 5": a dark pill on the photo, top left (same as the photo field's "Change"). */
.menu-modal__count { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; font-size: 0.8rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; background: rgba(19, 23, 30, 0.65); border-radius: 999px; pointer-events: none; }
.menu-modal__count[hidden] { display: none; }
/* Review photos: the whole photo on a dark stage (so the white × ‹ › show on any photo), not a square crop. */
.menu-modal.is-photos .menu-modal__media { background: #13171e; }
.menu-modal.is-photos .menu-modal__img { aspect-ratio: auto; height: min(62vh, 520px); object-fit: contain; }
.menu-modal.is-photos .menu-modal__price { letter-spacing: 1px; color: var(--kh-star); }
.menu-modal__price { margin: 0; font-weight: 600; color: var(--kh-midnight); font-variant-numeric: tabular-nums; }
.menu-modal__desc { margin: 0; color: var(--kh-muted); }
.menu-modal__open { margin: 4px 0 0; }
.menu-modal__open .button { display: inline-flex; align-items: center; gap: 6px; padding-inline: 0; }
.menu-modal__desc:empty,
.menu-modal__price:empty { display: none; }

@media (max-width: 560px) {
	.menu-modal { width: 100%; max-width: none; max-height: 100%; margin: auto 0 0; border-radius: var(--kh-radius-lg) var(--kh-radius-lg) 0 0; }
	.menu-modal__body { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.menu-modal[open] { animation: none; }
}

.listing__map { display: block; width: 100%; height: 340px; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.listing__map-link { margin: 10px 0 0; font-size: 0.9rem; }

.listing__aside { display: grid; gap: 16px; position: sticky; top: calc(var(--kh-sticky-top, var(--kh-header-h, 70px)) + 24px); }

@media (max-width: 900px) { .listing__aside { position: static; } }

.info-card {
	display: grid;
	gap: 16px;
	padding: 22px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
}

.info-card__title { margin: 0; font-size: 1rem; }
.info-card__row { display: grid; gap: 2px; overflow-wrap: anywhere; }
.info-card__address { display: grid; font-style: normal; }
.info-card__landmark { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 0.9rem; color: var(--kh-muted); }
.info-card__landmark svg { flex: none; margin-top: 3px; }
.info-card__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.info-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.info-card__actions .button { flex: 1; }

/* Delivery & pickup card (single-business.php) */
.delivery-card__headline { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--kh-font-display); font-size: 1.05rem; font-weight: 700; }
.delivery-card--delivers .delivery-card__headline svg { color: var(--kh-open); }
.delivery-card--pickup .delivery-card__headline svg { color: var(--kh-muted); }
.delivery-card__lines { display: grid; gap: 4px; margin: 0; padding: 0 0 0 32px; list-style: none; font-size: 0.92rem; color: var(--kh-muted); }
.delivery-card__you { margin: 0; padding: 10px 12px; font-size: 0.9rem; border-radius: var(--kh-radius); }
.delivery-card__you--in { color: var(--kh-open); background: var(--kh-open-soft); }
.delivery-card__you--out { color: var(--kh-warning); background: var(--kh-warning-soft); }

.hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 7px 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--kh-stone); }
.hours td { text-align: right; color: var(--kh-muted); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .is-today th, .hours .is-today td { font-weight: 600; color: var(--kh-ink); }
.hours-today { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hours-today__time { text-align: right; white-space: nowrap; }
.hours-week { margin-top: 8px; }
.hours-week__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; font-weight: 600; color: var(--kh-midnight); list-style: none; cursor: pointer; }
.hours-week__toggle::-webkit-details-marker { display: none; }
.hours-week__toggle:hover { text-decoration: underline; }
.hours-week__toggle svg { transition: transform 0.2s; }
.hours-week[open] .hours-week__toggle svg { transform: rotate(180deg); }
.hours-week__hide, .hours-week[open] .hours-week__show { display: none; }
.hours-week[open] .hours-week__hide { display: inline; }
.hours-week .hours { margin-top: 6px; }

/* ---------- Pages & posts ---------- */
/* page.php article (container page). Not body.page: WordPress puts "page" on <body> of every page too. */
.container.page { padding-block: clamp(32px, 5vw, 56px); }
.container.page .entry-content { max-width: none; }
.container.page .entry-content > * { max-width: 760px; }
.container.page .entry-content > .alignwide { max-width: var(--kh-max); }
.container.page .entry-content > .alignfull { max-width: none; }

.post-list { display: grid; gap: 28px; }
.post-item__title { margin: 0; font-size: 1.3rem; }
.post-item__date { margin: 0; color: var(--kh-muted); font-size: 0.9rem; }

/* Pagination */
.pagination { margin-top: 36px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	font-weight: 500;
	color: var(--kh-ink);
	text-decoration: none;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
}
.pagination .page-numbers:hover { background: var(--kh-mist); }
.pagination .page-numbers.current { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; background: var(--kh-mist); border-top: 1px solid var(--kh-stone); }
/* Wide screens: one row, three columns (logo and tagline · the links · "Buy me a beer" and ©).
   Phones: everything on the left, one under the other, the links in a column too. */
.site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-block: 40px; }
.site-footer__inner > .site-footer__end { justify-self: end; }
.site-footer__name { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--kh-font-display); font-size: 1.15rem; font-weight: 700; color: var(--kh-ink); text-decoration: none; }
.site-footer__mark { display: block; flex: none; width: 28px; height: 28px; }
.site-footer__tag, .site-footer__copy { margin: 0; font-size: 0.9rem; color: var(--kh-muted); }
.site-footer__menu { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--kh-ink); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { text-decoration: underline; }

/* ---------- Buttons: sizes & variants ---------- */
.button--sm { padding: 7px 14px; font-size: 0.9rem; }
.button--block { width: 100%; }
.button--secondary { color: var(--kh-on-secondary); background: var(--kh-secondary); border-color: var(--kh-secondary); }
.button--secondary:hover { color: var(--kh-on-secondary); background: var(--kh-secondary-deep); border-color: var(--kh-secondary-deep); }
.button--danger { color: var(--kh-on-danger); background: var(--kh-danger); border-color: var(--kh-danger); }
.button--danger:hover { color: var(--kh-on-danger); background: var(--kh-danger-deep); border-color: var(--kh-danger-deep); }
/* Tertiary: a text button for low-stakes actions next to a primary one ("Skip", "Remove", "See all"). */
.button--lg { padding: 13px 22px; font-size: 1rem; }
/* Danger outline: destructive action that isn't the main one (Delete account, Remove business). */
.button--danger-ghost,
.settings__danger-btn,
.button.manage-danger { color: var(--kh-danger); background: var(--kh-surface); border-color: var(--kh-danger-line); }
.button--danger-ghost:hover,
.settings__danger-btn:hover,
.button.manage-danger:hover { color: var(--kh-on-danger); background: var(--kh-danger); border-color: var(--kh-danger); }
/* .button-link is the tertiary button without .button (text actions inside forms and rows). */
.button-link { padding: 0; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--kh-midnight); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; }
.button-link:hover { text-decoration-color: currentColor; }
.button-link:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; border-radius: 2px; }
.info-card__report { justify-self: start; font-size: 0.8rem; font-weight: 500; color: var(--kh-muted); } /* "Number not working?" under the phone. */
.info-card__report:hover { color: var(--kh-ink); }
.button--tertiary { padding-inline: 4px; color: var(--kh-midnight); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; background: none; border-color: transparent; }
.button--tertiary:hover { color: var(--kh-midnight); text-decoration-color: currentColor; background: none; border-color: transparent; }
/* Every button: pressed, keyboard focus, and not available (style guide: /style-guide/). */
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.button:disabled,
.button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }

/* ---------- Notices ---------- */
.notice {
	margin-bottom: 20px;
	padding: 14px 16px;
	font-size: 0.95rem;
	border: 1px solid var(--kh-stone);
	border-left-width: 3px;
	border-radius: var(--kh-radius);
	background: var(--kh-surface);
}
/* Success, warning, error: a white card with the type's icon on a soft tile. */
.notice--success { --kh-notice: var(--kh-open); --kh-notice-soft: var(--kh-open-soft); }
.notice--warning { --kh-notice: var(--kh-warning); --kh-notice-soft: var(--kh-warning-soft); }
.notice--error { --kh-notice: var(--kh-danger); --kh-notice-soft: var(--kh-danger-soft); }
.notice--success,
.notice--warning,
.notice--error { position: relative; min-height: 52px; padding-left: 58px; border-left-width: 1px; border-radius: var(--kh-radius-lg); }
:is(.notice--success, .notice--warning, .notice--error)::before { content: ""; position: absolute; top: 9px; left: 12px; width: 32px; height: 32px; background: var(--kh-notice-soft); border-radius: var(--kh-radius); }
:is(.notice--success, .notice--warning, .notice--error)::after { content: ""; position: absolute; top: 16px; left: 19px; width: 18px; height: 18px; background: var(--kh-notice); -webkit-mask: var(--kh-notice-icon) center / contain no-repeat; mask: var(--kh-notice-icon) center / contain no-repeat; }
.notice--success { --kh-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E"); }
.notice--warning { --kh-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4.5M12 17h.01'/%3E%3C/svg%3E"); }
.notice--error { --kh-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.notice--action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.notice--action > div { flex: 1 1 320px; }
.notice__dev { font-size: 0.9rem; color: var(--kh-muted); }

/* After a redirect (kh_float_notice()): floats under the header, slides down
   from the top, hides itself after a few seconds (navigation.js). */
.notice--float {
	position: fixed;
	top: calc(var(--kh-sticky-top, var(--kh-header-h, 68px)) + 12px);
	left: 50%;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: min(480px, calc(100vw - 32px));
	margin: 0;
	padding: 12px 8px 12px 16px;
	line-height: 1.45;
	box-shadow: var(--kh-shadow-float);
	opacity: 0;
	transform: translate(-50%, -16px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.notice--float.is-on { opacity: 1; transform: translate(-50%, 0); }
.notice__text { flex: 1; min-width: 0; padding-top: 3px; }
.notice__close { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--kh-muted); cursor: pointer; background: none; border: 0; border-radius: 50%; }
.notice__close:hover { color: var(--kh-ink); background: var(--kh-mist); }
.notice__close:active { background: var(--kh-stone); }
.notice__close:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 1px; }
/* The floating one's timer line: shrinks along the bottom until it hides; pauses
   while held (navigation.js sets --kh-notice-wait and .is-held). */
@property --kh-notice-left { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.notice--float:is(.notice--success, .notice--warning, .notice--error) {
	padding: 12px 8px 12px 58px;
	background: linear-gradient(var(--kh-notice), var(--kh-notice)) left bottom / var(--kh-notice-left) 3px no-repeat, var(--kh-surface);
}
.notice--float:is(.notice--success, .notice--warning, .notice--error)::before { top: 10px; }
.notice--float:is(.notice--success, .notice--warning, .notice--error)::after { top: 17px; }
.notice--float.is-on,
.notice--float.is-held { animation: kh-notice-timer var(--kh-notice-wait, 5s) linear forwards; }
.notice--float.is-held { animation-play-state: paused; }
@keyframes kh-notice-timer { to { --kh-notice-left: 0%; } }
@media (prefers-reduced-motion: reduce) {
	.notice--float { transition: none; }
	.notice--float.is-on { animation: none; }
	.notice--float:is(.notice--success, .notice--warning, .notice--error) { background: var(--kh-surface); }
}

/* ---------- Forms ---------- */
.kh-form { display: grid; gap: 18px; }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label,
.field legend { font-size: 0.9rem; font-weight: 600; padding: 0; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__link { font-size: 0.85rem; }
.field__help { font-size: 0.85rem; color: var(--kh-muted); }
.field__optional { margin-left: 4px; font-size: 0.8rem; font-weight: 400; color: var(--kh-muted); }
.field__recommended { margin-left: 4px; padding: 1px 8px; font-size: 0.72rem; font-weight: 600; color: var(--kh-open); background: color-mix(in srgb, var(--kh-open) 10%, transparent); border-radius: 999px; vertical-align: 1px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.auth .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* Join: first + last name side by side, phones too. */
.join__name-help { margin-top: -8px; }

/* Every form field looks the same: text boxes, numbers, dropdowns, notes.
   Dropdowns get the styled panel from assets/js/dropdown.js (.kh-select);
   the native <select> keeps the same box and chevron if JavaScript is off. */
.kh-form input[type="text"],
.kh-form input[type="email"],
.kh-form input[type="password"],
.kh-form input[type="tel"],
.kh-form input[type="url"],
.kh-form input[type="number"],
.kh-form input[type="search"],
.kh-form input[type="date"],
.kh-form input[type="time"],
.kh-form select,
.kh-form textarea,
.kh-select__button {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--kh-ink);
	background-color: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kh-form input::placeholder,
.kh-form textarea::placeholder { color: color-mix(in srgb, var(--kh-muted) 65%, var(--kh-surface)); }
.kh-form input:hover,
.kh-form select:hover,
.kh-form textarea:hover,
.kh-select__button:hover { border-color: color-mix(in srgb, var(--kh-ink) 18%, var(--kh-stone)); }
/* Not available: dimmed, mist background, no hover (style guide: Form fields). */
.kh-form input:disabled,
.kh-form select:disabled,
.kh-form textarea:disabled { color: var(--kh-muted); background-color: var(--kh-mist); border-color: var(--kh-stone); cursor: not-allowed; opacity: 0.7; }

.kh-form input:focus,
.kh-form select:focus,
.kh-form textarea:focus,
.kh-select__button:focus-visible { outline: none; border-color: var(--kh-midnight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-midnight) 12%, transparent); }

/* The same chevron as the filter bar, on native selects and styled dropdowns. */
.kh-form select,
.kh-select__button {
	appearance: none;
	padding-right: 38px;
	background-image: var(--kh-icon-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}
.kh-select { position: relative; }
.kh-select.is-custom > select { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.kh-select__button { display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-select__button.is-placeholder { color: color-mix(in srgb, var(--kh-muted) 65%, var(--kh-surface)); }
.kh-select__button.is-invalid { border-color: var(--kh-danger); }
.kh-select.is-open .kh-select__button {
	border-color: var(--kh-midnight);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-midnight) 12%, transparent);
	background-image: var(--kh-icon-chevron-up);
}
/* At least as wide as the field, wider when an option needs it (short fields, like "Pick a category"). */
.kh-select .filter-dd__panel { width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 32px)); overflow-x: hidden; }

/* City picker (assets/js/place-picker.js): suggestions in the same panel. */
.place-picker { position: relative; }
.place-picker__list { width: 100%; }
.place-picker__list .filter-dd__option small { font-size: 0.8rem; font-weight: 400; color: var(--kh-muted); }
.place-picker__empty { padding: 8px 10px; font-size: 0.85rem; color: var(--kh-muted); }
.kh-form textarea { resize: vertical; line-height: 1.5; }
.kh-form input[type="file"] { font: inherit; font-size: 0.9rem; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--kh-midnight); }
.check--inline { align-items: center; font-size: 0.9rem; }
.check--inline input { margin-top: 0; }

.field--trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Category chips */
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
	display: inline-block;
	padding: 6px 12px;
	font-size: 0.9rem;
	font-weight: 500;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
	cursor: pointer;
}
.chip-check input:checked + span { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.chip-check input:focus-visible + span { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.chip-check input:disabled + span { opacity: 0.4; cursor: not-allowed; }
/* Long category list: about 5 rows, then it scrolls; the fade at the bottom says there is more (business-editor.js). */
.chip-scroll .chip-checks { max-height: 218px; padding: 2px 2px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
.chip-scroll.is-end .chip-checks,
.chip-scroll.is-short .chip-checks { padding-bottom: 2px; -webkit-mask-image: none; mask-image: none; }
.category-suggest { margin-top: 14px; }
/* "Did you mean": existing categories that fit what the owner typed (business-editor.js). */
.category-match { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.category-match[hidden] { display: none; }
.category-match__label { font-size: 0.85rem; font-weight: 600; color: var(--kh-ink); }
.category-match__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.category-match__full { flex-basis: 100%; color: var(--kh-danger); }

/* ---------- Join / login ---------- */
.auth { display: grid; place-items: center; padding-block: clamp(32px, 7vw, 80px); }
.auth__card { width: 100%; max-width: 440px; padding: clamp(24px, 5vw, 36px); background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.auth__title { margin: 0 0 6px; font-size: 1.75rem; }
.auth__sub { margin: 0 0 22px; color: var(--kh-muted); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 24px; padding: 4px; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.auth__tab { padding: 8px 10px; font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--kh-muted); text-decoration: none; border-radius: var(--kh-radius); }
.auth__tab:hover { color: var(--kh-ink); }
.auth__tab.is-active { color: var(--kh-ink); background: var(--kh-surface); box-shadow: var(--kh-shadow-sm); }
.auth__switch { margin: 20px 0 0; font-size: 0.92rem; text-align: center; color: var(--kh-muted); }
/* Log in and Join: one card in two panels, the pitch over the kanto at night (template-parts/auth-art.php) and the form.
   The panel keeps its midnight colours in dark mode too. */
.auth--split { padding-block: clamp(16px, 3vw, 28px); }
/* Log in / Join: the box sits in the middle of the space between the header and the footer. */
.site-main:has(> .auth) { display: flex; flex-direction: column; }
.site-main > .auth { flex: 1 0 auto; align-content: center; }
.auth__frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); width: 100%; max-width: 1020px; overflow: hidden; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow-float); }
.auth--split .auth__card { max-width: none; align-self: center; padding: clamp(22px, 3vw, 30px) clamp(20px, 4vw, 44px); border: 0; border-radius: 0; }
.auth__art { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 32px 32px 0; color: #fdfdfd; background: linear-gradient(180deg, #182a45 0%, #13223a 60%, #0e1a2d 100%); }
.auth__brand { align-self: flex-start; }
.auth__brand img { display: block; width: auto; height: 30px; }
.auth__art .eyebrow { color: #f5c96b; }
.auth__art .auth__title { font-size: clamp(1.6rem, 2.3vw, 2.05rem); line-height: 1.15; color: #fdfdfd; }
.auth__art .auth__sub { color: rgba(253, 253, 253, 0.72); }
.auth__art .auth__perks { margin: 0; background: rgba(253, 253, 253, 0.06); border-color: rgba(253, 253, 253, 0.12); }
.auth__art .auth__perks li { color: rgba(253, 253, 253, 0.7); }
.auth__art .auth__perks strong { color: #fdfdfd; }
.auth__art .auth__perk-icon { background: rgba(253, 253, 253, 0.1); border-color: rgba(253, 253, 253, 0.16); }
.auth__scene { display: block; flex: none; width: calc(100% + 64px); height: 210px; margin: auto -32px 0; }
.auth__form-title { margin: 0 0 2px; font-family: var(--kh-font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--kh-ink); }
.auth__lead { margin: 0 0 16px; font-size: 0.92rem; color: var(--kh-muted); }
.auth--split .auth__tabs { margin-bottom: 16px; }
.auth--split .kh-form { gap: 12px; }
.auth--split .field { gap: 4px; }
.auth--split .field__help { font-size: 0.8rem; }
@media (max-width: 860px) {
	/* Stacked: a short banner (title and the street) above the form; the perks and logo make way. */
	.auth__frame { grid-template-columns: 1fr; }
	.auth__art { gap: 12px; padding: 22px 20px 0; }
	.auth__brand,
	.auth__art .auth__perks { display: none; }
	.auth__art .auth__sub { margin-bottom: 0; }
	.auth__scene { width: calc(100% + 40px); height: 120px; margin: 0 -20px; }
}

/* ---------- Owner dashboard ---------- */
.owner-list { display: grid; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }
.owner-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
}
.owner-item__media { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; font-weight: 600; color: var(--kh-midnight); background: var(--kh-mist); border-radius: var(--kh-radius); }
.owner-item__media img { width: 100%; height: 100%; object-fit: cover; }
.owner-item__title { margin: 0; font-size: 1.05rem; }
.owner-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 0; font-size: 0.9rem; color: var(--kh-muted); }
.owner-item__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.owner-item__excerpt { margin: 4px 0 0; font-size: 0.9rem; color: var(--kh-muted); }

@media (max-width: 640px) {
	.owner-item { grid-template-columns: 48px minmax(0, 1fr); }
	.owner-item__actions { grid-column: 1 / -1; }
}

.state { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.state::before { width: 6px; height: 6px; background: currentColor; border-radius: 50%; content: ""; }
.state--live { color: var(--kh-open); }
.state--waiting { color: var(--kh-warning); }
.state--hidden { color: var(--kh-danger); }

/* Inline "are you sure" */
.confirm { position: relative; }
.confirm > summary { list-style: none; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 5;
	width: 240px;
	padding: 14px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
	box-shadow: var(--kh-shadow-menu);
}
.confirm__panel p { margin: 0 24px 12px 0; font-size: 0.9rem; }
.confirm__close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 1.15rem; line-height: 1; color: var(--kh-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.confirm__close:hover { color: var(--kh-ink); background: var(--kh-mist); }
.confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Listing editor ---------- */
.editor { gap: 0; }
.editor__section {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 32px;
	padding-block: 32px;
	border-top: 1px solid var(--kh-stone);
}
.editor__section:first-of-type { border-top: 0; padding-top: 0; }
.editor__intro h2 { margin: 0 0 6px; font-size: 1.15rem; }
.editor__intro p { margin: 0; font-size: 0.92rem; color: var(--kh-muted); }
.editor__fields { display: grid; gap: 18px; min-width: 0; }

@media (max-width: 860px) {
	.editor__section { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Editor tabs (business-editor.js > initTabs). Sticks under the header while scrolling. */
.editor-tabs {
	position: sticky;
	top: var(--kh-sticky-top, var(--kh-header-h, 70px));
	z-index: 11;
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
	padding-top: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--kh-paper);
	border-bottom: 1px solid var(--kh-stone);
}
.editor-tabs::-webkit-scrollbar { display: none; }
.editor-tabs__tab {
	flex: none;
	margin-bottom: -1px;
	padding: 12px 16px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--kh-muted);
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
}
.editor-tabs__tab:hover { color: var(--kh-ink); }
.editor-tabs__tab[aria-selected="true"] { color: var(--kh-midnight); border-bottom-color: var(--kh-midnight); }
.editor-tabs__tab:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: -2px; border-radius: var(--kh-radius) var(--kh-radius) 0 0; }
.editor.has-tabs .editor__section { padding-top: 28px; border-top: 0; }
.editor.has-tabs .editor__section[hidden] { display: none; }
@media (max-width: 860px) { .editor-tabs { top: 0; } .admin-bar .editor-tabs { top: 0; } }

.field-more > summary { font-size: 0.92rem; font-weight: 600; color: var(--kh-midnight); cursor: pointer; }
.field-more[open] > summary { margin-bottom: 10px; }

.hours-editor { width: 100%; border-collapse: collapse; }
.hours-editor th { padding: 6px 12px 6px 0; font-size: 0.92rem; font-weight: 500; text-align: left; white-space: nowrap; }
.hours-editor td { padding: 4px 4px; }
.hours-editor__to { color: var(--kh-muted); text-align: center; }
.hours-editor input[type="time"] { min-width: 0; padding: 7px 8px; }

@media (max-width: 520px) {
	.hours-editor tr { display: grid; grid-template-columns: 1fr 1fr auto 1fr; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--kh-stone); }
	.hours-editor th { grid-column: 1 / -1; }
	.hours-editor td:first-of-type { grid-column: 1 / 3; }
	.hours-editor td:last-child { grid-column: 1 / -1; }
}

.photo-current { display: grid; gap: 10px; max-width: 360px; }
.photo-current img { border-radius: var(--kh-radius); border: 1px solid var(--kh-stone); }

.editor__bar {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
	padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
	background: var(--kh-paper);
	border-top: 1px solid var(--kh-stone);
}
/* New listing / owner's draft: Cancel on the left, Save draft and Publish on the right. */
.editor__bar--draft .editor__cancel { margin-right: auto; }
@media (max-width: 420px) {
	.editor__bar--draft { gap: 8px; }
	.editor__bar--draft .button { padding-inline: 14px; }
}
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 0.9rem; color: var(--kh-muted); }

/* Tag picker (assets/js/business-editor.js) */
.tag-picker { display: grid; gap: 8px; }
.tag-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 10px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--kh-on-primary);
	background: var(--kh-midnight);
	border-radius: var(--kh-radius);
}
.tag-chip--pending { color: var(--kh-ink); background: var(--kh-mist); border: 1px dashed var(--kh-closed); }
.tag-chip__state { font-size: 0.72rem; font-weight: 500; color: var(--kh-muted); }
.tag-chip__x { width: 22px; height: 22px; padding: 0; font-size: 1rem; line-height: 1; color: inherit; background: transparent; border: 0; border-radius: var(--kh-radius); cursor: pointer; opacity: 0.75; }
.tag-chip__x:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.tag-chip--pending .tag-chip__x:hover { background: var(--kh-stone); }

.tag-picker__box { position: relative; }
.tag-picker__icon { position: absolute; left: 12px; top: 50%; color: var(--kh-muted); transform: translateY(-50%); pointer-events: none; }
/* Needs the [type] to outrank `.kh-form input[type="text"]`, or the text slides under the icon. */
.kh-form input[type="text"].tag-picker__input { padding-left: 36px; }
.kh-form .tag-picker__input:disabled { background: var(--kh-mist); cursor: not-allowed; }

.tag-picker__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
	box-shadow: var(--kh-shadow-menu);
}
.tag-picker__option { padding: 9px 10px; font-size: 0.95rem; border-radius: var(--kh-radius); cursor: pointer; }
.tag-picker__option:hover,
.tag-picker__option.is-active { background: var(--kh-mist); }
.tag-picker__option--suggest { color: var(--kh-midnight); font-weight: 600; border-top: 1px solid var(--kh-stone); }
.tag-picker__hint { font-weight: 400; color: var(--kh-muted); }
.tag-picker__empty { padding: 9px 10px; font-size: 0.9rem; color: var(--kh-muted); }
.tag-picker__head { position: sticky; top: -4px; z-index: 1; margin: -4px -4px 4px; padding: 8px 14px; font-size: 0.8rem; color: var(--kh-muted); background: var(--kh-surface); border-bottom: 1px solid var(--kh-stone); }

/* ---------- Filter bar (template-parts/filters.php, assets/js/filters.js) ---------- */
.filters { display: grid; gap: 12px; margin-top: 8px; }
.filters__toggle { display: none; justify-self: start; }
.filters__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; color: var(--kh-on-primary); background: var(--kh-midnight); border-radius: 999px; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.filter-chip { position: relative; display: inline-flex; cursor: pointer; }
.filter-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-chip > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 0.9rem; font-weight: 500; white-space: nowrap; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 999px; transition: background-color 0.15s ease, border-color 0.15s ease; }
.filter-chip:hover > span { border-color: var(--kh-midnight); }
.filter-chip input:checked + span { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.filter-chip input:focus-visible + span { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.filter-chip__dot { width: 7px; height: 7px; background: var(--kh-open); border-radius: 50%; }
.filter-chip input:checked + span .filter-chip__dot { background: #8ee6b0; }

.filter-select { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.filter-select select,
summary.filter-select {
	appearance: none;
	padding: 7px 32px 7px 12px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--kh-ink);
	background: var(--kh-surface) var(--kh-icon-chevron) no-repeat right 10px center / 14px;
	border: 1px solid var(--kh-stone);
	border-radius: 999px;
	cursor: pointer;
}
.filter-select select:hover,
summary.filter-select:hover { border-color: var(--kh-midnight); }
.filter-select select:focus-visible,
summary.filter-select:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.filter-select--sort { margin-left: auto; }
.filter-select__label { font-size: 0.85rem; color: var(--kh-muted); }

/* Styled dropdowns (assets/js/filters.js > dropdown()). The native select stays
   in the form, hidden; without JavaScript it shows as before. */
.filter-select.is-custom > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filter-dd__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 32px 7px 12px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--kh-ink);
	white-space: nowrap;
	cursor: pointer;
	background: var(--kh-surface) var(--kh-icon-chevron) no-repeat right 10px center / 14px;
	border: 1px solid var(--kh-stone);
	border-radius: 999px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.filter-dd__button:hover { border-color: var(--kh-midnight); }
.filter-dd__button:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.filter-select.is-open .filter-dd__button { border-color: var(--kh-midnight); background-image: var(--kh-icon-chevron-up); }
/* A filter is chosen (not "any"): same look as a ticked chip's outline. */
.filter-select.is-set .filter-dd__button,
summary.filter-select.is-set { font-weight: 600; color: var(--kh-midnight); background-color: var(--kh-secondary); border-color: var(--kh-midnight); }

.filter-dd__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 100%;
	max-height: min(320px, 60vh);
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-menu);
	outline: none;
}
.filter-dd__panel[hidden] { display: none; }
.filter-select--sort .filter-dd__panel { left: auto; right: 0; }
.filter-dd__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 10px;
	font-size: 0.9rem;
	white-space: nowrap;
	cursor: pointer;
	border-radius: var(--kh-radius);
}
.filter-dd__option.is-active { background: var(--kh-mist); }
.filter-dd__option[aria-selected="true"] { font-weight: 600; color: var(--kh-midnight); }
.filter-dd__option[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--kh-icon-check) no-repeat center / contain;
}

.filter-tags { position: relative; }
.filter-tags > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.filter-tags > summary::-webkit-details-marker { display: none; }
.filter-tags__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: min(420px, calc(100vw - 32px));
	padding: 12px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-menu);
}
.filter-tags__panel .filter-chip > span { padding: 5px 10px; font-size: 0.85rem; }

.filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 0.85rem; color: var(--kh-midnight); text-decoration: none; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: 999px; }
.active-chip:hover { border-color: var(--kh-midnight); }
.filters__clear { margin-left: 4px; font-size: 0.85rem; color: var(--kh-muted); }
.filters.is-loading { opacity: 0.6; pointer-events: none; }

/* The sheet's head, foot and backdrop are for phones (below). Without
   JavaScript the foot's "Show results" applies the bar. */
.filters__sheet-head,
.filters__scrim { display: none; }
.filters__sheet-foot { display: flex; gap: 8px; }
.filters.is-enhanced .filters__sheet-foot { display: none; }
.results-bar .filters__toggle { display: none; }

/* Phones: "Filters" (beside "Show map", filters.js moves it) opens a bottom
   sheet like the other pop-ups: title and ×, the fields in one column (the
   two chips side by side), then "Clear all" and "Show results". */
@media (max-width: 760px) {
	.filters.is-enhanced .filters__toggle,
	.results-bar .filters__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
	.results-bar.has-filters { flex-wrap: wrap; gap: 10px; }
	.results-bar.has-filters > .filters__toggle,
	.results-bar.has-filters > .map-toggle { flex: 1 1 0; min-width: 0; justify-content: center; padding-block: 10px; }
	.results-bar.has-filters > .results-count { order: 3; flex-basis: 100%; }

	.filters.is-enhanced .filters__body { display: none; }
	.filters.is-enhanced.is-open .filters__body {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		max-height: 88vh;
		background: var(--kh-surface);
		border-radius: var(--kh-radius-xl) var(--kh-radius-xl) 0 0;
		box-shadow: var(--kh-shadow-dialog);
		animation: kh-sheet-in 0.22s ease-out;
	}
	.filters.is-open .filters__scrim:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: block; background: rgba(14, 22, 36, 0.72); } /* Same as .kh-dialog::backdrop. */
	.filters.is-open .filters__sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 4px 20px; }
	.filters__sheet-title { margin: 0; font-family: var(--kh-font-display); font-size: 1.15rem; font-weight: 700; }
	.filters.is-open .filters__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 20px 18px; overflow-y: auto; overscroll-behavior: contain; }
	.filters.is-open .filters__row > * { grid-column: 1 / -1; }
	.filters.is-open .filters__row > .filter-chip { grid-column: auto; }
	.filters.is-open .filters__row > .filter-chip,
	.filters.is-open .filter-select { display: flex; width: 100%; }
	.filters.is-open .filters__row > .filter-chip > span { width: 100%; justify-content: center; padding-block: 10px; }
	.filters.is-open .filter-dd__button,
	.filters.is-open .filter-select select { flex: 1; width: 100%; min-width: 0; padding-block: 10px; }
	.filters.is-open .filter-select--sort { margin-left: 0; }
	.filters.is-open .filter-dd__panel { right: 0; max-width: none; }
	/* Tags: a heading with every tag listed under it. */
	.filters.is-open .filter-tags > summary { padding: 6px 0 0; font-weight: 600; cursor: default; background: none; border: 0; }
	.filters.is-open .filter-tags__panel { position: static; width: auto; margin-top: 8px; padding: 0; border: 0; box-shadow: none; }
	.filters.is-open .filters__sheet-foot { display: flex; gap: 10px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--kh-stone); }
	.filters.is-open .filters__sheet-foot > * { flex: 1 1 0; justify-content: center; }
	html.is-sheet-open { overflow: hidden; }
	/* Grab bar: drag the bar or the title row down to close (assets/js/sheet.js), like the pop-ups. */
	.filters.is-enhanced .filters__body { transition: transform 0.18s ease-out; }
	.filters.is-enhanced .filters__body.is-dragging { transition: none; }
	.filters.is-open .filters__body > .kh-sheet-grip { position: relative; display: block; flex: none; height: 22px; margin-bottom: -14px; touch-action: none; cursor: grab; }
	.filters.is-open .filters__body > .kh-sheet-grip::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; background: var(--kh-muted); border-radius: 999px; opacity: 0.4; transform: translateX(-50%); }
	.filters.is-open .filters__sheet-head { touch-action: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
	.filters.is-enhanced.is-open .filters__body { animation: none; }
}

/* ---------- Infinite scroll (assets/js/infinite-scroll.js) ---------- */
.results-count { margin: 0 0 18px; font-size: 0.9rem; color: var(--kh-muted); font-variant-numeric: tabular-nums; }
.infinite-sentinel { height: 1px; }

.infinite-status,
.infinite-more,
.infinite-end { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 32px; }
.infinite-status { font-size: 0.92rem; color: var(--kh-muted); }
.infinite-end { margin-bottom: 0; font-size: 0.92rem; color: var(--kh-muted); }

.infinite-status__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--kh-stone);
	border-top-color: var(--kh-midnight);
	border-radius: 50%;
	animation: kh-spin 0.8s linear infinite;
}

@keyframes kh-spin { to { transform: rotate(360deg); } }

/* ---------- Stars & reviews (inc/reviews.php, template-parts/reviews.php) ---------- */
.stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: -1px; }
.stars--sm { font-size: 0.85rem; }
.stars--md { font-size: 1.05rem; }
.stars--lg { font-size: 1.3rem; }
.stars__base { color: var(--kh-stone); }
.stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--kh-star); }

.rating-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--kh-muted); text-decoration: none; }
.rating-inline__avg { font-weight: 600; color: var(--kh-ink); }
a.rating-inline:hover .rating-inline__count { text-decoration: underline; }
.listing-cover .rating-inline,
.listing-cover .rating-inline__avg { color: #fff; }
.listing-cover .rating-inline__count { color: rgba(255, 255, 255, 0.8); }
.listing-cover .stars__base { color: rgba(255, 255, 255, 0.35); }

.reviews { display: grid; gap: 20px; }
.reviews > h2 { margin-bottom: 0; }

.reviews-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.reviews-summary__score { display: grid; justify-items: center; gap: 4px; }
.reviews-summary__avg { font-family: var(--kh-font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.reviews-summary__count { font-size: 0.85rem; color: var(--kh-muted); }
.reviews-summary__bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.reviews-summary__bars li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.reviews-summary__label { color: var(--kh-muted); }
.reviews-summary__bar { height: 8px; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 999px; overflow: hidden; }
.reviews-summary__bar span { display: block; height: 100%; background: var(--kh-star); border-radius: 999px; }
.reviews-summary__n { text-align: right; color: var(--kh-muted); }

@media (max-width: 520px) { .reviews-summary { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.review-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border: 1px dashed var(--kh-stone); border-radius: var(--kh-radius-lg); }
.review-cta p { margin: 0; }
.review-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.review-note { margin: 0; font-size: 0.92rem; color: var(--kh-muted); }
.review-note--pending { padding: 10px 14px; color: var(--kh-warning); background: var(--kh-warning-soft); border-radius: var(--kh-radius); }

.review-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Star picker: radios in reverse order so ~ can light up the lower stars. */
.star-input { margin: 0; padding: 0; border: 0; }
.star-input__legend { margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; }
.star-input__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 2rem; line-height: 1; color: var(--kh-stone); cursor: pointer; transition: color 0.1s ease, transform 0.1s ease; }
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--kh-star); }
.star-input label:hover { transform: scale(1.1); }
.star-input input:focus-visible + label { outline: 2px solid var(--kh-midnight); outline-offset: 2px; border-radius: var(--kh-radius); }

.review-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kh-stone); }
.review { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--kh-stone); }
.review__head { display: flex; align-items: center; gap: 12px; }
.review__avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; font-size: 0.85rem; font-weight: 600; color: var(--kh-midnight); background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: 50%; }
.review__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.review__name { font-weight: 600; }
.review__you { font-weight: 400; color: var(--kh-muted); }
.review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8rem; color: var(--kh-muted); }
.review__edited { font-style: italic; }
.review__text p { margin: 0 0 8px; }
.review__text p:last-child { margin-bottom: 0; }
.review__reply { margin-left: 52px; padding: 12px 14px; font-size: 0.95rem; background: var(--kh-mist); border-left: 3px solid var(--kh-midnight); border-radius: 0 var(--kh-radius) var(--kh-radius) 0; }
.review__reply p { margin: 4px 0 0; }
.review__reply-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-midnight); }
.review__reply-form { margin-left: 52px; }
.review__reply-form .kh-form { gap: 10px; margin-top: 10px; }
.link-quiet { font-size: 0.85rem; color: var(--kh-muted); cursor: pointer; list-style: none; }
.link-quiet::-webkit-details-marker { display: none; }
.link-quiet:hover { color: var(--kh-ink); text-decoration: underline; }

@media (max-width: 520px) { .review__reply, .review__reply-form { margin-left: 0; } }

/* ---------- Report this listing ---------- */
/* Pop-up dialog (report form). No padding on the dialog itself, so a click
   whose target is the <dialog> is a click on the backdrop (closes it). */
.kh-dialog {
	width: min(480px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	padding: 0;
	color: var(--kh-ink);
	background: var(--kh-surface);
	border: 0;
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-dialog);
}
.kh-dialog::backdrop { background: rgba(14, 22, 36, 0.72); backdrop-filter: blur(2px); }
.kh-dialog[open] { animation: kh-modal-in 0.18s ease-out; }
.kh-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.kh-dialog__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.15rem; }
.kh-dialog__close { flex: none; width: 36px; height: 36px; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--kh-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.kh-dialog__close:hover { color: var(--kh-ink); background: var(--kh-mist); }
.kh-dialog__intro { margin: 6px 0 0; padding: 0 22px; font-size: 0.92rem; color: var(--kh-muted); }
.kh-dialog .kh-form { gap: 14px; padding: 18px 22px 22px; }
.kh-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
/* "Are you sure?" before deleting (navigation.js): question, what happens, Cancel + red button. */
.kh-confirm { width: min(420px, calc(100% - 32px)); }
.kh-confirm .kh-dialog__actions { padding: 20px 22px 22px; }
.report .kh-dialog__title svg { color: var(--kh-danger); }
.report .check { font-size: 0.92rem; }

/* ---------- "Go Pro" pop-up (template-parts/dashboard/pro-dialog.php) ---------- */
/* Drawn like the KantoHub Facebook posts: navy art with a dot grid, light-blue
   eyebrow and accent, white plan cards. The art stays navy in dark mode
   (style guide > Exceptions > Illustrations); the cards follow the theme. */
.pro-dialog { width: min(760px, calc(100% - 32px)); background: #0e1a2d; }
.pro-dialog__art {
	padding: 22px 28px 20px;
	color: #fdfdfd;
	background:
		radial-gradient(rgba(253, 253, 253, 0.07) 1px, transparent 1.4px) 0 0 / 18px 18px,
		radial-gradient(circle at 85% 0%, rgba(157, 188, 245, 0.16), transparent 55%),
		linear-gradient(180deg, #182a45 0%, #13223a 60%, #0e1a2d 100%);
}
.pro-dialog__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pro-dialog__logo { display: block; width: auto; height: 28px; }
.pro-dialog__close { color: rgba(253, 253, 253, 0.72); }
.pro-dialog__close:hover { color: #fdfdfd; background: rgba(253, 253, 253, 0.1); }
.pro-dialog__close:focus-visible { outline: 2px solid #9dbcf5; outline-offset: 2px; }
.pro-dialog__eyebrow { margin: 22px 0 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9dbcf5; }
.pro-dialog__title { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.05rem); font-weight: 800; line-height: 1.15; color: #fdfdfd; }
.pro-dialog__title span { display: block; color: #9dbcf5; }
.pro-dialog__sub { max-width: 46ch; margin: 10px 0 0; font-size: 0.95rem; color: rgba(253, 253, 253, 0.72); }
.pro-dialog__plans { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; margin-top: 24px; }
.pro-dialog__foot { margin: 16px 0 0; font-size: 0.85rem; text-align: center; color: rgba(253, 253, 253, 0.6); }

.pro-plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; color: var(--kh-ink); background: var(--kh-surface); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow-float); }
.pro-plan--pro { box-shadow: 0 0 0 2px #9dbcf5, var(--kh-shadow-float); }
.pro-plan__badge { position: absolute; top: -11px; right: 16px; padding: 4px 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #13171e; background: #f5c96b; border-radius: 999px; }
.pro-plan__name { margin: 0; font-family: var(--kh-font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.pro-plan__price { margin: 4px 0 0; font-family: var(--kh-font-display); font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--kh-ink); }
.pro-plan__price small { font-family: var(--kh-font-body); font-size: 0.85rem; font-weight: 500; color: var(--kh-muted); }
.pro-plan__note { margin: 2px 0 0; font-size: 0.85rem; color: var(--kh-muted); }
.pro-plan__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.4; }
.pro-plan__list li { display: flex; align-items: center; gap: 10px; }
.pro-plan__list li.is-off { color: var(--kh-muted); }
.pro-plan__mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; font-size: 0.8rem; font-weight: 700; color: var(--kh-open); background: var(--kh-open-soft); border-radius: 50%; }
.pro-plan__mark--off { color: var(--kh-closed); background: var(--kh-mist); }
.pro-plan__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; font-size: 1.05rem; background: var(--kh-secondary); border-radius: var(--kh-radius); }
.pro-plan__current { margin: auto 0 0; padding: 11px; font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--kh-muted); border: 1px dashed var(--kh-stone); border-radius: var(--kh-radius); }
.pro-plan__form { margin: auto 0 0; }
.pro-plan__sent { margin: auto 0 0; padding: 11px 12px; font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--kh-open); background: var(--kh-open-soft); border: 1px solid var(--kh-open-line); border-radius: var(--kh-radius); }
@media (max-width: 560px) {
	.pro-dialog__art { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
	.pro-dialog__eyebrow { margin-top: 16px; }
	.pro-dialog__plans { grid-template-columns: 1fr; gap: 20px; }
	.pro-plan--pro { order: -1; } /* Pro first on phones. */
	.pro-dialog .kh-sheet-grip::before { background: #fdfdfd; }
}

/* ---------- Share button (template-parts/share.php) ---------- */
/* Business page header: title block on the left, Save / Share / Report on the bottom-right. */
.listing__head-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.listing__head-main { min-width: 0; }
.listing__tools { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The tools sit at the bottom of the cover (which clips overflow), so the share menu opens upward, right-aligned. */
.listing__tools .share__menu { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }

@media (max-width: 760px) {
	.listing__head-inner { flex-direction: column; align-items: flex-start; }
	.listing__tools .share__menu { right: auto; left: 0; }
}

/* Report flag: outline, turns into a red flag on hover and while the pop-up is open. */
.report-flag {
	display: grid;
	place-items: center;
	width: 41px;
	height: 41px;
	padding: 0;
	color: var(--kh-muted);
	cursor: pointer;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: 50%;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.report-flag .report-flag__cloth { fill: transparent; transition: fill 0.15s; }
.report-flag:hover,
.report-flag:focus-visible,
.report-flag.is-active { color: var(--kh-danger); border-color: var(--kh-danger); }
.report-flag:hover .report-flag__cloth,
.report-flag:focus-visible .report-flag__cloth,
.report-flag.is-active .report-flag__cloth { fill: var(--kh-danger); }
/* Already reported by this member (inc/reports.php): stays red, not clickable. */
.report-flag.is-reported { color: var(--kh-danger); border-color: var(--kh-danger); cursor: default; }
.report-flag.is-reported .report-flag__cloth { fill: var(--kh-danger); }
.report-flag.is-reported:hover svg { animation: none; }
.listing__tools--light .report-flag.is-reported { color: #ff6b6b; border-color: #ff6b6b; }
.listing__tools--light .report-flag.is-reported .report-flag__cloth { fill: #ff6b6b; }
a.report-flag { text-decoration: none; }
.report-flag:hover svg { animation: kh-flag-wave 0.6s ease; transform-origin: 20% 90%; }
@keyframes kh-flag-wave { 30% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } }
.listing__tools--light .report-flag { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); }
.listing__tools--light .report-flag:hover,
.listing__tools--light .report-flag:focus-visible,
.listing__tools--light .report-flag.is-active { color: #ff5c5c; } /* Only the icon turns red; the blurred circle stays. */
.listing__tools--light .report-flag:hover .report-flag__cloth,
.listing__tools--light .report-flag:focus-visible .report-flag__cloth,
.listing__tools--light .report-flag.is-active .report-flag__cloth { fill: #ff5c5c; }
.share { position: relative; }
/* Chip buttons (pill actions in toolbars): share, show map, buy me a beer, 404 roads, walk / drive.
   Style guide: Chips & filters. */
.chip-button,
.share__button,
.map-toggle,
.support,
.lost-road,
.getting-there__mode {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kh-ink);
	text-decoration: none;
	cursor: pointer;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: 999px;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.chip-button:hover,
.share__button:hover,
.map-toggle:hover,
.support:hover,
.lost-road:hover,
.getting-there__mode:hover { color: var(--kh-ink); background: var(--kh-surface); border-color: var(--kh-midnight); }
.chip-button:active,
.share__button:active,
.map-toggle:active,
.support:active,
.lost-road:active,
.getting-there__mode:active { transform: translateY(1px); }
.chip-button:focus-visible,
.share__button:focus-visible,
.map-toggle:focus-visible,
.support:focus-visible,
.lost-road:focus-visible,
.getting-there__mode:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.chip-button[aria-pressed="true"],
.map-toggle[aria-pressed="true"],
.getting-there__mode[aria-pressed="true"] { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.share__button { list-style: none; }
.share__button::-webkit-details-marker { display: none; }
.share--light .share__button,
.listing__tools--light .listing__about-button { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); }
.share--light .share__button:hover,
.listing__tools--light .listing__about-button:hover { color: #fff; background: rgba(255, 255, 255, 0.22); border-color: #fff; }
.listing__tools--light .listing__about-button:focus-visible { outline-color: #fff; }

/* Business page: the description in a pop-up, opened from "About" in the header (single-business.php). Wider than a form, the text scrolls. */
.about-dialog { width: min(600px, calc(100% - 32px)); }
.about-dialog__body { max-height: min(60vh, 520px); overflow-y: auto; margin: 0; padding: 12px 22px 22px; font-size: 1rem; overscroll-behavior: contain; }
.about-dialog__body > :first-child { margin-top: 0; }
.about-dialog__body > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
	.about-dialog__body { max-height: 70vh; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

.share__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: grid;
	gap: 2px;
	width: 230px;
	padding: 8px;
	color: var(--kh-ink);
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-menu);
}
.share__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	font: inherit;
	font-size: 0.92rem;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: var(--kh-radius);
}
.share__item:hover, .share__item:focus-visible { background: var(--kh-mist); }
.share__item svg { flex: none; color: var(--kh-muted); }
.share__url {
	width: 100%;
	margin-top: 6px;
	padding: 7px 9px;
	font-size: 0.8rem;
	color: var(--kh-muted);
	background: var(--kh-mist);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius);
}

/* ---------- Inquiry: button at the end of the sidebar + pop-up form ---------- */
.inquiry-cta .inquiry__hint { margin: 0; }
.inquiry-cta__button { justify-content: center; width: 100%; }
.inquiry__hint { font-size: 0.9rem; color: var(--kh-muted); }
.inquiry .kh-form { gap: 12px; }
.inquiry__consent { margin: 0; font-size: 0.8rem; color: var(--kh-muted); }

/* ---------- Owner dashboard: lead stats + inquiries ---------- */
.dashboard__block { margin-bottom: 40px; }
.lead-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lead-stat { display: grid; gap: 4px; padding: 16px 18px; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.lead-stat__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.lead-stat__value { font-family: var(--kh-font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.lead-stat__diff { font-size: 0.8rem; color: var(--kh-muted); }
.lead-stat__diff--up { color: var(--kh-open); }
.lead-stat__extra { font-size: 0.8rem; color: var(--kh-muted); }
.fav-total { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 14px 18px; color: var(--kh-ink); background: color-mix(in srgb, var(--kh-heart) 10%, transparent); border: 1px solid color-mix(in srgb, var(--kh-heart) 28%, transparent); border-radius: var(--kh-radius-lg); }
.fav-total svg { flex: none; fill: var(--kh-heart); }
.fav-total strong { color: var(--kh-ink); }
.owner-item__favs { margin-left: 6px; font-weight: 600; color: var(--kh-heart); }
.lead-stats__note { margin: 12px 0 0; font-size: 0.8rem; color: var(--kh-muted); }

.inbox { display: grid; margin: 0; padding: 0; list-style: none; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.inbox__item + .inbox__item { border-top: 1px solid var(--kh-stone); }
.inbox__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; list-style: none; cursor: pointer; }
.inbox__head::-webkit-details-marker { display: none; }
.inbox__head:hover { background: var(--kh-mist); }
.inbox__who { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.inbox__from { font-weight: 600; }
.inbox__date { font-size: 0.8rem; color: var(--kh-muted); }
.inbox__biz { flex: none; padding: 2px 8px; font-size: 0.72rem; color: var(--kh-muted); background: var(--kh-mist); border-radius: 999px; }
.inbox__chevron { flex: none; color: var(--kh-muted); transition: transform 0.2s ease; }
details[open] > .inbox__head .inbox__chevron { transform: rotate(180deg); }
.inbox__body { padding: 0 18px 16px; }
.inbox__message { margin: 0 0 14px; white-space: normal; overflow-wrap: anywhere; }
.inbox__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--kh-stone); }
.inbox__contact { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 0.85rem; color: var(--kh-muted); }
.inbox__contact a { color: var(--kh-muted); }
.inbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; }
/* Tertiary: underlined links with an icon, not buttons. */
.inbox__link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--kh-midnight); text-decoration: underline; text-underline-offset: 3px; }
.inbox__link svg { width: 16px; height: 16px; }
.inbox__link:hover { color: var(--kh-primary-deep); text-decoration-thickness: 2px; }
.inbox__empty { margin: 0; padding: 18px; color: var(--kh-muted); background: var(--kh-mist); border-radius: var(--kh-radius-lg); }
.dash-panel > .inbox { margin: -6px -10px; border: 0; }

/* ---------- Favorites: hearts, header link, /saved/ (inc/favorites.php) ---------- */
.save-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	font: inherit;
	color: var(--kh-ink);
	cursor: pointer;
	background: none;
	border: 0;
}
.save-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill 0.15s, stroke 0.15s; }
.save-button[aria-pressed="true"] svg { fill: var(--kh-heart); stroke: var(--kh-heart); }
.save-button.is-popping svg { animation: kh-heart-pop 0.35s ease; }
@keyframes kh-heart-pop { 40% { transform: scale(1.3); } }

/* On card photos: round white button, top right. */
.save-button--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: var(--kh-shadow-control);
	transition: transform 0.15s;
}
.save-button--card:hover { transform: scale(1.08); }

/* Business page header: round icon button, same size and look as the report flag. */
.save-button--round {
	width: 41px;
	height: 41px;
	color: var(--kh-muted);
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: 50%;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.save-button--round svg { width: 18px; height: 18px; }
.save-button--round:hover { color: var(--kh-heart); border-color: var(--kh-heart); }
.save-button--round[aria-pressed="true"] { border-color: var(--kh-heart); }
.listing__tools--light .save-button--round { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); }
.listing__tools--light .save-button--round:hover,
.listing__tools--light .save-button--round[aria-pressed="true"] { color: #ff6b81; } /* Only the icon changes; the blurred circle stays. */

/* Header heart with count. */
.site-saved {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	color: var(--kh-ink);
	border-radius: 50%;
}
.site-saved:hover, .site-saved[aria-current="page"] { background: var(--kh-mist); }
.site-saved ~ .site-nav, .site-saved ~ .nav-toggle { margin-left: 0; }
.site-saved__count {
	position: absolute;
	/* Small badge on the heart's top-right corner, so the heart stays visible. */
	top: 4px;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 0.64rem;
	font-weight: 700;
	line-height: 13px;
	text-align: center;
	color: #fff;
	background: var(--kh-heart);
	border: 1.5px solid var(--kh-paper);
	border-radius: 999px;
	box-sizing: border-box;
}
.site-saved__count[hidden] { display: none; }

.saved-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.saved-sync svg { flex: none; color: var(--kh-midnight); }
.saved-sync p { flex: 1 1 260px; margin: 0; font-size: 0.92rem; color: var(--kh-muted); }
.saved-sync p strong { color: var(--kh-ink); }
.saved-sync__actions { display: flex; gap: 8px; }
.saved__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.saved__bar[hidden] { display: none; }
.saved__count { margin: 0; color: var(--kh-muted); }
.saved__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.saved__actions .share__menu { left: auto; right: 0; }
.saved__actions .share__button { padding: 6px 12px; font-size: 0.85rem; }
.saved__actions .button svg { vertical-align: -3px; margin-right: 4px; }
.saved__status { margin: -8px 0 20px; font-size: 0.92rem; color: var(--kh-open); }
.saved__status[hidden] { display: none; }
@media (max-width: 600px) {
	.saved__bar { flex-wrap: wrap; gap: 10px; } /* Count on the left, the buttons on the right, on phones too. */
	.saved__actions .share__menu { left: auto; right: 0; }
}
.saved__loading { color: var(--kh-muted); }
.saved__loading[hidden] { display: none; }
.empty-state__icon { color: var(--kh-muted); }
.business-card.is-removing { opacity: 0; transform: scale(0.97); transition: opacity 0.2s, transform 0.2s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Business page header over a cover photo: the filled heart uses the brighter red too. */
.listing__tools--light .save-button--round[aria-pressed="true"] svg { fill: #ff6b81; stroke: #ff6b81; }

/* ---------- Account settings (account/settings.php) ---------- */
.page-head__back { color: inherit; text-decoration: none; }
.page-head__back:hover { color: var(--kh-ink); text-decoration: underline; }
.settings .editor + .settings__more { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--kh-stone); }
.settings__more .editor__section:first-child { border-top: 0; }
.settings__current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.settings__panel > summary { list-style: none; justify-self: start; }
.settings__panel > summary::-webkit-details-marker { display: none; }
.settings__panel[open] > summary { margin-bottom: 16px; }
.settings__panel .kh-form { gap: 14px; max-width: 520px; }
.settings__danger .editor__intro h2 { color: var(--kh-danger); }
.field__label { display: block; margin-bottom: 6px; font-weight: 600; }

/* Photos of people: round. Used on reviews and the account page. */
.review__avatar--photo,
.account-head__avatar--photo { padding: 0; overflow: hidden; }
.review__avatar--photo img,
.account-head__avatar--photo img { width: 100%; height: 100%; object-fit: cover; }

.account-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.account-head__avatar { display: grid; flex: none; place-items: center; width: 64px; height: 64px; font-family: var(--kh-font-display); font-size: 1.3rem; font-weight: 700; color: var(--kh-midnight); background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: 50%; }
.account-head__text { flex: 1 1 200px; min-width: 0; }
.account-head__text .page-head__title { margin-bottom: 0; }

/* ---------- 404 (404.php + assets/js/lost-pin.js) ---------- */
.hero--404 { padding-bottom: clamp(32px, 5vw, 56px); }
.hero--404 .kh-search { justify-items: center; gap: 18px; padding-block: clamp(36px, 6vw, 72px) 20px; text-align: center; }
.hero--404 .kh-search__heading,
.hero--404 .kh-search__sub { margin-inline: auto; }
.hero--404 .kh-search__form { width: 100%; text-align: left; }
.hero--404 .kh-search__chips { justify-content: center; }

/* "4 [pin] 4": the 4s are street-sign plates, the lost pin is the 0. */
.lost-404 { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 2vw, 18px); margin-bottom: 4px; }
.lost-404__plate {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(64px, 11vw, 104px);
	height: clamp(84px, 14vw, 132px);
	margin-bottom: clamp(10px, 2vw, 18px);
	font-family: var(--kh-font-display);
	font-size: clamp(3.2rem, 9vw, 5.6rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	background: var(--kh-midnight);
	border: 3px solid #fff;
	border-radius: var(--kh-radius-lg);
	box-shadow: 0 0 0 1px var(--kh-midnight), 0 14px 30px color-mix(in srgb, var(--kh-midnight) 22%, transparent);
	transform: rotate(-5deg);
}
.lost-404__plate + .lost-pin + .lost-404__plate { transform: rotate(4deg); }
/* The two screws of a street sign. */
.lost-404__plate::before,
.lost-404__plate::after { content: ""; position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; background: rgba(255, 255, 255, 0.55); border-radius: 50%; }
.lost-404__plate::before { top: 8px; }
.lost-404__plate::after { bottom: 8px; }

.lost-pin { position: relative; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lost-pin:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 6px; border-radius: var(--kh-radius-xl); }
.lost-pin__svg { display: block; width: clamp(92px, 15vw, 136px); height: auto; overflow: visible; }
.lost-pin__shape { fill: var(--kh-midnight); }
.lost-pin__face { fill: var(--kh-paper); }
.lost-pin__eye ellipse { fill: var(--kh-ink); transform-box: fill-box; transform-origin: center; transition: transform 0.08s ease; }
.lost-pin__pupil { fill: #fff; transition: transform 0.12s ease-out; }
.lost-pin__eyes.is-blinking ellipse { transform: scaleY(0.12); }
.lost-pin__eyes.is-blinking .lost-pin__pupil { opacity: 0; }
.lost-pin__brow,
.lost-pin__mouth { fill: none; stroke: var(--kh-ink); stroke-width: 3; stroke-linecap: round; }
.lost-pin__blush { fill: #f19aa8; opacity: 0.55; }
.lost-pin__shadow { fill: var(--kh-ink); opacity: 0.12; transform-box: fill-box; transform-origin: center; animation: kh-pin-shadow 3.2s ease-in-out infinite; }
.lost-pin__body { transform-box: view-box; transform-origin: 60px 140px; animation: kh-pin-float 3.2s ease-in-out infinite, kh-pin-sway 6.4s ease-in-out infinite; }
.lost-pin__question text { font-family: var(--kh-font-display); font-size: 34px; font-weight: 800; fill: var(--kh-midnight); }
.lost-pin__question { transform-box: fill-box; transform-origin: 50% 90%; animation: kh-pin-question 2.4s ease-in-out infinite; }
.lost-pin:hover .lost-pin__body { animation-duration: 1.6s, 1.2s; }

@keyframes kh-pin-float { 50% { translate: 0 -7px; } }
@keyframes kh-pin-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes kh-pin-shadow { 50% { transform: scale(0.82); opacity: 0.07; } }
@keyframes kh-pin-question { 0%, 100% { rotate: -10deg; opacity: 1; } 50% { rotate: 12deg; opacity: 0.6; } }

/* Tap: a little hop. */
.lost-404.is-hopping .lost-pin { animation: kh-pin-hop 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.4); }
@keyframes kh-pin-hop { 35% { transform: translateY(-20px) scale(1.04, 0.96); } 70% { transform: translateY(0) scale(1.06, 0.94); } }

/* Speech bubble. */
.lost-pin__bubble {
	position: absolute;
	bottom: calc(100% - 4px);
	left: 62%;
	z-index: 2;
	padding: 7px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--kh-ink);
	white-space: nowrap;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg) var(--kh-radius-lg) var(--kh-radius-lg) 3px;
	box-shadow: var(--kh-shadow-menu);
	opacity: 0;
	transform: translateY(6px) scale(0.9);
	transform-origin: 0 100%;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.lost-404.is-talking .lost-pin__bubble { opacity: 1; transform: none; }

/* Roads out: quick links under the search. */
.lost-roads { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lost-road svg { color: var(--kh-muted); transition: color 0.15s; }
.lost-road:hover svg { color: var(--kh-midnight); }

@media (max-width: 480px) {
	.lost-pin__bubble { left: 50%; transform: translate(-50%, 6px) scale(0.9); transform-origin: 50% 100%; border-radius: var(--kh-radius-lg); }
	.lost-404.is-talking .lost-pin__bubble { transform: translateX(-50%); }
	.lost-road { flex: 1 1 calc(50% - 8px); justify-content: center; }
}

/* ---------- Coming soon (inc/maintenance.php, template-parts/maintenance.php, assets/js/cooking.js) ----------
   The 404's pin in a chef's hat, stirring a pot. Shares .lost-pin and lost-pin.js. */
.cooking-page {
	justify-content: center;
	background: radial-gradient(ellipse 70% 50% at 50% 28%, var(--kh-secondary), transparent 70%), var(--kh-paper);
}
.cooking {
	display: grid;
	justify-items: center;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(32px, 7vh, 72px) var(--kh-gutter);
	text-align: center;
}
.cooking__brand { margin-bottom: clamp(20px, 5vh, 40px); }
.cooking__stage { position: relative; margin-bottom: 20px; }
.cooking__svg { width: clamp(132px, 34vw, 172px); }
.cooking__title { margin: 0 0 12px; font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.15; }
.cooking__text { margin: 0 0 24px; font-size: 1.05rem; line-height: 1.5; color: var(--kh-muted); }

/* Chef's hat, pot, ladle, steam. */
.cooking__hat path { fill: var(--kh-surface); stroke: var(--kh-midnight); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.cooking__pot path:not(.cooking__handle),
.cooking__rim { fill: var(--kh-ink); }
.cooking__rim { stroke: var(--kh-muted); stroke-width: 2; }
.cooking__handle { fill: none; stroke: var(--kh-ink); stroke-width: 6; stroke-linecap: round; }
.cooking__ladle { fill: none; stroke: var(--kh-muted); stroke-width: 5; stroke-linecap: round; transform-box: view-box; transform-origin: 82px 106px; animation: kh-stir 2.4s ease-in-out infinite; }
.cooking__steam path { fill: none; stroke: var(--kh-muted); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: kh-steam 2.8s ease-out infinite; }
.cooking__steam path:nth-child(2) { animation-delay: 0.9s; }
.cooking__steam path:nth-child(3) { animation-delay: 1.8s; }
/* In the pot: it bobs, without the sway (the pot doesn't move). */
.cooking .lost-pin__body { animation: kh-pin-float 3.2s ease-in-out infinite; }
.cooking .lost-pin__bubble { bottom: calc(100% - 8px); left: 72%; }
.cooking__stage.is-hopping .lost-pin { animation: kh-pin-hop 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.4); }
.cooking__stage.is-talking .lost-pin__bubble { opacity: 1; transform: none; }

@keyframes kh-stir { 0%, 100% { rotate: -14deg; } 50% { rotate: 10deg; } }
@keyframes kh-steam { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: 0.45; } 100% { opacity: 0; translate: 0 -18px; } }
@keyframes kh-flame {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kh-warning) 45%, transparent); }
	100% { box-shadow: 0 0 0 8px transparent; }
}

/* What the kitchen is doing: a pill with a flickering flame dot. */
.cooking__status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	margin: 0 0 28px;
	padding: 8px 16px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--kh-ink);
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: 999px;
	box-shadow: var(--kh-shadow-sm);
}
.cooking__flame { flex: none; width: 8px; height: 8px; background: var(--kh-warning); border-radius: 50%; animation: kh-flame 1.6s ease-out infinite; }
[data-cooking-step] { transition: opacity 0.25s ease, translate 0.25s ease; }
[data-cooking-step].is-leaving { opacity: 0; translate: 0 -4px; }
.cooking__contact { margin: 0; font-size: 0.85rem; color: var(--kh-muted); }
.cooking__contact a { font-weight: 600; }

@media (max-width: 480px) {
	.cooking .lost-pin__bubble { left: 50%; transform: translate(-50%, 6px) scale(0.9); transform-origin: 50% 100%; border-radius: var(--kh-radius-lg); }
	.cooking__stage.is-talking .lost-pin__bubble { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cooking .lost-pin__body,
	.cooking__ladle,
	.cooking__flame,
	[data-cooking-step] { animation: none; transition: none; }
	.cooking__steam path { animation: none; opacity: 0.35; }
}

/* ---------- "Buy me a beer" (inc/support.php) ---------- */
.site-footer__end { display: grid; justify-items: end; gap: 8px; }
.support__beer { color: var(--kh-star); }
.support:hover .support__beer { animation: kh-beer-cheers 0.6s ease; transform-origin: 50% 90%; }
@keyframes kh-beer-cheers { 30% { rotate: -14deg; } 60% { rotate: 8deg; } }
.support-dialog__qr { display: grid; justify-items: center; gap: 10px; padding: 16px 22px 0; text-align: center; }
.support-dialog__qr img { width: min(240px, 70vw); height: auto; padding: 10px; background: #fff; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.support-dialog__how { margin: 0; font-size: 0.9rem; color: var(--kh-muted); }
.support-dialog__actions { padding: 16px 22px 22px; }
@media (max-width: 640px) {
	.site-footer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: 28px; }
	.site-footer__inner > .site-footer__end { justify-self: auto; justify-items: start; }
	.site-footer__menu { flex-direction: column; gap: 10px; }
}

/* ---------- Menu: sale prices and "Not available" (inc/menu.php) ---------- */
.price-was { margin-right: 6px; font-size: 0.8rem; font-weight: 400; color: var(--kh-muted); }
.price-now { font-weight: 700; color: var(--kh-ink); }
.menu-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 2px; border-radius: 999px; }
.menu-badge--sale { color: #fff; background: var(--kh-promo); }
.menu-badge--off { color: var(--kh-muted); background: var(--kh-mist); border: 1px solid var(--kh-stone); }
.menu-item.is-unavailable .menu-item__name { color: var(--kh-muted); }
.menu-item.is-unavailable .menu-item__price,
.menu-item.is-unavailable .menu-size__price { color: var(--kh-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--kh-muted) 50%, transparent); }
.menu-item.is-unavailable .menu-item__photo img { filter: grayscale(1); opacity: 0.6; }

/* ---------- Menu for today + promos (inc/updates.php) ---------- */

/* Business page: promo banner, a coupon. The promo stub (label, end date) on the left, a perforated edge with a notch top and bottom, then the deal. Phones: the stub is a strip on top. */
.promo-banner {
	--stub: 150px;
	position: relative;
	display: grid;
	grid-template-columns: var(--stub) minmax(0, 1fr);
	margin-bottom: 20px;
	overflow: hidden;
	background: linear-gradient(100deg, var(--kh-heart-soft), var(--kh-surface) 70%);
	border: 1px solid var(--kh-heart-line);
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-panel);
}
.promo-banner::before,
.promo-banner::after { position: absolute; left: calc(var(--stub) - 9px); z-index: 1; width: 18px; height: 18px; background: var(--kh-paper); border: 1px solid var(--kh-heart-line); border-radius: 50%; content: ""; }
.promo-banner::before { top: -10px; }
.promo-banner::after { bottom: -10px; }
.promo-banner__stub { position: relative; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 16px 18px; color: var(--kh-on-primary); background: var(--kh-promo); }
.promo-banner__stub::after { position: absolute; top: 12px; right: -1px; bottom: 12px; border-right: 2px dashed var(--kh-surface); content: ""; }
.promo-banner__tag { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; background: color-mix(in srgb, var(--kh-on-primary) 20%, transparent); border-radius: 50%; }
.promo-banner__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.promo-banner__ends { margin: 0; padding: 2px 10px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; color: var(--kh-promo); background: var(--kh-on-primary); border-radius: 999px; }
.promo-banner__body { display: grid; align-content: center; gap: 6px; padding: 18px 22px 18px 26px; }
.promo-banner__title { margin: 0; font-family: var(--kh-font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--kh-promo); }
.promo-banner__details { margin: 0; font-size: 0.92rem; color: var(--kh-muted); white-space: pre-line; }
@media (max-width: 560px) {
	.promo-banner { --stub: 56px; grid-template-columns: minmax(0, 1fr); }
	.promo-banner::before,
	.promo-banner::after { top: calc(var(--stub) - 9px); bottom: auto; }
	.promo-banner::before { left: -10px; }
	.promo-banner::after { right: -10px; left: auto; }
	.promo-banner__stub { display: flex; align-items: center; height: var(--stub); padding: 0 16px; gap: 10px; }
	.promo-banner__stub::after { top: auto; right: 12px; bottom: -1px; left: 12px; border-right: 0; border-bottom: 2px dashed var(--kh-surface); }
	.promo-banner__tag { width: 30px; height: 30px; margin: 0; }
	.promo-banner__ends { margin-left: auto; }
	.promo-banner__body { padding: 16px 18px; }
	.promo-banner__title { font-size: 1.15rem; }
}

/* Business page: today's menu, a menu card. Green head with a live dot and the date, then each dish with a dotted line to its price. */
.today-card { margin-bottom: 24px; overflow: hidden; background: var(--kh-surface); border: 1px solid var(--kh-open-line); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow-panel); }
.today-card__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(100deg, var(--kh-open-soft), var(--kh-surface) 75%); border-bottom: 1px dashed var(--kh-open-line); }
.today-card__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; color: var(--kh-on-primary); background: var(--kh-open); border-radius: var(--kh-radius-lg); }
.today-card__heading { display: grid; gap: 2px; min-width: 0; }
.today-card__date { margin: 0; }
.today-card__title { margin: 0; font-size: 1.3rem; }
.today-card__list { display: grid; margin: 0; padding: 6px 20px; list-style: none; }
.today-card__list li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.today-card__name { min-width: 0; font-weight: 600; }
.today-card__leader { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--kh-stone); transform: translateY(-4px); }
.today-card__price { font-family: var(--kh-font-display); font-weight: 700; white-space: nowrap; color: var(--kh-open); font-variant-numeric: tabular-nums; }
.today-card__note { margin: 0; padding: 0 20px 14px; font-size: 0.9rem; color: var(--kh-muted); }
.today-card__follow { margin: 0; padding: 10px 20px; font-size: 0.8rem; color: var(--kh-muted); background: var(--kh-mist); border-top: 1px solid var(--kh-stone); }
@media (max-width: 560px) {
	.today-card__head { padding: 14px 16px; }
	.today-card__list { padding: 4px 16px; }
	.today-card__note { padding: 0 16px 12px; }
	.today-card__follow { padding: 10px 16px; }
	.today-card__title { font-size: 1.15rem; }
}

/* Cards: badges on the photo, top left. */
.card-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 64px); pointer-events: none; }
.card-badge { padding: 3px 9px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; border-radius: 999px; box-shadow: var(--kh-shadow-control); }
.card-badge--promo { background: var(--kh-promo); }
.card-badge--ad { background: #13171e; } /* Ad cards: on the poster (Exceptions › Over photos). */

/* The deal, bottom left on the photo: "20% off", "Buy 1 Take 1". */
.business-card__media { position: relative; }
/* Bottom left on the photo: one price tag. Pointed head with a hole on the left, notched tail on the right (clip-path on the inner span; the outer one's drop-shadow follows the shape).
   "Menu today" is a mint segment with a green dot, the deal a green one; with both they're one tag, mint then green. Fixed colours on the photo in both modes (Exceptions › Over photos). */
.card-tags { --head: 9px; --tail: 6px; position: absolute; left: 10px; bottom: 10px; z-index: 1; display: flex; max-width: calc(100% - 20px); filter: drop-shadow(0 2px 3px rgba(19, 23, 30, 0.3)); pointer-events: none; }
.card-tags__tag { display: flex; min-width: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; clip-path: polygon(var(--head) 0, 100% 0, calc(100% - var(--tail)) 50%, 100% 100%, var(--head) 100%, 0 50%); }
.card-today,
.card-deal { padding: 3px 8px; }
.card-today { display: inline-flex; flex: none; align-items: center; gap: 5px; color: #1f5a39; background: #dff3e7; }
.card-today::before { width: 6px; height: 6px; background: #2f7a4f; border-radius: 50%; content: ""; }
.card-deal { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; background: #2f7a4f; }
.card-tags__tag > :first-child { padding-left: calc(var(--head) + 9px); background-image: radial-gradient(circle at calc(var(--head) + 2px) 50%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.5px); } /* The hole. */
.card-today:first-child { padding-left: calc(var(--head) + 5px); background-image: none; } /* Its green dot is the hole. */
.card-tags__tag > :last-child { padding-right: calc(var(--tail) + 8px); }

/* Owner dashboard chips. */
.live-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 0.72rem; font-weight: 700; color: #fff; border-radius: 999px; }
.live-chip--today { background: var(--kh-open); }
.live-chip--promo { background: var(--kh-promo); }

/* Editor: "Today & promos" tab. */
.updates-panel__reach { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 10px 14px; font-size: 0.9rem; background: var(--kh-heart-soft); border: 1px solid var(--kh-heart-line); border-radius: var(--kh-radius-lg); }
.updates-panel .editor__section + .editor__section { border-top: 1px solid var(--kh-stone); }
.updates-status { margin: 0; padding: 8px 12px; font-size: 0.9rem; font-weight: 600; border-radius: var(--kh-radius); }
.updates-status--live { color: var(--kh-open); background: var(--kh-open-soft); border: 1px solid var(--kh-open-line); }
.today-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.today-extra { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; margin-bottom: 8px; }
.today-extra .price-input { position: relative; display: block; }
.today-extra .price-input__symbol { position: absolute; top: 50%; left: 12px; color: var(--kh-muted); transform: translateY(-50%); pointer-events: none; }
.kh-form .today-extra .price-input input { padding-left: 28px; }
.updates-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* That tab has its own buttons: no "Save changes" bar there. */
.editor[data-tab="tab-updates"] .editor__bar,
.editor[data-tab="tab-ads"] .editor__bar { display: none; } /* Tabs with their own buttons (promos, ads). */

/* Header bell. */
.bell { position: relative; }
.bell__button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--kh-ink); list-style: none; cursor: pointer; border-radius: 50%; }
.bell__button::-webkit-details-marker { display: none; }
.bell__button:hover, .bell[open] .bell__button { background: var(--kh-mist); }
.bell__count { position: absolute; top: 4px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.64rem; font-weight: 700; line-height: 13px; text-align: center; color: #fff; background: var(--kh-heart); border: 1.5px solid var(--kh-paper); border-radius: 999px; box-sizing: border-box; }
.bell__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: -60px;
	z-index: 40;
	width: min(360px, calc(100vw - 24px));
	padding: 12px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-float);
}
.bell__title { margin: 0 4px 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.bell__list { display: grid; gap: 2px; max-height: 360px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
/* A row, like Facebook's: who it's about (photo or initials) with a small
   badge for what happened, the words, and a dot while it's new. */
.bell__item a { display: flex; align-items: flex-start; gap: 12px; padding: 8px; font-size: 0.9rem; line-height: 1.4; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius); }
.bell__item a:hover { background: var(--kh-mist); }
.bell__item a:active { background: var(--kh-stone); }
.bell__item a:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: -2px; }
.bell__pic { position: relative; flex: none; width: 44px; height: 44px; }
.bell__avatar { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; font-size: 0.85rem; font-weight: 600; color: var(--kh-on-secondary); background: var(--kh-secondary); border-radius: 50%; }
.bell__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bell__badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--kh-on-primary); background: var(--kh-midnight); border: 2px solid var(--kh-surface); border-radius: 50%; }
.bell__item a:hover .bell__badge { border-color: var(--kh-mist); }
/* Not opened yet: a grey tint until it's read (darker on hover). */
.bell__item.is-new a { background: var(--kh-mist); }
.bell__item.is-new a:hover { background: var(--kh-stone); }
.bell__item.is-new .bell__badge { border-color: var(--kh-mist); }
.bell__item.is-new a:hover .bell__badge { border-color: var(--kh-stone); }
.bell__badge--open { background: var(--kh-open); }
.bell__badge--promo { background: var(--kh-promo); }
.bell__badge--verified { background: var(--kh-verified); }
.bell__badge--warning { background: var(--kh-warning); }
.bell__badge--star { background: var(--kh-star); }
.bell__badge--danger { background: var(--kh-danger); }
.bell__text { flex: 1; min-width: 0; }
.bell__text time { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--kh-muted); }
.bell__item.is-new .bell__text time { font-weight: 600; color: var(--kh-midnight); }
.bell__item:not(.is-new) .bell__text { color: var(--kh-muted); }
.bell__item:not(.is-new) .bell__text strong { color: var(--kh-ink); }
.bell__dot { flex: none; align-self: center; width: 10px; height: 10px; background: var(--kh-midnight); border-radius: 50%; }
.bell__item:not(.is-new) .bell__dot { display: none; } /* Read just now (assets/js/updates.js). */
.bell__empty { margin: 0 4px 8px; font-size: 0.9rem; color: var(--kh-muted); }
.bell__settings { display: block; margin: 8px 4px 0; padding-top: 8px; font-size: 0.8rem; color: var(--kh-muted); border-top: 1px solid var(--kh-stone); }
.site-saved ~ .bell { margin-left: 0; }
@media (max-width: 860px) { .bell__panel { right: -100px; } }
@media (max-width: 600px) { .bell__panel { position: fixed; top: 62px; right: 12px; left: 12px; width: auto; } }

/* ---------- Loading skeletons (navigation.js > KantoHubSkeletonCards, live search, photos) ----------
   A grey block with a soft light sweeping across it. One sweep for every placeholder:
   skeleton cards, live-search rows, photos still loading (.is-img-loading), refreshing picks. */
:root { --kh-skel: #ecebee; --kh-skel-shine: rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] { --kh-skel: #232a34; --kh-skel-shine: rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --kh-skel: #232a34; --kh-skel-shine: rgba(255, 255, 255, 0.08); }
}
.skeleton {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--kh-skel);
	border-radius: var(--kh-radius);
}
.skeleton::after,
.is-img-loading::after,
.is-refreshing .business-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 25%, var(--kh-skel-shine) 50%, transparent 75%);
	transform: translateX(-100%);
	animation: kh-sweep 1.5s ease-in-out infinite;
}
@keyframes kh-sweep { 60%, 100% { transform: translateX(100%); } }
/* Old name, still used by the results map while it loads. */
@keyframes kh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.skeleton--title { height: 20px; width: 72%; }
.skeleton--line { height: 11px; width: 100%; border-radius: 999px; }
.skeleton--short { width: 38%; }
.skeleton--mid { width: 58%; }
.skeleton--tiny { width: 22%; }
.skeleton--pill { width: 64px; height: 18px; border-radius: 999px; }
.skeleton--stars { width: 46%; height: 13px; }
.skeleton--heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--kh-skel) 60%, var(--kh-surface)); }
.skeleton-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* A placeholder card has the same parts, sizes and spacing as a real one, so nothing jumps when it's swapped. */
.business-card.is-skeleton { pointer-events: none; }
.business-card.is-skeleton .business-card__media { border-radius: 0; }
.business-card.is-skeleton .business-card__body { gap: 10px; }
.business-card.is-skeleton .business-card__where { border-top-color: var(--kh-stone); }
.business-card.is-skeleton:nth-child(4n + 2) .skeleton--title { width: 60%; }
.business-card.is-skeleton:nth-child(4n + 3) .skeleton--title { width: 80%; }
.business-card.is-skeleton:nth-child(4n + 4) .skeleton--mid { width: 44%; }

.kh-result--skeleton { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.kh-result--skeleton .kh-result__media { flex: none; width: 44px; height: 44px; }
.kh-result--skeleton .kh-result__body { display: grid; flex: 1; gap: 8px; }

/* Photos: the box shimmers until the picture has loaded, then it fades in (navigation.js). */
.is-img-loading { position: relative; overflow: hidden; background: var(--kh-skel); }
.is-img-loading > img { opacity: 0; }
.business-card__media img,
.listing-cover__img,
.menu-item__photo img,
.review__photos img,
.menu-modal__img { transition: opacity 0.35s ease; }
.listing-cover.is-img-loading { background: #1d2b42; --kh-skel-shine: rgba(255, 255, 255, 0.07); }
.review__photos a { position: relative; cursor: zoom-in; }
.review__photos a:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }

/* Front page picks re-loading after "Near me" changes (blocks/search/location.js). */
.is-refreshing .business-card { pointer-events: none; }
.is-refreshing .business-card > * { opacity: 0.45; transition: opacity 0.2s; }

@media (prefers-reduced-motion: reduce) {
	.skeleton::after,
	.is-img-loading::after,
	.is-refreshing .business-card::after { animation: none; opacity: 0; }
}

/* Account pages: settings gear (account.php, dashboard.php). */

/* ---------- Results map (template-parts/business-results.php, assets/js/results-map.js) ---------- */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.results-bar .results-count { margin: 0; }
.map-toggle[hidden] { display: none; }

.results-map { margin-bottom: 24px; }
.results-map[hidden] { display: none; }
.results-map__canvas { position: relative; z-index: 0; height: clamp(300px, 42vh, 440px); overflow: hidden; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.results-map__canvas.is-loading { background: linear-gradient(90deg, var(--kh-mist) 0%, var(--kh-skel) 40%, var(--kh-mist) 80%) 0 0 / 200% 100%; animation: kh-shimmer 1.3s ease-in-out infinite; }
.results-map__note { margin: 8px 0 0; font-size: 0.8rem; color: var(--kh-muted); }
.results-map__note[hidden] { display: none; }

/* Pins: a rating badge (★ 4.5, or "New") with a tip on the spot; the card you point at turns it red. */
.kh-rpin-wrap { background: none; border: 0; }
.kh-rpin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; font-family: var(--kh-font-body); font-size: 0.8rem; font-weight: 700; line-height: 1.2; color: var(--kh-ink); white-space: nowrap; cursor: pointer; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 999px; box-shadow: var(--kh-shadow-control); transform: translate(-50%, calc(-100% - 7px)); transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.kh-rpin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -5px; background: inherit; border-right: 1px solid var(--kh-stone); border-bottom: 1px solid var(--kh-stone); transform: rotate(45deg); }
.kh-rpin__star { color: var(--kh-star); }
.kh-rpin--new { font-weight: 600; color: var(--kh-muted); }
.kh-rpin.is-active { z-index: 2; color: #fff; background: var(--kh-heart); border-color: var(--kh-heart); transform: translate(-50%, calc(-100% - 7px)) scale(1.12); }
.kh-rpin.is-active::after { border-color: var(--kh-heart); }
.kh-rpin.is-active .kh-rpin__star { color: #fff; }

/* The place you tapped, docked at the bottom of the map (assets/js/results-map.js). */
.results-map__sheet { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1000; max-width: 420px; margin-inline: auto; overflow: hidden; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow-float); animation: kh-sheet-up 0.2s ease-out; }
.results-map__sheet[hidden] { display: none; }
@keyframes kh-sheet-up { from { opacity: 0; transform: translateY(12px); } }
.results-map__sheet .kh-map-pop { display: grid; grid-template-columns: 112px minmax(0, 1fr); width: auto; }
.results-map__sheet .kh-map-pop__media { height: 100%; min-height: 112px; }
.results-map__sheet .kh-map-pop__body { align-content: center; padding: 10px 40px 10px 12px; }
.results-map__sheet .card-tags { --head: 7px; --tail: 5px; left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
.results-map__sheet .card-tags__tag { font-size: 0.64rem; }
.results-map__sheet :is(.card-today, .card-deal) { padding-block: 2px; }
.results-map__sheet-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 1.05rem; line-height: 1; color: var(--kh-ink); cursor: pointer; background: var(--kh-mist); border: 0; border-radius: 50%; }
.results-map__sheet-close:hover { background: var(--kh-stone); }
.kh-you { display: block; width: 16px; height: 16px; background: #2f6fed; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(47, 111, 237, 0.2); }

/* The tapped place's card (in the docked sheet): photo, then its details. */
.kh-map-pop { display: grid; width: 240px; overflow: hidden; font-family: var(--kh-font-body); color: var(--kh-ink); }
.kh-map-pop__media { position: relative; display: grid; place-items: center; height: 120px; overflow: hidden; background: var(--kh-mist); text-decoration: none; }
.kh-map-pop__media img { width: 100%; height: 100%; object-fit: cover; }
.kh-map-pop__initials { font-family: var(--kh-font-display); font-size: 1.75rem; font-weight: 700; color: var(--kh-muted); }
.kh-map-pop__icon { width: 44px; height: 44px; color: var(--kh-midnight); opacity: 0.7; }
.kh-map-pop__badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.kh-map-pop__badges .card-badge { padding: 2px 7px; font-size: 0.64rem; }
.kh-map-pop__body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.kh-map-pop a.kh-map-pop__name { font-family: var(--kh-font-display); font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--kh-ink); text-decoration: none; }
.kh-map-pop a.kh-map-pop__name:hover { text-decoration: underline; }
.kh-map-pop__rating { font-size: 0.8rem; font-weight: 600; }
.kh-map-pop__star { color: var(--kh-star); }
.kh-map-pop__count { font-weight: 400; color: var(--kh-muted); }
.kh-map-pop__meta, .kh-map-pop__where { font-size: 0.8rem; color: var(--kh-muted); }
.kh-map-pop__open { font-weight: 600; color: var(--kh-open); }
.kh-map-pop a.kh-map-pop__more { justify-self: start; margin-top: 6px; font-size: 0.8rem; font-weight: 700; color: var(--kh-midnight); text-decoration: none; }
.kh-map-pop a.kh-map-pop__more:hover { text-decoration: underline; }

/* Google's InfoWindow: the same, edge to edge. */
.gm-style .gm-style-iw-c { padding: 0 !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; }

/* A card whose pin was clicked: outlined, with a short glow. */
.business-card.is-map-active { border-color: var(--kh-midnight); box-shadow: 0 0 0 2px var(--kh-midnight); animation: kh-card-ping 1.2s ease-out 1; }
@keyframes kh-card-ping { 0% { box-shadow: 0 0 0 2px var(--kh-midnight), 0 0 0 0 color-mix(in srgb, var(--kh-midnight) 35%, transparent); } 100% { box-shadow: 0 0 0 2px var(--kh-midnight), 0 0 0 14px transparent; } }
/* Google Maps clusters (results-map.js): many nearby pins as one numbered circle. */
.kh-pin-wrap { background: none; border: 0; }

/* ---------- Results: list + map side by side on wide screens ---------- */
/* .has-map is set by results-map.js while the map is shown. Phones and tablets
   keep the map above the list. */
@media (min-width: 1024px) {
	.results-layout.has-map {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(380px, 44%);
		grid-template-areas: "list map";
		gap: 24px;
		align-items: start;
	}
	.results-layout.has-map .results-layout__list { grid-area: list; min-width: 0; }
	/* The map stays in view while the list scrolls (below the sticky header). */
	.results-layout.has-map .results-map {
		grid-area: map;
		position: sticky;
		top: calc(var(--kh-sticky-top, var(--kh-header-h, 70px)) + 16px);
		margin-bottom: 0;
	}
	.results-layout.has-map .results-map__canvas { height: calc(100vh - var(--kh-header-h, 70px) - 40px); min-height: 420px; }
	/* Two cards per row beside the map. */
	.results-layout.has-map .business-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Communities (inc/communities.php)
   ========================================================================== */

/* Community page head: stats, search inside, share + list buttons. */
.community-head__stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; color: var(--kh-muted); font-size: 0.95rem; }
.community-head__stats strong { color: var(--kh-ink); font-family: var(--kh-font-display); font-size: 1.05rem; }
.community-head__reach { font-size: 0.85rem; }
.community-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin-top: 18px; padding: 6px 6px 6px 14px; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 999px; }
.community-search:focus-within { border-color: var(--kh-midnight); }
.community-search svg { flex: none; color: var(--kh-muted); }
.community-search input { flex: 1; min-width: 0; padding: 6px 0; font: inherit; color: var(--kh-ink); background: none; border: 0; outline: 0; }
.community-search .button { flex: none; }
.community-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 6px; }

/* Search results for a community: "Inside first, then nearby". */
.search-place-note { margin: 6px 0 0; font-size: 0.92rem; }
.search-place-note a { margin-left: 6px; font-weight: 600; }

/* Card: inside / how far outside the community shown. */
.business-card__community { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 0.85rem; color: var(--kh-muted); }
.business-card__community svg { flex: none; }
.business-card__community span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-card__community.is-inside { color: var(--kh-open); font-weight: 600; }

/* Business page: "Part of Beverly Homes Phase 3/A". */
.listing__community { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 0.92rem; color: var(--kh-muted); }
.listing__community a { font-weight: 600; }
.listing-cover .listing__community { color: rgba(255, 255, 255, 0.85); }
.listing-cover .listing__community a { color: #fff; }

/* Editor: communities to join. */
.community-picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.community-picker legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.community-picker__list { display: grid; gap: 8px; margin-top: 10px; }
/* Each community is a card: a house mark, the name, where your pin is (a pill), and a round check on the right. */
.community-picker__list .community-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 0.95rem; font-weight: 400; cursor: pointer; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.community-option::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: var(--kh-radius-lg); background: var(--kh-mist) var(--kh-icon-house) center / 22px no-repeat; }
.community-option:hover { border-color: var(--kh-muted); }
.community-option:has(input:checked) { background: var(--kh-secondary); border-color: var(--kh-midnight); box-shadow: inset 0 0 0 1px var(--kh-midnight); }
.community-option:has(input:checked)::before { background-color: #fff; }
.community-option input { order: 2; flex: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0 0 0 auto; appearance: none; -webkit-appearance: none; cursor: pointer; background: #fff; border: 1.5px solid var(--kh-stone); border-radius: 50%; transition: background-color 0.15s ease, border-color 0.15s ease; }
.community-option input::before { content: ""; width: 10px; height: 5px; margin-top: -2px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg); opacity: 0; }
.community-option input:checked { background: var(--kh-midnight); border-color: var(--kh-midnight); }
.community-option input:checked::before { opacity: 1; }
.community-option input:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.community-option__body { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.community-option__name { font-weight: 700; line-height: 1.3; }
.community-option__note { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 0.8rem; font-weight: 600; line-height: 1.5; color: var(--kh-muted); background: var(--kh-mist); border-radius: 999px; }
.community-option__note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.community-option--inside .community-option__note { color: var(--kh-open); background: var(--kh-open-soft); }
.community-option--near .community-option__note { color: var(--kh-warning); background: var(--kh-warning-soft); }
.community-option--far .community-option__note { color: var(--kh-warning); background: var(--kh-warning-soft); }
.community-picker__empty { margin-top: 8px; }

/* Editor: map pin (always shown, recommended). */
.map-pin { margin: 0; padding: 0; border: 0; min-width: 0; }
.map-pin legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.map-pin .field__help { margin: 0 0 6px; }
.map-pin .field-row { margin-top: 10px; }
.community-suggest { display: grid; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--kh-stone); }
.community-suggest__title { margin: 0; font-weight: 600; font-size: 0.92rem; }
.community-suggest .field__help { margin: 0; }
.community-suggest__status { font-size: 0.85rem; font-weight: 600; color: var(--kh-warning); }
.community-picker__list:empty { display: none; }

/* ==========================================================================
   Live bell + phone notifications (assets/js/updates.js, pwa.js)
   ========================================================================== */
.bell__count.is-pop { animation: kh-pop 0.4s ease; }
@keyframes kh-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bell__push { margin: 8px 4px 0; padding-top: 8px; border-top: 1px solid var(--kh-stone); }
.bell__push-button { width: 100%; }
.bell__push-hint { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--kh-muted); }
.bell__push-hint:first-child { margin-top: 0; }

/* Toast: something new from a favorite, while the page is open. */
.kh-toast { position: fixed; left: 50%; bottom: 20px; z-index: 1000; display: flex; align-items: flex-start; gap: 10px; width: min(420px, calc(100vw - 32px)); padding: 12px 16px; font-size: 0.92rem; line-height: 1.4; color: #fff; text-decoration: none; background: var(--kh-ink); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow-float); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.25s ease, transform 0.25s ease; }
.kh-toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.kh-toast:hover { color: #fff; }
.kh-toast__icon { flex: none; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .kh-toast, .bell__count.is-pop { transition: none; animation: none; } }

/* Account settings: notifications on this device. */
.push-setting { display: grid; justify-items: start; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kh-stone); }
.push-setting__title { margin: 0; font-weight: 600; }
.push-setting .field__help { margin: 0; }

/* Links to a part of a page (#today, #promo, #menu, #reviews…) stop below the
   sticky header, with some breathing room. The height is kept exact by
   assets/js/navigation.js; these are the starting values. */
:root { --kh-header-h: 70px; }
@media (max-width: 860px) { :root { --kh-header-h: 134px; } }
html { scroll-padding-top: calc(var(--kh-header-h) + 20px); }

/* Account settings: home location (assets/js/home-location.js). */
.home-location { display: grid; justify-items: start; gap: 6px; margin-top: 8px; padding: 14px 16px; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.home-location__title { margin: 0; font-weight: 600; }
.home-location .field__help { margin: 0; }
.home-location__status { margin: 0; font-size: 0.9rem; color: var(--kh-muted); }
.home-location__set { color: var(--kh-open); font-weight: 600; }
.home-location__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.home-location__remove { font-size: 0.9rem; color: var(--kh-danger); }
.home-location__remove { padding: 0; font: inherit; font-size: 0.9rem; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Bell: unread items stay marked until opened; "Mark all as read". */
.bell__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 8px; }
.bell__head .bell__title { margin: 0; }
.bell__all { padding: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--kh-midnight); background: none; border: 0; cursor: pointer; }
.bell__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-location__picker { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.home-location__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.home-location__tools .button { display: inline-flex; align-items: center; gap: 6px; }
.home-location__paste { flex: 1 1 220px; min-width: 0; padding: 8px 12px; font: inherit; font-size: 0.9rem; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.home-location__map { width: 100%; height: 300px; background: var(--kh-stone); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
@media (max-width: 640px) { .home-location__map { height: 260px; } }
.home-location .button-link { color: var(--kh-muted); }
.home-location .home-location__remove { color: var(--kh-danger); }

/* Business page: getting there (template-parts/getting-there.php). */
.getting-there { display: grid; gap: 10px; margin-top: 14px; padding: 16px; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.getting-there__distance { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 1rem; }
.getting-there__distance svg { flex: none; margin-top: 3px; color: var(--kh-midnight); }
.getting-there__note { font-size: 0.8rem; color: var(--kh-muted); }
.getting-there__times { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0 0 0 26px; list-style: none; font-size: 0.92rem; color: var(--kh-ink); }
.getting-there__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.getting-there__buttons .button { display: inline-flex; align-items: center; gap: 6px; }
.getting-there__modes { font-size: 0.9rem; color: var(--kh-muted); }
.getting-there__modes a { color: var(--kh-midnight); font-weight: 600; }
.getting-there__help { margin: 0; font-size: 0.8rem; color: var(--kh-muted); }
.getting-there__modes { display: inline-flex; gap: 6px; }
.getting-there__result { margin: 0; font-weight: 600; color: var(--kh-ink); }
.getting-there__back { padding: 0; font: inherit; font-size: 0.9rem; color: var(--kh-midnight); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.route-map { min-height: 320px; }

/* Business page map (OpenStreetMap, assets/js/route-map.js). */
div.listing__map { overflow: hidden; background: var(--kh-mist); }
.listing__map .leaflet-control-attribution { font-size: 10px; }
.listing__map-fallback { margin: 0; padding: 16px; }

/* Listing editor: drag-the-pin map (assets/js/pin-picker.js). */
.map-pin__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.map-pin__tools .button { display: inline-flex; align-items: center; gap: 6px; }
.map-pin__clear { padding: 0; font: inherit; font-size: 0.9rem; color: var(--kh-danger); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.map-pin__map { width: 100%; height: 320px; margin-top: 10px; background: var(--kh-stone); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
@media (max-width: 640px) { .map-pin__map { height: 260px; } }
.map-pin__status { margin-top: 6px; }
.map-pin .field-more { margin-top: 8px; }

/* Every map keeps its layers inside itself: Leaflet stacks its panes and
   controls at z-index 400–1000, which would otherwise paint over the sticky
   header (z-index 100) and the editor tabs while scrolling. */
.leaflet-container,
.listing__map,
.map-pin__map,
.home-location__map { position: relative; z-index: 0; isolation: isolate; }

/* ==========================================================================
   Business setup wizard (account/setup.php)
   ========================================================================== */
.setup-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: none; }
.setup-steps__item { flex: 1 1 0; min-width: 110px; }
.setup-steps__item > a,
.setup-steps__item > .setup-steps__num { text-decoration: none; }
.setup-steps__item > a,
.setup-steps__item:not(:has(a)) { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.9rem; font-weight: 600; color: var(--kh-muted); background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.setup-steps__item > a:hover { border-color: var(--kh-muted); color: var(--kh-ink); }
.setup-steps__num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; font-size: 0.8rem; font-weight: 700; color: var(--kh-muted); background: var(--kh-mist); border-radius: 50%; }
.setup-steps__item.is-current:not(:has(a)) { color: var(--kh-ink); border-color: var(--kh-midnight); box-shadow: inset 0 0 0 1px var(--kh-midnight); }
.setup-steps__item.is-current .setup-steps__num { color: #fff; background: var(--kh-midnight); }
.setup-steps__item.is-done .setup-steps__num { color: #fff; background: var(--kh-open); }
.setup-steps__item.is-done > a { color: var(--kh-ink); }
@media (max-width: 640px) {
	.setup-steps__item { min-width: 0; }
	.setup-steps__label { display: none; }
	.setup-steps__item.is-current .setup-steps__label { display: inline; }
	.setup-steps__item.is-current { flex: 3 1 auto; }
}
.setup__count { margin: 0 0 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.setup__sub { margin: 18px 0 0; font-size: 1rem; }
.setup__bar { display: flex; align-items: center; gap: 12px; }
.setup__spacer { flex: 1; }
.setup__skip { padding: 0; font: inherit; font-weight: 600; color: var(--kh-muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Review step */
.setup-review { display: grid; gap: 16px; }
.setup-review__photo { width: 220px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--kh-radius); }
.setup-review dl { display: grid; margin: 0; border-top: 1px solid var(--kh-stone); }
.setup-review__row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--kh-stone); }
.setup-review__row dt { font-weight: 600; color: var(--kh-muted); }
.setup-review__row dd { margin: 0; }
.setup-review__edit a { font-size: 0.9rem; font-weight: 600; }
.setup-review__none { color: var(--kh-muted); font-style: italic; }
.setup-review__hours { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.setup-review__hours span { display: inline-block; min-width: 92px; color: var(--kh-muted); }
@media (max-width: 640px) { .setup-review__row { grid-template-columns: minmax(0, 1fr) auto; } .setup-review__row dt { grid-column: 1 / -1; } }
.setup-review__next { margin-top: 16px; }

/* My account: "Do you own a business?" */
.own-business { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 28px; padding: 16px 18px; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.own-business__text { display: grid; gap: 2px; }
.own-business__text span { font-size: 0.92rem; color: var(--kh-muted); }

/* Join page, customer tab: what a member account adds. */
.auth__sub:has(+ .auth__perks) { margin-bottom: 12px; }
.auth__perks { display: grid; gap: 10px; margin: 0 0 22px; padding: 14px 16px; list-style: none; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.auth__perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; color: var(--kh-muted); }
.auth__perks strong { color: var(--kh-ink); }
.auth__perk-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; font-size: 0.9rem; color: var(--kh-heart); background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 50%; }
.auth__perks li:nth-child(3) .auth__perk-icon { color: var(--kh-star); }

/* Password fields: eye to show/hide, and "passwords match" (assets/js/password.js). */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 46px !important; }
.password-field__toggle { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--kh-muted); cursor: pointer; background: none; border: 0; border-radius: var(--kh-radius); transform: translateY(-50%); }
.password-field__toggle:hover,
.password-field__toggle[aria-pressed="true"] { color: var(--kh-ink); }
.password-field__toggle:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: -2px; }
.field__match { display: block; margin-top: 6px; font-size: 0.85rem; font-weight: 600; }
.field__match.is-ok { color: var(--kh-open); }
.field__match.is-error { color: var(--kh-danger); }
.kh-form input[aria-invalid="true"] { border-color: var(--kh-danger); }

/* Price lists: how long a service takes, and "Ask for a quote" (inc/menu.php, inc/offerings.php). */
.menu-item__duration { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--kh-midnight); }
.menu-item__duration::before { content: "⏱"; font-size: 0.8rem; }
.price-quote { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }

/* "Write a review": pill button that opens the form in a pop-up (assets/js/dialog.js). */
.review-cta--member { border-style: solid; background: var(--kh-surface); }
/* "Write a review": the Soft button (.button.button--secondary). */
.review-write { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--kh-on-secondary); cursor: pointer; background: var(--kh-secondary); border: 1px solid var(--kh-secondary); border-radius: var(--kh-radius); }
.review-write:hover { background: var(--kh-secondary-deep); border-color: var(--kh-secondary-deep); }
.review-write:active { transform: translateY(1px); }
.review-write:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.review-write svg { flex: none; }
.review-dialog { width: min(560px, calc(100% - 32px)); }
.review-dialog .kh-dialog__title svg { color: var(--kh-midnight); }
.review-dialog .notice { margin: 0; }
@media (max-width: 520px) {
	.review-cta--member .review-write { width: 100%; justify-content: center; }
}

/* Phones: every pop-up is a sheet from the bottom with a grab bar; drag it down to close (assets/js/sheet.js). */
.kh-sheet-grip { display: none; }
@media (max-width: 560px) {
	.kh-dialog,
	.menu-modal { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 92vh; margin: 0; border-radius: var(--kh-radius-xl) var(--kh-radius-xl) 0 0; transition: transform 0.18s ease-out; }
	.kh-dialog[open],
	.menu-modal[open] { animation: kh-sheet-in 0.22s ease-out; }
	.kh-dialog.is-dragging,
	.menu-modal.is-dragging { transition: none; }
	.kh-dialog .kh-form { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
	.kh-sheet-grip { position: sticky; top: 0; z-index: 3; display: block; height: 22px; margin-bottom: -10px; touch-action: none; cursor: grab; }
	.kh-sheet-grip::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; background: var(--kh-muted); border-radius: 999px; opacity: 0.4; transform: translateX(-50%); }
	.menu-modal > .kh-sheet-grip { position: absolute; left: 0; right: 0; margin: 0; }
	.menu-modal > .kh-sheet-grip::before { background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
	.kh-dialog__head { touch-action: none; }
	/* Inquiry, report and review sheets: ×, tapping outside and dragging down already close them,
	   so no Cancel; the main button runs the full width. */
	.kh-dialog__actions :is([data-dialog-close], [data-report-close]) { display: none; }
	.kh-dialog__actions .button[type="submit"] { flex: 1; justify-content: center; }
	/* Delete confirm: Cancel stays (the safe choice), both buttons share the width. */
	.kh-confirm { width: 100%; }
	.kh-confirm .kh-dialog__actions { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
	.kh-confirm .kh-dialog__actions .button { flex: 1; justify-content: center; }
}
@keyframes kh-sheet-in { from { transform: translateY(100%); } }

.owner-item__view { align-self: center; padding: 0 4px; font-size: 0.9rem; font-weight: 600; color: var(--kh-muted); }

/* Bell: grouped by day (Today, Yesterday, 10/15/26), the whole list scrolls (inc/updates.php). */
.bell__groups { max-height: 380px; margin: 0 -4px; padding: 0 4px; overflow-y: auto; overscroll-behavior: contain; }
.bell__groups .bell__list { max-height: none; overflow: visible; }
.bell__day { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 8px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); background: var(--kh-surface); }
.bell__day:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--kh-stone); padding-top: 10px; }
.bell__note { margin: 8px 4px 0; font-size: 0.72rem; color: var(--kh-muted); }
/* ==========================================================================
   Verified badge (inc/verification.php, account/badge.php, Account settings)
   ========================================================================== */
/* Bright blue, like the verified check people know from Facebook. */
.verified-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 0.35em; color: var(--kh-verified); vertical-align: -0.12em; line-height: 1; }
.verified-badge svg { flex: none; }
.verified-badge--page { margin-left: 14px; padding: 4px 11px 4px 6px; font-family: var(--kh-font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; text-shadow: none; vertical-align: 0.35em; background: var(--kh-secondary); border-radius: 999px; }
.business-card__title .verified-badge { position: relative; z-index: 1; }
.verify-pill { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 0.8rem; font-weight: 700; border-radius: 999px; background: var(--kh-mist); color: var(--kh-muted); white-space: nowrap; }
.verify-pill--ok { background: var(--kh-open-soft); color: var(--kh-open); }
.verify-pill--wait { background: var(--kh-warning-soft); color: var(--kh-warning); }
.verify-pill--fix { background: var(--kh-danger-soft); color: var(--kh-danger); }
.verify-status { display: grid; gap: 6px; margin-bottom: 24px; padding: 16px 18px; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.verify-status p { margin: 0; }
.verify-status .verify-pill { justify-self: start; }
.verify-status--fix { border-color: var(--kh-danger-line); }

/* ---------- Pay for Pro or a listing (account/pay.php, inc/billing.php) ---------- */
/* Where to send the money: one card per method, the QR on white so phones can scan it in dark mode too (Exceptions › QR codes). */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pay-method { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; text-align: center; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.pay-method__name { margin: 0; font-size: 1.05rem; }
.pay-method__qr { width: min(200px, 100%); height: auto; padding: 10px; background: #fff; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.pay-method__facts { display: grid; gap: 6px; width: 100%; margin: auto 0 0; font-size: 0.9rem; } /* At the bottom, so a card without a QR lines up with one that has it. */
.pay-method__facts > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--kh-stone); }
.pay-method__facts dt { color: var(--kh-muted); }
.pay-method__facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pay-method__number { font-variant-numeric: tabular-nums; user-select: all; } /* One tap selects the whole number to copy. */
.pay-method__amount { color: var(--kh-midnight); }
.pay-page__methods { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pay-page .doc-drop,
.ads-panel .doc-drop { max-width: 320px; }

/* Editor › Ads (template-parts/editor/ads.php): lengths, and an ad's poster, state, dates and numbers. */
.ad-lengths { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.photo-slots--poster .photo-slot { height: 105px; } /* 4:5, the poster's shape. */
/* The live preview: a placeholder card, the ad, a placeholder card; three across at every width, like a row of results. */
.business-grid.ad-preview__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.ad-preview__empty { display: grid; place-items: center; min-height: 180px; padding: 12px; font-size: 0.8rem; font-weight: 600; text-align: center; color: var(--kh-muted); background: var(--kh-mist); border: 1.5px dashed var(--kh-stone); border-radius: var(--kh-radius-lg); }

/* Dashboard › "Your ads": one card per ad, three across (kh_ad_tile()): the posters as the ad card shows them, then the details. */
.dash-ads { display: grid; gap: 14px; }
.dash-ads__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ad-tile { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.ad-tile__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--kh-mist); }
.ad-tile__body { display: grid; align-content: start; gap: 6px; padding: 12px 14px 14px; font-size: 0.9rem; }
.ad-tile__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } /* Name (or length) left, status pill right. */
.ad-tile__row .verify-pill { flex: none; }
.ad-tile__title { min-width: 0; font-weight: 700; color: var(--kh-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ad-tile__title:hover { text-decoration: underline; }
.ad-tile__title:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; border-radius: 2px; }
.ad-tile__meta { color: var(--kh-muted); }
.ad-tile__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--kh-stone); }
.ad-tile__stats dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.ad-tile__stats dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--kh-ink); }
.ad-tile__note { color: var(--kh-ink); } /* Editor › Ads: the team's note on an ad sent back or stopped. */
.ad-tile__actions { display: grid; justify-items: start; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--kh-stone); } /* "Cancel and get a refund" (before it starts). */
@media (max-width: 900px) { .dash-ads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verify-doc__req { font-size: 0.72rem; font-weight: 600; color: var(--kh-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.verify-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.verify-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.verify-list__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.verify-list__main .verified-badge { margin-left: -4px; }
.verify-list__note { flex-basis: 100%; font-size: 0.85rem; color: var(--kh-danger); }
/* Document cards on the badge page (assets/js/verify-docs.js). */
.verify-docs { display: grid; gap: 22px; }
@media (min-width: 720px) { .verify-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verify-doc { margin: 0; }
.verify-doc > .field__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 2.6em; }
.verify-doc__req.is-optional { font-weight: 600; }

/* Listing editor: hidden by the team after reports, with the proof form (account/edit.php). */
.editor-hidden { display: grid; gap: 14px; margin-bottom: 24px; }
.editor-hidden .notice { margin: 0; }
.editor-hidden__sent { margin: 0; font-size: 0.9rem; color: var(--kh-muted); }
.editor-hidden__form { display: grid; gap: 14px; max-width: 560px; }
.editor-hidden__form .field__label { display: flex; align-items: center; gap: 8px; }
.editor-hidden__form > .button { justify-self: start; }
.editor-hidden__form .doc-drop { max-width: 320px; } /* The badge page's size: 4:3 at full width is taller than the screen. */
.verify-doc .field__help a { white-space: nowrap; }
/* ---------- Photo fields (style guide: Form fields > Photo fields) ----------
   One look for every picture picker: cover and logo (.photo-field), profile photo
   (.photo-field--avatar), menu item photo (.menu-photo), review photos (.photo-slot)
   and verification documents (.doc-drop). Each variant only sets its size and shape. */
.photo-field__drop,
.doc-drop__zone,
.photo-slot,
.menu-photo { color: var(--kh-midnight); background: var(--kh-mist); border: 1.5px dashed var(--kh-stone); transition: border-color 0.15s ease, background-color 0.15s ease; }
.photo-field__drop:hover,
.photo-field__drop.is-dragging,
.doc-drop__zone:hover,
.doc-drop__zone.is-dragging,
.photo-slot--add:hover,
.photo-slots.is-dragging .photo-slot--add,
.menu-photo--add:hover { border-color: var(--kh-midnight); }
.photo-field__drop.is-dragging,
.doc-drop__zone.is-dragging,

.photo-field.is-set .photo-field__drop,
.doc-drop.is-set .doc-drop__zone,
.photo-slot.is-set,
.menu-photo--set { border-style: solid; }
.photo-field__input:focus-visible + .photo-field__drop,
.doc-drop__input:focus-visible + .doc-drop__zone,
.photo-slots__input:focus-visible ~ .photo-slot--add,
.menu-photo--add:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
/* Empty: icon, "Add a photo" in midnight, a hint underneath. */
.photo-field__empty,
.doc-drop__empty { display: grid; justify-items: center; gap: 6px; padding: 16px; font-size: 0.85rem; color: var(--kh-muted); }
.photo-field__empty svg,
.doc-drop__empty svg { color: var(--kh-midnight); }
.photo-field__empty strong,
.doc-drop__empty strong { font-size: 0.95rem; color: var(--kh-midnight); }
/* "Change": a dark pill that shows on hover or focus once a picture is set. */
.photo-field__change,
.doc-drop__change { position: absolute; bottom: 10px; left: 50%; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: #fff; white-space: nowrap; background: rgba(19, 23, 30, 0.75); border-radius: 999px; opacity: 0; transform: translateX(-50%); transition: opacity 0.15s ease; }
/* Remove: a small round × on the top-right corner. */
.photo-field__remove,
.menu-photo__remove,
.photo-slot__remove,
.doc-drop__clear { position: absolute; top: -9px; right: -9px; left: auto; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; font: inherit; font-size: 1rem; line-height: 1; color: var(--kh-ink); cursor: pointer; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 50%; box-shadow: var(--kh-shadow-control); }
.photo-field__remove:hover,
.menu-photo__remove:hover,
.photo-slot__remove:hover,
.doc-drop__clear:hover { color: var(--kh-danger); border-color: var(--kh-danger); }
.photo-field__remove:focus-visible,
.menu-photo__remove:focus-visible,
.photo-slot__remove:focus-visible,
.doc-drop__clear:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
/* Error under the field (photo pickers, and .field__error under any field, e.g. a taken phone number). */
.field__error,
.photo-field__error,
.photo-slots__error { margin: 8px 0 0; font-size: 0.85rem; color: var(--kh-danger); }
.photo-field__error[hidden] { display: none; }
.doc-drop { position: relative; }
.doc-drop__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.doc-drop__zone { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; text-align: center; cursor: pointer; border-radius: var(--kh-radius-lg); }
.doc-drop__preview { position: absolute; inset: 0; display: none; }
.doc-drop.is-set .doc-drop__preview { display: block; }
.doc-drop.is-set .doc-drop__empty { visibility: hidden; }
.doc-drop.is-set .doc-drop__zone { background: var(--kh-surface); }
.doc-drop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--kh-mist); }
.doc-drop__pdf { position: absolute; inset: 0 0 52px; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--kh-danger); }
.doc-drop__pdf b { font-size: 0.72rem; letter-spacing: 0.08em; }
.doc-drop__meta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 9px 12px; text-align: left; font-size: 0.8rem; color: var(--kh-muted); background: color-mix(in srgb, var(--kh-surface) 94%, transparent); border-top: 1px solid var(--kh-stone); }
.doc-drop__meta strong { overflow: hidden; font-size: 0.85rem; color: var(--kh-ink); white-space: nowrap; text-overflow: ellipsis; }
.doc-drop.is-sent:not(.is-new) [data-doc-state] { color: var(--kh-open); font-weight: 700; }
.doc-drop.is-sent:not(.is-new) [data-doc-state]::before { content: "✓ "; }
.doc-drop.is-new [data-doc-state] { color: var(--kh-midnight); font-weight: 600; }
.doc-drop__change { bottom: 62px; } /* Above the file name bar. */
.doc-drop.is-set .doc-drop__zone:hover .doc-drop__change,
.doc-drop.is-set .doc-drop__input:focus-visible + .doc-drop__zone .doc-drop__change { opacity: 1; }

.doc-drop__clear[hidden] { display: none; }

/* ==========================================================================
   Mobile home page (phones only; the desktop layout above is unchanged)
   ========================================================================== */
@media (max-width: 640px) {
	/* Hero: plain white, no animated street map (blocks/search/map.js doesn't start on phones). */
	.hero .kh-search.has-map .kh-search__bg { display: none; }
	.hero { background: var(--kh-surface); }

	/* "Find your kind of place": two rows of three (5 categories + View all), icon and name only, no slider. */
	.kh-slider .kh-slider__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; grid-auto-rows: 1fr; gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0; }
	.kh-slider .kh-slider__item:nth-child(n + 6):not(:last-child) { display: none; }
	.kh-slider .category-tile { gap: 6px; padding: 14px 4px 12px; border-radius: var(--kh-radius-lg); }
	.kh-slider .category-tile:hover { transform: none; }
	.kh-slider .category-tile__icon { width: 26px; height: 26px; margin: 0; }
	.kh-slider .category-tile__name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
	.kh-slider .category-tile__count { display: none; }

	/* Business cards everywhere (home, all businesses, categories, search, communities, favorites):
	   small and two to a row, like a food app: photo, name, ★ 4.5 · 1.2 km. */
	.business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.business-grid .business-card { border-radius: var(--kh-radius-lg); }
	.business-grid .business-card__media { aspect-ratio: 4 / 3; }
	.business-grid .business-card__monogram { font-size: 1.3rem; }
	.business-grid .business-card__body { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 0; padding: 10px 12px 12px; }
	.business-grid .business-card__title { flex-basis: 100%; overflow: hidden; font-size: 0.92rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
	.business-grid .business-card__title .verified-badge { margin-left: 3px; }
	.business-grid .business-card__meta,
	.business-grid .business-card__excerpt,
	.business-grid .business-card__community,
	.business-grid .business-card__where > span:first-child,
	.business-grid .rating-inline .stars,
	.business-grid .rating-inline__count { display: none; }
	.business-grid .rating-inline { gap: 0; font-size: 0.8rem; }
	.business-grid .rating-inline__avg::before { content: "★"; margin-right: 3px; color: var(--kh-star); }
	.business-grid .business-card__where { margin: 0 0 0 auto; padding: 0 0 0 8px; border: 0; font-size: 0.8rem; } /* Distance on the right, with or without a rating. */
	.business-grid .business-card__distance { font-weight: 500; color: var(--kh-muted); }
	.business-grid .business-card__distance-from { display: none; }
	.business-grid .save-button--card { top: 6px; right: 6px; width: 30px; height: 30px; }
	.business-grid .save-button--card svg { width: 15px; height: 15px; }
	.business-grid .card-badges { top: 6px; left: 6px; max-width: calc(100% - 44px); }
	.business-grid .card-badge { padding: 2px 7px; font-size: 0.64rem; }
	.business-grid .card-tags { --head: 7px; --tail: 5px; left: 6px; bottom: 6px; max-width: calc(100% - 12px); }
	.business-grid .card-tags__tag { font-size: 0.64rem; }
	.business-grid :is(.card-today, .card-deal) { padding-block: 2px; }
	.business-grid .business-card__match { flex-basis: 100%; margin-top: 2px; font-size: 0.72rem; -webkit-line-clamp: 1; line-clamp: 1; }

	/* Section titles, descriptions and notes are left out on phones (still there for screen readers). */
	.section__title,
	.section__sub,
	.section__note { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.section__head { min-height: 0; }
	.section__head:not(:has(.eyebrow, .section__more)) { margin-bottom: 0; }
	/* Except on a business page's "Also near you": without it the cards have no context. */
	.related-places .section__title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: 1.3rem; }
	.related-places .section__head { margin-bottom: 14px; }

	/* Section headings: "See all businesses" stays on the right, level with the text.
	   With the title hidden the label is usually alone, so the two are centred on one line. */
	.section__head { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 20px; }
	.section__head > :first-child { flex: 1; min-width: 0; }
	.section__head .eyebrow { margin-bottom: 0; }
	.section__more { flex: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
}

/* ==========================================================================
   Dark mode: the same palette tokens, darkened. Follows the device unless the
   visitor picked one with the header toggle (assets/js/theme.js).
   ========================================================================== */
:root[data-theme="dark"] {
	color-scheme: dark;
	--kh-paper: #0f1318;
	--kh-ink: #e8ebf0;
	--kh-midnight: #9dbcf5;
	--kh-mist: #171c23;
	--kh-stone: #2a313b;
	--kh-surface: #1a2028;
	--kh-muted: #9aa3ae;
	--kh-primary-deep: #bcd1f8;
	--kh-on-primary: #0f1318;
	--kh-open: #5cc48a;
	--kh-closed: #8a919c;
	--kh-danger: #f28b82;
	--kh-danger-deep: #f6a59e;
	--kh-on-danger: #0f1318;
	--kh-danger-soft: #2c1b1d;
	--kh-warning: #e3a548;
	--kh-warning-soft: #2a2317;
	--kh-warning-line: #5a4a24;
	--kh-danger-line: #5c3330;
	--kh-open-soft: #16281d;
	--kh-open-line: #2a5a3e;
	--kh-heart: #ff6b81;
	--kh-heart-soft: #2c1a20;
	--kh-heart-line: #5a2a34;
	--kh-promo: #ff8a96;
	--kh-star: #e8a33d;
	--kh-verified: #4d94ff;
	--kh-chart-1: #3987e5;
	--kh-chart-2: #d95926;
	--kh-chart-3: #199e70;
	--kh-chart-4: #c98500;
	--kh-chart-5: #d55181;
	--kh-chart-6: #008300;
	--kh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--kh-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
	--kh-shadow-control: 0 2px 6px rgba(0, 0, 0, 0.45);
	--kh-shadow-menu: 0 16px 40px rgba(0, 0, 0, 0.5);
	--kh-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.55);
	--kh-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--kh-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbcf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
	--kh-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbcf5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
	--kh-icon-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbcf5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
	--kh-secondary: #1e2939;
	--kh-secondary-deep: #26344a;
	--kh-on-secondary: #c9dafb;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--kh-paper: #0f1318;
		--kh-ink: #e8ebf0;
		--kh-midnight: #9dbcf5;
		--kh-mist: #171c23;
		--kh-stone: #2a313b;
		--kh-surface: #1a2028;
		--kh-muted: #9aa3ae;
		--kh-primary-deep: #bcd1f8;
		--kh-on-primary: #0f1318;
		--kh-open: #5cc48a;
		--kh-closed: #8a919c;
		--kh-danger: #f28b82;
		--kh-danger-deep: #f6a59e;
		--kh-on-danger: #0f1318;
		--kh-danger-soft: #2c1b1d;
		--kh-warning: #e3a548;
		--kh-warning-soft: #2a2317;
		--kh-warning-line: #5a4a24;
		--kh-danger-line: #5c3330;
		--kh-open-soft: #16281d;
		--kh-open-line: #2a5a3e;
		--kh-heart: #ff6b81;
		--kh-heart-soft: #2c1a20;
		--kh-heart-line: #5a2a34;
		--kh-promo: #ff8a96;
		--kh-star: #e8a33d;
		--kh-verified: #4d94ff;
		--kh-chart-1: #3987e5;
		--kh-chart-2: #d95926;
		--kh-chart-3: #199e70;
		--kh-chart-4: #c98500;
		--kh-chart-5: #d55181;
		--kh-chart-6: #008300;
		--kh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--kh-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
		--kh-shadow-control: 0 2px 6px rgba(0, 0, 0, 0.45);
		--kh-shadow-menu: 0 16px 40px rgba(0, 0, 0, 0.5);
		--kh-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.55);
		--kh-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		--kh-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbcf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
		--kh-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbcf5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
		--kh-icon-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbcf5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
		--kh-secondary: #1e2939;
		--kh-secondary-deep: #26344a;
		--kh-on-secondary: #c9dafb;
	}
}
/* The few hard-coded whites, made to follow the theme. */
:root[data-theme="dark"] .community-option:has(input:checked)::before,
:root[data-theme="dark"] .doc-drop.is-set .doc-drop__zone { background-color: var(--kh-surface); }
:root[data-theme="dark"] .save-button--card { background: rgba(26, 32, 40, 0.92); }
:root[data-theme="dark"] .leaflet-container { filter: brightness(0.85) contrast(1.05); }

/* The toggle: moon in light mode, sun in dark. */
.theme-toggle { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; color: var(--kh-ink); cursor: pointer; background: none; border: 0; border-radius: 50%; }
.theme-toggle:hover { background: var(--kh-mist); }
.theme-toggle:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.theme-toggle ~ .site-saved { margin-left: 0; }
.theme-toggle__sun,
.theme-toggle[aria-pressed="true"] .theme-toggle__moon { display: none; }
.theme-toggle[aria-pressed="true"] .theme-toggle__sun { display: block; }

/* Cards without a photo: the category icon and name, centered. */
.business-card__placeholder { display: grid; justify-items: center; gap: 8px; color: var(--kh-muted); text-align: center; }
.business-card__cat-icon { width: 40px; height: 40px; color: var(--kh-midnight); opacity: 0.7; }
.business-card__placeholder span { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 640px) {
	.business-grid .business-card__cat-icon { width: 30px; height: 30px; }
	.business-grid .business-card__placeholder { gap: 6px; }
	.business-grid .business-card__placeholder span { font-size: 0.72rem; }
}

/* ---------- Header shortcuts: ♥ + bell; on phones a bar fixed to the bottom (header.php) ---------- */
.site-actions { display: flex; align-items: center; margin-left: auto; }
.theme-toggle ~ .site-actions { margin-left: 0; }
.site-actions .site-saved { margin-left: 0; }
.site-actions ~ .site-nav,
.site-actions ~ .nav-toggle { margin-left: 0; }

/* ---------- Account menu: round photo or initials with a ▾ (header.php, navigation.js) ---------- */
.account-menu { position: relative; flex: none; }
.account-menu__button { position: relative; display: block; padding: 2px; list-style: none; cursor: pointer; border-radius: 50%; }
.account-menu__button::-webkit-details-marker { display: none; }
.account-menu__button:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.account-menu__avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; overflow: hidden; font-size: 0.85rem; font-weight: 700; color: var(--kh-on-secondary); background: var(--kh-secondary); border-radius: 50%; }
.account-menu__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu__button:hover .account-menu__avatar { filter: brightness(0.95); }
.account-menu__chevron { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 18px; height: 18px; color: var(--kh-ink); background: var(--kh-mist); border: 2px solid var(--kh-paper); border-radius: 50%; }
.account-menu__chevron svg { transition: transform 0.2s; }
.account-menu[open] .account-menu__chevron svg { transform: rotate(180deg); }
.account-menu__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 40;
	width: min(300px, calc(100vw - 24px));
	padding: 8px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-stone);
	border-radius: var(--kh-radius-lg);
	box-shadow: var(--kh-shadow-float);
}
.account-menu__who { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius); box-shadow: 0 1px 0 var(--kh-stone); }
.account-menu__name { display: grid; min-width: 0; line-height: 1.3; }
.account-menu__name strong,
.account-menu__name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__name small { font-size: 0.8rem; color: var(--kh-muted); }
.account-menu__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.account-menu__item,
.account-menu__nav a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--kh-ink); text-align: left; text-decoration: none; cursor: pointer; background: none; border: 0; border-radius: var(--kh-radius); }
.account-menu__item:hover,
.account-menu__nav a:hover { color: var(--kh-ink); background: var(--kh-mist); }
.account-menu__item svg { flex: none; box-sizing: content-box; padding: 7px; background: var(--kh-mist); border-radius: 50%; }
.account-menu__item:hover svg { background: var(--kh-stone); }
.account-menu__nav a { padding: 10px 8px; }
.account-menu__theme .theme-toggle__sun,
.account-menu__theme[aria-pressed="true"] .theme-toggle__moon { display: none; }
.account-menu__theme[aria-pressed="true"] .theme-toggle__sun { display: block; }
.account-menu__switch { position: relative; flex: none; width: 36px; height: 20px; margin-left: auto; background: var(--kh-stone); border-radius: 999px; transition: background 0.2s; }
.account-menu__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.account-menu__theme[aria-pressed="true"] .account-menu__switch { background: var(--kh-midnight); }
.account-menu__theme[aria-pressed="true"] .account-menu__switch::after { transform: translateX(16px); }
.account-menu__nav { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--kh-stone); }
.account-menu__logout { position: relative; margin-top: 9px; }
.account-menu__logout::before { content: ""; position: absolute; top: -5px; left: 8px; right: 8px; border-top: 1px solid var(--kh-stone); }

@media (max-width: 860px) {
	.account-menu__nav { display: block; }
}

/* Phones, every page: no bottom bar. The header holds it all on one line:
   guests: logo … ♥ ☰      members: logo … 🔔 photo ▾ (with ☰ before the logo on the dashboard).
   Home is the logo; members find Saved under Favorites in the dashboard. */
@media (max-width: 640px) {
	.site-actions { order: 2; margin: 0 0 0 auto; }
	body.logged-in .site-actions .site-saved { display: none; }
	.site-actions .bell__panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; max-height: min(70vh, 560px); overflow-y: auto; }
	.account-menu { order: 3; margin-left: 0; }
	.nav-toggle { order: 3; margin-left: 0; }
	.site-header__search { order: 4; }
}

/* ---------- Review photos (template-parts/reviews.php) ---------- */
.review__photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.review__photos a { display: block; overflow: hidden; border-radius: var(--kh-radius-lg); }
.review__photos img { width: 84px; height: 84px; object-fit: cover; transition: transform 0.2s ease; }
.review__photos a:hover img { transform: scale(1.05); }
/* Photo slots (review photos): the menu photo slot look, bigger. Dashed "+ Add photo", × on each photo. */
.photo-slots { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; border-radius: var(--kh-radius-lg); transition: background-color 0.15s ease; }

.photo-slots__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.photo-slot { position: relative; display: grid; flex: none; place-items: center; align-content: center; gap: 4px; width: 84px; height: 84px; margin: 0; font-size: 0.72rem; font-weight: 600; line-height: 1.2; text-align: center; border-radius: var(--kh-radius-lg); box-sizing: border-box; }
.photo-slot--add { cursor: pointer; }
.photo-slot.is-set img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; }
.photo-slots__error { margin: 0; }

/* Branch after a business name: "Kape Kanto (Muzon)", smaller and grey (kh_branch_html()). */
.branch-name { font-size: 0.72em; font-weight: 500; letter-spacing: 0; color: var(--kh-muted); white-space: nowrap; }
.listing-cover .branch-name { color: rgba(255, 255, 255, 0.75); }

/* ---------- Search results: "Show the closest places first?" (assets/js/locate-prompt.js) ---------- */
.locate-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; margin-top: 16px; padding: 16px 18px; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); animation: kh-locate-in 0.3s ease; }
@keyframes kh-locate-in { from { opacity: 0; transform: translateY(6px); } }
.locate-card__icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--kh-open); background: color-mix(in srgb, var(--kh-open) 12%, transparent); border-radius: 50%; }
.locate-card__body { min-width: 0; }
.locate-card__title { margin: 0 0 6px; font-family: var(--kh-font-display); font-size: 1rem; font-weight: 700; }
.locate-card__perks { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 0.9rem; }
.locate-card__perks li { display: flex; align-items: flex-start; gap: 8px; }
.locate-card__perks svg { flex: none; margin-top: 2px; color: var(--kh-open); }
.locate-card__privacy { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--kh-muted); }
.locate-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.locate-card--small { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 8px 12px; }
.locate-card--small .locate-card__icon { width: 30px; height: 30px; }
.locate-card--small .locate-card__icon svg { width: 17px; height: 17px; }
.locate-card__line { margin: 0; font-size: 0.9rem; }
.locate-card__link { padding: 0; font: inherit; font-weight: 600; color: var(--kh-midnight); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; }
.locate-card__close { padding: 0 4px; font-size: 1.3rem; line-height: 1; color: var(--kh-muted); cursor: pointer; background: none; border: 0; }
.locate-card__close:hover { color: var(--kh-ink); }
.locate-card--blocked .locate-card__icon { color: var(--kh-danger); background: color-mix(in srgb, var(--kh-danger) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .locate-card { animation: none; } }

/* ---------- Dashboards: /my-business/ (account/dashboard.php), /my-account/ (account/account.php); inc/dashboard.php ---------- */
/* Clean app-style pages: a sidebar on the left, soft white panels on a pale background. */
body:has(.dash-shell) { background: var(--kh-mist); }
body:has(.dash-shell) .site-footer { margin-top: 0; }

/* Alerts: the very top of the page, full width under the header, each with ×. */
.dash-alerts { display: grid; gap: 1px; background: var(--kh-stone); border-bottom: 1px solid var(--kh-stone); }
.dash-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px max(var(--kh-gutter), calc((100% - var(--kh-max)) / 2)); background: var(--kh-secondary); transition: opacity 0.2s, transform 0.2s; }
.dash-alert--warn { background: var(--kh-warning-soft); }
.dash-alert--info { background: var(--kh-open-soft); }
.dash-alert.is-leaving { opacity: 0; transform: translateY(-4px); }
.dash-alert__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; font-size: 1rem; background: var(--kh-surface); border-radius: 50%; }
.dash-alert__text { display: flex; flex: 1 1 280px; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 0.92rem; color: var(--kh-muted); }
.dash-alert__text strong { color: var(--kh-ink); }
.dash-alert__from { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-midnight); }
.dash-alert__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dash-alert__close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--kh-muted); cursor: pointer; background: none; border: 0; border-radius: 50%; }
.dash-alert__close:hover { color: var(--kh-ink); background: rgba(19, 23, 30, 0.08); }
@media (prefers-color-scheme: dark) {
}

/* The shell. */
.dash-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; gap: 28px; padding-block: 28px 56px; }
.dash-sidebar { position: sticky; top: calc(var(--kh-header-h, 70px) + 16px); padding: 18px 12px; background: var(--kh-surface); border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow-panel); }
.dash-sidebar__title { margin: 0 12px 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }
.dash-nav { display: grid; gap: 4px; }
.dash-nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 0.92rem; font-weight: 500; color: var(--kh-muted); text-decoration: none; border-radius: var(--kh-radius-lg); transition: background-color 0.15s, color 0.15s; }
.dash-nav__item svg { flex: none; }
.dash-nav__item:hover { color: var(--kh-ink); background: var(--kh-mist); }
.dash-nav__item.is-active { color: var(--kh-on-primary); background: var(--kh-midnight); }
.dash-nav__count { margin-left: auto; min-width: 22px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700; text-align: center; color: var(--kh-muted); background: var(--kh-mist); border-radius: 999px; }
.dash-nav__item.is-active .dash-nav__count { color: var(--kh-midnight); background: var(--kh-on-primary); }
.dash-content { display: grid; gap: 20px; min-width: 0; }
.dash-content > .notice { margin: 0; }

/* Page heading. */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.dash-head__title { margin: 0; font-size: clamp(1.45rem, 3vw, 1.85rem); color: var(--kh-ink); }
.dash-head__sub { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; font-size: 0.92rem; color: var(--kh-muted); }
.dash-head__ok { font-weight: 600; color: var(--kh-open); }
.dash-head__ok::before { content: "✓ "; }
.dash-head__warn { font-weight: 600; color: var(--kh-warning); }

/* Panels. */
.dash-panel { min-width: 0; padding: 22px; background: var(--kh-surface); border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow-panel); }
.dash-panel--flush { padding: 6px 0; }
.dash-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-panel__title { margin: 0; font-size: 1.05rem; }
.dash-panel > .dash-panel__title { margin-bottom: 14px; }
.dash-panel__sub { margin: 3px 0 0; font-size: 0.85rem; color: var(--kh-muted); }
.dash-panel__link { flex: none; font-size: 0.85rem; font-weight: 600; }
.dash-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dash-row--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row--single { grid-template-columns: minmax(0, 1fr); }
.dash-perf { margin-bottom: 20px; }
@media (max-width: 1240px) {
	.dash-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dash-row--3 > .dash-score { grid-column: 1 / -1; }
}
.dash-empty { margin: 0; font-size: 0.92rem; color: var(--kh-muted); }

/* Stats strip: one panel, numbers side by side with a line between. */
.stat-strip { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: 22px 8px; background: var(--kh-surface); border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow-panel); }
.stat-strip__item { display: flex; align-items: center; gap: 14px; padding: 4px 18px; border-left: 1px solid var(--kh-stone); }
.stat-strip__item:first-child { border-left: 0; }
.stat-strip__icon { display: grid; flex: none; place-items: center; width: 52px; height: 52px; color: var(--kh-open); background: color-mix(in srgb, var(--kh-open) 12%, transparent); border-radius: 50%; }
.stat-strip__icon svg { width: 24px; height: 24px; }
.stat-strip__icon--fav { color: var(--kh-heart); background: color-mix(in srgb, var(--kh-heart) 12%, transparent); }
.stat-strip__icon--star { color: var(--kh-star); background: color-mix(in srgb, var(--kh-star) 14%, transparent); }
.stat-strip__icon--bell,
.stat-strip__icon--inquiry { color: var(--kh-midnight); background: var(--kh-secondary); }
.stat-strip__text { display: grid; min-width: 0; }
.stat-strip__label { font-size: 0.8rem; color: var(--kh-muted); }
.stat-strip__value { font-family: var(--kh-font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-strip__diff { font-size: 0.72rem; color: var(--kh-muted); }
.stat-strip__diff b { font-weight: 700; }
.stat-strip__diff--up b { color: var(--kh-open); }
.stat-strip__diff--down b { color: var(--kh-danger); }
/* A Pro stat on a Free account: a lock, opens the Go Pro pop-up. */
.stat-strip__item--locked { margin: 0; font: inherit; text-align: left; color: inherit; background: none; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; cursor: pointer; }
.stat-strip__item--locked .stat-strip__icon { color: var(--kh-muted); background: var(--kh-mist); }
.stat-strip__value--locked { display: flex; align-items: center; height: 2rem; color: var(--kh-muted); }
.stat-strip__value--locked svg { width: 22px; height: 22px; }
.stat-strip__item--locked .stat-strip__diff { font-weight: 600; color: var(--kh-midnight); }
/* "Pro" next to something Free accounts don't get: locked stat tiles, the chart's stat menu (assets/js/dropdown.js data-pro). */
.pro-badge { display: inline-block; padding: 1px 7px; font-size: 0.64rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: var(--kh-midnight); vertical-align: 0.1em; background: var(--kh-secondary-deep); border-radius: 999px; }
.filter-dd__option .pro-badge { margin-left: 2px; }
.stat-strip__item--locked:hover .stat-strip__diff { text-decoration: underline; }
.stat-strip__item--locked:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; border-radius: var(--kh-radius); }

/* Chart. */
/* ---------- Overview > Performance chart (assets/js/dash-chart.js; style guide: Charts) ---------- */
.kh-series-0 { fill: var(--kh-closed); background: var(--kh-closed); } /* "Other" */
.kh-series-1 { fill: var(--kh-chart-1); background: var(--kh-chart-1); }
.kh-series-2 { fill: var(--kh-chart-2); background: var(--kh-chart-2); }
.kh-series-3 { fill: var(--kh-chart-3); background: var(--kh-chart-3); }
.kh-series-4 { fill: var(--kh-chart-4); background: var(--kh-chart-4); }
.kh-series-5 { fill: var(--kh-chart-5); background: var(--kh-chart-5); }
.kh-series-6 { fill: var(--kh-chart-6); background: var(--kh-chart-6); }
.dash-perf__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.dash-perf__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.dash-perf__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; }
.dash-perf__total { display: flex; align-items: baseline; gap: 6px; }
.dash-perf__value { font-family: var(--kh-font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.dash-perf__unit { font-size: 0.95rem; color: var(--kh-muted); }
.dash-perf__delta { font-size: 0.85rem; font-weight: 600; }
.dash-perf__delta.is-up,
.dash-perf__row-change.is-up { color: var(--kh-open); }
.dash-perf__delta.is-down,
.dash-perf__row-change.is-down { color: var(--kh-danger); }
.dash-perf__delta.is-same,
.dash-perf__row-change.is-same { color: var(--kh-muted); }
.dash-perf__facts { display: flex; flex-wrap: wrap; gap: 4px 20px; width: 100%; margin: 0; font-size: 0.85rem; }
.dash-perf__facts div { display: flex; gap: 6px; }
.dash-perf__facts dt { color: var(--kh-muted); }
.dash-perf__facts dd { margin: 0; font-weight: 600; }
.dash-perf__plot { position: relative; }
/* Free account, Pro stat picked: made-up numbers under a blur, and the lock box (inc/plans.php). */
.dash-perf.is-locked .dash-perf__summary,
.dash-perf.is-locked .dash-perf__svg,
.dash-perf.is-locked .dash-perf__biz { filter: blur(6px); opacity: 0.55; pointer-events: none; user-select: none; }
.dash-perf.is-locked .dash-perf__tip { display: none; }
.dash-perf__lock { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; justify-items: center; gap: 6px; width: min(340px, calc(100% - 24px)); padding: 20px; text-align: center; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow-float); transform: translate(-50%, -50%); }
.dash-perf__lock[hidden] { display: none; }
.dash-perf__lock-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--kh-midnight); background: var(--kh-secondary); border-radius: 50%; }
.dash-perf__lock-title { margin: 4px 0 0; font-family: var(--kh-font-display); font-size: 1.05rem; font-weight: 700; }
.dash-perf__lock-text { margin: 0 0 8px; font-size: 0.85rem; color: var(--kh-muted); }
.dash-perf__svg { display: block; width: 100%; overflow: visible; border-radius: var(--kh-radius); touch-action: pan-y; }
.dash-perf__svg:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 4px; }
.dash-perf__grid { stroke: var(--kh-stone); stroke-width: 1; shape-rendering: crispEdges; }
.dash-perf__grid.is-base { stroke: color-mix(in srgb, var(--kh-ink) 20%, var(--kh-stone)); }
.dash-perf__tick { font-size: 0.72rem; fill: var(--kh-muted); font-variant-numeric: tabular-nums; }
.dash-perf__band { fill: var(--kh-mist); opacity: 0; transition: opacity 0.15s ease; }
.dash-perf__band.is-on { opacity: 1; }
.dash-perf__empty { fill: var(--kh-stone); }
/* The day's total above its column (today's, or the hovered day). */
.dash-perf__col-total { font-size: 0.72rem; font-weight: 700; fill: var(--kh-ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.dash-perf__legend-note { flex-basis: 100%; }
.dash-perf__tip { position: absolute; z-index: 5; min-width: 150px; max-width: 240px; padding: 10px 12px; font-size: 0.85rem; pointer-events: none; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow-menu); }
.dash-perf__tip[hidden] { display: none; }
.dash-perf__tip-date { margin: 0; font-size: 0.8rem; color: var(--kh-muted); }
.dash-perf__tip-total { margin: 2px 0 0; color: var(--kh-muted); }
.dash-perf__tip-total strong { font-size: 1.05rem; color: var(--kh-ink); }
.dash-perf__tip-list { display: grid; gap: 3px; margin: 8px 0 0; padding: 8px 0 0; list-style: none; border-top: 1px solid var(--kh-stone); }
.dash-perf__tip-list li { display: flex; align-items: center; gap: 6px; }
.dash-perf__tip-name { overflow: hidden; color: var(--kh-muted); white-space: nowrap; text-overflow: ellipsis; }
/* Identity keys: a short line in the tooltip, a square in the legend and the list. */
.dash-perf__key { flex: none; display: inline-block; width: 12px; height: 3px; border-radius: 999px; }
.dash-perf__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.85rem; color: var(--kh-muted); }
.dash-perf__legend[hidden] { display: none; }
.dash-perf__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dash-perf__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* Income panel (template-parts/dashboard/income.php): the totals, then a column per month in CSS (came in, refunded). */
.income__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 18px; }
.income__totals > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.income__totals dt { font-size: 0.8rem; color: var(--kh-muted); }
.income__totals dd { margin: 0; }
.income__big { font-family: var(--kh-font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.income__diff { font-size: 0.72rem; color: var(--kh-muted); }
.income__diff b { font-weight: 700; }
.income__diff--up b { color: var(--kh-open); }
.income__diff--down b { color: var(--kh-danger); }
.income__chart { display: grid; gap: 6px; }
.income__max { font-size: 0.72rem; color: var(--kh-muted); font-variant-numeric: tabular-nums; }
.income__plot,
.income__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* The lines (SVG, stretched to the plot) under a row of hover columns that hold the dots. Came in: green with a soft fill; refunded: red, dashed. */
.income__plot { position: relative; isolation: isolate; height: 160px; background: linear-gradient(var(--kh-stone), var(--kh-stone)) 0 50% / 100% 1px no-repeat; border-top: 1px dashed var(--kh-stone); border-bottom: 1px solid var(--kh-stone); }
.income__lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.income__area { fill: var(--kh-open); fill-opacity: 0.14; }
.income__line { fill: none; stroke: var(--kh-open); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.income__line--out { stroke: var(--kh-danger); stroke-width: 2; stroke-dasharray: 5 4; }
.income__col { position: relative; min-width: 0; border-radius: var(--kh-radius) var(--kh-radius) 0 0; }
.income__col:hover { background: var(--kh-mist); }
.income__dot { position: absolute; top: var(--y); left: 50%; z-index: 2; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--kh-surface); border: 2px solid var(--kh-open); border-radius: 50%; transition: transform 0.15s ease-out; }
.income__dot--out { border-color: var(--kh-danger); }
.income__col:hover .income__dot { transform: scale(1.4); }
.income__months { font-size: 0.72rem; color: var(--kh-muted); text-align: center; }
/* Legend: a short line in each series' colour and style. */
.income__swatch { width: 16px; height: 0; border-top: 3px solid var(--kh-open); border-radius: 0; }
.income__swatch--out { border-top: 2px dashed var(--kh-danger); }
@media (prefers-reduced-motion: reduce) { .income__dot { transition: none; } }
@media (max-width: 560px) {
	.income__totals { grid-template-columns: 1fr 1fr; }
	.income__totals > div:first-child { grid-column: 1 / -1; }
	.income__dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
	.income__months span:nth-child(even) { visibility: hidden; } /* Every other month on phones. */
}
.dash-perf__biz:not(:empty) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kh-stone); }
.dash-perf__biz .eyebrow { margin: 0 0 8px; }
/* One set of columns for every row (subgrid): the bars line up whatever the numbers' widths. */
.dash-perf__rows { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto auto; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.dash-perf__row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: 6px 0; font-size: 0.9rem; transition: opacity 0.15s ease; }
.dash-perf__row.is-dim { opacity: 0.45; }
.dash-perf__row-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--kh-ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.dash-perf__row-name:hover { color: var(--kh-midnight); text-decoration: underline; }
.dash-perf__row-name .dash-perf__key { width: 10px; height: 10px; border-radius: 3px; }
.dash-perf__share { height: 6px; overflow: hidden; background: var(--kh-mist); border-radius: 999px; }
.dash-perf__share-fill { display: block; height: 100%; border-radius: 999px; }
.dash-perf__row-value { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-perf__row-value span { color: var(--kh-muted); }
.dash-perf__row-change { font-size: 0.85rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
	.dash-perf__value { font-size: 1.75rem; }
	.dash-perf__rows { grid-template-columns: minmax(0, 1fr) auto auto; }
	.dash-perf__share { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.dash-perf__band,
	.dash-perf__row { transition: none; }
}

/* Rating card (like the "4.8" card in the reference). */
.dash-score { display: grid; align-content: start; gap: 4px; }
.dash-score__value { margin: 8px 0 0; font-family: var(--kh-font-display); font-size: 3rem; font-weight: 500; line-height: 1; }
.dash-score__line { width: 100%; margin: 14px 0 10px; border: 0; border-top: 1px solid var(--kh-stone); }
.dash-score__fav { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9rem; }
.dash-score__fav svg { flex: none; color: var(--kh-heart); }

/* Mini lists (latest inquiries). */
.dash-mini { display: grid; margin: 0 -10px; padding: 0; list-style: none; }
.dash-mini a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 10px; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius-lg); }
.dash-mini a:hover { color: var(--kh-ink); background: var(--kh-mist); }
.dash-mini strong { font-size: 0.92rem; }
.dash-mini span { grid-column: 1; overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; color: var(--kh-muted); }
.dash-mini time { grid-column: 2; grid-row: 1; font-size: 0.8rem; color: var(--kh-muted); }

/* Reviews. */
.dash-reviews { display: grid; margin: 0; padding: 0; list-style: none; }
.dash-review { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--kh-stone); }
.dash-review:first-child { border-top: 0; padding-top: 0; }
.dash-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.92rem; }
.dash-review__when { margin-left: auto; font-size: 0.8rem; color: var(--kh-muted); }
.dash-review__text { margin: 0; font-size: 0.9rem; color: var(--kh-muted); }
.dash-review__reply { justify-self: start; font-size: 0.85rem; font-weight: 600; }
.dash-review__done { font-size: 0.8rem; font-weight: 600; color: var(--kh-open); }
.dash-panel--reviews .dashboard__block { margin: 0; }
.dash-panel--reviews .owner-list { margin-bottom: 0; }
.dash-panel--reviews .section__head { align-items: baseline; min-height: 0; margin-bottom: 14px; }
.dash-panel--reviews .section__title { margin: 0; font-size: 1.05rem; }
.dash-panel--reviews .section__sub { margin: 2px 0 0; font-size: 0.85rem; }
.dash-panel--reviews .section__head .button { display: none; }
.dash-panel--reviews .empty-state { padding: 24px 16px; }
.dash-panel--reviews .empty-state h2 { font-size: 1.05rem; }

/* What listings still need. */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.todo-card { padding: 14px; background: var(--kh-mist); border-radius: var(--kh-radius-lg); }
.todo__biz { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; }
.todo { display: grid; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.todo a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 0.9rem; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius); }
.todo a:hover { color: var(--kh-ink); background: var(--kh-surface); }
.todo__dot { flex: none; width: 15px; height: 15px; border: 2px dashed var(--kh-muted); border-radius: 50%; opacity: 0.6; }
.todo__more { margin: 12px 0 0; font-size: 0.8rem; color: var(--kh-muted); }

/* Table (businesses), like the "All customers" table in the reference. */
.dash-table { display: grid; }
.dash-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 110px 80px 104px; align-items: center; gap: 12px; padding: 14px 22px; font-size: 0.9rem; border-top: 1px solid var(--kh-stone); }
.dash-table__row--head { padding-block: 12px; font-size: 0.8rem; font-weight: 600; color: var(--kh-muted); border-top: 0; }
.dash-biz { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-biz__media { display: grid; flex: none; place-items: center; width: 44px; height: 44px; overflow: hidden; font-size: 0.8rem; font-weight: 700; color: var(--kh-midnight); background: var(--kh-mist); border-radius: var(--kh-radius-lg); }
.dash-biz__media img { width: 100%; height: 100%; object-fit: cover; }
.dash-biz__icon { width: 22px; height: 22px; opacity: 0.75; }
.dash-biz__text { display: grid; min-width: 0; }
.dash-biz__name { display: block; overflow: hidden; font-weight: 600; color: var(--kh-ink); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.dash-biz__name:hover { color: var(--kh-ink); text-decoration: underline; }
.dash-biz__meta { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; color: var(--kh-muted); }
.dash-pct { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dash-pct__bar { width: 56px; height: 6px; overflow: hidden; background: var(--kh-mist); border-radius: 999px; }
.dash-pct__bar span { display: block; height: 100%; background: var(--kh-open); }
.pill { display: inline-block; padding: 3px 10px; font-size: 0.72rem; font-weight: 600; border: 1px solid; border-radius: var(--kh-radius); }
.pill--live { color: var(--kh-open); background: var(--kh-open-soft); border-color: var(--kh-open-line); }
.pill--waiting { color: var(--kh-warning); background: var(--kh-warning-soft); border-color: var(--kh-warning-line); }
.pill--hidden { color: var(--kh-danger); background: var(--kh-danger-soft); border-color: color-mix(in srgb, var(--kh-danger) 40%, var(--kh-surface)); }
.dash-table__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dash-more > summary { list-style: none; }
.dash-more__button { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.05rem; color: var(--kh-muted); cursor: pointer; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.dash-more__button::-webkit-details-marker { display: none; }
.dash-more__button:hover { color: var(--kh-ink); border-color: var(--kh-ink); }
.dash-more__menu { display: grid; gap: 2px; width: 220px; padding: 6px; }
.dash-more__menu a,
.dash-more__menu button { display: block; width: 100%; padding: 8px 10px; font: inherit; font-size: 0.9rem; color: var(--kh-ink); text-align: left; text-decoration: none; cursor: pointer; background: none; border: 0; border-radius: var(--kh-radius); }
.dash-more__menu a:hover,
.dash-more__menu button:hover { color: var(--kh-ink); background: var(--kh-mist); }
.dash-more__delete { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--kh-stone); }
.dash-more__delete button { color: var(--kh-danger); }

/* Favorites (member). */
.dash-places { display: grid; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.dash-places--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; }
.dash-place { display: flex; align-items: flex-start; gap: 12px; padding: 8px; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius-lg); }
.dash-place:hover { color: var(--kh-ink); background: var(--kh-mist); }
.dash-place__media { display: grid; flex: none; place-items: center; width: 48px; height: 48px; overflow: hidden; font-size: 0.8rem; font-weight: 700; color: var(--kh-midnight); background: var(--kh-mist); border-radius: var(--kh-radius-lg); }
.dash-place__media img { width: 100%; height: 100%; object-fit: cover; }
.dash-place__icon { width: 24px; height: 24px; opacity: 0.75; }
.dash-place__text { display: grid; gap: 2px; min-width: 0; }
.dash-place__text strong { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.dash-place__text > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--kh-muted); }
/* One-line rows (manage overview, Newest businesses): photo, name, owner, date. */
.dash-places--rows .dash-place { align-items: center; gap: 12px; }
.dash-places--rows .dash-biz__media { width: 36px; height: 36px; border-radius: var(--kh-radius); }
.dash-places--rows .dash-place__name { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.dash-places--rows .dash-place__owner { flex: none; max-width: 30%; overflow: hidden; font-size: 0.8rem; color: var(--kh-muted); text-overflow: ellipsis; white-space: nowrap; }
.dash-places--rows .dash-place__date { flex: none; min-width: 3.5em; font-size: 0.8rem; color: var(--kh-muted); text-align: right; font-variant-numeric: tabular-nums; }
.dash-places--rows .dash-place__name + * { margin-left: auto; } /* Owner (or the date, when there is none) goes to the right. */
@media (max-width: 640px) {
	.dash-places--rows .dash-place__owner { display: none; }
	.dash-places--rows .dash-place__date { margin-left: auto; }
}

/* "Do you own a business?" */
.dash-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.dash-cta__icon { display: grid; flex: none; place-items: center; width: 52px; height: 52px; color: var(--kh-midnight); background: var(--kh-secondary); border-radius: var(--kh-radius-lg); }
.dash-cta__text { flex: 1 1 260px; min-width: 0; }

/* Dark mode: the panels sit on the darker page. */
@media (prefers-color-scheme: dark) {
}

@media (max-width: 960px) {
	.dash-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
	.dash-row,
	.dash-row--wide,
	.dash-row--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; padding: 16px 4px; }
	.stat-strip__item { padding: 0 12px; }
	.stat-strip__item:nth-child(odd) { border-left: 0; }
	.stat-strip__icon { width: 40px; height: 40px; }
	.stat-strip__icon svg { width: 20px; height: 20px; }
	.stat-strip__value { font-size: 1.3rem; }
	.dash-panel { padding: 16px; }
	.dash-pct__bar { display: none; } /* Just the "86%" on phones. */
}
@media (max-width: 1240px) {
	/* Stats: 2 × 2. */
	.stat-strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
	.stat-strip__item:nth-child(odd) { border-left: 0; }
}

/* Footer always at the bottom of the screen, even on short pages. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.site-main { flex: 1 0 auto; }
.site-header,
.site-footer { flex: none; }

/* Alert actions are links, not buttons: it's only a notification. */
.dash-alert__link { padding: 4px 2px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--kh-midnight); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; }
.dash-alert__link:hover { color: var(--kh-primary-deep); text-decoration-thickness: 2px; }
.dash-alert__actions form { margin: 0; }

/* Sidebar groups. */
.dash-sidebar__title { margin: 14px 12px 6px; }
.dash-nav > .dash-sidebar__title:first-child { margin-top: 0; }
.dash-sidebar__gap { display: block; height: 1px; margin: 10px 12px; background: var(--kh-stone); }

/* Collapse button: the last item in the sidebar (desktop only; inc/dashboard.php, assets/js/dashboard.js). */
.dash-sidebar__collapse { width: 100%; font: inherit; font-size: 0.92rem; font-weight: 500; text-align: left; cursor: pointer; background: none; border: 0; }
.dash-sidebar__collapse[hidden] { display: none; }
.dash-sidebar__collapse:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.dash-sidebar__collapse svg { transition: transform 0.2s ease; }
@media (min-width: 961px) {
	.dash-shell { transition: grid-template-columns 0.2s ease; }
	/* Icons only. Names stay for screen readers and show on hover (title). */
	.dash-shell.is-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
	.dash-shell.is-collapsed .dash-sidebar { padding: 18px 10px; }
	.dash-shell.is-collapsed .dash-nav__item { position: relative; justify-content: center; padding: 10px; }
	.dash-shell.is-collapsed .dash-nav__item > span:not(.dash-nav__count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.dash-shell.is-collapsed .dash-nav__count { position: absolute; top: 2px; right: 2px; min-width: 18px; margin: 0; padding: 0 5px; font-size: 0.64rem; line-height: 16px; color: var(--kh-on-primary); background: var(--kh-midnight); }
	.dash-shell.is-collapsed .dash-nav__item.is-active .dash-nav__count { color: var(--kh-midnight); background: var(--kh-on-primary); box-shadow: 0 0 0 2px var(--kh-midnight); }
	/* Group headings become plain dividers. */
	.dash-shell.is-collapsed .dash-sidebar__title { height: 1px; margin: 10px 6px; overflow: hidden; font-size: 0; background: var(--kh-stone); }
	.dash-shell.is-collapsed .dash-nav > .dash-sidebar__title:first-child { display: none; }
	.dash-shell.is-collapsed .dash-sidebar__gap { margin: 10px 6px; }
	.dash-shell.is-collapsed .dash-sidebar__collapse svg { transform: scaleX(-1); }
}
@media (max-width: 960px) {
	/* Phones and tablets: the sidebar is a slide-in menu, so no collapsing. */
	.dash-sidebar__collapse,
	.dash-sidebar__collapse-gap { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.dash-shell,
	.dash-sidebar__collapse svg { transition: none; }
}
.dash-content > .dash-panel.settings { padding: 12px 22px 0; }

/* ---------- Dashboard on phones and tablets: ☰ left of the logo opens the sidebar over the page ---------- */
.dash-menu-toggle,
.dash-sidebar__top,
.dash-backdrop { display: none; }
@media (max-width: 960px) {
	.dash-menu-toggle { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; color: var(--kh-ink); cursor: pointer; background: none; border: 0; border-radius: var(--kh-radius-lg); }
	.dash-menu-toggle:hover { background: var(--kh-mist); }
	.dash-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 300; display: flex; flex-direction: column; width: min(320px, 86vw); padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; border-radius: 0 var(--kh-radius-xl) var(--kh-radius-xl) 0; box-shadow: var(--kh-shadow-float); visibility: hidden; transform: translateX(-100%); transition: transform 0.25s ease, visibility 0s linear 0.25s; }
	.dash-sidebar.is-open { visibility: visible; transform: none; transition: transform 0.25s ease; }
	.dash-sidebar__top { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 16px 12px; }
	.dash-sidebar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--kh-font-display); font-size: 1.05rem; font-weight: 700; }
	.dash-sidebar__brand svg { width: 28px; height: 28px; }
	.dash-sidebar__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 1.5rem; line-height: 1; color: var(--kh-muted); cursor: pointer; background: var(--kh-mist); border: 0; border-radius: 50%; }
	.dash-sidebar__close:hover { color: var(--kh-ink); }
	.dash-nav__item { padding: 12px; }
	.dash-backdrop { position: fixed; inset: 0; z-index: 299; display: block; background: rgba(14, 22, 36, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
	.dash-backdrop.is-open { opacity: 1; pointer-events: auto; }
	html.dash-menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.dash-sidebar,
	.dash-backdrop { transition: none; }
}

@media (max-width: 640px) {
	.dash-sidebar { width: 70%; border-radius: 0; }
}

/* Favorites "Clear all": the same pill as "Share list", red on hover. */
.saved__clear:hover { color: var(--kh-danger); border-color: var(--kh-danger); }
.saved__actions .confirm__panel { right: 0; }
.dash-favs__bar { margin-bottom: 16px; }

/* My reviews table: place, rating, date, status, Edit. */
.dash-table--reviews .dash-table__row { grid-template-columns: minmax(0, 1fr) 100px 110px 100px 70px; }

/* Businesses table: long names shorten with …, the Verified badge stays right after. */
.dash-biz__title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dash-biz__title .dash-biz__name { min-width: 0; }
.dash-biz__title > :not(.dash-biz__name) { flex: none; }

/* Reviews of your places: Reply / "You replied" on the right of each review, like a row action. */
.dash-review { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.dash-review > :not(.dash-review__action) { grid-column: 1; }
.dash-review__action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dash-review__reply { display: inline-flex; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; text-decoration: none; border: 1px solid var(--kh-stone); border-radius: 999px; }
.dash-review__reply:hover { border-color: var(--kh-midnight); }
.dash-review__done { white-space: nowrap; }

/* Menu sizes on the right, under each other, like a single price ("8 oz ₱90"). */
.menu-item__price--sizes { display: grid; justify-items: end; gap: 3px; }
.menu-item__price--sizes .menu-size { gap: 8px; padding: 0; font-size: 0.9rem; background: none; border: 0; border-radius: 0; }
.menu-item__price--sizes .menu-size__label { font-size: 0.8rem; }

/* ==========================================================================
   Admin dashboard: /manage/ (inc/manage.php, template-parts/manage/).
   The same shell, panels, tables and pills as /dashboard/; only what the
   team's pages add: filter tabs, search, inline forms, expandable requests.
   ========================================================================== */
.manage .dash-content { grid-template-columns: minmax(0, 1fr); gap: 18px; } /* The tab row scrolls on phones instead of widening the page. */
.manage-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.manage-muted { font-size: 0.85rem; color: var(--kh-muted); }
.manage-hint { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--kh-warning); }
.manage-alert-text { display: block; font-size: 0.8rem; color: var(--kh-danger); }
.manage-alert-num { font-weight: 700; color: var(--kh-danger); }
.manage-empty { padding: 22px; }
.manage-filter-note { margin: -6px 0 0; font-size: 0.9rem; color: var(--kh-muted); }
.manage-label { margin: 0 0 8px; font-family: var(--kh-font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kh-muted); }

/* Filter tabs + search, above a list. */
.manage-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.manage-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.manage-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 0.9rem; font-weight: 600; color: var(--kh-muted); text-decoration: none; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: 999px; }
.manage-tab:hover { color: var(--kh-ink); border-color: var(--kh-muted); }
.manage-tab.is-active { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.manage-tab__count { min-width: 20px; padding: 0 6px; font-size: 0.72rem; text-align: center; color: var(--kh-muted); background: var(--kh-mist); border-radius: 999px; }
.manage-tab.is-active .manage-tab__count { color: var(--kh-midnight); background: var(--kh-on-primary); }
.kh-form.manage-search,
.kh-form.manage-row-form,
.kh-form.manage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kh-form.manage-search input[type="search"] { width: 240px; min-height: 38px; padding: 7px 12px; font-size: 0.9rem; }
.manage-search__clear { font-size: 0.85rem; }
.kh-form.manage-row-form input[type="text"],
.kh-form.manage-row-form input[type="email"],
.kh-form.manage-row-form select,
.kh-form.manage-filters select,
.kh-form.manage-filters input[type="search"] { width: auto; min-width: 150px; min-height: 38px; padding-block: 7px; font-size: 0.9rem; }
.kh-form.manage-row-form input[type="number"] { width: 90px; min-height: 38px; padding-block: 7px; }
.manage-unit { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.manage-filters__count { margin-left: auto; }

/* Inline action forms: a button that posts. */
.manage-inline { display: inline; margin: 0; }
.dash-more__menu form,
.dash-table__actions form { margin: 0; }
.manage-inline--button button { padding: 7px 14px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--kh-ink); cursor: pointer; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.manage-inline--button button:hover { background: var(--kh-mist); }
.manage-inline--button button:active { transform: translateY(1px); }
.manage-link-danger { padding: 4px 2px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--kh-danger); cursor: pointer; background: none; border: 0; }
.manage-link-danger:hover { text-decoration: underline; }

/* Page links. */
.manage-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.manage-pages .page-numbers { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--kh-ink); text-decoration: none; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius); }
.manage-pages a.page-numbers:hover { background: var(--kh-mist); }
.manage-pages .page-numbers.current { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.manage-pages .dots { border-color: transparent; background: none; }

/* Overview: what needs the team. */
.manage-queue { display: grid; margin: 0 -10px; padding: 0; list-style: none; }
.manage-queue a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; font-size: 0.9rem; color: var(--kh-ink); text-decoration: none; border-radius: var(--kh-radius-lg); }
.manage-queue a:hover { color: var(--kh-ink); background: var(--kh-mist); }
.manage-queue__count { display: grid; flex: none; place-items: center; min-width: 32px; height: 26px; padding: 0 8px; font-size: 0.8rem; font-weight: 800; color: var(--kh-warning); background: var(--kh-warning-soft); border-radius: 999px; }
.manage-queue__go { margin-left: auto; color: var(--kh-muted); }

/* Tables: the columns of each list. */
.manage .dash-table--manage-biz .dash-table__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 100px 70px 140px 104px; }
.manage .dash-table--manage-users .dash-table__row { grid-template-columns: minmax(0, 1.6fr) 120px 110px 110px 110px 44px; }
.manage .dash-table--manage-terms .dash-table__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 100px 104px; }
.manage .dash-table--manage-emails .dash-table__row { grid-template-columns: minmax(0, 1.8fr) 150px 170px 110px 164px; } /* View + Resend fit. */
.manage .dash-table__row.is-child .dash-biz { padding-left: 24px; }
.manage-cell-person { display: grid; min-width: 0; }
.manage-cell-person a { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.manage-cell-person small { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; color: var(--kh-muted); }
.manage-avatar { font-size: 0.8rem; }
.manage-avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.dash-more__menu { z-index: 20; }
.manage-slots .confirm__panel { right: 0; left: auto; width: min(300px, calc(100vw - 32px)); }

/* Users › Type: the plan badge (Pro / Free; amber when they asked for more slots) opens "Plan and slots": Pro on or off, and extra slots. */
.manage-type { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.plan-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 0.72rem; font-weight: 700; line-height: 1.5; cursor: pointer; border: 1px solid transparent; border-radius: 999px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.plan-chip::after { content: ""; width: 5px; height: 5px; margin-top: -2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.plan-chip--pro { color: var(--kh-midnight); background: var(--kh-secondary-deep); }
.plan-chip--free { color: var(--kh-muted); background: var(--kh-surface); border-color: var(--kh-stone); }
.plan-chip--ask { color: var(--kh-warning); background: var(--kh-warning-soft); border-color: var(--kh-warning-line); }
.plan-chip:hover { border-color: currentColor; }
.plan-chip:active,
.confirm[open] > .plan-chip { box-shadow: inset 0 0 0 1px currentColor; }
.plan-chip:focus-visible { outline: 2px solid var(--kh-midnight); outline-offset: 2px; }
.manage-type .confirm__panel { left: 0; right: auto; }
.manage-plan { display: grid; gap: 12px; }
.manage-plan form { margin: 0; }
.manage-plan__slots { padding-top: 12px; border-top: 1px solid var(--kh-stone); }
@media (max-width: 560px) {
	/* Phones: a bottom sheet. */
	.manage-type .confirm__panel { position: fixed; inset: auto 0 0; z-index: 60; width: auto; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--kh-radius-xl) var(--kh-radius-xl) 0 0; box-shadow: var(--kh-shadow-dialog); }
}

/* Verifications: one request per <details>, opened to review. */
.manage-items { display: grid; gap: 10px; }
.manage-item { background: var(--kh-surface); border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow-panel); }
.manage-item__summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 130px auto; align-items: center; gap: 12px 18px; padding: 14px 18px; list-style: none; cursor: pointer; }
.manage-item__summary::-webkit-details-marker { display: none; }
.manage-item__when { font-size: 0.85rem; color: var(--kh-muted); }
.manage-item[open] > .manage-item__summary { border-bottom: 1px solid var(--kh-stone); }
.manage-item[open] .manage-item__open { color: var(--kh-on-primary); background: var(--kh-midnight); border-color: var(--kh-midnight); }
.manage-item__body { padding: 18px; }
.manage-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.manage-chip { display: inline-block; padding: 2px 9px; font-size: 0.72rem; font-weight: 700; color: var(--kh-muted); background: var(--kh-mist); border-radius: 999px; }
.manage-chip.is-in { color: var(--kh-open); background: color-mix(in srgb, var(--kh-open) 12%, transparent); }
.manage-chip.is-missing { color: var(--kh-danger); background: color-mix(in srgb, var(--kh-danger) 10%, transparent); }
/* Verification details: Listing | Owner facts across the top, then Documents | Decision. */
/* Manage › Flags (template-parts/manage/flags.php): the listings in a flag, then what to do. */
.manage-flag { display: grid; gap: 12px; }
.manage-flag .manage-label { margin: 6px 0 0; }
.manage-flag .field__help { margin: 0; }
.manage-flag__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding-top: 6px; border-top: 1px solid var(--kh-stone); }
.manage-flag__actions .manage-note-form { flex: 1 1 280px; }
/* A claim's decision: the note across, then the two answers side by side, the same size (stacked on phones). */
.manage-flag__decide { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--kh-stone); }
.manage-flag__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .manage-flag__buttons { grid-template-columns: minmax(0, 1fr); } }
.manage-flag__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } /* The name, then its Live / Waiting pill. */
.manage-flag__title .pill { flex: none; }
.manage-flag .verify-list__item { flex-wrap: nowrap; }
.manage-flag .verify-list__item .dash-biz { flex: 1; min-width: 0; }
.manage-verify { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
.manage-verify__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid var(--kh-stone); }
.manage-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px 16px; margin: 0 0 12px; font-size: 0.9rem; }
.manage-dl > div { min-width: 0; }
.manage-dl > .is-wide { grid-column: span 2; }
.manage-dl dt { font-size: 0.8rem; color: var(--kh-muted); }
.manage-dl dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.manage-links { margin: 0; font-size: 0.9rem; }
.manage-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.manage-doc strong { display: block; margin-top: 6px; font-size: 0.8rem; line-height: 1.35; }
.manage-doc small { font-size: 0.72rem; color: var(--kh-muted); }
.manage-doc__thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; color: var(--kh-muted); text-decoration: none; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.manage-doc__thumb.is-empty { font-size: 0.8rem; border-style: dashed; }
.manage-doc__thumb img { width: 100%; height: 100%; object-fit: contain; }
.manage-doc__pdf { font-weight: 800; letter-spacing: 0.08em; color: var(--kh-danger); }
.manage-verify__decide { display: grid; align-content: start; gap: 14px; }
.manage-verify__decide form { margin: 0; }
.manage-verify__decide .notice { margin: 0; }
.manage-note-form { gap: 10px; }
.manage-refund { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kh-stone); } /* Manage › Ads: the team's own refund, folded. */
.manage-refund > summary { list-style: none; cursor: pointer; }
.manage-refund > summary::-webkit-details-marker { display: none; }
.manage-refund[open] > summary { margin-bottom: 10px; }
.manage-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.manage-reason { padding: 3px 10px; font: inherit; font-size: 0.72rem; line-height: 1.4; text-align: left; color: var(--kh-ink); cursor: pointer; background: var(--kh-mist); border: 1px solid var(--kh-stone); border-radius: 999px; }
.manage-reason:hover { border-color: var(--kh-midnight); }

/* Reports. */
.manage-report__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.manage-report__head .pill { margin-left: 6px; }
.manage-report__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.manage-report__list { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.manage-report__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0; font-size: 0.9rem; border-top: 1px solid var(--kh-stone); }
.manage-report__list p { flex-basis: 100%; margin: 2px 0 0; color: var(--kh-muted); }
.manage-report__appeal { margin: 14px 0 0; }
.manage-report__appeal p { margin: 4px 0 0; }

/* Suggestions: one row per suggestion, with its forms. */
.manage-list { display: grid; margin: 0; padding: 0; list-style: none; }
.manage-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 0; border-top: 1px solid var(--kh-stone); }
.manage-list__item:first-child { padding-top: 0; border-top: 0; }
.manage-list__main { display: grid; gap: 2px; min-width: 200px; }
.manage-list__forms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.manage-list__forms form { margin: 0; }
/* Category suggestions: alike requests grouped, each with a tick (inc/tag-suggestions.php). */
.category-groups__items { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.category-groups__items .check { font-size: 0.9rem; }
.category-groups__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kh-stone); }
.category-groups__bulk .manage-label { flex-basis: 100%; margin: 0; }

/* Reviews and inquiries. */
.manage-reviews { display: grid; margin: 0; padding: 0; list-style: none; }
.manage-review { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--kh-stone); }
.manage-review:first-child { padding-top: 0; border-top: 0; }
.manage-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.92rem; }
.manage-review__right { margin-left: auto; }
.manage-review__text { margin: 0; font-size: 0.92rem; white-space: pre-line; }
.manage-review__reply { padding: 10px 14px; background: var(--kh-mist); border-radius: var(--kh-radius-lg); }
.manage-review__reply p { margin: 0 0 4px; font-size: 0.9rem; }
.manage-review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Add / edit forms for categories, communities, tags, cities. */
.manage-editor { padding: 0; }
.manage-editor__summary { padding: 18px 22px; list-style: none; cursor: pointer; }
.manage-editor__summary::-webkit-details-marker { display: none; }
.manage-editor[open] > .manage-editor__summary { border-bottom: 1px solid var(--kh-stone); }
.manage-term-form { padding: 20px 22px 22px; }
.manage-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Settings › Payments: GCash and Maya side by side (one column on phones). */
.manage-pay-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.manage-pay-account { display: grid; align-content: start; gap: 14px; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.manage-pay-account legend { padding: 0 6px; font-weight: 700; }
/* The QR picker: the shared drop card, square, the QR on white (Exceptions › QR codes) and clear of the file name bar. */
.doc-drop--qr { max-width: 220px; }
.doc-drop--qr .doc-drop__zone { aspect-ratio: 1; }
.doc-drop--qr .doc-drop__img { bottom: 40px; height: auto; padding: 10px; background: #fff; }
.manage-fields { display: grid; gap: 16px; width: 100%; border-collapse: collapse; }
.manage-fields tbody { display: grid; gap: 16px; }
.manage-fields tr,
.manage-fields .form-field { display: grid; gap: 6px; }
.manage-fields th,
.manage-fields label { padding: 0; font-size: 0.9rem; font-weight: 600; text-align: left; }
.manage-fields td { padding: 0; }
.manage-fields .description,
.manage-fields .form-field p { margin: 4px 0 0; font-size: 0.85rem; color: var(--kh-muted); }

/* The category icon picker (inc/icons.php), as on wp-admin. */
.kh-form .kh-icon-picker__search { max-width: 360px; margin-bottom: 10px; }
.kh-icon-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 6px; background: var(--kh-surface); border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }
.kh-icon-picker__item { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px; text-align: center; cursor: pointer; border: 1px solid transparent; border-radius: var(--kh-radius); }
.kh-icon-picker__item:hover { background: var(--kh-mist); }
.kh-icon-picker__item input { position: absolute; opacity: 0; }
.kh-icon-picker__item:has(input:checked) { color: var(--kh-midnight); background: var(--kh-secondary); border-color: var(--kh-midnight); }
.kh-icon-picker__item:has(input:focus-visible) { outline: 2px solid var(--kh-midnight); }
.kh-icon-picker__svg { width: 28px; height: 28px; }
.kh-icon-picker__auto { display: grid; place-items: center; width: 28px; height: 28px; font-weight: 700; border: 1.6px dashed currentColor; border-radius: var(--kh-radius); }
.kh-icon-picker__label { font-size: 0.72rem; line-height: 1.25; }
.kh-icon-picker__custom { margin-top: 12px; }
.kh-icon-picker__custom summary { font-weight: 600; cursor: pointer; }
.kh-icon-picker__custom .description { font-size: 0.85rem; color: var(--kh-muted); }
.kh-icon-picker__preview { display: flex; align-items: center; gap: 8px; }

/* Email log. */
.manage-email-frame { width: 100%; height: 560px; margin-top: 12px; background: #fff; border: 1px solid var(--kh-stone); border-radius: var(--kh-radius-lg); }

@media (max-width: 1240px) {
	.manage-verify__info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
	.manage-item__summary { grid-template-columns: minmax(0, 1fr) auto; }
	.manage-item__summary .manage-chips,
	.manage-item__summary .manage-item__when { grid-column: 1; }
	.manage-item__summary .manage-item__open { grid-column: 2; grid-row: 1; }
}
@media (max-width: 720px) {
	.manage-toolbar { flex-flow: column nowrap; align-items: stretch; } /* nowrap: a wrapping column would size to the widest child. */
	.manage-tabs { flex-wrap: nowrap; margin-inline: calc(var(--kh-gutter) * -1); padding-inline: var(--kh-gutter); overflow-x: auto; scrollbar-width: none; }
	.manage-tab { flex: none; }
	.kh-form.manage-search { flex-wrap: nowrap; }
	.kh-form.manage-search input[type="search"] { flex: 1; width: auto; min-width: 0; }
	.manage-item__summary { padding: 14px; }
	.manage-item__body { padding: 14px; }
	.manage-verify { grid-template-columns: minmax(0, 1fr); }
	.manage-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.manage-dl > .is-wide { grid-column: 1 / -1; }
	.manage-review__right { margin-left: 0; }
	.manage-list__item { align-items: stretch; flex-direction: column; }
	.kh-form.manage-row-form input[type="text"],
	.kh-form.manage-row-form input[type="email"],
	.kh-form.manage-row-form select { flex: 1 1 160px; min-width: 0; }
	.manage-filters__count { margin-left: 0; }
}

/* Tablets, small laptops and phones: every dashboard table (.dash-table,
   /dashboard/ and /manage/) is a list of cards, two per row up to 1100px and
   one per row on phones. Name + status on top, the small facts two by two,
   then the buttons along the bottom. Wins over the column layouts above. */
@media (max-width: 1100px) {
	.dash-panel--flush:has(> .dash-table) { padding: 0; background: none; border-radius: 0; box-shadow: none; }
	.dash-table { gap: 12px; }
	.dash-table__row { display: flex; flex-wrap: wrap; align-content: space-between; align-items: flex-start; gap: 12px 16px; padding: 16px; background: var(--kh-surface); border-top: 0; border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow-panel); }
	.dash-table__row--head { display: none; }
	.dash-table__row > [data-label] { display: grid; gap: 1px; font-size: 0.85rem; font-weight: 600; }
	.dash-table__row > [data-label]::before { content: attr(data-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--kh-muted); }
	.dash-table--manage-biz .dash-table__row > :nth-child(2) { flex-basis: 100%; } /* Owner on its own line; Rating and Reports share the next. */
	/* Categories, communities, tags: only ⋯, top right like a status (inc/manage.php kh_manage_term_actions()). */
	.dash-table--manage-terms .dash-table__row > .dash-table__actions { order: 1; flex: none; margin-left: auto; padding-top: 0; border-top: 0; }
	.dash-table--manage-terms .dash-table__row > .dash-biz { flex-basis: calc(100% - 60px); }
	/* Users: only ⋯ too, after the email status. */
	.dash-table--manage-users .dash-table__row > .dash-table__actions { order: 1; flex: none; padding-top: 0; border-top: 0; }
	.dash-table--manage-users .dash-table__row > .dash-biz { flex-basis: calc(100% - 200px); }
	.dash-table__row > * { min-width: 0; }
	.dash-table__row > .dash-biz { order: 0; flex: 1 1 calc(100% - 160px); } /* Leaves room for the status only, so the facts start a new line. */
	.dash-table__row > .dash-table__side { order: 1; flex: none; margin-left: auto; }
	.dash-table__row > [data-label] { order: 2; flex: 1 1 calc(50% - 8px); }
	.dash-table__row > .dash-table__actions { order: 3; display: flex; flex: 1 1 100%; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--kh-stone); }
	.dash-table__row > .dash-table__actions:not(:has(*)) { display: none; } /* No buttons for this row. */
	.dash-table__actions > .button,
	.dash-table__actions > form { flex: 1 1 0; }
	.dash-table__actions > form .button { width: 100%; }
	.dash-biz__name,
	.dash-biz__meta { white-space: normal; overflow-wrap: anywhere; } /* Whole subject and email on a card. */
	.manage .dash-table__row.is-child .dash-biz { padding-left: 0; }
}
@media (min-width: 721px) and (max-width: 1100px) {
	.dash-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Same height in a row; the buttons sit at the bottom. */
}
@media (max-width: 720px) {
	.manage .dash-table__row.is-child { margin-left: 16px; } /* Subcategories, one per row: indented under their parent. */
}

/* Phones: placeholder cards are as small as the real ones there (photo, name, ★ rating). */
@media (max-width: 640px) {
	.business-grid .business-card.is-skeleton .business-card__body > :not(.skeleton--title):not(.skeleton--stars) { display: none; }
	.business-grid .business-card.is-skeleton .skeleton--title { flex-basis: 100%; height: 15px; }
	.business-grid .business-card.is-skeleton .skeleton--stars { width: 30%; height: 11px; margin-top: 4px; }
	.business-grid .business-card.is-skeleton .skeleton--heart { top: 6px; right: 6px; width: 30px; height: 30px; }
}

/* The pop-up version: slides up at the bottom right (bottom, full width on phones). */
.locate-prompt { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: min(420px, calc(100vw - 24px)); margin: 0; box-shadow: var(--kh-shadow-float); opacity: 0; transform: translateY(16px); transition: opacity 0.25s ease, transform 0.25s ease; animation: none; }
.locate-prompt.is-on { opacity: 1; transform: none; }
@media (max-width: 640px) {
	.locate-prompt { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

/* Touch screens: fields are at least 16px (1rem), or iPhone Safari zooms the
   page in when one is tapped. Desktop keeps the smaller sizes above. */
@media (hover: none) and (pointer: coarse) {
	.mini-search input,
	.kh-form input[type="file"],
	.filter-select select,
	.kh-form.manage-search input[type="search"],
	.kh-form.manage-row-form select,
	.kh-form.manage-filters select,
	.kh-form.manage-filters input[type="search"] { font-size: 1rem; }
}