/* Coffee pages (Nescafé Classic review + how-to): illustrations and the two browser tools. */

.cf-fig { margin: var(--s-6) 0 var(--s-7); padding: var(--s-5); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-xl); }
.cf-fig svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.cf-fig figcaption { font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }
.cf-fig .cf-sub { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--s-4); }
.cf-fig .cf-src { font-size: 12.5px; color: var(--ink-muted); margin: var(--s-3) 0 0; }

.cf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-4); list-style: none; padding: 0; margin: 0; counter-reset: cf; }
.cf-steps li { counter-increment: cf; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); font-size: 14.5px; color: var(--ink-soft); }
.cf-steps li::before { content: counter(cf, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: var(--s-2); }
.cf-steps svg { width: 56px; height: 56px; margin-bottom: var(--s-2); }
.cf-steps strong { display: block; color: var(--ink); margin-bottom: 2px; }

.cf-tool { margin: var(--s-6) 0 var(--s-7); padding: var(--s-6); background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--r-xl); }
.cf-tool h3 { margin: 0 0 var(--s-1); }
.cf-tool .cf-sub { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--s-5); }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); }
.cf-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.cf-field select, .cf-field input { font: inherit; font-weight: 400; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--r-md); padding: 10px 12px; min-height: 44px; width: 100%; }
.cf-field select:focus-visible, .cf-field input:focus-visible, .cf-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.cf-seg { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; padding: 0; margin: 0 0 var(--s-4); }
.cf-seg legend { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
.cf-seg label { position: relative; }
.cf-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cf-seg span { display: inline-block; padding: 9px 14px; min-height: 40px; border: 1px solid var(--field-border); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); font-size: 14px; }
.cf-seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.cf-out { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.cf-big { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--ink); }
.cf-big small { font-family: var(--font-sans); font-size: 15px; color: var(--ink-muted); margin-left: 6px; }
.cf-meter { position: relative; height: 12px; background: var(--line); border-radius: var(--r-pill); margin: var(--s-4) 0 var(--s-5); }
.cf-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: var(--r-pill); transition: width .25s var(--ease-out); }
.cf-meter b { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink-soft); }
.cf-meter b span { position: absolute; top: 18px; transform: translateX(-50%); font-size: 11.5px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; font-family: var(--font-mono); }
.cf-status { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: 14.5px; margin-top: var(--s-6); }
.cf-status.ok { background: var(--ok-bg); color: var(--ok-ink); }
.cf-status.warn { background: var(--warn-bg); color: var(--warn-ink); }
.cf-status.bad { background: var(--bad-bg); color: var(--bad-ink); }
.cf-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: 14px; color: var(--ink-soft); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.cf-facts b { color: var(--ink); }
.cf-recipe { margin: var(--s-3) 0 0; padding-left: 1.3em; }
.cf-recipe li { margin-bottom: 6px; color: var(--ink-soft); }
.cf-note { font-size: 12.5px; color: var(--ink-muted); margin: var(--s-4) 0 0; }
.cf-nojs { font-size: 14px; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) { .cf-meter i { transition: none; } }
@media (max-width: 560px) { .cf-tool, .cf-fig { padding: var(--s-4); } .cf-big { font-size: 38px; } }

/* SVG illustration colours: tokens only, so both themes work */
.cf-svg text { font-family: var(--font-sans); }
.cf-svg .t { fill: var(--ink); }
.cf-svg .t2 { fill: var(--ink-muted); }
.cf-svg .mono { font-family: var(--font-mono); }
.cf-svg .srf { fill: var(--surface); }
.cf-svg .ln { stroke: var(--line-strong); fill: none; }
.cf-svg .grid { stroke: var(--line); }
.cf-svg .acc { fill: var(--accent); }
.cf-svg .acc-ln { stroke: var(--accent); fill: none; }
.cf-svg .est { fill: var(--accent-soft); stroke: var(--accent); }
.cf-svg .deep { fill: var(--accent-deep); }
.cf-svg .on-acc { fill: var(--accent-ink); }
.cf-svg .veg { fill: var(--ok-ink); }
.cf-svg .veg-ln { stroke: var(--ok-ink); fill: none; }
.cf-svg .band { fill: var(--ok-bg); }
.cf-svg .milk { fill: var(--butter); }
.cf-svg .water { fill: var(--sky); }
.cf-svg .ice { fill: var(--info-bg); stroke: var(--info-ink); }
.cf-svg .steel { fill: var(--line-strong); }

/* Inside .prose: beat the article's p/li styles */
.prose .cf-fig .cf-sub, .prose .cf-tool .cf-sub { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0 0 var(--s-4); }
.prose .cf-fig .cf-src, .prose .cf-tool .cf-note, .prose .cf-tool .cf-nojs { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.prose .cf-tool .cf-status { font-size: 14.5px; line-height: 1.5; margin: var(--s-6) 0 0; }
.prose .cf-facts li { margin: 0; padding: 0; list-style: none; }
.prose .cf-facts li::before { content: none; }
.prose .cf-steps li { margin: 0; }
.prose .cf-steps li::marker { content: none; }

/* Meter labels: EFSA above the bar, ICMR below, so they never collide */
.cf-meter { margin: var(--s-7) 0 var(--s-6); }
.cf-meter b + b span { top: auto; bottom: 18px; }

/* Wide charts keep a readable size on phones and scroll inside their box */
.cf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cf-scroll svg { min-width: 560px; }
.prose ul.cf-facts { padding-left: 0; margin-left: 0; }

/* Jar red and coffee brown: fixed colours with their own dark versions */
.cf-svg .red { fill: #8a2414; fill: light-dark(#8a2414, #6e2418); }
.cf-svg .on-red { fill: #fff; fill: light-dark(#fff, #fbe9e4); }
.cf-svg .on-red-ln { stroke: #fff; stroke: light-dark(#fff, #fbe9e4); fill: none; }
.cf-svg .coffee { fill: #6b3a22; fill: light-dark(#6b3a22, #8a5236); }