/* ==========================================================================
   CyprusBites, Public components. Requires public-tokens.css.
   Mobile-first. The one loud element per view is the match ring.
   ========================================================================== */

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

body {
	margin: 0;
	background: var(--bg-page);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--act); text-decoration: none; }
a:hover { color: var(--act-hover); }
img { max-width: 100%; display: block; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

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

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--sp-4); }

/* ---- Mobile overflow safety net ----
   Three rules keep any page from panning sideways on a phone, and stop it
   recurring. Follow them for new layout:
   1. The viewport never scrolls horizontally.
   2. Long unbreakable tokens (emails, invite URLs, slugs) wrap instead of
      forcing their box wider than the screen.
   3. Every responsive grid uses minmax(min(Npx, 100%), 1fr), never a bare
      minmax(Npx, 1fr). min() caps the track at the container so a column can
      never be wider than the viewport. Grid/flex children that hold text also
      need min-width: 0 to be allowed to shrink. */
html, body { overflow-x: clip; }
body { overflow-wrap: break-word; }

/* iOS Safari zooms in on focus of any form control under 16px and stays zoomed
   after the form submits, which reads as the page "distorting" after a save.
   Force 16px on phones so it never triggers. !important beats the inline
   font-size some inputs carry; desktop keeps the smaller, denser sizing. */
@media (max-width: 640px) {
	input, select, textarea { font-size: 16px !important; }
}

.site-head {
	background: var(--bg-card);
	border-bottom: 1px solid var(--line);
	position: sticky; top: 0; z-index: 40;
}
.site-bar { display: flex; align-items: center; gap: var(--sp-3); height: 64px; }
.brand {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	flex: none;
}
.brand em { font-style: normal; color: var(--act); }

/* Brand lockup: the citrus mark sits to the left of the wordmark. Flex is
   scoped to the header and footer so the plain-text .brand reused on the
   printed invoice keeps "CyprusBites" as a single unbroken word (a flex gap
   would otherwise split the "Cyprus" text node from the <em>Bites</em>). The
   wordmark is wrapped in .brand__text, so the only gap is mark-to-word. */
.site-bar .brand, .foot-brand .brand { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.brand__mark { width: 30px; height: 30px; flex: none; display: block; transition: transform 220ms cubic-bezier(0.34, 1.4, 0.5, 1); }
a.brand:hover .brand__mark { transform: rotate(-7deg) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
	.brand__mark { transition: none; }
	a.brand:hover .brand__mark { transform: none; }
}
@media (max-width: 640px) {
	.site-bar .brand { font-size: 1.2rem; }
	.site-bar .brand__mark { width: 26px; height: 26px; }
}

/* Primary + utility nav. On desktop the two groups sit inline; below 1024px
   the whole nav collapses into a dropdown behind the menu button. The bar is
   capped at --page-max, so long translated (el/de/ru) labels can exceed the
   row: the primary group shrinks and scrolls rather than pushing the tools
   off the edge (where overflow-x:clip would hide them). */
.site-nav { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.site-nav__primary { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: visible; }
.site-nav__utility { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: none; }

.nav-link {
	display: inline-flex; align-items: center; flex: none; padding: 8px 8px; white-space: nowrap;
	border-radius: var(--r-pill); color: var(--ink-soft);
	font-size: var(--fs-sm); font-weight: 500; line-height: 1;
	transition: background-color 140ms ease, color 140ms ease;
}
.nav-link:hover { background: var(--bg-dip); color: var(--ink); }
.nav-link.is-here { background: var(--act-wash); color: var(--act-hover); font-weight: 600; }

.nav-cta {
	display: inline-flex; align-items: center; padding: 9px 16px; white-space: nowrap;
	border-radius: var(--r-pill); background: var(--act); color: #fff;
	font-size: var(--fs-sm); font-weight: 600; line-height: 1;
	transition: background-color 140ms ease;
}
.nav-cta:hover { background: var(--act-hover); color: #fff; }

/* Always in the bar: search, then the menu button (menu button mobile-only). */
.site-bar__right { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.tool-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--r-pill);
	background: var(--bg-dip); color: var(--ink-soft);
	border: 0; padding: 0; cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease;
}
.tool-btn:hover { background: var(--act-wash); color: var(--act-hover); }
.tool-btn svg { flex: none; }
.site-burger { display: none; }

/* Collapse to the menu button once the full nav can no longer fit the capped
   bar, so the last item (a long label like "Day planner") never clips. */
@media (max-width: 1080px) {
	.site-bar { height: 58px; }
	.site-burger { display: inline-flex; }
	.site-bar__right { margin-left: auto; }

	.site-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--bg-card); border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-card);
		padding: var(--sp-3);
		max-height: calc(100dvh - 58px); overflow-y: auto;
		display: none;
	}
	.site-head.menu-open .site-nav { display: flex; }
	.site-nav__primary { flex-direction: column; align-items: stretch; gap: 2px; }
	.site-nav__utility {
		margin-left: 0; margin-top: var(--sp-3); padding-top: var(--sp-3);
		border-top: 1px solid var(--line); flex-wrap: wrap; gap: var(--sp-3);
	}
	.site-nav .nav-link { padding: 12px 14px; font-size: var(--fs-base); }
	.site-nav .nav-cta { justify-content: center; padding: 12px 16px; }
	/* In the burger menu the language + account controls get real touch targets.
	   Language is shown as an always-open one-tap list, not a dropdown-inside-a-
	   drawer, so changing it is a single tap (the .site-nav prefix out-specifies
	   the base .lang-dd rules regardless of source order). */
	.site-nav .lang-dd { display: block; width: 100%; }
	.site-nav .lang-dd__btn { display: none; }
	.site-nav .lang-dd__panel {
		display: block; position: static; right: auto; left: auto;
		box-shadow: none; border: 1px solid var(--line); border-radius: var(--r-md);
		min-width: 0; padding: 4px; margin: 0;
	}
	.site-nav .lang-dd__item { min-height: 46px; padding: 12px 14px; font-size: var(--fs-base); }
	.site-nav .acct-dd { display: block; }
	.site-nav .acct-dd__btn { width: 100%; max-width: none; justify-content: space-between; min-height: 44px; }
	.site-nav .acct-dd__panel { right: auto; left: 0; }
}


/*
 * A NEUTRAL SCRIM (v16.9). It was tinted with the ink colour, which is a dark
 * teal, and over the hero's own green band it read as a green frame around the
 * panel rather than as a dimming of the page behind it. Neutral, so the search
 * sits on whatever page opened it without borrowing that page's colour.
 */
.gsearch { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 16, 0.44); display: flex; justify-content: center; align-items: flex-start; }
.gsearch[hidden] { display: none; }
.gsearch__panel { width: 100%; max-width: 640px; margin: 8vh var(--sp-4) 0; background: var(--bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; max-height: 82vh; overflow: hidden; }
.gsearch__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.gsearch__icon { color: var(--ink-faint); flex: none; }
.gsearch__input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: var(--fs-md); background: transparent; color: var(--ink); }
/*
 * NO RING ROUND THE FIELD (v16.9).
 *
 * The global :focus-visible rule paints a three pixel box-shadow in --ring,
 * which is the teal accent, so the moment somebody typed here a green frame
 * appeared around an input that fills the panel. It read as a border on the box
 * rather than as a focus mark, which is what was being complained about, and it
 * is also the one place on the site where a focus ring earns nothing: the panel
 * has just opened FOR this field, the caret is in it, and nothing else is
 * competing for attention.
 *
 * Focus is not simply removed, because a keyboard user moving between the field
 * and the close button still has to see where they are. It moves to the bar
 * instead: the whole search line takes the accent underneath it while it holds
 * focus, which says the same thing without drawing a box.
 */
.gsearch__input:focus,
.gsearch__input:focus-visible { box-shadow: none; outline: none; }
.gsearch__bar:focus-within { border-bottom-color: var(--act); }
.gsearch__close:focus-visible { box-shadow: var(--ring); border-radius: var(--r-sm); }
.gsearch__close { flex: none; border: none; background: transparent; color: var(--ink-faint); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 6px; }
.gsearch__close:hover { color: var(--ink); }
/*
 * SIZED BY WHAT IS IN IT (v16.9). The panel was a slab: the hint sat centred
 * inside 20px of padding top and bottom with another 16px around it, so an
 * empty search opened a white box two thirds of which said nothing. The line
 * under the input is now exactly that, a line under the input, and the panel is
 * only as tall as the input plus that sentence until results arrive.
 */
.gsearch__results { overflow-y: auto; padding: 0 0 var(--sp-1); }
/* Left aligned and tucked under the field, because it is a caption for the
   input above it rather than a message to the room. */
.gsearch__hint, .gsearch__empty { color: var(--ink-faint); font-size: var(--fs-sm); padding: 9px var(--sp-4) 11px; text-align: left; }
.gsearch-group__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.gsearch-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); color: var(--ink); min-width: 0; }
.gsearch-item:hover, .gsearch-item.is-active { background: var(--bg-dip); }
.gsearch-item__thumb { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--act-wash); flex: none; display: flex; align-items: center; justify-content: center; color: var(--act); overflow: hidden; }
.gsearch-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The name on its own line, what it is underneath. Both were inline spans, so
   they ran into each other ("Souvlaki.grRestaurant, Larnaca") and the ellipsis
   never fired either, because overflow and text-overflow do nothing on an
   inline box. A column fixes the break and the truncation together. */
.gsearch-item__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.gsearch-item__label { display: block; font-weight: 600; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-item__sub { display: block; color: var(--ink-soft); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gsearch-open { overflow: hidden; }
@media (max-width: 560px) {
	.gsearch__panel { max-width: none; margin: 0; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ---- Hero (ink band) ---- */
.hero {
	background: var(--bg-ink);
	color: var(--ink-on-dark);
	padding: var(--sp-14) 0 var(--sp-10);
}
.hero h1 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-hero);
	line-height: 1.04;
	letter-spacing: -0.025em;
	max-width: 15ch;
}
.hero .lead { color: var(--ink-on-dark-soft); font-size: var(--fs-md); margin-top: var(--sp-4); max-width: 46ch; }

/* ---- Mood deck (chips) ---- */
.mood-deck { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.mood-chip {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--ink-on-dark);
	border-radius: var(--r-pill);
	padding: 9px 16px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 140ms ease, transform 140ms ease;
}
.mood-chip:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); color: var(--ink-on-dark); }
.mood-chip.on-light { background: var(--bg-card); border-color: var(--line-strong); color: var(--ink); }
.mood-chip.on-light:hover { border-color: var(--act); color: var(--act-hover); }
.mood-chip.is-active { background: var(--act); border-color: var(--act); color: #fff; }

/* ---- Sections ---- */
.section { padding: var(--sp-10) 0; }
.section-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: -0.015em; }
.section-head .more { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.section-sub { color: var(--ink-faint); font-size: var(--fs-sm); }

/* Category sub-headings inside the profile "what's nearby" block */
.near-head { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--sp-4); }
.near-head + .card-grid { margin-bottom: var(--sp-8); }

/* ---- Result cards ---- */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.card-grid > * { min-width: 0; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.r-card {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	display: flex; flex-direction: column;
	transition: transform 140ms ease, box-shadow 140ms ease;
}
.r-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.r-card .photo { height: 168px; background: var(--bg-dip); position: relative; }
.r-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.r-card .photo .flag {
	position: absolute; top: var(--sp-3); left: var(--sp-3);
	background: var(--sun); color: var(--petrol-950);
	font-size: var(--fs-xs); font-weight: 700;
	border-radius: var(--r-pill); padding: 3px 10px;
}
.r-card .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.r-card .name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--ink); }
.r-card .meta { color: var(--ink-faint); font-size: var(--fs-sm); }
.r-card .meta .open { color: var(--good-600); font-weight: 600; }
.r-card .meta .closed { color: var(--ink-faint); }

/* DNA stamps */
.dna { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.stamp {
	background: var(--bg-dip);
	color: var(--ink-soft);
	border-radius: var(--r-sm);
	padding: 2px 8px;
	font-size: var(--fs-xs);
	font-weight: 600;
}
.stamp.hit { background: var(--act-wash); color: var(--act-hover); }
.stamp.gem { background: var(--sun-wash); color: var(--warn-600); }

/* Capability badges: what a venue can actually DO for you (book, pickup,
   rewards). Quieter than a stamp because it is a fact, not a distinction. */
.cap-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.cap { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm);
	color: var(--ink-soft); background: var(--bg-dip); border-radius: var(--r-pill); padding: 3px 10px; }
.cap .cb-ico { color: var(--act); }
.r-card .cap { font-size: var(--fs-xs); padding: 2px 8px; }

/*
 * The CyprusBites price, on a card (v10.49). The one pill in the row allowed
 * to carry the brand colour, because it is the only one making a promise about
 * money. The capability pills beside it stay quiet so this reads first.
 */
.cap--member { color: var(--act-700, var(--act)); background: var(--act-050, var(--bg-dip)); font-weight: 600; }

/* ---- Match ring (the signature) ---- */
/* The arc colour is set inline per venue by RecommendationEngine::matchColor,
   a red-to-amber-to-green ramp that reads the strength of the fit. The token
   here is only the fallback if that inline value is ever missing. */
.match-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.match-block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); flex: none; }
.ring { width: 56px; height: 56px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .track { stroke: var(--wash-200); }
.ring .arc { stroke: var(--match); stroke-linecap: round; transition: stroke-dashoffset 500ms ease; }
.ring .pct {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--ink);
}
/* "Your match" with a tap-to-open plain-language explanation of the score. */
.match-info { font-size: var(--fs-xs); color: var(--ink-faint); text-align: center; max-width: 22ch; }
.match-info > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-soft); }
.match-info > summary::-webkit-details-marker { display: none; }
.match-info__q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 10px; line-height: 1; color: var(--ink-faint); }
.match-info[open] > summary { color: var(--act); }
.match-info[open] .match-info__q { border-color: var(--act); color: var(--act); }
.match-info p { margin: var(--sp-2) 0 0; line-height: 1.45; }
/* THE FIT CARD (9.20): the ring, what the score means, and the reasons the
   engine matched this venue, one bordered paper in the hero's second column,
   rendered in every venue state so the column can never collapse to a naked
   ring. The claim strip beneath is a separate element on purpose: the card
   speaks to the diner, the strip to the owner, and one element never does
   both. */
.fit-col { width: min(340px, 100%); flex: none; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fit-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); overflow-wrap: anywhere; }
.fit-card__head { display: flex; gap: var(--sp-4); align-items: center; }
.fit-card .match-info { text-align: left; max-width: none; }
.fit-card__reasons { list-style: none; margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--wash-100); display: flex; flex-direction: column; gap: 7px; }
.fit-card__reasons li { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--ink-soft); }
.fit-card__reasons li svg { flex: none; width: 14px; height: 14px; color: var(--act); transform: translateY(2px); }
.fit-claim { margin: 0; background: var(--act-wash); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--ink); display: flex; align-items: baseline; gap: 8px; overflow-wrap: anywhere; }
.fit-claim svg { flex: none; width: 15px; height: 15px; color: var(--act); transform: translateY(2px); }
.fit-claim a { color: var(--act); font-weight: 700; }
.fit-claim--soon { background: var(--sun-wash); color: var(--warn-600); display: block; }
@media (max-width: 720px) { .fit-col { width: 100%; } }

