/* service/web/app.css -- Recipe Rescue. v2 (UX wave 1, 2026-10-15): "the
   family recipe box" -- warm paper surface, a serif heading from fonts already
   on the device, the card photo (or a warm category tile) wherever a recipe
   appears, soft shadows, 12-16px radii, 44px targets (60px in cook mode).
   The four provenance treatments are UNCHANGED (DESIGN.md Sec 2) -- the
   "Per-leaf pieces" block below is carried over byte for byte.

   Mobile-first, one column. RTL-aware via the document's own `dir` attribute
   (set by app.js per the active language) -- every spacing/position rule uses
   CSS LOGICAL properties only (margin-inline-*, padding-inline-*,
   inset-inline-*, text-align:start/end), never a physical left/right, so the
   whole layout mirrors correctly under dir="rtl" (rtl-hebrew-web-design Sec
   "Logical properties law"). Pre-delivery grep (run before every delivery):
     grep -nE "margin-(left|right)|padding-(left|right)|[^-](left|right)\s*:" app.css
   -> must return 0 lines with no documented exception comment.

   No web fonts, no downloads, no CDN (offline requirement, PLAN Sec 9.4/9.5).
   Body text stays ONE system family; headings use a serif stack of fonts the
   device already has (Frank Ruhl Libre / David on Hebrew systems, Georgia
   elsewhere) -- a heading style, never a provenance signal: the provenance
   channels are colour + border shape + a word, and none of them is a
   typeface. Every colour pair is a MEASURED WCAG ratio recorded in DESIGN.md
   Sec 1 (v2 rows added 2026-10-15). */

:root {
  /* ---- base tokens ---- */
  --color-bg: #ffffff;
  --color-paper: #f7f1e6;          /* page surface (v2) -- text 15.16:1, muted 6.76:1, accent 5.61:1 on it (DESIGN.md) */
  --color-card: #fffdf9;           /* raised card on the paper */
  --color-surface: #f5f1ea;
  --color-surface-strong: #ece6d8;
  --color-border: #ddd4c4;         /* decorative divider only -- never a state signal (WCAG 1.4.11 does not apply to pure decoration) */
  --color-border-strong: #8c7f6b;  /* control outlines (search field, select, chips) -- 3.48:1 on paper, 3.85:1 on card */
  --color-text: #1c1c1c;
  --color-text-muted: #5a5347;
  --color-accent: #9c4718;         /* ~6.3:1 white-on-accent -- measured, DESIGN.md */
  --color-accent-text: #ffffff;
  --color-accent-soft: #f6e4d6;    /* selected chip / segment background -- accent text 5.10:1 on it */
  --color-error-accent: #9c2b1f;
  --color-heart: #b3261e;          /* the ♥ -- 6.54:1 on white, 5.81:1 on paper */
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --tap-min: 44px;                 /* WORKPLAN default floor */
  --tap-min-cook: 60px;            /* WORKPLAN/PLAN Sec 9.4 cook-mode floor */
  --focus-ring: #1a5fb4;           /* 6.29:1 on white -- a deliberately different blue from --color-suggested-border so a focus ring is never mistaken for a SUGGESTED tag */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(76, 52, 28, 0.08), 0 4px 14px rgba(76, 52, 28, 0.08);

  /* ---- provenance treatments: colour + shape + a word, never colour alone
     (WCAG color-not-only / color-not-decorative-only) -- each state below
     gets its OWN border-style too (solid / dashed / dotted), a second,
     colour-blind-safe signal layered under the badge word. ---- */
  --color-inferred-bg: #fff6db;
  --color-inferred-border: #b8860b;   /* 3.25:1 vs white -- UI-component floor */
  --color-inferred-text: #6b4e00;     /* 7.17:1 on inferred-bg */

  --color-suggested-bg: #e7f3fb;
  --color-suggested-border: #1565c0;  /* 5.75:1 vs white */
  --color-suggested-text: #0d47a1;    /* 7.65:1 on suggested-bg */

  --color-unknown-bg: #f2f2f2;
  --color-unknown-border: #767676;    /* 4.54:1 vs white (darkened from an earlier #999 that measured 2.85:1 -- FIX applied before delivery) */
  --color-unknown-text: #555555;      /* 6.66:1 on unknown-bg */

  --color-safety-bg: #fdecea;
  --color-safety-border: #c0392b;     /* 4.76:1 vs safety-bg */
  --color-safety-text: #7a1f14;       /* 9.03:1 on safety-bg */

  /* ---- sync status ---- */
  --color-synced-bg: #e6f2e8;
  --color-synced-border: #3f7a4e;     /* 5.12:1 vs white */
  --color-synced-text: #2f5d3a;       /* 6.63:1 on synced-bg */
  --color-waiting-bg: var(--color-surface);
  --color-waiting-text: var(--color-text-muted); /* 6.75:1 on surface */
  --color-pending-bg: #fff2cc;
  --color-pending-text: #8a5a00;      /* 5.31:1 on pending-bg */

  /* ---- v2: category tiles (a warm ground + a line drawing, never a letter) ---- */
  --cat-baking-bg: #f5dfc4;    --cat-baking-ink: #7a3f12;
  --cat-breakfast-bg: #f7e7b5; --cat-breakfast-ink: #6e4a00;
  --cat-mains-bg: #f1d3c6;     --cat-mains-ink: #7c2f1a;
  --cat-soups-bg: #e4e7c8;     --cat-soups-ink: #4a5216;
  --cat-salads-bg: #d8e8cf;    --cat-salads-ink: #2f5a2a;
  --cat-spices-bg: #ecd6c3;    --cat-spices-ink: #6b3a1c;
  --cat-other-bg: #e7e0d3;     --cat-other-ink: #4e463b;

  /* ---- v2: timers, toast, progress ---- */
  --color-night: #2b2420;          /* timer bar + toast ground */
  --color-night-text: #fff8ee;     /* 14.47:1 on night */
  --color-night-action: #ffc58f;   /* the toast's Undo -- 9.91:1 on night */
  --color-progress-track: #e6dccb;
}

/* Hebrew headings: Frank Ruhl Libre if the device has it, else David (every
   Windows), else the generic serif -- never downloaded. */
