/*
 * /near-me/: the roaster finder (TC_Finder, templates/finder/page.php),
 * as the owner signed it off on 2026-09-30 (mockup:
 * claude.ai/artifact/Nsr477Wj5RAMhRgGVmMBg6), with the second pass the
 * same day: more contrast, each section set apart, a skeleton until the
 * place is settled and nothing shifting after. On 2026-10-01 the sign and
 * the status panel gave way to one place dropdown, top left; later that day,
 * with no place, the page became one ask card over a blurred dummy (no
 * dropdown, no roastery, a third of the way down the screen) and "How it
 * works" went.
 *
 * home.css's tokens, hung on .tc-cards (which <main> carries), plus the
 * finder's own: white framed cards on the cream page.
 *
 * Every rule is under #tapper-cafe-app .tc-finder: storefront.css styles
 * bare elements inside the app at (0,1,1), and the theme button:hover too.
 * The state is <main data-state>: resolving, checking, ask, ok, shut, none.
 */

body.tc-cafe-finder .site-content {
	padding-top: 0;
}

/* Less air above the page (owner, 2026-09-30): the storefront container's own top padding goes. */
body.tc-cafe-finder #tapper-cafe-app.tc-app-container {
	padding-top: 0;
}

#tapper-cafe-app .tc-finder {
	--tc-finder-rating: #1E7B47;
	--tc-finder-red: #A1261A;
	--tc-finder-card-line: rgba(18, 17, 17, 0.13);
	--tc-finder-bone: #ECE4D6;
	--tc-finder-bone-hi: #F6F1E8;

	max-width: var(--tc-measure, 68rem);
	margin: 0 auto;
	padding: 0.375rem 0 4rem;
	color: var(--tc-body);
	font-family: var(--tc-home-display);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/*
 * Hidden means hidden. Several blocks below state their own display, which
 * outranks the browser's [hidden] rule -- that is how an empty amber box and
 * the filter row came to show where nothing should have been.
 */
#tapper-cafe-app .tc-finder [hidden] {
	display: none !important;
}

/*
 * Motta styles every bare <button> (motta/style.css:793-813): min-width
 * 160px, a 60px line box, 2em padding and a coloured shadow. min-width
 * outranks every width below, which held the rating badges at 10rem. The finder's buttons size themselves.
 */
#tapper-cafe-app .tc-finder button {
	min-width: 0;
	box-shadow: none;
	line-height: 1.2;
}

/* Room under the last card for a bar fixed to the foot. */
#tapper-cafe-app .tc-finder.has-bar {
	padding-bottom: 8rem;
}

#tapper-cafe-app .tc-finder :where(p, ul, ol, h1, h2, h3) {
	margin: 0;
}

#tapper-cafe-app .tc-finder :where(ul, ol) {
	padding: 0;
	list-style: none;
}

#tapper-cafe-app .tc-finder :where(a) {
	color: inherit;
}

#tapper-cafe-app .tc-finder svg {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
}

#tapper-cafe-app .tc-finder :where(button, a, select, input):focus-visible {
	outline: 2px solid var(--tc-amber);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ which parts show */

/*
 * Until the place is settled -- and again while a place just given is asked
 * about -- the skeleton is the page. Nothing else is drawn, so nothing moves
 * when the answer comes.
 */
#tapper-cafe-app .tc-finder:is([data-state="resolving"], [data-state="checking"]) > :not(.tc-finder__skel):not(script):not([data-tc-finder-busy]) {
	display: none !important;
}

#tapper-cafe-app .tc-finder:not([data-state="resolving"]):not([data-state="checking"]) > .tc-finder__skel {
	display: none;
}

/* No place: the ask card is the whole question, so no dropdown above it (owner, 2026-10-01). */
#tapper-cafe-app .tc-finder[data-state="ask"] > .tc-finder__placebar {
	display: none;
}

