/* Hallmark · shape: app screen · genre: editorial · theme: Ink (deal 2/3, seed kitchen-conversion-tool-grams-7aff·d9d6c4cb·2026-11-01·r0), refined by the owner's brief
 * nav: top bar, mark and wordmark, six conversion links · signature: the cups and spoons to fill, drawn and counted under the answer; the jug filled to it on desktop · states: example, result, empty, bad amount, no ingredient, weight to weight, picker open, settings open
 * axes: light/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the head is a converter, so the answer and its measures carry the first screen */
/* Hallmark · answered theme-accent · teal swapped for amber, chosen by the owner with mark 1a; cup contents take their own product tones */
/* Hallmark · answered F24 · the picker keeps its edge for dark mode, where the shadow does not read */
/* Hallmark · waive 39b · cv__input · the converter zones hold their label inside, so each zone stands 64px; the owner asked for one panel, not three boxes */
/* Grams to Cups Calc theme: the accepted system A5 (DESIGN.md at the repository root; prototype
 * work/design/concepts/a2-jug.html). Tokens, base, the converter (panel, picker, settings, answer, measures, jug,
 * phone bar), then the page chrome, the copy and its tables. Light and dark from the same tokens. */

@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
/* Fallbacks sized to the web fonts' metrics (fontTools over the woff2 files and macOS Arial and Menlo, 2026-11-02), so
 * the swap to Epilogue or Plex Mono barely moves text: the layout shift it caused on slow loads (CLS up to 0.23) goes. */
