/* The Why section: the resource argument and its comparison page.
   Served from this origin because the site's policy allows styles from this
   origin only, so an inline style block would not run. See docs/why/ and
   docs/DEVELOPMENT-WINDOW-CHOICE.md. Holds to the tokens in styles.css. */

/* --- shape of the argument page ------------------------------------- */

.why-page { max-width: 780px; margin-inline: auto; }
.why-page h1 { font-size: clamp(38px, 4.4vw, 58px); }
.why-standfirst { font-family: var(--serif); font-size: 21px; line-height: 1.45; color: #4c5c50; margin-top: 18px; }
.why-section { margin-top: 46px; }
.why-section h2 { font-size: 31px; margin-bottom: 14px; }
.why-section p { font-size: 15px; line-height: 1.75; color: #536356; margin-top: 14px; }
.why-section p strong { color: var(--forest); }
.why-page .why-checked { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; }
/* The page head: eyebrow, title, standfirst, dated line, note. The base stylesheet zeroes
   every paragraph margin, so without these the eyebrow touched the h1 and the dated line
   touched the standfirst and the note (audit row 40). The eyebrow gap is the one
   `.food-intro` gives every other page head. Direct children only, so the compare page's
   `.food-intro` and the parts navigation keep their own spacing. */
.why-page > .eyebrow { margin-bottom: var(--space-4); }
.why-page > .why-checked { margin-top: var(--space-4); }
.why-page > .why-note { margin-top: var(--space-4); }

/* --- the two simple tables ------------------------------------------ */

.why-table { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.why-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.why-row dt, .why-row .why-row-label { font-size: 14px; margin: 0; }
.why-row dd, .why-row .why-row-value { font-family: var(--serif); font-size: 19px; margin: 0; text-align: right; white-space: nowrap; }
.why-row-bar { grid-column: 1 / -1; height: 9px; border-radius: 0; background: var(--lime); overflow: hidden; }
.why-row-bar > span { display: block; height: 100%; background: #9aa87c; }
.why-row.is-lead .why-row-bar > span { background: var(--coral); }
.why-row.is-lead dd, .why-row.is-lead .why-row-value { color: var(--coral-text); }

/* Bar widths, as generated rules rather than inline styles: the site's policy
   allows styles from this origin only, so an inline `style` attribute would not
   apply. `attr()` is not an option either — Safari and iOS Safari do not support
   it for arbitrary properties (caniuse, August 2026: ~72% global), so a bar
   drawn with attr() would silently render at zero width on an iPhone. Put an
   integer `data-share` of 0–100 on the inner `<span>`, as a percentage of the
   largest value in its own table, and the matching rule below sizes it. */
.why-row-bar > span[data-share="0"] { width: 0%; }
.why-row-bar > span[data-share="1"] { width: 1%; }
.why-row-bar > span[data-share="2"] { width: 2%; }
.why-row-bar > span[data-share="3"] { width: 3%; }
.why-row-bar > span[data-share="4"] { width: 4%; }
.why-row-bar > span[data-share="5"] { width: 5%; }
.why-row-bar > span[data-share="6"] { width: 6%; }
.why-row-bar > span[data-share="7"] { width: 7%; }
.why-row-bar > span[data-share="8"] { width: 8%; }
.why-row-bar > span[data-share="9"] { width: 9%; }
.why-row-bar > span[data-share="10"] { width: 10%; }
.why-row-bar > span[data-share="11"] { width: 11%; }
.why-row-bar > span[data-share="12"] { width: 12%; }
.why-row-bar > span[data-share="13"] { width: 13%; }
.why-row-bar > span[data-share="14"] { width: 14%; }
.why-row-bar > span[data-share="15"] { width: 15%; }
.why-row-bar > span[data-share="16"] { width: 16%; }
.why-row-bar > span[data-share="17"] { width: 17%; }
.why-row-bar > span[data-share="18"] { width: 18%; }
.why-row-bar > span[data-share="19"] { width: 19%; }
.why-row-bar > span[data-share="20"] { width: 20%; }
.why-row-bar > span[data-share="21"] { width: 21%; }
.why-row-bar > span[data-share="22"] { width: 22%; }
.why-row-bar > span[data-share="23"] { width: 23%; }
.why-row-bar > span[data-share="24"] { width: 24%; }
.why-row-bar > span[data-share="25"] { width: 25%; }
.why-row-bar > span[data-share="26"] { width: 26%; }
.why-row-bar > span[data-share="27"] { width: 27%; }
.why-row-bar > span[data-share="28"] { width: 28%; }
.why-row-bar > span[data-share="29"] { width: 29%; }
.why-row-bar > span[data-share="30"] { width: 30%; }
.why-row-bar > span[data-share="31"] { width: 31%; }
.why-row-bar > span[data-share="32"] { width: 32%; }
.why-row-bar > span[data-share="33"] { width: 33%; }
.why-row-bar > span[data-share="34"] { width: 34%; }
.why-row-bar > span[data-share="35"] { width: 35%; }
.why-row-bar > span[data-share="36"] { width: 36%; }
.why-row-bar > span[data-share="37"] { width: 37%; }
.why-row-bar > span[data-share="38"] { width: 38%; }
.why-row-bar > span[data-share="39"] { width: 39%; }
.why-row-bar > span[data-share="40"] { width: 40%; }
.why-row-bar > span[data-share="41"] { width: 41%; }
.why-row-bar > span[data-share="42"] { width: 42%; }
.why-row-bar > span[data-share="43"] { width: 43%; }
.why-row-bar > span[data-share="44"] { width: 44%; }
.why-row-bar > span[data-share="45"] { width: 45%; }
.why-row-bar > span[data-share="46"] { width: 46%; }
.why-row-bar > span[data-share="47"] { width: 47%; }
.why-row-bar > span[data-share="48"] { width: 48%; }
.why-row-bar > span[data-share="49"] { width: 49%; }
.why-row-bar > span[data-share="50"] { width: 50%; }
.why-row-bar > span[data-share="51"] { width: 51%; }
.why-row-bar > span[data-share="52"] { width: 52%; }
.why-row-bar > span[data-share="53"] { width: 53%; }
.why-row-bar > span[data-share="54"] { width: 54%; }
.why-row-bar > span[data-share="55"] { width: 55%; }
.why-row-bar > span[data-share="56"] { width: 56%; }
.why-row-bar > span[data-share="57"] { width: 57%; }
.why-row-bar > span[data-share="58"] { width: 58%; }
.why-row-bar > span[data-share="59"] { width: 59%; }
.why-row-bar > span[data-share="60"] { width: 60%; }
.why-row-bar > span[data-share="61"] { width: 61%; }
.why-row-bar > span[data-share="62"] { width: 62%; }
.why-row-bar > span[data-share="63"] { width: 63%; }
.why-row-bar > span[data-share="64"] { width: 64%; }
.why-row-bar > span[data-share="65"] { width: 65%; }
.why-row-bar > span[data-share="66"] { width: 66%; }
.why-row-bar > span[data-share="67"] { width: 67%; }
.why-row-bar > span[data-share="68"] { width: 68%; }
.why-row-bar > span[data-share="69"] { width: 69%; }
.why-row-bar > span[data-share="70"] { width: 70%; }
.why-row-bar > span[data-share="71"] { width: 71%; }
.why-row-bar > span[data-share="72"] { width: 72%; }
.why-row-bar > span[data-share="73"] { width: 73%; }
.why-row-bar > span[data-share="74"] { width: 74%; }
.why-row-bar > span[data-share="75"] { width: 75%; }
.why-row-bar > span[data-share="76"] { width: 76%; }
.why-row-bar > span[data-share="77"] { width: 77%; }
.why-row-bar > span[data-share="78"] { width: 78%; }
.why-row-bar > span[data-share="79"] { width: 79%; }
.why-row-bar > span[data-share="80"] { width: 80%; }
.why-row-bar > span[data-share="81"] { width: 81%; }
.why-row-bar > span[data-share="82"] { width: 82%; }
.why-row-bar > span[data-share="83"] { width: 83%; }
.why-row-bar > span[data-share="84"] { width: 84%; }
.why-row-bar > span[data-share="85"] { width: 85%; }
.why-row-bar > span[data-share="86"] { width: 86%; }
.why-row-bar > span[data-share="87"] { width: 87%; }
.why-row-bar > span[data-share="88"] { width: 88%; }
.why-row-bar > span[data-share="89"] { width: 89%; }
.why-row-bar > span[data-share="90"] { width: 90%; }
.why-row-bar > span[data-share="91"] { width: 91%; }
.why-row-bar > span[data-share="92"] { width: 92%; }
.why-row-bar > span[data-share="93"] { width: 93%; }
.why-row-bar > span[data-share="94"] { width: 94%; }
.why-row-bar > span[data-share="95"] { width: 95%; }
.why-row-bar > span[data-share="96"] { width: 96%; }
.why-row-bar > span[data-share="97"] { width: 97%; }
.why-row-bar > span[data-share="98"] { width: 98%; }
.why-row-bar > span[data-share="99"] { width: 99%; }
.why-row-bar > span[data-share="100"] { width: 100%; }

/* --- figures --------------------------------------------------------- */

.why-figure { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 22px 24px; }
.why-figure h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.4px; margin: 0; }
.why-figure p { font-size: 13px; color: var(--muted); margin-top: 7px; }
.why-figure svg { width: 100%; max-width: 100%; height: auto; margin-top: 18px; }
.why-figure .chart-bar { fill: #9aa87c; }
.why-figure .chart-bar-lead { fill: var(--coral); }
.why-figure .chart-track { fill: var(--lime); }
.why-figure .chart-label { font-family: var(--sans); font-size: 13px; fill: var(--forest); }
.why-figure .chart-value { font-family: var(--sans); font-size: 13px; fill: var(--muted); }
.why-figure .chart-axis { stroke: var(--line); stroke-width: 1; }
.why-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* --- the table of routes, and other compact boards ------------------- */

.why-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.why-board-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; }
.why-board-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: -.3px; }
.why-board-card .why-removes { font-size: 13px; color: #536356; margin-top: 7px; line-height: 1.65; }
.why-board-card .why-removes b { display: block; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--coral-text); margin-bottom: 4px; }

/* --- the gap panel --------------------------------------------------- */

.why-gap { margin-top: 26px; border: 1px dashed var(--line); border-radius: var(--radius); background: #fffdf860; padding: 22px 24px; }
.why-gap h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.4px; }
.why-gap p { font-size: 14px; color: #536356; line-height: 1.7; margin-top: 11px; }
.why-gap ul { margin: 13px 0 0; padding-left: 20px; font-size: 14px; color: #536356; line-height: 1.7; }

/* --- limits, method, position ---------------------------------------- */

.why-block { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 24px; }
.why-block h2 { font-size: 25px; }
.why-block ul { margin: 14px 0 0; padding-left: 20px; }
.why-block li { font-size: 14px; color: #536356; line-height: 1.7; margin-top: 9px; }
.why-block p { font-size: 14px; color: #536356; line-height: 1.75; margin-top: 12px; }
.why-position { margin-top: 40px; background: #f0f2e6; border-radius: var(--radius); padding: 28px 30px; }
.why-position h2 { font-size: 25px; }
.why-position .why-attribution { font-size: 12px; color: var(--muted); margin-top: 6px; }
.why-position p { font-size: 15px; line-height: 1.75; color: #46564a; margin-top: 15px; }
.why-route { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 26px; }
.why-route h2 { font-size: 25px; }
.why-route .why-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.why-route .why-note { font-size: 12px; color: var(--muted); margin-top: 15px; line-height: 1.65; }
.why-sources { margin-top: 30px; font-size: 12px; color: var(--muted); }
.why-sources h2 { font-size: 20px; margin-bottom: 10px; }
.why-sources li { margin-top: 8px; line-height: 1.6; overflow-wrap: anywhere; }

/* --- the animal's case: a hub and eight parts, under /why/animals/ ---- */

.animals-disclaimer { margin-top: 28px; border: 1px solid var(--line); border-left: 3px solid var(--coral); border-radius: var(--radius); background: var(--white); padding: 20px 22px; }
.animals-disclaimer h2 { font-size: 19px; }
.animals-disclaimer ul { margin: 12px 0 0; padding-left: 20px; }
.animals-disclaimer li { font-size: 13px; color: #536356; line-height: 1.7; margin-top: 8px; }
.animals-parts { margin: 14px 0 0; padding-left: 20px; }
.animals-parts li { font-size: 14px; color: #536356; line-height: 1.7; margin-top: 9px; overflow-wrap: anywhere; }
/* A part link is a control, so it gets a 44-pixel tap target like every other
   control on the site, and the current part keeps the same height unlinked. */
.animals-parts li > a, .animals-parts li > span { display: flex; align-items: center; min-height: 44px; }
.animals-parts li.is-current { color: var(--forest); }
.animals-lede { margin-top: 22px; border-left: 3px solid var(--lime); padding: 4px 0 4px 18px; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: #46564a; }
.animals-refusals { margin-top: 22px; }
.animals-refusals dt { font-size: 15px; line-height: 1.6; color: var(--forest); margin-top: 18px; }
.animals-refusals dd { font-size: 14px; line-height: 1.7; color: #536356; margin: 5px 0 0; padding-left: 16px; border-left: 2px solid var(--lime); }
.animals-figure { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 22px 24px; }
.animals-figure-caption { font-family: var(--serif); font-size: 21px; letter-spacing: -.4px; color: var(--forest); }
.animals-rows { margin-top: 16px; }
.animals-rows dt { font-family: var(--serif); font-size: 18px; color: var(--forest); margin-top: 16px; }
.animals-rows dd { margin: 6px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.animals-cell { display: block; font-size: 13px; line-height: 1.6; color: #536356; overflow-wrap: anywhere; }
.animals-cell b { font-family: var(--sans); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.animals-pager { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.animals-pager-link { display: flex; flex-direction: column; justify-content: center; min-height: 44px; min-width: 44px; flex: 1 1 46%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-size: 14px; color: var(--forest); text-decoration: none; }
.animals-pager-link span { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.animals-pager-link + .animals-pager-link { text-align: right; }

/* --- small screens: nothing may overflow at 320px --------------------- */

@media (max-width: 720px) {
  .animals-figure { padding: 18px 16px; }
  .animals-pager-link { flex: 1 1 100%; }
  .animals-pager-link + .animals-pager-link { text-align: left; }
}

/* --- small screens: nothing may overflow at 360px -------------------- */

@media (max-width: 720px) {
  .why-board { grid-template-columns: 1fr; }
  .why-page h1 { font-size: 34px; }
  .why-section h2 { font-size: 25px; }
  .why-figure { padding: 18px 16px; }
  .why-position { padding: 22px 18px; }
  .why-row dd, .why-row .why-row-value { font-size: 17px; }
}