/* One "right now" line (9.20): open-or-not, today's windows, and the live
   busy pill share a single line above the description. */
.now-line { margin-top: var(--sp-3); font-size: var(--fs-sm); display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); }
.now-line .busy-now { margin-top: 0; }

.reasons { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--ink-soft); }
.reasons li { list-style: none; }
.reasons { margin: 0; padding: 0; }
.reasons li::before { content: "- "; color: var(--ink-faint); }

/* ---- Surprise-me pick banner (shown on the landing profile) ---- */
.surprise-note {
	display: flex; align-items: center; gap: var(--sp-3);
	background: var(--sun-wash); border: 1px solid var(--sun);
	border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-5);
}
.surprise-note__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card); color: var(--warn-600); }
.surprise-note__body { flex: 1; min-width: 0; }
.surprise-note__body b { font-family: var(--font-display); }
.surprise-note__body p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.surprise-note__why { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.surprise-note > .btn { flex: none; }
@media (max-width: 560px) {
	.surprise-note { flex-wrap: wrap; }
	.surprise-note > .btn { width: 100%; }
}

/* ---- Live "busy now" chip (grounded in the venue's recent visit pattern) ---- */
.busy-now { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-3); padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; }
.busy-now__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; animation: busyPulse 2.4s ease-in-out infinite; }
.busy-now--busy { background: var(--sun-wash); color: var(--warn-600); }
.busy-now--busy .busy-now__dot { background: var(--sun); }
.busy-now--steady { background: var(--wash-100); color: var(--ink-soft); }
.busy-now--steady .busy-now__dot { background: var(--ink-faint); }
.busy-now--quiet { background: var(--act-wash); color: var(--act-hover); }
.busy-now--quiet .busy-now__dot { background: var(--act); }
@keyframes busyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .busy-now__dot { animation: none; } }

/* ---- Local-vs-Tourist Favourite Index meter (grounded in the visitor mix) ---- */
.crowd-index__headline { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.crowd-index--local { color: var(--act-hover); }
.crowd-index--tourist { color: var(--warn-600); }
.crowd-index--even { color: var(--ink-soft); }
.crowd-bar { height: 12px; border-radius: var(--r-pill); background: var(--sun-wash); overflow: hidden; }
.crowd-bar__fill { display: block; height: 100%; background: var(--act); border-radius: var(--r-pill); transition: width 500ms ease; }
.crowd-bar__ends { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.crowd-index__note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--ink-faint); }

/* ---- Buttons ---- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
	border-radius: var(--r-pill); border: 1px solid transparent;
	padding: 10px 20px; cursor: pointer; line-height: 1;
	transition: background-color 140ms ease, border-color 140ms ease;
}
.btn-act { background: var(--act); color: #fff; }
.btn-act:hover { background: var(--act-hover); color: #fff; }
.btn-line { background: var(--bg-card); border-color: var(--line-strong); color: var(--ink); }
.btn-line:hover { border-color: var(--act); color: var(--act-hover); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--bg-dip); color: var(--ink); }
.btn-lg { padding: 13px 26px; font-size: var(--fs-base); }
/* btn-sm was in use on two pages and defined on none, so both drew full-size
   buttons (v6.55). A finger still needs its target, so it only shrinks where
   there is a pointer. */
.btn-sm { padding: 6px 14px; font-size: var(--fs-xs); }

/* A FLASH SAYS ITS PIECE AND GOES (v6.71). "Added." was rendered as a banner
   at the top of the page and stayed there for the rest of the visit, a receipt
   for something the reader had just done themselves and could already see the
   result of. It is a toast now: it appears, it is read, it leaves. Errors are
   not flashes and never behave this way, because an error is still true after
   two seconds. */
/* A page carrying a bar fixed to the bottom of the window has to end above it,
   or its last section scrolls underneath and cannot be read (v6.75). */
body.has-fixed-bar { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }

.cb-flash { position: fixed; left: 50%; top: 76px; transform: translateX(-50%);
	z-index: 200; max-width: min(92vw, 420px);
	padding: 10px 18px; border-radius: var(--r-pill);
	background: var(--ink); color: #fff; font-size: var(--fs-sm); font-weight: 600;
	box-shadow: 0 10px 30px -12px rgba(16, 40, 44, .55);
	opacity: 1; transition: opacity 320ms ease, transform 320ms ease; }
.cb-flash.is-going { opacity: 0; transform: translate(-50%, -8px); }
@media (prefers-reduced-motion: reduce) { .cb-flash { transition: none; } }

/* The venue page's two action rows (v6.59). What you came to do, then how to
   reach the place. Separate rows so a wrap reads as the grouping rather than a
   hole in the middle of one long line.

   LABEL WIDTH, LEFT EDGE (9.20, owner decision, reversing v6.60). The stretch
   that ended every row flush against the right edge also stretched "Call"
   across a quarter of the page, and the owner has chosen the other trade:
   every button exactly as wide as what it says, rows starting at the left
   edge, the ragged right edge accepted as the honest shape of rows whose
   buttons say different-length things. Shrink stays on, so a narrow phone
   still compresses a too-long row instead of panning sideways. */
.pf-do, .pf-reach, .act-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pf-do { margin-top: var(--sp-5); }
.pf-reach { margin-top: var(--sp-2); }
.act-bar { margin-top: var(--sp-4); }
/* The Order together form is display:contents, so the flex item is the button
   inside it, not the form. It has to be named or it alone stays its own width. */
.pf-do > *, .pf-reach > *, .act-bar > *,
.pf-do > form > .btn, .pf-reach > form > .btn { flex: 0 1 auto; }
.pf-reach [data-vreel-open] { flex: 0 0 auto; }
.pf-reach .btn { font-size: var(--fs-xs); padding: 8px 16px; }
/* The member row is the guest's own marks (save, check in, been, note):
   kept, demoted (9.20). The quietest tier on the page, hairline borders and
   soft ink, so the hero reads content first and controls after. */
.act-bar .btn { font-size: var(--fs-xs); padding: 8px 14px; border-color: var(--line); color: var(--ink-soft); }
.act-bar .btn.is-on { color: var(--act); }
@media (pointer: coarse) { .btn-sm { padding: 11px 16px; font-size: var(--fs-sm); } }

/* ---- Desktop notifications opt-in (owner settings) ---- */
.push-box {
	margin-top: var(--sp-5);
	padding: var(--sp-4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	background: var(--bg-dip);
}
.push-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.push-ico {
	flex: none; width: 38px; height: 38px; border-radius: var(--r-md);
	display: flex; align-items: center; justify-content: center;
	background: var(--act-wash); color: var(--act); font-size: 20px;
}
.push-copy { min-width: 0; }
.push-title { display: block; font-size: var(--fs-base); }
.push-desc { margin: 4px 0 0; color: var(--ink-faint); font-size: var(--fs-sm); line-height: 1.45; }
.push-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.push-toggle { flex: none; }
.push-status { font-size: var(--fs-sm); color: var(--ink-faint); }
.push-status[data-tone="on"] { color: var(--act-hover); font-weight: 600; }
.push-status[data-tone="warn"] { color: var(--warn-600); }

/* ---- Autosave status (owner inline single-field edits) ---- */
.autosave-status { font-size: var(--fs-xs); font-weight: 600; }
.autosave-status:empty { display: none; }
.autosave-status[data-tone="muted"] { color: var(--ink-faint); font-weight: 500; }
.autosave-status[data-tone="ok"] { color: var(--act-hover); }
.autosave-status[data-tone="warn"] { color: var(--warn-600); }

/* ---- Portal nav (owner + member self-service bar; on every portal page) ---- */
.portal-nav {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	padding: var(--sp-3);
	margin-bottom: var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.portal-nav__scan {
	display: flex; align-items: center; gap: var(--sp-3);
	background: var(--act); color: #fff;
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	min-height: 56px;
	transition: background-color 140ms ease;
}
.portal-nav__scan:hover { background: var(--act-hover); color: #fff; }
.portal-nav__scan .ico { font-size: 1.7rem; line-height: 1; }
.portal-nav__scan b { font-size: var(--fs-base); font-weight: 700; }
.portal-nav__scan .sub { display: block; font-size: var(--fs-xs); font-weight: 500; opacity: 0.85; margin-top: 1px; }
.portal-nav__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.portal-tab {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 14px;
	border-radius: var(--r-pill);
	background: var(--bg-dip); color: var(--ink);
	font-weight: 600; font-size: var(--fs-sm);
	border: 1px solid transparent;
	transition: background-color 140ms ease, color 140ms ease;
}
.portal-tab .ico { font-size: 1rem; line-height: 1; }
.portal-tab:hover { background: var(--act-wash); color: var(--act-hover); }
.portal-tab.is-here { background: var(--act); color: #fff; }
.portal-tab.is-here:hover { background: var(--act-hover); color: #fff; }
.portal-tab--exit { margin-left: auto; background: transparent; color: var(--ink-faint); }
.portal-tab--exit:hover { background: #FBE8E6; color: var(--bad-600); }
@media (max-width: 560px) {
	.portal-tab { flex: 1 1 auto; justify-content: center; }
	.portal-tab--exit { flex-basis: 100%; margin-left: 0; }
}

/* ---- Filters bar (directory) ---- */
.filter-rail {
	display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
	padding: var(--sp-4) 0;
}
.filter-rail select, .filter-rail input[type="search"] {
	font: inherit; font-size: var(--fs-sm);
	border: 1px solid var(--line-strong); border-radius: var(--r-pill);
	background: var(--bg-card); color: var(--ink);
	padding: 8px 14px;
}
.filter-rail select:focus, .filter-rail input:focus { outline: none; border-color: var(--act); box-shadow: var(--ring); }

/* ---- Profile page ---- */
.profile-hero { background: var(--bg-card); border-bottom: 1px solid var(--line); padding: var(--sp-8) 0; }
.profile-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -0.02em; }
.profile-hero .sub { color: var(--ink-faint); margin-top: var(--sp-2); }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); }
.photo-strip img { border-radius: var(--r-md); height: 130px; width: 100%; object-fit: cover; }
.profile-cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-6); align-items: start; }
.profile-cols > * { min-width: 0; }
@media (max-width: 800px) { .profile-cols { grid-template-columns: 1fr; } }
.panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.panel + .panel { margin-top: var(--sp-4); }
.panel h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.panel > h2:first-child { margin-top: 0; }

/* ==========================================================================
   Portal UI kit, the shared vocabulary for the owner + member portals.
   One card, one page header, one stat tile, one choice-set, so every portal
   page reads as the same product. Compose these instead of inline styles.
   ========================================================================== */

/* The one card. .panel is its titled sibling; both share this look. */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-card); min-width: 0; }
.card--act { border-left: 3px solid var(--act); }
.card--sun { border-left: 3px solid var(--sun); }
.card--match { border-left: 3px solid var(--match); }
.card--good { border-left: 3px solid var(--good-600); }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.card__title:not(:last-child) { margin-bottom: var(--sp-3); }

/* Page header band, every portal page opens with one: eyebrow, title, lead,
   and an optional action pinned to the right. Replaces the ad-hoc
   section-head + inline h1 + section-sub trio. */
.portal-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-6); }
.portal-head__main { flex: 1 1 260px; min-width: 0; }
.portal-head__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); }
.portal-head h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.1; margin-top: 3px; }
.portal-head__lead { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.portal-head__lead a { font-weight: 600; }
.portal-head__action { flex: none; }

/* Stat tiles, the dashboard "at a glance" row. Auto-fits, never overflows. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.stat { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.stat__num small { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-faint); }
.stat__label { font-size: var(--fs-sm); color: var(--ink-faint); }
.stat__foot { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 2px; }
.stat--act .stat__num { color: var(--act); }
.stat--sun .stat__num { color: var(--warn-600); }
.stat--match .stat__num { color: var(--match); }

/* Vertical rhythm helper, replaces repeated inline margin-bottom. */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--sp-4); }
.stack--tight > * + * { margin-top: var(--sp-3); }

/* Copyable field (invite link, code). Input shrinks; a trailing hint fits. */
.field-copy { display: flex; width: 100%; min-width: 0; margin-top: var(--sp-2); }
.field-copy input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--bg-page); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 12px; }

/* Segmented radio choice (pickup availability mode, and future either/or). */
.choice-set { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.choice-set legend { font-size: var(--fs-sm); font-weight: 700; padding: 0 var(--sp-1); }
.choice { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2); border-radius: var(--r-sm); cursor: pointer; min-width: 0; }
.choice:hover { background: var(--bg-dip); }
.choice input { margin-top: 3px; flex: none; accent-color: var(--act); }
.choice b { display: block; font-weight: 700; }
.choice small { display: block; color: var(--ink-faint); font-size: var(--fs-sm); margin-top: 1px; }

/*
 * WHAT THIS RUNG ADDS (v10.49). Sits inside a .choice, beneath the rung's own
 * line, so an owner reads the cost and the return without moving their eye.
 *
 * The left hairline is the whole visual argument: it ties the rewards to the
 * rung above them, so a taller stack under 20 percent reads as "that one is
 * worth more" at a glance, before a single word has been read.
 */
.mr-gets { display: block; margin-top: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.mr-gets__head { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: var(--sp-1); }
.mr-get { display: block; margin-top: var(--sp-2); min-width: 0; }
.mr-get:first-of-type { margin-top: 0; }
.mr-get b { display: block; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mr-get em { display: block; font-style: normal; color: var(--ink-soft); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mr-get i {
  display: inline-block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 var(--sp-2);
}

.sig { display: flex; gap: var(--sp-2); align-items: baseline; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.sig .yes { color: var(--good-600); font-weight: 700; }
.sig .no { color: var(--bad-600); font-weight: 700; }
.hours-line { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 3px 0; color: var(--ink-soft); }
.hours-line.today { color: var(--ink); font-weight: 600; }
.badge-open { color: var(--good-600); font-weight: 700; }
.badge-closed { color: var(--ink-faint); font-weight: 600; }
.offer-note {
	background: var(--sun-wash); border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin-bottom: var(--sp-2);
}
.offer-note b { color: var(--warn-600); }

/* ---- Concierge steps ---- */
.steps { max-width: 860px; margin: 0 auto; }
.step-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-card); }
.step-q { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: -0.015em; margin-bottom: var(--sp-4); }
.step-dots { display: flex; gap: var(--sp-1); justify-content: center; margin: var(--sp-4) 0; }
.step-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--wash-300); }
.step-dots span.done { background: var(--act); }
.chip-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- Compare ---- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); align-items: baseline; }
.vs-row dt { color: var(--ink-faint); }
.vs-row dd, .vs-row dt { min-width: 0; margin: 0; }   /* let a long email/name wrap, never widen the row */
@media (max-width: 640px) { .vs-row { grid-template-columns: 90px 1fr 1fr; } }

