/* recipes.css — recipes and cooking (js/recipes.js; MEAL-PLANNING-SPEC §4,
 * §6.3, §6.5, §6.8): Recipes, Confirm quantities, a recipe, the editor and
 * its table search, cook mode and the log sheet. Classes start with
 * `recipe-` or `cook-`.
 *
 * The kit draws the rows, segments, steppers, chips, tags, fields, sheets
 * and callouts (base.css); this file lays them out. Tokens only; nothing
 * under 13 px; every control 44 px to the finger (ticks 52 px rows,
 * steppers 48). A diner's row and dot use THAT diner's accent (js/recipes.js
 * dinerAttrs sets the variables on the row). The running timer's chip
 * changes its words and wash, never flashes. A width rule answers to its
 * column (`@container`), never to the viewport (§3.3). */

/* --------------------------------------------------------------- shared */

.recipe-corner { display: contents; }
.recipe-tag { vertical-align: 1px; }
.recipe-sub .recipe-tag { margin-left: 2px; }
.recipe-note { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.recipe-note:empty { display: none; }
.recipe-problem { font: 560 var(--t-sub-size)/1.35 var(--font); color: var(--ink); text-wrap: pretty; }
.recipe-problem:empty { display: none; }
.recipe-group-title {
  padding: var(--s-4) 0 2px;
  font: 600 var(--t-sub-size)/1.2 var(--font);
  color: var(--ink-2);
}
.recipe-loading { display: grid; gap: var(--s-2); }
.recipe-skel {
  display: block;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: skel-breathe 1.4s var(--ease) infinite alternate;
}
.recipe-skel.is-short { width: 62%; }
.recipe-sheet { display: grid; gap: var(--s-3); }

/* --------------------------------------------------------------- recipes */

.recipe-list { display: grid; gap: var(--s-2); }
.recipe-pane { display: grid; gap: var(--s-2); }
.recipe-groups { display: grid; gap: var(--s-2); }
.recipe-groups .callout { margin-top: 0; }
.recipe-group { display: grid; }
.recipe-row .nav-row-main .tag { justify-self: start; margin-top: 4px; }
.recipe-row .nav-row-sub b { color: var(--ink); font-weight: 560; }
.recipe-empty-line { text-align: center; }

/* From 700 of pane (1440 and up) the rows sit in two columns (§6.3). */
@container (min-width: 700px) {
  .recipe-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .recipe-rows > .nav-row:nth-child(2) { border-top-color: transparent; }
}

/* --------------------------------------------------- Confirm quantities */

.recipe-confirm { display: grid; gap: var(--s-3); }
.recipe-confirm-recipe { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.recipe-confirm-head { display: grid; gap: 2px; }
.recipe-confirm-name { font: var(--t-row); }
.recipe-confirm-sub { font: var(--t-cap); color: var(--ink-2); }
.recipe-confirm-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
}
.recipe-confirm-line { display: inline; }
.recipe-confirm-line + .recipe-confirm-line::before { content: " \00B7  "; color: var(--ink-3); }
.recipe-confirm-line .tag { margin-left: 4px; }
.recipe-confirm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.recipe-confirm-recipe.is-done .recipe-confirm-lines { color: var(--ink-3); }
.recipe-confirmed-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ------------------------------------------------------------- a recipe */

.recipe-draft-call {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 14px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
}
.recipe-draft-words { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; font: var(--t-sub); color: var(--ink-2); }
.recipe-draft-words b { color: var(--ink); font-weight: 560; }
.recipe-draft-call .pill-btn { flex: none; }
.recipe-incomplete-call {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: var(--s-3) 14px;
  border-radius: var(--r-tile);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.recipe-incomplete-call .recipe-note { color: var(--ink); font: var(--t-sub); }
.recipe-read-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 44px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.recipe-read-k { flex: none; margin-left: auto; font: var(--t-cap); color: var(--ink-2); white-space: nowrap; }
/* A line's kcal is the written amount's: scaled, the figure would lie, so
 * it steps out until the stepper is back on the recipe's own servings. */
.recipe-ings.is-scaled .recipe-read-k { display: none; }
.recipe-serv .cook-serv-words { font: var(--t-cap); }
.recipe-plan-it { justify-items: start; }
.recipe-read { gap: var(--s-2); }
.recipe-read .cook-steps > .recipe-group-title:first-child { padding-top: var(--s-2); }

/* ------------------------------------------------------------ the editor */

.recipe-edit { display: grid; gap: var(--s-4); }
.recipe-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.recipe-edit-grid .stepper { width: 100%; }
.recipe-makes { display: grid; gap: 6px; }
.recipe-lines { display: grid; gap: var(--s-3); }
.recipe-lines:empty { display: none; }
.recipe-line { display: grid; gap: 6px; }
.recipe-line-row { display: flex; align-items: center; gap: 4px; }
.recipe-line-row .input { flex: 1 1 auto; min-width: 0; font-size: var(--t-row-size); }
.recipe-line-more {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.recipe-line-more:hover { background: var(--surface-2); }
.recipe-line-more .icon { width: 20px; height: 20px; }
.recipe-match-host { display: grid; gap: 6px; }
.recipe-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s-2);
  font: var(--t-cap);
  color: var(--ink-2);
}
.recipe-match b { color: var(--ink); font-weight: 560; }
.recipe-match.is-pending { color: var(--ink-3); }
.recipe-line.is-unresolved .recipe-match { color: var(--ink); }
.recipe-line.is-unresolved .input { box-shadow: inset 0 0 0 1px var(--ink-2); }
.recipe-line .chips { margin-top: 2px; }
.recipe-what,
.recipe-paste,
.recipe-step-text { min-height: 0; resize: none; }
.recipe-what { font: 400 var(--t-row-size)/1.35 var(--font); }
.recipe-paste { font: 400 var(--t-body-size)/1.45 var(--font); }
.recipe-paste-block { display: grid; gap: var(--s-2); }
.recipe-add { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.recipe-steps { display: grid; gap: var(--s-3); }
.recipe-steps:empty { display: none; }
.recipe-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); }
.recipe-step > .cook-step-n { margin-top: 10px; }
.recipe-step-body { display: grid; gap: 6px; }
.recipe-step-text { font: 400 var(--t-body-size)/1.4 var(--font); }
.recipe-timer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.recipe-timer-label { display: flex; align-items: center; gap: var(--s-2); font: var(--t-cap); color: var(--ink-2); }
.recipe-min { width: 88px; }
.recipe-prep-detail { display: grid; gap: var(--s-3); }
.recipe-prep-detail:empty { display: none; }
.recipe-prep-detail .stepper { max-width: 220px; }
.recipe-at-input { max-width: 160px; }
.recipe-override-why { width: 100%; }