html[lang="he"] { --font-heading: "Frank Ruhl Libre", "David", "Times New Roman", Georgia, serif; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-text);
  font-family: var(--font-stack);
}

body {
  font-size: 17px;
  line-height: 1.55;   /* Hebrew body line-height 1.5-1.6 per rtl-hebrew-web-design */
  font-weight: 400;
  letter-spacing: normal;
  /* a quiet paper surface, CSS only */
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(236, 214, 195, 0.35), transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 {
  line-height: 1.15;   /* headings ~1.0-1.2 per rtl-hebrew-web-design */
  font-weight: 700;
  margin-block: 0 0.4em;
}
h1, h2 { font-family: var(--font-heading); letter-spacing: 0; }

/* Keyboard focus is ALWAYS visible -- a 3px ring on every interactive element. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 8px;
  background: var(--color-text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
  transition: inset-block-start 150ms ease-out;
}
.skip-link:focus { inset-block-start: 8px; }

#app {
  max-width: 520px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 0 96px; /* room for the fixed bottom nav */
}

main:focus { outline: none; /* focus moves here programmatically on route change; no ring needed on a container */ }

[hidden] { display: none !important; }

.icon { display: inline-flex; inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0; }
.icon-svg { inline-size: 100%; block-size: 100%; }
/* Only directional icons mirror (back / next chevrons); a heart, a camera, a
   timer, the play triangle never do (rtl-hebrew-web-design). */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Header v2: mark + title + sync pill + ⋯
   --------------------------------------------------------------------- */
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  margin-inline: -16px;
  padding-inline: 16px;
  background: rgba(247, 241, 230, 0.94);
  backdrop-filter: blur(6px);
  border-block-end: 1px solid rgba(221, 212, 196, 0.7);
  margin-block-end: 12px;
}
.app-mark { display: inline-flex; inline-size: 30px; block-size: 30px; color: var(--color-accent); flex-shrink: 0; }
.app-mark svg { inline-size: 100%; block-size: 100%; }
.app-title {
  font-size: 1.3rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.icon-btn .icon-svg, .icon-btn > svg { inline-size: 24px; block-size: 24px; }
.icon-btn:hover { background: rgba(156, 71, 24, 0.08); }
.icon-btn.small { min-width: var(--tap-min); min-height: var(--tap-min); border: 1px solid var(--color-border-strong); border-radius: 12px; background: var(--color-card); }
#menu-btn > svg { inline-size: 26px; block-size: 26px; }

/* The sync pill: a dot when synced; the dot plus a sentence when something
   needs the person's attention (offline / waiting / refused). */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.sync-pill .sync-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--color-synced-border); flex-shrink: 0; }
.sync-pill[data-state="syncing"] .sync-dot { background: var(--color-suggested-border); animation: pulse 1.2s ease-in-out infinite; }
.sync-pill[data-state="waiting"] .sync-dot { background: var(--color-pending-text); }
.sync-pill[data-state="offline"] .sync-dot { background: var(--color-unknown-border); }
.sync-pill.expanded {
  order: 10;            /* its own line under the title when it carries words */
  flex-basis: 100%;
  justify-content: flex-start;
  background: var(--color-waiting-bg);
  color: var(--color-waiting-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding-block: 6px;
  line-height: 1.35;
}
.sync-pill.expanded[data-state="waiting"] { background: var(--color-pending-bg); color: var(--color-pending-text); border-color: var(--color-pending-text); }
.sync-pill .sync-rejected-btn {
  margin-inline-start: auto;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 32px;
  padding-inline: 4px;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------------
   Sheets (the ⋯ menu + the shared modal) -- native <dialog>
   --------------------------------------------------------------------- */
.sheet {
  border: none;
  padding: 0;
  background: transparent;
  inline-size: min(520px, 100vw);
  max-inline-size: 100vw;
  margin-block: auto 0;
  margin-inline: auto;
  max-block-size: 92vh;
}
.sheet::backdrop { background: rgba(43, 36, 32, 0.45); }
.sheet-panel {
  background: var(--color-card);
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(43, 36, 32, 0.18);
  max-block-size: 92vh;
  overflow-y: auto;
}
.sheet-heading { font-size: 1.3rem; margin-block-end: 14px; }
.sheet-label { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); margin-block: 0 8px; }
.sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  min-height: 56px;
  padding-inline: 12px;
  margin-block-end: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.sheet-item .icon { color: var(--color-accent); inline-size: 24px; block-size: 24px; }

.lang-switch { display: flex; gap: 8px; margin-block-end: 18px; }
.lang-btn {
  flex: 1;
  min-height: var(--tap-min);
  padding-inline: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}
.lang-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  font-weight: 600;
}

/* The photo, full screen. */
.sheet.zoom { inline-size: 100vw; max-inline-size: 100vw; block-size: 100vh; max-block-size: 100vh; margin: 0; }
.sheet.zoom .sheet-panel { background: #111; border-radius: 0; block-size: 100vh; max-block-size: 100vh; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.zoom-frame { inline-size: 100%; block-size: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.zoom-frame img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; display: block; }
.zoom-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; background: rgba(255, 255, 255, 0.92); color: var(--color-text); }

/* ---------------------------------------------------------------------
   Toast + timer bar
   --------------------------------------------------------------------- */
.toast {
  position: fixed;
  inset-inline: 16px;
  inset-block-end: calc(84px + env(safe-area-inset-bottom));
  max-inline-size: 488px;
  margin-inline: auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--color-night);
  color: var(--color-night-text);
  box-shadow: 0 6px 24px rgba(43, 36, 32, 0.3);
  font-size: 0.95rem;
}
.toast #toast-text { flex: 1; }
.toast-action {
  min-height: var(--tap-min);
  padding-inline: 10px;
  border: none;
  background: none;
  color: var(--color-night-action);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
body.cook-mode .toast { inset-block-end: calc(16px + env(safe-area-inset-bottom)); }

.timer-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 8px;
  margin-block-end: 8px;
  margin-inline: -16px;
  padding-inline: 16px;
  background: rgba(247, 241, 230, 0.95);
}
body:not(.cook-mode) .timer-bar { inset-block-start: 66px; }
.timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-inline: 12px 4px;
  border-radius: 999px;
  background: var(--color-night);
  color: var(--color-night-text);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.timer-chip .timer-time { font-size: 1.15rem; }