/* ---- Footer ---- */
.site-foot { background: var(--bg-ink); color: var(--ink-on-dark-soft); margin-top: var(--sp-14); padding: var(--sp-10) 0; font-size: var(--fs-sm); }
.site-foot a { color: var(--ink-on-dark-soft); }
.site-foot a:hover { color: var(--ink-on-dark); }
.foot-top { display: grid; grid-template-columns: 1.7fr 3fr; gap: var(--sp-8) var(--sp-10); }
.foot-brand { max-width: 40ch; }
.foot-tag { margin-top: var(--sp-3); color: var(--ink-on-dark-soft); max-width: 34ch; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); }
.foot-col h3 { color: var(--ink-on-dark); font-size: var(--fs-sm); font-weight: 700; margin: 0 0 var(--sp-3); }
.foot-col ul { margin: 0; padding: 0; }
.foot-col li { list-style: none; padding: 3px 0; }
.foot-districts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--ink-on-dark) 12%, transparent); }
.foot-districts__label { font-weight: 700; color: var(--ink-on-dark); margin-right: 4px; }
.foot-chip { display: inline-flex; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font-size: var(--fs-xs); text-decoration: none; }
.foot-chip:hover { background: rgba(255,255,255,0.13); color: var(--ink-on-dark); }
@media (max-width: 900px) {
	.foot-top { grid-template-columns: 1fr; gap: var(--sp-6); }
	.foot-cols { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
}
@media (max-width: 440px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--ink-on-dark) 15%, transparent); font-size: var(--fs-xs); }
.foot-legal-links { display: flex; gap: var(--sp-4); }
.foot-legal a { font-weight: 600; }

/* Pickup satisfaction rating (member) */
.pk-stars { display: flex; gap: 6px; margin-top: 4px; }
.pk-star { cursor: pointer; }
.pk-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-star span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-soft); background: var(--bg-card); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.pk-star:hover span { border-color: var(--act); color: var(--act-hover); }
.pk-star:has(input:checked) span { background: var(--act); border-color: var(--act); color: #fff; }
.pk-star input:focus-visible + span { outline: 2px solid var(--act); outline-offset: 2px; }
.news-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); max-width: 340px; }
.news-form input {
	flex: 1; font: inherit; font-size: var(--fs-sm);
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--r-pill); padding: 9px 14px; color: var(--ink-on-dark);
}
.news-form input::placeholder { color: var(--ink-on-dark-soft); }

/* ---- Utility ---- */
.empty-note { text-align: center; color: var(--ink-faint); padding: var(--sp-10) var(--sp-4); }
.pager { display: flex; gap: var(--sp-2); justify-content: center; padding: var(--sp-6) 0; }
.pager a, .pager span {
	min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
}
.pager .now { background: var(--bg-card); border: 1px solid var(--line-strong); color: var(--ink); }
.star { color: var(--sun); }
.gem-dot { color: var(--warn-600); }

/* [hidden] must always win over explicit display values */
[hidden] { display: none !important; }

/* ---- Forms (account, planner, groups) ---- */
.form-stack { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 460px; }
.form-stack label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: var(--sp-1); }
/* A checkbox is not a text field (v6.28). This rule gave every input inside a
   form 100% width plus a text-field's padding and border, so a checkbox
   stretched the full line and its label wrapped underneath it, which is how the
   table form's Special wishes ended up with the box floating above the words.
   Excluding the two box types fixes it everywhere at once rather than one form
   at a time. */
.form-stack input:not([type="checkbox"]):not([type="radio"]), .form-stack select, .form-stack textarea {
	width: 100%; font: inherit; font-size: var(--fs-base);
	border: 1px solid var(--line-strong); border-radius: var(--r-md);
	background: var(--bg-card); color: var(--ink); padding: 11px 14px;
}
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus { outline: none; border-color: var(--act); box-shadow: var(--ring); }
.form-error { background: #FBE9E7; color: var(--bad-600); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }

/* ---- Passport ---- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); align-items: stretch; }
.badge-card { text-align: center; }
.badge-card .emoji { font-size: 2rem; filter: grayscale(1); opacity: 0.45; }
.badge-card.earned .emoji { filter: none; opacity: 1; }
.badge-bar { height: 6px; background: var(--bg-dip); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-2); }
.badge-bar span { display: block; height: 100%; background: var(--sun); border-radius: inherit; }
.badge-card.earned .badge-bar span { background: var(--act); }

/* ---- Planner timeline ---- */
.day-block { margin-bottom: var(--sp-6); }
.day-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.slot-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.slot-row:last-child { border-bottom: none; }
.slot-label { font-size: var(--fs-sm); font-weight: 700; color: var(--act-hover); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 3px; }

/* ---- Profile action bar & reviews ---- */
.act-bar .btn.is-on { background: var(--match-wash); border-color: var(--match); color: var(--match); }
.js-fav .cb-ico { vertical-align: -2px; }
.js-fav.is-on .cb-ico { fill: currentColor; }
.memory-note { background: var(--act-wash); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.review-item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.review-item:last-child { border-bottom: none; }
.review-item .who { font-weight: 700; }
.stars { color: var(--sun); letter-spacing: 1px; }

/* ---- Toasts & dialogs (replace browser defaults) ---- */
.cb-toast-region { position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.cb-toast {
	background: var(--bg-ink); color: var(--ink-on-dark);
	border-radius: var(--r-pill); padding: 10px 20px;
	font-size: var(--fs-sm); font-weight: 600;
	box-shadow: var(--shadow-pop); max-width: min(92vw, 480px); text-align: center;
}
.cb-overlay {
	position: fixed; inset: 0; background: rgba(16, 40, 44, 0.45);
	z-index: 95; display: grid; place-items: center; padding: var(--sp-4);
}
.cb-dialog {
	background: var(--bg-card); border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop); width: 100%; max-width: 400px;
	padding: var(--sp-6); text-align: center;
}
.cb-dialog h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.cb-dialog .big { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: 0.02em; margin: var(--sp-3) 0; color: var(--ink); user-select: all; }
.cb-dialog p { font-size: var(--fs-sm); color: var(--ink-soft); }
.cb-dialog .row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   Editorial: blog & guide articles (v1.8)
   -------------------------------------------------------------------------- */
.article-body { line-height: 1.75; color: var(--ink); }
.article-body h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-3); }
.article-body h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
.article-body p { margin-bottom: var(--sp-4); }
.article-body ul, .article-body ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.article-body li { margin-bottom: var(--sp-2); }
.article-body a { color: var(--act); text-decoration-color: color-mix(in srgb, var(--act) 40%, transparent); }
.article-body strong { color: var(--ink); }
.article-body blockquote { border-left: 3px solid var(--sun); padding-left: var(--sp-4); color: var(--ink-soft); margin: var(--sp-5) 0; }

/* FAQ blocks on landing pages */
.faq-block details { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.faq-block summary { font-weight: 700; cursor: pointer; }
.faq-block p { margin-top: var(--sp-2); color: var(--ink-soft); line-height: 1.65; }

/* --------------------------------------------------------------------------
   cb-lightbox (v1.8.3), fixed-frame photo viewer
   -------------------------------------------------------------------------- */
.photo-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); }
.photo-zoom:focus-visible { outline: none; box-shadow: var(--ring); }
.photo-zoom img { display: block; }

.cb-lightbox {
	position: fixed; inset: 0; z-index: 250;
	display: none; align-items: center; justify-content: center; gap: var(--sp-3);
	background: color-mix(in srgb, var(--ink) 90%, transparent);
	padding: var(--sp-4);
}
.cb-lightbox.is-open { display: flex; }

/* The fixed frame: identical stage for every photo, image letterboxed inside */
.lb-stage {
	width: min(92vw, 1040px); height: min(80vh, 700px);
	display: flex; flex-direction: column; margin: 0;
}
.lb-stage img {
	flex: 1; min-height: 0; width: 100%; object-fit: contain;
	border-radius: var(--r-md);
	transition: opacity 0.15s ease;
}
.cb-lightbox.is-loading .lb-stage img { opacity: 0.3; }
.lb-stage figcaption {
	display: flex; justify-content: space-between; gap: var(--sp-3);
	padding-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-on-dark);
	min-height: 1.6em;
}
.lb-caption { opacity: 0.85; }
.lb-count { opacity: 0.6; font-variant-numeric: tabular-nums; }

.cb-lightbox button {
	border: 0; background: color-mix(in srgb, #ffffff 12%, transparent);
	color: var(--ink-on-dark); cursor: pointer; border-radius: var(--r-pill);
	width: 44px; height: 44px; font-size: 26px; line-height: 1; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
}
.cb-lightbox button:hover { background: color-mix(in srgb, #ffffff 22%, transparent); }
.cb-lightbox button:focus-visible { outline: none; box-shadow: var(--ring); }
.lb-close { position: absolute; top: var(--sp-4); right: var(--sp-4); }

@media (max-width: 700px) {
	.cb-lightbox { padding: var(--sp-2); gap: var(--sp-1); }
	.lb-stage { width: 96vw; height: 72vh; }
	.lb-prev, .lb-next { position: absolute; bottom: var(--sp-4); z-index: 1; }
	.lb-prev { left: var(--sp-4); }
	.lb-next { right: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
	.lb-stage img { transition: none; }
}

/* ---- Language switcher (v2.5) ---- */
/* account menu: name + hover/click dropdown with logout */
.acct-dd { position: relative; display: inline-flex; }
.acct-dd__btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-card); border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); max-width: 170px; }
.acct-dd__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-dd__btn:hover { background: var(--bg-dip); }
.acct-dd__chev { opacity: .6; transition: transform .16s ease; flex: none; }
.acct-dd:hover .acct-dd__chev, .acct-dd.is-open .acct-dd__chev { transform: rotate(180deg); }
.acct-dd__panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 176px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(16,40,44,.16); padding: 5px; display: none; z-index: 80; }
/* hover bridge so crossing the gap from the button to the panel never closes it */
.acct-dd__panel::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.acct-dd:hover > .acct-dd__panel, .acct-dd:focus-within > .acct-dd__panel, .acct-dd.is-open > .acct-dd__panel { display: block; }
.acct-dd__item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.acct-dd__item:hover { background: var(--bg-dip); }
.acct-dd__item--out { color: var(--match, #CE3D6E); font-weight: 600; }
.acct-dd__item--out svg { width: 15px; height: 15px; }

/* compact language dropdown (replaces the four inline pills) */
.lang-dd { position: relative; display: inline-flex; }
.lang-dd__btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg-card); border-radius: var(--r-pill); padding: 6px 10px; cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.lang-dd__btn:hover { background: var(--bg-dip); color: var(--ink); }
.lang-dd__chev { opacity: .6; transition: transform .16s ease; }
.lang-dd:hover .lang-dd__chev, .lang-dd.is-open .lang-dd__chev { transform: rotate(180deg); }
.lang-dd__panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 158px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(16,40,44,.16); padding: 5px; display: none; z-index: 80; }
.lang-dd__panel::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.lang-dd:hover > .lang-dd__panel, .lang-dd.is-open > .lang-dd__panel { display: block; }
.lang-dd__item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; }
.lang-dd__item:hover { background: var(--bg-dip); }
.lang-dd__item.is-here { background: var(--act-wash); color: var(--act-hover); font-weight: 600; }
.lang-dd__code { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-faint); width: 22px; flex: none; }

/* ---- Live name search (directory) ---- */
.name-seek { position: relative; margin-bottom: var(--sp-3); max-width: 420px; }
.name-seek input { width: 100%; font: inherit; font-size: var(--fs-sm); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 10px 18px; background: var(--bg-card); }
.name-seek-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,0.12)); z-index: 40; overflow: hidden; }
.name-seek-drop a { display: block; padding: 10px 16px; font-size: var(--fs-sm); color: var(--ink); }
.name-seek-drop a:hover { background: var(--act-wash); }

/* ---- Description body: ONE typographic rule for every restaurant
   description, whatever its source. ---- */
.desc-body { max-width: 62ch; color: var(--ink-soft); }
.desc-body p { margin: 0 0 var(--sp-3); line-height: 1.65; }
.desc-body p:last-child { margin-bottom: 0; }
.desc-body strong { color: var(--ink); font-weight: 600; }
.desc-body ul, .desc-body ol { margin: 0 0 var(--sp-3); padding-left: 1.2em; line-height: 1.65; }
.desc-body li { margin-bottom: 4px; }

/* ==========================================================================
   Discovery, "Island Index"
   Explore hub (hero band + featured category + tiles), the elevated directory
   header + filter bar, and the map layer toggle. Uses the existing tokens only.
   ========================================================================== */

/* Explore hero band */
.island-hero { position: relative; overflow: hidden; background: var(--bg-ink); color: var(--ink-on-dark); border-radius: var(--r-xl); padding: clamp(var(--sp-8), 5vw, var(--sp-14)) clamp(var(--sp-6), 5vw, var(--sp-14)); }
.island-hero .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sun); margin: 0 0 var(--sp-4); }
.island-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 14ch; }
.island-hero > p { color: var(--ink-on-dark-soft); font-size: var(--fs-md); max-width: 44ch; margin: var(--sp-5) 0 0; }
.island-hero .tally { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-6); }
.island-hero .tally span { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-on-dark); background: rgba(242, 247, 246, 0.08); border: 1px solid rgba(242, 247, 246, 0.14); padding: 6px 12px; border-radius: var(--r-pill); }
.island-hero .tally b { color: var(--sun); font-family: var(--font-display); font-weight: 800; }
.island-hero .sun { position: absolute; top: -70px; right: -40px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, var(--citrus-500), #E08A1E); opacity: 0.16; pointer-events: none; }
.island-hero .waves { position: absolute; right: 24px; bottom: 20px; width: 180px; opacity: 0.22; color: var(--teal-100); pointer-events: none; }
@media (max-width: 640px) { .island-hero .waves { display: none; } }

/* Featured category band */
.xp-featured { position: relative; overflow: hidden; margin-top: var(--sp-5); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); background: linear-gradient(120deg, var(--sun-wash), #FFFFFF 70%); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(var(--sp-6), 4vw, var(--sp-10)); color: var(--ink); transition: transform 160ms ease, box-shadow 160ms ease; }
.xp-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.xp-featured .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 0.9; letter-spacing: -0.03em; }
.xp-featured .lead-name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); margin: var(--sp-1) 0 0; }
.xp-featured .blurb { color: var(--ink-soft); font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-5); max-width: 38ch; }
.xp-featured .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.xp-featured .chips span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); background: var(--bg-card); border: 1px solid var(--line-strong); padding: 4px 10px; border-radius: var(--r-pill); }
.xp-featured .side { display: flex; align-items: center; justify-content: center; }
.xp-featured .emblem { width: 132px; height: 132px; border-radius: var(--r-xl); background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; color: var(--act); }
.xp-featured .emblem svg { width: 60px; height: 60px; }
@media (max-width: 720px) { .xp-featured { grid-template-columns: 1fr; } .xp-featured .side { display: none; } }

/* Section eyebrow with rule */
.section-eyebrow { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-10) 0 var(--sp-5); }
.section-eyebrow h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0; white-space: nowrap; }
.section-eyebrow .rule { height: 1px; background: var(--line-strong); flex: 1; }

/* Category tiles */
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--sp-4); }
.xp-tile { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); color: var(--ink); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.xp-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.xp-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--sun-wash); color: var(--warn-600); margin-bottom: var(--sp-1); }
.xp-tile:nth-child(even) .xp-ico { background: var(--act-wash); color: var(--act); }
.xp-ico svg { width: 24px; height: 24px; }
.xp-count { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.xp-count small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-left: 6px; }
.xp-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink); }
.xp-blurb { color: var(--ink-soft); font-size: var(--fs-sm); }
.xp-go { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--act); }
.xp-go .arw { display: inline-block; transition: transform 160ms ease; }
.xp-tile:hover .xp-go .arw { transform: translateX(4px); }
.xp-tile.soon { background: var(--wash-0); }
.xp-tile.soon .xp-ico { background: var(--bg-dip); color: var(--ink-faint); }
.xp-tile.soon .xp-name { color: var(--ink-soft); }
.xp-soon-pill { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg-dip); border-radius: var(--r-pill); padding: 4px 10px; }

