/*
 * Meridian Foodie — the food & recipe pages.
 *
 * ⚠ IT BORROWS THE TEMPLATE'S COLOURS RATHER THAN IMPOSING ITS OWN.
 * This component installs onto sites whose templates disagree about
 * everything, so every colour here is a CUSTOM PROPERTY with a fallback.
 * A site that defines --fd-* gets its own palette; one that does not gets
 * a neutral set that is legible on both a light and a dark ground.
 *
 * ⚠ A DARK GROUND IS A MEDIA QUERY, NOT A SECOND STYLESHEET. Two sheets
 * drift, and the drift shows up as white text on white in exactly the
 * places nobody tested.
 *
 * ⚠ EVERY COLOUR IS DEFINED ON BARE :root FIRST. A value whose only
 * definition lives inside a media query is undefined for the other
 * scheme, and the fallback that then applies is rarely the one intended.
 */

:root {
	--fd-ink: #1c1917;
	--fd-ink-soft: #57534e;
	--fd-ink-faint: #8a8178;
	--fd-ground: #ffffff;
	--fd-ground-soft: #faf8f5;
	--fd-line: #e5e0d8;
	--fd-accent: #b4531f;
	--fd-accent-soft: #fdf3ec;
	--fd-warn: #8a5a00;
	--fd-warn-soft: #fdf6e3;
	--fd-radius: 12px;
	--fd-radius-sm: 8px;
	--fd-gap: 1.25rem;
	--fd-shadow: 0 1px 2px rgb(28 25 23 / 6%), 0 4px 16px rgb(28 25 23 / 5%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fd-ink: #f5f1ea;
		--fd-ink-soft: #b9b2a8;
		--fd-ink-faint: #8a8178;
		--fd-ground: #17150f;
		--fd-ground-soft: #201d16;
		--fd-line: #35302a;
		--fd-accent: #e8894f;
		--fd-accent-soft: #2a1d13;
		--fd-warn: #e0b45f;
		--fd-warn-soft: #2a2213;
		--fd-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
	}
}

:root[data-theme="dark"] {
	--fd-ink: #f5f1ea;
	--fd-ink-soft: #b9b2a8;
	--fd-ink-faint: #8a8178;
	--fd-ground: #17150f;
	--fd-ground-soft: #201d16;
	--fd-line: #35302a;
	--fd-accent: #e8894f;
	--fd-accent-soft: #2a1d13;
	--fd-warn: #e0b45f;
	--fd-warn-soft: #2a2213;
	--fd-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
}

.fd {
	color: var(--fd-ink);
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(0.75rem, 3vw, 1.5rem);
	line-height: 1.55;
}

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

.fd h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 0.4em; }
.fd h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0 0 0.6em; }
.fd h3 { font-size: 1rem; margin: 0 0 0.4em; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--fd-ink-soft); }

.fd a { color: var(--fd-accent); text-decoration-thickness: 1px;
	text-underline-offset: 2px; }

.fd-sr {
	position: absolute; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- hero */

.fd-hero { padding: clamp(1rem, 3vw, 2rem) 0 1.25rem; }
.fd-hero--compact { padding-bottom: 0.75rem; }

.fd-hero__image {
	border-radius: var(--fd-radius);
	overflow: hidden;
	margin-bottom: 1.25rem;
	background: var(--fd-ground-soft);
	/* aspect-ratio rather than a fixed height: a hero that letterboxes on a
	   phone and crops a plate in half on a laptop is the same bug twice. */
	aspect-ratio: 16 / 7;
}

.fd-hero__image--small { max-width: 260px; aspect-ratio: 1; }
.fd-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fd-hero__lead { font-size: 1.05rem; color: var(--fd-ink-soft); max-width: 62ch; margin: 0.5em 0; }
.fd-hero__native { color: var(--fd-ink-soft); font-size: 1.05rem; margin: 0 0 0.5em; }
.fd-hero__kind { margin: 0 0 0.75em; }

.fd-stats {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
	list-style: none; padding: 0; margin: 1rem 0 0;
	font-size: 0.85rem; color: var(--fd-ink-soft);
	text-transform: uppercase; letter-spacing: 0.05em;
}

.fd-stats strong {
	display: block; font-size: 1.5rem; color: var(--fd-ink);
	letter-spacing: 0; text-transform: none;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- panels */

.fd-panel {
	border-top: 1px solid var(--fd-line);
	padding: 1.5rem 0;
}

.fd-panel--facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--fd-gap);
}

.fd-prose p { max-width: 68ch; }

.fd-note {
	font-size: 0.9rem; color: var(--fd-ink-soft); margin: 0.5rem 0;
}

.fd-note--warn {
	background: var(--fd-warn-soft);
	color: var(--fd-warn);
	border-left: 3px solid currentcolor;
	padding: 0.6rem 0.85rem;
	border-radius: 0 var(--fd-radius-sm) var(--fd-radius-sm) 0;
}

.fd-empty {
	color: var(--fd-ink-soft); padding: 2rem 0; text-align: center;
	border: 1px dashed var(--fd-line); border-radius: var(--fd-radius);
}

.fd-count { font-size: 0.9rem; color: var(--fd-ink-soft); margin: 1rem 0 0.5rem; }

/* -------------------------------------------------------------- cards */

.fd-grid {
	display: grid;
	/* min(100%, …) so a narrow phone never produces a column wider than the
	   screen — the usual cause of a page that scrolls sideways. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--fd-gap);
}

.fd-card {
	display: flex; flex-direction: column;
	background: var(--fd-ground);
	border: 1px solid var(--fd-line);
	border-radius: var(--fd-radius);
	overflow: hidden;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.fd-card:hover, .fd-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--fd-shadow);
}

.fd-card__media {
	position: relative; display: block;
	aspect-ratio: 4 / 3; background: var(--fd-ground-soft);
}

.fd-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fd-card__noimage {
	display: grid; place-items: center; height: 100%;
	font-size: 2.5rem; opacity: 0.35;
}

.fd-card__body { padding: 0.85rem 0.95rem 1rem; display: flex;
	flex-direction: column; gap: 0.4rem; flex: 1; }

.fd-card__title { font-size: 1.02rem; margin: 0; text-transform: none;
	letter-spacing: 0; color: var(--fd-ink); line-height: 1.3; }
.fd-card__title a { color: inherit; text-decoration: none; }
.fd-card__title a:hover { color: var(--fd-accent); }

.fd-card__blurb { font-size: 0.86rem; color: var(--fd-ink-soft); margin: 0; }
.fd-card__native { font-size: 0.86rem; color: var(--fd-ink-faint); margin: 0; }

.fd-card__meta {
	display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem;
	list-style: none; padding: 0; margin: auto 0 0;
	font-size: 0.8rem; color: var(--fd-ink-soft);
	font-variant-numeric: tabular-nums;
}

.fd-badge {
	position: absolute; top: 0.5rem; right: 0.5rem;
	width: 1.6rem; height: 1.6rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--fd-ground); color: var(--fd-accent);
	border: 1px solid var(--fd-line); font-size: 0.8rem;
}

/* -------------------------------------------------------------- tiles */

.fd-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: 0.85rem;
	margin: 1.25rem 0;
}

.fd-tile {
	display: flex; flex-direction: column; gap: 0.3rem;
	padding: 1rem;
	border: 1px solid var(--fd-line);
	border-radius: var(--fd-radius);
	background: var(--fd-ground);
	text-decoration: none; color: var(--fd-ink);
	transition: border-color 120ms ease, background 120ms ease;
}

.fd-tile:hover { border-color: var(--fd-accent); background: var(--fd-accent-soft); }
.fd-tile__title { font-weight: 600; }
.fd-tile__count { font-size: 0.8rem; color: var(--fd-ink-soft); }
.fd-tile__icon { font-size: 1.6rem; line-height: 1; }
.fd-tile__media { display: block; aspect-ratio: 3 / 2; border-radius: var(--fd-radius-sm);
	overflow: hidden; margin-bottom: 0.4rem; }
.fd-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------- chips */

.fd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.fd-chip {
	display: inline-flex; align-items: baseline; gap: 0.35rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--fd-line);
	border-radius: 999px;
	background: var(--fd-ground);
	font-size: 0.85rem; color: var(--fd-ink);
	text-decoration: none;
}

