/* =============================================================================
   PREP — house prep recipes (syrups, juices, infusions, coffee, other).
   docs/PREP-SECTION-PLAN.md §7 is the UI spec this file styles.

   Package prep-E-css. Owns ONLY this file. Deviation from §7.4 (which said
   "append to ios-kit.css"): shipped as a standalone stylesheet instead, for
   the same reason messages.css is standalone — a NEW, disjoint file has zero
   collision surface with whatever else is in flight on ios-kit.css, and this
   feature's screens (prep-screen.jsx, Package D) are themselves a new file,
   not a patch to an existing screen. Nothing here modifies an existing rule
   in any other stylesheet; this file is purely additive.

   WIRING NOTE for whichever package does final integration: this file is not
   yet linked from index.html (that file isn't owned by any package listed in
   PREP-SECTION-PLAN.md §8, including the "integration seam" package, which
   only touches app.jsx/Icons.jsx/build-app.mjs). Add, after the messages.css
   line (same `?v=NN` cache-buster as the rest):
     <link rel="stylesheet" href="assets/css/prep.css?v=NN">
   It must load AFTER ios-kit.css, web-kit.css and the rehaul-*.css files
   (it reuses their classes and one of their @keyframes) — appending after
   messages.css satisfies that.

   NAMING: every class here is prefixed `.prep-` and is genuinely new markup
   introduced by the three Prep screens. Everything the UI spec asks to reuse
   is reused as-is, unmodified, from the existing kit — nothing is redefined
   here. That reuse map, so Package D (prep-screen.jsx) knows what already
   exists and doesn't need inventing:
     Screen chrome:     .ios-screen__header/__eyebrow/__title/__sub, .bkr-head
     Search + filters:  .ios-search, .ios-chip-rail, .bk-chip (+ .is-active)
     Grouped list:      .ios-section, .ios-section__title, .ios-section__count,
                         .ios-list, .ios-list__row(+ -text/-title/-sub/-chev)
     Add-CTA row:       .bkr-addrow, .bkr-addbtn (Bottles' "+ Add X" pattern)
     Empty states:       .ios-empty(__title/__sub), .bkr-empty-wrap
     Skeletons:          .bk-skeleton-stack, .bk-skeleton--title/--text/--tile
     Sheet chrome:       .ios-sheet-backdrop, .ios-sheet(__grabber/__head/
                         __title/__body/__footer/__photo-preview/__photo-empty/
                         __actions-row)
     Form atoms:         .bk-field(__label), .bk-input, .bk-select, .bk-textarea,
                         .bk-meta-grid (paired fields, e.g. yield qty + unit),
                         .bk-hint, .ios-form
     Buttons:            .bk-button(--primary/--secondary/--ghost/--danger)
     Segmented + presets: .ios-segmented, .ios-bc-presets, .ios-bc-preset
                         (scaler mode toggle + yield preset chips, §2.3/§7.2 —
                         reused verbatim per the plan, only the preset values
                         differ, which is JS not CSS)
     Scaled ingredient
       list:              .ios-bc-recipe(__row/__name/__measure)
     Allergen convention: .bk-menu-tag, .bk-tag--v/--vg/--ngci (food menu's
                         V/VG/NGCI pill, §2.1)
     Repeatable row
       chrome (generic):  .rh-row-remove, .rh-add-row (per-row × and the
                         dashed "+ Add …" affordance — not shape-specific,
                         reused for both ingredient and method-step rows below)
     Removable free-text
       tag chips:         .rh-chip-set, .rh-chip(__label/__x) (custom-category
                         chip pattern, reused for the free-text "other"
                         allergen tags §7.3)
     Small status pill:   .rh-badge(--mute) (template provenance / source tag)
     Entrance keyframe:   @keyframes bkr-rise (rehaul-reference.css)

   What follows is only the handful of shapes the kit doesn't already have:
   an allergen pill row outside the food-menu context, the yield-scaler /
   method / info layout on the detail screen, a photo hero for the detail
   screen, a provenance footnote, and two repeatable-row shapes (ingredient:
   name + free-text amount; method: a single numbered step) sized differently
   from DrinkForm's name/qty/unit row so they're new grid track counts, not a
   reskin of `.rh-ing-row`.

   DESIGN.md compliance: transform/opacity-only motion, --ease-out enters,
   :active{scale(0.97)} press, no bounce, no pure #000/#fff (every colour
   below is a var() token), hairline dividers over nested cards. Both themes
   covered by the shared tokens; explicit [data-theme="dark"] overrides only
   where a fixed rgba() wash needs re-tuning (mirrors the pattern already
   used for .ios-modal-card__photo in ios-kit.css). The global
   prefers-reduced-motion block (colors_and_type.css) neutralises every
   animation/transition below automatically — no local override needed.
   ============================================================================= */