/* The table search (Search…): a field, then the table's rows. */
.recipe-search-box { position: relative; display: block; }
.recipe-search-mark { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.recipe-search-box .input { padding-left: 42px; }
.recipe-table-results { display: grid; }
.recipe-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.recipe-table-row:first-child { border-top: 0; }
.recipe-table-row:hover { background: var(--surface-2); }
.recipe-table-name { font: var(--t-body); overflow-wrap: anywhere; }
.recipe-table-sub { grid-column: 1; font: var(--t-cap); color: var(--ink-2); }
.recipe-table-row .tag { grid-column: 2; grid-row: 1 / span 2; }

/* ------------------------------------------------------------- cook mode */

.cook { display: grid; gap: var(--s-1); }
.cook .callout { margin-top: 0; }
.cook-servs { display: grid; gap: var(--s-1); }
.cook-serv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-1) 0 var(--s-2);
}
.cook-serv + .cook-serv { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.cook-serv .stepper { width: 164px; }
.cook-serv-words { display: grid; gap: 3px; min-width: 0; font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.cook-serv-words b { color: var(--ink); font-weight: 560; }
.cook-who { overflow-wrap: anywhere; }
.cook-diner-said { display: inline-flex; align-items: center; white-space: nowrap; }
.cook-who-diners.is-pair { white-space: nowrap; }
.recipe-per-line { display: block; }
.recipe-plan-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cook-pending { color: var(--ink-2); }
.cook-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--accent-mark);
}
.cook-per { font: var(--t-cap); color: var(--ink-2); }
.cook-cols { display: grid; gap: var(--s-1); }
.cook-ings,
.cook-steps { display: grid; align-content: start; }
.cook-section { display: grid; }
.cook-comp-head { display: grid; gap: 2px; padding: var(--s-4) 0 var(--s-1); }
.cook-comp-title { font: var(--t-head); }
.cook-comp-sub { font: var(--t-cap); color: var(--ink-2); }
.cook-subgroup { padding: var(--s-2) 0 2px; font: 600 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.cook-group-note { padding-bottom: 4px; }
.cook-ing {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cook-ing:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-field); }
.cook-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: transparent;
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.cook-tick svg { width: 16px; height: 16px; stroke-width: 2.5; }
.cook-ing.is-got .cook-tick { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.cook-ing-text { flex: 1 1 auto; min-width: 0; font: var(--t-body); text-wrap: pretty; overflow-wrap: anywhere; }
.cook-ing-text .tag { margin-left: 6px; }
.cook-q { font-weight: 620; white-space: nowrap; }
.cook-ing.is-got .cook-ing-text { color: var(--ink-3); }
.cook-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
/* The step's number is its done tick: a 28 px disc with a 44 px reach. */
.cook-step-n {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 var(--t-cap-size)/1 var(--font);
}
button.cook-step-n { cursor: pointer; }
button.cook-step-n::before { content: ""; position: absolute; inset: -8px; }
.cook-step-n.is-done,
.cook-step.is-done .cook-step-n { background: var(--ink-2); color: var(--bg); }
.cook-step-body { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.cook-step-text { font: var(--t-body); text-wrap: pretty; }
.cook-step.is-done .cook-step-text { color: var(--ink-2); }
.cook-timer.is-running { background: var(--accent-wash); border-color: var(--accent-ink); color: var(--ink); font-weight: 620; }
.cook-timer-words { font-variant-numeric: tabular-nums; }
.cook-log {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin-top: var(--s-2);
  padding: var(--s-4) 0 var(--s-2);
  border-top: 1px solid var(--line);
}
.cook-log-words { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

/* Wide (the pane, 564 at 1280 and 756 at 1440): ingredients and steps side
 * by side, Log after the last step (§6.5). */
@container (min-width: 540px) {
  .cook-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 40px; align-items: start; }
}

/* --------------------------------------------------------- the log sheet */

.cook-sheet { display: grid; gap: var(--s-1); }
.cook-diners { display: grid; }
.cook-diner-group { display: grid; }
.cook-diner-group + .cook-diner-group { border-top: 1px solid var(--line); }
.cook-diner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 72px;
  padding: 8px 0;
}
.cook-diner.is-side { min-height: 56px; padding-top: 0; }
.cook-diner-who { display: grid; gap: 3px; min-width: 0; }
.cook-diner-name { display: flex; align-items: center; font: var(--t-row); }
.cook-diner-name.is-side { padding-left: 16px; font: 450 var(--t-body-size)/1.3 var(--font); color: var(--ink-2); }
.cook-diner-sub { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.cook-diner .stepper { width: 164px; }
.cook-only {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.cook-only-main { display: grid; gap: 2px; min-width: 0; }
.cook-only-label { font: var(--t-row); }
.cook-only-sub { font: var(--t-cap); color: var(--ink-2); }
.cook-switch { flex: none; }
.cook-sheet-note { padding-top: var(--s-3); border-top: 1px solid var(--line); font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }

/* A narrow column (320): a component's stepper keeps its 48 px buttons and
 * the words for whom go under it, the full width. */
@container (max-width: 300px) {
  .cook-serv { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* The pane (§6.5): one-column screens keep their rows within 640. */
.pane .recipe-confirm,
.pane .recipe-edit { max-width: 640px; }