/* 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. */
/* --- Score dial (THE brand asset) --- */
.odf-dial { position: relative; margin-inline: auto; }
/* The SVG must FILL the dial box, never keep its own width/height attributes.
   odf_score_dial() prints width="140" height="140" on the <svg> as well as on
   the wrapper, so any rule that resizes the wrapper (the mobile block below
   does exactly that) left a 140px SVG inside a 116px div - it spilled 24px out
   the bottom and sat on top of the band chip. That was the "Exceptional"
   overlapping the ring on phones. */
.odf-dial svg { transform: rotate(-90deg); display: block; width: 100%; height: 100%; }
.odf-dial__track { stroke: var(--odf-tint); }
.odf-dial__value { stroke: var(--odf-band, var(--odf-ink-3)); }
/* V2 number block: 800-weight score with "/100" beside it at ~40% size on the
   same baseline, "OPEN SCORE" letter-spaced on its own line below. */
/* Inner text scales with the dial size (--odf-dial-size, set inline = the px size)
   so it never overflows the ring at smaller sizes like the 104px best-block dial.
   Ratios preserve the 140px design: 40/140, 16/140, 11/140. */
.odf-dial__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--odf-dial-size, 140px) * 0.02); }
.odf-dial__row { display: flex; align-items: baseline; gap: 2px; }
.odf-dial__num b { font-family: var(--odf-font-display); font-size: calc(var(--odf-dial-size, 140px) * 0.285); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--odf-ink); font-variant-numeric: tabular-nums; }
.odf-dial__per { font-size: calc(var(--odf-dial-size, 140px) * 0.114); font-weight: 700; color: var(--odf-ink-3); font-variant-numeric: tabular-nums; }
.odf-dial__lbl { font-size: calc(var(--odf-dial-size, 140px) * 0.078); font-weight: 700; color: var(--odf-ink-3); text-transform: uppercase; letter-spacing: var(--odf-tracking-wide); }

/* Band chip: label always with the colour (never colour alone). */
.odf-bandchip {
	display: inline-block; margin: var(--odf-sp-3) auto 0; font-size: var(--odf-fs-sm); font-weight: 700;
	color: var(--odf-band, var(--odf-ink-2));
	background: color-mix(in srgb, var(--odf-band, var(--odf-ink-3)) 11%, #fff);
	border-radius: var(--odf-radius-pill); padding: 4px 14px;
}
/* The dial + band chip as one unit - the band word NEVER floats alone. */
.odf-scorecluster { display: inline-flex; flex-direction: column; align-items: center; }

/* --- Score breakdown ("Where the points went") --- */
.odf-breakdown { background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius); box-shadow: var(--odf-shadow); overflow: hidden; }
.odf-breakdown__row { display: grid; grid-template-columns: 200px 1fr 84px; gap: var(--odf-sp-3); align-items: center; padding: var(--odf-sp-3) var(--odf-sp-4); border-top: 1px solid var(--odf-line); font-size: var(--odf-fs-md); }
.odf-breakdown__row:first-child { border-top: 0; }
@media (max-width: 700px) {
	/* Phones: the points value used to float alone on its own row at the bottom of
	   each card (the full-width "why" text pushed it down). Pin the name+meter
	   block and the points to ROW 1 side by side, with the reason spanning row 2 -
	   so the score sits level with the progress bar, not marooned below the text. */
	.odf-breakdown__row { grid-template-columns: 1fr auto; column-gap: var(--odf-sp-3); align-items: center; }
	.odf-breakdown__row > :first-child { grid-column: 1; grid-row: 1; }
	.odf-breakdown__pts { grid-column: 2; grid-row: 1; align-self: end; white-space: nowrap; }
	.odf-breakdown__why { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }}