/*
 * ...and a blurred dummy of the ok page behind it (owner, 2026-10-01; mockup
 * claude.ai/artifact/SfAXtfqdhPqtfddcQsy4AC, medium blur): the page a place
 * brings, out of focus, with the card the one sharp thing on it. In ask, and
 * in none -- nobody delivers, the same page with another card (owner,
 * 2026-10-01: "Just a blur background UI with a section at 1/3 of from top.
 * Just like when location is not fetched").
 */
#tapper-cafe-app .tc-finder__decoy {
	display: none;
}

#tapper-cafe-app .tc-finder:is([data-state="ask"], [data-state="none"]) {
	--tc-finder-decoy-blur: 8px;
	--tc-finder-decoy-veil: rgba(255, 253, 248, 0.45);
	position: relative;
	isolation: isolate;
}

#tapper-cafe-app .tc-finder:is([data-state="ask"], [data-state="none"]) > .tc-finder__decoy {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

#tapper-cafe-app .tc-finder__decoy-page {
	padding-top: 0.25rem;
	filter: blur(var(--tc-finder-decoy-blur));
}

/* A cream veil over the blur. */
#tapper-cafe-app .tc-finder__decoy::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tc-finder-decoy-veil);
}

/* Spans standing in for the real page's lines. */
#tapper-cafe-app .tc-finder__decoy .tc-finder__range {
	display: block;
}

#tapper-cafe-app .tc-finder__decoy .tc-finder__reach {
	margin-top: 1rem;
}

/*
 * The card over it, lifted, and centred a third of the way down the screen
 * on a phone and a desk alike (owner, 2026-10-01: "On mobile align the
 * position around 33% from top", then "Similar to mobile shift the location
 * widget at 1/3"). The blur fills the screen under the header.
 *   --tc-finder-ask-head   the site header's height, taken off the third;
 *   --tc-finder-ask-floor  the least the card's centre sits below the page's
 *                          top, so a short screen never tucks it under the header.
 */
#tapper-cafe-app .tc-finder:is([data-state="ask"], [data-state="none"]) {
	--tc-finder-ask-head: 3.5rem;
	--tc-finder-ask-floor: 11.5rem;
	min-height: max(36rem, calc(100vh - 4rem));
	min-height: max(36rem, calc(100svh - 4rem));
}

#tapper-cafe-app .tc-finder:is([data-state="ask"], [data-state="none"]) > .tc-finder__ask {
	position: absolute;
	top: max(var(--tc-finder-ask-floor), calc(33vh - var(--tc-finder-ask-head)));
	top: max(var(--tc-finder-ask-floor), calc(33svh - var(--tc-finder-ask-head)));
	right: 0;
	left: 0;
	z-index: 1;
	margin: 0 auto;
	transform: translateY(-50%);
	box-shadow: inset 0 0 0 1px var(--tc-finder-card-line), 0 24px 60px rgba(18, 17, 17, 0.18);
}

/* Nobody delivers: the dropdown stays, sharp over the blur, to try another place. */
#tapper-cafe-app .tc-finder[data-state="none"] > .tc-finder__placebar {
	position: relative;
	z-index: 1;
}

/* ...in the place of the dummy's own, which would ghost behind it. */
#tapper-cafe-app .tc-finder[data-state="none"] .tc-finder__decoy .tc-finder__loc {
	visibility: hidden;
}

/* ------------------------------------------------------------ the skeleton */

#tapper-cafe-app .tc-finder__bone {
	display: block;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tc-finder-bone) 0%, var(--tc-finder-bone-hi) 50%, var(--tc-finder-bone) 100%);
	background-size: 200% 100%;
	animation: tc-finder-shimmer 1.3s ease-in-out infinite;
}

/* The place's dropdown, the size of the real one. */
#tapper-cafe-app .tc-finder__bone--loc {
	width: 12rem;
	height: 2.5rem;
}