a.fd-chip:hover { border-color: var(--fd-accent); background: var(--fd-accent-soft); }
.fd-chip.is-active, .fd-chip.is-primary {
	border-color: var(--fd-accent); background: var(--fd-accent-soft);
	color: var(--fd-accent); font-weight: 600;
}
.fd-chip small { color: var(--fd-ink-faint); font-variant-numeric: tabular-nums; }
.fd-chip--kind { font-size: 0.72rem; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--fd-ink-soft); }

.fd-groupswitch {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
	margin: 1.25rem 0 0.5rem;
}

.fd-groupswitch__label {
	font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--fd-ink-faint); margin-right: 0.35rem;
}

/* --------------------------------------------------------------- A–Z */

.fd-az {
	display: flex; flex-wrap: wrap; gap: 0.2rem;
	margin: 1.25rem 0;
	padding: 0.5rem;
	border: 1px solid var(--fd-line);
	border-radius: var(--fd-radius);
	background: var(--fd-ground-soft);
}

.fd-az__letter, .fd-az__all {
	min-width: 2rem; padding: 0.3rem 0.45rem;
	text-align: center; border-radius: var(--fd-radius-sm);
	font-size: 0.9rem; text-decoration: none; color: var(--fd-ink);
	font-variant-numeric: tabular-nums;
}

.fd-az__all { min-width: auto; padding-inline: 0.7rem; }
.fd-az__letter:hover, .fd-az__all:hover { background: var(--fd-accent-soft); color: var(--fd-accent); }

.fd-az__letter.is-active, .fd-az__all.is-active {
	background: var(--fd-accent); color: var(--fd-ground); font-weight: 600;
}

/* ⚠ A LETTER WITH NOTHING BEHIND IT IS NOT A LINK, and it must not look
   like one either — a disabled-looking letter teaches the reader the bar
   is honest. */
.fd-az__letter.is-empty { color: var(--fd-ink-faint); opacity: 0.4; cursor: default; }

/* --------------------------------------------------------------- tree */

.fd-tree { list-style: none; padding: 0; margin: 0; }
.fd-tree .fd-tree { padding-left: 1.25rem; border-left: 1px solid var(--fd-line);
	margin-left: 0.5rem; }

.fd-tree__node { margin: 0.15rem 0; }

.fd-tree__link {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
	padding: 0.4rem 0.6rem; border-radius: var(--fd-radius-sm);
	text-decoration: none; color: var(--fd-ink);
}

.fd-tree__link:hover { background: var(--fd-accent-soft); }
.fd-tree__name { font-weight: 600; }
.fd-tree__native { color: var(--fd-ink-faint); font-size: 0.9rem; }
.fd-tree__count { font-size: 0.8rem; color: var(--fd-ink-soft); margin-left: auto; }
.fd-tree--depth0 > .fd-tree__node > .fd-tree__link .fd-tree__name { font-size: 1.05rem; }

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

.fd-ilist {
	list-style: none; padding: 0; margin: 1rem 0;
	columns: 4 200px; column-gap: 1.5rem;
}

.fd-ilist__item { break-inside: avoid; padding: 0.2rem 0;
	display: flex; align-items: baseline; gap: 0.4rem; }
.fd-ilist__item a { display: flex; gap: 0.4rem; align-items: baseline;
	text-decoration: none; color: var(--fd-ink); }
.fd-ilist__item a:hover .fd-ilist__name { color: var(--fd-accent); }
.fd-ilist__count { font-size: 0.75rem; color: var(--fd-ink-faint);
	font-variant-numeric: tabular-nums; }

.fd-flag { width: 1.4em; height: auto; border-radius: 2px; vertical-align: -0.15em; }

.fd-places { list-style: none; padding: 0; margin: 0; }
.fd-places__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.fd-places__role { font-size: 0.78rem; color: var(--fd-ink-faint);
	text-transform: uppercase; letter-spacing: 0.05em; }

.fd-names { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0; }
.fd-names dt { font-size: 0.85rem; color: var(--fd-ink-soft); }
.fd-names dd { margin: 0; }

.fd-subs { list-style: none; padding: 0; margin: 0; }
.fd-subs li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
	padding: 0.35rem 0; border-bottom: 1px solid var(--fd-line); }
.fd-subs__ratio { font-size: 0.82rem; color: var(--fd-ink-soft);
	font-variant-numeric: tabular-nums; }
