/* Cook Mode — "White · plum & saffron" (Organic design system).
   Caprasimo display headings over Figtree body, over-rounded pill shapes. */

:root {
  --color-bg: #ffffff;
  --color-surface: #faf5f9;
  --color-text: #1e1a1f;
  --color-divider: #dbd5db;

  --color-accent: #b85c8b;      /* plum */
  --color-accent-2: #a57710;    /* saffron */

  --color-accent-100: #ffe6f6;
  --color-accent-200: #fad6e5;
  --color-accent-300: #ffaada;
  --color-accent-400: #ee8dbd;
  --color-accent-500: #c66897;
  --color-accent-600: #ab517f;
  --color-accent-700: #913968;
  --color-accent-800: #6f2c4f;
  --color-accent-900: #541238;

  --color-accent-2-100: #ffefd3;
  --color-accent-2-200: #f0dfc3;
  --color-accent-2-300: #f7c56d;
  --color-accent-2-400: #d9a850;
  --color-accent-2-500: #b28324;
  --color-accent-2-600: #996b00;
  --color-accent-2-700: #805400;
  --color-accent-2-800: #624000;
  --color-accent-2-900: #492800;

  --color-neutral-100: #f4f0f3;
  --color-neutral-200: #e3e0e3;
  --color-neutral-300: #d4cad2;
  --color-neutral-400: #b7aeb6;
  --color-neutral-500: #928991;
  --color-neutral-600: #7a7179;
  --color-neutral-700: #635b62;
  --color-neutral-800: #4c454b;
  --color-neutral-900: #342e33;

  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-card: 32px;

  --shadow-sm: 0 1px 2px rgba(46, 43, 37, 0.14);
  --shadow-lg: 0 12px 32px rgba(46, 43, 37, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden; /* only inner regions scroll */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

img { display: block; max-width: 100%; }
button { touch-action: manipulation; } /* no double-tap zoom when tapping a timer twice */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

#app { height: 100%; height: 100dvh; } /* dvh: stay above mobile browser toolbars */

/* ── shared controls ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 400; font-size: 14px; line-height: 1.2;
  color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 999px;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-600); }
.btn-primary:active:not(:disabled) { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active:not(:disabled) { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { padding: 0; }

.input {
  width: 100%;
  font: inherit; font-size: 16px; color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 6px 14px;
}
.input::placeholder { color: var(--color-neutral-500); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* Segmented control: buttons with aria-pressed */
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: 999px;
}
.seg-opt {
  all: unset; box-sizing: border-box; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }
.seg-opt[aria-pressed="false"]:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.seg-opt[aria-pressed="true"]:focus-visible { outline-color: var(--color-bg); }

/* Instructions: All steps | One at a time */
.seg-mode .seg-opt { min-height: 40px; padding-inline: 16px; font-size: 14px; }

/* Landing: Recent | Popular. Deliberately quiet — only "Open recipe" gets the solid accent. */
.seg-quiet .seg-opt {
  min-height: 44px; padding-inline: 20px; font-size: 15px;
  flex-direction: column; color: var(--color-neutral-700);
}
.seg-quiet .seg-opt[aria-pressed="true"] {
  background: var(--color-neutral-200); color: var(--color-text); font-weight: 600;
}
.seg-quiet .seg-opt[aria-pressed="true"]:focus-visible { outline-color: var(--color-accent); }
/* Reserve the bold label's width so the control doesn't shift when the selection changes. */
.seg-quiet .seg-opt::after {
  content: attr(data-label); font-weight: 600;
  height: 0; overflow: hidden; visibility: hidden;
}

.tag {
  display: inline-flex; align-items: center; font-size: 12px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;
}
.tag-time { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-serves { background: var(--color-neutral-100); color: var(--color-neutral-800); }

.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

.empty-line { margin: 0; font-size: 15px; color: var(--color-neutral-700); }

/* ── Landing ─────────────────────────────────────────────────────── */

.home-scroll { height: 100%; overflow-y: auto; }
.home {
  max-width: 600px;
  padding: calc(var(--space-8) * 1.5) var(--space-6) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.hero { display: flex; flex-direction: column; gap: var(--space-4); }
.icon-badge {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  display: grid; place-items: center;
}
.home h1 { font-size: 44px; text-wrap: balance; }
.home .subhead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--color-neutral-700); text-wrap: pretty; }

.url-form { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.url-form .input { flex: 1 1 260px; min-height: 48px; }
.url-form .btn-primary { min-height: 48px; padding-inline: var(--space-6); font-size: 16px; }
.status-line { margin: 0; font-size: 14px; color: var(--color-accent-700); }

.list-block { display: flex; flex-direction: column; gap: var(--space-4); }
/* ~5 lines of air above, so the eye stays on the URL field first */
.list-prompt { margin: calc(17px * 1.5 * 5) 0 0; font-size: 17px; line-height: 1.5; color: var(--color-neutral-700); }
.seg-row { display: flex; }
.list { display: flex; flex-direction: column; gap: var(--space-2); }
.row {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.row:hover { background: var(--color-accent-100); }
.row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.row-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  background: var(--color-accent-200); color: var(--color-accent-800);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 18px;
}
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-family: var(--font-heading); font-size: 17px; line-height: 1.25; }
.row-sub {
  font-size: 13px; color: var(--color-neutral-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-chev { flex: none; color: var(--color-accent); display: grid; place-items: center; }

/* ── Recipe ──────────────────────────────────────────────────────── */

.recipe {
  height: 100%; max-width: 680px; display: flex; flex-direction: column;
  --tray-h: 0px; /* height of the timer tray, when it's showing */
}
.r-header {
  flex: none; padding: var(--space-4) var(--space-6) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.r-topbar { display: flex; align-items: center; gap: var(--space-2); }
.r-back { width: 44px; height: 44px; margin-left: -10px; flex: none; }
.r-source {
  min-width: 0; font-size: 13px; color: var(--color-accent-700); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.r-source:hover { color: var(--color-accent-800); }
.r-title { font-size: 30px; text-wrap: balance; }
.r-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Height and opacity are driven by syncHero() as the active pane scrolls. */
.hero-wrap { flex: none; padding: 0 var(--space-6); overflow: hidden; }
.hero-img {
  height: min(200px, 22vh); border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-neutral-100);
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-empty { height: 100%; display: grid; place-items: center; color: var(--color-neutral-400); }

.tabbar-wrap { flex: none; padding: var(--space-2) var(--space-6); }
.tabbar {
  display: flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.tab {
  all: unset; box-sizing: border-box; cursor: pointer;
  flex: 1; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-family: var(--font-heading); font-size: 16px;
  color: var(--color-text);
}
.tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tab[aria-selected="true"] { background: var(--color-accent); color: var(--color-bg); }
.tab-badge {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.tab[aria-selected="true"] .tab-badge { background: var(--color-bg); }

.panes { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; }
/* Hidden, not removed: display:none would throw away the pane's scroll position. */
.pane.is-off { visibility: hidden; }
/* No taller than its content: the pane can't be scrolled past the last line
   into empty space. The collapsing hero is handled in JS (see syncHero). */
.pane-body { min-height: 0; }

.mode-row { padding: var(--space-3) var(--space-6) 0; display: flex; }
.no-steps { padding: var(--space-4) var(--space-6); }

.steps {
  list-style: none; margin: 0;
  padding: var(--space-4) var(--space-6) calc(var(--space-8) + var(--tray-h));
  display: flex; flex-direction: column; gap: var(--space-6);
}
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
.step-num {
  width: 36px; height: 36px; flex: none; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  display: grid; place-items: center; font-family: var(--font-heading); font-size: 16px;
}
.step-text {
  margin: 0; padding-top: 5px; min-width: 0;
  font-size: 17px; line-height: 1.6; text-wrap: pretty; overflow-wrap: break-word;
}

/* Both chips are atomic boxes: one moves to the next line whole rather than
   splitting ("2 | celery"), and wraps inside itself only if it's wider than the
   whole column ("1 hour 45 minutes | 1:44:59" on a small phone). The 1em radius
   is a pill on one line and a rounded box on two; the -1px margin cancels the
   padding so lines with chips are no taller than lines without. */

/* Ingredient mention with its quantity: "225 g butter" */
.chip-ing {
  display: inline-block; max-width: 100%; margin-block: -1px;
  padding: 1px 9px; border-radius: 1em;
  background: var(--color-accent-2-100); color: var(--color-accent-2-900);
}
.chip-ing b { font-weight: 700; white-space: nowrap; }

/* Duration you can tap to time. Baseline-aligned so its text sits on the line
   of the sentence around it; the icon centers itself. */
.chip-timer {
  all: unset; cursor: pointer;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
  max-width: 100%; margin-block: -1px; border-radius: 1em;
  padding: 1px 10px 1px 8px;
  font-weight: 600; vertical-align: baseline;
  background: transparent; color: var(--color-accent-800);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}
.chip-timer svg { flex: none; align-self: center; }
.chip-timer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chip-timer[data-state="running"] { background: var(--color-accent); color: var(--color-bg); }
.chip-timer[data-state="paused"] { background: var(--color-accent-100); }
.chip-timer[data-state="done"] {
  background: var(--color-accent-2-200); color: var(--color-accent-2-900);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-2-500);
}
.chip-clock {
  font-variant-numeric: tabular-nums;
  padding-left: 6px; margin-left: 2px; border-left: 1.5px solid currentColor;
}

/* One step at a time */
.focus {
  padding: var(--space-6) var(--space-6) calc(var(--space-6) + var(--tray-h));
  display: flex; flex-direction: column; gap: var(--space-6);
}
.focus-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.focus-count { font-size: 13px; font-weight: 600; color: var(--color-accent-2-800); }
.progress { display: flex; gap: 4px; }
.progress-seg {
  all: unset; cursor: pointer; position: relative;
  flex: 1; height: 8px; border-radius: 999px; background: var(--color-accent-100);
}
.progress-seg.on { background: var(--color-accent); }
.progress-seg::before { content: ""; position: absolute; inset: -14px 0; } /* a tap target taller than 8px */
.progress-seg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.focus-step .step-num { width: 52px; height: 52px; font-size: 22px; }
.focus-step .step-text { padding-top: 6px; font-size: 24px; line-height: 1.5; }

.focus-nav {
  flex: none; padding: var(--space-2) var(--space-6) var(--space-3);
  display: flex; gap: var(--space-2); background: var(--color-bg);
}
.focus-nav .btn { min-height: 56px; padding-inline: var(--space-6); font-size: 16px; }
.focus-nav .btn-primary { flex: 1; font-size: 17px; }

/* Ingredients (the tab, and "In this step") */
.ing-panel {
  padding: var(--space-4) var(--space-6) calc(var(--space-8) + var(--tray-h));
  display: flex; flex-direction: column; gap: var(--space-6);
}
.ing-group { display: flex; flex-direction: column; gap: var(--space-2); }
.ing-group h6 {
  margin: 0 0 var(--space-1); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-accent-2-800);
}
.ing-rows { display: flex; flex-direction: column; gap: var(--space-1); }
.ing-row {
  display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  column-gap: var(--space-4); align-items: baseline;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.ing-qty { font-family: var(--font-heading); font-size: 18px; color: var(--color-accent-800); white-space: nowrap; }
.ing-name { font-size: 17px; line-height: 1.4; }
.ing-row.no-qty .ing-name { grid-column: 1 / -1; } /* "Salt, to taste": nothing to put in the quantity column */

/* Timer tray: floats over the bottom of the panes, on either tab */
.tray {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--space-3) var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  pointer-events: none; /* only the pills take taps */
}
.tray-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; box-shadow: var(--shadow-lg);
  background: var(--color-accent); color: var(--color-bg);
}
.tray-pill[data-state="paused"] { background: var(--color-accent-100); color: var(--color-accent-800); }
.tray-pill[data-state="done"] { background: var(--color-accent-2-700); color: var(--color-bg); }
.tray-jump {
  all: unset; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 6px 0 14px; border-radius: 999px;
}
.tray-label { font-size: 13px; font-weight: 600; opacity: 0.85; }
.tray-clock { font-family: var(--font-heading); font-size: 20px; font-variant-numeric: tabular-nums; min-width: 52px; }
.tray-btn {
  all: unset; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
}
.tray-toggle { background: color-mix(in srgb, currentColor 16%, transparent); }
/* The pill itself is accent-colored, so ring in the pill's own text color. */
.tray-jump:focus-visible, .tray-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }