/* 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. */
/* --- Brand page --- */
/* .odf-brandfacts retired 9 Aug 2026 - see the note in core.css. */
.odf-vpill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--odf-fs-sm); font-weight: 600; padding: 5px 12px 5px 9px; border-radius: var(--odf-radius-pill); border: 1px solid var(--odf-line); }
.odf-vpill svg { flex: 0 0 auto; }
.odf-vpill--pro { color: var(--odf-green-deep); background: var(--odf-green-soft); border-color: color-mix(in srgb, var(--odf-green) 24%, transparent); }
.odf-vpill--con { color: #9a5b00; background: color-mix(in srgb, #e8a33d 15%, var(--odf-card)); border-color: color-mix(in srgb, #e8a33d 34%, transparent); }
/* Food-table first cell: packshot thumbnail + name (brand page range). */
.odf-foodcell { display: flex; align-items: center; gap: var(--odf-sp-3); color: var(--odf-ink); font-weight: 600; }
.odf-foodcell__img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--odf-radius-sm, 8px); overflow: hidden; background: var(--odf-tint); display: grid; place-items: center; }
.odf-foodcell__pack, .odf-foodcell__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.odf-foodcell__name { min-width: 0; }
/* .odf-quickfacts moved to core.css (30 Jul): it renders on the FACET hero too,
   which doesn't load brand.css - so it shipped unstyled there. Now in core. */
/* .odf-brandfacts__logo retired - odf_logo_box( $id, 72, $name ) renders it. */

/* Hero actions: "Visit {brand}" + Share on one row. The website used to be a
   faint text pill in the facts list and Share sat on its own line below, so the
   page's primary outbound action was its least visible element. */
.odf-brandcta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--odf-sp-3); margin-top: var(--odf-sp-5); }
.odf-brandcta__site { gap: 8px; }
.odf-brandcta__site svg { opacity: .85; }
.odf-brandverdict { background: var(--odf-card); border: 1px solid var(--odf-line); border-left: 3px solid var(--odf-green); border-radius: var(--odf-radius); padding: var(--odf-sp-4) var(--odf-sp-5); box-shadow: var(--odf-shadow-xs); }
.odf-brandverdict__line { font-size: var(--odf-fs-lg); color: var(--odf-ink); font-weight: 600; margin: 0; }
.odf-brandverdict__line .odf-scorebadge--text { font-size: inherit; }
.odf-sortdir { font-size: 9px; line-height: 1; }

/* --- Report card: band-coloured average chip + strengths/weaknesses ------- */
.odf-report { display: flex; gap: var(--odf-sp-5); align-items: flex-start; }
.odf-report__scorecol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 108px; text-align: center; }
/* .odf-report__chip retired - odf_score_badge( $avg, 'xl' ) renders it. */
.odf-report__band { font-size: var(--odf-fs-sm); font-weight: 800; color: var(--odf-band, var(--odf-ink-2)); margin-top: var(--odf-sp-1); }
.odf-report__cap { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); }
.odf-report__body { min-width: 0; flex: 1; }
.odf-report__range { font-size: var(--odf-fs-lg); font-weight: 600; color: var(--odf-ink); margin: 0 0 var(--odf-sp-2); font-variant-numeric: tabular-nums; }
.odf-report__lines { list-style: none; margin: 0 0 var(--odf-sp-2); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.odf-report__line { display: flex; align-items: flex-start; gap: 8px; font-size: var(--odf-fs-md); color: var(--odf-ink-2); }
.odf-report__line svg { flex: none; margin-top: 2px; }
.odf-report__line--pro svg { color: var(--odf-band-verygood); }
.odf-report__line--con svg { color: var(--odf-band-average); }
.odf-report__note { font-size: var(--odf-fs-sm); color: var(--odf-ink-3); margin: 0 0 var(--odf-sp-2); }
.odf-report__price { font-size: var(--odf-fs-md); color: var(--odf-ink-2); margin: 0; }
.odf-report__price .odf-price { font-weight: 700; color: var(--odf-ink); }
@media (max-width: 560px) {
	.odf-report { flex-direction: column; gap: var(--odf-sp-3); }
	.odf-report__scorecol { flex-direction: row; align-items: baseline; gap: var(--odf-sp-2); min-width: 0; text-align: left; }}

/* ---- Brand A-Z index (/brands/) ---- */
/* Brands hero: text left, recruit card right; card drops below on phones. */
/* flex-start, not center: the stat-card aside is taller than the text, and
   centring floated the breadcrumbs + H1 to mid-height beside it. */
.odf-brandix__herogrid { display: flex; align-items: flex-start; gap: var(--odf-sp-5); flex-wrap: wrap; }
.odf-brandix__herobody { flex: 1 1 460px; min-width: 0; }
/* Hero aside: stat card stacked over the recruit card, dropping below the
   hero text on phones. */
.odf-brandix__heroaside { flex: 0 1 320px; display: flex; flex-direction: column; gap: var(--odf-sp-3); min-width: 0; }
.odf-claimcard { display: flex; align-items: center; gap: var(--odf-sp-3); padding: var(--odf-sp-4); background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-card); box-shadow: var(--odf-shadow-card); color: var(--odf-ink); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.odf-claimcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--odf-green) 40%, var(--odf-line)); color: var(--odf-ink); }
.odf-claimcard__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--odf-green-soft); color: var(--odf-green-deep); }
.odf-claimcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odf-claimcard__text strong { font-size: var(--odf-fs-sm); }
.odf-claimcard__text span:not(.odf-claimcard__icon) { font-size: var(--odf-fs-xs); color: var(--odf-ink-2); line-height: 1.35; }
.odf-claimcard__go { margin-left: auto; color: var(--odf-green); font-weight: 800; }