#tapper-cafe-app .tc-finder__bone--short { width: 55%; }
#tapper-cafe-app .tc-finder__bone--h2 { width: 10rem; height: 1rem; margin-top: 1rem; border-radius: 8px; }
#tapper-cafe-app .tc-finder__bone--pic { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
#tapper-cafe-app .tc-finder__bone--name { width: 70%; height: 1rem; }
#tapper-cafe-app .tc-finder__bone--meta { width: 90%; height: 0.75rem; }
#tapper-cafe-app .tc-finder__bone--go { align-self: flex-end; width: 6.5rem; height: 2.25rem; margin-top: 0.5rem; border-radius: 8px; }

#tapper-cafe-app .tc-finder__skel-list {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.875rem;
}

#tapper-cafe-app .tc-finder__skel-card {
	display: flex;
	gap: 0.875rem;
	padding: 1rem;
	border-radius: var(--tc-radius-sm);
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--tc-finder-card-line);
}

#tapper-cafe-app .tc-finder__skel-lines {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

/* ------------------------------------------------------------ type and buttons */

#tapper-cafe-app .tc-finder .tc-finder__h2 {
	color: var(--tc-ink);
	font-family: var(--tc-home-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-transform: none;
	text-wrap: balance;
}

/* The green pill: the page's one primary button. */
#tapper-cafe-app .tc-finder .tc-finder__pill,
#tapper-cafe-app .tc-finder .tc-finder__pill:visited,
#tapper-cafe-app .tc-finder .tc-finder__pill:hover,
#tapper-cafe-app .tc-finder .tc-finder__pill:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.875rem;
	margin: 0;
	padding: 0 1.375rem;
	border: 0;
	border-radius: 999px;
	background: var(--tc-green);
	color: #FFFFFF;
	font: 700 0.9375rem/1 var(--tc-home-display);
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

#tapper-cafe-app .tc-finder .tc-finder__pill:hover {
	background: var(--tc-green-dark);
}

/* ------------------------------------------------------------ the search (the ask card's) */

/* A field to look at, a button to press: it opens where.js's search. */
#tapper-cafe-app .tc-finder .tc-finder__search,
#tapper-cafe-app .tc-finder .tc-finder__search:hover,
#tapper-cafe-app .tc-finder .tc-finder__search:focus {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	min-height: 3.125rem;
	margin: 0;
	padding: 0 0.875rem;
	border: 2px solid var(--tc-green);
	border-radius: 12px;
	background: #FFFFFF;
	color: #57524D;
	font: 500 0.9375rem/1.2 var(--tc-home-display);
	text-align: left;
	text-transform: none;
	cursor: text;
}

#tapper-cafe-app .tc-finder .tc-finder__search svg {
	color: var(--tc-green);
}

#tapper-cafe-app .tc-finder .tc-finder__search span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tapper-cafe-app .tc-finder .tc-finder__search:hover {
	background: var(--tc-green-soft);
}

/* ------------------------------------------------------------ the place: a dropdown, top left */

/*
 * The top of the page in every state (owner, 2026-10-01): the place, or
 * "Set delivery location", with a caret. It opens where.js's menu under it.
 * The first section's own margin is pulled up to sit 1rem under it.
 * Not .tc-finder__top: that is the card's name row (card.php).
 */
#tapper-cafe-app .tc-finder__placebar {
	display: flex;
	align-items: center;
	margin-bottom: -1.25rem;
}

#tapper-cafe-app .tc-finder .tc-finder__loc,
#tapper-cafe-app .tc-finder .tc-finder__loc:hover,
#tapper-cafe-app .tc-finder .tc-finder__loc:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	max-width: min(100%, 22rem);
	height: 2.5rem;
	margin: 0;
	padding: 0 0.625rem 0 0.5rem;
	border: 0;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--tc-finder-card-line);
	color: var(--tc-ink);
	font: 700 0.9375rem/1.2 var(--tc-home-display);
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