@font-face { font-family: "Epilogue Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 108.77%; ascent-override: 72.63%; descent-override: 21.61%; line-gap-override: 0%; }
@font-face { font-family: "Epilogue Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 106.28%; ascent-override: 74.33%; descent-override: 22.11%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Menlo"), local("Menlo-Regular"), local("Courier New"); font-weight: 100 449; size-adjust: 99.66%; ascent-override: 102.85%; descent-override: 27.59%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Menlo Bold"), local("Menlo-Bold"), local("Courier New Bold"); font-weight: 450 900; size-adjust: 99.66%; ascent-override: 102.85%; descent-override: 27.59%; line-gap-override: 0%; }

/* Tokens */
:root {
  color-scheme: light dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
  --text-display-s: 1.44rem; --text-display: 1.728rem; --text-section: 1.2rem; --text-title: 1rem; --text-lead: 1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(50% 0.18 27); --color-error-soft: oklch(96% 0.025 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  /* neutrals: paper and ink with a trace of warmth */
  --color-paper: oklch(99.4% 0.003 85); --color-paper-2: oklch(97.2% 0.005 85); --color-paper-3: oklch(94.5% 0.007 85);
  --color-ink: oklch(18% 0.006 70); --color-ink-2: oklch(30% 0.006 70); --color-muted: oklch(45% 0.008 70);
  --color-rule: oklch(89.5% 0.006 85); --color-rule-2: oklch(93.5% 0.005 85);
  /* fields: calm fill, a thin edge that still reads at 3:1 */
  --color-field: oklch(97.6% 0.005 85); --color-field-edge: oklch(64% 0.01 75); --color-field-hover: oklch(40% 0.01 70);
  /* accent: warm amber, the interface and the mark; never the contents of a cup */
  --color-accent: oklch(81% 0.135 76); --color-accent-strong: oklch(60% 0.135 62);
  --color-accent-soft: oklch(95.6% 0.04 82); --color-accent-ink: oklch(40% 0.095 58);
  --color-focus: oklch(60% 0.135 62);
  /* contents of the jug and the measures, by product tone; textures are tints over any tone */
  --content-white: oklch(92.5% 0.02 85); --content-milk: oklch(96.8% 0.01 95); --content-wheat: oklch(85% 0.05 78); --content-brown: oklch(60% 0.075 58);
  --content-cocoa: oklch(42% 0.055 45); --content-golden: oklch(70% 0.14 62); --content-butter: oklch(91% 0.085 96);
  --content-water: oklch(89% 0.035 225); --content-edge: oklch(70% 0.02 80);
  --tex-dark: oklch(25% 0.02 60 / 0.2); --tex-light: oklch(100% 0 0 / 0.6);
  --font-display: "Epilogue", "Epilogue Fallback", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  --font-outlier: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace; --font-figure: var(--font-outlier);
  --radius-field: 10px; --radius-card: 14px; --radius-pill: 999px; --rule-hair: 1px;
  --shadow-pop: 0 18px 40px oklch(20% 0.01 70 / 0.16), 0 2px 6px oklch(20% 0.01 70 / 0.08);
  --tracking-display: -0.035em; --display-weight: 700;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(17% 0.006 70); --color-paper-2: oklch(20.5% 0.007 70); --color-paper-3: oklch(24% 0.008 70);
    --color-ink: oklch(94% 0.006 85); --color-ink-2: oklch(86% 0.006 85); --color-muted: oklch(73% 0.008 85);
    --color-rule: oklch(32% 0.008 70); --color-rule-2: oklch(26% 0.007 70);
    --color-field: oklch(21.5% 0.007 70); --color-field-edge: oklch(55% 0.01 75); --color-field-hover: oklch(78% 0.01 80);
    --color-accent: oklch(76% 0.13 74); --color-accent-strong: oklch(80% 0.13 76);
    --color-accent-soft: oklch(29% 0.05 68); --color-accent-ink: oklch(90% 0.085 82); --color-focus: oklch(80% 0.13 76);
    --color-error: oklch(72% 0.15 27); --color-error-soft: oklch(28% 0.06 27);
    --content-white: oklch(54% 0.018 85); --content-milk: oklch(62% 0.01 95); --content-wheat: oklch(50% 0.045 78);
    --content-brown: oklch(44% 0.06 58); --content-cocoa: oklch(34% 0.04 45); --content-golden: oklch(52% 0.11 62);
    --content-butter: oklch(60% 0.08 96); --content-water: oklch(44% 0.04 225); --content-edge: oklch(60% 0.02 80);
    --tex-dark: oklch(15% 0.02 60 / 0.3); --tex-light: oklch(100% 0 0 / 0.4);
    --shadow-pop: 0 18px 40px oklch(5% 0.01 70 / 0.55), 0 2px 6px oklch(5% 0.01 70 / 0.4);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
@media (prefers-color-scheme: dark) { body { font-weight: 350; } }
::selection { background: var(--color-accent-soft); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; color: var(--color-ink); }
/* Measures in em, not ch: 1ch is the width of "0" in the font in use, so a ch box changes size when the web font
   replaces its fallback and lines rewrap (layout shift). The em values equal the old ch boxes in Epilogue (1ch = 0.5685em
   regular, 0.5965em bold). */
h1 { max-width: 11.93em; font-size: var(--text-display); } h2 { max-width: 17.89em; font-size: var(--text-section); } h3 { max-width: 23.86em; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 29.56em; }
p { margin: 0; text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.num, .tbl td.num, .jug-lab, .jug-call { font-family: var(--font-figure); font-feature-settings: "zero" 1, "tnum" 1; }
.visually-hidden, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-modal); width: auto; height: auto; clip-path: none; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-field); }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Top bar */
.top { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.top__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.mk-line { fill: none; stroke: var(--color-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-fill { fill: var(--color-accent); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--color-ink); white-space: nowrap; }
.top__nav { display: flex; gap: var(--space-lg); margin-left: auto; font-size: var(--text-sm); }
.top__nav a { white-space: nowrap; text-decoration: none; color: var(--color-ink-2); padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.top__nav a:hover { color: var(--color-ink); border-bottom-color: var(--color-rule); }
.top__nav a[aria-current="page"] { color: var(--color-ink); font-weight: 600; border-bottom-color: var(--color-ink); }
.top__all { display: none; margin-left: auto; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.25em; }
.top__all:hover { color: var(--color-ink); text-decoration-color: currentColor; }
@media (max-width: 60rem) { .top__nav { display: none; } .top__all { display: inline-flex; } }

/* Breadcrumbs and the page head */
/* Inline items: a long current page wraps as text after its separator instead of dropping under it. */
.crumbs ol { list-style: none; margin: 0; padding: var(--space-md) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "/"; margin: 0 var(--space-xs); color: var(--color-muted); }
.crumbs a { color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-ink); }
.crumbs [aria-current] { color: var(--color-ink); }
.head { display: grid; gap: var(--space-xs); padding-top: var(--space-xl); }
.crumbs + .head { padding-top: var(--space-md); }
.head h1 { font-size: 2.6rem; line-height: 1; max-width: 16.7em; }
.head .lead { color: var(--color-ink-2); max-width: 25.01em; }

/* Tool: one head across the top; under it the form, the answer and the jug start on one line */
.tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4.4fr) minmax(0, 3.3fr); grid-template-areas: "form answer jug"; column-gap: var(--space-xl); row-gap: var(--space-md); padding-block: var(--space-md) var(--space-xl); align-items: start; }
.conv { grid-area: form; display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.answer { grid-area: answer; min-width: 0; }
.jug { grid-area: jug; margin: 0; }
.tool--nojug { grid-template-columns: minmax(0, 5fr) minmax(0, 7.7fr); grid-template-areas: "form answer"; }
.tool--chart { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "answer"; }
.tool--chart .conv { max-width: 40rem; }

/* Fields: one family of controls */
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); padding: 0; }
.field__input { width: 100%; min-height: 52px; font-family: var(--font-body); font-variant-numeric: lining-nums tabular-nums; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-field-edge); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-ink); font-size: 1.0625rem; line-height: 1.25; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.field__input:hover { border-color: var(--color-field-hover); }
.field__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-ink); }
.field__input[aria-invalid="true"], [data-invalid] .field__input { border-color: var(--color-error); background: var(--color-error-soft); }
.field__input:disabled { opacity: 0.5; cursor: not-allowed; }
.select { position: relative; display: block; color: var(--color-ink-2); }
.select::after { content: ""; position: absolute; right: var(--space-md); top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select.field__input { appearance: none; padding-right: var(--space-xl); cursor: pointer; text-overflow: ellipsis; }
.hint { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(-1 * var(--space-xs)); }
/* Converter panel: amount, from, to as one composition; each zone is fully tappable and rings on its own focus */
.cv { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 44px minmax(0, 1fr); padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-field-edge); border-radius: var(--radius-card); background: var(--color-field); }
.cv:has([aria-invalid="true"]) { border-color: var(--color-error); }
.cv__zone { position: relative; display: block; min-width: 0; min-height: 64px; border-radius: var(--radius-field); transition: background-color var(--dur-micro) var(--ease-out); }
.cv__zone:hover { background: var(--color-paper-3); }
.cv__zone--amount::after { content: ""; position: absolute; right: calc(-1 * var(--space-3xs)); top: var(--space-sm); bottom: var(--space-sm); width: var(--rule-hair); background: var(--color-rule); }
.cv__zone--unit::after { content: ""; position: absolute; z-index: 1; right: var(--space-md); top: calc(var(--space-xl) - var(--space-xs)); width: 7px; height: 7px; border-right: 2px solid var(--color-ink-2); border-bottom: 2px solid var(--color-ink-2); transform: rotate(45deg); pointer-events: none; }
.cv__label { position: absolute; z-index: 1; left: var(--space-sm); top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); pointer-events: none; }
.cv__input, .cv__select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: calc(var(--space-lg) + var(--space-3xs)) var(--space-sm) var(--space-xs); border: 0; border-radius: inherit; background: transparent; color: var(--color-ink); font-family: var(--font-body); font-variant-numeric: lining-nums tabular-nums; font-size: 1.125rem; line-height: 1.25; }
.cv__input { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.cv__select { appearance: none; padding-right: calc(var(--space-lg) + var(--space-2xs)); cursor: pointer; text-overflow: ellipsis; }
.cv__select option { color: var(--color-ink); background: var(--color-paper); }
.cv__input:focus-visible, .cv__select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; background: var(--color-paper); }
.cv__zone:has([aria-invalid="true"]) { background: var(--color-error-soft); }
.cv__zone:has([aria-invalid="true"]) .cv__label { color: var(--color-error); }
.cv__swap { align-self: center; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.cv__swap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv__swap:hover { background: var(--color-paper-3); color: var(--color-ink); }
.cv__swap:active { transform: translateY(1px); }
.cv__swap:focus-visible, .quiet:focus-visible, .setup__sum:focus-visible, .pick__done:focus-visible, .seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Ingredient picker: a field-shaped button over the native select, a searchable list under it */
.pick { position: relative; }
.pick__native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.pick__btn { display: flex; align-items: center; text-align: left; padding-block: var(--space-xs); padding-right: var(--space-xl); cursor: pointer; }
.pick__val { overflow-wrap: anywhere; }
.pick__btn.is-empty { color: var(--color-muted); }
.pick__pop { position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: var(--z-dropdown); width: max(100%, 380px); max-height: 440px; display: flex; flex-direction: column; background: var(--color-paper); border: var(--rule-hair) solid var(--color-field-edge); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); overflow: hidden; color: var(--color-ink); }
.pick__pop[hidden] { display: none; }
.pick__head { display: none; }
.pick__search { position: relative; padding: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pick__search svg { position: absolute; left: calc(var(--space-xs) + var(--space-sm)); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--color-muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.pick__q { padding-left: var(--space-xl); min-height: 44px; }
.pick__q::-webkit-search-cancel-button { cursor: pointer; }
.pick__list { list-style: none; margin: 0; padding: var(--space-xs); overflow-y: auto; overscroll-behavior: contain; }
.pick__grp { padding: var(--space-sm) var(--space-sm) var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.pick__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-sm); border-radius: 8px; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.pick__opt:hover, .pick__opt.is-active { background: var(--color-paper-3); }
.pick__opt[aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.pick__opt[aria-selected="true"] .pick__name { font-weight: 600; }
.pick__meta { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.pick__opt[aria-selected="true"] .pick__meta { color: var(--color-accent-ink); }
.pick__none { padding: var(--space-md) var(--space-sm); color: var(--color-ink-2); }
.pick__done { min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-field); background: transparent; color: var(--color-accent-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.pick__done:hover { background: var(--color-accent-soft); }

/* Settings: fill method and cup standard; on a phone they fold into one summary line */
.setup { display: grid; gap: var(--space-sm); }
.setup__sum { display: none; align-items: center; gap: var(--space-xs); width: 100%; min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-field); background: var(--color-paper-2); color: var(--color-ink); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.setup__sum:hover { background: var(--color-paper-3); }
.setup__sum svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--color-ink-2); stroke-width: 1.6; stroke-linecap: round; }
.setup__text { flex: 1; min-width: 0; font-size: 0.95rem; font-weight: 400; }
.setup__chg { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-ink); }
.setup__sum[aria-expanded="true"] .setup__chg { color: var(--color-ink-2); }
.setup__panel { display: grid; gap: var(--space-md); }
.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { margin-bottom: var(--space-xs); }
.seg__track { display: inline-flex; flex-wrap: wrap; gap: var(--space-3xs); padding: var(--space-3xs); border: var(--rule-hair) solid var(--color-field-edge); border-radius: 12px; background: var(--color-field); }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 var(--space-sm); border-radius: 8px; font-size: 0.95rem; color: var(--color-ink-2); text-align: center; line-height: 1.2; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg input:hover + span { background: var(--color-paper-3); color: var(--color-ink); }
.seg input:checked + span { background: var(--color-ink); color: var(--color-paper); font-weight: 600; }
.field--std { max-width: 260px; }

/* Answer: one card; the cups and spoons lead, the decimal waits in the explanation, the why folds away */
.answer { display: grid; gap: var(--space-sm); align-content: start; }
.answer__card { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-accent-soft); color: var(--color-accent-ink); }
.answer__from { font-size: var(--text-md); }
.answer__main { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.answer__main .num { font-weight: 600; letter-spacing: -0.03em; }
.answer__add { font-size: 0.62em; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink-2); }
.answer__approx { margin-right: 0.18em; color: var(--color-accent-ink); font-weight: 400; }
.answer__exact { font-size: var(--text-sm); }
.answer__cond { font-size: var(--text-sm); color: var(--color-ink-2); }
.answer__why { font-size: var(--text-sm); color: var(--color-ink-2); border-top: var(--rule-hair) solid var(--color-rule); }
.answer__why summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; list-style: none; color: var(--color-ink); font-weight: 600; }
.answer__why summary::-webkit-details-marker { display: none; }
.answer__why summary::after { content: ""; width: 7px; height: 7px; margin-left: var(--space-2xs); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); }
.answer__why[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.answer__why summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.answer__why-in { display: grid; gap: var(--space-xs); padding-bottom: var(--space-sm); max-width: 31.84em; }
.measures { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.ms { display: grid; grid-template-columns: auto auto; grid-template-rows: 44px auto; column-gap: var(--space-xs); align-items: end; justify-items: start; }
.ms svg { grid-column: 1 / -1; width: 56px; height: 44px; }
.ms-line { fill: none; stroke: var(--color-ink); stroke-width: 2.2; stroke-linejoin: round; }
.ms-unit { font-size: var(--text-sm); color: var(--color-ink); }
.ms-n { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.answer__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.quiet { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-3xs); border: 0; background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.25em; transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
.quiet:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.quiet:active { transform: translateY(1px); }
.quiet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.answer__actions:not(.is-on) { display: none; }
.tool[data-state="error"] .answer__main { color: var(--color-error); }
.tool:is([data-state="empty"], [data-state="error"], [data-state="limit"]) .answer__card { background: var(--color-paper-2); color: var(--color-ink-2); }
.tool:is([data-state="empty"], [data-state="error"]) .answer__main { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.tool:is([data-state="empty"], [data-state="error"], [data-state="limit"]) .answer__actions { display: none; }

/* Quick picks beside the ingredient label */
.ing__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); }
.quick { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.quick__b { position: relative; min-height: 32px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.quick__b::after { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)) 0; }
.quick__b:hover { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-field-edge); }
.quick__b:active { transform: translateY(1px); }
.quick__b[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-ink); font-weight: 600; }
.quick__b:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Jug */
.jug svg { width: 100%; height: auto; max-height: 520px; }
.jug-wall { fill: none; stroke: var(--color-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.jug-tick { stroke: var(--color-ink); stroke-width: 1.4; }
.jug-lab { font-size: 15px; fill: var(--color-ink); font-weight: 400; paint-order: stroke; stroke: var(--color-paper); stroke-width: 3.5px; stroke-linejoin: round; }
[data-tone="white"] { fill: var(--content-white); } [data-tone="milk"] { fill: var(--content-milk); } [data-tone="wheat"] { fill: var(--content-wheat); }
[data-tone="brown"] { fill: var(--content-brown); } [data-tone="cocoa"] { fill: var(--content-cocoa); } [data-tone="golden"] { fill: var(--content-golden); }
[data-tone="butter"] { fill: var(--content-butter); } [data-tone="water"] { fill: var(--content-water); }
.tex-dot { fill: var(--tex-dark); }
.tex-grain { fill: var(--tex-light); stroke: var(--tex-dark); stroke-width: 0.9; }
.gtc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jug-sheen { stroke: var(--tex-light); stroke-width: 3; stroke-linecap: round; }
.jug-halo { stroke: var(--color-paper); stroke-width: 4; }
@media (prefers-color-scheme: dark) { .jug-halo { stroke-width: 2.6; } }
.jug-level { stroke: var(--color-accent-strong); stroke-width: 3; stroke-linecap: round; }
.jug-call { font-size: 16px; font-weight: 600; fill: var(--color-accent-ink); paint-order: stroke; stroke: var(--color-paper); stroke-width: 5px; stroke-linejoin: round; }
.jug-call__add { font-size: 13px; font-weight: 400; }
.jug__cap { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); visibility: hidden; }

/* Chart tool: one amount, every ingredient */
.chart__filter { max-width: 24rem; }
.chart__none { padding: var(--space-md) 0; color: var(--color-ink-2); }

/* Mobile answer bar: repeats the answer while the fields are on screen and the answer is not */
.bar { position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); z-index: var(--z-sticky); display: none; align-items: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-pop); cursor: pointer; text-align: left; }
.bar__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Copy: sections under the tool, one readable column; on wide screens the contents of the page sit in a sticky column */
.doc { padding-bottom: var(--space-2xl); }
.copy { min-width: 0; max-width: 72rem; }
.copy > h2, .copy > section > h2:first-child { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-2xl); }
.copy > h2:first-child { margin-top: 0; }
.copy h3 { margin-top: var(--space-lg); font-size: var(--text-lg); }
.copy p, .copy ul, .copy ol, .copy dl { max-width: 38.66em; }
.copy > p, .copy > ul, .copy > ol, .copy > dl, .copy > details, .copy > figure, .copy > .tbl-wrap, .copy > table { margin-top: var(--space-md); }
.copy h2 + p, .copy h3 + p { margin-top: var(--space-sm); }
.copy ul, .copy ol { padding-left: 1.25em; }
.copy li + li { margin-top: var(--space-2xs); }
.copy a { color: var(--color-ink); text-decoration-color: var(--color-accent-strong); }
.copy a:hover { color: var(--color-accent-ink); }
.copy strong, .copy b { color: var(--color-ink); font-weight: 600; }
.copy details { border-bottom: var(--rule-hair) solid var(--color-rule); max-width: 38.66em; }
.copy details + details { margin-top: 0; }
.copy details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 52px; padding-block: var(--space-sm); cursor: pointer; list-style: none; color: var(--color-ink); font-weight: 600; }
.copy details summary::-webkit-details-marker { display: none; }
.copy details summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); }
.copy details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.copy details summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copy details > :not(summary) { padding-bottom: var(--space-md); }
.copy details summary h3 { margin: 0; font-size: inherit; letter-spacing: 0; font-weight: 600; }
.plain { max-width: 72rem; padding-block: var(--space-xl) var(--space-2xl); }
.plain .copy { padding-top: var(--space-lg); }