/* "Claimed profile" pill on the brand hero - honesty marker, not the premium badge. */
.odf-claimedpill { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 var(--odf-sp-2); padding: 3px 10px; border-radius: var(--odf-radius-pill); font-size: var(--odf-fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--odf-green-deep); background: var(--odf-green-soft); border: 1px solid color-mix(in srgb, var(--odf-green) 30%, #fff); }

/* Controls row: name filter + country dropdown + sort. Wraps on phones so the
   selects drop under the search box instead of squeezing it. */
.odf-brandix__controls{margin-top:var(--odf-sp-4);display:flex;flex-wrap:wrap;gap:var(--odf-sp-2);align-items:center}
.odf-brandix__controls select{border:1.5px solid var(--odf-line);border-radius:12px;padding:10px 14px;font:inherit;font-size:var(--odf-fs-sm);background:var(--odf-card);color:var(--odf-ink);max-width:100%}
.odf-brandix__controls select:focus{outline:2px solid var(--odf-green);outline-offset:1px;border-color:var(--odf-green)}
.odf-brandix__search{flex:1 1 240px;max-width:380px}
.odf-brandix__search input{width:100%;border:1.5px solid var(--odf-line);border-radius:12px;padding:11px 16px;font:inherit;font-size:var(--odf-fs-sm);background:var(--odf-card);color:var(--odf-ink)}
.odf-brandix__search input:focus{outline:2px solid var(--odf-green);outline-offset:1px;border-color:var(--odf-green)}
.odf-brandix__letters{display:flex;flex-wrap:wrap;gap:4px;margin:var(--odf-sp-5) 0}
.odf-brandix__letters a{display:grid;place-items:center;min-width:34px;height:34px;border:1px solid var(--odf-line);border-radius:8px;background:var(--odf-card);font-size:var(--odf-fs-sm);font-weight:700;color:var(--odf-ink-2)}
.odf-brandix__letters a:hover{border-color:var(--odf-green);color:var(--odf-green)}
.odf-brandix__group{margin:var(--odf-sp-6) 0}
.odf-brandix__letter{font-family:var(--odf-font-display);font-weight:800;font-size:var(--odf-fs-lg);color:var(--odf-green);border-bottom:1px solid var(--odf-line);padding-bottom:var(--odf-sp-1);margin-bottom:var(--odf-sp-3)}
.odf-brandix__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--odf-sp-3)}
.odf-brandix__row{display:flex;align-items:center;gap:var(--odf-sp-3);background:var(--odf-card);border:1px solid var(--odf-line);border-radius:var(--odf-radius);padding:var(--odf-sp-3);color:inherit;box-shadow:var(--odf-shadow-xs)}
.odf-brandix__row:hover{border-color:var(--odf-green)}
/* .odf-brandix__logo/__img/__ph retired - odf_logo_box( $id, 40, $name ). */
.odf-brandix__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.odf-brandix__body b{font-weight:700;font-size:var(--odf-fs-sm)}
.odf-brandix__meta{font-size:var(--odf-fs-xs);color:var(--odf-ink-3)}
/* .odf-brandix__avg retired - odf_score_badge( $avg, 'sm' ); the row still
   pushes the badge flush right. */
.odf-brandix__row .odf-scorebadge { margin-left: auto; }
/* Same object as the food-card score: band-coloured "92/100" text, no disc.
   flex:none so a long brand name can never wrap the number. */
.odf-brandix__row .odf-scorebadge--text { flex: none; font-size: var(--odf-fs-lg); line-height: 1; }
.odf-brandix__featured{margin-bottom:var(--odf-sp-4)}

.odf-brandtake { margin-bottom: var(--odf-sp-7); }
.odf-brandtake__body.odf-prose { max-width: none; }
.odf-brandtake__body {
	background: var(--odf-card);
	border: 1px solid var(--odf-line);
	border-radius: var(--odf-radius-card);
	box-shadow: var(--odf-shadow-card);
	padding: var(--odf-sp-5);
	font-size: var(--odf-fs-base);
	line-height: 1.75;
	color: var(--odf-ink-2);
}
.odf-brandtake__body p { margin: 0 0 var(--odf-sp-4); max-width: 70ch; }
.odf-brandtake__body p:last-child { margin-bottom: 0; }
/* First paragraph reads at normal body size now (founder 31 Jul) - no lead-in. */
.odf-brandtake__body > p:first-child {
	font-size: var(--odf-fs-base);
	line-height: var(--odf-lh-base);
	color: var(--odf-ink-2);
}
.odf-brandtake__body strong {
	color: var(--odf-green-deep);
	background: var(--odf-green-soft);
	padding: 1px 5px;
	border-radius: 3px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}


/* --- 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);
}