#tapper-cafe-app .tc-finder .tc-finder__loc:hover,
#tapper-cafe-app .tc-finder .tc-finder__loc[aria-expanded="true"] {
	background: var(--tc-green-soft);
}

#tapper-cafe-app .tc-finder .tc-finder__loc:focus-visible {
	outline: 2px solid var(--tc-green);
	outline-offset: 2px;
}

#tapper-cafe-app .tc-finder .tc-finder__loc > svg {
	flex: none;
}

#tapper-cafe-app .tc-finder .tc-finder__loc > svg:first-child {
	color: var(--tc-green);
}

#tapper-cafe-app .tc-finder__loc-place {
	overflow: hidden;
	min-width: 0;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------ sections and their heads */

#tapper-cafe-app .tc-finder__section {
	margin-top: 2.25rem;
}

#tapper-cafe-app .tc-finder__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.625rem;
	margin-bottom: 0.875rem;
}

#tapper-cafe-app .tc-finder__head--lead {
	flex-wrap: nowrap;
	align-items: flex-start;
}

#tapper-cafe-app .tc-finder__head-ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--tc-ink);
	color: var(--tc-amber);
}

#tapper-cafe-app .tc-finder__head-ic--ok {
	background: var(--tc-green);
	color: #FFFFFF;
}

/* Nobody delivers here: amber, a warning rather than a door shut. */
#tapper-cafe-app .tc-finder__head-ic--warn {
	background: var(--tc-amber);
	color: var(--tc-ink);
}

#tapper-cafe-app .tc-finder__head-sub {
	margin-top: 0.125rem;
	color: var(--tc-body);
	font-size: 0.875rem;
}

/* A count as a dark tab beside its heading. */
#tapper-cafe-app .tc-finder__count {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--tc-ink);
	color: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 700;
}

#tapper-cafe-app .tc-finder__count:empty {
	display: none;
}

#tapper-cafe-app .tc-finder__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: var(--tc-cream-deep);
	box-shadow: inset 0 0 0 1px var(--tc-finder-card-line);
	color: var(--tc-ink);
	font-size: 0.875rem;
	font-weight: 500;
}

/* ------------------------------------------------------------ no place yet: where to deliver */

/*
 * The whole page before a place (owner, 2026-10-01): one white card -- their
 * location, an area search -- and the cities served; no dropdown above it,
 * centred across and a third of the way down. No roastery is shown until there
 * is a place to deliver to.
 */
#tapper-cafe-app .tc-finder__ask {
	max-width: 40rem;
	padding: 1.25rem;
	border-radius: var(--tc-radius);
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--tc-finder-card-line), 0 10px 28px rgba(18, 17, 17, 0.06);
}

#tapper-cafe-app .tc-finder__ask .tc-finder__head {
	margin-bottom: 1.125rem;
}

/* Stacked on a phone, the green one first. */
#tapper-cafe-app .tc-finder__ask-go {
	display: grid;
	gap: 0.625rem;
}

#tapper-cafe-app .tc-finder .tc-finder__ask-go .tc-finder__pill {
	width: 100%;
	min-height: 3.125rem;
}

#tapper-cafe-app .tc-finder .tc-finder__ask-go .tc-finder__search {
	border-color: var(--tc-finder-card-line);
}

#tapper-cafe-app .tc-finder .tc-finder__ask-go .tc-finder__search:hover {
	border-color: var(--tc-green);
}

/* The cities served: a quiet line of chips, none singled out (owner, 2026-10-01). */
#tapper-cafe-app .tc-finder__served {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-top: 1.125rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tc-finder-card-line);
	color: var(--tc-body);
	font-size: 0.875rem;
}

#tapper-cafe-app .tc-finder__served-lead {
	margin-right: 0.125rem;
	font-weight: 600;
}