.timer-chip .timer-label { font-size: 0.85rem; font-weight: 500; opacity: 0.9; }
.timer-chip.done { background: var(--color-heart); color: #ffffff; animation: pulse 1s ease-in-out infinite; }
.timer-stop { min-width: var(--tap-min); min-height: var(--tap-min); border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------
   Bottom nav -- three tabs
   --------------------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 253, 249, 0.97);
  border-block-start: 1px solid var(--color-border);
  padding-block: 6px;
  padding-inline: 12px;
  padding-block-end: max(6px, env(safe-area-inset-bottom));
  z-index: 30;
  box-shadow: 0 -2px 12px rgba(76, 52, 28, 0.06);
}
.nav-btn {
  position: relative;
  flex: 1;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding-block: 4px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 12px;
}
.nav-btn .nav-icon { display: inline-flex; inline-size: 26px; block-size: 26px; }
.nav-btn .nav-icon svg { inline-size: 100%; block-size: 100%; }
.nav-btn[aria-current="page"] { color: var(--color-accent); font-weight: 700; background: var(--color-accent-soft); }
.nav-count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: calc(50% + 6px);
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Buttons (shared)
   --------------------------------------------------------------------- */
.full-width { display: flex; width: 100%; }

.cta-btn, .secondary-btn, .text-btn, .big-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  padding-inline: 18px;
  margin-block-end: 12px;
}
.cta-btn .icon, .secondary-btn .icon, .big-btn .btn-icon { inline-size: 22px; block-size: 22px; }
.big-btn .btn-icon { display: inline-flex; }
.big-btn .btn-icon svg { inline-size: 100%; block-size: 100%; }

.cta-btn { background: var(--color-accent); color: var(--color-accent-text); box-shadow: 0 2px 8px rgba(156, 71, 24, 0.25); }
.cta-btn:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; }
.secondary-btn { background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border-strong); }
.secondary-btn:disabled { color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; }
.text-btn { background: transparent; color: var(--color-text-muted); min-height: var(--tap-min); }
.back-btn { justify-content: flex-start; text-align: start; padding-inline: 0 8px; margin-block: 0; color: var(--color-text); font-weight: 600; }
.big-btn { background: var(--color-accent); color: var(--color-accent-text); min-height: 76px; font-size: 1.12rem; font-weight: 700; box-shadow: 0 4px 14px rgba(156, 71, 24, 0.3); }

/* ---------------------------------------------------------------------
   Capture
   --------------------------------------------------------------------- */
.capture-hero { color: var(--color-accent); display: flex; justify-content: center; margin-block: 4px 8px; }
.welcome-svg { inline-size: min(220px, 60vw); block-size: auto; }
.subtitle { color: var(--color-text-muted); margin-block: 0 18px; text-align: center; font-size: 1.02rem; }
.guidance-list {
  list-style: none;
  margin: 4px 0 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.guidance-list li { padding-inline-start: 22px; position: relative; color: var(--color-text-muted); font-size: 0.94rem; }
.guidance-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.seed-demo-hint {
  font-size: 0.85rem;
  color: var(--color-suggested-text);
  background: var(--color-suggested-bg);
  border: 1px solid var(--color-suggested-border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-block-start: 4px;
}
.thumbnails-label { font-size: 0.9rem; color: var(--color-text-muted); margin-block: 4px 8px; }
.thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 12px; }
.thumb { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-remove {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* ---------------------------------------------------------------------
   Processing
   --------------------------------------------------------------------- */
#screen-processing { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 40px 0; }
.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--color-border);
  border-block-start-color: var(--color-accent);
  animation: spin 0.9s linear infinite;
  margin-block-end: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  .sync-pill .sync-dot, .timer-chip.done { animation: none; }
  html { scroll-behavior: auto; }
}
.stage-text { font-size: 1.1rem; font-weight: 500; margin-block-end: 8px; min-height: 1.4em; }
.elapsed-line { color: var(--color-text-muted); margin-block-end: 20px; }
.hint { color: var(--color-text-muted); font-size: 0.92rem; }

/* A number+unit cluster always renders as one left-to-right run and never
   breaks mid-token under bidi reordering (rtl-hebrew-web-design "Bidi hygiene"). */
.num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Headings, empty states
   --------------------------------------------------------------------- */
.results-heading { font-size: 1.55rem; margin: 0; }
.empty-state { text-align: center; padding-block: 24px 8px; }
.empty-state.small { padding-block: 16px; }
.empty-art { color: var(--color-accent); display: flex; justify-content: center; margin-block-end: 8px; }
.empty-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; margin-block: 0 6px; }
.empty-body { color: var(--color-text-muted); margin-block: 0 18px; }

/* ---------------------------------------------------------------------
   Book v2
   --------------------------------------------------------------------- */
.book-head { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; flex-wrap: wrap; }
.book-head .results-heading { flex: 1 1 auto; min-width: 0; }
.book-count { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }
.book-tools { display: flex; flex-direction: column; gap: 10px; margin-block-end: 14px; }
.search-row { position: relative; }
.search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: 14px; transform: translateY(-50%); inline-size: 22px; block-size: 22px; color: var(--color-text-muted); pointer-events: none; display: inline-flex; }
.search-icon svg { inline-size: 100%; block-size: 100%; }
.search-input {
  inline-size: 100%;
  min-height: 50px;
  padding-inline: 46px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  background: var(--color-card);
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  box-shadow: inset 0 1px 2px rgba(76, 52, 28, 0.06);
}
.search-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 2px; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.chip-row::-webkit-scrollbar { display: none; }
.tool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-row { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.tool-row .sort-select { margin-inline-start: auto; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: var(--tap-min);
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-card);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.filter-chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); font-weight: 600; }
.filter-chip .heart-icon { color: var(--color-heart); inline-size: 18px; block-size: 18px; }
.filter-chip[aria-pressed="true"] .heart-icon { color: var(--color-accent-text); }
.sort-select {
  min-height: var(--tap-min);
  max-inline-size: 60%;
  padding-inline: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-card);
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
}

.book-list { margin-block-end: 18px; }
.book-list.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.book-list.list { display: flex; flex-direction: column; gap: 10px; }
.book-tile { position: relative; }
.book-row {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  text-align: start;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: var(--color-card);
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.book-list.list .book-row { flex-direction: row; align-items: center; gap: 12px; padding: 10px; padding-inline-end: 52px; min-height: 92px; }
.book-row-body { flex: 1; min-width: 0; padding: 10px 12px 12px; }
.book-list.list .book-row-body { padding: 0; }
.book-row-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.25; margin: 0 0 4px; overflow-wrap: anywhere; }
.book-list.grid .book-row-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { margin: 0 0 6px; color: var(--color-text-muted); font-size: 0.8rem; }
.book-row-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.recipe-art { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.recipe-art .cat-svg { inline-size: 46%; max-inline-size: 120px; block-size: auto; }
.recipe-art img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms ease-out; }
.recipe-art.has-photo img { opacity: 1; }
.recipe-art.has-photo .cat-svg { visibility: hidden; }
.cat-baking { background: var(--cat-baking-bg); color: var(--cat-baking-ink); }
.cat-breakfast { background: var(--cat-breakfast-bg); color: var(--cat-breakfast-ink); }
.cat-mains { background: var(--cat-mains-bg); color: var(--cat-mains-ink); }
.cat-soups { background: var(--cat-soups-bg); color: var(--cat-soups-ink); }
.cat-salads { background: var(--cat-salads-bg); color: var(--cat-salads-ink); }
.cat-spices { background: var(--cat-spices-bg); color: var(--cat-spices-ink); }
.cat-other { background: var(--cat-other-bg); color: var(--cat-other-ink); }
.tile-art { aspect-ratio: 4 / 3; inline-size: 100%; }
.book-list.list .tile-art { inline-size: 72px; block-size: 72px; aspect-ratio: auto; border-radius: 12px; flex-shrink: 0; }
.book-list.list .tile-art .cat-svg { inline-size: 64%; }
.mini-art { inline-size: 52px; block-size: 52px; border-radius: 10px; flex-shrink: 0; }
.mini-art .cat-svg { inline-size: 70%; }

.tile-heart {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 249, 0.92);
  color: var(--color-text-muted);
  box-shadow: 0 1px 4px rgba(43, 36, 32, 0.18);
  cursor: pointer;
}
.tile-heart .icon { inline-size: 24px; block-size: 24px; }
.tile-heart.on { color: var(--color-heart); }
.book-list.list .tile-heart { inset-block-start: 50%; transform: translateY(-50%); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline: 8px;
  padding-block: 2px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.chip.status-needs_review { color: var(--color-inferred-text); background: var(--color-inferred-bg); border-color: var(--color-inferred-border); }
.chip.status-verified { color: var(--color-synced-text); background: var(--color-synced-bg); border-color: var(--color-synced-border); }
.chip.status-reconstructed { color: var(--color-suggested-text); background: var(--color-suggested-bg); border-color: var(--color-suggested-border); }
.chip.status-draft { color: var(--color-text-muted); }
.chip.needs-review-count { color: var(--color-safety-text); background: var(--color-safety-bg); border-color: var(--color-safety-border); }
.chip.pending { color: var(--color-pending-text); background: var(--color-pending-bg); border-color: var(--color-pending-text); }

.book-notice {
  color: var(--color-pending-text);
  background: var(--color-pending-bg);
  border: 1px solid var(--color-pending-text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  margin-block-end: 12px;
}

/* Hidden recipes */
.hidden-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hidden-row { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); flex-wrap: wrap; }
.hidden-title { flex: 1 1 140px; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.unhide-btn { margin: 0; min-height: var(--tap-min); font-size: 0.92rem; }
.hidden-empty { margin-block-start: 24px; text-align: center; }

/* ---------------------------------------------------------------------
   Recipe v2
   --------------------------------------------------------------------- */
.screen-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 8px; }
.screen-bar-actions { display: flex; gap: 4px; }
.heart-btn.on { color: var(--color-heart); }
.recipe-hero { aspect-ratio: 2 / 1; inline-size: 100%; border-radius: 18px; box-shadow: var(--shadow); margin-block-end: 16px; }
.recipe-hero.has-photo { aspect-ratio: 4 / 3; }
.recipe-hero .cat-svg { inline-size: 34%; }
.recipe-hero.zoomable { cursor: zoom-in; }
.hero-zoom-btn {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 249, 0.92);
  color: var(--color-text);
  cursor: pointer;
  z-index: 1;
}
.recipe-header { margin-block-end: 14px; }
.recipe-title { font-size: 1.75rem; line-height: 1.2; margin-block: 0 6px; overflow-wrap: anywhere; }
.recipe-meta { color: var(--color-text-muted); font-size: 0.92rem; margin-block: 0 6px; }
.rating-inline { display: inline-flex; align-items: center; gap: 2px; color: var(--color-inferred-text); font-weight: 600; }
.rating-inline .icon { inline-size: 16px; block-size: 16px; color: var(--color-pending-text); } /* 5.27:1 on paper -- #b8860b measured 2.89:1, under the 3:1 graphic floor (fixed) */
.recipe-summary { color: var(--color-text-muted); font-size: 0.86rem; margin-block: 0 4px; }

.reading-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--color-text-muted); font-size: 0.86rem; margin-block: 0 2px; }
.reading-toggle-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: underline;
  color: var(--color-accent);
  cursor: pointer;
}

.recipe-actions { display: flex; gap: 10px; margin-block-end: 14px; }
.recipe-actions .cta-btn, .recipe-actions .secondary-btn { flex: 1 1 0; margin: 0; min-width: 0; padding-inline: 12px; }

.scaler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-block-end: 14px;
}
.scaler-label { font-weight: 600; font-size: 0.95rem; }
.segmented { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: 12px; overflow: hidden; margin-inline-start: auto; }
.segment {
  min-width: 52px;
  min-height: var(--tap-min);
  border: none;
  border-inline-start: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  direction: ltr;
}
.segment:first-child { border-inline-start: none; }
.segment[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-text); }
.scaler-hint { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-block-end: 2px solid var(--color-border); margin-block-end: 4px; }
.section-head h3 { border: none; margin: 0; padding-block-end: 6px; }
.scaled-mark { font-size: 0.8rem; font-weight: 700; color: var(--color-accent); background: var(--color-accent-soft); border-radius: 999px; padding: 2px 10px; }
/* A scaled number reads as changed (a dotted underline) -- its provenance
   treatment, if any, is untouched. */