.odf-breakdown__name { font-weight: 600; color: var(--odf-ink); }
.odf-breakdown__why { color: var(--odf-ink-2); font-size: var(--odf-fs-sm); }
.odf-breakdown__pts { text-align: right; font-weight: 700; color: var(--odf-ink); font-variant-numeric: tabular-nums; }
.odf-breakdown__pts small { color: var(--odf-ink-3); font-weight: 500; }
.odf-meter { height: 5px; border-radius: var(--odf-radius-pill); background: var(--odf-tint); margin-top: 6px; overflow: hidden; }
.odf-meter i { display: block; height: 100%; border-radius: var(--odf-radius-pill); background: var(--odf-band, var(--odf-band-verygood)); }
.odf-breakdown__row--total { background: var(--odf-gold-soft); font-weight: 700; }
.odf-breakdown__row--total .odf-breakdown__why { font-weight: 500; }

/* --- Dry-matter nutrition gauges (with directory-average tick) --- */
.odf-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--odf-sp-3); }
.odf-gauge { background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-3) var(--odf-sp-4); }
.odf-gauge h4 { font-family: var(--odf-font-sans); font-size: var(--odf-fs-xs); letter-spacing: var(--odf-tracking-wide); text-transform: uppercase; color: var(--odf-ink-3); font-weight: 700; margin: 0; }
.odf-gauge__v { font-family: var(--odf-font-display); font-size: 1.35rem; font-weight: 700; color: var(--odf-ink); font-variant-numeric: tabular-nums; }
.odf-gauge__v small { font-size: var(--odf-fs-sm); color: var(--odf-ink-3); font-weight: 500; font-family: var(--odf-font-sans); }
.odf-gauge__bar { position: relative; height: 6px; background: var(--odf-tint); border-radius: var(--odf-radius-pill); margin-top: 10px; }
.odf-gauge__bar i { position: absolute; inset: 0; width: var(--w, 0%); background: var(--odf-gold); border-radius: var(--odf-radius-pill); }
.odf-gauge__bar u { position: absolute; top: -3px; left: var(--avgp, 50%); width: 2px; height: 12px; background: var(--odf-ink-3); border-radius: 2px; }
.odf-gauge__cmp { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); margin-top: 8px; }
.odf-gauge__cmp b { color: var(--odf-band-verygood); }
.odf-gauges__note { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); margin: var(--odf-sp-3) 0 0; }

/* --- Percentile meter (odf_percentile_meter()) ----------------------------- */
.odf-percentile { display: flex; flex-direction: column; gap: var(--odf-sp-2); min-width: 0; }
.odf-percentile__track { position: relative; display: block; height: 8px; border-radius: var(--odf-radius-pill); background: var(--odf-tint); border: 1px solid var(--odf-line); }
.odf-percentile__fill { position: absolute; inset: 0; width: var(--pct, 0%); background: var(--odf-green); border-radius: var(--odf-radius-pill); }
.odf-percentile__marker {
	position: absolute; top: 50%; left: var(--pct, 0%); width: 14px; height: 14px;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: var(--odf-card); border: 3px solid var(--odf-green-deep); box-shadow: var(--odf-shadow-xs);
}
.odf-percentile__label { font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }

/* --- Score distribution strip (odf_distribution_strip()) -------------------
   COLOUR DISCIPLINE (DENSITY pass rule 7): band colours live ONLY on score
   badges and the dial. The histogram renders in greys with the marker column
   full identity green - no pastel rainbow bar charts. */
.odf-diststrip { display: flex; align-items: flex-end; gap: 3px; height: 44px; border-bottom: 1px solid var(--odf-line); }
.odf-diststrip__col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.odf-diststrip__col i { display: block; width: 100%; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: var(--odf-line); }
.odf-diststrip__col.is-here i { background: var(--odf-green); }
.odf-diststrip__col.is-here::after {
	content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
	width: 8px; height: 8px; border-radius: 50%; background: var(--odf-green-deep);
}

/* ==========================================================================
   Template re-lay pass (12-LAYOUT-LANGUAGE Phase 3) - appended by the
   directory/facet/hub re-lay workstream. Composed above-the-fold stat
   headers, the proportion bar, homepage "Best in" strips and the
   methodology band. Tokens only, mobile-first collapses.
   ========================================================================== */

