/* Tokens copied from Design System.dc.html §11. Do not retype. Dark
   prefers-color-scheme is in that file too; it is not enabled here — those
   values are for a later brew-strip / theme pass, not a silent OS flip. */
:root {
  --bg: #faf6f2;        --surface: #ffffff;    --surface-sunk: #f3ece5;
  --border: #e0d2c7;    --border-strong: #c9b5a7;
  --text: #241713;      --text-muted: #7a6156; --text-faint: #816658;
  --ink-strong: #3d211b; --accent: #6b4034;    --accent-soft: #9c6a4a;
  --push: #2c6b4a;      --push-bg: #eef6f1;    --push-line: #b8d4c3;
  --back: #a8443a;      --back-bg: #f9eeec;    --back-line: #e4bdb7;
  --plan: #8a6a1f;      --plan-bg: #fdf8ee;    --plan-line: #d8bd7e;

  --font-prose: "Source Serif 4", Georgia, serif;
  --font-ui: Archivo, system-ui, sans-serif;
  --font-num: "Roboto Mono", ui-monospace, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 28px; --s-7: 40px;
  --row-compact: 36px; --row-roomy: 60px; --tap: 44px;
  --r-sm: 6px; --r-md: 8px;  --r-lg: 14px; --r-pill: 999px;

  /* Aliases so older rules keep working. Prefer the names above in new CSS. */
  --card: var(--surface);
  --coffee: var(--ink-strong);
  --coffee-light: var(--accent);

  /* chrome-only (dark bars only — not for page content) */
  --chrome-text: #FDFAF7;
  --chrome-muted: #C4A698;
  --chrome-highlight: #E8B98F;
  --chrome-inactive-first: #8A6A5E;
  /* On-dark siblings of --push / --back. The page-level pair are tuned for a
     light background and all but disappear inside the strip. */
  --chrome-push: #6FBD93;
  --chrome-back: #E08B80;

  /* Clerk components. Aliases only — never a new color. Appearance JS
     also reads the tokens above as resolved values for older browsers. */
  --clerk-color-primary: var(--ink-strong);
  --clerk-color-primary-foreground: var(--chrome-text);
  --clerk-color-foreground: var(--text);
  --clerk-color-muted-foreground: var(--text-muted);
  --clerk-color-muted: var(--surface-sunk);
  --clerk-color-background: var(--bg);
  --clerk-color-input: var(--surface);
  --clerk-color-input-foreground: var(--text);
  --clerk-color-danger: var(--back);
  --clerk-color-success: var(--push);
  --clerk-color-warning: var(--plan);
  --clerk-color-neutral: var(--border-strong);
  --clerk-color-border: var(--border);
  --clerk-color-ring: var(--accent);
  --clerk-font-family: var(--font-ui);
  --clerk-font-family-buttons: var(--font-ui);
  --clerk-font-family-mono: var(--font-num);
  --clerk-border-radius: var(--r-md);
  --clerk-spacing: var(--s-4);

  /* Heights of the two bars pinned to the bottom of a phone screen. Measured
     at runtime by brew-execute.js and written back onto :root, because both
     are content-driven: the tab bar grows with env(safe-area-inset-bottom),
     and the brew strip changes height when the phase changes. These are the
     fallbacks used before that runs, and if it never does — deliberately
     generous, since over-padding is invisible and under-padding hides page
     content behind the strip. */
  --tabbar-h: calc(44px + env(safe-area-inset-bottom, 0px));
  --strip-h: 240px;
}

* { box-sizing: border-box; }

/* Author rules like `.btn { display: ... }` tie the [hidden] UA rule on
   specificity and win the cascade, so a `hidden`-toggled button stays
   visible. Restore the native behavior globally. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

p, .lede, .hint, .lesson-body, .lesson-lead, .lesson-bullets,
.why-list, .palate-blurb, .cafe-disclaimer, .device-note {
  font-family: var(--font-prose);
}

.num, .timer, .score-badge, .gear-scale, .flow-step, .cap-state,
.dose-override input, .temp-override input, .grind-dial input,
#cost-display, #water-display, #dose-display {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 26px;
  height: 58px;
  background: var(--ink-strong);
  font-family: var(--font-ui);
}

.nav a {
  color: var(--chrome-muted);
  text-decoration: none;
  font-size: 14px;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  text-decoration: none;
  opacity: 1;
  transition: opacity 120ms ease;
}
.brand:hover { opacity: .88; }
.brand:focus-visible {
  outline: 2px solid var(--chrome-highlight);
  outline-offset: 2px;
}
.brand-wordmark {
  display: flex;
  align-items: baseline;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 17px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand-ns   { color: var(--chrome-muted); font-weight: 400; }
.brand-name { color: var(--chrome-text);  font-weight: 700; }

/* mobile scale */
.brand--mobile { gap: 7px; }
.brand-wordmark--mobile { font-size: 14.5px; }
.nav a:hover { text-decoration: none; color: var(--bg); }
.nav a.is-active {
  font-weight: 700;
  color: var(--chrome-text);
  box-shadow: inset 0 -3px 0 var(--chrome-highlight);
  background: transparent;
  padding: 0 16px;
  text-decoration: none;
}
.nav .nav-brew { font-weight: 400; }

.tab-bar { display: none; }
.mobile-brand { display: none; }

.container { max-width: 760px; margin: 0 auto; padding: var(--s-6); }

.auth-gate {
  max-width: 28rem;
  margin: var(--s-7) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.auth-gate-title {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.auth-gate-wait { margin: 0; }
.auth-gate-mount {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.auth-gate-fallback { margin: 0; }

h1 {
  margin-top: 0;
  font-family: var(--font-prose);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h2 {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
}
.eyebrow, .lesson-eyebrow {
  margin: 0 0 var(--s-1);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lede {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
}
.hint { color: var(--text-faint); font-style: normal; }
.lesson-history-blurb {
  margin-top: -0.4rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.95rem;
}

.palate-panel { margin: 1rem 0 1.5rem; }
.palate-heading { margin: 0 0 0.4rem; font-size: 1.1rem; }
.palate-blurb { margin: 0 0 0.75rem; }
.palate-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.95rem;
}
.palate-term {
  display: inline-block;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.15rem 0.45rem;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--text);
}

.field-focus-grid {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0;
}
@media (min-width: 560px) {
  .field-focus-grid { grid-template-columns: 1fr 1fr; }
}
.field-focus-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  padding: var(--s-4);
}
.field-focus-card:hover,
.field-focus-card:focus-visible {
  border-color: var(--border-strong);
}
.field-focus-card strong { font-size: 1.05rem; font-family: var(--font-ui); }

.lesson-infographic {
  margin: 0 0 1rem;
  padding: 0;
}
.lesson-infographic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.lesson-lead {
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.lesson-section {
  margin: 0 0 0.85rem;
}
.lesson-section-heading {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.lesson-bullets {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.45;
}
.lesson-bullets li { margin: 0.2rem 0; }
/* ---- Callouts (2026-09-03) ----
   `.callout` and `.callout-push` have been in the markup since the cold-brew
   build with no rule behind them anywhere, which is why the "what comes out"
   note read as a bare paragraph. Three variants, matching the three semantic
   colour trios in the token block. Welcome's `_welcome_pitch.html` /
   `_welcome_gate.html` also carry `class="callout"`; they pick this up on
   purpose now (they were unstyled until this rule existed). */
.callout {
  border-left: 3px solid var(--border-strong);
  background: var(--surface-sunk);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-3) var(--s-4);
  margin: var(--s-5) 0;
}
.callout > p { margin: 0; }
.callout > p + p { margin-top: var(--s-2); }
.callout-push { border-left-color: var(--push); background: var(--push-bg); }
.callout-push .eyebrow { color: var(--push); }
.callout-plan { border-left-color: var(--plan); background: var(--plan-bg); }
.callout-plan .eyebrow { color: var(--plan); }
.callout-back { border-left-color: var(--back); background: var(--back-bg); }
.callout-back .eyebrow { color: var(--back); }


.lesson-callout {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.8rem;
  background: var(--plan-bg);
  border-left: 3px solid var(--plan-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
a.glossary-term-link,
span.glossary-term-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a.glossary-term-link:hover {
  color: var(--ink-strong);
}

.card-grid { display: flex; gap: 1rem; margin: 1rem 0; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  flex: 1;
}
.card h2 { margin: 0; font-size: 1.6rem; }
.card p { margin: 0.25rem 0 0.75rem; color: var(--text-faint); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
}
.btn-primary {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--bg);
}
.btn-link {
  background: none;
  border: none;
  min-height: 0;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}

.quick-actions { margin: 1rem 0; }

.table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.table th, .table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.table th {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-muted);
}

.form-grid { display: flex; flex-direction: column; gap: 0.6rem; max-width: 420px; margin: 0.75rem 0; }
.form-grid label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--text-muted); gap: 0.2rem; font-family: var(--font-ui); }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-family: var(--font-ui);
  min-height: var(--tap);
  background: var(--surface);
  color: var(--text);
}

details { margin: 0.75rem 0; }
details summary { cursor: pointer; color: var(--coffee-light); font-weight: 600; }

.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
}

.pick-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pick-list li { margin: 0; }
.pick-list a { text-decoration: none; color: var(--ink-strong); font-weight: 600; }

.pick-device {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  text-decoration: none;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
}
.pick-device:hover { text-decoration: none; background: var(--surface-sunk); }
.pick-device .hint {
  margin-left: auto;
  font-weight: 400;
}
.pick-chevron {
  margin-left: auto;
  color: var(--border-strong);
  font-family: var(--font-num);
  font-size: 14px;
}
.device-silhouette {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--coffee);
  display: block;
}

.rank-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 10px; }
.rank-list li { margin: 0; }
.rank-list a { text-decoration: none; color: var(--coffee); }
.score-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  background: var(--coffee-light);
  color: var(--bg);
  border-radius: 999px;
  font-size: 0.75rem;
}
.score-badge-history { background: var(--push); }
.score-badge-muted { background: var(--text-faint); }
.score-badge-fit {
  background: transparent;
  color: var(--accent-soft);
  border: 1.5px solid var(--accent-soft);
}
.bean-filters {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 0.75rem;
}
.batch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.batch-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.batch-row select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.recipe-preview { color: var(--text-muted); font-size: 0.9rem; }

.last-brew {
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.last-brew h3 { margin-top: 0; }
.grind-dial {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  vertical-align: middle;
}
.grind-dial input {
  width: 4.5rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
#dial-history-lead {
  margin: 0.45rem 0 0.15rem;
}
.dial-history {
  margin: 0.15rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.recipe-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.25rem; }
.recipe-box.steps-card {
  border-radius: var(--r-lg);
  padding: 0;
}
.recipe-box.steps-card h3 {
  padding: 1rem 1.25rem 0;
}
.recipe-box.steps-card ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
}
.recipe-box.steps-card ol li {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.45;
}
.recipe-box.steps-card ol li:last-child {
  border-bottom: none;
}
.recipe-box.steps-card ol li::before {
  counter-increment: step-counter;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  left: 1.25rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 15px;
  color: var(--accent-soft);
}
.recipe-box.steps-card strong {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.recipe-box.steps-card .provenance {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-block;
  margin-top: 6px;
}
.why-list { color: var(--text-muted); font-size: 0.9rem; }

.timer {
  font-size: 52px;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0.5rem 0;
  line-height: 1.1;
}
.timer-done { color: var(--back); }
.timer-phase-change { color: var(--push); }
.timer-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 0.5rem; align-items: baseline; }
.timer-phase { font-weight: 600; color: var(--ink-strong); font-family: var(--font-ui); }