#tapper-cafe-app .tc-finder__served-city {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: var(--tc-cream-deep);
	color: var(--tc-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

/* ------------------------------------------------------------ the lists */

/*
 * Over the roasteries that deliver, one plain line -- "7 roasteries near
 * you" -- not a heading to read past (owner, 2026-10-01). An <h2> for
 * screen readers, set as body text.
 */
#tapper-cafe-app .tc-finder .tc-finder__nearby {
	display: block;
	margin: 0 0 0.75rem;
	color: var(--tc-body);
	font: 600 0.9375rem/1.4 var(--tc-home-display);
	letter-spacing: 0;
	text-transform: none;
}

#tapper-cafe-app .tc-finder__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

/* ------------------------------------------------------------ the card */

/* White and framed on the cream page, a phone's included: each roastery its own object. */
#tapper-cafe-app .tc-finder__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	min-width: 0;
	margin: 0;
	padding: 1rem;
	border-radius: var(--tc-radius-sm);
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--tc-finder-card-line), 0 2px 8px rgba(18, 17, 17, 0.05);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

#tapper-cafe-app .tc-finder__card:hover {
	box-shadow: inset 0 0 0 1px rgba(18, 17, 17, 0.2), var(--tc-shadow);
}

#tapper-cafe-app .tc-finder__card.is-closed {
	background: #FBF9F6;
}

#tapper-cafe-app .tc-finder__card.is-closed .tc-finder__pic {
	filter: grayscale(0.7);
	opacity: 0.75;
}

#tapper-cafe-app .tc-finder__pic {
	display: grid;
	flex: none;
	place-items: center;
	overflow: hidden;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--tc-green);
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--tc-finder-card-line);
}

#tapper-cafe-app .tc-finder .tc-finder__logo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	background: #FFFFFF;
	object-fit: cover;
}

#tapper-cafe-app .tc-finder__initial {
	color: #FFFFFF;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
}

#tapper-cafe-app .tc-finder__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.1875rem;
	min-width: 0;
}

#tapper-cafe-app .tc-finder__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

/* The name is the card's link, stretched over all of it. */
#tapper-cafe-app .tc-finder .tc-finder__name,
#tapper-cafe-app .tc-finder .tc-finder__name:visited,
#tapper-cafe-app .tc-finder .tc-finder__name:hover {
	min-width: 0;
	overflow: hidden;
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.25;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tapper-cafe-app .tc-finder .tc-finder__name::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}

#tapper-cafe-app .tc-finder__card:hover .tc-finder__name {
	text-decoration: underline;
}

#tapper-cafe-app .tc-finder__pick {
	flex: none;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	background: var(--tc-amber);
	color: var(--tc-ink);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

#tapper-cafe-app .tc-finder__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.125rem 0.375rem;
	color: var(--tc-ink);
	font-size: 0.875rem;
}

/* The rating: a green badge above the stretched link, opening every rating. */
#tapper-cafe-app .tc-finder .tc-finder__rate,
#tapper-cafe-app .tc-finder .tc-finder__rate:hover,
#tapper-cafe-app .tc-finder .tc-finder__rate:focus {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	height: 1.4375rem;
	margin: 0;
	padding: 0 0.4375rem;
	border: 0;
	border-radius: 6px;
	background: var(--tc-finder-rating);
	color: #FFFFFF;
	font: 800 0.8125rem/1 var(--tc-home-display);
	text-transform: none;
	cursor: pointer;
}

#tapper-cafe-app .tc-finder .tc-finder__rate:hover {
	background: #16633A;
}

#tapper-cafe-app .tc-finder__meta .tc-finder__count {
	display: inline;
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--tc-body);
	font-size: inherit;
	font-weight: 500;
}

#tapper-cafe-app .tc-finder__new {
	padding: 0.1rem 0.4375rem;
	border-radius: 6px;
	background: var(--tc-amber);
	color: var(--tc-ink);
	font-size: 0.75rem;
	font-weight: 800;
}

#tapper-cafe-app .tc-finder__live:not(:empty)::before {
	content: "·";
	margin-right: 0.375rem;
	color: var(--tc-body);
}

