/* odf-theme CSS bundle - SOURCE OF TRUTH since 29 Jul 2026: edit this file directly.
   Produced by the one-time split of the retired main.css. Conventions + how to add
   components or page types: docs/CSS_ARCHITECTURE.md. Gate: scripts/css-coverage.py. */
/* ==========================================================================
   Can-dogs-eat - /can-dogs-eat/ hub + item (APPENDED; nothing above touched).
   Verdict colour comes ONLY from the functional band tokens via a per-verdict
   --odf-cde / --odf-cde-soft pair - never a new hex. The instant-answer box is
   the signature element: one glance, one answer, toxic unmistakable.
   ========================================================================== */

/* Per-verdict colour vars (safe = green band, caution = amber, toxic = red,
   unknown = muted ink). Soft is a tint of the same, mixed to near-white. */
.odf-cde-answer--safe, .odf-cde-chip--safe, .odf-cdegroup--safe, .odf-cde-fbtn--safe
	{ --odf-cde: var(--odf-band-verygood); --odf-cde-soft: var(--odf-green-soft); }
.odf-cde-answer--caution, .odf-cde-chip--caution, .odf-cdegroup--caution, .odf-cde-fbtn--caution
	{ --odf-cde: var(--odf-band-average); --odf-cde-soft: var(--odf-gold-soft); }
.odf-cde-answer--toxic, .odf-cde-chip--toxic, .odf-cdegroup--toxic, .odf-cde-fbtn--toxic, .odf-cde-never, .odf-cde-vet
	{ --odf-cde: var(--odf-band-avoid); --odf-cde-soft: color-mix(in srgb, var(--odf-band-avoid) 8%, #fff); }
.odf-cde-answer--unknown, .odf-cde-chip--unknown, .odf-cdegroup--unknown
	{ --odf-cde: var(--odf-ink-3); --odf-cde-soft: var(--odf-tint); }

/* Green-soft washed hero (matches /best/ rhythm). */
.odf-cdehero { background: var(--odf-card); border-bottom: 1px solid var(--odf-line); padding-block: var(--odf-sp-6) var(--odf-sp-7); }
.odf-cdehero__lead { max-width: 60ch; margin: var(--odf-sp-3) 0 0; font-size: var(--odf-fs-lg); line-height: var(--odf-lh-snug); color: var(--odf-ink-2); }
.odf-cdehero .odf-breadcrumbs::after { background: linear-gradient(to right, transparent, var(--odf-card)); }
.odf-cde-updated { display: inline-flex; align-items: center; gap: 6px; margin: var(--odf-sp-3) 0 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-3); }
.odf-cde-updated__ico { color: var(--odf-ink-3); }
.odf-cde-updated time { font-variant-numeric: tabular-nums; }

/* Sources block: the references behind a verdict. Deliberately plain - it is a
   citation list, not a promoted link set, so it reads as an academic footer
   rather than a related-content module. */
.odf-cde-sources__intro { margin: 0 0 var(--odf-sp-3); font-size: var(--odf-fs-sm); color: var(--odf-ink-3); }
.odf-cde-sources__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--odf-sp-2); }
.odf-cde-sources__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-left: var(--odf-sp-3); border-left: 2px solid var(--odf-line); font-size: var(--odf-fs-sm); line-height: 1.45; }
.odf-cde-sources__item a { color: var(--odf-green-deep); text-decoration: underline; text-underline-offset: 2px; }
.odf-cde-sources__item a:hover { text-decoration-thickness: 2px; }
.odf-cde-sources__pub { color: var(--odf-ink-3); font-size: var(--odf-fs-xs); }

/* Single-item readable column. */
.odf-cde { max-width: 760px; margin-inline: auto; }
.odf-cde-block { margin-top: var(--odf-sp-7); }
.odf-cde-block .odf-sechead { margin-bottom: var(--odf-sp-3); }

/* --- Instant-answer box (THE signature element) --- */
.odf-cde-answer {
	display: flex; gap: var(--odf-sp-4); align-items: flex-start;
	margin-top: 3rem;
	padding: var(--odf-sp-5) var(--odf-sp-6); margin-bottom: var(--odf-sp-7);
	background: var(--odf-cde-soft); border: 2px solid var(--odf-cde);
	border-radius: var(--odf-radius-lg); box-shadow: var(--odf-shadow-xs);
}
.odf-cde-answer__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--odf-radius); background: var(--odf-card); color: var(--odf-cde); box-shadow: var(--odf-shadow-xs); }
.odf-cde-answer__icon svg { width: 30px; height: 30px; }
/* Compact verdict badge - the 1-second answer. Dark-tinted text on a soft tint
   of the verdict colour, legible for every band (green / amber / red / grey)
   without relying on white-on-amber, which fails contrast. */