/* =============================================================================
   1. LIST SCREEN — IOSPrep
   ============================================================================= */

/* Allergen pill row under a recipe's name in the grouped/flat list (§7.1: "name,
   yield sub-label, a shelf-life hint, allergen tag chips ... chevron"). The
   yield label and shelf-life hint are just two stacked .ios-list__row-sub
   lines (that class already stacks cleanly via .ios-list__row-text's flex
   column + 2px gap) — no new class needed for those. This is only for the
   pill row itself, since nothing in the kit lays out wrapped tag chips
   outside the food-menu dish-name inline context. */
.prep-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
/* .bk-menu-tag ships a baked-in margin-left for its usual spot right after a
   dish name inline; here the chips are their own row, spaced by flex gap. */
.prep-tags .bk-menu-tag { margin-left: 0; }
/* Tighter top gap when the tag row sits inside a list row's stacked text
   column, vs. the more generous gap used on the detail screen (§3 below). */
.ios-list__row-text > .prep-tags { margin-top: 2px; }

/* Free-text allergens (nuts, egg, etc.) aren't part of the V/VG/NGCI
   convention (§2.1), so they can't borrow .bk-tag--v/--vg/--ngci's colour
   coding without implying a false equivalence. A quiet neutral pill instead —
   Impeccable's low-chroma-neutral rule, not a fourth invented hue. */
.bk-menu-tag.prep-tag--other {
  background: var(--bg-sunken);
  color: var(--fg-muted);
}
[data-theme="dark"] .bk-menu-tag.prep-tag--other {
  background: rgba(255, 255, 255, 0.06);
}

/* =============================================================================
   2. TEMPLATES PICKER SHEET — opened from the list screen (§7.1), manager-only.
   Structural chrome is .ios-sheet/.ios-list/.ios-list__row (reused as-is); this
   is only the template-row description preview and its "starter library"
   provenance pill.
   ============================================================================= */
.prep-template-row__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font: var(--type-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}
/* Reuses .rh-badge--mute (rehaul-admin-settings.css) for the pill itself;
   this only tucks it into the row's text column with the right rhythm. */
.ios-list__row-text > .rh-badge { margin-top: 3px; align-self: flex-start; }

.prep-templates-empty {
  /* All published templates already imported into this venue — a quieter
     variant of .ios-empty's copy, same visual shell, no new rule needed
     beyond spacing inside a sheet body rather than a full screen. */
  margin: 4px 0 0;
}

/* =============================================================================
   3. DETAIL SCREEN — IOSPrepDetail
   ============================================================================= */

/* ---- Optional photo hero (§7.2: "optional photo hero if photoUrl set") ---- */
.prep-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 2px 16px 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-sunken), var(--surface-sunken));
  box-shadow: var(--shadow-xs);
  animation: bkr-rise 320ms var(--ease-out) both;
}
[data-theme="dark"] .prep-hero {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.10);
}
.prep-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Loading-state placeholder, same slot, before the real photo/skeleton swap. */
.prep-hero.bk-skeleton { margin: 2px 16px 4px; }

/* ---- Yield scaler (§7.2/§2.3) ---------------------------------------------
   Mode toggle: .ios-segmented. Numeric input: .bk-field + .bk-input. Preset
   chips: .ios-bc-presets/.ios-bc-preset — all reused verbatim. This is only
   the thin wrapper that gives the block the same vertical rhythm as the rest
   of the screen's .ios-form sections when it sits directly under the hero /
   header rather than inside a full .ios-form (the detail screen mixes a
   scaler block with a read-only recipe below, not one continuous form). */