.piece.scaled .piece-value { text-decoration: underline dotted var(--color-accent); text-underline-offset: 3px; }
.add-shopping-btn { margin-block: 12px 0; inline-size: 100%; }

.recipe-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 8px; }
.recipe-jump-btn {
  min-height: var(--tap-min);
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-card);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.recipe-body { background: var(--color-card); border-radius: 18px; box-shadow: var(--shadow); padding: 4px 16px 8px; margin-block-end: 16px; }
.recipe-section { margin-block: 16px; }
.recipe-section, .scaler, .story-block, .recipe-body { scroll-margin-block-start: 84px; }
.recipe-section h3 { font-family: var(--font-heading); font-size: 1.2rem; border-block-end: 2px solid var(--color-border); padding-block-end: 6px; }
.section-head h3 { border: none; }

.ingredient-list, .notes-list { list-style: none; margin: 0; padding: 0; }
.ingredient-list li, .notes-list li { padding-block: 8px; border-block-end: 1px solid var(--color-surface-strong); }
.ingredient-list li:last-child, .notes-list li:last-child { border-block-end: none; }
.step-list { padding-inline-start: 1.4em; margin: 0; }
.step-list li { padding-block: 10px; border-block-end: 1px solid var(--color-surface-strong); }
.step-list li:last-child { border-block-end: none; }
.step-list li::marker { font-weight: 700; color: var(--color-accent); }

/* The family story */
.story-block { background: var(--color-card); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; margin-block-end: 16px; }
.story-block h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-block-end: 10px; }
.story-empty { color: var(--color-text-muted); font-size: 0.94rem; margin-block: 0 8px; }
.story-quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-inline-start: 4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 4px 12px 12px 4px;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  line-height: 1.5;
}
[dir="rtl"] .story-quote { border-radius: 12px 4px 4px 12px; }
.story-quote p { margin: 0; }
.story-meta { margin-block-start: 4px; font-family: var(--font-stack); font-size: 0.8rem; color: var(--color-text-muted); }
.story-add-btn { color: var(--color-accent); font-weight: 600; margin: 0; padding-inline: 0; justify-content: flex-start; }

.star-row { display: flex; gap: 6px; margin-block-end: 16px; }
.star-btn {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.star-btn .icon { inline-size: 28px; block-size: 28px; }
.star-btn.on { color: #8a5a00; background: var(--color-pending-bg); border-color: #b8860b; }
.share-text { min-height: 40vh; font-size: 0.9rem; }

/* Per-leaf pieces -- the atom of the four provenance treatments. Each state
   carries its OWN border-style (solid/dashed/dotted) in addition to colour,
   so the signal survives for a colour-blind reader (WCAG color-not-only).
   READ is deliberately unmarked (no border, no background, plain text) --
   PLAN Sec 3.1 Beat 2: "never mix the paper's words and the machine's words
   in one typeface"; every state OTHER than READ carries a badge word, so the
   absence of one is itself never ambiguous. */
.piece { display: inline; }
.piece .piece-value { }
.piece.read .piece-value { color: var(--color-text); }

.piece.inferred .piece-value {
  color: var(--color-inferred-text);
  background: var(--color-inferred-bg);
  border-inline-start: 3px solid var(--color-inferred-border);
  padding-inline: 6px 4px;
  border-radius: 4px;
}
.piece.suggested .piece-value {
  color: var(--color-suggested-text);
  background: var(--color-suggested-bg);
  border-inline-start: 3px dashed var(--color-suggested-border);
  padding-inline: 6px 4px;
  border-radius: 4px;
}
.piece.unknown .piece-placeholder {
  color: var(--color-unknown-text);
  background: var(--color-unknown-bg);
  border-inline-start: 3px dotted var(--color-unknown-border);
  padding-inline: 6px 4px;
  border-radius: 4px;
  font-style: italic; /* a style variant within the SAME family -- not a second typeface */
}

.piece-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding-inline: 7px;
  padding-block: 1px;
  margin-inline-start: 6px;
  vertical-align: middle;
}
.piece.inferred .piece-tag { color: var(--color-inferred-text); background: var(--color-bg); border: 1px solid var(--color-inferred-border); }
.piece.suggested .piece-tag { color: var(--color-suggested-text); background: var(--color-bg); border: 1px solid var(--color-suggested-border); }

.piece-why {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 6px;
  margin-inline-start: 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
}
.no-relative-box {
  display: block;
  margin-block: 6px 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  border-inline-start: 3px solid var(--color-accent, currentColor);
  font-size: 0.9rem;
  line-height: 1.5;
}
.no-relative-heading { display: block; margin-block-end: 4px; }
.no-relative-text { display: block; }
.no-relative-footer { display: block; margin-block-start: 6px; font-size: 0.82rem; color: var(--color-text-muted); }
.piece-rationale {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-block-start: 2px;
}

.safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-safety-text);
  background: var(--color-safety-bg);
  border: 1px solid var(--color-safety-border);
  border-radius: 6px;
  padding-inline: 6px;
  padding-block: 1px;
  margin-inline-start: 6px;
}

/* Every piece is tappable (Correct screen); a clear, generous hit target
   even though the visible text may be short (touch-target-size, no-precision-required).
   >=44px everywhere (measured, 2026-09-27 verification pass caught this at
   40px); >=60px specifically inside cook mode's step text, where WORKPLAN
   S2.2/S2.5's own floor applies (a wet-handed, arm's-length tap target). */
.piece-tappable {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: 2px;
  background: none;
  border: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: inherit;
}
.piece-tappable:hover .piece-value, .piece-tappable:hover .piece-placeholder { filter: brightness(0.97); }
/* Scoped to body.cook-mode (set whenever the active route is "cook") rather
   than just .cook-step-text, so this also covers the appliance/doneness
   badge pieces and the ingredients-toggle panel's pieces -- every tappable
   piece reachable while cooking, not only the step text. */