/* Directions list (home) */
.dirs { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); border-top: var(--rule-hair) solid var(--color-ink); max-width: none; }
.copy .dirs li + li { margin-top: 0; }
.dirs li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.dirs a { color: var(--color-ink); text-decoration: none; font-weight: 600; transition: color var(--dur-micro) var(--ease-out); }
.dirs a:hover { color: var(--color-accent-ink); text-decoration: underline; }
.dirs span { font-size: var(--text-sm); color: var(--color-ink-2); text-align: right; }
.why__list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: why; max-width: none; }
.copy .why__list li + li { margin-top: 0; }
.why__list li { border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-sm); counter-increment: why; }
.why__list li::before { content: counter(why); display: block; font-family: var(--font-figure); font-size: 2.074rem; font-weight: 600; color: var(--color-ink); line-height: 1.1; }
.why__list h3 { margin-top: var(--space-xs); color: var(--color-ink); }
.why__list p { margin-top: var(--space-2xs); }

/* Tables: one layout for every table the plugin prints. Wide screens: rows of figures under an ink rule. Phones
 * (≤ 40rem): each row restacks as its own block, the row head on top and each cell as "label  value" in a grid of
 * two, so no column ever leaves the screen at 320 px. */
.tbl-wrap { max-width: 72rem; }
.tbl-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2xs) var(--space-md); margin-bottom: var(--space-sm); }
.tbl-cap__note { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 31.84em; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-ink); }
.tbl caption { text-align: left; }
.tbl th, .tbl td { text-align: left; vertical-align: baseline; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.tbl thead th { font-weight: 400; color: var(--color-ink-2); vertical-align: bottom; }
.tbl tbody th { font-weight: 600; color: var(--color-ink); }
.tbl tbody th small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-2); }
.tbl td { color: var(--color-ink); }
.tbl .r { text-align: right; }
.tbl td.num { white-space: nowrap; }
.tbl tr.is-on th, .tbl tr.is-on td { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.tbl .tbl__grp th { padding-top: var(--space-md); font-weight: 400; color: var(--color-ink-2); }
.tbl td.mark { font-family: var(--font-figure); font-weight: 600; }
.tbl-legend { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 36.95em; }
.tbl-legend b { font-family: var(--font-figure); font-weight: 600; color: var(--color-ink); }
.tbl-more { margin-top: var(--space-sm); }
.tbl-more summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--color-ink); font-weight: 600; }
.tbl-more summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Related pages and sources */
.tools { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-md) var(--gap-columns); max-width: none; }
.copy .tools li + li { margin-top: 0; }
.tools a { display: grid; gap: var(--space-2xs); height: 100%; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-ink); text-decoration: none; color: var(--color-ink-2); }
.tools b { color: var(--color-ink); font-weight: 600; }
.tools a:hover b { color: var(--color-accent-ink); text-decoration: underline; }
.tools span { font-size: var(--text-sm); }
.sources { font-size: var(--text-sm); }
.sources li { overflow-wrap: anywhere; }