#tapper-cafe-app .tc-finder__card:not(.is-closed) .tc-finder__live {
	font-weight: 700;
}

#tapper-cafe-app .tc-finder__card.is-closed .tc-finder__live {
	color: var(--tc-finder-red);
	font-weight: 800;
}

#tapper-cafe-app .tc-finder__where,
#tapper-cafe-app .tc-finder__brews {
	color: var(--tc-body);
	font-size: 0.8125rem;
}

#tapper-cafe-app .tc-finder__offer {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.125rem;
	padding: 0.15rem 0.5rem;
	border-radius: 6px;
	background: var(--tc-green-soft);
	color: var(--tc-green-dark);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

#tapper-cafe-app .tc-finder__fresh {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	margin-top: 0.375rem;
	padding: 0.375rem 0.5rem;
	border-radius: 8px;
	background: var(--tc-cream-deep);
	color: var(--tc-ink);
	font-size: 0.8125rem;
}

#tapper-cafe-app .tc-finder__fresh i {
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #FFFFFF;
}

#tapper-cafe-app .tc-finder__fresh b {
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tapper-cafe-app .tc-finder__age {
	flex: none;
	color: var(--tc-green-dark);
	font-weight: 600;
}

#tapper-cafe-app .tc-finder__age.is-aging {
	color: var(--tc-amber-ink);
}

#tapper-cafe-app .tc-finder__range {
	margin-top: 0.25rem;
	color: var(--tc-body);
	font-size: 0.875rem;
}

#tapper-cafe-app .tc-finder__range b {
	color: var(--tc-ink);
	font-weight: 800;
}

#tapper-cafe-app .tc-finder__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--tc-finder-card-line);
}

/* Empty, it still holds its line: nothing below it jumps when it fills. */
#tapper-cafe-app .tc-finder__state {
	min-width: 0;
	color: var(--tc-body);
	font-size: 0.8125rem;
	font-weight: 600;
}

#tapper-cafe-app .tc-finder__card.is-closed .tc-finder__state {
	color: var(--tc-finder-red);
}

/* "Order here": a solid green button to look at; the stretched name is the link. */
#tapper-cafe-app .tc-finder__go {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 2.375rem;
	margin-left: auto;
	padding: 0 1rem;
	border-radius: 10px;
	background: var(--tc-green);
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

#tapper-cafe-app .tc-finder__card:hover .tc-finder__go {
	background: var(--tc-green-dark);
}

#tapper-cafe-app .tc-finder__card.is-closed .tc-finder__go {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1.5px var(--tc-ink);
	color: var(--tc-ink);
}

/*
 * Nobody delivers: "Want Tapper Brews in your city?" (owner, 2026-10-01). The
 * ask card's frame and place; one button, then the thanks in its stead.
 */
#tapper-cafe-app .tc-finder .tc-finder__want-go .tc-finder__pill {
	width: 100%;
	min-height: 3.125rem;
}

#tapper-cafe-app .tc-finder .tc-finder__want-go .tc-finder__pill:disabled {
	opacity: 0.6;
	cursor: default;
}

#tapper-cafe-app .tc-finder__said {
	color: var(--tc-green-dark);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Tapper Brews: under the wish, the courier promise and a way to it. */
#tapper-cafe-app .tc-finder__courier {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--tc-line, rgba(0, 0, 0, 0.1));
	color: var(--tc-ink);
	font-size: 0.9375rem;
	line-height: 1.45;
}

#tapper-cafe-app .tc-finder__courier p {
	margin: 0 0 0.5rem;
}

#tapper-cafe-app .tc-finder .tc-finder__courier .tc-finder__pill--ghost,
#tapper-cafe-app .tc-finder .tc-finder__courier .tc-finder__pill--ghost:visited,
#tapper-cafe-app .tc-finder .tc-finder__courier .tc-finder__pill--ghost:focus {
	width: 100%;
	margin-top: 0.25rem;
	background: transparent;
	color: var(--tc-green-dark);
	box-shadow: inset 0 0 0 2px var(--tc-green);
}