body.cook-mode .piece-tappable { min-height: var(--tap-min-cook); }

.en { display: block; font-size: 0.88rem; color: #777; margin-block-start: 2px; direction: ltr; unicode-bidi: isolate; }

.reconstructed-block, .suggested-ingredients-block {
  border-radius: 10px;
  padding: 14px;
  margin-block: 18px;
}
.reconstructed-block {
  border: 2px dashed var(--color-inferred-border);
  background: var(--color-inferred-bg);
}
.suggested-ingredients-block {
  border: 2px solid var(--color-suggested-border);
  background: var(--color-suggested-bg);
}
.reconstructed-block h3, .suggested-ingredients-block h3 { margin-block-start: 0; font-size: 1.05rem; }

.get-suggestions-row { text-align: center; margin-block: 16px; }

/* ---------------------------------------------------------------------
   Correct screen
   --------------------------------------------------------------------- */
.correct-current {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  margin-block-end: 18px;
}
.correct-current-label { font-size: 0.85rem; color: var(--color-text-muted); margin-block-end: 4px; }
.correct-current-value { font-size: 1.15rem; font-weight: 600; }

/* Reading-layer rule 6 (2026-09-27): the Correct screen now stacks TWO
   .correct-current boxes (Reading, then As written on the card) -- the
   default block layout above already gives each its own label+value pair
   with the same spacing, no extra rule needed for the pair itself. Only the
   hint under them is new. */
.correct-language-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-block: 0 12px;
}

.verdict-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-end: 16px;
}
.verdict-btn {
  flex: 1 1 auto;
  min-width: 90px;
  min-height: 56px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}
.verdict-btn[aria-pressed="true"].verdict-correct { background: var(--color-synced-bg); border-color: var(--color-synced-border); color: var(--color-synced-text); }
.verdict-btn[aria-pressed="true"].verdict-wrong { background: var(--color-safety-bg); border-color: var(--color-safety-border); color: var(--color-safety-text); }
.verdict-btn[aria-pressed="true"].verdict-dont_know { background: var(--color-unknown-bg); border-color: var(--color-unknown-border); color: var(--color-unknown-text); }

.correction-box-label { font-weight: 600; margin-block-end: 6px; display: block; }
.correction-box {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  font-size: 1rem;
  margin-block-end: 16px;
  resize: vertical;
}
.correction-actions { display: flex; gap: 10px; }
.correction-actions .cta-btn, .correction-actions .secondary-btn { flex: 1; margin-block-end: 0; }
.correction-saved-hint {
  color: var(--color-pending-text);
  background: var(--color-pending-bg);
  border: 1px solid var(--color-pending-text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
}


/* ---------------------------------------------------------------------
   Cook mode v2 -- kitchen reality (PLAN Sec 9.4): >=20px type, >=60px
   targets, one step per screen, progress, timers, the step's ingredients.
   No header / bottom nav / sync pill (body.cook-mode).
   --------------------------------------------------------------------- */
body.cook-mode .topbar,
body.cook-mode .bottom-nav { display: none; }
.sync-pill.cook-hidden { display: none; }
body.cook-mode #app { padding-block: 8px 24px; }
body.welcome-mode .sync-pill { display: none; }

.cook-screen { padding-block-start: 4px; }
.cook-top-row { display: flex; justify-content: space-between; align-items: center; margin-block-end: 8px; }
.cook-step-label { font-size: 1.05rem; font-weight: 700; color: var(--color-text-muted); }
.cook-exit-btn {
  min-height: var(--tap-min-cook);
  min-width: var(--tap-min-cook);
  border-radius: 16px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-card);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cook-exit-btn .icon { inline-size: 26px; block-size: 26px; }
.cook-progress { block-size: 8px; border-radius: 999px; background: var(--color-progress-track); overflow: hidden; margin-block-end: 14px; }
.cook-progress-fill { block-size: 100%; background: var(--color-accent); border-radius: 999px; transition: inline-size 250ms ease-out; }
@media (prefers-reduced-motion: reduce) { .cook-progress-fill { transition: none; } }

.cook-keep-awake-hint { font-size: 0.85rem; color: var(--color-text-muted); margin-block: 0 10px; }
.cook-stage { background: var(--color-card); border-radius: 20px; box-shadow: var(--shadow); padding: 18px 16px; margin-block-end: 16px; min-height: 40vh; }
.cook-step-text { font-size: 1.6rem; line-height: 1.42; font-weight: 600; margin-block-end: 16px; }
.cook-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 14px; }
.cook-badge { font-size: 1.1rem; font-weight: 600; padding-inline: 12px; padding-block: 0; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }

.cook-timer-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 16px; }
.timer-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min-cook);
  padding-inline: 16px 18px;
  border-radius: 999px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.timer-start-btn .icon { inline-size: 22px; block-size: 22px; }
.timer-start-btn.guess { border-style: dashed; border-color: var(--color-suggested-border); background: var(--color-suggested-bg); color: var(--color-suggested-text); }
.timer-start-btn .piece-tag { color: var(--color-suggested-text); background: var(--color-bg); border: 1px solid var(--color-suggested-border); }

.step-ingredients { border-block-start: 1px solid var(--color-border); padding-block-start: 12px; }
.step-ingredients h3 { font-size: 0.95rem; color: var(--color-text-muted); font-weight: 700; margin-block-end: 4px; }
.step-ingredient-list { list-style: none; margin: 0; padding: 0; font-size: 1.15rem; }
.step-ingredient-list li { padding-block: 2px; }

.cook-nav-row {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  gap: 12px;
  padding-block: 10px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(247, 241, 230, 0), var(--color-paper) 30%);
  z-index: 5;
}
.cook-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 68px;
  border-radius: 18px;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
}
.cook-nav-btn .icon { inline-size: 26px; block-size: 26px; }
.cook-nav-btn.cook-back { background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border-strong); flex: 0.8; }
.cook-nav-btn.cook-back:disabled { color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; }
.cook-nav-btn.cook-forward { background: var(--color-accent); color: var(--color-accent-text); box-shadow: 0 4px 14px rgba(156, 71, 24, 0.3); }