.device-family h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1rem 0 0.25rem;
}
.device-more summary, .device-overrides summary { cursor: pointer; font-size: 0.85rem; color: var(--text-muted); }
.device-more[open], .device-overrides[open] { margin-bottom: 0.4rem; }

.lesson-player-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.lesson-player-header .lesson-eyebrow { margin: 0; }
.lesson-duration-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.lesson-progress-hint {
  font-size: 0.8rem;
  color: var(--coffee-light);
  font-weight: 600;
}
.lesson-footer-links a { color: var(--coffee-light); }

.glossary-toolbar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 1rem 0 1.25rem;
}
.glossary-search-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.glossary-search-label input {
  font-family: var(--font-prose);
  font-size: 15px;
  min-height: var(--tap);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
}
.glossary-wheel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.glossary-wheel-item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.glossary-wheel-item:hover { border-color: var(--coffee); }
.glossary-section { margin: 0 0 1.25rem; }
.glossary-section h2 {
  margin: 0 0 0.2rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.glossary-terms { margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 10px; }
.glossary-term {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.glossary-term dt {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--coffee);
}
.glossary-term dd {
  margin: 0.25rem 0 0;
  color: var(--text);
  line-height: 1.45;
  font-family: var(--font-prose);
}
.glossary-back { margin: 1.25rem 0 0.5rem; }
.lesson-steps {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-faint);
}
.lesson-step-dot.is-active {
  color: var(--coffee);
  font-weight: 700;
}
.lesson-box { margin: 1rem 0 1.25rem; }
.lesson-body { margin: 0 0 1rem; line-height: 1.55; }
.lesson-context { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.lesson-actions { margin: 0.5rem 0; }

/* Progressive enhancement: with JS, only the active step shows */
.lesson-player[data-enhanced="1"] .lesson-step { display: none; }
.lesson-player[data-enhanced="1"] .lesson-step.is-active { display: block; }

.vocab-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
  max-width: 520px;
}
.vocab-fieldset legend {
  font-weight: 600;
  color: var(--coffee);
  padding: 0 0.35rem;
}
.vocab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.vocab-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
  max-width: 100%;
}
.vocab-chip-term {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.vocab-chip-blurb {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  font-weight: 400;
}
.vocab-chip:has(input:checked) {
  border-color: var(--coffee);
  background: var(--surface-sunk);
}
.vocab-chip input {
  margin: 0 0.35rem 0 0;
  accent-color: var(--coffee);
}
.note-prompt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
}
.note-prompt-chip {
  font-size: 0.85rem;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  background: var(--card);
  color: var(--coffee);
  border: 1px solid var(--border);
}
/* Phase 8: the sensory record. Radio dots rather than sliders so "not
   answered" stays visibly different from "middling" — see execute.html. */
.sensory-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem 0.4rem;
  margin: 0.25rem 0 0.75rem;
  background: var(--card);
}
.sensory-fieldset legend {
  font-weight: 600;
  padding: 0 0.35rem;
}
.sensory-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}
.sensory-row:first-of-type { border-top: 0; }
.sensory-label {
  flex: 1 1 8rem;
  min-width: 7rem;
  font-weight: 600;
}
.sensory-label .hint { display: block; font-weight: 400; }
.sensory-scale {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.sensory-anchor {
  font-size: 0.8rem;
  color: var(--coffee-light);
  min-width: 3.5rem;
}
.sensory-anchor:last-child { text-align: right; }
.sensory-dot { display: inline-flex; cursor: pointer; }
.sensory-dot input {
  margin: 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--coffee);
}
.sensory-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.sensory-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
}
.sensory-choice input { margin: 0; accent-color: var(--coffee); }
.sensory-choice:has(input:checked) {
  border-color: var(--coffee);
  background: var(--card);
  font-weight: 600;
}
.sensory-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  margin: 0 0.2rem 0.2rem 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

/* Phase 9: the coaching loop — one committed change, its read-back, and the
   picker. Same components as the sensory record, no new design system. */
.tweak-fieldset,
.tweak-open-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  margin: 0.25rem 0 0.75rem;
  background: var(--card);
}
.tweak-fieldset legend,
.tweak-open-fieldset legend {
  font-weight: 600;
  padding: 0 0.35rem;
}
.tweak-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.tweak-option:first-of-type { border-top: 0; }
.tweak-option input { margin: 0; accent-color: var(--coffee); }
.tweak-option-label { font-weight: 600; }
.tweak-option .hint { grid-column: 2; }
.tweak-option:has(input:checked) .tweak-option-label { color: var(--coffee); }
.tweak-picker { margin-top: 0.5rem; }
.tweak-picker summary { cursor: pointer; font-size: 0.9rem; }
.tweak-picker-row {
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}
.tweak-picker-lever {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.tweak-picker-row .tweak-option { border-top: 0; padding: 0.2rem 0; }
.tweak-open { padding: 0.3rem 0; }
.tweak-open-move { margin: 0 0 0.2rem; }
.tweak-resolution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.tweak-stale { opacity: 0.75; }
.tweak-outcome { margin-bottom: 0.9rem; }
.tweak-outcome-heading { font-size: 1rem; margin: 0 0 0.4rem; }
.tweak-outcome-list { margin: 0; padding-left: 1.1rem; }
.tweak-outcome-list .is-target { font-weight: 600; }
.tweak-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--coffee);
  border-radius: 999px;
  white-space: nowrap;
}

.lever-compare {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--text);
}
.lever-compare .hint { display: block; }
.tweak-banner {
  margin: 0 0 0.75rem;
  padding: 12px 15px;
  background: var(--plan-bg);
  border-left: 3px solid var(--plan-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tweak-banner .hint { display: block; margin-top: 0.15rem; }
.dose-override,
.temp-override {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dose-override input,
.temp-override input {
  width: 4.5rem;
  padding: 0.25rem 0.4rem;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.checkbox-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--coffee);
}
.form-notice {
  color: var(--push);
  background: var(--push-bg);
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
}
.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.inline-form input[type="password"] {
  min-width: 10rem;
}
.nav-user, .mobile-user {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--chrome-muted);
}
.nav-user-button {
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: var(--s-2);
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
}
.mobile-brand .nav-user-button {
  margin-left: var(--s-2);
}
.nav-logout {
  display: inline;
  margin: 0;
  padding: 0;
  align-self: center;
}
.nav-logout-btn {
  color: var(--bg);
  font-size: 0.95rem;
  text-decoration: none;
}
.nav-logout-btn:hover {
  text-decoration: underline;
}
.lesson-player-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  position: sticky;
  bottom: 4.5rem;
  background: var(--bg);
  padding: 0.5rem 0;
  z-index: 5;
}
.lesson-section-heading {
  font-size: 1rem;
  margin: 0.85rem 0 0.35rem;
  color: var(--coffee);
}
.lesson-bullets {
  margin: 0 0 0.5rem;
  padding-left: 1.15rem;
  line-height: 1.45;
}
.lesson-lead {
  margin: 0 0 0.75rem;
  font-weight: 600;
  line-height: 1.45;
}
.lesson-scope-banner {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--plan-line);
  background: var(--plan-bg);
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 0.92rem;
}
.lesson-box-tangential {
  opacity: 0.98;
  border-style: dashed;
}

/* Phase 2 Task 5: lever redirect — "X isn't a lever here, but your Y is" */
.lever-redirects {
  margin: 0.75rem 0 0;
}
.lever-redirect {
  margin: 0 0 0.5rem;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--push-line);
  background: var(--push-bg);
  color: var(--push);
  line-height: 1.45;
  font-size: 0.92rem;
}
.lever-redirect-devices {
  display: block;
  margin-top: 0.4rem;
}
.lever-redirect-chip {
  display: inline-block;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--push-bg);
  color: var(--push);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Phone-friendly layout (kitchen / VPS use) */
@media (max-width: 640px) {
  .nav {
    display: none; /* bottom tab bar is the primary nav on phones */
  }
  .mobile-brand {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    background: var(--ink-strong);
    font-family: var(--font-ui);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .container {
    padding: 1rem;
    padding-bottom: 5.5rem; /* clear sticky tab bar */
  }
  .card-grid { flex-direction: column; }
  .form-grid { max-width: none; }
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .btn {
    font-size: 1rem;
    min-height: var(--tap);
  }
  .table th, .table td { padding: 8px 6px; font-size: 13px; }
  .timer { font-size: 52px; }

  .tab-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--text);
    border-top: 1px solid rgba(253, 250, 247, 0.12);
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    gap: 0.15rem;
    font-family: var(--font-ui);
  }
  .tab-bar a {
    flex: 1;
    text-align: center;
    color: var(--bg);
    text-decoration: none;
    font-size: 13px;
    padding: 9px 4px;
    border-radius: var(--r-md);
    opacity: 0.85;
  }
  .tab-bar a.is-active {
    opacity: 1;
    font-weight: 700;
    background: rgba(253, 250, 247, 0.18);
  }
  .tab-bar .tab-bar-brew {
    flex: 1.35;
    font-weight: 700;
    font-size: 13px;
    opacity: 1;
  }
  .tab-bar .tab-bar-brew.is-active {
    background: rgba(253, 250, 247, 0.18);
  }
  .tab-label { display: block; }
}

.unit-toggle {
  display: inline-flex;
  margin-left: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
}
.unit-toggle-btn {
  border: none;
  background: var(--surface);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  min-height: var(--tap);
}
.unit-toggle-btn.is-active {
  background: var(--ink-strong);
  color: var(--bg);
}

.form-error { color: var(--back); font-weight: 600; }

/* Sunken two-segment switch (Café Log/Teach, Rank by-bean/by-device). */
.segment {
  display: flex;
  gap: 8px;
  margin: 0.75rem 0 1rem;
  padding: 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 9px;
  max-width: 420px;
}
.segment-item {
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
}
.segment-item:hover { text-decoration: none; color: var(--ink-strong); }
.segment-item.is-on,
.segment-item:has(input:checked) {
  background: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 700;
}
.segment-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.segment-item:focus-within {
  outline: 2px solid var(--coffee-light);
  outline-offset: 2px;
}
.cafe-intent { max-width: 420px; }
.rank-mode { margin: 0 0 12px; max-width: 280px; }

.choice-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.choice-fieldset legend {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  margin: 0 0 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Phase 1c Score --- */
.score-fieldset { padding: 0; border: 0; margin: 0 0 24px; }
.score-legend { display: flex; justify-content: space-between; width: 100%; border: 1px solid var(--border-strong); border-bottom: 0; padding: 8px 12px; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface); box-sizing: border-box; }
.score-title { font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); font-size: 11px; }
.score-meta { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--text-faint); }
.score-buttons { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; background: var(--surface); }
.score-btn { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; font-family: 'Roboto Mono', monospace; font-size: 21px; font-variant-numeric: tabular-nums; color: #4A352D; cursor: pointer; border-right: 1px solid var(--border); }
.score-btn:last-child { border-right: 0; }
.score-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.score-btn:has(input:checked) { background: var(--ink-strong); color: var(--chrome-text); font-weight: 600; }
.score-btn:focus-within { outline: 2px solid var(--coffee-light); outline-offset: -2px; }
.score-error { margin: 8px 0 0; font-family: Archivo, system-ui, sans-serif; font-size: 13px; }
.score-error:empty { display: none; }

/* --- Phase 1c Sensory Cards --- */
.sensory-teach-intro { margin-bottom: 24px; }
.sensory-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sensory-card p.hint { font-family: ui-serif, Georgia, serif; font-size: 13.5px; line-height: 1.4; color: var(--text-muted); margin: 0; }
.sensory-teach-details > summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; }
.sensory-teach-details > summary::-webkit-details-marker { display: none; }
.sensory-card-title { font-family: Archivo, system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.sensory-card-teach-link { font-family: Archivo, system-ui, sans-serif; font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.sensory-teach-prose { font-family: ui-serif, Georgia, serif; font-size: 13.5px; line-height: 1.4; color: var(--ink-strong); margin-top: 8px; padding: 12px; background: var(--bg); border-radius: var(--r-md); }
.sensory-intensity-scale { display: flex; gap: 4px; }
.sensory-intensity-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 52px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); cursor: pointer; }
.sensory-intensity-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.sensory-intensity-circle { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--accent-soft); }
.sensory-intensity-label { font-family: Archivo, system-ui, sans-serif; font-size: 12px; color: var(--text-muted); }
.sensory-intensity-btn:has(input:checked) { border-color: var(--ink-strong); }
.sensory-intensity-btn:has(input:checked) .sensory-intensity-circle { background: var(--ink-strong); border-color: var(--ink-strong); }
.sensory-intensity-btn:has(input:checked) .sensory-intensity-label { font-weight: 600; color: var(--ink-strong); }
.sensory-intensity-btn:focus-within { outline: 2px solid var(--coffee-light); }

.sensory-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.sensory-choice-btn { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; padding: 0 16px; font-family: Archivo, system-ui, sans-serif; font-size: 13px; color: var(--text-muted); text-align: center; }
.sensory-choice-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.sensory-choice-btn:has(input:checked) { background: var(--ink-strong); color: var(--chrome-text); font-weight: 600; border-color: var(--ink-strong); }
.sensory-choice-btn:focus-within { outline: 2px solid var(--coffee-light); }

.sensory-fault-block { border-top: 1px solid var(--border); padding-top: 9px; margin-top: 4px; }
.sensory-fault-lead { font-family: Archivo, system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; }
.defect-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.defect-tag-pill { display: flex; align-items: center; gap: 6px; min-height: 38px; border-radius: 999px; padding: 0 16px; background: var(--back-bg); border: 1px solid var(--back-line); color: var(--back); cursor: pointer; }
.defect-tag-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.defect-tag-label { font-family: Archivo, system-ui, sans-serif; font-size: 13px; font-weight: 500; }
.defect-tag-anchor { font-family: 'Roboto Mono', monospace; font-size: 11px; opacity: 0.75; }
.defect-tag-pill:has(input:checked) { background: var(--back); color: var(--back-bg); border-color: var(--back); }
.defect-tag-pill:focus-within { outline: 2px solid var(--coffee-light); }

.unplaced-tags-card { border: 1px dashed var(--border-strong); }
.unplaced-tag-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.unplaced-tag-reason { margin-top: 0; }

.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.choice-chip {
  display: inline-flex;
  cursor: pointer;
}
.choice-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
}
.choice-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.choice-chip:has(input:checked) span,
.choice-chip:has(input:focus-visible) span {
  border-color: var(--ink-strong);
  background: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 600;
}
.score-pads {
  display: flex;
  align-items: stretch;
  gap: 7px;
  width: 100%;
}
.score-pad {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  cursor: pointer;
}
.score-pad input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
}
.score-pad span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 19px;
}
.score-pad:has(input:checked) span,
.score-pad:has(input:focus-visible) span {
  border: 2px solid var(--ink-strong);
  background: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 600;
}
.cafe-log-form { max-width: 520px; }
.cafe-log-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cafe-card-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
}
.cafe-log-card .sensory-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.cafe-log-card .sensory-fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.cafe-log-form .sensory-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.cafe-log-form .sensory-label { flex: none; }
.cafe-log-form .sensory-choices { width: 100%; }
.cafe-log-form .sensory-choice {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.cafe-log-form .sensory-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.cafe-log-form .sensory-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.cafe-log-form .sensory-choice:has(input:checked) span,
.cafe-log-form .sensory-choice:has(input:focus-visible) span {
  border-color: var(--ink-strong);
  background: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 600;
}
.cafe-log-card .vocab-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cafe-log-form .vocab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}
.cafe-log-form .vocab-chip {
  flex-direction: row;
  align-items: center;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.cafe-log-form .vocab-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.cafe-log-form .vocab-chip-term {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.cafe-log-form .vocab-chip-blurb { display: none; }
.cafe-log-form .vocab-chip:has(input:checked) {
  border: 0;
  background: transparent;
}
.cafe-log-form .vocab-chip:has(input:checked) .vocab-chip-term,
.cafe-log-form .vocab-chip:has(input:focus-visible) .vocab-chip-term {
  border-color: var(--accent);
  background: #f3e9e2;
  color: var(--ink-strong);
  font-weight: 600;
}
.cafe-optional { margin: 0; }
.cafe-optional summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.cafe-optional label { margin-top: 8px; }
.form-grid .choice-chip,
.form-grid .score-pad,
.form-grid .identify-keep,
.form-grid .tristate-option {
  flex-direction: row;
  align-items: center;
  font-size: inherit;
  color: inherit;
  gap: inherit;
}
.device-identify {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px;
  margin: 0 0 1.25rem;
  max-width: 520px;
}
.device-identify h2 { margin: 0 0 8px; font-size: 15px; }
.device-identify .form-grid { margin: 0; max-width: none; }

.history-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.cafe-badge {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--push-bg);
  color: var(--push);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cafe-row td:first-child {
  box-shadow: inset 3px 0 0 var(--push);
}
.cafe-disclaimer {
  margin: 0.5rem 0 1rem;
  padding: 12px 15px;
  border-left: 3px solid var(--plan-line);
  background: var(--plan-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.rank-head { margin: 0 0 8px; }
.rank-picker { margin: 0 0 12px; }
.rank-picker summary {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rank-picker-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}
.rank-picker-list a {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
}
.rank-picker-list a[aria-current="page"] {
  border-color: var(--accent);
  background: #f3e9e2;
  color: var(--ink-strong);
}
.rank-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.rank-legend-item {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-prose);
  font-size: 12.5px;
  color: var(--text);
}
.rank-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.rank-dot.is-avg { background: var(--push); }
.rank-dot.is-fit {
  background: transparent;
  border: 1.5px solid var(--accent-soft);
}
.rank-top-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--push-line);
  border-radius: 12px;
  overflow: hidden;
  color: inherit;
}
.rank-top-card:hover { text-decoration: none; }
.rank-top-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  background: var(--push-bg);
  border-bottom: 1px solid var(--push-line);
}
.rank-top-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--push);
}
.rank-evidence {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
}
.rank-top-body {
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rank-top-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.rank-top-title strong {
  font-family: var(--font-prose);
  font-size: 20px;
  font-weight: 600;
}
.rank-avg {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}
.rank-avg.is-high { color: var(--push); }
.rank-avg.is-mid { color: var(--accent-soft); }
.rank-avg.is-low { color: var(--back); }
.rank-recipe {
  margin: 0;
  font-family: var(--font-num);
  font-size: 12.5px;
  color: var(--text-muted);
}
.rank-why {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--text);
}
.rank-badges { margin: 0; }
.rank-rest-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: inherit;
}
.rank-rest-card:hover { text-decoration: none; background: var(--surface-sunk); }
.rank-rest-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.rank-rest-name {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.rank-rest-name strong { font-size: 14.5px; }
.rank-rest-card .rank-recipe {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-rest-scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.rank-rest-scores .rank-avg { font-size: 17px; margin: 0; }
.rank-empty { max-width: 420px; }
.rank-empty strong { display: block; margin-bottom: 6px; }
.rank-footnote {
  margin: 14px 0 8px;
  font-family: var(--font-prose);
  font-size: 13.5px;
  color: var(--text-faint);
  max-width: 52ch;
}

/* ---------- Add a Device flow + Pantry Gear ---------- */

/* Multi-step flow chrome: dark bar names the way back and which step this is. */
.flow-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 1rem;
  padding: 12px 16px;
  background: var(--ink-strong);
  color: var(--bg);
  border-radius: var(--r-lg);
}
.flow-back {
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
}
.flow-back:hover { color: var(--bg); text-decoration: underline; }
.flow-step {
  color: var(--chrome-muted);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.flow-title {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
}
.flow-page-title { margin-top: 0; }
.identify-source,
.identify-source a {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}
.identify-claims { max-width: 560px; }
.identify-claim {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.identify-claim:not(:has(.identify-keep input:checked)) { opacity: 0.45; }
.identify-claim > legend {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  float: none;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.identify-claim-title { flex: 1; }
.identify-keep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.identify-keep input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
}
.keep-switch {
  width: 46px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.keep-switch::after {
  content: "";
  width: 22px;
  height: 22px;
  margin: 0 3px;
  border-radius: var(--r-pill);
  background: var(--chrome-text);
}
.identify-keep:has(input:checked) .keep-switch {
  background: var(--ink-strong);
  justify-content: flex-end;
}
.identify-keep:has(input:focus-visible) .keep-switch {
  outline: 2px solid var(--coffee-light);
  outline-offset: 2px;
}
.identify-sentence {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.45;
}

.flow-done { text-align: center; padding: 1.5rem 0 0.5rem; }
.flow-done-mark {
  margin: 0 0 0.25rem;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--push);
}

.device-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--surface-sunk);
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pick-chevron {
  margin-left: auto;
  color: var(--border-strong);
  font-family: var(--font-num);
  font-size: 14px;
  flex-shrink: 0;
}
.pick-model { align-items: center; gap: 0.6rem; }
/* flex:1 so the confidence tag and chevron sit at the right edge rather than
   floating wherever the label happens to end. */
.pick-model-text { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; }
.pick-model-label { font-weight: 600; }
.confidence-tag {
  align-self: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--push-bg);
  color: var(--push);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.device-note {
  margin: 0.5rem 0 1rem;
  padding: 12px 15px;
  border-left: 3px solid var(--plan-line);
  background: var(--plan-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 0.9rem;
}

/* The tri-state capability control. Radios styled as a segmented control —
   never a select, per DESIGN_SYSTEM.md. */
.tristate {
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.tristate legend { padding: 0 0.3rem; font-weight: 600; font-size: 0.9rem; }
.tristate-because { margin: 0 0 0.5rem; color: var(--coffee-light); font-size: 0.85rem; }
.tristate-options { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tristate-option {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-family: var(--font-ui);
  cursor: pointer;
}
.tristate-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.tristate-option.is-on,
.tristate-option:has(input:checked) {
  background: var(--coffee);
  border-color: var(--coffee);
  color: var(--bg);
  font-weight: 600;
}
.tristate-option:focus-within { outline: 2px solid var(--coffee-light); outline-offset: 2px; }

/* The literal backend State string, wherever a capability is named. Never a
   synonym — see the handoff's cross-cutting guardrail. */
.cap-state {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: var(--surface-sunk);
  color: var(--coffee-light);
  font-size: 0.72rem;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.cap-state-adjustable { background: var(--push-bg); color: var(--push); }
.cap-state-constrained { background: var(--plan-bg); color: var(--accent-soft); }

.device-settled { margin: 0.5rem 0; }
.settled-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.settled-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}
.settled-label { font-weight: 600; font-size: 0.9rem; }
.settled-detail { flex-basis: 100%; }

.dial-range-inputs { display: flex; align-items: flex-end; gap: 0.6rem; }
.dial-range-to { padding-bottom: 0.6rem; color: var(--coffee-light); }

/* Pantry */
.pantry-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}
.pantry-tab {
  padding: 0.5rem 0.9rem;
  color: var(--coffee-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
}
.pantry-tab.is-on { color: var(--coffee); border-bottom-color: var(--coffee); }
.pantry-meta { margin-left: auto; }

.pantry-head-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 0.5rem;
}
.pantry-head h1 { margin: 0; }
.pantry-head .pantry-tabs { margin-bottom: 1rem; }

.gear-grinder {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.gear-grinder h2 { margin-top: 0; }
.gear-grinder-line { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.4rem; }
.gear-scale {
  font-family: ui-monospace, "Roboto Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--coffee-light);
}

.gear-device {
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.gear-device.is-away { opacity: 0.82; }
.gear-device summary { cursor: pointer; }
.gear-name { font-weight: 600; }
.gear-row-meta { display: block; font-size: 0.82rem; }
.gear-away-heading { margin: 1.5rem 0 0.25rem; }
.gear-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.dial-form { margin: 0.5rem 0; }

.lever-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
}
.lever-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.82rem;
}
/* "This isn't a lever here" — one visual grammar, whether the app assumed it or
   you told it. */
.lever-chip.is-off { background: var(--surface-sunk); color: var(--coffee-light); }
.lever-chip.is-off .lever-chip-label { text-decoration: line-through; }

/* Flavor Wave 1: the guesses, the bag block, and the defect tags. */

/* "What we filled in for you". Computed on read, never stored — so it reads as
   a note about the app's reasoning, not as another field on the form. */
.assumption-card {
  margin: 0 0 1rem;
  padding: 12px 15px;
  border-left: 3px solid var(--plan-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--plan-bg);
}
.assumption-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.assumption-card > .hint { margin: 0.5rem 0 0; }
.assumption-list { list-style: none; margin: 0; padding: 0; }
.assumption {
  padding: 0.35rem 0;
  border-top: 1px solid var(--border);
}
.assumption:first-child { border-top: 0; }
.assumption-value { font-weight: 600; }
.assumption-value::after { content: " — "; font-weight: 400; color: var(--coffee-light); }
.assumption-because { color: var(--coffee-light); }
.assumption .hint { display: block; }
.assumption-summary { margin: 1rem 0; position: relative; z-index: 0; }
.assumption-summary summary { cursor: pointer; font-weight: 600; }
/* Keep the add form on top of the card stack, and clear the phone tab bar
   so Add bean is not sitting under Brew / Pantry. */
details.add-coffee {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bg);
}
details.add-coffee[open] { padding-bottom: 1.25rem; }
@media (max-width: 640px) {
  details.add-coffee[open] { padding-bottom: 5.5rem; }
}
.dash-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 10px 0 0;
  padding: 0 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.dash-add::-webkit-details-marker,
.dash-add::marker { display: none; content: none; }
a.dash-add:hover,
details.add-coffee summary.dash-add:hover {
  text-decoration: none;
  background: var(--surface-sunk);
  color: var(--ink-strong);
}

/* The optional half of the bag. A details block so the required two fields stay
   the whole form for anyone who does not care. */
.bag-more { grid-column: 1 / -1; margin: 0.5rem 0; }
.bag-more summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.bag-checks {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}
.bag-checks legend { font-weight: 600; padding: 0 0.35rem; }
.bag-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.aroma-likes summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }

/* "Anything off?" — same pill grammar as the sensory choices above, but
   checkboxes: a complaint has no neutral value to sit at. */
.defect-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin: 0.25rem 0 0.75rem;
  background: var(--card);
}
.defect-fieldset legend { font-weight: 600; padding: 0 0.35rem; }
.defect-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.defect-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

/* ---------- Visual pass slice 2: history cards, pantry cards, brew strip ---------- */

.history-stack,
.bean-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0 0 1rem;
}
.history-card,
.bean-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.history-card.cafe-row {
  border-color: var(--push-line);
}
.history-card summary {
  display: block;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
}
.history-card.cafe-row summary { background: var(--push-bg); }
.history-card summary::-webkit-details-marker,
.history-card summary::marker {
  display: none;
  content: none;
}
.history-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: 11px 14px;
}
.history-card summary:hover .history-card-head {
  background: color-mix(in srgb, var(--surface-sunk) 55%, transparent);
}
.history-card.cafe-row summary:hover .history-card-head {
  background: color-mix(in srgb, var(--push-line) 28%, transparent);
}
.history-card-title {
  font-family: var(--font-prose);
  font-size: 16px;
  font-weight: 600;
  flex: 1 1 10rem;
}
.history-card-score {
  font-size: 22px;
  font-weight: 600;
  margin-left: auto;
}
.history-card-toggle {
  flex: 0 0 auto;
  width: 1em;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.history-card-toggle::before { content: "▸"; }
.history-card details[open] .history-card-toggle::before { content: "▾"; }
.history-card-when {
  font-size: 11.5px;
  color: var(--text-muted);
  flex-basis: 100%;
}
.history-card-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px solid var(--border);
}
.history-card-body p { margin: 0; }
.history-card-meta { color: var(--text-muted); font-size: 12px; }
.history-filter .btn {
  min-height: 38px;
  border-radius: var(--r-pill);
}