/* Directory header */
.dir-head { margin-bottom: var(--sp-6); }
.dir-head .kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--act); }
.dir-head h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); letter-spacing: -0.03em; line-height: 1; margin: var(--sp-2) 0 0; }
.dir-head .rule { width: 64px; height: 4px; border-radius: 4px; background: var(--sun); margin-top: var(--sp-4); }
.dir-head .count-line { color: var(--ink-soft); font-size: var(--fs-md); margin: var(--sp-4) 0 0; }
.dir-head .count-line b { color: var(--ink); font-family: var(--font-display); font-weight: 800; }

/* Elevated filter bar (wraps the existing search + filter form) */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--shadow-card); }
.filterbar .name-seek { margin: 0; flex: 1 1 220px; min-width: 180px; max-width: none; }
.filterbar .name-seek input { border-radius: var(--r-pill); background: var(--wash-0); padding: 9px 16px; }
.filterbar .filter-rail { padding: 0; gap: var(--sp-2); }
.filterbar .filter-rail select, .filterbar .filter-rail .mood-chip { background: var(--wash-0); }
.filterbar .filter-rail [data-near] { margin-left: auto; }

/* Map layer toggle (Restaurants / Attractions / Both) */
.map-types { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--sp-4); background: var(--bg-dip); border: 1px solid var(--line); border-radius: var(--r-pill); }
.map-type { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.map-type:hover { color: var(--ink); }
.map-type.is-active { background: var(--bg-card); color: var(--act); box-shadow: var(--shadow-card); }

/* Inline line-icons (Icons::svg), inherit surrounding size & colour */
.cb-ico { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.portal-nav .ico { display: inline-flex; align-items: center; justify-content: center; }
.portal-tab .ico { font-size: 1.15rem; }

/* ==========================================================================
   Bites Club rewards ("Island Index"), petrol hero + Bites coin + treat cards
   ========================================================================== */
.club-hero { position: relative; overflow: hidden; background: var(--bg-ink); color: var(--ink-on-dark); border-radius: var(--r-xl); padding: clamp(var(--sp-8), 5vw, var(--sp-14)); display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-8); align-items: center; }
.club-hero .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sun); margin: 0 0 var(--sp-4); }
.club-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 0.95; letter-spacing: -0.03em; margin: 0; }
.club-hero .club-lead { color: var(--ink-on-dark-soft); font-size: var(--fs-md); max-width: 46ch; margin: var(--sp-5) 0 0; }
.club-hero .sun { position: absolute; top: -90px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, var(--citrus-500), #E08A1E); opacity: 0.14; pointer-events: none; }
.club-balance { position: relative; justify-self: center; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FBC55A, var(--citrus-500)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--petrol-950); box-shadow: 0 18px 40px -12px rgba(240, 167, 44, 0.55); border: 6px solid rgba(255, 255, 255, 0.14); }
.club-balance .num { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; }
.club-balance .lbl { font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.club-balance .cap { font-size: var(--fs-xs); font-weight: 600; color: rgba(16, 40, 44, 0.7); margin-top: 2px; }
.club-join { display: flex; flex-direction: column; gap: var(--sp-3); justify-self: center; text-align: center; }
.club-join .lead { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--ink-on-dark); }
.club-join .btn { justify-content: center; }
@media (max-width: 760px) { .club-hero { grid-template-columns: 1fr; gap: var(--sp-6); } .club-balance { width: 170px; height: 170px; } .club-balance .num { font-size: 2.8rem; } }

.club-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.club-step { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.club-step .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun-wash); color: var(--warn-600); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.club-step h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.club-step p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }
.club-step .earn { color: var(--act); font-weight: 700; }
@media (max-width: 640px) { .club-steps { grid-template-columns: 1fr; } }

.bz-head { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-10) 0 var(--sp-5); }
.bz-head h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0; }
.near-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--act); background: var(--act-wash); border: 0; border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer; }
.near-btn .cb-ico { width: 15px; height: 15px; }

.bz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.bz-grid > * { min-width: 0; }
@media (min-width: 640px) { .bz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .bz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bz-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); transition: transform 160ms ease, box-shadow 160ms ease; }
.bz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.bz-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.bz-coin { flex: none; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FBC55A, var(--citrus-500)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--petrol-950); box-shadow: 0 4px 12px -3px rgba(240, 167, 44, 0.5); }
.bz-coin b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.bz-coin span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.bz-welcome { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn-600); background: var(--sun-wash); border-radius: var(--r-pill); padding: 3px 10px; }
.bz-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); }
.bz-venue { color: var(--ink-faint); font-size: var(--fs-sm); margin-top: 2px; }
.bz-venue a { color: var(--act); font-weight: 600; }
.bz-desc { color: var(--ink-soft); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }
.bz-cta { margin-top: auto; padding-top: var(--sp-4); }
.bz-cta .btn { width: 100%; justify-content: center; }
.bz-cta .js-redeem:disabled { background: var(--bg-dip); color: var(--ink-faint); cursor: default; }
.togo-bar { height: 6px; border-radius: 999px; background: var(--bg-dip); overflow: hidden; margin-bottom: 8px; }
.togo-bar span { display: block; height: 100%; background: var(--sun); border-radius: 999px; }
.club-note { max-width: 72ch; color: var(--ink-faint); font-size: var(--fs-sm); margin-top: var(--sp-10); line-height: 1.6; }

/* Elevated reasons: teal check bullets instead of the em dash */
.reasons li { position: relative; padding-left: 20px; }
.reasons li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--act-wash); }
.reasons li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 4px; height: 2px; border-left: 2px solid var(--act); border-bottom: 2px solid var(--act); transform: rotate(-45deg); }

/* ==========================================================================
   Offers, coupon / ticket cards (petrol hero + perforated deal tickets)
   ========================================================================== */
.off-hero { position: relative; overflow: hidden; background: var(--bg-ink); color: var(--ink-on-dark); border-radius: var(--r-xl); padding: clamp(var(--sp-8), 5vw, var(--sp-14)); }
.off-hero .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sun); margin: 0 0 var(--sp-4); }
.off-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 15ch; }
.off-hero > p { color: var(--ink-on-dark-soft); font-size: var(--fs-md); max-width: 46ch; margin: var(--sp-5) 0 0; }
.off-hero .tally { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-6); }
.off-hero .tally span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-on-dark); background: rgba(242, 247, 246, 0.08); border: 1px solid rgba(242, 247, 246, 0.14); padding: 6px 12px; border-radius: var(--r-pill); }
.off-hero .tally b { color: var(--sun); font-family: var(--font-display); font-weight: 800; }
.off-hero .sun { position: absolute; top: -80px; right: -50px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, var(--citrus-500), #E08A1E); opacity: 0.14; pointer-events: none; }

.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.ticket { display: grid; grid-template-columns: 150px 1fr; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: transform 160ms ease, box-shadow 160ms ease; }
.ticket:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.ticket .pic { position: relative; border-radius: var(--r-lg) 0 0 var(--r-lg); min-height: 190px; }
.ticket .pic .type { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn-600); background: var(--sun-wash); border-radius: var(--r-pill); padding: 4px 10px; box-shadow: 0 1px 2px rgba(16, 40, 44, 0.15); }
.ticket .body { position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6); border-left: 2px dashed var(--line-strong); display: flex; flex-direction: column; }
.ticket .body::before, .ticket .body::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-page); border: 1px solid var(--line); }
.ticket .body::before { top: -11px; }
.ticket .body::after { bottom: -11px; }
.ticket .deal { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.ticket .deal .val { color: var(--warn-600); }
.ticket .desc { color: var(--ink-soft); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.ticket .venue { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-faint); }
.ticket .venue a { color: var(--act); font-weight: 600; }
.ticket .foot { margin-top: auto; padding-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ticket .ends { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.ticket .ends.soon { color: var(--bad-600); }
.ticket .ends .cb-ico { width: 13px; height: 13px; }
.ticket .view { font-size: var(--fs-sm); font-weight: 700; color: var(--act); white-space: nowrap; }
@media (max-width: 520px) {
	.ticket-grid { grid-template-columns: 1fr; }
	.ticket { grid-template-columns: 1fr; }
	.ticket .pic { border-radius: var(--r-lg) var(--r-lg) 0 0; min-height: 130px; }
	.ticket .body { border-left: 0; border-top: 2px dashed var(--line-strong); }
	.ticket .body::before { top: -11px; left: -11px; }
	.ticket .body::after { top: -11px; left: auto; right: -11px; bottom: auto; }
}

/* ---- Structured menu board (public profile) ---- */
.menu-board { background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); }
.menu-board-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--sun); }
.menu-board-head h2 { font-family: var(--font-display, inherit); color: var(--ink); font-size: var(--fs-xl); margin: 0; }
.menu-board-note { color: var(--ink-faint); font-size: var(--fs-sm); }
.menu-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-14); }
.menu-sec { break-inside: avoid; }
.menu-sec-title { color: var(--act); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); letter-spacing: 0.01em; }
.menu-item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: 0; }
.menu-item-line { display: flex; align-items: baseline; }
.menu-item-name { color: var(--ink); font-weight: 600; }
.menu-item-lead { flex: 1 1 auto; margin: 0 var(--sp-2); transform: translateY(-3px); border-bottom: 1px dotted var(--line-strong); }
.menu-item-price { flex: 0 0 auto; color: var(--sun); font-weight: 700; font-variant-numeric: tabular-nums; }
.menu-item-desc { color: var(--ink-soft); font-size: var(--fs-sm); margin: 2px 0 0; max-width: 52ch; }
@media (max-width: 720px) {
	.menu-board { padding: var(--sp-5); }
	.menu-sections { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---- Phantom Menu (owner: what people wanted from you) ---- */
.phantom-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.phantom-ico { flex: 0 0 auto; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--sun-wash); color: var(--sun); }
.phantom-ico svg { width: 22px; height: 22px; }
.phantom-headline { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); margin-bottom: var(--sp-4); }
.phantom-num { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--sun); }
.phantom-num-label { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 44ch; }
.phantom-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.phantom-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.phantom-count { flex: 0 0 auto; min-width: 2ch; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--act); }
.phantom-copy { flex: 1; }
.phantom-gap { font-weight: 700; color: var(--ink); }
.phantom-sub { font-size: var(--fs-sm); color: var(--ink-faint); }
.phantom-lock { text-align: center; padding: var(--sp-5) var(--sp-4); background: var(--sun-wash); border-radius: var(--r-md); }
.phantom-lock p { margin-bottom: var(--sp-3); color: var(--ink-soft); max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Revenue autopilot, opportunity cards */
.opp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.opp-type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--sun-wash); color: var(--warn-600); }
.opp-type.advisory { background: var(--act-wash); color: var(--act-hover); }
.opp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0; }
.opp-est { background: var(--bg-dip); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.opp-pnl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
@media (max-width: 560px) { .opp-pnl { grid-template-columns: 1fr; } }
.opp-net { background: var(--good-100); color: var(--good-600); border-radius: var(--r-md); padding: 8px 12px; font-weight: 700; font-size: var(--fs-sm); }
.opp-dial { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.opp-dial .seg { flex: 1; text-align: center; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: var(--bg-card); }
.opp-dial .seg.on { background: var(--ink); color: var(--ink-on-dark); border-color: var(--ink); }
.opp-dial .seg.soon { opacity: 0.5; }

/* ==========================================================================
   Homepage closing bands: get-the-app + the food-lover / owner join split
   ========================================================================== */
.app-band { background: var(--bg-ink); color: var(--ink-on-dark); padding: var(--sp-14) 0; }
.app-band__inner { display: flex; align-items: center; gap: var(--sp-10); }
.app-band__phone { flex: none; }
.app-band__copy { min-width: 0; }
.app-band__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); font-weight: 700; color: var(--sun); margin-bottom: var(--sp-2); }
.app-band__copy h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.1; color: #fff; }
.app-band__copy p { color: var(--ink-on-dark-soft); font-size: var(--fs-md); line-height: 1.55; margin-top: var(--sp-3); max-width: 42ch; }
.app-band__soon { font-size: var(--fs-sm); color: var(--ink-on-dark-soft); margin-top: var(--sp-3); }

/* CSS phone mockup, a faithful mini of the app home */
.phone { width: 232px; height: 470px; border-radius: 34px; background: #05171A; padding: 10px; box-shadow: var(--shadow-pop); position: relative; }
.phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 74px; height: 18px; border-radius: var(--r-pill); background: #05171A; z-index: 2; }
.phone__screen { height: 100%; border-radius: 25px; background: var(--wash-50); padding: 30px var(--sp-4) var(--sp-4); overflow: hidden; }
.phone__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.02em; }
.phone__brand em { font-style: normal; color: var(--act); }
.phone__greet { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--sp-2); line-height: 1.4; }
.phone__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.phone__chip { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 10px; }
.phone__chip.is-on { background: var(--act-wash); color: var(--act-hover); border-color: transparent; }
.phone__card { display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-card); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--sp-3); margin-top: var(--sp-4); }
.phone__ring { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.phone__ring b { position: absolute; font-size: 13px; font-weight: 800; color: var(--act-hover); }
.phone__card-text { display: flex; flex-direction: column; min-width: 0; }
.phone__card-text b { font-size: var(--fs-sm); color: var(--ink); }
.phone__card-text i { font-style: normal; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* Store badges, dark pill buttons with an app icon + two-line label */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.store-badge { display: inline-flex; align-items: center; gap: var(--sp-2); background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md); padding: 9px 16px; transition: transform 140ms ease, border-color 140ms ease; }
a.store-badge:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.4); color: #fff; }
span.store-badge { cursor: default; opacity: 0.92; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge small { font-size: var(--fs-xs); letter-spacing: 0.02em; opacity: 0.85; }
.store-badge b { font-size: var(--fs-base); font-weight: 600; }

/* Join split, food lovers vs owners */
.join-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.join-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.join-card__ico { width: 44px; height: 44px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--act-wash); color: var(--act-hover); }
.join-card__ico--owner { background: var(--sun-wash); color: var(--warn-600); }
.join-card h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin-top: var(--sp-3); }
.join-list { list-style: none; margin: var(--sp-3) 0 var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.join-list li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: var(--fs-base); }
.join-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--act-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A5A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.join-card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 760px) {
	.app-band { padding: var(--sp-10) 0; }
	.app-band__inner { flex-direction: column; gap: var(--sp-8); text-align: center; }
	.app-band__copy p { margin-left: auto; margin-right: auto; }
	.store-badges { justify-content: center; }
	.join-grid { grid-template-columns: 1fr; }
	.join-card .btn { align-self: stretch; text-align: center; }
}

/* ============================================================
   The Pass, front-of-house tablet (owner service board)
   ============================================================ */
body:has(.svc-page) .site-head { display: none; }

.svc-page { min-height: 100vh; background: var(--bg-dip); }