.cook-ingredients-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap-min-cook);
  margin-block-start: 8px;
  border-radius: 16px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-card);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.cook-ingredients-panel { margin: 10px 0 0; padding: 4px 12px; font-size: 1.12rem; line-height: 1.5; list-style: none; background: var(--color-card); border-radius: 16px; box-shadow: var(--shadow); }
.cook-ingredients-panel li { border-block-end: 1px solid var(--color-surface-strong); }
.cook-ingredients-panel li:last-child { border-block-end: none; }

/* A tickable row (cook checklist, shopping list): the whole row is the label. */
.check-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap-min-cook); cursor: pointer; padding-block: 6px; }
.check-row input { inline-size: 26px; block-size: 26px; flex-shrink: 0; accent-color: var(--color-accent); margin: 0; }
.check-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
li.done .check-text { text-decoration: line-through; color: var(--color-text-muted); }

/* ---------------------------------------------------------------------
   Shopping list
   --------------------------------------------------------------------- */
.shopping-actions { display: flex; gap: 10px; margin-block-end: 14px; }
.shopping-actions .secondary-btn { flex: 1; margin: 0; font-size: 0.92rem; padding-inline: 10px; }
.shop-group { background: var(--color-card); border-radius: 18px; box-shadow: var(--shadow); padding: 6px 14px 8px; margin-block-end: 14px; }
.shop-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  inline-size: 100%;
  min-height: var(--tap-min);
  padding: 0;
  border: none;
  border-block-end: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.shop-group-title .icon { color: var(--color-text-muted); }
.shop-list { list-style: none; margin: 0; padding: 0; }
.shop-list li { border-block-end: 1px solid var(--color-surface-strong); }
.shop-list li:last-child { border-block-end: none; }
.shop-list .check-row { min-height: 52px; }

/* ---------------------------------------------------------------------
   First visit
   --------------------------------------------------------------------- */
.welcome-card { text-align: center; background: var(--color-card); border-radius: 22px; box-shadow: var(--shadow); padding: 28px 20px 22px; margin-block: 8px 18px; }
.welcome-art { color: var(--color-accent); display: flex; justify-content: center; margin-block-end: 12px; }
.welcome-art .welcome-svg { inline-size: min(240px, 66vw); }
.welcome-progress { margin: 0 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.welcome-title { font-size: 1.7rem; margin-block: 0 10px; }
.welcome-body { color: var(--color-text-muted); font-size: 1.05rem; margin: 0 auto 18px; max-inline-size: 34ch; }
.welcome-dots { display: flex; justify-content: center; gap: 8px; }
.welcome-dots .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--color-border); }
.welcome-dots .dot.on { background: var(--color-accent); inline-size: 24px; border-radius: 999px; }
.welcome-actions { display: flex; flex-direction: column; gap: 4px; }
.welcome-actions .cta-btn { min-height: 56px; margin: 0; }
.welcome-skip { margin: 0; }

/* ---------------------------------------------------------------------
   Error screen
   --------------------------------------------------------------------- */
.error-heading { color: var(--color-error-accent); }
.error-detail-label { color: var(--color-text-muted); margin-block-end: 4px; font-size: 0.9rem; }
.error-detail-text {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  font-family: ui-monospace, "Courier New", monospace;
  margin-block-end: 16px;
  max-height: 30vh;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------
   Print view -- the card photo beside the text; no app chrome.
   --------------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .topbar, .bottom-nav, .timer-bar, .toast, .screen-bar, .recipe-actions, .scaler, .recipe-jump-nav,
  .add-shopping-btn, .story-add-btn, .get-suggestions-row, .hero-zoom-btn, .reading-toggle-btn, .piece-why,
  #screen-recipe > #recipe-content > a.secondary-btn { display: none !important; }
  #app { max-width: none; padding: 0; }
  .recipe-hero { float: inline-end; inline-size: 42%; margin-inline-start: 18px; box-shadow: none; border: 1px solid #ccc; }
  .recipe-body, .story-block { box-shadow: none; padding: 0; }
  .recipe-title { font-size: 1.8rem; }
  .piece-tappable { min-height: 0; }
}

/* ===================================================================
   UX wave 2 (2026-10-23): the family screen, joining, role notes, the
   recipe of the week, the shared list note. Same tokens as wave 1.
   =================================================================== */
.cta-btn.small, .secondary-btn.small, .text-btn.small { min-height: var(--tap-min); padding-inline: 14px; font-size: 0.95rem; margin-block-end: 0; }

/* a role / membership note: a calm, readable box -- not an error */
.role-note {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  margin-block: 0 14px;
}

/* the recipe of the week, at the top of the Book */
.week-card {
  display: flex;
  gap: 14px;
  align-items: stretch;
  background: var(--color-card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
  margin-block-end: 16px;
}
.week-art-btn { flex: 0 0 104px; padding: 0; border: 0; background: none; border-radius: 12px; overflow: hidden; cursor: pointer; }
.week-art-btn .recipe-art { inline-size: 104px; block-size: 100%; min-block-size: 104px; border-radius: 12px; }
.week-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.week-heading { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent); }
.week-title { margin: 0; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.3; overflow-wrap: anywhere; }
.week-title-btn { all: unset; cursor: pointer; display: inline; font: inherit; color: inherit; text-align: start; }
.week-title-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.week-reason { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }
.week-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-start: auto; padding-block-start: 6px; }