/* Pantry coffee accordion — kill the global `details { margin }` so row
   gaps come only from `.bean-stack` (9px on phone, matching the mock). */
.bean-card > details { margin: 0; }
.bean-card summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.bean-card summary::-webkit-details-marker,
.bean-card summary::marker {
  display: none;
  content: none;
}
.bean-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-3);
  padding: 11px 13px;
  align-items: center;
}
.bean-card summary .scan-row {
  display: flex;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  width: 100%;
  grid-column: 1 / -1;
}
.bean-card summary:hover .bean-card-head {
  background: color-mix(in srgb, var(--surface-sunk) 55%, transparent);
}
.bean-card-head-main,
.bean-card-head-sub {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  grid-column: 1;
}
.bean-card-head-sub { align-items: center; }
.bean-card-title {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bean-card-head .freshness-short {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bean-card-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--border-strong);
  font-size: 14px;
  line-height: 1;
}
.bean-card-toggle::before { content: "›"; }
.bean-card details[open] .bean-card-toggle::before { content: "−"; }
.bean-card details[open] .bean-card-head {
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
}
.bean-card-body {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bean-card-body p { margin: 0; }
.bean-card-meta { font-size: 11px; color: var(--text-faint); }
.bean-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.bean-card-actions form { margin: 0; }
.bean-card-finished { padding: 11px 13px; opacity: 0.95; }
.bean-card-finished h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
}
.bean-facts { margin: 0; }
.bean-facts > div {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  border-bottom: 1px solid var(--surface-sunk);
}
.bean-facts dt {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 62px;
  flex-shrink: 0;
  margin: 0;
}
.bean-facts dd { margin: 0; }
.bean-facts dd.num { font-size: 15px; }
.bean-facts dd.hint { margin-left: auto; font-size: 11px; }

.freshness { display: flex; flex-direction: column; gap: 6px; }
.freshness-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.freshness-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.freshness-when {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}
.freshness-track-mini {
  height: 6px;
  max-width: 130px;
  flex: 1 1 80px;
}
.freshness-track {
  display: block;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  overflow: hidden;
}
.freshness-fill {
  display: block;
  height: 8px;
  border-radius: var(--r-pill);
}
.freshness-note {
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}
.freshness[data-tone="plan"] .freshness-label { color: var(--plan); }
.freshness[data-tone="plan"] .freshness-fill { background: var(--plan); }
.freshness[data-tone="push"] .freshness-label { color: var(--push); }
.freshness[data-tone="push"] .freshness-fill { background: var(--push); }
.freshness[data-tone="soft"] .freshness-label { color: var(--accent-soft); }
.freshness[data-tone="soft"] .freshness-fill { background: var(--accent-soft); }
.freshness[data-tone="back"] .freshness-label { color: var(--back); }
.freshness[data-tone="back"] .freshness-fill { background: var(--back); }
.bean-card[data-tone="plan"] .bean-card-head .freshness-short { color: var(--plan); }
.bean-card[data-tone="plan"] .bean-card-head .freshness-fill { background: var(--plan); }
.bean-card[data-tone="push"] .bean-card-head .freshness-short { color: var(--push); }
.bean-card[data-tone="push"] .bean-card-head .freshness-fill { background: var(--push); }
.bean-card[data-tone="soft"] .bean-card-head .freshness-short { color: var(--accent-soft); }
.bean-card[data-tone="soft"] .bean-card-head .freshness-fill { background: var(--accent-soft); }
.bean-card[data-tone="back"] .bean-card-head .freshness-short { color: var(--back); }
.bean-card[data-tone="back"] .bean-card-head .freshness-fill { background: var(--back); }

.brew-strip {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 14px;
  gap: 10px;
  background: var(--ink-strong);
  color: var(--bg);
  border-radius: var(--r-lg);
}

/* One line, always. "Pour & drawdown · 2 of 2" plus the running total used to
   wrap at 320px, which grew the strip by 16px mid-brew and pushed page content
   back behind it. The clock is the thing that must never move, so the phase
   label is the side that gives. */
.brew-strip .timer-eyebrow-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  /* 4px, not 8: at 320px "Pour & drawdown · 2 of 2" plus the running total
     needs every pixel of the 288px content box. Tracking is 0.06em here for
     the same reason — one step tighter than the 0.08em used elsewhere. */
  gap: var(--s-1);
  width: 100%;
}
.brew-strip .timer-phase {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brew-strip .timer-total {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  color: var(--chrome-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

.brew-strip .timer-heroes-row {
  display: flex;
  width: 100%;
}
.timer-hero-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timer-hero-col.clock-col {
  border-right: 1px solid rgba(253,250,247,0.18);
}
.brew-strip .timer, .brew-strip .timer-target {
  font-family: 'Roboto Mono', monospace;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Scoped, and the two states re-declared with it.
   The unscoped `.timer { color }` this replaces sat later in the file than
   `.timer-done` and `.timer-phase-change` (both single-class, so same
   specificity) and silently beat both: the clock never turned red at the end of
   a brew and never flashed green on a phase change, even though timer.js was
   still toggling the classes.
   Order matters here — done is terminal, so it wins over a phase-change class
   that a click-through was too quick to clear. */
.brew-strip .timer { color: var(--chrome-text); }
.brew-strip .timer-phase-change { color: var(--chrome-push); }
.brew-strip .timer-done { color: var(--chrome-back); }
.brew-strip .timer-target { color: var(--chrome-push); }

.brew-strip .timer-hero-caption {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-muted);
  margin-top: 4px;
}

.brew-strip .timer-progress-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timer-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(253,250,247,0.16);
  width: 100%;
  overflow: hidden;
}
.brew-strip .timer-bar-fill {
  height: 100%;
  background: var(--chrome-push);
  width: 0%;
  transition: width 0.3s linear;
}
.timer-bar-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: var(--chrome-muted);
}

.brew-strip-cue {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.35;
  color: var(--chrome-muted);
}

/* The phase ladder is the wide screen's answer to "one phase at a time". On a
   phone it stays out of the DOM's layout entirely: the strip is pinned chrome
   and every pixel it takes hides recipe. The 960px query below turns it on. */
.timer-ladder { display: none; }

.brew-strip .timer-action-row {
  width: 100%;
}
.brew-strip .timer-action-row .btn {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  /* First tap must count. Without this, iOS can eat it as a possible
     double-tap zoom — the kitchen complaint that Start / Rate "does nothing". */
  touch-action: manipulation;
}
.brew-strip .btn-primary {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink-strong);
}
.brew-strip .btn-secondary {
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
}
.brew-strip .btn:disabled {
  background: var(--border-strong);
  border-color: var(--border-strong);
  color: var(--ink-strong);
  opacity: 0.9;
}