/* App bar */
.svc-top {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-5);
	background: var(--bg-ink); color: var(--ink-on-dark);
	box-shadow: var(--shadow-card);
}
.svc-top__id { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.svc-top__eyebrow { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); font-weight: 700; }
.svc-top__venue { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-top__actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.svc-top__link { color: var(--ink-on-dark-soft, #B9CCC9); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; padding: 10px 12px; border-radius: var(--r-pill); }
.svc-top__link:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* The signature: the scan hero */
.svc-scan-btn {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 56px; padding: 0 var(--sp-5);
	background: var(--sun); color: var(--ink);
	border: none; border-radius: var(--r-pill);
	font-family: var(--font-body); font-weight: 800; font-size: var(--fs-md);
	cursor: pointer; box-shadow: 0 6px 18px rgba(240,167,44,0.35);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.svc-scan-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(240,167,44,0.45); }
.svc-scan-btn:active { transform: translateY(0); }

/* Board */
.svc-wrap { max-width: 1180px; margin: 0 auto; padding: var(--sp-5); }
.svc-glance {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4);
	background: var(--act-wash); border-radius: var(--r-md);
	color: var(--act-hover); font-weight: 600; font-size: var(--fs-md);
}
.svc-glance__n { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--act); }
.svc-glance__dot { color: var(--ink-faint); }

.svc-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.svc-lane { min-width: 0; }
.svc-lane__head {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink);
	margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line);
}
.svc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 800; }
.svc-count--sun { background: var(--sun); color: var(--ink); }

.svc-empty { color: var(--ink-faint); font-size: var(--fs-sm); padding: var(--sp-4) 0; }

/* Cards */
.svc-card {
	background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-card); padding: var(--sp-4);
	margin-bottom: var(--sp-3); border-left: 4px solid transparent;
}
.svc-card--wait { border-left-color: var(--sun); }
.svc-card--ready { border-left-color: var(--act); }
.svc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.svc-card__name { font-size: var(--fs-md); }
.svc-card__meta { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; }
.svc-card__body { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-2); line-height: 1.5; }
.svc-card__body a { color: var(--act); font-weight: 600; }
.svc-card__msg { margin-top: 6px; color: var(--ink); }
.svc-card__handover { margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 700; color: var(--act-hover); }
.svc-wishes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* Big touch actions */
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.svc-actions__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.svc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 var(--sp-4);
	border-radius: var(--r-md); border: 1.5px solid transparent;
	font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md);
	cursor: pointer; background: var(--bg-card); color: var(--ink);
	transition: transform 0.1s ease, filter 0.1s ease; user-select: none;
}
.svc-btn:active { transform: scale(0.97); }
.svc-btn[disabled] { opacity: 0.5; pointer-events: none; }
.svc-btn--go { background: var(--act); border-color: var(--act); color: #fff; }
.svc-btn--go:hover { background: var(--act-hover); }
.svc-btn--band { background: var(--sun-wash); border-color: var(--sun); color: var(--ink); }
.svc-btn--band:hover { filter: brightness(0.97); }
/* The quiet close (26 Aug): a wash of the action colour, so "Done" reads as
   a pressable thing beside the solid moves without competing with them. */
.svc-btn--done { background: var(--act-wash); border-color: var(--act); color: var(--ink); }
.svc-btn--done:hover { filter: brightness(0.97); }
.svc-btn--soft { border-color: var(--line-strong); color: var(--ink-soft); }
.svc-btn--danger { border-color: var(--line-strong); color: var(--bad-600); background: var(--bg-card); }
.svc-btn--danger:hover { background: var(--bad-100, #FBE9E7); }

/* Propose / decline expanders */
.svc-more { position: relative; }
.svc-more > summary { list-style: none; }
.svc-more > summary::-webkit-details-marker { display: none; }
.svc-more__body { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.svc-input { min-height: 48px; padding: 0 12px; font: inherit; font-size: 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-card); color: var(--ink); }
.svc-input--wide { flex: 1; min-width: 200px; }

/* Scan overlay */
.svc-scan { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(16,40,44,0.72); backdrop-filter: blur(3px); }
.svc-scan[hidden] { display: none; }
.svc-scan__panel { position: relative; width: 100%; max-width: 460px; background: var(--bg-card); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: var(--sp-6); }
.svc-scan__close { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 30px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.svc-scan__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); }
.svc-scan__hint { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: 6px; }
.svc-scan__stage { position: relative; margin: var(--sp-4) 0; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-ink); }
.svc-scan__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-scan__reticle { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,0.85); border-radius: var(--r-md); box-shadow: 0 0 0 100vmax rgba(16,40,44,0.25); }
.svc-scan__manual { display: flex; gap: var(--sp-2); }
.svc-scan__input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; font: inherit; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.12em; text-align: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); text-transform: uppercase; }

.svc-result { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 4px; }
.svc-result[hidden] { display: none; }
.svc-result b { font-family: var(--font-display); font-size: var(--fs-lg); }
.svc-result span { font-size: var(--fs-sm); }
.svc-result--reward, .svc-result--pickup, .svc-result--arrival { background: var(--act-wash); color: var(--act-hover); }
.svc-result--student { background: var(--sun-wash); color: #8A5A12; }
.svc-result--ok { background: var(--act-wash); color: var(--act-hover); }
.svc-result--miss { background: var(--bad-100, #FBE9E7); color: var(--bad-600); }

/* Toast */
.svc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 80; padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.svc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 820px) {
	.svc-lanes { grid-template-columns: 1fr; }
	.svc-top { padding: var(--sp-3) var(--sp-4); }
	.svc-scan-btn span { display: none; }
	.svc-scan-btn { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.svc-btn, .svc-scan-btn, .svc-toast { transition: none; }
}

/* ---- Together, live (friends deciding, real-time voting) ---- */
.tg-members { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.tg-members:empty { display: none; }

.tg-live-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.tg-picks { display: flex; flex-direction: column; gap: var(--sp-2); }

.tg-pick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	transition: border-color .15s ease, background .15s ease;
}
.tg-pick.is-voted { border-color: var(--act); background: var(--act-wash); }
.tg-pick-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tg-pick-name {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tg-pick-name:hover { color: var(--act); }
.tg-pick-place { font-size: var(--fs-sm); color: var(--ink-faint); }
.tg-pick-side { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.tg-tally { font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; }
.tg-tally b { font-size: var(--fs-base); color: var(--act-hover); font-weight: 800; }

.tg-vote {
	appearance: none;
	border: 1px solid var(--act);
	background: transparent;
	color: var(--act);
	font: inherit;
	font-weight: 700;
	font-size: var(--fs-sm);
	border-radius: var(--r-pill);
	padding: 8px 16px;
	min-height: 40px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.tg-vote:hover { background: var(--act-wash); }
.tg-vote.is-voted { background: var(--act); color: #fff; }
.tg-vote:disabled { opacity: .6; cursor: default; }

.tg-lock { width: 100%; justify-content: center; margin-top: var(--sp-4); }
.tg-lock-note { font-size: var(--fs-sm); color: var(--ink-faint); text-align: center; margin-top: var(--sp-2); }

/* ---- Vote allowance + per-venue group-fit score (the decide-page redesign) ---- */
.tg-live-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tg-live-head .tg-live-title { margin-bottom: 0; }
.tg-votesleft { font-size: var(--fs-xs); font-weight: 700; color: var(--act-hover); background: var(--act-wash); border-radius: var(--r-pill); padding: 4px 12px; white-space: nowrap; flex: none; }
.tg-votesleft.is-spent { color: var(--ink-faint); background: var(--bg-dip); }
.tg-fit { display: flex; align-items: center; gap: var(--sp-2); margin-top: 6px; }
.tg-fit-bar { flex: 1; max-width: 190px; height: 6px; border-radius: var(--r-pill); background: var(--bg-dip); overflow: hidden; }
.tg-fit-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--act); }
.tg-fit b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); color: var(--act); }
.tg-fit-of { font-size: 10px; color: var(--ink-faint); font-weight: 700; }

/* ---- Branded lock-in modal (replaces the browser confirm) ---- */
.tg-scrim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
	background: color-mix(in srgb, var(--ink) 45%, transparent); backdrop-filter: blur(4px); animation: tgFade 0.16s ease; }
@keyframes tgFade { from { opacity: 0; } to { opacity: 1; } }
.tg-modal { width: min(420px, 100%); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl);
	box-shadow: var(--shadow-pop); padding: var(--sp-8) var(--sp-6) var(--sp-6); text-align: center; animation: tgPop 0.2s cubic-bezier(0.2,0.8,0.25,1); }
@keyframes tgPop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.tg-modal-ico { width: 52px; height: 52px; margin: 0 auto var(--sp-4); border-radius: 50%; display: grid; place-items: center; background: var(--act-wash); color: var(--act); }
.tg-modal-ico svg { width: 24px; height: 24px; }
.tg-modal h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.tg-modal h3 b { color: var(--act); }
.tg-modal p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-5); }
.tg-modal-row { display: flex; gap: var(--sp-3); }
.tg-modal-row .btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tg-scrim, .tg-modal { animation: none; } }

/* ---- Consensus banner (the answer nobody hates) ---- */
.tg-consensus {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
	background: var(--act-wash); border: 1px solid var(--act);
	border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.tg-consensus--weak, .tg-consensus--none { background: var(--sun-wash); border-color: var(--sun); }
.tg-consensus-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--act-hover); }
.tg-consensus--weak .tg-consensus-label, .tg-consensus--none .tg-consensus-label { color: var(--warn-600); }
.tg-consensus-name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--ink); text-decoration: none; }
.tg-consensus-name:hover { color: var(--act); }
.tg-consensus-why { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.tg-consensus .btn { margin-top: var(--sp-1); }

/* ---- Decide-by deadline (create picker + live countdown) ---- */
.deadline-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.deadline-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); background: var(--bg-card);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.deadline-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The leading dot fills in on select, so a chosen chip reads at a glance. */
.deadline-chip span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--line-strong); vertical-align: middle; transition: background 0.15s ease, box-shadow 0.15s ease; }
.deadline-chip:hover { border-color: var(--act); color: var(--ink); }
.deadline-chip:active { transform: translateY(1px); }
.deadline-chip:has(input:checked) { background: var(--act); border-color: var(--act); color: #fff; font-weight: 700; box-shadow: 0 3px 10px color-mix(in srgb, var(--act) 28%, transparent); }
.deadline-chip:has(input:checked) span::before { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, #fff 35%, transparent); }
.deadline-chip input:focus-visible + span { outline: 2px solid var(--act); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .deadline-chip { transition: none; } }
.tg-deadline { font-size: var(--fs-sm); font-weight: 600; color: var(--act-hover); margin: 0 0 var(--sp-3); }

/* ---- Book the table (the decided pick becomes a reservation) ---- */
.tg-booked { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); }
.tg-booked b { font-size: var(--fs-base); color: var(--ink); }
.tg-booked span { font-size: var(--fs-sm); color: var(--ink-soft); }
.tg-booked.is-on { border-color: var(--good-600); background: var(--good-100); }
.tg-booked.is-on b { color: var(--good-600); }
.tg-book { margin-top: var(--sp-4); }

.tg-winner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-2);
	background: var(--act);
	color: var(--ink-on-dark);
	border-radius: var(--r-lg);
	padding: var(--sp-6) var(--sp-5);
}
.tg-winner-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-on-dark-soft); }
.tg-winner-name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: #fff; text-decoration: none; }
.tg-winner-name:hover { text-decoration: underline; }
.tg-winner-place { font-size: var(--fs-sm); color: var(--ink-on-dark-soft); }
.tg-winner .btn { margin-top: var(--sp-3); background: #fff; color: var(--act); }
.tg-winner .btn:hover { background: var(--sun-wash); color: var(--act-hover); }

/* ---- Cookie consent banner (privacy-first, decline is equal weight) ---- */
.consent {
	position: fixed;
	left: 50%;
	bottom: var(--sp-4);
	z-index: 200;
	width: min(680px, calc(100% - var(--sp-4) * 2));
	transform: translate(-50%, calc(100% + var(--sp-5)));
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
	background: var(--ink);
	color: var(--ink-on-dark);
	border-radius: var(--r-lg);
	box-shadow: 0 12px 40px rgba(16, 40, 44, 0.28);
}
.consent.is-in { transform: translate(-50%, 0); opacity: 1; }
.consent.is-gone { transform: translate(-50%, calc(100% + var(--sp-5))); opacity: 0; }
.consent-inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	flex-wrap: wrap;
}
.consent-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-on-dark-soft); margin: 0; }
.consent-text a { color: var(--ink-on-dark); text-decoration: underline; }
.consent-actions { display: flex; gap: var(--sp-2); flex: none; }
/* Decline is a solid button of equal weight to Accept, not a faint outline,
   so the choice reads as even (no nudge toward accepting). */
.consent-actions .btn-line { background: rgba(242, 247, 246, 0.16); color: var(--ink-on-dark); border-color: transparent; }
.consent-actions .btn-line:hover { background: rgba(242, 247, 246, 0.26); }
@media (max-width: 520px) {
	.consent { bottom: var(--sp-3); width: calc(100% - var(--sp-3) * 2); }
	.consent-inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-4); }
	.consent-actions { width: 100%; }
	.consent-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
	.consent { bottom: var(--sp-3); width: calc(100% - var(--sp-3) * 2); }
}
@media (prefers-reduced-motion: reduce) {
	.consent { transition: opacity .2s ease; }
	.consent.is-in { transform: translate(-50%, 0); }
}

/* ---- App-download promo strip (above the header, dismissible; only when the
   app is actually on a store) ---- */
.app-promo { background: var(--bg-ink); color: var(--ink-on-dark); }
.app-promo__inner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.app-promo__mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--sun); color: var(--petrol-950); }
.app-promo__text { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-sm); color: var(--ink-on-dark); }
.app-promo__badges { display: flex; gap: var(--sp-2); flex: none; }
.app-promo__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(242, 247, 246, 0.14); color: var(--ink-on-dark); font-size: var(--fs-xs); font-weight: 600; }
.app-promo__badge:hover { background: rgba(242, 247, 246, 0.24); }
.app-promo__close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0; color: var(--ink-on-dark-soft); cursor: pointer; }
.app-promo__close:hover { color: var(--ink-on-dark); background: rgba(242, 247, 246, 0.14); }
@media (max-width: 720px) {
	.app-promo__inner { flex-wrap: wrap; align-items: flex-start; padding-bottom: var(--sp-3); }
	.app-promo__badges { order: 3; width: 100%; }
	.app-promo__badge { flex: 1; justify-content: center; }
}

/* ---- Session-expired page (branded CSRF timeout, not raw JSON) ---- */
.expired { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: var(--bg-page); }
.expired-card { max-width: 460px; width: 100%; text-align: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6); }
.expired-logo { display: block; margin: 0 auto var(--sp-4); }
.expired-card h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--ink); margin-bottom: var(--sp-3); }
.expired-card p { color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--sp-5); }
.expired-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ---- Intelligence Center: the owner briefing hero (#114) ---- */
.ic-brief {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	margin-bottom: var(--sp-5);
	box-shadow: 0 1px 0 rgba(16, 40, 44, 0.03);
}
.ic-brief__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--act);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--sp-3);
}
.ic-brief__date { margin-left: auto; color: var(--ink-faint); font-weight: 600; letter-spacing: normal; text-transform: none; }
.ic-brief__narration {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--ink);
	margin: 0 0 var(--sp-2);
}
.ic-brief__grounded { font-size: var(--fs-sm); color: var(--ink-faint); margin: 0 0 var(--sp-5); }