.odf-cde-answer__badge {
	display: inline-flex; align-items: center; align-self: flex-start;
	padding: 5px 15px; border-radius: var(--odf-radius-pill);
	background: color-mix(in srgb, var(--odf-cde) 16%, #fff);
	border: 1px solid color-mix(in srgb, var(--odf-cde) 32%, #fff);
	color: color-mix(in srgb, var(--odf-cde) 78%, #000);
	font-family: var(--odf-font-display); font-weight: 800;
	font-size: var(--odf-fs-xs); text-transform: uppercase; letter-spacing: .08em;
}
.odf-cde-answer__lead { margin: var(--odf-sp-3) 0 0; font-size: var(--odf-fs-lg); line-height: var(--odf-lh-snug); color: var(--odf-ink); max-width: 68ch; text-wrap: pretty; }

/* --- Short "defers-to" page: the one prominent link to the fuller sibling,
   right under the instant answer. Reads as a clear next step (a branded pill)
   without shouting over the verdict above it. --- */
.odf-cde-seealso {
	display: flex; width: fit-content; align-items: center; gap: 8px;
	margin: var(--odf-sp-4) 0 0; padding: 10px 18px;
	background: var(--odf-green-soft);
	border: 1px solid color-mix(in srgb, var(--odf-green) 22%, var(--odf-line));
	border-radius: var(--odf-radius-pill);
	font-weight: 600; font-size: var(--odf-fs-sm); color: var(--odf-ink-2);
}
.odf-cde-seealso__ico { flex: none; color: var(--odf-green); }
.odf-cde-seealso a { color: var(--odf-green-deep); font-weight: 800; text-decoration: none; }
.odf-cde-seealso a:hover { text-decoration: underline; }

/* --- Toxic "Never" panel + call-vet panel --- */
.odf-cde-never { display: flex; gap: var(--odf-sp-3); align-items: flex-start; padding: var(--odf-sp-4) var(--odf-sp-5); background: var(--odf-cde-soft); border: 1px solid color-mix(in srgb, var(--odf-cde) 35%, #fff); border-radius: var(--odf-radius); }
.odf-cde-never__ico { flex: none; color: var(--odf-cde); margin-top: 2px; }
.odf-cde-never__lead { margin: 0 0 4px; font-weight: 800; font-size: var(--odf-fs-lg); color: var(--odf-ink); }
.odf-cde-never .odf-prose { color: var(--odf-ink-2); }

.odf-cde-vet { display: flex; gap: var(--odf-sp-3); align-items: flex-start; padding: var(--odf-sp-5); background: var(--odf-cde-soft); border: 2px solid var(--odf-cde); border-radius: var(--odf-radius-lg); }
.odf-cde-vet--soft { --odf-cde: var(--odf-green); background: var(--odf-tint); border-width: 1px; border-color: var(--odf-line); }
.odf-cde-vet__ico { flex: none; color: var(--odf-cde); margin-top: 2px; }
.odf-cde-vet__body { min-width: 0; }
.odf-cde-vet__h { margin: 0 0 6px; font-weight: 800; font-size: var(--odf-fs-lg); color: var(--odf-ink); }
.odf-cde-vet__body p { margin: 0 0 8px; }
.odf-cde-vet__body p:last-child { margin-bottom: 0; }
.odf-cde-vet__caveat { font-size: var(--odf-fs-sm); color: var(--odf-ink-3); margin-top: 8px; }

/* --- Soft cross-link line --- */
.odf-cde-more { margin-top: var(--odf-sp-6); font-size: var(--odf-fs-base); color: var(--odf-ink-2); }
.odf-cde-more a { color: var(--odf-green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.odf-cde-more a:hover { color: var(--odf-ink); }

/* --- Verdict chips (hub lists + related row) --- */
.odf-cde-chips { display: flex; flex-wrap: wrap; gap: var(--odf-sp-2); }
.odf-cde-chip {
	display: inline-flex; align-items: center; gap: var(--odf-sp-2);
	padding: 7px 13px; border-radius: var(--odf-radius-pill);
	background: var(--odf-card); border: 1px solid var(--odf-line);
	font-size: var(--odf-fs-md); font-weight: 600; color: var(--odf-ink);
	transition: border-color var(--odf-dur) var(--odf-ease), background var(--odf-dur) var(--odf-ease), transform var(--odf-dur) var(--odf-ease);
}
.odf-cde-chip:hover { border-color: var(--odf-cde); background: var(--odf-cde-soft); color: var(--odf-ink); transform: translateY(-1px); }
.odf-cde-chip__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--odf-cde); }
.odf-cde-chip__cat { font-size: var(--odf-fs-xs); font-weight: 600; color: var(--odf-ink-3); }
.odf-cde-chip[hidden] { display: none; }

/* Verdict dot (group headings). */
.odf-cde-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--odf-cde, var(--odf-ink-3)); }

/* --- Hub: search + verdict filter --- */
.odf-cde-search { display: flex; flex-wrap: wrap; gap: var(--odf-sp-3); align-items: center; margin-bottom: var(--odf-sp-6); }
.odf-cde-search__field { display: flex; align-items: center; gap: var(--odf-sp-2); flex: 1 1 260px; min-width: 220px; padding: 0 var(--odf-sp-4); background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-pill); box-shadow: var(--odf-shadow-xs); }
.odf-cde-search__field:focus-within { border-color: var(--odf-green); box-shadow: var(--odf-ring); }
.odf-cde-search__field svg { flex: none; color: var(--odf-ink-3); }
.odf-cde-search__field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.7rem 0; font-size: var(--odf-fs-base); color: var(--odf-ink); outline: 0; }
.odf-cde-search__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.odf-cde-fbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 0.9rem; border-radius: var(--odf-radius-pill); border: 1px solid var(--odf-line); background: var(--odf-card); font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-ink-2); cursor: pointer; transition: color var(--odf-dur) var(--odf-ease), border-color var(--odf-dur) var(--odf-ease), background var(--odf-dur) var(--odf-ease); }
.odf-cde-fbtn:hover { color: var(--odf-ink); border-color: var(--odf-ink-3); }
.odf-cde-fbtn--toxic::before, .odf-cde-fbtn--caution::before, .odf-cde-fbtn--safe::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--odf-cde); }
.odf-cde-fbtn.is-active { background: var(--odf-ink); border-color: var(--odf-ink); color: #fff; }
.odf-cde-fbtn.is-active::before { background: #fff; }

.odf-cde-noresults { margin: 0 0 var(--odf-sp-5); font-weight: 600; color: var(--odf-ink-2); }
.odf-cde-noresults[hidden] { display: none; }

/* --- Hub: verdict groups (toxic set apart as a red-tinted box) --- */
.odf-cde-groups { display: flex; flex-direction: column; gap: var(--odf-sp-8); }
.odf-cdegroup[hidden] { display: none; }
.odf-cdegroup__head { margin-bottom: var(--odf-sp-4); padding-bottom: var(--odf-sp-3); border-bottom: 2px solid var(--odf-cde); }
.odf-cdegroup__h { display: flex; align-items: center; gap: var(--odf-sp-2); margin: 0; font-size: var(--odf-fs-xl); color: var(--odf-ink); }
.odf-cdegroup__h .odf-cde-dot { width: 12px; height: 12px; }
.odf-cdegroup__count { margin-left: 6px; padding: 1px 9px; border-radius: var(--odf-radius-pill); background: var(--odf-cde-soft); font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-ink-2); }
.odf-cdegroup__sub { margin: 4px 0 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-cdegroup--toxic { padding: var(--odf-sp-5); background: var(--odf-cde-soft); border: 1px solid color-mix(in srgb, var(--odf-cde) 30%, #fff); border-radius: var(--odf-radius-lg); }
.odf-cdegroup--toxic .odf-cdegroup__head { border-bottom-color: color-mix(in srgb, var(--odf-cde) 40%, #fff); }

/* --- Mobile: keep the answer box huge; toxic border stays unmissable --- */
@media (max-width: 640px) {
	.odf-cde-answer { padding: var(--odf-sp-4); gap: var(--odf-sp-3); }
	.odf-cde-answer__icon { width: 44px; height: 44px; }
	.odf-cde-answer__icon svg { width: 26px; height: 26px; }
	.odf-cde-answer__lead { font-size: var(--odf-fs-base); }
	.odf-cde-search { flex-direction: column; align-items: stretch; }
	/* The field carries `flex: 1 1 260px` for the ROW layout. Once the container
	   turns into a column that basis becomes a 260px HEIGHT, and with the pill
	   radius the search box rendered as a giant ellipse. Reset it to content
	   height on the column axis. */
	.odf-cde-search__field { flex: 0 0 auto; min-width: 0; }
	.odf-cde-search__filters { justify-content: flex-start; }
	.odf-cdegroup--toxic { padding: var(--odf-sp-4); }}

/* Can-dogs-eat featured image. Optional - the block only exists when an image is
   set, so no reserved space and no layout shift when there is not one. Capped so a
   large upload cannot push the instant-answer box below the fold, which is the one
   thing on this page that must stay visible. */
/* Two-column hero: answer on the left, image demoted to a thumbnail on the right.
   Previously the image sat full-width UNDER the h1 at 520px, which pushed the
   instant-answer box clean off a laptop screen - the opposite of what this page
   is for. The image is illustration; the verdict is the product. */
.odf-cdehero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--odf-sp-6);
	align-items: start;
}
.odf-cdehero__grid--noimg { grid-template-columns: minmax(0, 1fr); }
.odf-cdehero__main { min-width: 0; }
/* The answer box carries its own bottom margin for the old stacked layout; inside
   the hero the updated-line follows it, so pull that back in. */
.odf-cdehero__main .odf-cde-answer { margin-bottom: var(--odf-sp-4); }
.odf-cdehero__media {
	margin: 0;
	max-width: 260px;
}
.odf-cdehero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--odf-radius-card);
	box-shadow: var(--odf-shadow-card);
	background: var(--odf-card);
}

/* Tablet keeps two columns, with a narrower image column. Collapsing at 900px was
   tested and looked wrong: the image dropped below the answer and sat alone in a
   band of empty green with nothing beside it. There is room for both at 768. */
@media (max-width: 900px) {
	.odf-cdehero__grid { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--odf-sp-5); }
	.odf-cdehero__media { max-width: 200px; }}

/* Phone: one column, and the image goes AFTER the answer. Someone whose dog has
   just eaten something is holding this device - the verdict comes first, and the
   photo is not allowed to occupy the first screen. */
@media (max-width: 640px) {
	.odf-cdehero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--odf-sp-4); }
	.odf-cdehero__main { order: 1; }
	.odf-cdehero__media { order: 2; max-width: 160px; }}