.prep-scaler {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Method: numbered steps (§7.2: "Method: numbered list from
   methodSteps") — read-only render, distinct from the editable step ROWS in
   §4 below. One bordered surface with internal hairlines, the same idiom as
   .ios-bc-recipe / .bk-menu-list (a single surface on the page canvas, not a
   card nested inside another card). ---------------------------------------- */
.prep-method {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.prep-method__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.prep-method__step:last-child { border-bottom: 0; }
.prep-method__num {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-action-soft);
  color: var(--accent-action);
  font: 700 0.72rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.prep-method__text {
  flex: 1;
  min-width: 0;
  font: var(--type-body-sm);
  line-height: 1.55;
  color: var(--fg);
  padding-top: 2px;
}

/* ---- Shelf life / storage notes (§7.2: "a small labelled section, not
   buried in body text") — same bordered-surface-with-hairlines idiom as the
   method list above, key/value rows instead of numbered steps. ------------ */
.prep-info {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.prep-info__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.prep-info__row:last-child { border-bottom: 0; }
.prep-info__label {
  font: 700 0.66rem/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-subtle);
}
.prep-info__value {
  font: var(--type-body-sm);
  line-height: 1.5;
  color: var(--fg);
}

/* ---- Allergens (§7.2: "tag chip row, same visual language as the food
   menu's allergen tags") — reuses .prep-tags from §1, just spaced for a
   standalone section rather than tucked under a list row's title. --------- */
.ios-section > .prep-tags { margin-top: 2px; gap: 6px; }

/* ---- Provenance footnote (§7.2: imported-from-template note) ------------- */
.prep-provenance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 16px 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font: var(--type-caption);
}
[data-theme="dark"] .prep-provenance { background: rgba(255, 255, 255, 0.05); }
.prep-provenance svg { flex: 0 0 auto; color: var(--fg-subtle); }
/* The "link back to the source" is a same-screen action (open the template
   preview), not a real href — styled as an inline text button so it doesn't
   read as a dead/underlined link. */
.prep-provenance__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-action);
  font-weight: 600;
  cursor: pointer;
}
.prep-provenance__link:active { opacity: 0.7; }

/* ---- Manager actions: Edit / Delete (§7.2) -------------------------------- */
.prep-detail__actions {
  display: flex;
  gap: 8px;
  padding: 4px 16px 8px;
}
.prep-detail__actions .bk-button { flex: 1; }

/* =============================================================================
   4. MANAGER EDITOR SHEET — PrepEditor (§7.3)
   Structural chrome (.ios-sheet-backdrop/.ios-sheet/__grabber/__head/__body/
   __footer), fields (.bk-field, .bk-input, .bk-select, .bk-meta-grid for the
   paired yield qty + unit), and the photo picker slot (.ios-sheet__photo-*)
   are all reused unmodified from BottleEditor's pattern per the plan. Only
   the two repeatable-row shapes below are new: prep's ingredient row is
   {name, free-text amount} (2 fields), not DrinkForm's {name, qty, unit}
   (3 fields), and a method-step row is a single text field. Both reuse the
   existing generic row chrome (.rh-row-remove for the ×, .rh-add-row for the
   dashed add affordance) — only the grid track counts are new.
   ============================================================================= */

/* ---- Ingredient rows: name + free-text amount ("500g", "10 drops") ------- */
.prep-ing-rows { display: flex; flex-direction: column; }
.prep-ing-row {
  display: grid;
  grid-template-columns: 1fr 108px 38px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.prep-ing-row:first-child { padding-top: 2px; }
.prep-ing-row:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.prep-ing-row .bk-input { min-width: 0; }
@media (max-width: 360px) {
  .prep-ing-row { grid-template-columns: 1fr 84px 38px; gap: 6px; }
}

/* ---- Method step rows: a numbered badge + one text field ----------------- */
.prep-step-rows { display: flex; flex-direction: column; }
.prep-step-row {
  display: grid;
  grid-template-columns: 28px 1fr 38px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.prep-step-row:first-child { padding-top: 2px; }
.prep-step-row:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.prep-step-row .bk-input { min-width: 0; }
.prep-step-row__num {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-action-soft);
  color: var(--accent-action);
  font: 700 0.72rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ---- Allergens: V/VG/NGCI toggle chips reuse plain .bk-chip.is-active
   (identical to the food-menu editor's toggle, admin-screens.jsx:1390 — no
   new CSS needed for those). Free-text "other" tags get an add row plus the
   existing removable-chip pattern (.rh-chip-set/.rh-chip/__label/__x). ----- */
.prep-tag-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.prep-tag-add .bk-input { flex: 1; }

/* A small caption above the free-text add row, distinct from .bk-field__label
   (which sits above a single input) since this sits above a chip set + add
   row combo. Same type ramp as .bk-field__label for visual continuity. */
.prep-editor__note {
  font: 600 0.78rem/1 var(--font-display);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
  margin: 2px 0 -2px;
}