.ic-moves { display: flex; flex-direction: column; gap: var(--sp-2); }
.ic-move {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--line-strong);
	border-radius: var(--r-md);
	padding: var(--sp-4);
}
.ic-move--opportunity { border-left-color: var(--act); }
.ic-move--miss { border-left-color: var(--sun); }
.ic-move--competitor { border-left-color: #CE3D6E; }
.ic-move--health { border-left-color: #217447; }
.ic-move--trend { border-left-color: var(--act-hover); }

.ic-move__rank {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--act-wash);
	color: var(--act-hover);
	font-size: var(--fs-sm);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.ic-move__main { min-width: 0; flex: 1; }
.ic-move__title { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic-move__venue { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); background: var(--bg-dip); border-radius: var(--r-sm); padding: 1px 7px; }
.ic-move__body { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }
.ic-move__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.ic-metric { font-size: var(--fs-sm); color: var(--ink-soft); }
.ic-metric b { color: var(--act-hover); font-weight: 800; font-size: var(--fs-base); }
.ic-conf { font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.ic-conf--high { background: var(--act-wash); color: var(--act-hover); }
.ic-conf--medium { background: var(--sun-wash); color: var(--warn-600); }
.ic-conf--low { background: var(--bg-dip); color: var(--ink-faint); }
.ic-move__evidence { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 6px; line-height: 1.5; }
.ic-move__action { flex: none; align-self: center; white-space: nowrap; }

.ic-receipt {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--act-wash);
	color: var(--act-hover);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
}
.ic-receipt b { font-weight: 800; }
@media (max-width: 640px) {
	.ic-move { flex-wrap: wrap; }
	.ic-move__action { align-self: stretch; width: 100%; justify-content: center; margin-top: var(--sp-2); }
}

/* Export-as-evidence link on the dashboard hero */
.ic-brief__export {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--act);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	font-size: var(--fs-xs);
	white-space: nowrap;
}
.ic-brief__export:hover { color: var(--act-hover); text-decoration: underline; }

/* Cravings near you (owner dashboard, from Craving Radar) */
.crave-place { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: var(--bg-dip); border-radius: var(--r-sm); padding: 1px 8px; }
.crave-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.crave-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.crave-row__label { font-weight: 600; color: var(--ink); min-width: 0; }
.crave-row__count { flex: none; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; }
.crave-row__count b { color: var(--sun); font-weight: 800; }

/* Evidence export: a print-to-PDF briefing document */
.ic-doc {
	max-width: 760px;
	margin: 0 auto;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-8);
	box-shadow: 0 1px 0 rgba(16, 40, 44, 0.03);
}
.ic-doc__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; max-width: 760px; margin: 0 auto var(--sp-4); }
.ic-doc__mast {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sp-4);
	flex-wrap: wrap;
	padding-bottom: var(--sp-5);
	margin-bottom: var(--sp-5);
	border-bottom: 2px solid var(--ink);
}
.ic-doc__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--ink); }
.ic-doc__brand em { color: var(--act); font-style: normal; }
.ic-doc__kicker { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--act); margin-top: 4px; }
.ic-doc__meta { text-align: right; font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.7; }
.ic-doc__meta b { color: var(--ink-soft); font-weight: 700; }
.ic-doc__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.3; color: var(--ink); margin: 0 0 var(--sp-2); }
.ic-doc__narration { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--sp-5); }
.ic-doc__section-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: var(--sp-5) 0 var(--sp-3); }
.ic-move__rec { font-size: var(--fs-xs); font-weight: 700; color: var(--act-hover); margin-top: 6px; }
.ic-doc__foot { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.6; }

/* Scoped to the evidence page only (it is the sole page carrying .ic-doc), so
   the invoice and statement print views keep their own layout. On browsers
   without :has() the whole rule is dropped, which just prints the briefing with
   its normal chrome rather than affecting any other page. */
@media print {
	body:has(.ic-doc) .site-head,
	body:has(.ic-doc) .site-foot,
	body:has(.ic-doc) .consent-banner,
	body:has(.ic-doc) .ic-doc__actions { display: none !important; }
	body:has(.ic-doc) { background: #fff; }
	body:has(.ic-doc) .section { padding: 0 !important; }
	body:has(.ic-doc) .wrap { max-width: none; padding: 0; }
	body:has(.ic-doc) .ic-doc { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
	body:has(.ic-doc) .ic-move { break-inside: avoid; }
}

/* Trap Leaflet's internal panes and controls (z-index up to ~700) in their own
   stacking context at level 0, so the sticky header and its mega-menu panels
   (which overlap the map) are never painted behind it. */
.leaflet-container { position: relative; z-index: 0; }

/* ---- Header mega-menu (grouped primary nav) ---- */
.nav-mega { position: relative; display: flex; }
.nav-mega__btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 0; background: none; font: inherit; }
.nav-mega__chev { transition: transform .16s ease; opacity: .65; }
.nav-mega.is-open .nav-mega__chev { transform: rotate(180deg); }
.nav-mega__panel { position: absolute; top: calc(100% + 9px); left: 0; width: 340px; max-width: min(340px, calc(100vw - 2rem)); background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(16,40,44,.17); padding: 8px; display: none; z-index: 70; }
/* Click-to-open ONLY (v9.46). These panels used to open on pure CSS hover
   with an 11px hover bridge, inside the sticky header, which is how a menu
   ended up draped over the homepage hero while the pointer merely crossed
   the bar on its way to the ask field. The toggle, Escape and outside-click
   behaviour already live in public.js; hover now only styles the button. */
.nav-mega.is-open > .nav-mega__panel { display: block; }
/* the rightmost group anchors its panel to the right so it never overflows */
.site-nav__primary .nav-mega:last-child > .nav-mega__panel { left: auto; right: 0; }
.nav-mega__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.nav-mega__item:hover { background: var(--bg-dip); }
.nav-mega__item.is-here { background: var(--act-wash); }
.nav-mega__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--act-wash); color: var(--act); }
.nav-mega__ico svg { width: 17px; height: 17px; }
.nav-mega__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-mega__label { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.nav-mega__item.is-here .nav-mega__label { color: var(--act-hover); }
.nav-mega__desc { font-size: var(--fs-xs); color: var(--ink-faint); }

.nav-owner { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--act); text-decoration: none; padding: 7px 13px; border: 1px solid var(--act); border-radius: var(--r-pill); white-space: nowrap; }
.nav-owner:hover { background: var(--act-wash); }
.nav-owner.is-here { background: var(--act); color: #fff; }
.nav-owner svg { width: 15px; height: 15px; }

@media (max-width: 1080px) {
	.nav-mega { flex-direction: column; align-items: stretch; }
	.nav-mega__btn { justify-content: space-between; width: 100%; padding: 12px 14px; font-size: var(--fs-base); }
	.nav-mega__panel { position: static; width: auto; max-width: none; border: 0; box-shadow: none; padding: 2px 0 8px 6px; }
	/* The hover-open override this line used to cancel is gone site-wide. */
	.nav-mega.is-open > .nav-mega__panel { display: block; }
	.nav-owner { justify-content: center; margin-bottom: 8px; }
}

/* ---- Owner insight panels (Table requests, Pickup) ---- */
.owner-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.oi-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-card); min-width: 0; }
.oi-card--full { grid-column: 1 / -1; }
.oi-card--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.oi-card__h { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.oi-card__big { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--act); line-height: 1.1; }
.oi-card__sub { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 2px; }

/* ==========================================================================
 * Synced My plate save-hearts (v5.49)
 * ========================================================================== */
.save-heart{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
	border:0; border-radius:999px; background:rgba(16,40,44,.55); color:#fff; cursor:pointer;
	transition:transform .12s ease, background .12s ease; -webkit-tap-highlight-color:transparent; }