/* Pinned wherever the page is one long scroll — phone AND tablet. This used to
   stop at 640px, which left 641–959px (an iPad in portrait, a tablet in
   split-screen) with the phone's stacked three-step scroll but a strip in
   normal flow: the clock sat ~1000px down a 3300px page and scrolled away the
   moment you looked at a step, mid-pour. Above 959px the desktop stage takes
   over — one step at a time, recipe panel alongside — and a pinned strip is
   neither needed nor wanted there. */
@media (max-width: 959px) {
  .brew-strip {
    position: fixed;
    left: 0;
    right: 0;
    /* Sit directly on the tab bar. Its own padding already carries
       env(safe-area-inset-bottom), so adding the inset again here is what left
       a seam of page background showing between the two bars. */
    bottom: var(--tabbar-h);
    z-index: 45;
    margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  /* The invariant: the scroll container's bottom padding clears both pinned
     bars. Both terms are measured, never guessed — a hardcoded sum is what hid
     page content behind the strip twice (first as 11rem, then as 202px+52px,
     when the strip is really 220px and the tab bar 44px). Guarded by
     tests/test_brew_strip_geometry.py. */
  .has-brew-strip .container {
    padding-bottom: calc(var(--strip-h) + var(--tabbar-h) + var(--s-4));
  }
}

/* There is no tab bar above 640px — the top nav carries navigation there, and
   .tab-bar is display:none. Zeroing the variable is what lets the two rules
   above serve both bands unchanged: the strip still sits on "whatever is
   below it" and the scroll padding is still the sum of the same two terms,
   one of which is now nothing. brew-execute.js measures the hidden bar as 0
   and writes the same value inline, so JS and CSS agree either way. */
@media (min-width: 641px) {
  :root { --tabbar-h: 0px; }
}

/* iPad portrait / tablet split-screen: no tab bar, so the pinned strip
   sat on the home indicator. Taps on Start brewing landed in the system
   gesture zone and iPadOS ate them — the button looked dead. This padding
   is the safe-area, not decoration. Phone is unchanged: the tab bar
   already carries the inset, and adding it here too would double-count. */
@media (min-width: 641px) and (max-width: 959px) {
  .brew-strip {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- 2026-08-19 desktop + Pantry/History clothes ---- */
body.is-wide .container { max-width: 1180px; }
.desk-only { display: none !important; }
.scan-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 58px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.scan-row:hover { border-color: var(--border-strong); }
.scan-row.is-on {
  background: var(--surface-sunk);
  border-color: var(--ink-strong);
}
.scan-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--border-strong);
}
.scan-dot[data-tone="plan"] { background: var(--plan); }
.scan-dot[data-tone="push"] { background: var(--push); }
.scan-dot[data-tone="soft"] { background: var(--accent-soft); }
.scan-dot[data-tone="back"] { background: var(--back); }
.scan-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.scan-name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-sub {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.scan-score-n {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.scan-score-n[data-tone="high"] { color: var(--push); }
.scan-score-n[data-tone="mid"] { color: var(--accent-soft); }
.scan-score-n[data-tone="low"] { color: var(--back); }
.scan-day {
  font-family: var(--font-num);
  font-size: 10px;
  color: #a8968b;
}
.bean-detail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.bean-detail-head h2 {
  font-family: var(--font-prose);
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fact-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fact-tile dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fact-tile dd { margin: 0; }
.fact-tile .num { font-size: 18px; }

.freshness-timeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.freshness-zones {
  display: flex;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
}
.freshness-zone { display: block; height: 9px; }
.freshness-zone[data-tone="plan"] { background: var(--plan); }
.freshness-zone[data-tone="push"] { background: var(--push); }
.freshness-zone[data-tone="soft"] { background: var(--accent-soft); }
.freshness-zone[data-tone="back"] { background: var(--back); }
.freshness-marker-wrap { position: relative; padding-top: 4px; }
.freshness-fill.freshness-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 13px;
  background: var(--text);
  border-radius: 0;
}

.best-card {
  border: 1px solid var(--push-line);
  background: var(--push-bg);
  border-radius: 11px;
  padding: 16px 18px;
}
.best-card .eyebrow { color: var(--push); }
.best-card p {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f4a37;
}
.best-card.is-waiting {
  border: 0;
  border-left: 3px solid var(--accent-soft);
  background: #f6efe6;
  border-radius: 0 8px 8px 0;
}
.best-card.is-waiting p {
  font-size: 16px;
  font-weight: 400;
  color: #5c4a40;
}

.score-bars {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.score-bar-row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.score-bar-label {
  font-family: var(--font-num);
  font-size: 13.5px;
  color: #4a352d;
  flex: 1;
  min-width: 0;
}
.score-bar-track {
  width: 140px;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
  flex-shrink: 0;
}
.score-bar-fill {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-soft);
}
.score-bar-fill[data-tone="high"] { background: var(--push); }
.score-bar-fill[data-tone="mid"] { background: var(--accent-soft); }
.score-bar-fill[data-tone="low"] { background: var(--back); }
.score-bar-n {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}
.score-bar-n[data-tone="high"] { color: var(--push); }
.score-bar-n[data-tone="mid"] { color: var(--accent-soft); }
.score-bar-n[data-tone="low"] { color: var(--back); }

.dial-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dial-stepper input { width: 5.5rem; }
.dial-step {
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 8px;
}

.pairing-list {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.pairing-row { border-bottom: 1px solid #f0e6dc; }
.pairing-row:last-child { border-bottom: 0; }
.pairing-row.is-newest > summary .pairing-head { background: var(--bg); }
.pairing-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
}
.pairing-row summary { cursor: pointer; list-style: none; }
.pairing-row summary::-webkit-details-marker,
.pairing-row summary::marker { display: none; }
.pairing-score {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  width: 32px;
  flex-shrink: 0;
}
.pairing-score[data-tone="high"] { color: var(--push); }
.pairing-score[data-tone="mid"] { color: var(--accent-soft); }
.pairing-score[data-tone="low"] { color: var(--back); }
.pairing-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.pairing-when {
  font-family: var(--font-num);
  font-size: 11px;
  color: #a8968b;
  width: 72px;
  text-align: right;
  flex-shrink: 0;
}
.pairing-chevron { color: var(--border-strong); flex-shrink: 0; }
.pairing-row details[open] .pairing-chevron { transform: rotate(90deg); }
.pairing-extra {
  padding: 2px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.standout-chip {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #6b5249;
  margin: 0 6px 0 0;
}

.history-closed-read {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-muted);
}
.next-callout {
  border-left: 3px solid var(--plan-line);
  background: var(--plan-bg);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}
.next-callout .eyebrow { color: var(--plan); }
.next-callout strong {
  display: block;
  font-family: var(--font-num);
  font-size: 18px;
  color: var(--plan);
  margin: 0.2rem 0;
}

.brew-rail {
  display: none;
  gap: 6px;
  margin: 0 0 18px;
}
.brew-rail button,
.brew-rail span {
  font-family: var(--font-ui);
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: #4a352d;
  display: inline-flex;
  align-items: center;
}
.brew-rail button { cursor: pointer; }
.brew-rail span { cursor: default; }
.brew-rail button.is-on,
.brew-rail span.is-on {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 600;
}
.recipe-summary {
  font-family: var(--font-num);
  font-size: 13px;
}
.brew-hurry {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.brew-hurry-num {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--chrome-highlight);
}
.brew-choice-row {
  display: flex;
  gap: 9px;
  margin: 8px 0 4px;
}
.brew-choice,
.brew-cafe-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 13px;
  min-height: 74px;
}
.brew-choice:hover,
.brew-cafe-tile:hover { text-decoration: none; background: var(--surface-sunk); }
.brew-choice-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-strong);
}
.brew-choice-blurb {
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-muted);
}
.brew-choice-count {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.brew-cafe-block {
  margin-top: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.brew-cafe-tile {
  min-height: 82px;
  border-color: var(--accent);
  background: #f3e9e2;
  margin-bottom: 8px;
}
.execute-context { display: none; }
.brew-begin-row { display: none; }
.prefs-cols { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 960px) {
  body.is-wide .container {
    max-width: none;
    padding: 16px 24px 28px;
  }
  .desk-only { display: block !important; }
  .phone-only { display: none !important; }
  .split {
    display: flex;
    min-height: calc(100vh - 110px);
    margin: 0 -24px;
  }
  .split-list {
    width: 420px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 4px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .split.is-history .split-list { width: 460px; }
  .split-detail {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 4px 32px 28px;
  }
  .split-detail-inner {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .score-bar-track { width: 200px; }

  .prefs-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  .prefs-cols .prefs-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .prefs-cols .form-grid { max-width: none; }

  .execute-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
  }
  .recipe-panel {
    width: 432px;
    flex-shrink: 0;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
  .execute-stage { flex: 1; min-width: 0; }
  .execute-stage .form-grid { max-width: none; }
  .brew-rail { display: flex; flex-wrap: wrap; }
  .brew-step { display: none; }
  .brew-step.is-on { display: block; }
  .brew-begin-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    /* Same iPad home-indicator problem as the tablet strip, for when Prep
       is short enough that Start brewing sits on the bottom edge. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .brew-begin-row .btn {
    touch-action: manipulation;
  }
  .has-brew-strip .brew-strip {
    position: static;
    margin-top: 0;
    /* On a phone the strip is pinned chrome over a scrolling page, so it is
       squeezed on purpose. Here it is the whole stage: the recipe panel is
       permanently beside it and the brew step has nothing else on it. So it
       is a card — a 120px clock, the water target beside it, an action button
       with a real size, and the whole pour plan as a ladder underneath.
       docs/mobile-brew-redesign/handoff/06-desktop-brew-stage.md §2.

       The action is on its own row, never the clock's, and that is load
       bearing. It used to share a row as `eyebrow heroes action`, where the
       third column collapsed to its `minmax(0, 1fr)` floor (59px at 1280px)
       while the button is `width: auto; white-space: nowrap`. The button
       overflowed the column, and being opaque and later in the DOM it painted
       over the water target: measured with elementFromPoint at 1280×900,
       100% of #timer-target covered during the bloom ("Bloom's done — start
       the pour", 232px) and 63% during the pour. Keeping the clock and the
       target on a row of their own is the invariant; the width the card now
       has does not change that, because the button is still nowrap.
       Guarded by tests/test_brew_strip_geometry.py.

       Container-query units below size the clock against the card, not the
       viewport: the stage is 452px wide at 960px and 772px at 1280px, and a
       120px clock is 288px of glyphs. */
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "heroes heroes"
      "progress progress"
      "action cue";
    align-items: start;
    column-gap: var(--s-5);
    row-gap: 24px;
    padding: var(--s-6);
  }
  .has-brew-strip .brew-strip .timer-eyebrow-row { grid-area: eyebrow; }
  .has-brew-strip .brew-strip .timer-phase { letter-spacing: 0.1em; }
  .has-brew-strip .brew-strip .timer-total { font-size: 13px; }
  .has-brew-strip .brew-strip .timer-heroes-row {
    grid-area: heroes;
    /* Fractional, not fixed: the clock takes the larger share and the divider
       is the clock column's own right border, so the pair narrows together. */
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    width: 100%;
  }
  .has-brew-strip .brew-strip .timer-hero-col {
    align-items: flex-start;
    min-width: 0;
  }
  .has-brew-strip .brew-strip .clock-col { padding-right: var(--s-6); }
  .has-brew-strip .brew-strip .target-col { padding-left: var(--s-6); }
  /* Both are extensions of the documented Timer 52/500 step: same family,
     weight and tabular numerals, only bigger. The first declaration is the
     fallback for a browser without container units. */
  .has-brew-strip .brew-strip .timer {
    font-size: 88px;
    font-size: clamp(64px, calc(19cqw - 10px), 120px);
    line-height: 0.92;
    letter-spacing: -0.02em;
  }
  .has-brew-strip .brew-strip .timer-target {
    font-size: 52px;
    font-size: clamp(36px, 9.5cqw, 68px);
    line-height: 0.92;
  }
  .has-brew-strip .brew-strip .timer-hero-caption {
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-top: 12px;
  }
  .has-brew-strip .brew-strip .timer-progress-row { grid-area: progress; gap: 6px; }
  .has-brew-strip .brew-strip .timer-bar-track { height: 8px; }
  .has-brew-strip .brew-strip .timer-bar-labels { font-size: 12px; }
  .has-brew-strip .brew-strip-cue {
    grid-area: cue;
    align-self: center;
    font-size: 15px;
    line-height: 1.4;
  }
  .has-brew-strip .brew-strip .timer-action-row {
    grid-area: action;
    width: auto;
    display: flex;
    align-items: center;
  }
  .has-brew-strip .brew-strip .timer-action-row .btn {
    width: auto;
    /* Wide enough for the longest phase label with room, so the label never
       decides the button's size mid-brew and the card does not shift when the
       bloom ends. Still nowrap: see the note on the grid above. */
    min-width: 300px;
    min-height: 56px;
    white-space: nowrap;
    padding-left: var(--s-6);
    padding-right: var(--s-6);
    font-size: 17px;
    font-weight: 600;
  }

  /* The ladder and its divider are one element, so a single-phase brew that
     does not render it does not render a stray rule either. */
  .has-brew-strip .brew-strip .timer-ladder {
    /* Auto-placed under the named rows rather than given a row of its own in
       grid-template-areas: an empty named row still costs its row-gap, and a
       single-phase brew has no ladder to fill it. */
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-4);
    margin: 0;
    padding: var(--s-5) 0 0;
    list-style: none;
    border-top: 1px solid rgba(253, 250, 247, 0.18);
  }
  .timer-rung {
    border-left: 2px solid rgba(253, 250, 247, 0.18);
    padding: 2px 0 2px 14px;
    min-width: 0;
  }
  .timer-rung-name,
  .timer-rung-meta { display: block; }
  .timer-rung-name {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--chrome-muted);
  }
  .timer-rung-meta {
    margin-top: 5px;
    font-family: var(--font-num);
    font-size: 13px;
    color: var(--chrome-muted);
  }
  .timer-rung.is-current { border-left-color: var(--chrome-push); }
  .timer-rung.is-current .timer-rung-name { color: var(--chrome-text); }
  .timer-rung.is-done { opacity: 0.55; }
  .timer-rung.is-done .timer-rung-name::after { content: " ¹3"; }

  .has-brew-strip .container { padding-bottom: 28px; }
}

@media (min-width: 1200px) {
  .execute-layout.has-context .execute-context {
    display: block;
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 12px;
  }
  /* Dial history, last-brew scores and open tweaks are planning content:
     nobody reads their grind history with a kettle in one hand. They stay on
     Prep, Rate and Learn; on the brew step the stage takes the width back
     (484 -> 772px at 1280). Scoped to the strip's own page, so the modes with
     no timer keep the column. The rail swaps `is-on` client-side, which is
     why this is :has() and not a class the server could have set. */
  .has-brew-strip .execute-layout.has-context:has(.brew-step[data-step="brew"].is-on) .execute-context {
    display: none;
  }
}

/* Below 1200px the stage is 452–691px and a 300px button leaves the cue a
   column too narrow to read (76px at 960px), so the cue goes under it. Height
   is free on this screen; width is not. */
@media (min-width: 960px) and (max-width: 1199px) {
  .has-brew-strip .brew-strip {
    grid-template-areas:
      "eyebrow eyebrow"
      "heroes heroes"
      "progress progress"
      "action action"
      "cue cue";
  }
}

/* ---- 2026-08-20 mobile Pantry rebuild ---- */
.list-sticky {
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  padding: 8px 2px 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scan-row { gap: 10px; padding: 12px 13px; }
.scan-name { font-size: 15px; }
.scan-roaster {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-crown {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 400 !important;
  color: #4a352d;
}
.scan-crown-mark {
  font-weight: 400 !important;
  color: var(--plan);
}
details summary .scan-crown,
details summary .scan-crown-mark {
  font-weight: 400 !important;
  color: inherit;
}
details summary .scan-crown { color: #4a352d; }
details summary .scan-crown-mark { color: var(--plan); }
.scan-pill {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface-sunk);
}
/* Match Mobile Pantry.dc.html day-pill freshness colors */
.scan-pill[data-kind="in"],
details summary .scan-pill[data-kind="in"] {
  color: var(--push) !important;
  background: var(--push-bg) !important;
  border-color: var(--push-line) !important;
}
.scan-pill[data-kind="near"],
details summary .scan-pill[data-kind="near"] {
  color: var(--plan) !important;
  background: var(--plan-bg) !important;
  border-color: var(--plan-line) !important;
}
.scan-pill[data-kind="past"],
details summary .scan-pill[data-kind="past"] {
  color: var(--text-muted) !important;
  background: var(--surface-sunk) !important;
  border-color: var(--border) !important;
}
.scan-score { width: 32px; }
.scan-score-n { font-size: 21px; font-weight: 600; }
.scan-score-n[data-tone="high"] { color: var(--push); }
.scan-score-n:not([data-tone="high"]) { color: var(--text-muted); }
.scan-count { font-family: var(--font-num); font-size: 10px; color: #a8968b; }
.scan-log-one {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: #a8968b;
}
.scan-row.is-away { opacity: 0.78; }
.dash-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px dashed #b09a8c;
  background: #f6efe6;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
}
.dash-prompt strong { display: block; font-family: var(--font-ui); }
.best-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.dial-card {
  background: var(--push-bg);
  border: 1px solid var(--push-line);
  border-radius: 10px;
  padding: 14px;
}
.dial-card .dial-stepper input {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 600;
  color: #1f4a37;
  width: 4.5rem;
  text-align: right;
}
.caps-fold {
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  border-radius: 9px;
}
.caps-fold summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.caps-fold summary::-webkit-details-marker,
.caps-fold summary::marker { display: none; }
.caps-fold .lever-chips { padding: 0 12px 12px; }
.archive-block {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.archive-btn {
  width: 100%;
  color: var(--back);
  background: var(--back-bg);
  border: 1px solid var(--back-line);
}
.archived-group { margin-top: 16px; }
.archived-group summary {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.bag-price-weight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-actions.two-exits {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.varietal-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink-strong);
  color: var(--bg);
  border: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
.name-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.name-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: #4a352d;
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
}
.name-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.name-chip:has(input:checked) {
  background: var(--ink-strong);
  color: var(--chrome-text);
  border-color: var(--ink-strong);
  font-weight: 600;
}

/* Add-coffee / bean-details segmented controls (mock clothes) */
.seg-field,
.seg-field {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}
.seg-field legend,
.seg-field legend {
  padding: 0;
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.seg-field .tristate,
.seg-field .tristate,
.form-grid .tristate,
.form-grid .tristate {
  display: flex !important;
  gap: 7px;
  width: 100%;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
}
.seg-field .tristate-option,
.seg-field .tristate-option,
.form-grid .tristate-option,
.form-grid .tristate-option,
.form-grid .name-chip,
.form-grid .name-chip {
  position: relative;
  display: inline-flex !important;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  flex-direction: row !important;
  min-height: 48px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: #4a352d;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  gap: 0;
}
.seg-field .tristate-option input,
.seg-field .tristate-option input,
.form-grid .tristate-option input,
.form-grid .tristate-option input,
.form-grid .name-chip input,
.form-grid .name-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.seg-field .tristate-option:has(input:checked),
.seg-field .tristate-option:has(input:checked),
.form-grid .tristate-option:has(input:checked),
.form-grid .tristate-option:has(input:checked),
.form-grid .name-chip:has(input:checked),
.form-grid .name-chip:has(input:checked) {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 600;
}
.form-grid .name-chips,
.form-grid .name-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.form-grid .name-chips .name-chip,
.form-grid .name-chips .name-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 15px;
}
.form-grid .bag-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
}
body.is-flow .form-grid,
body.is-flow .form-grid > label,
body.is-flow .form-grid input,
body.is-flow .form-grid select {
  font-family: var(--font-ui);
}
body.is-flow .form-grid > label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Hints under field names stay sentence case (mock: Source Serif, not shouting) */
body.is-flow .form-grid > label .hint {
  display: block;
  margin: 4px 0 0;
  font-family: var(--font-prose);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  line-height: 1.4;
}
body.is-flow .form-grid > label input,
body.is-flow .form-grid > label select {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
body.is-flow .lede {
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.45;
  color: #4a352d;
}
/* Segment buttons must not inherit the field-label uppercase column layout */
.form-grid .seg-option,
body.is-flow .form-grid .seg-option {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: #4a352d !important;
  font-family: var(--font-ui);
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.form-grid .seg-option-pill,
body.is-flow .form-grid .seg-option-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 15px;
}
.form-grid .seg-option input,
body.is-flow .form-grid .seg-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  text-transform: none;
}
.form-grid .seg-option:has(input:checked),
body.is-flow .form-grid .seg-option:has(input:checked) {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--chrome-text) !important;
  font-weight: 600 !important;
}
.varietal-picker {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.varietal-picker legend {
  padding: 0;
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.varietal-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}
.varietal-selected:empty { display: none; }
.varietal-options { max-height: 220px; overflow-y: auto; }

/* Segmented option rows used by Add coffee / Bean details */
.seg-options {
  display: flex;
  gap: 7px;
  width: 100%;
  flex-wrap: nowrap;
}
.seg-options-wrap { flex-wrap: wrap; }
.seg-option {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: #4a352d;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.seg-option-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 15px;
}
.seg-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.seg-option:has(input:checked) {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--chrome-text);
  font-weight: 600;
}
.form-grid .seg-option {
  flex-direction: row;
}
.bag-price-weight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ---- 2026-08-22 mobile Pantry clothes vs Mobile Pantry.dc.html ---- */
@media (max-width: 640px) {
  body.is-pantry .container {
    padding-top: 0;
  }

  .pantry-head {
    margin: 0 -1rem 0.75rem;
    padding: 11px 16px 0;
    background: var(--ink-strong);
  }
  .pantry-head-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 9px;
  }
  .pantry-head h1 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--chrome-text);
  }
  .pantry-head .pantry-meta {
    margin-left: auto;
    font-family: var(--font-num);
    font-size: 11px;
    color: var(--chrome-muted);
  }
  .pantry-head .pantry-tabs {
    margin: 0;
    border-bottom: 0;
    gap: 4px;
  }
  .pantry-head .pantry-tab {
    padding: 8px 16px 9px;
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
    color: var(--chrome-muted);
    font-size: 13px;
    font-weight: 500;
  }
  .pantry-head .pantry-tab.is-on {
    background: var(--bg);
    color: var(--ink-strong);
    font-weight: 700;
  }

  .bean-stack {
    gap: 9px;
    margin-bottom: 0;
  }
  /* Mock: add button sits in the same 9px column, +2px breathing room */
  .bean-stack + p {
    margin: 11px 0 0;
  }
  .bean-stack + p .dash-add {
    margin-top: 0;
  }

  .list-sticky {
    padding: 11px 1px 7px;
  }

  /* Mock coffee rows have no chevron — score column stays clean */
  .bean-card .bean-card-toggle { display: none; }

  .bean-card .bean-detail-head { display: none; }

  .bean-card details[open] > summary .bean-card-head {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
  }
  .bean-card details[open] .bean-card-body {
    border: 1px solid var(--border-strong);
    border-top: 0;
    border-radius: 0 0 11px 11px;
    background: var(--surface);
  }
  .bean-card details[open] {
    border: 0;
    background: transparent;
  }
  .bean-card details[open] .bean-card-toggle::before { content: "−"; }

  .bean-facts.fact-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .bean-facts .fact-tile {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid #f0e6dc;
  }
  .bean-facts .fact-tile:last-child { border-bottom: 0; }
  .bean-facts .fact-tile dt { width: 66px; }
  .bean-facts .fact-tile dd.num { font-size: 15px; }
  .bean-facts .fact-tile dd.hint {
    margin-left: auto;
    font-size: 11px;
  }

  .bean-card-body .score-bars,
  .gear-device .score-bars {
    padding: 0;
    border: 0;
    background: transparent;
    gap: 8px;
  }
  .bean-card-body .score-bar-track,
  .gear-device .score-bar-track {
    flex: 1;
    width: auto;
    height: 6px;
  }
  .bean-card-body .score-bar-label,
  .gear-device .score-bar-label {
    width: 88px;
    flex: 0 0 88px;
    font-size: 12.5px;
  }
  .bean-card-body .score-bar-n,
  .gear-device .score-bar-n {
    width: 26px;
    font-size: 13px;
  }

  .best-card {
    padding: 14px 15px;
    border-radius: 10px;
  }
  .best-card p {
    font-size: 18px;
  }

  .had-before {
    margin-top: 4px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
  }
  .had-before-head {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 9px;
  }
  .had-before-title {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .had-before-sub {
    font-family: var(--font-ui);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .had-before-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    margin-bottom: 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }
  .had-before-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .had-before-name {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .had-before-name > span:first-child {
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .had-before-score {
    font-size: 13px;
    font-weight: 600;
  }
  .had-before-score[data-tone="high"] { color: var(--push); }
  .had-before-meta {
    font-size: 11px;
    color: var(--text-faint);
  }
  .had-before-btn {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--surface);
    color: var(--ink-strong);
    font-size: 13.5px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .had-before-row form { margin: 0; }

  .gear-phone-list { display: flex; flex-direction: column; gap: 9px; }
  .gear-grinder-card {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    overflow: hidden;
    background: var(--surface);
  }
  .gear-grinder-band {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .gear-grinder-band-note {
    margin-left: auto;
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-faint);
  }
  .gear-grinder-card .gear-grinder-line {
    margin: 0;
    padding: 12px 14px;
  }
  .gear-grinder-card .gear-grinder-line strong {
    font-family: var(--font-prose);
    font-size: 19px;
    font-weight: 600;
  }
  .gear-grinder-card .hint { padding: 0 14px 10px; }
  .grinder-pick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
  }
  .grinder-pick-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-size: 14px;
  }
  .grinder-pick-list li:first-child { border-top: 0; }
  .grinder-pick-list form { margin: 0; }

  .gear-away-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin: 15px 2px 0;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .gear-away-head form { margin-left: auto; }
  .gear-here-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--accent);
    background: var(--surface);
    color: var(--ink-strong);
    font-size: 12px;
    font-weight: 600;
  }

  .gear-device {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .gear-device summary { list-style: none; }
  .gear-device summary .scan-row {
    margin-bottom: 0;
    min-height: 58px;
    padding: 11px 13px;
  }
  .gear-device.is-away summary .scan-row { opacity: 0.78; }
  /* `.gear-device` IS the <details> — do not nest another details[open] selector */
  .gear-device[open] > summary .scan-row {
    border-radius: 10px 10px 0 0;
    border-color: var(--border-strong);
    background: var(--surface-sunk);
    border-bottom: 1px solid #f0e6dc;
  }
  .gear-device[open] .split-detail-inner {
    border: 1px solid var(--border-strong);
    border-top: 0;
    border-radius: 0 0 11px 11px;
    padding: 13px 14px;
    background: var(--surface);
  }
  .gear-device .split-detail-inner > h2 { display: none; }

  .dial-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
  }
  .dial-card-copy { flex: 1; min-width: 0; }
  .dial-card-copy .dial-card-name,
  .dial-card-copy .eyebrow {
    margin: 0;
  }
  /* Mock shows a big dial number — hide −/+ so an empty field never reads as "-e.g+" */
  .dial-card .dial-stepper {
    margin-left: auto;
    gap: 0;
  }
  .dial-card .dial-step {
    display: none;
  }
  .dial-card .dial-stepper input {
    width: 4.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: right;
    font-family: var(--font-num);
    font-size: 32px;
    font-weight: 600;
    color: #1f4a37;
  }
  .dial-card .dial-stepper input::placeholder {
    color: #a8968b;
    font-weight: 400;
    font-size: 28px;
  }
  .dial-card > .hint {
    flex-basis: 100%;
    margin: 0;
  }
  .dial-card > .btn[type="submit"] {
    flex-basis: 100%;
    min-height: 38px;
    font-size: 13px;
  }

  .caps-fold summary span:first-child {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Match mock: primary grows; Edit / Finished stay compact so three fit at ~427px */
  .pantry-actions,
  .bean-card-actions,
  .gear-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }
  .pantry-actions .btn-primary,
  .bean-card-actions .btn-primary,
  .gear-actions .btn-primary {
    flex: 1 1 130px;
    min-height: 46px;
  }
  .pantry-actions .btn:not(.btn-primary),
  .bean-card-actions .btn:not(.btn-primary),
  .gear-actions .btn:not(.btn-primary) {
    flex: 0 1 auto;
    min-height: 46px;
    padding: 0 14px;
  }
  .pantry-actions form,
  .bean-card-actions form,
  .gear-actions form {
    margin: 0;
    flex: 0 1 auto;
  }
  .pantry-actions form .btn,
  .bean-card-actions form .btn,
  .gear-actions form .btn {
    width: 100%;
    min-height: 46px;
  }
  /* Mock open-device row is Brew + Edit; put “Not here” on its own full-width line */
  .gear-device .gear-actions form {
    flex: 1 1 100%;
  }

  body.is-flow .flow-bar {
    margin: 0 -1rem 0;
    border-radius: 0;
    padding: 13px 16px;
  }
  .gear-device .fact-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .gear-device .fact-grid .fact-tile {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid #f0e6dc;
  }
  .gear-device .fact-grid .fact-tile dt { width: 66px; margin: 0; }
  .gear-device .fact-grid .fact-tile dd { margin: 0; font-size: 15px; }
  .gear-device .fact-grid .fact-tile dd.hint {
    margin-left: auto;
    font-size: 11px;
  }

  .bean-card {
    border: 0;
    background: transparent;
  }
  .bean-card > details > summary .scan-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px 13px;
  }

  body.is-flow .flow-back {
    font-family: var(--font-num);
    font-size: 16px;
    line-height: 1;
    min-width: 1em;
    text-decoration: none;
  }
  body.is-flow .container > h1,
  body.is-flow .flow-page-title { display: none; }
  body.is-flow .container {
    padding-bottom: calc(5.5rem + 78px);
  }
  body.is-flow .form-actions.two-exits,
  body.is-flow .form-actions:has(.btn-primary:only-child) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    gap: 9px;
    margin: 0;
    padding: 14px 16px 18px;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  body.is-flow .form-actions.two-exits .btn,
  body.is-flow .form-actions:has(.btn-primary:only-child) .btn {
    flex: 1;
    min-height: 50px;
    font-size: 15px;
    font-weight: 600;
  }
  body.is-flow .lede {
    font-size: 15px;
    line-height: 1.45;
  }
}