.fd-subs__ratio--unknown { color: var(--fd-warn); }
.fd-subs__note { font-size: 0.82rem; color: var(--fd-ink-faint); flex: 1 1 100%; }

.fd-agree { list-style: none; padding: 0; margin: 0;
	columns: 3 220px; column-gap: 1.5rem; }
.fd-agree li { break-inside: avoid; display: flex; justify-content: space-between;
	gap: 0.75rem; padding: 0.25rem 0; }
.fd-agree__count { font-size: 0.78rem; color: var(--fd-ink-faint); white-space: nowrap; }

.fd-flag[alt=""] { flex: none; }

.fd-crumbs {
	display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
	font-size: 0.85rem; color: var(--fd-ink-soft);
	padding: 0.75rem 0 0;
}

.fd-crumbs a { text-decoration: none; }
.fd-crumbs a:hover { text-decoration: underline; }

.fd-flag2 { display: none; }

/* ------------------------------------------------------------- tables */

/* ⚠ A WIDE TABLE SCROLLS INSIDE ITS OWN BOX. Left to the page it makes the
   whole document scroll sideways on a phone, which breaks every other
   element on it. */
.fd-tablewrap { overflow-x: auto; }

.fd-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.fd-table th, .fd-table td { text-align: left; padding: 0.45rem 0.6rem;
	border-bottom: 1px solid var(--fd-line); }
.fd-table th { color: var(--fd-ink-soft); font-weight: 600; white-space: nowrap; }
.fd-table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ filters */

.fd-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--fd-gap);
	padding: 1rem;
	border: 1px solid var(--fd-line);
	border-radius: var(--fd-radius);
	background: var(--fd-ground-soft);
	margin: 1rem 0;
}

.fd-filters__row { display: flex; flex-direction: column; gap: 0.3rem; }
.fd-filters__row label { font-size: 0.8rem; text-transform: uppercase;
	letter-spacing: 0.05em; color: var(--fd-ink-soft); }
.fd-filters select, .fd-filters input {
	font: inherit; padding: 0.4rem 0.5rem;
	border: 1px solid var(--fd-line); border-radius: var(--fd-radius-sm);
	background: var(--fd-ground); color: var(--fd-ink);
}
.fd-filters__actions { display: flex; gap: 0.5rem; align-items: end; }

.fd-searchbar { display: flex; gap: 0.5rem; margin: 1rem 0 0; max-width: 32rem; }
.fd-searchbar input[type="search"] {
	flex: 1; font: inherit; padding: 0.5rem 0.75rem;
	border: 1px solid var(--fd-line); border-radius: 999px;
	background: var(--fd-ground); color: var(--fd-ink);
}

.fd button, .fd .fd-btn {
	font: inherit; cursor: pointer;
	padding: 0.45rem 1rem;
	border: 1px solid var(--fd-accent);
	border-radius: 999px;
	background: var(--fd-accent); color: #fff;
	text-decoration: none; display: inline-block;
}

.fd .fd-btn--ghost { background: transparent; color: var(--fd-accent); }

.fd-flag3 { display: none; }

.fd-flag,
.fd-flag--inline { max-width: none; }

.fd-flagx { display: none; }

.fd-flagy { display: none; }

.fd-flag-note { font-size: 0.78rem; color: var(--fd-ink-faint); }

.fd-flag-wrap { display: inline-flex; }

.fd-flag-hidden { display: none; }

.fd-unreviewed,
.fd-flag[data-unreviewed] { opacity: 1; }

.fd-flag,
.fd-badge--verified { flex: none; }

/* An inline "not reviewed" marker in a list. */
.fd-ilist__item .fd-flag,
.fd-ilist__item .fd-unreviewed { flex: none; }

span.fd-flag:not([src]) {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--fd-warn); background: var(--fd-warn-soft);
	padding: 0.1rem 0.4rem; border-radius: 999px; width: auto; height: auto;
}

@media (max-width: 640px) {
	.fd-ilist { columns: 2 140px; }
	.fd-agree { columns: 1; }
	.fd-stats { gap: 0.5rem 1.25rem; }
	.fd-stats strong { font-size: 1.25rem; }
}

@media print {
	/* A recipe is printed to be cooked from: the furniture goes. */
	.fd-az, .fd-filters, .fd-groupswitch, .fd-crumbs, .fd-searchbar { display: none; }
	.fd { max-width: none; }
}