/* Footer */
.foot { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); }
.foot__note { flex-basis: 100%; order: 3; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 38.66em; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.foot nav a { white-space: nowrap; display: inline-flex; min-height: 32px; align-items: center; }

@media (max-width: 75rem) {
  .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "form answer" "form jug"; grid-template-rows: auto 1fr; }
  .tool--nojug { grid-template-areas: "form answer"; grid-template-rows: none; }
  .tool--chart { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "answer"; }
  .jug svg { max-height: 360px; }
    }
@media (max-width: 60rem) {
  .tool, .tool--nojug { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "answer"; grid-template-rows: none; row-gap: var(--space-md); padding-block: var(--space-md) var(--space-lg); }
  .tool.is-shared { grid-template-areas: "answer" "form"; }
  .jug { display: none; }
  .head { padding-top: var(--space-md); }
  .head h1 { font-size: 1.9rem; }
  .conv { gap: var(--space-sm); }
  .setup__sum { display: flex; }
  .js .setup:not([data-open="true"]) .setup__panel { display: none; }
  .setup__panel { padding: var(--space-2xs) 0 var(--space-xs); }
  .seg__track { display: flex; }
  .seg label { flex: 1; }
  .seg span { flex: 1; padding: 0 var(--space-xs); }
  .field--std { max-width: none; }
  .answer__cond { display: none; }
  .answer { gap: var(--space-2xs); }
  .bar[data-show="true"] { display: flex; }
  .pick__pop { position: fixed; inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; z-index: var(--z-modal); }
  .pick__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--space-xs) 0 var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .pick__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); }
  .pick__search { padding: var(--space-sm) var(--space-md); }
  .pick__search svg { left: calc(var(--space-md) + var(--space-sm)); }
  .pick__list { padding: var(--space-2xs) var(--space-xs) var(--space-xl); }
  .is-picking body { overflow: hidden; }
  .dirs { grid-template-columns: minmax(0, 1fr); }
  .why__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .tool-page .head .lead, .hint { display: none; }
  .head h1 { font-size: 1.75rem; }
  .cv { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) 44px minmax(0, 1fr); }
  .cv__swap { width: 44px; height: 100%; min-height: 64px; border-radius: var(--radius-field); }
  .cv__select { font-size: 1.0625rem; padding-right: var(--space-lg); }
  .cv__input { font-size: 1.375rem; }
  .cv__zone--unit::after { right: var(--space-sm); }
  .answer__card { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .answer__main { font-size: 1.85rem; }
  .top__in { min-height: 56px; gap: var(--space-md); }
  .copy > h2, .copy > section > h2:first-child { font-size: var(--text-xl); }
  /* Tables restack */
  .tbl { border-top: var(--rule-hair) solid var(--color-ink); }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tbody, .tbl tr { display: block; }
  .tbl tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); row-gap: var(--space-2xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .tbl tbody tr.tbl__grp { display: block; border-bottom: 0; padding-bottom: 0; }
  .tbl th, .tbl td { border: 0; padding: 0; }
  .tbl tbody th { grid-column: 1 / -1; margin-bottom: var(--space-2xs); }
  .tbl tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); min-width: 0; text-align: right; }
  /* The label takes the room the value leaves and wraps (never inside a word), so the value keeps its line and cell. */
  .tbl tbody td::before { content: attr(data-label); flex: 1 1 0; text-align: left; font-family: var(--font-body); font-weight: 400; color: var(--color-ink-2); }
  .tbl tbody td.wide { grid-column: 1 / -1; }
  .tbl tbody td.num { white-space: normal; }
  .tbl--one tbody tr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 23rem) {
  .cv { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .cv__zone--amount { grid-column: 1 / -1; }
  .cv__zone--amount::after { top: auto; bottom: calc(-1 * var(--space-3xs)); left: var(--space-sm); right: var(--space-sm); width: auto; height: var(--rule-hair); }
  .cv__swap { width: 44px; }
  .answer__main { font-size: 1.65rem; }
  .setup__sum svg { display: none; }
  .setup__sum { gap: var(--space-xs); }
  .setup__text { font-size: 0.9rem; }
  .head h1 { font-size: 1.6rem; }
  .brand__name { font-size: 1.05rem; }
  .tbl tbody tr { grid-template-columns: minmax(0, 1fr); }
}
/* Print: the answer card and its explanation only. GeneratePress wraps main in #page and #content, so hide by
 * component, not by position. */
@media print {
  .top, .foot, .crumbs, .head .lead, .conv, .jug, .doc, .bar, .answer__actions, .skip-link { display: none !important; }
  .tool { display: block; padding: 0; }
  .answer__why { border: 0; }
  .answer__why-in { display: grid !important; }
  .answer__card { background: none; padding: 0; }
  /* Text pages (the printable kitchen conversion chart): the copy and its tables in ink on paper, whatever the screen's
   * scheme; the links to other pages go, a row or a heading never splits from what it heads. */
  :root { --color-paper: #fff; --color-ink: #000; --color-ink-2: #333; --color-rule: #bbb; --color-accent-ink: #000; color-scheme: light; }
  body { background: #fff; color: #000; }
  .plain { padding-block: 0; max-width: none; }
  .plain .copy { padding-top: var(--space-sm); }
  .plain .tools, .plain #related { display: none !important; }
  .copy a { color: inherit; text-decoration: none; }
  .copy h2, .copy h3 { break-after: avoid; page-break-after: avoid; }
  .copy > h2, .copy > section > h2:first-child { margin-top: var(--space-lg); }
  .tbl thead { display: table-header-group; }
  .tbl tr, .tbl-legend { break-inside: avoid; page-break-inside: avoid; }
}