/* ================================================================
   Welcome / first-run flow (Phase B)
   ================================================================ */

/* Remove container padding on the welcome page so columns fill the viewport */
.welcome-page .container { max-width: none; padding: 0; }

.welcome-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px);
}

.welcome-pitch--hidden-mobile { display: none; }
.welcome-gate--hidden-mobile  { display: none; }

@media (min-width: 1180px) {
  .welcome-shell {
    flex-direction: row;
    min-height: calc(100vh - 58px);
  }
  .welcome-pitch {
    width: 700px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 30px 44px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .welcome-gate-col {
    flex: 1;
    overflow: hidden;
    padding: 34px 44px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .welcome-pitch--hidden-mobile,
  .welcome-gate--hidden-mobile {
    display: flex;
  }
  .welcome-pitch--hidden-mobile { flex-direction: column; }
}

.welcome-pitch { padding: 20px 20px 160px; }
.welcome-gate-col { padding: 16px 16px 20px; overflow-y: auto; }

/* ---- Pitch panel ---- */

.pitch-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.pitch-headline {
  font-family: "Source Serif 4", serif;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
@media (min-width: 1180px) {
  .pitch-headline { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; }
}

.pitch-lede {
  font-family: "Source Serif 4", serif;
  font-size: 17px;
  line-height: 1.5;
  color: #4A352D;
  margin: 0;
}

.pitch-beats { display: flex; flex-direction: column; gap: 10px; }

.pitch-beat { display: flex; gap: 12px; align-items: flex-start; }

.pitch-beat-num {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--chrome-text);
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pitch-beat-title {
  font-family: Archivo, sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
}

.pitch-beat-body {
  font-family: "Source Serif 4", serif;
  font-size: 14.5px;
  line-height: 1.4;
  color: #6B5249;
  margin: 0;
}

.pitch-cafe-desktop {
  display: none;
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1180px) {
  .pitch-cafe-desktop { display: flex; }
}

.pitch-cafe-card {
  display: block;
  min-height: 56px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: #F3E9E2;
  padding: 14px 16px;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pitch-cafe-card { transition: background 120ms ease; }
}
.pitch-cafe-card:hover { background: #EADDD2; }

.pitch-cafe-title {
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.pitch-cafe-body {
  font-family: "Source Serif 4", serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0;
}

.pitch-footer-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  z-index: 50;
}
@media (min-width: 1180px) {
  .pitch-footer-mobile { display: none; }
}

.pitch-footer-note {
  font-family: "Source Serif 4", serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-faint);
  text-align: center;
  margin: 0;
}

.pitch-cafe-btn {
  min-height: 46px;
  border-radius: 9px;
  border: 1px solid #DCC9BC;
  background: #F3E9E2;
  color: var(--text);
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 16px;
}

/* ---- Gate panel ---- */

.gate-inner { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1180px) {
  .gate-inner { overflow: hidden; height: 100%; }
}
.gate-inner > * { flex-shrink: 0; }

.gate-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.gate-heading {
  font-family: "Source Serif 4", serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
@media (min-width: 1180px) {
  .gate-heading { font-size: 27px; }
}

.gate-progress {
  font-family: "Roboto Mono", monospace;
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gate-intro {
  font-family: "Source Serif 4", serif;
  font-size: 15.5px;
  line-height: 1.45;
  color: #4A352D;
  margin: 0;
}
@media (min-width: 1180px) {
  .gate-intro { font-size: 16.5px; line-height: 1.5; max-width: 46ch; }
}

.gate-cafe-oneliner {
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid #DCC9BC;
  background: #F3E9E2;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  align-self: flex-start;
}

.gate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 1180px) {
  .gate-card { flex: 1; min-height: 0; overflow-y: auto; }
}

.gate-step {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gate-step-divider { height: 1px; background: var(--border); }

.gate-step-header { display: flex; gap: 12px; align-items: flex-start; }

.gate-step-num {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--chrome-text);
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
@media (min-width: 1180px) {
  .gate-step-num { width: 28px; height: 28px; font-size: 13px; }
}

.gate-step-title { font-family: Archivo, sans-serif; font-size: 14.5px; font-weight: 600; margin: 0 0 2px; }
@media (min-width: 1180px) { .gate-step-title { font-size: 15.5px; } }

.gate-step-sub { font-family: "Source Serif 4", serif; font-size: 13.5px; color: var(--text-muted); margin: 0; }

.gate-field { display: flex; flex-direction: column; gap: 6px; }
.gate-field-label { display: block; margin-bottom: 4px; }

.gate-text-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  font-family: "Source Serif 4", serif;
  font-size: 16px;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.gate-text-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.gate-roast-group { display: flex; flex-direction: column; gap: 6px; }
.gate-roast-pills { display: flex; gap: 6px; }

.gate-roast-pill { flex: 1; cursor: pointer; }
.gate-roast-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.gate-roast-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-family: Archivo, sans-serif;
  font-size: 14px;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .gate-roast-pill span { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
}
.gate-roast-pill:has(input:checked) span {
  background: var(--ink-strong);
  color: var(--chrome-text);
  border-color: var(--ink-strong);
}

.gate-hint { font-family: "Source Serif 4", serif; font-size: 13px; color: var(--text-faint); margin: 0; }

.gate-commit-btn {
  align-self: flex-start;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  cursor: pointer;
}

.gate-device-chips { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1180px) { .gate-device-chips { gap: 11px; } }

.gate-device-family { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1180px) { .gate-device-family { flex-direction: row; gap: 10px; align-items: flex-start; } }

.gate-family-label { margin: 0; color: var(--text-muted); }
@media (min-width: 1180px) {
  .gate-family-label { min-width: 82px; padding: 14px 10px 0 0; white-space: nowrap; }
}

.gate-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1180px) { .gate-chip-row { gap: 7px; } }

.gate-chip { cursor: pointer; display: inline-flex; }
.gate-chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.gate-chip-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-family: Archivo, sans-serif;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .gate-chip-label { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
}
@media (min-width: 1180px) {
  .gate-chip-label { padding: 0 15px; font-size: 13.5px; }
}
.gate-chip:has(input:checked) .gate-chip-label {
  background: var(--ink-strong);
  color: var(--chrome-text);
  border-color: var(--ink-strong);
}

.gate-chip-mono {
  font-family: "Roboto Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #A8968B;
}
.gate-chip:has(input:checked) .gate-chip-mono { color: var(--chrome-highlight); }

.desktop-only { display: none; }
@media (min-width: 1180px) { .desktop-only { display: inline; } }

.gate-device-note { font-family: "Source Serif 4", serif; font-size: 13px; color: var(--text-faint); margin: 0; }

.gate-grinder-callout {
  margin: var(--s-4) 0 0;
}
.gate-grinder-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.gate-grinder-pill { cursor: pointer; }
.gate-grinder-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.gate-grinder-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-family: Archivo, sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.gate-grinder-pill:has(input:checked) span {
  background: var(--ink-strong);
  color: var(--chrome-text);
  border-color: var(--ink-strong);
}

.gate-primary-row { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1180px) { .gate-primary-row { flex-direction: row; align-items: center; gap: 18px; } }

.gate-primary-btn { min-height: 54px; border-radius: 9px; padding: 0 24px; font-size: 16px; }
@media (min-width: 1180px) { .gate-primary-btn { min-height: 58px; padding: 0 28px; } }

.gate-reason { font-family: "Source Serif 4", serif; font-size: 14.5px; line-height: 1.4; margin: 0; }
.gate-reason--ready   { color: var(--push); }
.gate-reason--blocked { color: var(--text-faint); }

.gate-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gate-cafe-card-wrap {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gate-cafe-card {
  display: block;
  min-height: 74px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: #F3E9E2;
  padding: 14px 16px;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .gate-cafe-card { transition: background 120ms ease; }
}
.gate-cafe-card:hover { background: #EADDD2; }

.gate-cafe-title { font-family: Archivo, sans-serif; font-size: 15.5px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.gate-cafe-body { font-family: "Source Serif 4", serif; font-size: 14px; line-height: 1.4; color: #5C4A40; margin: 0; }

/* ---- Done row ---- */

.done-row {
  background: var(--push-bg);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.done-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--push);
  color: var(--chrome-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.done-info { flex: 1; }

.done-label { font-family: Archivo, sans-serif; font-weight: 600; color: #234037; margin: 0; font-size: 14px; }

.done-meta {
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px;
  color: #4A7C6A;
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.done-change-btn {
  background: var(--surface);
  border: 1px solid var(--push-line);
  color: var(--push);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

/* First-run nav: dim inactive tabs when pantry is empty */
.welcome-page .nav a:not(.brand):not(.nav-brew):not(.is-active) {
  color: var(--chrome-inactive-first);
}

/* ---- Brew home first-visit state (B4) ---- */
.brew-ready-callout {
  border-left: 3px solid var(--push);
  background: var(--push-bg);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.brew-ready-callout p {
  margin: 0;
}
.brew-ready-callout .eyebrow {
  color: var(--push);
  margin-bottom: 4px;
}
.brew-pair-btn {
  padding: 14px 16px;
}
.brew-pair-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brew-pair-title {
  font-family: Archivo, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.brew-pair-sub {
  font-family: "Source Serif 4", serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--chrome-muted);
}
.brew-ranking-caption {
  margin-top: 8px;
  font-size: 13px;
}

/* Fix validation scroll bug */
.sensory-intensity-btn, .sensory-choice-btn, .defect-tag-pill, .tristate-option, .name-chip, .gate-roast-pill, .gate-chip, .gate-grinder-pill { position: relative; }

/* Metal-filter heads-up above the brew strip. Dashed, not a callout: it is
   a "your recipe differs" note, not a warning. */
.filter-alert {
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
}

/* Full-width action. --lg already carries the 52px height. */
.btn-block { width: 100%; }

.btn-lg {
  min-height: 52px;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
  font-size: 16px;
}

/* ---- Cold brew: does the batch fit the jar? ---- */
.cold-brew-layout { margin-top: var(--s-4); }
.cold-brew-layout .choice-fieldset + .choice-fieldset { margin-top: var(--s-5); }

.vessel { margin-bottom: var(--s-6); }
.vessel-bar {
  display: flex;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-sunk);
  overflow: hidden;
}
/* The two widths are percentages of the jar, computed per recipe, so the
   number has to come from the template (and from brew-execute.js when the
   batch size changes). The custom property is the seam: the sheet still
   owns "a segment is as wide as --seg", markup only supplies the figure. */
.vessel-seg { height: 100%; width: var(--seg, 0%); }
.vessel-seg-grounds { background: var(--accent); }
.vessel-seg-water { background: var(--push-line); }
.vessel-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: var(--s-1);
}
/* Brim-full and outlined in the "went too far" colour. The bar can only ever
   draw 100%, so the number in the warning is what carries the overflow. */
.vessel.is-over .vessel-bar { border-color: var(--back); }
.vessel.is-over .vessel-seg-water { background: var(--back-line); }
.vessel.is-over .vessel-labels { color: var(--back); }
.vessel-warning {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--back);
  background: var(--back-bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  color: var(--back);
  font-weight: 600;
}
.vessel-unknown {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: var(--s-6);
}

/* ---- A steep in progress ---- */
.steep-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  background: var(--plan-bg);
  border-bottom: 1px solid var(--plan-line);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 13.5px;
}
.steep-bar:hover { text-decoration: none; background: #fbf3e2; }
.steep-bar strong { color: var(--plan); }
.steep-bar-text { flex: 1; }
.steep-bar-go { color: var(--plan); font-weight: 700; }
.steep-bar.is-ready { background: var(--push-bg); border-bottom-color: var(--push-line); }
.steep-bar.is-ready strong,
.steep-bar.is-ready .steep-bar-go { color: var(--push); }

.steep-when {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-4);
  margin: var(--s-5) 0;
}
.steep-when p { margin: 0; }
.steep-when-time {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-strong);
  margin: var(--s-1) 0 var(--s-2) !important;
}
.steep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-5);
}

.steep-open {
  border-left: 3px solid var(--plan);
  background: var(--plan-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.steep-open h2 { margin: 0 0 var(--s-2); font-size: 20px; }
.steep-open .eyebrow { color: var(--plan); }
.steep-open p { margin: 0; }
.steep-open.is-ready { border-left-color: var(--push); background: var(--push-bg); }
.steep-open.is-ready .eyebrow { color: var(--push); }
.steep-open-steps { margin: 0; padding-left: var(--s-5); }
.steep-open-steps li + li { margin-top: var(--s-1); }
.steep-start-row { margin-top: var(--s-4); }

/* Shares .brew-ready-callout's shape, but not its "pantry is ready" green:
   amber while it steeps, green only once it is actually ready to drink. */
.still-going-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-left-color: var(--plan);
  background: var(--plan-bg);
}
.still-going-card:hover { text-decoration: none; }
.still-going-card p { margin: 0; }
.still-going-card p + p { margin-top: var(--s-1); }
.still-going-card.is-ready {
  border-left-color: var(--push);
  background: var(--push-bg);
}