/* ── THE RECIPE PAGER ──────────────────────────────────────────────────────
 * Added 2026-09-28 with pagination itself: the list used to stop at 120 with
 * nothing on the page to say so.
 *
 * ⚠ IT DRAWS WITH THIS COMPONENT'S OWN TOKENS, not currentColor. My first
 * version filled the current page with `background: currentColor` and left the
 * numeral inheriting the same colour - a filled chip with an invisible number
 * in it. The buttons above use --fd-accent on white; so does this. */
.fd-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 24px 0 8px;
}

.fd-pager__page,
.fd-pager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid var(--fd-line);
	border-radius: var(--fd-radius-sm);
	background: var(--fd-ground);
	color: var(--fd-accent);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fd-pager__page:hover,
.fd-pager__step:hover { border-color: var(--fd-accent); }

/* The page you are on is FILLED, not merely bolder - that difference has to
   survive being read quickly. */
.fd-pager__page.is-here {
	background: var(--fd-accent);
	border-color: var(--fd-accent);
	color: #fff;
	font-weight: 700;
}

.fd-pager__of {
	margin-left: 8px;
	font-size: 13px;
	color: var(--fd-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* ── Cooking encyclopedia ──────────────────────────────────────────────
   ⚠ THE SAFETY PANEL HAS TO LOOK DIFFERENT FROM THE PROSE. A temperature that
   decides whether food is safe, set in the same type as an aside about flavour,
   reads as equally optional. It is bordered, tinted and placed above the
   explanation for exactly that reason. */
.fd-learn .fd-shelf { margin: 36px 0; }
.fd-shelf__title { font-size: 22px; margin: 0 0 4px; }
.fd-shelf__blurb { margin: 0 0 16px; color: var(--fd-ink-soft); }
.fd-shelf__list { list-style: none; margin: 0; padding: 0;
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.fd-shelf__item { border: 1px solid var(--fd-line, rgba(0,0,0,.12));
	border-radius: 8px; padding: 14px 16px; background: var(--fd-card, #fff); }
.fd-shelf__link { text-decoration: none; display: block; }
.fd-shelf__name { font-weight: 600; display: block; }
.fd-shelf__also { display: block; font-size: 13px; color: var(--fd-ink-soft); }
.fd-shelf__sum { display: block; margin-top: 7px; font-size: 14px; line-height: 1.45; }
.fd-shelf__temp { display: inline-block; margin-top: 8px; font-size: 13px;
	padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,.06);
	font-variant-numeric: tabular-nums; }

.fd-article { max-width: 736px; }
.fd-head__crumbs { font-size: 14px; color: var(--fd-ink-soft); margin-bottom: 6px; }
.fd-head__also { font-size: 14px; color: var(--fd-ink-soft); margin: 4px 0; }
.fd-head__temp { font-variant-numeric: tabular-nums; margin: 10px 0 0; }
.fd-head__temp-f { color: var(--fd-ink-soft); font-size: .9em; }
.fd-article__section { margin: 26px 0; }
.fd-article__title { font-size: 18px; margin: 0 0 7px; }
.fd-article__section p { line-height: 1.6; margin: 0 0 11px; }
.fd-article__basis { font-size: 13px; color: var(--fd-ink-soft); margin-top: 32px; }

.fd-safety { margin: 24px 0; padding: 16px 18px;
	border: 1px solid #b4884a; border-left-width: 4px; border-radius: 6px;
	background: rgba(180,136,74,.09); }
.fd-safety__title { font-size: 15px; margin: 0 0 8px;
	text-transform: uppercase; letter-spacing: .05em; }
.fd-safety p { margin: 0 0 8px; line-height: 1.55; }
.fd-safety__src { font-size: 13px; margin: 8px 0 0; }

.fd-empty { padding: 16px; border: 1px dashed rgba(0,0,0,.25); border-radius: 6px; }
.fd-empty__why { display: block; font-size: 13px; color: var(--fd-ink-soft); margin-top: 5px; }

/* ── Dish families and recorded claims ─────────────────────────────────
   ⚠ A CONFIDENCE HAS TO LOOK LIKE ONE. A disputed origin printed in the same
   type as a documented one is read as equally settled, which is the opposite of
   what recording the confidence was for. */
.fd-dish__family { font-size: 14px; color: var(--fd-ink-soft); margin: 6px 0 0; }
.fd-dish__section { margin: 28px 0; }
.fd-dish__title { font-size: 19px; margin: 0 0 6px; }
.fd-dish__blurb { color: var(--fd-ink-soft); margin: 0 0 14px; }
.fd-claims { list-style: none; margin: 0; padding: 0; }
.fd-claims__row { display: flex; gap: 12px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid var(--fd-line, rgba(0,0,0,.1)); }
.fd-claims__text { flex: 1 1 auto; line-height: 1.55; }
.fd-claims__conf { flex: 0 0 auto; font-size: 12px; text-transform: uppercase;
	letter-spacing: .05em; padding: 2px 8px; border-radius: 10px;
	background: rgba(0,0,0,.07); }
.fd-claims__conf--documented { background: #d8ead8; }
.fd-claims__conf--probable   { background: #e6e9d2; }
.fd-claims__conf--possible   { background: #efe6d2; }
.fd-claims__conf--disputed   { background: #f0dcdc; }
.fd-claims__conf--folk_claim { background: #ece0ef; }

/* Confidence badge for the one value that had no colour: an unverified claim
   must not fall through to the page background and read as unmarked. */
.fd-claims__conf--unverified { background: #e4e4e4; color: #3a3a3a; }

/* Communities recorded for a cuisine. The community label is what keeps Gorani
   distinct from Albanian and Ashkali distinct from Roma, so it is given the
   same visual weight as a claim rather than tucked into a fact list. */
.fd-communities { list-style: none; margin: 0 0 14px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px; }
.fd-communities__item { display: inline-flex; gap: 8px; align-items: baseline;
    padding: 6px 10px; background: #f6f4ef; border-radius: 4px; }
.fd-communities__name { font-weight: 600; }
.fd-communities__role { font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: #6a6a6a; }
.fd-languages { margin: 0; color: #4a4a4a; }

/* Typed edges. Direction is kept visible because "Ottoman influenced Bulgarian"
   and its reverse are different statements, and the note is what stops an edge
   from being a bare arrow. */
.fd-edges { list-style: none; margin: 0 0 16px; padding: 0; }
.fd-edges__heading { font-size: 13px; text-transform: uppercase;
    letter-spacing: .05em; color: #6a6a6a; margin: 14px 0 8px; }
.fd-edges__row { display: flex; flex-wrap: wrap; gap: 10px;
    align-items: baseline; padding: 8px 0; border-top: 1px solid #ece8e0; }
.fd-edges__rel { flex: 0 0 auto; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: #6a6a6a; min-width: 9em; }
.fd-edges__target { flex: 1 1 12em; font-weight: 600; }
.fd-edges__note { flex: 1 1 100%; margin: 4px 0 0; font-size: 13px;
    line-height: 1.5; color: #55504a; }

@media (max-width: 640px) {
    .fd-edges__rel { min-width: 0; }
}

/* ── SHOPPING LIST ────────────────────────────────────────────────────────
 * Added 2026-09-28 with the list itself. Ticking is a FORM button, so it has
 * to be made to look like a checkbox rather than a submit control. */
.fd-list { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 34rem; }
.fd-list__item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .4rem 0;
	border-bottom: 1px solid #eceff1;
}
.fd-list__item.is-checked .fd-list__what { color: #8a949b; text-decoration: line-through; }
.fd-list__tick button,
.fd-list__drop button {
	background: none;
	border: 0;
	padding: 0 .2rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}
.fd-list__drop { margin-left: auto; }
.fd-list__drop button { color: #a32020; }
.fd-list__what { flex: 1; }
.fd-list__add { display: flex; gap: .4rem; flex-wrap: wrap; max-width: 34rem; margin-bottom: 1rem; }
.fd-list__add input[type="text"]:first-of-type { flex: 1; min-width: 12rem; }
.fd-inline { display: inline; }
.fd-actions form { display: inline; }

@media print {
	/* The list is the one page here people really do print. */
	.fd-list__tick button { border: 1px solid #000; width: 1rem; height: 1rem; }
	.fd-list__drop, .fd-list__add { display: none; }
}