#tapper-cafe-app .tc-finder .tc-finder__courier .tc-finder__pill--ghost:hover {
	background: var(--tc-green);
	color: #FFFFFF;
}

/* ------------------------------------------------------------ the bars at the foot */

#tapper-cafe-app .tc-finder__bar {
	position: fixed;
	right: 0.75rem;
	bottom: calc(var(--tc-bottom-nav, 0px) + 1rem + env(safe-area-inset-bottom, 0px));
	left: 0.75rem;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 36rem;
	margin: 0 auto;
	border-radius: 999px;
	box-shadow: 0 14px 34px rgba(18, 17, 17, 0.28);
	justify-content: space-between;
	padding: 0.5rem 0.5rem 0.5rem 1.125rem;
	background: var(--tc-green-dark);
	color: #FFFFFF;
}

#tapper-cafe-app .tc-finder .tc-finder__bar-open,
#tapper-cafe-app .tc-finder .tc-finder__bar-open:visited {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	color: #FFFFFF;
	text-decoration: none;
}

#tapper-cafe-app .tc-finder__bar-open b {
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tapper-cafe-app .tc-finder__bar-open small {
	color: #D6E7DF;
	font-size: 0.75rem;
}

#tapper-cafe-app .tc-finder .tc-finder__bar-go,
#tapper-cafe-app .tc-finder .tc-finder__bar-go:visited,
#tapper-cafe-app .tc-finder .tc-finder__bar-go:hover {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.375rem;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--tc-green-dark);
	font-weight: 800;
	text-decoration: none;
}

/* ------------------------------------------------------------ desks */

@media (min-width: 48em) {
	#tapper-cafe-app .tc-finder {
		padding-top: 0.75rem;
	}

	/* Three cards a row, equal heights, the foot at the bottom of each. */
	#tapper-cafe-app .tc-finder__list,
	#tapper-cafe-app .tc-finder__skel-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	#tapper-cafe-app .tc-finder__foot {
		margin-top: auto;
	}

	#tapper-cafe-app .tc-finder__body {
		align-self: stretch;
	}

	#tapper-cafe-app .tc-finder__card {
		align-items: stretch;
	}

	#tapper-cafe-app .tc-finder__card:hover {
		transform: translateY(-2px);
	}

	/* No place, or nobody delivers: a desk's taller header and card, the same third (owner, 2026-10-01). */
	#tapper-cafe-app .tc-finder:is([data-state="ask"], [data-state="none"]) {
		--tc-finder-ask-head: 4.75rem;
		--tc-finder-ask-floor: 12.5rem;
		min-height: max(36rem, calc(100vh - 7rem));
	}

	#tapper-cafe-app .tc-finder__ask {
		padding: 2rem 2.25rem;
	}

	/* Centred on a desk: the pin over the question, the cities under the answers. */
	#tapper-cafe-app .tc-finder__ask .tc-finder__head--lead {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	#tapper-cafe-app .tc-finder__served {
		justify-content: center;
	}

	#tapper-cafe-app .tc-finder__want .tc-finder__said {
		text-align: center;
	}

	/* The two ways to answer, side by side on a desk. */
	#tapper-cafe-app .tc-finder__ask-go {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------ a phone's gutter */

/* One 16px gutter on a phone, as on the ordering page: Motta's, not three stacked. */
@media (max-width: 47.99em) {
	body.tc-cafe-finder #tapper-cafe-app.tc-app-container {
		padding-right: 0;
		padding-left: 0;
	}

	#tapper-cafe-app .tc-finder {
		padding-top: 0.25rem;
	}
}

/* ------------------------------------------------------------ motion */

@keyframes tc-finder-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	#tapper-cafe-app .tc-finder *,
	#tapper-cafe-app .tc-finder *::before {
		animation: none !important;
		transition: none !important;
	}
}