/* --- Proportion bar (odf_proportion_bar()): one track, labelled segments --- */
.odf-propbar { display: flex; flex-direction: column; gap: var(--odf-sp-2); min-width: 0; }
.odf-propbar__track { display: flex; height: 10px; border-radius: var(--odf-radius-pill); overflow: hidden; border: 1px solid var(--odf-line); background: var(--odf-tint); }
.odf-propbar__seg { display: block; width: var(--w, 0%); background: var(--odf-band, var(--odf-green)); }
.odf-propbar__seg + .odf-propbar__seg { border-left: 2px solid var(--odf-card); }
/* Fallback ONLY: a bar whose segments carry neither a band class nor a type
   class cycles green opacities - one hue, distinct steps. Typed + banded
   segments own their colour and are excluded so they never get dimmed. */
.odf-propbar__seg:not([class*="odf-band"]):not([class*="odf-type"]):nth-of-type(6n+1) { opacity: 1; }
.odf-propbar__seg:not([class*="odf-band"]):not([class*="odf-type"]):nth-of-type(6n+2) { opacity: .78; }
.odf-propbar__seg:not([class*="odf-band"]):not([class*="odf-type"]):nth-of-type(6n+3) { opacity: .58; }
.odf-propbar__seg:not([class*="odf-band"]):not([class*="odf-type"]):nth-of-type(6n+4) { opacity: .42; }
.odf-propbar__seg:not([class*="odf-band"]):not([class*="odf-type"]):nth-of-type(6n+5) { opacity: .3; }
.odf-propbar__seg:not([class*="odf-band"]):not([class*="odf-type"]):nth-of-type(6n+6) { opacity: .2; }
/* Legend: fixed-order flex, tight gaps (live-browse item 7) - two tidy lines
   at worst, never a ragged sprawl. */
.odf-propbar__legend { display: flex; flex-wrap: wrap; gap: 2px var(--odf-sp-2); font-size: var(--odf-fs-xs); color: var(--odf-ink-2); }
.odf-propbar__key { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.odf-propbar__key b { color: var(--odf-ink); font-variant-numeric: tabular-nums; }
.odf-propbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--odf-band, var(--odf-green)); flex: none; }
.odf-propbar__key:nth-of-type(6n+2) .odf-propbar__dot:not([class*="odf-band"]):not([class*="odf-type"]) { opacity: .78; }
.odf-propbar__key:nth-of-type(6n+3) .odf-propbar__dot:not([class*="odf-band"]):not([class*="odf-type"]) { opacity: .58; }
.odf-propbar__key:nth-of-type(6n+4) .odf-propbar__dot:not([class*="odf-band"]):not([class*="odf-type"]) { opacity: .42; }
.odf-propbar__key:nth-of-type(6n+5) .odf-propbar__dot:not([class*="odf-band"]):not([class*="odf-type"]) { opacity: .3; }
.odf-propbar__key:nth-of-type(6n+6) .odf-propbar__dot:not([class*="odf-band"]):not([class*="odf-type"]) { opacity: .2; }
.odf-diststrip__col.is-hot, .odf-propbar__seg.is-hot { cursor: pointer; }
.odf-diststrip__col.is-hot:hover i { background: var(--odf-ink-3); }
.odf-diststrip__col.is-here.is-hot:hover i { background: var(--odf-green-deep); }
.odf-diststrip__col.is-hot:focus-visible { outline: 2px solid transparent; box-shadow: var(--odf-ring); border-radius: 4px; }
.odf-propbar__seg.is-hot:hover { filter: brightness(1.12); }
.odf-propbar__seg.is-hot:focus-visible { outline: 2px solid transparent; box-shadow: var(--odf-ring); }
.odf-propbar__ico { flex: none; color: var(--odf-ink-3); margin-right: 2px; }
.odf-propbar__key { display: inline-flex; align-items: center; }

/* "full methodology public" in the score-total row. Underlined so it reads as a
   link inside an otherwise muted meta line, but it inherits the row's colour
   rather than shouting in green - it is provenance, not a call to action. */
.odf-breakdown__method{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.odf-breakdown__method:hover,.odf-breakdown__method:focus-visible{color:var(--odf-green-deep)}