.save-heart svg{ width:17px; height:17px; display:block; }
.save-heart:hover{ background:rgba(16,40,44,.75); }
.save-heart:active{ transform:scale(.9); }
.save-heart.is-on{ background:var(--match, #C2417C); }
.save-heart.is-on svg{ fill:currentColor; }
.save-heart:focus-visible{ outline:2px solid var(--act); outline-offset:2px; }
.r-card{ position:relative; }
.r-card .save-heart{ position:absolute; top:.55rem; right:.55rem; z-index:2; }
.rlb__card{ position:relative; }
.rlb__card .save-heart{ position:absolute; top:.55rem; right:.55rem; z-index:2; }
/* The Offer flag shares the top-right corner with the heart; slide it left. */
.rlb__card .rlb__flag{ right:52px; }
.rl__cta .save-heart{ position:static; background:rgba(255,255,255,.14); }
.rl__cta .save-heart.is-on{ background:var(--match, #C2417C); }
/*
 * THE PIN POPUP, SITE-WIDE (v13.0).
 *
 * These lived only inside the /map page's own <style>, so the homepage map
 * could not use them. Below the drawer's width, where the drawer refuses to
 * open for want of room, a tap on a homepage venue pin did nothing visible at
 * all: silent, so it never looked broken, it just felt dead. Moved here so
 * both maps can show the same card, which is the standing rule about the two
 * maps being one map.
 */
.cb-pop { position: relative; min-width: 216px; }
.cb-pop img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; display: block; }
.cb-pop__name { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; line-height: 1.2; color: var(--ink, #10282C); }
.cb-pop__rating { color: var(--ink-soft, #6E8482); font-size: 13px; margin-top: 3px; }
.cb-pop__rating .star { color: var(--sun, #F0A72C); }
/* Stacked, full width, clearly labelled: the actions never cramp or wrap. */
.cb-pop__actions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
/* Scoped under .cb-pop, and that is load bearing rather than tidy: Leaflet's
   own stylesheet carries .leaflet-container a { color: #0078A8 }, which is a
   class plus an element and so outranks a lone class. It also arrives after
   this file, because the map injects it at runtime. A white label on the teal
   button was being repainted link blue on teal, which is close to unreadable.
   Fixing the original declaration rather than stacking a narrower rule on top
   of it, per the house rule about specificity. */
.cb-pop .cb-pop__btn { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 10px 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.cb-pop .cb-pop__btn--pick { background: var(--act, #0E6E68); color: #fff; }
.cb-pop .cb-pop__btn--pick.is-picked { background: var(--act-wash, #DFF1EF); color: var(--act-hover, #0a4f4a); }
.cb-pop .cb-pop__btn--view { background: var(--bg-dip, #F1F5F4); color: var(--ink, #10282C); }
.save-heart--pop{ position:absolute; top:.4rem; right:.4rem; z-index:2; width:30px; height:30px; }

/* ==========================================================================
 * Mobile bottom tab bar (v5.49): the five member verbs, one thumb-tap away.
 * Desktop keeps the header nav; the bar exists only up to 820px.
 * ========================================================================== */
.tabbar{ display:none; }
@media (max-width: 820px)
{
	.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:stretch;
		background:var(--bg-card); border-top:1px solid var(--line);
		padding-bottom:env(safe-area-inset-bottom, 0px); box-shadow:0 -4px 16px rgba(16,40,44,.08); }
	.tabbar__item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
		gap:2px; padding:.5rem .2rem .45rem; min-height:52px; text-decoration:none; color:var(--ink-faint);
		font-size:.66rem; font-weight:600; letter-spacing:.01em; -webkit-tap-highlight-color:transparent; }
	.tabbar__item svg{ width:21px; height:21px; display:block; }
	.tabbar__item.is-on{ color:var(--act); }
	.tabbar__item:focus-visible{ outline:2px solid var(--act); outline-offset:-2px; border-radius:8px; }
	.tabbar__ic{ position:relative; display:inline-flex; }
	.tabbar__badge{ position:absolute; top:-5px; right:-9px; min-width:15px; height:15px; padding:0 4px;
		border-radius:999px; background:var(--act); color:#fff; font-size:.58rem; font-weight:700;
		line-height:15px; text-align:center; }
	.tabbar__lb{ line-height:1.1; }
	/* The page must never hide its last content behind the fixed bar. The
	   has-tabbar class is set by the tab bar partial itself, so pages where the
	   bar is suppressed (owner, reserve, pickup) get no phantom padding. */
	body.has-tabbar{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
	/* The assistant launcher and the bar share the bottom edge; lift the widget,
	   cap its panel so the header stays on-screen, and lift the consent banner
	   (z-index 200) which would otherwise sit ON the bar and block all five tabs. */
	body.has-tabbar .cbA{ bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
	body.has-tabbar .cbA__panel{ height:min(540px, calc(100vh - 170px - env(safe-area-inset-bottom, 0px))); }
	body.has-tabbar .consent{ bottom:calc(56px + env(safe-area-inset-bottom, 0px) + var(--sp-3)); }
}

/* The steady frame (v5.68.2): the scrollbar's lane is always reserved, so
   pages of different heights never snap the layout sideways at navigation.
   The 15px shake dies here. */
html { scrollbar-gutter: stable; }

/* ---------------------------------------------------------------------------
   Form controls (v5.79). The .input class was only ever defined in the ADMIN
   stylesheet, which public pages never load, so every public form (the party
   request, quotes, the invitation, the owner desk, account pages) has been
   rendering with raw browser controls. One definition here dresses them all
   in the house tokens, including the native date and select furniture.
--------------------------------------------------------------------------- */
.input, select.input, textarea.input {
	appearance: none; -webkit-appearance: none;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--ink);
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 1px 2px rgba(16, 40, 44, .04);
	transition: border-color .14s ease, box-shadow .14s ease;
}

textarea.input { min-height: 92px; padding: 12px; resize: vertical; line-height: 1.5; }

.input::placeholder { color: var(--ink-faint); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--act) 40%, var(--line)); }

.input:focus, .input:focus-visible {
	outline: none;
	border-color: var(--act);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--act) 18%, transparent);
}

.input:disabled { background: var(--bg-page); color: var(--ink-faint); cursor: not-allowed; }

/* The select keeps its arrow, drawn rather than inherited from the browser. */
select.input {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px 16px;
	cursor: pointer;
}

/* Date and time fields: the native picker button stays, dressed to match. */
.input[type="date"], .input[type="time"] { min-width: 0; }
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: .55;
	cursor: pointer;
	padding: 2px;
	border-radius: 6px;
}
.input[type="date"]::-webkit-calendar-picker-indicator:hover,
.input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--act-wash); }

/* Number fields carry their own spinners on desktop; the house prefers none. */
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (prefers-reduced-motion: reduce) { .input { transition: none; } }

/* Proof that compounds (v5.81): the quiet, un-fakeable party line. */
.party-proof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-2);
	font-size: var(--fs-sm); font-weight: 700; color: var(--act); }
.party-proof svg { flex: 0 0 auto; }
.party-proof span { font-weight: 600; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   The page-width law (v5.84). Every public page shares ONE desktop width: the
   .wrap is always --page-max, so moving between pages never nudges the layout
   sideways. Where a page wants a narrow READING column, it narrows its own
   content, never the wrap, otherwise the page ends up narrower than the header
   sitting above it.
--------------------------------------------------------------------------- */
.wrap--reading > * { max-width: 720px; margin-inline: auto; }
.wrap--reading--sm > * { max-width: 560px; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   THE LIGHT HERO CANON (v5.86). One grammar on every page, and daylight
   everywhere: "no dark, we are light people."

   The island, offers, guides and blog heroes were ink-black bands with white
   text, which made moving through the site feel like walking in and out of a
   tunnel. They now share the same daylight wash as the pages the owner named
   as canon (cravings, discover-cyprus, bites-club): citrus low on the right,
   sea rising from the left, ink text, a teal eyebrow, the same display size.

   Written as overrides at the end of the sheet rather than edits in place, so
   the original rules stay readable and one deletion reverts the whole canon.
--------------------------------------------------------------------------- */
.island-hero,
.off-hero,
.lift-guides .lg-hero,
.lift-blog .lb-hero {
	background:
		radial-gradient(120% 130% at 88% -12%, var(--sun-wash, #FCEBCF) 0%, transparent 58%),
		linear-gradient(180deg, var(--act-wash, #DFF1EF) 0%, var(--bg-card, #fff) 82%);
	color: var(--ink);
	border: 1px solid var(--line);
}

.island-hero .eyebrow,
.off-hero .eyebrow,
.lift-guides .lg-hero__eyebrow,
.lift-blog .lb-hero__eyebrow { color: var(--act); }

.island-hero > p,
.off-hero > p,
.lift-guides .lg-hero__lead,
.lift-blog .lb-hero__lead { color: var(--ink-soft); }

/* Chips that were white-on-dark would vanish in daylight: give them paper. */
.island-hero .tally span,
.off-hero .tally span {
	color: var(--ink);
	background: var(--bg-card, #fff);
	border-color: var(--line);
}

/* Anything still painted for a dark ground inside these heroes comes back. */
.island-hero h1,
.off-hero h1,
.lift-guides .lg-hero__title,
.lift-blog .lb-hero__title { color: var(--ink); }


/* ---------------------------------------------------------------------------
   Hero artwork (v5.88). A drawn scene sits behind the words on desktop and
   becomes a strip beneath them on a phone, so the headline always leads and
   the art never fights the copy for the first screen.
--------------------------------------------------------------------------- */
/* v5.90: the art sits BEHIND the words. It is placed after the copy in the
   markup so a phone stacks copy then art, which also put it on top of the
   text in the paint order and veiled the paragraph. z-index settles it. */
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-art svg { width: 100%; height: 100%; display: block; }
.lg-hero__inner, .lift-blog__masthead > *:not(.hero-art) { position: relative; z-index: 1; }

@media (max-width: 760px) {
	.hero-art { position: static; aspect-ratio: 600 / 190; margin: 1.25rem -1.25rem -1.5rem; }
	.hero-art svg { height: auto; }
}

/* ==========================================================================
 * THE HOUSE MENU (v5.95)
 * One card, drawn identically for every venue, with the venue's own words set
 * inside it. That frame is the whole idea: no venue has to design anything,
 * and every menu on CyprusBites still looks related.
 *
 * The conventions are borrowed from printed menus on purpose, because this is
 * a solved problem: section names in letterspaced caps over a rule, dish names
 * in the display face, a dot leader carrying the eye to a quiet tabular price,
 * and no row rules (the leader already does that job). Two columns from 900px,
 * because a leader only works over a short measure and a 1080px line turns
 * every dish into a dotted highway.
 *
 * Today's dishes are the card's first page, tinted citrus and dated, not a
 * second banner stacked on top of it.
 * ========================================================================== */
.mh { margin-top: var(--sp-5); --mh-pad: var(--sp-8); }
.mh__card { padding: var(--mh-pad); border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--bg-card); box-shadow: var(--shadow-card); }

/* The card's header rule: what this is, how big it is, and the way in. */
.mh__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
	padding-bottom: var(--sp-3); border-bottom: 2px solid var(--ink); }
.mh__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
	line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.mh__count { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.mh__find { margin-left: auto; }
.mh__find-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mh__find-i { min-width: min(240px, 55vw); padding: .45rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
	background: var(--bg-card); color: var(--ink); font: inherit; font-size: var(--fs-sm); }
.mh__find-i:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }

/* Contents, printed at the front of the card the way a long wine list does it.
   Earned, not assumed: the view only renders it past five named sections. */
.mh__index { margin-top: var(--sp-5); }
.mh__index[hidden] { display: none; }
.mh__index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mh__index a { display: inline-flex; align-items: center; padding: .4rem .75rem;
	border-radius: var(--r-pill); background: var(--bg-page); color: var(--ink-soft);
	font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	transition: color 140ms ease, background-color 140ms ease; }
.mh__index a:hover { background: var(--act-wash); color: var(--act-hover); }

.mh__cols { margin-top: var(--sp-6); }
/* A section holds together where it can, but never at the cost of a column
   (v6.57). "Never split a section" is right for a menu of six sections and
   wrong for a menu of eighty-five dishes: one unbreakable block that will not
   fit forces the whole rest of the menu into the second column, and the first
   ends in a page of white. The rule below is the printed convention instead: a
   section may run on into the next column, a heading may never be the last
   thing in one, and a dish is never cut in half. */
.mh__sec { break-inside: avoid; scroll-margin-top: 88px; }
.mh__item { break-inside: avoid; }
.mh__sec-t { break-after: avoid; }
.mh__sec + .mh__sec { margin-top: var(--sp-8); }
.mh__sec[hidden] { display: none; }

/* The section head: the one place the layout raises its voice, and it does it
   with letterspaced caps over a rule rather than with size. Caps also spare us
   the Greek problem, since the browser drops the tonos when it uppercases. */
.mh__sec-t { display: flex; align-items: flex-start; gap: .7ch; margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2); border-bottom: 1.5px solid var(--ink);
	font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); line-height: 1.35;
	letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
/* Optically centred on the FIRST line, not on the block, so a section name
   that wraps to two lines does not leave its mark floating in the middle. */
.mh__sec-mark { display: inline-flex; flex: 0 0 auto; margin-top: -2px; color: var(--act); }
.mh__sec-mark svg { width: 22px; height: 22px; }
.mh__sec-n { min-width: 0; }

/* Dishes the venue never filed under a name. The house will not invent a
   heading nobody wrote, so it draws a mark instead, in exactly the slot and to
   exactly the height of a real section head. That keeps the tops of the two
   columns on the same line and makes the nameless run look chosen. */
.mh__turn { position: relative; height: 20px; margin: 0 0 var(--sp-3); /* 20px = the section mark's height */
	padding-bottom: var(--sp-2); border-bottom: 1.5px solid var(--ink); }
.mh__turn::after { content: ""; position: absolute; left: 3px; top: 50%; width: 8px; height: 8px;
	transform: translate(0, -50%) rotate(45deg); border: 1.5px solid var(--line-strong); }

.mh__list { list-style: none; margin: 0; padding: 0; }
.mh__item { padding: .5rem 0; }
.mh__item[hidden] { display: none; }
.mh__item.is-out { opacity: .5; }
.mh__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh__line { display: flex; align-items: baseline; gap: .5ch; }
.mh__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* A real dot leader. A dotted border draws tiny squares; a radial gradient
   draws round dots and lets us set the rhythm. */
.mh__lead { flex: 1 1 auto; min-width: 1.2rem; align-self: flex-end; height: 4px; margin-bottom: .32em;
	background-image: radial-gradient(circle at center, var(--line-strong) 1.1px, transparent 1.3px);
	background-size: 6px 4px; background-repeat: repeat-x; }
.mh__price { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.mh__cur { margin-right: .12ch; font-weight: 500; color: var(--ink-soft); }
.mh__desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }

/* Everything about money and availability hangs on the right, under the price,
   so the left edge stays a clean list of what the kitchen makes. */
.mh__member { display: inline-flex; align-items: center; gap: .5ch; align-self: flex-end; margin-top: 3px;
	padding: .15rem .5rem; border-radius: var(--r-pill); background: var(--act-wash); color: var(--act);
	font-size: var(--fs-xs); font-weight: 600; }
.mh__member b { font-variant-numeric: tabular-nums; }
.mh__off { font-weight: 800; letter-spacing: .02em; }
.mh__flag { align-self: flex-end; margin-top: 3px; font-size: var(--fs-xs); font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--warn-600); }
.mh__flag--quiet { color: var(--ink-soft); font-weight: 600; }

/* A photographed section opens a picture gutter and keeps it open, so its text
   column stays straight. A dish without a picture leaves plain space, never an
   empty frame, which is the difference between a margin and a broken grid. */
.mh__list--shots .mh__item { position: relative; padding: .55rem 0; padding-left: 68px; min-height: 74px; }
.mh__shot { position: absolute; left: 0; top: .55rem; width: 56px; height: 56px; overflow: hidden;
	border-radius: var(--r-md); background: var(--bg-dip); }
.mh__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Today: the card's first page. Citrus, dated, and bled to the card's edges so
   it reads as part of the same document rather than a banner sitting on it. */
.mh__today { margin: calc(-1 * var(--mh-pad)) calc(-1 * var(--mh-pad)) var(--sp-7);
	padding: var(--mh-pad) var(--mh-pad) var(--sp-6);
	border-bottom: 1px solid color-mix(in srgb, var(--sun) 45%, var(--line));
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: linear-gradient(var(--sun-wash), color-mix(in srgb, var(--sun-wash) 55%, var(--bg-card))); }
.mh__today[hidden] { display: none; }
/* A kitchen that has posted today's dishes but never typed a standing menu:
   the slip is the whole card, so it fills it instead of trailing a rule and a
   band of empty white. */
.mh__today:last-child { margin-bottom: calc(-1 * var(--mh-pad)); border-bottom: 0; border-radius: var(--r-lg); }
.mh__today-head { display: flex; align-items: center; gap: .7ch; }
.mh__today-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
	border-radius: 50%; background: var(--sun); color: var(--ink); }
.mh__today-mark svg { width: 18px; height: 18px; }
.mh__today-t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
	line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
/* The date is the promise: this is not yesterday's kleftiko. */
.mh__stamp { margin-left: auto; flex: 0 0 auto; padding: .2rem .6rem; border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--sun) 25%, transparent); color: var(--warn-600);
	font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
	letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mh__today-sub { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); }
/* Today's dishes are a board, not a list. auto-FILL rather than auto-fit is the
   whole point: one dish of the day takes one column instead of stretching its
   leader across the entire card, and the row grammar stays identical to the
   menu below it, so the two can never drift apart. */
.mh__today .mh__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 0 var(--sp-10); }
.mh__today .mh__item { min-width: 0; }
.mh__today .mh__name { font-size: var(--fs-md); }
.mh__today .mh__lead { background-image: radial-gradient(circle at center, color-mix(in srgb, var(--sun) 62%, var(--line-strong)) 1.1px, transparent 1.3px); }
.mh__today .mh__shot { background: color-mix(in srgb, var(--sun) 20%, var(--bg-card)); }

.mh__none { margin: var(--sp-5) 0 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.mh__note { margin: var(--sp-5) 0 0; color: var(--ink-soft); font-size: var(--fs-xs); }

/* Two columns once there is room for two short measures side by side. The view
   picks the mode; see the comment there for why there are three of them. */
@media (min-width: 900px) {
	.mh { --mh-pad: var(--sp-10); }
	.mh__cols--two, .mh__cols--flow { columns: 2; column-gap: var(--sp-12); column-rule: 1px solid var(--line); }
	/* One unsectioned list is allowed to continue into the second column. */
	.mh__cols--flow .mh__sec { break-inside: auto; }
	/* And so is a section on a menu long enough that keeping it whole would
	   leave half a page empty. The heading rule above keeps it readable. */
	.mh__cols--two.mh__cols--long .mh__sec { break-inside: auto; }
	.mh__cols--single { max-width: 42rem; }
}

@media (max-width: 700px) {
	.mh { --mh-pad: var(--sp-5); }
	.mh__find { margin-left: 0; width: 100%; }
	.mh__find-i { width: 100%; min-width: 0; }
	.mh__list--shots .mh__item { padding-left: 60px; min-height: 66px; }
	.mh__shot { width: 48px; height: 48px; }

	/* Twelve sections wrap to seven rows of chips on a phone, which pushes the
	   actual menu off the screen to offer a way of getting around it. One
	   swipeable row costs a line instead, and the fade says there is more. */
	/* padding-block leaves room for the focus ring, which the scroll container
	   would otherwise clip on the axis it did not ask to manage. */
	.mh__index { margin-inline: calc(-1 * var(--mh-pad)); padding-inline: var(--mh-pad); padding-block: 4px;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
	.mh__index ul { flex-wrap: nowrap; }
	.mh__index a { white-space: nowrap; }
}

/* Where this menu came from. Quiet by construction: it is a fact, not a
   banner. The invitation to correct it is a link, never a button, because a
   diner reading a menu is not the person we are asking. */
.mh__prov { margin: var(--sp-5) 0 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.5; }
.mh__prov-n { color: var(--ink-faint); }
.mh__prov-a { display: inline-block; margin-left: .4ch; color: var(--act); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mh__prov-a:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }

/* The dish that matched (v6.7). It answers the question that was asked, so it
   sits above the match reasons and reads as one line: the dish on the left,
   what it costs here on the right. Quiet, because the venue is still the
   subject of the card. */
.r-dish { display: flex; align-items: baseline; gap: .6ch; margin: var(--sp-2) 0 0;
	padding: .4rem .7rem; border: 1px solid color-mix(in srgb, var(--act) 26%, var(--line));
	border-radius: var(--r-md); background: var(--act-wash); color: var(--act);
	font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.r-dish:hover { border-color: var(--act); }
.r-dish:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.r-dish__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-dish__price { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---- Checkboxes and radios inside a form ---- */
.form-stack input[type="checkbox"], .form-stack input[type="radio"] {
	width: 17px; height: 17px; min-width: 17px; flex: none;
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
	accent-color: var(--act);
}

/* ---- Confirm dialog ---- */
.cb-ask { border: 0; border-radius: var(--r-lg, 18px); padding: var(--sp-5); max-width: 400px; width: calc(100% - 2rem);
	background: var(--bg-card, #fff); color: var(--ink); box-shadow: 0 30px 70px -30px rgba(16, 40, 44, .6); }
.cb-ask::backdrop { background: rgba(16, 40, 44, .45); }
.cb-ask__q { margin: 0; font-family: var(--font-display, inherit); font-weight: 800; font-size: var(--fs-lg); line-height: 1.25; }
/* The note carries a list now, not just a sentence, so it keeps the line breaks
   it is given and scrolls rather than growing past the screen (v6.79). */
.cb-ask__note { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-soft);
	white-space: pre-line; text-align: left; max-height: 40vh; overflow-y: auto; }
.cb-ask__row { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); flex-wrap: wrap; }

/* Page Blocks skins (v9.81): curated light washes an admin can grant a
 * section from the arrange mode's gear card. Light only, ink stays ink. */
.pb-skin-paper { background: #F6F3EC; }
.pb-skin-mist { background: #F2F6F5; }
.pb-skin-teal { background: #E3F1EE; }
.pb-skin-sun { background: #FCEBCF; }

/* The Row element (v9.82): one to three cells, text or image. */
.pb-row { display: grid; gap: 20px; }
.pb-row--1 { grid-template-columns: 1fr; }
.pb-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-cell--text h3 { margin: 0 0 .4rem; }
.pb-cell--text p { margin: 0 0 .8rem; line-height: 1.55; }
.pb-cell--image img { width: 100%; height: auto; border-radius: 12px; display: block; }
.pb-cell__empty { display: block; min-height: 140px; border: 2px dashed rgba(16, 40, 44, .18); border-radius: 12px; }
@media (max-width: 860px) { .pb-row--2, .pb-row--3 { grid-template-columns: 1fr; } }

/*
 * The look of a cell and a row (v10.28). Every value here is reached by a
 * class from a curated list in Blocks, never by an inline style built from
 * stored text, which is what keeps a builder from being a CSS injection
 * point. Nothing below applies unless the editor chose it, so a row saved
 * before this release renders exactly as it did.
 */
.pb-cell--align-left { text-align: left; }
.pb-cell--align-center { text-align: center; }
.pb-cell--align-right { text-align: right; }
.pb-cell--align-center.pb-cell--buttons, .pb-cell--align-center .pb-video { margin-left: auto; margin-right: auto; }

.pb-cell--size-small { font-size: var(--fs-sm); }
.pb-cell--size-normal { font-size: var(--fs-base); }
.pb-cell--size-large { font-size: var(--fs-md); }
.pb-cell--size-huge { font-size: var(--fs-lg); }
.pb-cell--size-large h3, .pb-cell--size-huge h3 { font-size: var(--fs-xl); }

/* The washes are the same four the skins use, plus ink for a dark cell that
   carries its own light text. */
.pb-cell--bg-paper, .pb-cell--bg-mist, .pb-cell--bg-teal, .pb-cell--bg-sun, .pb-cell--bg-ink { padding: 18px 20px; border-radius: 14px; }
.pb-cell--bg-paper { background: #F6F3EC; }
.pb-cell--bg-mist { background: #F2F6F5; }
.pb-cell--bg-teal { background: #E3F1EE; }
.pb-cell--bg-sun { background: #FCEBCF; }
.pb-cell--bg-ink { background: #10282C; color: #F4F1EA; }
.pb-cell--bg-ink h2, .pb-cell--bg-ink h3, .pb-cell--bg-ink cite { color: #F4F1EA; }
.pb-cell--bg-ink a:not(.btn) { color: #9FD8CB; }

.pb-row--pad-none { padding: 0; }
.pb-row--pad-small { padding: 12px 0; }
.pb-row--pad-normal { padding: 28px 0; }
.pb-row--pad-large { padding: 56px 0; }

/* Full width: the row leaves the page rail and runs to both edges, with its
   own inner rail so text never touches the glass. */
.pb-bleed { width: 100%; padding-inline: clamp(16px, 4vw, 48px); }

/* Quote, heading band, spacer, video, buttons and gallery (v10.28). */
.pb-cell--quote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.45; }
.pb-cell--quote cite { display: block; margin-top: .6rem; font-style: normal; font-size: var(--fs-sm); color: var(--ink-soft); }
.pb-cell--heading h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0 0 .4rem; }
.pb-cell--heading p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.pb-spacer--small { min-height: 16px; }
.pb-spacer--medium { min-height: 40px; }
.pb-spacer--large { min-height: 80px; }
.pb-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #10282C; }
.pb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pb-cell--video .pb-cell__cap { margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.pb-cell--buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pb-cell--gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pb-cell--gallery figure { margin: 0; }
.pb-cell--gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 860px) { .pb-cell--gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/*
 * Rich bodies (v9.84). The three heading levels wear the scales the site
 * already speaks (.section-head h2 / .article-body h2 / .article-body h3),
 * so a heading typed in a row is indistinguishable from a built one.
 */
.pb-cell__body h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0 0 .5rem; }
.pb-cell__body h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin: .6rem 0 .4rem; }
.pb-cell__body h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin: .5rem 0 .3rem; }
.pb-cell__body p { margin: 0 0 .8rem; line-height: 1.55; }
.pb-cell__body ul, .pb-cell__body ol { margin: 0 0 .8rem; padding-left: 1.25rem; line-height: 1.55; }
.pb-cell__body a { color: var(--act); text-decoration: underline; text-underline-offset: 2px; }

/*
 * WHERE ARE YOU (v10.70). The one question the site needs answering, asked as
 * an offer rather than a form.
 *
 * Six explicit columns, never auto-fit, so the row cannot orphan a tile on its
 * own line. Below the tablet width it falls to two columns, which is the only
 * count that keeps six tiles even.
 *
 * The bar under each count is proportional to the largest district, which makes
 * the row informative before it is read: where most of Cyprus is, at a glance.
 */
.dstrip { padding: var(--sp-5) 0 0; }
.dstrip__head { margin-bottom: var(--sp-3); }
.dstrip__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; margin: 0; }
.dstrip__sub { margin: 2px 0 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.dstrip__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.dstrip__pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card, #fff);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color 120ms ease, transform 120ms ease;
}
.dstrip__pick:hover { border-color: var(--act); transform: translateY(-2px); }
.dstrip__pick:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.dstrip__name { font-weight: 700; overflow-wrap: anywhere; }
.dstrip__count { font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dstrip__count b { color: var(--ink); }
.dstrip__bar { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--bg-dip); overflow: hidden; margin-top: 2px; }
.dstrip__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--act); }
/* A district with nothing in it stays pickable, because somebody lives there,
   but it does not pretend to be an offer. */
.dstrip__pick.is-empty { opacity: .62; }
.dstrip__pick.is-empty .dstrip__bar { visibility: hidden; }
.dstrip__near {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--act);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.dstrip__near:hover { text-decoration: underline; }
@media (max-width: 900px) { .dstrip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dstrip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- The map's own furniture (v11.0) ----
   A town bubble carries its count, because the number of places in a town is
   the one fact a zoomed-out map exists to give and it used to be hidden in a
   tooltip. The stock Leaflet controls are restyled to the brand for the same
   reason the rest of the site is: a default grey button on a page that has had
   this much care taken over it reads as something nobody finished. */
.cbmap-town { background: none; border: 0; }
.cbmap-town__dot {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--act);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 14px -6px rgba(16, 40, 44, 0.7);
	font-weight: 800;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: transform .12s ease, background .12s ease;
}
.cbmap-town:hover .cbmap-town__dot { transform: scale(1.08); background: var(--act-hover, #0b5a55); }

/*
 * A BUBBLE WEARING ITS OWN MIX (v13.0).
 *
 * The conic-gradient is set inline, because it is data: the arcs are how many
 * of each kind of place are in there. This rule only makes it read as a RING
 * rather than a pie, by laying a solid disc over the middle for the number to
 * sit on. A count printed straight onto eight coloured wedges is unreadable at
 * twenty-eight pixels, and the count is still the thing being reported.
 *
 * position on the parent, because the disc is absolutely placed inside it.
 */
.cbmap-town__dot--mix { position: relative; }
.cbmap-town__dot--mix::before {
	content: "";
	position: absolute;
	/*
	 * Longhand as well as inset (v13.2): inset landed in Safari 14.1, and on
	 * anything older the disc would not be placed at all, leaving the count
	 * printed straight onto eight coloured wedges. The four sides come first so
	 * they apply everywhere; inset follows for the browsers that prefer it, and
	 * both say the same thing.
	 *
	 * A band of colour about a fifth of the radius: enough to read the mix,
	 * narrow enough that the bubble is still a counter.
	 */
	top: 21%;
	right: 21%;
	bottom: 21%;
	left: 21%;
	inset: 21%;
	border-radius: 50%;
	background: var(--act);
}
.cbmap-town__dot--mix b { position: relative; }
/* The hover colour must not paint over the mix, or the ring vanishes exactly
   when somebody leans in to look at it. */
.cbmap-town:hover .cbmap-town__dot--mix { background: inherit; }
.cbmap-town:hover .cbmap-town__dot--mix::before { background: var(--act-hover, #0b5a55); }
.leaflet-container .leaflet-control-zoom { border: 0; box-shadow: 0 6px 18px -10px rgba(16, 40, 44, .6); }
.leaflet-container .leaflet-control-zoom a {
	width: 34px;
	height: 34px;
	line-height: 34px;
	color: var(--ink);
	background: var(--bg-card, #fff);
	border: 1px solid var(--line);
	font-size: 18px;
	font-weight: 700;
}
.leaflet-container .leaflet-control-zoom a:first-child { border-radius: 10px 10px 0 0; }
.leaflet-container .leaflet-control-zoom a:last-child { border-radius: 0 0 10px 10px; border-top: 0; }
.leaflet-container .leaflet-control-zoom a:hover { background: var(--act); border-color: var(--act); color: #fff; }

/* ---- Talking about one booking (v12.0) ----
   Attached to the booking, never an inbox: it appears while the table matters
   and is gone with it. Quiet enough that a card with no conversation on it
   still reads as a booking rather than as a chat waiting to be answered. */
.bchat { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.bchat__list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.bchat__line { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-md); background: var(--bg-dip, #E7EDEB); font-size: var(--fs-sm); }
/* The member's own words sit apart from the venue's, so a glance tells you who
   said what without reading a name. */
.bchat__line--member { background: var(--teal-100, #DCEDEB); }
.bchat__who { font-weight: 700; font-size: var(--fs-xs); color: var(--ink-soft); }
.bchat__body { overflow-wrap: anywhere; }
.bchat__when { font-size: var(--fs-xs); color: var(--ink-faint); }
.bchat__form { display: grid; gap: var(--sp-2); justify-items: start; }
.bchat__label { font-size: var(--fs-sm); color: var(--ink-soft); }
/*
 * THE MESSAGE BOX (v12.7). It set a width and nothing else, so it rendered as
 * a raw browser textarea: monospace, hairline inset border, nothing like any
 * other field on the site. Given the same clothes as every other input here,
 * from the same tokens, so it cannot drift from them again.
 */
.bchat__input {
	width: 100%;
	font: inherit;
	font-size: var(--fs-base);
	line-height: 1.5;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: var(--bg-card);
	color: var(--ink);
	padding: 11px 14px;
	/* Grows by hand, never sideways: a textarea that can be dragged wider
	   breaks the card it sits in. */
	resize: vertical;
	min-height: 4.5em;
}
.bchat__input:focus { outline: none; border-color: var(--act); box-shadow: var(--ring); }
.bchat__input::placeholder { color: var(--ink-faint); }
/* The send button belongs to the box above it, not to the card. */
.bchat__form .btn { justify-self: start; }

/* ---------------------------------------------------------------------------
 * POPULAR TIMES (v17.20)
 *
 * The week as a shape, inside the "How busy it gets" panel. Charts::hours
 * emits the columns with only structural classes so the surface decides how
 * they look; everything visual lives here rather than inline, so a theme can
 * override it and the venue curtain inherits it for free.
 * ------------------------------------------------------------------------- */
.popwk { margin-top: var(--sp-4); }

/* Seven day buttons that must never wrap into a second ragged line on a phone.
   Equal columns rather than auto-fit, per the no-empty-grid-spaces rule. */
.popwk__tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--sp-3); }
.popwk__tab {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	padding: 7px 2px; font: inherit; font-size: var(--fs-xs); font-weight: 600;
	color: var(--ink-faint); border-bottom: 2px solid var(--line);
	transition: color .14s ease, border-color .14s ease;
}
.popwk__tab:hover { color: var(--ink); }
.popwk__tab.is-on { color: var(--act); border-bottom-color: var(--act); }
.popwk__tab:focus-visible { outline: 2px solid var(--act); outline-offset: -2px; border-radius: var(--r-sm); }

.popwk__live { display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--sp-2); padding: 4px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.popwk__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; animation: busyPulse 2.4s ease-in-out infinite; }
.popwk__live--busy { background: var(--sun-wash); color: var(--warn-600); }
.popwk__live--busy .popwk__dot { background: var(--sun); }
.popwk__live--steady { background: var(--wash-100); color: var(--ink-soft); }
.popwk__live--steady .popwk__dot { background: var(--ink-faint); }
.popwk__live--quiet { background: var(--act-wash); color: var(--act-hover); }
.popwk__live--quiet .popwk__dot { background: var(--act); }
@media (prefers-reduced-motion: reduce) { .popwk__dot { animation: none; } }

.popwk__thin { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-faint); }
.popwk__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-faint); }

/* The columns themselves. minmax(0, 1fr) rather than 1fr, so a narrow phone
   shrinks the bars instead of pushing the panel sideways (the overflow rule). */
.hrs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 4px; }
.hrs__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
/* Wide bars, narrow gaps, so the row reads as one shape rather than a fence of
   separate sticks. The cap only bites in the sidebar column on a large screen,
   where an uncapped bar would end up fatter than it is tall. */
.hrs__bar { display: block; width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; }
.hrs__tick { margin-top: 5px; font-size: 10px; line-height: 1; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The current hour is the one fact on this chart that is about right now, so it
   gets the ink weight and a rule under it rather than another colour. */
.hrs__col.is-now .hrs__tick { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * THE PHONE FIELD (v17.25)
 *
 * A country beside the number. The select is sized to its own content rather
 * than a share of the row, so a long country name never squeezes the number
 * box down to nothing on a phone, which is the field somebody is actually
 * typing into.
 * ------------------------------------------------------------------------- */
.phonef__row { display: flex; gap: 8px; align-items: stretch; }
.phonef__country {
	flex: 0 0 auto; max-width: 42%; min-width: 0;
	font: inherit; font-size: var(--fs-sm);
	padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
	background: var(--bg-card); color: var(--ink);
}
.phonef__number { flex: 1 1 auto; min-width: 0; }
.phonef__preview {
	display: block; margin-top: 6px; min-height: 1em;
	font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.phonef__preview:not(:empty)::before { content: "\2192\00a0"; }

/* ==========================================================================
 * READING UP ON A DISTRICT (v17.80)
 *
 * The foot of a district listing, where the district-and-cuisine pages are
 * finally reachable. Quiet on purpose: it is a way onward for somebody who
 * has read the venues, not a second offer competing with them, so it wears
 * no colour of its own and the count does the talking.
 * ========================================================================== */
.dir-more { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.dir-more__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -.01em; margin: 0; }
.dir-more__sub { color: var(--ink-soft); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); max-width: 60ch; }
.dir-more__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--sp-2); }
.dir-more__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
	padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 12px);
	background: var(--bg-card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
	transition: border-color .12s ease, background-color .12s ease; overflow-wrap: anywhere; }
.dir-more__link:hover { border-color: var(--act); background: var(--act-wash, #DFF1EF); color: var(--ink); }
.dir-more__n { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }

/* The one line home from a venue to the category page it belongs to (v17.80).
   A single row rather than a card grid: it is a door, not an offer, and it
   must not read as another venue. */
.prof-landing { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--bg-card); color: var(--ink); text-decoration: none;
	transition: border-color .12s ease, background-color .12s ease; }
.prof-landing:hover { border-color: var(--act); background: var(--act-wash, #DFF1EF); color: var(--ink); }
.prof-landing__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.prof-landing__text strong { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); }
.prof-landing__text span { color: var(--ink-soft); font-size: var(--fs-sm); }
.prof-landing__go { color: var(--act); font-size: var(--fs-lg); font-weight: 700; flex: none; }

/* The counted facts at the head of a district-and-cuisine page (v17.82). A
   row of numbers, not cards: they are one sentence about the set, and boxing
   each one would turn a fact into six competing offers. */
.lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4);
	list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .lp-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lp-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-fact b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-fact span { font-size: var(--fs-sm); color: var(--ink-soft); overflow-wrap: anywhere; }