/* Search placeholders: one size down from the input text, site-wide (founder
   2026-07-19 - the full-size placeholder crowded every search box, especially
   on mobile where it truncated mid-word). Applies to the search inputs only,
   so form fields elsewhere keep their normal placeholder size. */
input[type="search"]::placeholder,
.odf-search input::placeholder,
.odf-cde-search__field input::placeholder,
.odf-gtools__search input::placeholder,
.odf-cpick__search input::placeholder {
	font-size: var(--odf-fs-sm);
	opacity: 1; /* Firefox dims placeholders by default; colour already handles it. */
}


/* --- Text & search fields: ONE focus system ------------------------------
   These had FOUR different treatments: a translucent ring outside a green
   border (read as a double border), a bare 2px outline with an offset on the
   directory box, a green border with no ring in the header, and a ring with
   no border change elsewhere. They now all do the same thing - the border
   turns green and a soft tint halo sits flush against it - so every field on
   the site focuses identically and none of them look doubled. */
.odf-input:focus,
.odf-fld input:focus,
.odf-fld textarea:focus,
.odf-fld select:focus,
.odf-search input:focus,
.odf-gtools__search input:focus,
.odf-brandix__search input:focus,
.odf-guidefilter__search input:focus,
.odf-dirsearch input[type="search"]:focus,
.odf-dirsearch input[type="search"]:focus-visible,
.odf-cde-search__field:focus-within {
	outline: none;
	border-color: var(--odf-green);
	box-shadow: var(--odf-ring-field);
}
/* A wrapper that owns the focus halo must not let its inner control draw a
   second one on top. */
.odf-cde-search__field input:focus,
.odf-cde-search__field input:focus-visible,
.odf-search__field input:focus-visible { box-shadow: none; outline: none; }