/* the family screen */
.family-head { margin-block-end: 8px; }
.family-section { background: var(--color-card); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; margin-block: 16px; }
.family-section h3 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 10px; }
.family-your-role { color: var(--color-text-muted); font-size: 0.92rem; margin-block: 4px 0; }
.name-form { margin-block: 12px; }
.name-row { display: flex; gap: 8px; align-items: stretch; }
.name-input {
  flex: 1;
  min-inline-size: 0;
  min-height: var(--tap-min);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  padding-inline: 12px;
  font: inherit;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
}
.name-row .secondary-btn { margin-block-end: 0; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.member-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-block-end: 1px solid var(--color-border); flex-wrap: wrap; }
.member-row:last-child { border-block-end: 0; }
.member-who { flex: 1; min-inline-size: 5em; overflow-wrap: anywhere; }
.member-name { font-weight: 600; }
.member-you { color: var(--color-text-muted); }
.member-role-label { color: var(--color-text-muted); font-size: 0.92rem; }
.member-role { min-inline-size: 0; inline-size: auto; flex: none; }
.role-choice { border: 0; padding: 0; margin: 12px 0; }
.role-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 56px;
  padding: 10px 12px;
  margin-block-end: 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg);
  cursor: pointer;
}
.role-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.role-option input { margin-block-start: 4px; inline-size: 20px; block-size: 20px; accent-color: var(--color-accent); flex: none; }
.role-option-text { display: flex; flex-direction: column; }
.role-option-name { font-weight: 600; }
.role-option-hint { color: var(--color-text-muted); font-size: 0.9rem; }
.invite-result { margin-block-start: 12px; }
.invite-ready { font-weight: 600; margin-block: 0 8px; }
.invite-link-box { display: flex; flex-direction: column; gap: 8px; }
.invite-link {
  inline-size: 100%;
  min-height: var(--tap-min);
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  padding-inline: 12px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.invite-actions { display: flex; gap: 8px; }
.invite-actions > * { flex: 1; margin-block-end: 0; }
.open-invites { margin-block-start: 14px; }
.family-leave { margin-block-start: 8px; color: var(--color-error-accent); }

/* joining from an invitation */
.join-card { background: var(--color-card); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; margin-block: 8px 16px; }
.join-card p { margin-block: 0 6px; }
.join-book { font-size: 1.1rem; font-weight: 600; }
.join-role { font-weight: 600; }

/* the photo notice before the first scan (pre-launch 2026-10-24) */
.notice-list { margin: 0 0 16px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Accounts (2026-10-26): sign in / a new account / a new password.
   One column, the same paper and card as the rest; the form keeps the
   44px floor and a visible «show» beside every password.
   --------------------------------------------------------------------- */
.screen-lang { margin-block-end: 14px; }
.signin-head { display: flex; align-items: center; gap: 10px; margin-block: 6px 6px; }
.signin-mark { color: var(--color-accent); inline-size: 34px; block-size: 34px; flex: none; }
.signin-mark svg { inline-size: 100%; block-size: 100%; }
.signin-lead { color: var(--color-text-muted); line-height: 1.55; margin-block: 0 16px; }
.google-slot { display: flex; justify-content: center; min-block-size: 44px; margin-block: 4px 0; }
.signin-or { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); margin-block: 14px; font-size: 0.92rem; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; block-size: 1px; background: var(--color-border); }
.signin-tabs { display: flex; gap: 6px; padding: 4px; background: var(--color-surface-strong); border-radius: 14px; margin-block-end: 14px; }
.signin-tab {
  flex: 1;
  min-height: var(--tap-min);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.98rem;
  cursor: pointer;
}
.signin-tab[aria-pressed="true"] { background: var(--color-card); color: var(--color-accent); font-weight: 700; box-shadow: var(--shadow); }
.signin-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.auth-form { background: var(--color-card); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sheet .auth-form { box-shadow: none; padding: 0; background: transparent; }
.auth-field { display: flex; flex-direction: column; }
.auth-input { inline-size: 100%; font-size: 1.05rem; }
.auth-hint { margin-block: 6px 0; }
.password-row { display: flex; gap: 6px; align-items: stretch; }
.password-row .auth-input { flex: 1; min-inline-size: 0; }
.password-toggle { flex: none; margin: 0; color: var(--color-accent); border: 1px solid var(--color-border-strong); border-radius: 10px; background: var(--color-bg); }
.auth-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fbeae7; color: var(--color-error-accent); border: 1px solid var(--color-error-accent); font-weight: 600; }
.auth-form .cta-btn { margin-block-end: 0; }
.auth-forgot { margin: 0; line-height: 1.5; }
.account-lines p { margin-block: 0 4px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px 4px; }
.member-reset { color: var(--color-accent); }

/* ---------------------------------------------------------------------
   UX wave 3, first pass (2026-10-26) -- the review in
   DESIGN/review-2026-10-26/ui-review.md, the findings that need no new
   words. Later rules of equal weight win, so this block overrides in place.
   --------------------------------------------------------------------- */

/* UI-03: the heirloom is a portrait card -- show it from the top (the title is
   written there), never a 4:3 band from its middle */
.recipe-hero.has-photo { aspect-ratio: 3 / 4; max-block-size: 56vh; }
.tile-art { aspect-ratio: 1 / 1; }
.recipe-art img { object-position: top center; }

/* UI-07: a 14px floor for the smallest text -- the honesty tags, chips, meta
   and the nav labels are read by people in their seventies */
.piece-tag, .chip, .tile-meta, .nav-btn, .story-meta, .scaled-mark, .week-heading,
.no-relative-footer, .welcome-progress, .timer-chip .timer-label { font-size: 0.875rem; }
.piece-tag { font-weight: 600; }
.recipe-summary, .reading-note, .scaler-hint, .correct-current-label, .cook-keep-awake-hint { font-size: 0.9375rem; }

/* UI-14: form boundaries at 3:1 (WCAG 1.4.11) -- the existing control-outline token */
.verdict-btn, .correction-box, textarea { border: 1.5px solid var(--color-border-strong); }

/* UI-20: every button answers a tap; the layout box never moves */
button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active, .cta-btn:not(:disabled):active, .secondary-btn:not(:disabled):active {
  transform: scale(0.98);
  filter: brightness(0.94);
}
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active { transform: none; }
}

/* UI-02: the recipe of the week is one compact row, not 30% of the screen */
.week-card { padding: 10px; gap: 12px; align-items: center; }
.week-art-btn { flex: 0 0 72px; align-self: stretch; }
.week-art-btn .recipe-art { inline-size: 72px; min-block-size: 72px; block-size: 100%; }
.week-title { font-size: 1.1rem; }
.week-reason { font-size: 0.875rem; }
.week-actions { padding-block-start: 2px; }
.week-actions { flex-wrap: nowrap; gap: 4px; }
.week-actions .cta-btn.small { padding-inline: 14px; }
.week-actions .text-btn.small { padding-inline: 8px; }