/* ==========================================================================
   COCAMOO — RECIPE PAGE
   Round 7 (docs/design/APP-DESIGN-HANDOFF.md, "Recipe page"; boards
   P-Recipe, D-Recipe, P-States). Everything the Webflow embeds did lives
   here too.

   SECTIONS
     1. Page, card, top buttons, head, photo, rails
     2. Recipe text (paragraphs, lists, checkboxes, notes)
     3. Option carousels
     4. Step rail, Prep Steps box, option picker at the heading
     5. Shopping ticket (ribbon; a card in the right rail on desktop)
     6. Tips and end-of-line tags
     7. Nutrition, author's note, Your notes, Equipment
     8. Locked recipes, shared links, Share, more recipes
     9. Overlay (video / photo) and toast
   ========================================================================== */

/* How far step numbers and the Prep Steps box reach into the left margin
   (never more than the card's side padding, --card-pad below) */
:root { --recipe-side-extend: 50px; }
/* phones: the step bands reach 20px past a 16px card padding, so the card
   clips them at its edge (they ran 4px past the screen and made it scroll) */
@media (max-width: 699px) { .recipe-card { overflow-x: clip; } }
@media (max-width: 899px) { :root { --recipe-side-extend: 40px; } }
@media (max-width: 699px) { :root { --recipe-side-extend: 20px; } }

/* ==========================================================================
   1. PAGE, CARD, TOP BUTTONS, HEAD, PHOTO, RAILS
   The plain ground with the desktop glow (base.css), plus sparse line
   doodles in the recipe's course colour in the margins from 700px. The
   white card holds the recipe. On phones the card is the whole page: the
   tab bar steps aside (body.no-tabbar) and back, Save and ··· float as
   glass buttons over the top. (Nov 13, Dave: the tab bar stays now,
   body.tabbar-auto: it slides away as you scroll down to read and comes
   back as you scroll up; cook mode hides it.)
   --card-pad: the card's side padding. The photo and the ribbon reach past
   the card's edges by --bleed (wider than the card on desktop, as on the
   boards; on phones a negative bleed keeps them 12px in from the screen).
   ========================================================================== */
.recipe-page { --card-pad: 16px; --bleed: -12px; position: relative; isolation: isolate; }
@media (min-width: 700px) { .recipe-page { --card-pad: 48px; --bleed: 10px; } }
@media (min-width: 900px) { .recipe-page { --card-pad: 56px; --bleed: 12px; } }
/* room between the card and the rails, so the photo's overhang never
   crowds them */
@media (min-width: 900px) { .recipe-page.shell { column-gap: 40px; } }
@media (min-width: 1200px) { .recipe-page.shell { column-gap: 48px; } }

/* doodles: one tile of fine line drawings (leaves, lemons, whisks, chillies,
   spoons, garlic) repeated over the whole page behind everything, in the
   recipe's course colour (--cat on <body>) at 16%, through a mask.
   Nov 13 (Dave): redrawn from the solid icon set, packed tight like the
   Webflow original: public/assets/img/doodles.svg, made by
   tools/doodle-tile.js (bump the ?v= when it's rebuilt) */
@media (min-width: 700px) {
  body.page-recipe { position: relative; }
  body.page-recipe::before {
    content: "";
    position: fixed; /* Nov 13 (Dave): the doodles hold still while the page scrolls over them (was absolute) */
    inset: 0;
    z-index: -1;
    background: var(--cat, var(--muted));
    opacity: .16;
    -webkit-mask: url("/assets/img/doodles.svg?v=1") 0 0 / 440px repeat;
            mask: url("/assets/img/doodles.svg?v=1") 0 0 / 440px repeat;
    pointer-events: none;
  }
  [data-theme="dark"] body.page-recipe::before { opacity: .3; } /* course colours are darker than the dark ground needs */
}

/* the columns: main up to 760px wide (the .shell grid is in base.css) */
.recipe-main { width: 100%; max-width: 760px; margin: 0 auto; }
@media (min-width: 900px) {
  .recipe-page.shell.has-right { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (min-width: 1200px) {
  .recipe-page.shell.has-left.has-right { grid-template-columns: 210px minmax(0, 1fr) 300px; }
}
/* "On this page" only where it fits beside the card */
@media (max-width: 1199px) { .recipe-left { display: none; } }
.recipe-right:empty { display: none; }
@media (max-width: 899px) { .recipe-right { display: none; } }
/* (the right rail scrolls with the page: it's taller than a window) */

/* phones: the card is the page */
@media (max-width: 699px) {
  body.page-recipe { background: var(--card); }
  .recipe-page.shell { padding: 0 0 40px; }
}

.recipe-card {
  position: relative;
  padding: calc(64px + env(safe-area-inset-top)) var(--card-pad) 32px;
  background: var(--card);
  font-size: 16px;
}
@media (min-width: 700px) {
  .recipe-card {
    padding: 44px var(--card-pad) 48px;
    border-radius: var(--r-5);
    box-shadow: var(--raise), 0 30px 60px -30px rgba(24, 24, 27, .18);
  }
}

/* ---- back, Save and ··· ---- */
.recipe-tools {
  position: absolute;
  z-index: 20;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tools-gap { flex: 1 1 auto; }
.glass-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  cursor: pointer;
}
.glass-btn svg { width: 20px; height: 20px; }
.tool-more svg { fill: currentColor; }
.tool-save svg { color: var(--plum-icon); } /* Oct 29: a glass pill like Up next; the page's one main button is Add N to my list */
.course-chip::after { content: ""; position: absolute; inset: -8px -4px; } /* a 44px tap area round the small chip */
.tool-save[hidden] { display: none; }
.recipe-tools [hidden] { display: none; }
/* "✓ In Library" where Save was, and the phone's List shortcut: glass pills */
.tool-pill {
  width: auto;
  gap: 6px;
  padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tool-pill svg { width: 18px; height: 18px; }
/* "+ Up next" in the toolbar (Dave, Oct 29; it replaced "✓ Saved ×" and the
   button under the title): a glass pill; on, a plum tick and a plum tint */
.tool-upnext svg { color: var(--plum-text); }
.recipe-tools .glass-btn.tool-upnext.is-on { background: var(--plum-tint); box-shadow: inset 0 0 0 1.5px var(--plum-glow); }
.tool-list .seg-count { margin-left: 2px; }
/* phones (the only place List shows): its icon and count, like a cart badge,
   so back, List, Save, Up next and ··· fit in one row (Oct 29) */
@media (max-width: 699px) {
  .recipe-tools .tool-list { padding: 0 12px 0 11px; }
  /* Nov 12 (Dave): "Add to Library" on desktop, "+ Library" here. With
     the List shortcut showing, the row is tight: "+ Library" keeps its +
     (without it, "Library" read like a link) and Up next gives up its own */
  .tool-save .save-add { display: none; }
  .recipe-tools:has(.tool-list:not([hidden])) .tool-list { padding: 0 10px 0 9px; }
  .recipe-tools:has(.tool-list:not([hidden])) .tool-save { gap: 4px; padding: 0 12px 0 9px; }
  .recipe-tools:has(.tool-list:not([hidden])) .tool-upnext svg { display: none; }
  .recipe-tools:has(.tool-list:not([hidden])) .tool-upnext { padding: 0 12px; }
  .recipe-tools .tool-upnext { padding: 0 13px 0 10px; }
}
@media (max-width: 380px) { .recipe-tools { gap: 6px; } }
@media (max-width: 370px) { .recipe-tools:has(.tool-list:not([hidden])) .tool-save svg { display: none; } .recipe-tools:has(.tool-list:not([hidden])) .tool-save { padding: 0 12px; } }
@media (min-width: 700px) {
  .tool-list { display: none; } /* the top bar's Shopping list does this job */
  .recipe-tools .glass-btn.tool-pill { width: auto; border-radius: var(--r-pill); }
}
@media (min-width: 700px) {
  .recipe-tools { top: 18px; left: 18px; right: 18px; }
  .recipe-tools .glass-btn { width: 42px; height: 42px; background: var(--card); box-shadow: var(--raise), 0 0 0 1px var(--line); }
}
@media (min-width: 1200px) { .tool-back { visibility: hidden; } } /* the left rail has the way back */

/* the ··· menu */
.more-menu {
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border-radius: var(--r-4);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--shadow-menu);
  animation: panel-in .16s var(--ease);
}
.more-menu[hidden] { display: none; }
.more-item {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-3);
  background: none;
  color: var(--ink);
  font: 500 16px var(--font-body);
  text-align: left;
  cursor: pointer;
  /* Nov 10: links (Edit recipe, See the original) sit centred like the buttons */
  display: flex;
  align-items: center;
  text-decoration: none;
}
.more-item:hover, .more-item:focus-visible { background: var(--well-bg); outline: none; }
.more-item[hidden] { display: none; }
.more-item.is-danger { color: var(--error); }

/* Add to folder… (7-page.js): a glass sheet, from the bottom on phones and
   in the middle from 700px. Folders as plum checkboxes with counts, a New
   folder field, Done. */
.folder-layer[hidden] { display: none; }
.folder-scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); animation: fade-in .2s ease; }
.folder-sheet {
  position: fixed; z-index: 91; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 14px; max-height: 80vh; overflow-y: auto;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius: var(--r-5) var(--r-5) 0 0;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), 0 -20px 50px rgba(0, 0, 0, .18);
  animation: folder-up .24s var(--ease);
}
@keyframes folder-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .folder-sheet { animation: none; } }
@media (min-width: 700px) {
  .folder-sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 400px; transform: translate(-50%, -50%); border-radius: var(--r-5); padding-bottom: 20px; animation: none; }
}
.folder-h { font: 700 24px var(--font-display); }
.folder-list { display: flex; flex-direction: column; gap: 2px; }
.folder-check { min-height: 44px; font-size: 16px; }
.folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-n { font-size: 14px; color: var(--soft); }
.folder-none { font-size: 15px; color: var(--muted); }
.folder-new { display: flex; gap: 8px; }
.folder-new input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--well-bg); box-shadow: var(--well); color: var(--ink); font: 400 16px var(--font-body);
}
.folder-new input:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--plum-icon); }

/* ---- the head: course chip, title, details, description ---- */
.recipe-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Nov 10: on desktop the tools row (18px down, 42px tall) floats over the
   card's top; a wide kicker ("Soups & Salads" + "Written with Cocamoo") ran
   under it. Start the head below the row (phones already do: 64px). */
@media (min-width: 700px) { .recipe-head { padding-top: 30px; } }
.recipe-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.course-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  position: relative;
  background: var(--ground);
  box-shadow: var(--raise);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.course-chip:hover { color: var(--plum-text); }
.course-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--muted)); }
.free-flag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--plum-text); }
.free-flag { color: var(--ink); } /* audit: plum is for things you can tap */
.tk-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--well-bg);
  box-shadow: var(--well);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.recipe-title {
  margin-top: 14px;
  font: 700 clamp(30px, 6vw, 46px)/1.08 var(--font-display);
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
/* the details line, set like the store sections in the shopping list:
   small capitals, a little letter-spacing, Ink */
.recipe-meta { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .07em; line-height: 1.6; text-transform: uppercase; color: var(--ink); }
.recipe-meta .sep { margin: 0 4px; color: var(--soft); }
.recipe-meta .meta-item { white-space: nowrap; } /* "4-6 servings" never splits (walkthrough, Oct 29) */
.recipe-desc { max-width: 520px; margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (min-width: 700px) { .recipe-desc { font-size: 17px; } }
.recipe-desc.tk-line + .recipe-desc { margin-top: 8px; }

/* ---- the photo, with See the video and the heart on it as glass ---- */
.recipe-photo { position: relative; margin: 26px calc(-1 * (var(--card-pad) + var(--bleed))) 0; }
@media (min-width: 700px) { .recipe-photo { margin-top: 30px; } }
.recipe-hero {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-5);
  background: var(--band);
  box-shadow: 0 22px 44px -12px rgba(24, 24, 27, .35);
  cursor: zoom-in;
}
@media (min-width: 900px) { .recipe-hero { aspect-ratio: 16 / 11; border-radius: var(--r-5); } }
.recipe-photo::after { /* the soft shade at the bottom of every photo */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--photo);
  border-radius: var(--r-5);
  pointer-events: none;
}
@media (min-width: 900px) { .recipe-photo::after { border-radius: var(--r-5); } }
.photo-heart { position: absolute; z-index: 2; top: 12px; right: 12px; }
.glass-pill {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  font: 700 14px var(--font-body);
  cursor: pointer;
}
.play-disc { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--plum-button); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); color: var(--white); }
.play-disc svg { width: 10px; height: 10px; fill: currentColor; }

/* the heart: an outline that fills with plum */
[data-heart] svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: transform .15s var(--ease); }
[data-heart][aria-pressed="true"] { color: var(--plum-icon); }
[data-heart][aria-pressed="true"] svg { fill: currentColor; animation: rs-pop .26s ease-out; }

/* ---- the left rail: the way back and "On this page" ---- */
.recipe-left { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
.back-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--plum-text); }
.toc { display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.toc[hidden] { display: none; }
.toc-head { padding: 0 6px 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc-list a { display: flex; align-items: baseline; gap: 8px; padding: 7px 8px; border-radius: var(--r-3); color: var(--ink); font-size: 14px; line-height: 1.3; }
.toc-list a:hover { background: var(--well-bg); color: var(--ink); }
.toc-list a { transition: background .15s, box-shadow .15s; }
.toc-list a.is-current { background: var(--well-bg); box-shadow: var(--well); font-weight: 700; color: var(--plum-text); }
.toc-n { flex: 0 0 20px; font: 700 12px var(--font-display); color: var(--plum-text); text-align: center; }

/* ---- boxes in the right rail (and in the card on smaller screens) ---- */
.recipe-box { margin-top: 32px; }
.box-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.box-title { font: 700 20px var(--font-display); }
.box-aside { font-size: 13px; color: var(--muted); }
.recipe-right .recipe-box { margin: 0; padding: 18px; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
.recipe-right .box-title { font-size: 18px; }
.equipment { display: none; } /* the boards show it in the rail only */
/* audit, Oct 26: below 900px there's no rail, so phones and iPads (portrait)
   get it in the page, where it sits in the markup */
@media (max-width: 899px) { .equipment { display: block; margin-top: 28px; } }
.recipe-right .equipment { display: block; }
.equipment-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.equipment-list li { font-size: 14px; line-height: 1.45; color: var(--muted); }
.equipment-list li::before { content: "·"; margin-right: 6px; }

/* ==========================================================================
   2. RECIPE TEXT
   Step headings in Domine; text at 17px on bigger screens. Checkboxes are
   pressed in (a well) until ticked, then a plum button.
   ========================================================================== */
.easy-read-recipe {
  margin: 0 auto;
  padding: 10px 0 8px;
  line-height: 1.6;
  color: var(--ink);
}
/* From 700px the step numbers sit inside the card's text column, not in
   its padding, so the steps start well in from the edge (as on the boards) */
@media (min-width: 700px) {
  .easy-read-recipe { font-size: 17px; padding-left: var(--recipe-side-extend); padding-right: var(--recipe-side-extend); }
}
/* from 900px the ribbon is in the rail, so the steps follow the photo:
   give them room */
@media (min-width: 900px) { .easy-read-recipe { padding-top: 34px; } }
.recipe-body { counter-reset: rs-step; }

#easy-read-recipe h3 { margin: 26px 0 6px; text-align: center; font-family: var(--font-display); font-size: 22px; }
#easy-read-recipe h4 { margin: 0 0 6px; padding-left: 10px; font: 700 21px/1.3 var(--font-display); color: var(--ink); }
@media (max-width: 699px) { #easy-read-recipe h4 { font-size: 19px; } }
#easy-read-recipe h5 {
  margin: 20px 0 8px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
#easy-read-recipe p {
  margin: 0;
  padding: 10px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background-color .15s;
}
#easy-read-recipe p:hover { background: var(--well-bg); }
#easy-read-recipe p.highlighted { background: var(--well-bg); }

/* Notes: paragraphs starting "Note:" (yellow is only ever for notes) */
#easy-read-recipe p.note,
#easy-read-recipe p.note:hover,
#easy-read-recipe p.note.highlighted {
  margin: 10px 0;
  padding: 14px 16px;
  border-radius: 2px 2px var(--r-4) 2px;
  background: linear-gradient(180deg, var(--note), var(--note-2));
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 6px 14px rgba(24, 24, 27, .06);
  color: #18181B; /* Ink, also in dark mode: notes keep their light colour */
  font-size: .95em;
}

#easy-read-recipe ol { margin: 6px 0; padding-left: 34px; }
#easy-read-recipe ol li { padding: 4px 0; }

/* ingredient lists: checkbox + bold text */
#easy-read-recipe ul.recipe-ingredient-list, .recipe-left ul.recipe-ingredient-list {
  list-style: none;
  margin: 8px 0 10px;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#easy-read-recipe ul.recipe-ingredient-list li, .recipe-left ul.recipe-ingredient-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  font-weight: 600;
  font-size: .96em;
  line-height: 1.35;
  cursor: pointer;
  border-radius: var(--r-2);
}
#easy-read-recipe ul.recipe-ingredient-list li:focus-visible, .recipe-left ul.recipe-ingredient-list li:focus-visible { outline-offset: 3px; }
/* Phones: every tick-off row is a full 44px target (wet hands, one thumb) */
@media (pointer: coarse) {
  #easy-read-recipe ul.recipe-ingredient-list, .recipe-left ul.recipe-ingredient-list { gap: 0; }
  #easy-read-recipe ul.recipe-ingredient-list li, .recipe-left ul.recipe-ingredient-list li { min-height: 44px; padding: 6px 0; }
}
#easy-read-recipe .ing-text strong { font-weight: inherit; }
/* Round 10 (1.1): the amount in bold, the rest regular, like the Shopping
   list ("4 cups all-purpose flour"). The scaler writes .ing-amt (2-core.js
   via Cocamoo.qty.amountHTML) on every rewrite; ticked lines keep it. */
#easy-read-recipe ul.recipe-ingredient-list li:has(.ing-amt), .recipe-left ul.recipe-ingredient-list li:has(.ing-amt) { font-weight: 400; }
#easy-read-recipe .ing-text strong.ing-amt,
#easy-read-recipe .swap-deco-what strong.ing-amt { font-weight: 700; }
#easy-read-recipe .ing-box, .recipe-left .ing-box {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  border-radius: var(--r-2);
  background: var(--well-bg);
  box-shadow: var(--well), 0 0 0 1px var(--line);
  color: var(--white);
  transition: box-shadow .2s ease, background .15s ease;
}
#easy-read-recipe .ing-box svg, .recipe-left .ing-box svg { width: 22px; height: 22px; }
#easy-read-recipe .ing-box rect, .recipe-left .ing-box rect { stroke: none; fill: transparent; }
#easy-read-recipe .ing-box-check, .recipe-left .ing-box-check { stroke: var(--white); stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s ease .06s; }
#easy-read-recipe ul.recipe-ingredient-list li.stricken, .recipe-left ul.recipe-ingredient-list li.stricken { color: var(--soft); text-decoration: line-through; font-weight: 400; }
#easy-read-recipe ul.recipe-ingredient-list li.stricken .ing-box, .recipe-left ul.recipe-ingredient-list li.stricken .ing-box { background: var(--plum-button); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 8px rgba(158, 46, 87, .3); animation: rs-pop .22s ease-out; }
#easy-read-recipe ul.recipe-ingredient-list li.stricken .ing-box-check, .recipe-left ul.recipe-ingredient-list li.stricken .ing-box-check { stroke-dashoffset: 0; }
@media (hover: hover) {
  #easy-read-recipe ul.recipe-ingredient-list li:not(.stricken):hover .ing-box, .recipe-left ul.recipe-ingredient-list li:not(.stricken):hover .ing-box { box-shadow: var(--well), 0 0 0 1px var(--line), 0 0 0 5px var(--plum-glow); }
}
@keyframes rs-pop {
  0% { transform: scale(.82); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* plain lists (the paragraph before ends in a colon): small grey dots */
#easy-read-recipe ul.recipe-plain-list { list-style: none; margin: 8px 0 12px 10px; padding-left: 4px; }
#easy-read-recipe ul.recipe-plain-list li { position: relative; padding: 4px 0 4px 20px; }
#easy-read-recipe ul.recipe-plain-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .8em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ring);
}

/* ==========================================================================
   3. OPTION CAROUSELS
   ========================================================================== */
.rc-wrap { margin: 20px 0; }
#easy-read-recipe .rc-wrap.rs-moved { margin: 6px 0; }
.rc-bar-wrap { display: flex; justify-content: center; position: relative; margin-bottom: 14px; }
.rc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 10px;
  margin: 0;
  border: 0;
  border-radius: var(--r-2);
  background: none;
  font: inherit;
  cursor: pointer;
}
.rc-trigger:hover, .rc-trigger:focus-visible { background: var(--plum-tint); outline: none; }
.rc-title { font-size: 15px; font-weight: 700; color: var(--plum-text); }
.rc-count { font-size: 13px; color: var(--soft); }
.rc-caret {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--ring);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E2E57' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 10px no-repeat;
  transition: transform .2s, background-color .2s, border-color .2s;
}
.rc-trigger.rc-is-open .rc-caret {
  transform: rotate(180deg);
  border-color: var(--plum-icon);
  background-color: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.rc-menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 50%;
  width: 320px;
  max-width: calc(100vw - 24px);
  margin-top: 6px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-menu);
  font-family: var(--font-body); /* not the step heading's Domine it sits in (typeset, Oct 26) */
  text-transform: none;
  letter-spacing: normal;
  transform: translateX(-50%);
  display: none;
}
.rc-menu.rc-is-open { display: block; animation: rs-menu-in .16s ease; }
@keyframes rs-menu-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.rc-menu-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 36px 10px 12px;
  border-radius: var(--r-3);
  cursor: pointer;
  text-align: left;
}
.rc-menu-row:hover, .rc-menu-row:focus-visible { background: var(--band); outline: none; }
.rc-menu-row.rc-is-active { background: var(--well-bg); } /* Nov 10: grey, plum words */
.rc-menu-row-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.rc-menu-row.rc-is-active .rc-menu-row-title { color: var(--plum-text); font-weight: 700; }
/* Cabin italic (loaded): Domine has no italic, and Georgia was a third face */
.rc-menu-row-desc { font-style: italic; font-size: 14px; line-height: 1.4; color: var(--soft); }
.rc-menu-row.rc-is-active .rc-menu-row-desc { color: var(--soft); }
.rc-menu-row-reason { display: none; font-size: 13px; line-height: 1.35; color: var(--soft); }
.rc-menu-row.rc-is-unavailable .rc-menu-row-title { color: var(--soft); }
.rc-menu-row.rc-is-unavailable .rc-menu-row-reason { display: block; }
.rc-menu-row.rc-is-unavailable .rc-menu-row-desc { display: none; }
.rc-menu-row.rc-is-active::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.rc-note, .rc-desc {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.rc-note { font-size: 13px; line-height: 1.4; color: var(--plum-text); }
.rc-note.rc-show { max-height: 90px; opacity: 1; margin-bottom: 12px; }
.rc-desc { font-family: Georgia, serif; font-style: italic; font-size: 14px; color: var(--soft); }
.rc-desc.rc-show { max-height: 140px; opacity: 1; margin-top: -8px; margin-bottom: 14px; }

.rc-wrap.rc-single .rc-count { display: none; }
.rc-wrap.rc-static .rc-caret { display: none; }
.rc-wrap.rc-static .rc-trigger { pointer-events: none; cursor: default; }

.rc-zone { display: grid; grid-template-columns: minmax(0, 1fr); }
.rc-host {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rc-host::-webkit-scrollbar { display: none; }
.rc-track { display: flex; align-items: flex-start; }
.rc-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

/* ==========================================================================
   4. STEP RAIL, PREP STEPS BOX, OPTION PICKER AT THE HEADING
   ========================================================================== */
#easy-read-recipe .recipe-section {
  position: relative;
  margin-left: calc(-1 * var(--recipe-side-extend));
  margin-right: calc(-1 * var(--recipe-side-extend));
  padding: 22px var(--recipe-side-extend) 6px;
}
#easy-read-recipe .rs-step { counter-increment: rs-step; }
#easy-read-recipe .rs-step > h4::before {
  content: counter(rs-step);
  position: absolute;
  left: calc((var(--recipe-side-extend) - 32px) / 2);
  top: 21px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--plum-button); /* round 7: plum discs, the step rail's buttons */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 3px 8px rgba(158, 46, 87, .28);
  color: var(--white);
  font: 700 15px/32px var(--font-display);
  text-align: center;
}
/* dotted line down to the next step's number */
#easy-read-recipe .rs-step::after {
  content: "";
  position: absolute;
  left: calc(var(--recipe-side-extend) / 2 - 1px);
  top: 60px;
  bottom: -20px;
  border-left: 2px dotted var(--ring);
  pointer-events: none;
}
#easy-read-recipe .rs-step.rs-last::after { display: none; }
#easy-read-recipe .recipe-body.has-note .rs-step.rs-last::after { display: block; }

/* option dots under the step number */
#easy-read-recipe .rs-dots {
  position: absolute;
  z-index: 1;
  left: calc((var(--recipe-side-extend) - 28px) / 2);
  top: 54px;
  width: 28px;
  padding: 2px 0 4px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#easy-read-recipe .rs-dots[hidden] { display: none; }
#easy-read-recipe .rs-dot {
  width: 28px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#easy-read-recipe .rs-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.8px solid var(--plum-icon);
  background: var(--card);
  transition: background-color .2s;
}
#easy-read-recipe .rs-dot.is-active::before { background: var(--plum); }
#easy-read-recipe .rs-dot.is-unavailable::before { border-style: dashed; opacity: .5; }

/* the option name IS the dropdown, in the heading: "Step / Option (v)" */
#easy-read-recipe h4 .rs-sep { color: var(--ring); font-weight: 400; }
#easy-read-recipe h4 .rc-bar-wrap { display: inline-flex; vertical-align: baseline; margin: 0; max-width: 100%; min-width: 0; }
#easy-read-recipe h4 .rc-trigger { gap: 8px; padding: 1px 4px 1px 6px; text-align: left; font-weight: inherit; max-width: 100%; min-width: 0; }
#easy-read-recipe h4 .rc-title {
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--plum-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--plum-icon) 40%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
#easy-read-recipe h4 .rc-trigger:hover .rc-title,
#easy-read-recipe h4 .rc-trigger.rc-is-open .rc-title { text-decoration-color: var(--plum-icon); }
#easy-read-recipe h4 .rc-count { display: none; }
#easy-read-recipe h4 .rc-menu {
  left: 0;
  transform: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
#easy-read-recipe h4 .rc-bar-wrap.rs-static .rc-caret { display: none; }
#easy-read-recipe h4 .rc-bar-wrap.rs-static .rc-trigger { pointer-events: none; cursor: default; }
#easy-read-recipe h4 .rc-bar-wrap.rs-static .rc-title { text-decoration: none; }
#easy-read-recipe .rs-sel .rc-note { max-width: none; margin: 0; text-align: left; }
#easy-read-recipe .rs-sel .rc-note.rc-show { margin: 2px 0 8px; }
#easy-read-recipe .rs-sel .rc-desc { display: none; }

/* one circle arrow everywhere */
.rs-chev {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ring);
  background: var(--card);
  color: var(--plum-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}
.rs-chev svg { width: 12px; height: 12px; transition: transform .2s; }
[aria-expanded="true"] > .rs-chev { background: var(--plum); border-color: var(--plum); color: var(--white); }
[aria-expanded="true"] > .rs-chev svg { transform: rotate(180deg); }

/* Prep Steps box */
#easy-read-recipe .rs-prep {
  margin-top: 18px;
  padding: 0;
  background: var(--well-bg);
  box-shadow: var(--well);
  border-radius: var(--r-4);
}
#easy-read-recipe .rs-prep > h4 { margin: 0; padding: 0; }
#easy-read-recipe .rs-prep-btn {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 12px 0 calc((var(--recipe-side-extend) - 28px) / 2 - 1px);
  border: 0;
  border-radius: var(--r-3);
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: center;
}
#easy-read-recipe .rs-prep-icon {
  flex: 0 0 28px;
  height: 28px;
  margin-right: calc(var(--recipe-side-extend) / 2 - 4px);
  border-radius: 50%;
  border: 1.5px dashed var(--plum-icon);
  color: var(--plum-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}
#easy-read-recipe .rs-prep-icon svg { width: 15px; height: 15px; }
#easy-read-recipe .rs-prep-title { font: 700 18px var(--font-display); margin-right: 14px; white-space: nowrap; }
#easy-read-recipe .rs-prep-count {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--muted);
}
#easy-read-recipe .rs-prep-body { padding: 0 18px 14px calc(var(--recipe-side-extend) - 1px); }
/* From 700px the box reaches 16px further out than the step numbers on
   both sides, so its icon still lines up with them but has room around it */
@media (min-width: 700px) {
  #easy-read-recipe .rs-prep { margin-left: calc(-1 * var(--recipe-side-extend) - 16px); margin-right: calc(-1 * var(--recipe-side-extend) - 16px); }
  #easy-read-recipe .rs-prep-btn { min-height: 64px; padding-left: calc((var(--recipe-side-extend) - 28px) / 2 + 15px); padding-right: 18px; border-radius: var(--r-4); }
  #easy-read-recipe .rs-prep-body { padding: 0 32px 18px calc(var(--recipe-side-extend) + 15px); }
}
#easy-read-recipe .rs-prep-body[hidden] { display: none; }
#easy-read-recipe p.rs-prep-intro { padding-top: 0; color: var(--muted); cursor: default; }
#easy-read-recipe p.rs-prep-intro:hover, #easy-read-recipe p.rs-prep-intro.highlighted { background: none; }
#easy-read-recipe .rs-prep p:not(.rs-prep-intro):hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
#easy-read-recipe .rs-prep p.highlighted { background: var(--card); }
/* prep lines: the {do:} action word between the checkbox and the text */
#easy-read-recipe ul.recipe-ingredient-list li[data-verb]::before, .recipe-left ul.recipe-ingredient-list li[data-verb]::before {
  content: attr(data-verb);
  order: 1;
  flex: 0 0 60px;
  font: 500 12px/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plum-text);
}
#easy-read-recipe ul.recipe-ingredient-list li[data-verb] .ing-box, .recipe-left ul.recipe-ingredient-list li[data-verb] .ing-box { order: 0; }
#easy-read-recipe ul.recipe-ingredient-list li[data-verb] .ing-text, .recipe-left ul.recipe-ingredient-list li[data-verb] .ing-text { order: 2; }

/* phones: the margin is only 20px, so the number moves inline */
@media (max-width: 699px) {
  #easy-read-recipe .rs-step > h4::before {
    position: static;
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    font-size: 14px;
    line-height: 28px;
    vertical-align: 1px;
  }
  #easy-read-recipe .rs-step::after,
  #easy-read-recipe .rs-dots { display: none !important; }
  #easy-read-recipe .rs-prep {
    margin-left: calc(10px - var(--recipe-side-extend));
    margin-right: calc(10px - var(--recipe-side-extend));
  }
  #easy-read-recipe .rs-prep-btn { padding-left: 11px; }
  #easy-read-recipe .rs-prep-icon { margin-right: 12px; }
  #easy-read-recipe .rs-prep-title { margin-right: 10px; }
  #easy-read-recipe .rs-prep-body { padding-left: 11px; padding-right: 12px; }

  /* a step with options shows the choice in its own "Version" box */
  #easy-read-recipe h4.rs-has-pick { display: flex; flex-wrap: wrap; align-items: center; }
  #easy-read-recipe h4.rs-has-pick .rs-sep { display: none; }
  #easy-read-recipe h4.rs-has-pick .rc-bar-wrap { display: flex; flex: 1 0 100%; position: relative; margin: 10px 0 2px; }
  #easy-read-recipe h4.rs-has-pick .rc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 14px;
    border: 0;
    border-radius: var(--r-4);
    background: var(--card);
    box-shadow: var(--raise), 0 0 0 1px var(--line);
    font-family: var(--font-body);
  }
  #easy-read-recipe h4.rs-has-pick .rc-trigger::before {
    content: "Version";
    flex: 0 0 auto;
    font: 600 13px/1.2 var(--font-body);
    color: var(--muted);
  }
  #easy-read-recipe h4.rs-has-pick .rc-trigger:hover,
  #easy-read-recipe h4.rs-has-pick .rc-trigger.rc-is-open { box-shadow: var(--raise), 0 0 0 1.5px var(--plum-icon); }
  #easy-read-recipe h4.rs-has-pick .rc-title {
    flex: 1 1 auto;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
  #easy-read-recipe h4.rs-has-pick .rc-caret { margin-left: auto; }
  #easy-read-recipe h4.rs-has-pick .rc-menu { width: 100%; }
  #easy-read-recipe h4.rs-has-pick .rc-bar-wrap.rs-static .rc-trigger { padding: 0; border: 0; }
  #easy-read-recipe h4.rs-has-pick .rc-bar-wrap.rs-static .rc-trigger::before { content: none; }
}

/* ==========================================================================
   5. SHOPPING TICKET (the ribbon)
   Phones and tablets: a paper band under the photo, as wide as the photo,
   with a folded tail under each end; it sticks to the top of the screen
   while you cook (one slim row, .is-stuck) and the list unfolds below it on
   white. From 900px 7-page.js moves it to the top of the right rail
   (.in-rail): the same paper and the same three controls, with the list
   always open under it. Everything is in em, off the one font-size here.
   Oct 28 (Dave): no more folded ribbon tails at any width. It's one paper
   card, a toolbar: opened, the list folds out inside it, under a dashed
   line, with the two modes as folder tabs over the white list and "Fold up
   list" at the bottom ("ONE TOOLBAR" at the end of this section).
   ========================================================================== */
.cm-ticket {
  font-size: 15px;
  --cm-band: linear-gradient(180deg, var(--paper), var(--paper-2));
  --cm-fold: var(--paper-tail);
  --cm-dash: #D8CAB8;
  --cm-ink: #18181B;   /* Ink, also in dark mode: the ribbon keeps its light colours */
  --cm-muted: #6B5B49; /* audit: 4.4:1 on the paper was just short; this is 5.6:1 */
  --cm-accent: var(--plum);
  --cm-tail: var(--bleed); /* how far the band reaches past the card: the same as the photo */
  position: relative;
  z-index: 5;
  /* The band is as wide as the photo above it. Under each end a darker
     fold runs from the band's edge back to the card's edge: the ribbon
     wrapped around the card (the Webflow site's look). */
  margin: 26px calc(-1 * (var(--card-pad) + var(--cm-tail))) 14px;
  color: var(--cm-ink);
  font-family: var(--font-body);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 699px) {
  /* phones: the card is the screen, so there's no card edge to wrap: no
     folds, just a paper bar with rounded corners, 12px in from the edges
     like the photo above it */
  .cm-ticket { --cm-tail: 0px; margin-left: calc(-1 * (var(--card-pad) + var(--bleed))); margin-right: calc(-1 * (var(--card-pad) + var(--bleed))); }
  .cm-row { border-radius: var(--r-5); }
  .cm-row::before, .cm-row::after { display: none; }
  .cm-ticket.is-open .cm-row { border-radius: var(--r-5) var(--r-5) 0 0; }
  .cm-ticket .cm-panel { border-radius: 0 0 var(--r-5) var(--r-5); }
  .cm-ticket:not(.is-open) { position: sticky; top: calc(6px + env(safe-area-inset-top)); z-index: 30; }
}
.cm-ticket button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; margin: 0; text-align: left; line-height: inherit; }
/* …except the real buttons under the list (Add to my Shopping list, Start shopping) */
.cm-ticket .cm-add .btn { justify-content: center; text-align: center; font: 700 15px/1.25 var(--font-body); padding: 10px 18px; white-space: normal; }
.cm-ticket .cm-add .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cm-ticket.in-rail .cm-add .btn { font-size: 14px; } /* the narrow rail card */
/* the two modes: labels centred in their halves (the ticket's button reset left-aligns them) */
.cm-ticket .cm-modes button { text-align: center; }
.cm-ticket .cm-add .btn-plum { background: var(--plum-button); box-shadow: var(--plum-shadow); color: var(--white); }
.cm-ticket .cm-add .btn-plum:active { background: var(--plum-pressed); box-shadow: var(--plum-pressed-shadow); }
.cm-ticket .cm-add .btn-plum:disabled { background: var(--well-bg); box-shadow: var(--well); color: var(--muted); }
.cm-ticket svg { display: block; flex-shrink: 0; }
.cm-row {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: stretch;
  min-height: 4em;
  padding: 0 max(.4em, calc(var(--cm-tail) - 6px));
  background: var(--cm-band);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(122, 106, 88, .18), 0 6px 14px -2px rgba(70, 52, 30, .28), 0 2px 4px rgba(70, 52, 30, .12);
}
.cm-row::before, .cm-row::after {
  content: "";
  position: absolute;
  top: 100%;
  width: var(--cm-tail);
  height: min(var(--cm-tail), 14px);
  background: var(--cm-fold);
  pointer-events: none;
}
.cm-row::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cm-row::after { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cm-row button:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: -4px; }
.cm-div { flex: 0 0 0; border-left: 2px dashed var(--cm-dash); margin: .9em 0; }
.cm-title { display: block; font-size: 1.07em; font-weight: 700; line-height: 1.2; }
.cm-mono { display: block; font-size: max(12px, .85em); color: var(--cm-muted); line-height: 1.3; }
.cm-label { display: flex; flex-direction: column; gap: .2em; }

.cm-list-btn { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: .9em; padding: 0 1.1em 0 1.2em; }
.cm-list-btn[hidden] { display: none; }
.cm-list-btn .cm-label { flex: 1 1 auto; }
.cm-icon { width: 2.27em; height: 2.27em; padding: .38em; border-radius: 50%; background: var(--white); stroke: var(--cm-accent); }
.cm-chev, .cm-scale-chev {
  flex: 0 0 1.9em;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1.5px solid var(--ring);
  color: var(--cm-accent);
  transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}
.cm-chev svg { width: .85em; height: .85em; transition: transform .2s; }
.cm-scale-chev { padding: .52em; }
@media (hover: hover) {
  .cm-list-btn:hover .cm-chev, .cm-scale-btn:hover .cm-scale-chev { border-color: var(--cm-accent); }
}
.cm-ticket.is-open .cm-chev, .cm-scale-btn[aria-expanded="true"] .cm-scale-chev { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--white); }
.cm-ticket.is-open .cm-chev svg { transform: rotate(180deg); }
.cm-scale-btn[aria-expanded="true"] .cm-scale-chev { transform: rotate(180deg); }
.cm-ticket .cm-chev .cm-chev-lock { display: none; }
.cm-ticket.is-locked .cm-chev .cm-chev-open { display: none; }
.cm-ticket.is-locked .cm-chev .cm-chev-lock { display: block; }
.cm-ticket.is-locked .cm-chev { border-style: dashed; border-color: var(--cm-accent); }

.cm-scale { position: relative; display: flex; align-items: center; padding: 0 .6em; }
.cm-scale-btn { display: flex; align-items: center; gap: .8em; min-height: 3.4em; padding: 0 .8em 0 .9em; border-radius: .6em; }
.cm-scale-val { display: flex; align-items: baseline; gap: .5em; white-space: nowrap; }
.cm-scale-x { font-family: var(--font-number); font-size: 1.35em; font-weight: 600; line-height: 1; }
.cm-scale-yield { font-size: max(12px, .87em); color: var(--cm-muted); }
/* the ribbon's scale menu only (round 10: scoped, since site.js's shared
   Cocamoo.menu() is also .cm-menu and opens on this page now) */
.cm-scale .cm-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% - .3em);
  left: 50%;
  transform: translateX(-50%);
  width: 14em;
  padding: .4em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 1em;
  box-shadow: var(--glass-shadow), var(--shadow-menu);
  color: var(--ink);
}
.cm-scale .cm-menu[hidden] { display: none; }
.cm-opt { display: flex; justify-content: space-between; align-items: center; min-height: 2.8em; padding: 0 .8em; border-radius: .45em; }
.cm-opt:hover, .cm-opt:focus-visible { background: var(--well-bg); outline: none; }
.cm-opt[aria-checked="true"] { background: var(--cm-accent); color: var(--white); }
.cm-opt[hidden] { display: none; }
.cm-opt-x { font-family: var(--font-number); font-size: 1.1em; font-weight: 600; }
.cm-opt-y { font-size: .87em; }
.cm-opt-custom { margin-top: .25em; position: relative; }
.cm-opt-custom::before { content: ""; position: absolute; left: .6em; right: .6em; top: -.2em; border-top: 1.5px dashed var(--line); }
.cm-opt-custom .cm-opt-x { font-family: inherit; font-size: 1em; }
.cm-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25em .45em;
  margin-top: .25em;
  min-height: 2.8em;
  padding: .35em .35em .35em .5em;
  border-radius: .45em;
  background: var(--white);
  border: 1.5px solid var(--cm-accent);
}
.cm-custom[hidden] { display: none; }
.cm-custom input {
  flex: 0 0 3.4em;
  width: 3.4em;
  min-width: 0;
  margin: 0;
  padding: .25em .35em;
  font-family: var(--font-number);
  font-size: 1.1em;
  font-weight: 600;
  color: var(--cm-ink);
  background: var(--white);
  border: 1px solid var(--ring);
  border-radius: .35em;
  outline: none;
}
.cm-custom input:focus { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--plum-glow); }
.cm-custom-x { margin-right: auto; font-family: var(--font-number); font-size: 1.1em; font-weight: 600; }
.cm-custom-out { order: 5; flex: 1 1 100%; padding: 0 .1em .1em; font-size: .87em; color: var(--soft); }
.cm-custom-out:empty { display: none; }
.cm-ticket .cm-custom-go { flex: 0 0 2em; width: 2em; height: 2em; border-radius: 50%; background: var(--cm-accent); color: var(--white); display: flex; align-items: center; justify-content: center; }
.cm-custom-go svg { width: .95em; height: .95em; }
.cm-custom-go:disabled { opacity: .3; cursor: default; }
.cm-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }

.cm-cook { display: flex; align-items: center; gap: 1em; padding: 0 1.2em 0 1.3em; }
.cm-cook .cm-label { width: 10em; }
.cm-track { position: relative; flex: 0 0 2.9em; width: 2.9em; height: 1.6em; border-radius: .8em; background: #D8CDBE; transition: background .2s; }
.cm-knob { position: absolute; top: .2em; left: .2em; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .2s; }
.cm-cook[aria-checked="true"] .cm-track { background: var(--cm-accent); }
.cm-cook[aria-checked="true"] .cm-knob { left: 1.5em; }
.cm-stamp {
  display: none;
  position: absolute;
  z-index: 5;
  right: 1.8em;
  top: -1em;
  transform: rotate(-6deg);
  padding: .2em .65em;
  border: 2px solid var(--cm-accent);
  border-radius: .35em;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: max(12px, .7em);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cm-accent);
  pointer-events: none;
}
.cm-ticket.is-cook .cm-stamp { display: block; animation: cm-stamp .28s ease-out; }
@keyframes cm-stamp { from { transform: rotate(-6deg) scale(1.6); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.cm-ticket.no-wake .cm-cook, .cm-ticket.no-wake .cm-div--cook { display: none; }

/* the unfolded list */
.cm-panel {
  position: relative;
  margin: 0 var(--cm-tail);
  background: var(--card);
  color: var(--ink);
  border-radius: 0 0 var(--r-4) var(--r-4);
  box-shadow: inset 0 9px 9px -8px rgba(0, 0, 0, .14), var(--raise);
}
.cm-panel[hidden] { display: none; }
.cm-body { padding: 1.6em 1.9em 1.5em; }
/* "Add N items to my list" under the list (8-shop.js, step 5) */
.cm-add { display: flex; flex-direction: column; gap: 10px; padding: 14px 1.9em 1.5em; border-top: 1px solid var(--sep); font-size: 16px; }
.cm-add[hidden], .cm-add [hidden] { display: none !important; }
.cm-add-btn:disabled { background: var(--well-bg); box-shadow: var(--well); color: var(--muted); cursor: default; }
.cm-added { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 48px; }
/* round 8 (R8-U-OnList): "You're ready to shop" */
.cm-ready { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise), 0 0 0 1.5px var(--plum-glow); }
.cm-ready-top { display: flex; align-items: center; gap: 16px; }
.cm-ready-thumb { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r-4); background: var(--cat, var(--plum)) center / cover no-repeat; }
.cm-ready-check { position: absolute; right: -8px; bottom: -8px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--plum-button); box-shadow: 0 0 0 3px var(--card), var(--plum-shadow); color: var(--white); }
.cm-ready-check svg { width: 15px; height: 15px; }
.cm-ready-h { font: 700 22px/1.2 var(--font-display); color: var(--ink); }
.cm-ready-sub { margin-top: 2px; color: var(--muted); font-size: 15px; }
.cm-ready-next { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px; border-radius: var(--r-4); background: var(--band); color: var(--ink); font-size: 15px; line-height: 1.4; }
.cm-ready-arrow { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: var(--r-3); background: var(--card); box-shadow: var(--raise); color: var(--plum-icon); }
.cm-ready-arrow svg { width: 16px; height: 16px; }
.cm-ready-acts { display: flex; align-items: center; gap: 18px; }
.cm-ready-acts .cm-ready-view { flex: 1 1 auto; justify-content: center; }
.cm-added-text { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 700; color: var(--ink); }
.cm-added-text svg { width: 18px; height: 18px; color: var(--plum-icon); }
#cm-ticket .cm-added-link { color: var(--plum-text); font-weight: 700; }
.cm-added-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; color: var(--plum-text); font: 700 15px var(--font-body); cursor: pointer; }
@media (max-width: 699px) { .cm-add { padding: 12px 1.3em 1.2em; } }
.cm-ticket.in-rail .cm-add { padding: 12px 1.2em 1.2em; }
.cm-ticket.in-rail .cm-added-text { flex-basis: 100%; } /* the narrow rail: the two links share the line under it */
#cm-ticket .cm-cols { column-count: 3; column-width: 13em; column-gap: 2.4em; }
#cm-ticket .cm-cols.cm-cols-flat { column-count: auto; column-width: auto; }
#cm-ticket .cm-cols.cm-cols-flat ul { column-count: 3; column-width: 13em; column-gap: 2.4em; }
#cm-ticket .cm-cols.rs-split { column-width: auto; column-count: var(--rs-cols, 3); }
#cm-ticket .cm-cols.rs-split .cm-sec { display: block; }
#cm-ticket .cm-cols.rs-split .cm-sec.rs-col-start { break-before: column; }
#cm-ticket .cm-sec { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 1.2em; }
#cm-ticket .cm-sec.cm-flat { display: block; break-inside: auto; }
/* a section whose items all belong to options not picked; also when the
   list is split into columns (.rs-split, which sets display: block) */
#cm-ticket .cm-sec[hidden], #cm-ticket .cm-cols.rs-split .cm-sec[hidden] { display: none; }
#cm-ticket .cm-sec-head { margin: 0 0 .45em; }
#cm-ticket .cm-sec-name { color: var(--ink); font-size: .83em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
/* step 5: aisle names read like the Shopping list's (and the S-Ribbon board): plum, sentence case */
#cm-ticket .cm-sec-name { color: var(--plum-text); font-size: .95em; letter-spacing: 0; text-transform: none; }
#cm-ticket .ingredientwrap ul { list-style: none; margin: 0; padding: 0; overflow: visible; }
/* Option A (Oct 26): two modes, no tick boxes in "Before you shop".
   Before you shop: each line to buy ends in an "I have it" pill (the
   whole line is the button); lines you have leave for "Already have · N".
   In the store (.is-shop-mode): a check box in front means "in my cart". */
.cm-modes { display: flex; gap: 2px; padding: 4px; margin: 0 0 12px; border-radius: var(--r-pill); background: var(--well-bg); box-shadow: var(--well); }
.cm-modes button { flex: 1 1 0; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: 600 14px var(--font-body); cursor: pointer; }
.cm-modes button[aria-pressed="true"] { background: var(--card); box-shadow: var(--raise); color: var(--ink); font-weight: 700; }
.cm-modes button:focus-visible { outline: 2px solid var(--plum-icon); outline-offset: 1px; }
@media (pointer: coarse) { .cm-modes button { min-height: 44px; } }
.cm-mode-note { margin: 0 0 1em; font-size: .92em; line-height: 1.45; color: var(--muted); }
.cm-mode-note b { color: var(--ink); }
/* Before you shop: each line carries its pill, so columns stay wider (two
   on a tablet instead of three cramped ones) */
#cm-ticket:not(.is-shop-mode) .cm-cols { column-width: 18em; }
/* 5-tips.js's split into a set number of columns gives way here too */
#cm-ticket:not(.is-shop-mode) .cm-cols.rs-split { column-count: auto; column-width: 18em; }
#cm-ticket:not(.is-shop-mode) .cm-cols.rs-split .cm-sec.rs-col-start { break-before: auto; }
#cm-ticket:not(.is-shop-mode) .cm-cols.cm-cols-flat ul { column-width: 18em; }
#cm-ticket .ingredientwrap ul li {
  position: relative;
  margin: 0;
  padding: .45em 6.2em .45em 0;
  min-height: 2.6em;
  line-height: 1.35;
  cursor: pointer;
  break-inside: avoid;
  outline-offset: 2px;
  border-radius: var(--r-2);
}
/* the pill: what a tap does, said on the line itself */
#cm-ticket .ingredientwrap ul li::after {
  content: "I have it";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: .3em .8em;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring);
  color: var(--muted);
  font-size: max(12px, .8em);
  font-weight: 600;
  white-space: nowrap;
}
/* Oct 29 (the button review): a quiet grey pill, so a list of 14 doesn't
   spend the plum; the line you point at, or focus, gets the plum ring */
/* phones: each line a full 44px to tap */
@media (pointer: coarse) { #cm-ticket .ingredientwrap ul li { min-height: 44px; } }
/* one long column (phones held sideways, small tablets): keep the pill near the words */
#cm-ticket:not(.is-shop-mode) .ingredientwrap ul { max-width: 34em; }
/* a line folding away after "I have it" */
#cm-ticket .ingredientwrap ul li.cm-leaving { overflow: hidden; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transition: height .2s ease, padding .2s ease, opacity .15s ease; }
@media (hover: hover) {
  #cm-ticket:not(.is-shop-mode) .ingredientwrap ul li:hover::after { box-shadow: 0 0 0 1.5px var(--plum-icon); color: var(--plum-text); }
}
#cm-ticket:not(.is-shop-mode) .ingredientwrap ul li:focus-visible::after { box-shadow: 0 0 0 1.5px var(--plum-icon); color: var(--plum-text); }
/* lines you have are off the list (they show in the fold below it) */
#cm-ticket .ingredientwrap ul li.cm-got { display: none; }

/* in the store: a check box in front, nothing at the end */
#cm-ticket.is-shop-mode .ingredientwrap ul li { padding: .45em 0 .45em 2.1em; }
#cm-ticket.is-shop-mode .ingredientwrap ul li::after { content: none; }
#cm-ticket.is-shop-mode .ingredientwrap ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 1.4em;
  height: 1.4em;
  border-radius: .42em;
  background: var(--well-bg) center / .75em .75em no-repeat;
  box-shadow: var(--well), 0 0 0 1px var(--line);
}
#cm-ticket.is-shop-mode .ingredientwrap ul li.cm-cart { color: var(--soft); text-decoration: line-through; }
#cm-ticket.is-shop-mode .ingredientwrap ul li.cm-cart::before {
  background-color: var(--cm-accent, var(--plum));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(158, 46, 87, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  animation: rs-pop .22s ease-out;
}
/* Already have · N (with Put back), under the list */
.cm-fold { margin-top: .6em; padding: .6em 1em .4em; border-radius: var(--r-4); background: var(--well-bg); }
.cm-fold[hidden] { display: none; }
.cm-fold-head { margin: .2em 0 .3em; font-size: .92em; font-weight: 700; color: var(--muted); }
.cm-fold-list { margin: 0; padding: 0; list-style: none; }
.cm-fold-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 2.6em; color: var(--muted); }
#cm-ticket .cm-putback { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: none; color: var(--plum-text); font: 700 14px var(--font-body); cursor: pointer; }
.is-shop-mode .cm-fold-list { display: none; }
/* the add box belongs to Before you shop */
.is-shop-mode .cm-add { display: none; }
.cm-add-note { font-size: 14px; color: var(--muted); text-align: center; }
.cm-add-note a { display: inline-block; padding: 12px 0; font-weight: 700; }
/* merged lines (2 tbsp + 4 tbsp butter shows once, as 6 tbsp) */
#ingredientwrap li.sl-merged-away { display: none !important; }
#ingredientwrap li.sl-merged .sl-own { display: none; }

/* Phones, and the right rail: the list on its own row, then scale and cook mode */
@media (max-width: 699px) {
  .cm-row { flex-wrap: wrap; }
  .cm-list-btn { flex: 1 1 100%; min-height: 4em; padding: 0 1em 0 1.1em; }
  .cm-div--scale { flex: 1 1 100%; border-left: 0; border-top: 2px dashed var(--cm-dash); margin: 0 1em; }
  .cm-scale { flex: 0 0 auto; padding: .3em .2em .3em .7em; }
  .cm-scale-btn { padding: 0 .5em; gap: .5em; }
  .cm-scale-val { flex-direction: column; align-items: flex-start; gap: .1em; }
  .cm-scale-yield { display: none; }
  .cm-cook { flex: 1 1 0; min-width: 0; padding: 0 1em 0 .9em; justify-content: space-between; gap: .6em; }
  .cm-cook .cm-label { width: auto; }
  .cm-cook .cm-title { white-space: nowrap; }
  .cm-scale .cm-menu { left: .7em; transform: none; }
  .cm-body { padding: 1.3em 1.3em 1.2em; }
  .cm-stamp { right: 1em; }
  .cm-ticket { scroll-margin-top: 8px; }
  /* stuck to the top of the screen while you cook: one slim row */
  .cm-ticket.is-stuck .cm-row { flex-wrap: nowrap; min-height: 3.3em; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
  .cm-ticket.is-stuck .cm-list-btn { flex: 0 0 auto; min-height: 3.3em; padding: 0 .7em 0 .8em; gap: .5em; }
  .cm-ticket.is-stuck .cm-list-btn .cm-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cm-ticket.is-stuck .cm-icon { width: 2em; height: 2em; padding: .33em; }
  .cm-ticket.is-stuck .cm-div--scale { flex: 0 0 0; border-top: 0; border-left: 2px dashed var(--cm-dash); margin: .7em 0; }
  .cm-ticket.is-stuck .cm-scale { padding: 0 .2em; }
  .cm-ticket.is-stuck .cm-scale .cm-mono, .cm-ticket.is-stuck .cm-cook .cm-mono { display: none; }
  .cm-ticket.is-stuck .cm-scale-val { flex-direction: row; align-items: baseline; }
  .cm-ticket.is-stuck .cm-div--cook { margin: .7em 0; }
  .cm-ticket.is-stuck .cm-row::before, .cm-ticket.is-stuck .cm-row::after { display: none; }
}

/* In the right rail (900px and up): a card. The paper band is its top,
   with the list title on one row and scale and cook mode under it; the
   list is always open below, one column. */
.cm-ticket.in-rail { margin: 0; --cm-tail: 0px; font-size: 14px; border-radius: var(--r-5); box-shadow: var(--raise); }
.cm-ticket.in-rail .cm-row { flex-wrap: wrap; margin: 0; border-radius: var(--r-5) var(--r-5) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.cm-ticket.in-rail .cm-row::before, .cm-ticket.in-rail .cm-row::after { display: none; }
.cm-ticket.in-rail .cm-list-btn { flex: 1 1 100%; min-height: 4em; padding: 0 .8em; cursor: default; }
.cm-ticket.in-rail:not(.is-locked) .cm-chev { display: none; }
.cm-ticket.in-rail .cm-div--scale { flex: 1 1 100%; border-left: 0; border-top: 2px dashed var(--cm-dash); margin: 0 .8em; }
.cm-ticket.in-rail .cm-scale { flex: 0 0 auto; padding: .3em 0 .3em .2em; }
.cm-ticket.in-rail .cm-scale-btn { padding: 0 .5em; gap: .5em; }
.cm-ticket.in-rail .cm-scale-val { flex-direction: column; align-items: flex-start; gap: .1em; }
.cm-ticket.in-rail .cm-scale-yield { font-size: max(12px, .8em); }
.cm-ticket.in-rail .cm-cook { flex: 1 1 0; min-width: 0; padding: 0 .8em; justify-content: space-between; gap: .5em; }
.cm-ticket.in-rail .cm-cook .cm-label { width: auto; }
.cm-ticket.in-rail .cm-menu { left: 0; transform: none; }
.cm-ticket.in-rail .cm-panel { margin: 0; border-radius: 0 0 var(--r-5) var(--r-5); box-shadow: inset 0 9px 9px -8px rgba(0, 0, 0, .12); }
.cm-ticket.in-rail .cm-panel[hidden] { display: block; }

/* ---- ONE TOOLBAR (Oct 28, Dave): the paper is the card; no ribbon tails ---- */
.cm-ticket { border-radius: var(--r-5); background: var(--cm-band); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px -2px rgba(70, 52, 30, .22), 0 2px 4px rgba(70, 52, 30, .1); }
.cm-ticket .cm-row { background: none; box-shadow: none; border-radius: var(--r-5); }
.cm-ticket .cm-row::before, .cm-ticket .cm-row::after { display: none; }
.cm-ticket .cm-list-btn .cm-label { flex: 0 1 auto; } /* the chevron sits beside "Shopping list" */
.cm-ticket .cm-panel { margin: 0 14px; padding: 16px 0 6px; border-top: 2px dashed var(--cm-dash); border-radius: 0; background: none; box-shadow: none; }
/* the two modes: folder tabs, the chosen one part of the white list */
.cm-ticket .cm-modes { gap: 2px; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cm-ticket .cm-modes button { flex: 0 0 auto; min-height: 46px; padding: 0 22px; border-radius: var(--r-4) var(--r-4) 0 0; background: none; box-shadow: none; color: var(--cm-muted); font-size: 15px; }
.cm-ticket .cm-modes button[aria-pressed="true"] { background: var(--card); color: var(--ink); }
.cm-ticket .cm-body { border-radius: 0 var(--r-4) var(--r-4) var(--r-4); background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(70, 52, 30, .08); }
.cm-ticket .cm-panel:has([data-cm-mode="shop"][aria-pressed="true"]) .cm-body { border-radius: var(--r-4); }
.cm-ticket .cm-add { padding: 14px 0 4px; border-top: 0; }
.cm-ticket .cm-fold-up { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 2px; color: var(--cm-accent); font-weight: 700; text-align: center; }
.cm-ticket .cm-fold-up svg { width: 14px; height: 14px; }
@media (max-width: 699px) {
  .cm-ticket, .cm-ticket .cm-row { border-radius: var(--r-5); }
  .cm-ticket .cm-panel { margin: 0 10px; }
  .cm-ticket .cm-modes button { flex: 1 1 0; padding: 0 8px; }
}
/* the rail: the list is always open, so no Fold up */
.cm-ticket.in-rail .cm-panel { margin: 0 12px; padding-top: 12px; box-shadow: none; border-radius: 0; }
.cm-ticket.in-rail .cm-modes button { flex: 1 1 0; padding: 0 6px; font-size: 14px; }
.cm-ticket.in-rail .cm-fold-up { display: none; }
.cm-ticket.in-rail .cm-body { padding: 1.1em 1.2em 1.2em; max-height: calc(100vh - var(--header-h) - 220px); overflow: auto; }
.cm-ticket.in-rail .cm-stamp { right: 1em; }

/* ==========================================================================
   6. TIPS AND END-OF-LINE TAGS
   ========================================================================== */
#easy-read-recipe .rs-tip {
  all: unset;
  cursor: pointer;
  border-radius: 3px;
  --rs-dot: var(--plum);
  background-image: linear-gradient(to right, var(--rs-dot) 45%, transparent 0);
  background-size: 5px 1.6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
#easy-read-recipe .rs-tip:focus-visible { outline: 2px solid var(--plum-icon); outline-offset: 2px; }
#easy-read-recipe .rs-tip[aria-expanded="true"] { background-color: var(--band); }
@media (hover: hover) { #easy-read-recipe .rs-tip:hover { background-color: var(--band); } }
#easy-read-recipe li.stricken .rs-tip, .recipe-left li.stricken .rs-tip { --rs-dot: var(--ring); background-color: transparent !important; cursor: inherit; }

.rs-tip-pop {
  position: absolute;
  z-index: 900;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 14px 40px 14px 16px;
  background: var(--ink);
  color: var(--band);
  border-radius: var(--r-2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  font: 400 16px/1.5 var(--font-body);
  animation: rs-tip-in .16s ease;
}
.rs-tip-pop[hidden] { display: none; }
.rs-tip-pop .rs-tip-k { display: block; margin-bottom: 4px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rs-tip-pop::before { content: ""; position: absolute; top: -6px; left: var(--rs-ax, 24px); width: 12px; height: 12px; transform: rotate(45deg); background: var(--ink); }
.rs-tip-pop.rs-up::before { top: auto; bottom: -6px; }
.rs-tip-x {
  all: unset;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--faint);
}
.rs-tip-x:hover { background: var(--dark-raised); color: var(--white); }
@keyframes rs-tip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

#easy-read-recipe .rs-paren, #ingredientwrap .rs-paren, .recipe-left .rs-paren {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px 1px;
  border-radius: var(--r-1);
  background: var(--band);
  color: var(--muted);
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: normal; /* Nov 13: never wider than the line (was nowrap) */
  max-width: 100%;
  vertical-align: .18em;
  text-decoration: none;
  transition: opacity .2s;
}
#easy-read-recipe .rs-prep .rs-paren { background: var(--card); }
#easy-read-recipe li.stricken .rs-paren, #ingredientwrap li.cm-got .rs-paren, .recipe-left li.stricken .rs-paren { opacity: .5; }
.rs-paren .rs-pp { display: none; }

/* ==========================================================================
   7. NUTRITION, AUTHOR'S NOTE, YOUR NOTES
   ========================================================================== */
.nt { color: var(--ink); }
.nt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nt-tile {
  min-width: 0;
  padding: 9px 4px 8px;
  border-radius: var(--r-3);
  background: var(--well-bg);
  box-shadow: var(--well);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.nt-val { font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-val small { margin-left: 1px; font-size: 12px; font-weight: 500; color: var(--muted); }
.nt-label { font-size: 12px; color: var(--muted); }
.nt-cal { background: var(--card); box-shadow: var(--raise), 0 0 0 1px var(--line); }
.nt-foot { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (min-width: 700px) { .recipe-card .nt-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* the author's note: the last stop on the step rail (6-extras.js moves it) */
.author-note { margin-top: 36px; }
.author-note-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 28px; }
.author-note-text { margin-top: 2px; font: italic 400 17px/1.6 var(--font-display); color: var(--muted); white-space: pre-line; }
#easy-read-recipe .rs-note .author-note-title { margin-top: 0; padding-left: 10px; }
#easy-read-recipe .rs-note .author-note-text { padding: 0 10px; }
#easy-read-recipe .rs-note .author-note-title::before {
  content: "";
  position: absolute;
  left: calc((var(--recipe-side-extend) - 32px) / 2);
  top: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--raise), 0 0 0 1.5px var(--plum-icon);
}
@media (max-width: 699px) {
  #easy-read-recipe .rs-note .author-note-title::before { display: none; }
}

/* Your notes: private, kept in this browser until notes move to your
   account (7-page.js) */
.notes-field {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-4);
  background: var(--well-bg);
  box-shadow: var(--well);
  color: var(--ink);
  font: 400 16px/1.45 var(--font-body); /* 16px: smaller makes iOS zoom the page in */
  resize: vertical;
}
.notes-field::placeholder { color: var(--soft); }
.notes-field:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--plum-icon); }

/* ==========================================================================
   8. LOCKED RECIPES, SHARED LINKS, SHARE, MORE RECIPES
   A members' recipe, opened by anyone else (the server decided:
   recipe_is_open() in app/lib/recipes.php): title, details and photo, then
   the photo fades into the join panel. No steps were sent.
   ========================================================================== */
#easy-read-recipe .pw-hidden { display: none !important; }
.pw-padlock { display: none; }

.join-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: -90px calc(-1 * (var(--card-pad) + var(--bleed))) 0;
  padding: 120px 20px 8px;
  /* the fade spans the photo's full bleed (its bottom 90px); below the
     photo the panel's colour stays inside the card, or its square corners
     stuck out past the card's sides (polish, Oct 26) */
  --join-fade: rgba(255, 255, 255, 0);
  background:
    linear-gradient(180deg, var(--join-fade) 0, var(--card) 90px) top / 100% 90px no-repeat,
    linear-gradient(var(--card), var(--card)) var(--bleed) 90px / calc(100% - 2 * var(--bleed)) calc(100% - 90px) no-repeat;
}
[data-theme="dark"] .join-panel { --join-fade: rgba(28, 28, 33, 0); }
.recipe-head + .join-panel { margin-top: 24px; padding-top: 24px; background: none; } /* no photo to fade */
.join-title { font: 700 28px/1.15 var(--font-display); letter-spacing: -.01em; }
.join-lead { max-width: 440px; margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.join-inside { max-width: 440px; margin-top: 8px; font-size: 15px; color: var(--muted); }
/* Nov 12 (round 10 carry-over, step 5): the home page's points, left-aligned in the centred panel */
.join-points { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 20px 0 0; padding: 0; list-style: none; text-align: left; }
.join-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--muted); }
.join-points b { color: var(--ink); font-weight: 600; }
.join-dot { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--plum-tint); color: var(--plum-icon); }
.join-dot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.join-points + .join-lead { margin-top: 16px; font-size: 16px; }
.join-cta { width: 100%; max-width: 420px; min-height: 52px; margin-top: 22px; font-size: 17px; }
.join-alt { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--plum-text); } /* a 44px tap (harden, Oct 26) */
.join-signin { margin-top: 14px; font-size: 14px; color: var(--muted); }
.join-signin a { font-weight: 700; }

/* someone opened a member's share link */
.shared-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: var(--r-4);
  background: var(--well-bg);
  box-shadow: var(--well);
  font-size: 15px;
  color: var(--muted);
}
.shared-note a { font-weight: 700; }

/* the end of the recipe */
.section-title { font: 700 22px var(--font-display); margin-bottom: 14px; }
.recipe-variations { margin-top: 40px; }
.variation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.recipe-end { margin-top: 36px; }

/* Made it? (step 6, 9-talk.js): a section at the end of the recipe, flat
   like Nutrition above it, under a separator line (not a card in the card). I made this, then five stars; comments under, newest first,
   Dave's replies indented and marked Cocamoo. */
.talk { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--sep); scroll-margin-top: calc(var(--header-h) + 24px); }
@media (max-width: 899px) { .talk { scroll-margin-top: calc(var(--header-h) + 110px); } } /* clear of the stuck ribbon */
.talk-top { display: flex; flex-direction: column; gap: 4px; }
.talk-top .section-title { margin: 0; }
.talk-summary { font-size: 15px; color: var(--muted); }
.talk-summary b { color: var(--ink); }
.talk-avg { color: var(--plum-icon); }
.talk-made { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 16px; }
.talk-made-btn svg { width: 18px; height: 18px; color: var(--muted); }
/* made it: pressed in with a plum tick (an "on" state), not a second plum fill beside Post (Oct 29) */
.talk-made.is-made .talk-made-btn { background: var(--well-bg); box-shadow: var(--well); color: var(--ink); }
.talk-made.is-made .talk-made-btn svg { color: var(--plum-icon); }
/* Post fills only once there's something to post (a word or a photo) */
.talk-form:has(textarea:placeholder-shown):has([data-talk-photo][hidden]) [type="submit"] { background: var(--card); box-shadow: var(--raise), 0 0 0 1px var(--line); color: var(--muted); }
/* "I made this": the check presses in and settles, like a stamp (delight, Oct 26) */
.talk-made.is-stamped .talk-made-btn svg { animation: made-stamp .45s var(--ease); }
@keyframes made-stamp { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-10deg); } 70% { transform: scale(.9) rotate(2deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .talk-made.is-stamped .talk-made-btn svg { animation: none; } }
.talk-rate { display: flex; align-items: center; gap: 8px; }
@media (max-width: 419px) { .talk-rate { flex-direction: column; align-items: flex-start; gap: 0; } .talk-star-row { margin-left: -8px; } }
.talk-rate[hidden] { display: none; }
.talk-rate-q { font-size: 15px; font-weight: 600; }
.talk-star-row { display: flex; }
.talk-star {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--ring); font-size: 28px; line-height: 44px; cursor: pointer; transition: transform .12s ease, color .12s ease;
}
.talk-star.is-on { color: var(--plum-icon); }
.talk-star:hover { transform: scale(1.12); color: var(--plum-icon); }
.talk-star-row:hover .talk-star { color: var(--plum-icon); }
.talk-star-row .talk-star:hover ~ .talk-star { color: var(--ring); }
.talk-star svg { display: block; width: 28px; height: 28px; margin: 8px; } /* the solid set's star (Nov 13) */
.talk-star:focus-visible { outline: 2px solid var(--plum-icon); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .talk-star { transition: none; } .talk-star:hover { transform: none; } }
.talk-form { margin-top: 18px; }
.talk-form textarea {
  display: block; width: 100%; min-height: 96px; padding: 14px 16px; border: 0; border-radius: var(--r-4); resize: vertical;
  background: var(--well-bg); box-shadow: var(--well); color: var(--ink); font: 400 16px/1.5 var(--font-body);
}
.talk-form textarea:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--plum-icon); }
.talk-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.talk-as { font-size: 14px; color: var(--muted); }
/* Oct 29: a photo of the dish. Photo is a quiet secondary button beside Post */
.talk-as { margin-right: auto; }
.talk-photo-add { position: relative; gap: 6px; cursor: pointer; }
.talk-photo-add svg { width: 18px; height: 18px; color: var(--plum-icon); }
.talk-photo-add:focus-within { outline: 2px solid var(--plum-icon); outline-offset: 2px; }
.talk-photo-pick { position: relative; display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }
.talk-photo-pick[hidden] { display: none; }
.talk-photo-pick img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-4); box-shadow: var(--raise); }
.talk-photo-x { position: absolute; top: -8px; left: 78px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--card); box-shadow: var(--raise); color: var(--ink); cursor: pointer; }
.talk-photo-x::after { content: ""; position: absolute; inset: -6px; } /* 44px to tap */
.talk-photo-x svg { width: 14px; height: 14px; }
.talk-photo-note { font-size: 14px; color: var(--muted); }
.talk-wait { margin-top: 8px; font-size: 14px; color: var(--muted); }
.talk-photo { display: block; width: fit-content; max-width: min(100% - 42px, 360px); margin: 10px 0 0 42px; overflow: hidden; border-radius: var(--r-4); box-shadow: var(--raise); }
.talk-photo img { display: block; width: 100%; height: auto; }
.talk-held { margin: 8px 0 0 42px; font-size: 14px; font-weight: 600; color: var(--muted); }
.talk-item.is-held .talk-photo { opacity: .85; }
@media (max-width: 420px) { .talk-photo-add span { display: none; } .talk-photo-add { padding: 0 14px; } } /* the camera alone, with its label for screen readers */
.talk-error { margin-top: 8px; font-size: 14px; color: var(--error); }
.talk-join { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.talk-join a { padding: 12px 0; font-weight: 700; } /* inline: a 44px tap area without spacing the lines apart */
.talk-list { margin: 22px 0 0; padding: 0; list-style: none; }
.talk-list[hidden] { display: none; }
.talk-more { margin-top: 0; }
.talk-item { padding: 16px 0; border-top: 1px solid var(--sep); }
.talk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.talk-avatar {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--well-bg); box-shadow: var(--well); font: 700 14px var(--font-display); color: var(--ink);
}
.talk-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* their photo over the initial */
.talk-who { font-weight: 700; font-size: 15px; }
.talk-badge { margin-left: 4px; padding: 2px 8px; border-radius: var(--r-3); background: var(--plum-tint); color: var(--plum-text); font-size: 12px; font-weight: 700; }
.talk-stars { color: var(--plum-icon); font-size: 14px; letter-spacing: 1px; }
.talk-stars-off { color: var(--ring); }
.talk-stars .ic-inline { margin-right: 1px; }
.talk-date { margin-left: auto; font-size: 13px; color: var(--muted); }
.talk-body { margin: 8px 0 0 42px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
/* Reply and Delete under a comment (Nov 10: Reply joined Delete) */
.talk-acts { display: flex; gap: 14px; margin: 4px 0 0 38px; }
.talk-act { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; }
.talk-act:hover { color: var(--plum-text); }
.talk-delete.is-asking { color: var(--plum-text); }
.talk-replies[hidden] { display: none; }
/* the reply box opens under the comment, lined up with its words */
.talk-reply-form { margin: 4px 0 8px 42px; }
.talk-reply-form textarea {
  display: block; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-radius: var(--r-4);
  background: var(--well-bg); box-shadow: var(--well); color: var(--ink); font: 400 16px/1.5 var(--font-body); resize: vertical;
}
.talk-reply-form textarea:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--plum-icon); }
.talk-reply-form .talk-form-foot { justify-content: flex-end; margin-top: 8px; }
.talk-replies { margin: 6px 0 0 42px; padding: 0; list-style: none; }
.talk-replies .talk-item { padding: 12px 0 4px; }
.talk-item.is-staff .talk-avatar { background: var(--plum-button); box-shadow: none; color: var(--white); }
.talk-show-all { margin-top: 6px; }
.more-recipes { margin-top: 28px; padding: 26px 22px 24px; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
@media (max-width: 699px) { .more-recipes { margin: 8px 0 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--sep); padding: 24px 16px; } }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
.more-cta { display: flex; justify-content: center; margin-top: 22px; }
@media (max-width: 560px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* an option changed the totals: a brief tint on what changed */
.changed { animation: cm-changed 1.4s var(--ease); border-radius: var(--r-1); }
@keyframes cm-changed { 0%, 40% { background-color: rgba(158, 46, 87, .14); box-shadow: 0 0 0 4px rgba(158, 46, 87, .14); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }

/* ribbon padlocks for scale and cook mode while locked (ticket.php) */
.cm-ticket .cm-lock { display: none; width: 1.1em; height: 1.1em; color: var(--cm-accent); }
.cm-ticket.is-locked .cm-scale-chev, .cm-ticket.is-locked .cm-track { display: none; }
.cm-ticket.is-locked .cm-lock { display: block; }

/* ==========================================================================
   9. OVERLAY (video / photo) AND TOAST
   ========================================================================== */
html.overlay-open { overflow: hidden; }
.cm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px;
  background: rgba(10, 10, 13, .9);
  animation: fade-in .2s ease;
}
.cm-overlay-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-overlay-x svg { width: 22px; height: 22px; }
.cm-overlay-x:hover { background: rgba(255, 255, 255, .22); }
.cm-overlay-body { max-width: 100%; max-height: 100%; }
/* YouTube Shorts are portrait */
.cm-video { width: min(400px, calc((100vh - 100px) * 9 / 16), 100vw - 32px); aspect-ratio: 9 / 16; border-radius: var(--r-3); overflow: hidden; background: #000; }
.cm-video iframe { width: 100%; height: 100%; border: 0; }
.cm-zoom { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--r-2); }

/* .cm-toast moved to base.css (TOAST) in step 4: the Library uses it too */


/* Your notes: a quiet "Saved" after typing (audit, Oct 26) */
.notes-saved { min-height: 18px; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* tip popups: a card in dark mode, like every menu (they are Ink in light) */
[data-theme="dark"] .rs-tip-pop, [data-theme="dark"] .tip-pop { background: var(--card); color: var(--ink); box-shadow: var(--shadow-menu); }
[data-theme="dark"] .rs-tip-pop::before { background: var(--card); }

/* ==========================================================================
   10. IMPORTED RECIPES (/my/<id>, pages/my-recipe.php; I-List.png)
   ========================================================================== */
.import-source { margin-top: 10px; font-size: 15px; color: var(--muted); }
.import-source a { color: var(--plum-text); font-weight: 600; text-decoration: none; }
.import-source a:hover { text-decoration: underline; }

/* the site's own photo, by address; if it won't load, a course-coloured tile with the site's name */
.import-photo .import-tile { display: none; }
.import-photo.is-broken .recipe-hero { display: none; }
.import-photo.is-broken .import-tile {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 18px 20px;
  border-radius: var(--r-5);
  background: var(--cat, var(--muted));
  color: var(--on-cat, var(--white));
  font: 700 18px var(--font-display);
}
@media (min-width: 900px) { .import-photo.is-broken .import-tile { aspect-ratio: 16 / 7; border-radius: var(--r-5); } }

/* "Ingredients · as the recipe lists them": a raised card before the steps */
#easy-read-recipe .import-ingredients, .recipe-left .import-ingredients {
  margin: 8px 0 18px;
  padding: 18px 18px 10px;
  border-radius: var(--r-5);
  background: var(--card);
  box-shadow: var(--raise), 0 0 0 1px var(--line);
}
/* from 700px, out of the steps' number gutter to the full width of the card */
@media (min-width: 700px) { #easy-read-recipe .import-ingredients { margin-left: calc(-1 * var(--recipe-side-extend)); margin-right: calc(-1 * var(--recipe-side-extend)); } }
#easy-read-recipe .import-ingredients .box-head, .recipe-left .import-ingredients .box-head { margin-bottom: 4px; }
#easy-read-recipe .import-ingredients ul, .recipe-left .import-ingredients ul { margin: 0 0 8px; }
#easy-read-recipe .ing-group, .recipe-left .ing-group { margin: 12px 0 2px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* a step with no title of its own: the number stays, "Step 3" is only read out */
#easy-read-recipe .rs-step > h4.step-quiet { height: 0; margin: 0; overflow: visible; font-size: 0; line-height: 0; }
#easy-read-recipe .rs-step > h4.step-quiet + p { margin-top: 2px; }
#easy-read-recipe h3.import-section { margin: 26px 0 0; font: 700 19px var(--font-display); }
#easy-read-recipe .import-tip { color: var(--muted); }

/* no recipe data: the page's text as written, after a yellow "needs a look" card */
.import-note {
  margin: 26px 0 8px;
  padding: 14px 16px;
  border-radius: 2px 2px var(--r-4) 2px;
  background: linear-gradient(180deg, var(--note), var(--note-2));
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 6px 14px rgba(24, 24, 27, .06);
  color: var(--ink);
  font-size: 15px;
}
.import-note-title { font: 700 17px var(--font-display); margin-bottom: 4px; }
#easy-read-recipe.import-text p { margin: 0 0 10px; }

/* written in the editor (round 8): no site name on the photo tile */
.page-import .import-photo.is-broken .import-tile span:empty { display: none; }

.import-foot { margin-top: 28px; font-size: 13px; color: var(--muted); }
.import-foot a { color: var(--plum-text); }

/* from a Paprika file: their notes, their other photos, Paprika's nutrition panel */
.import-notes .author-note-text { font-style: normal; font-family: var(--font-body); font-size: 16px; }
.import-photos { margin-top: 32px; }
.import-photo-row { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.import-photo-row img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-4); box-shadow: var(--raise); }
.import-nutrition-text { white-space: pre-line; font-size: 15px; color: var(--muted); }
.import-rating { white-space: nowrap; }

/* ==========================================================================
   ROUND 9: SWAPS ON THE RECIPE (recipe/10-swaps.js; R9-R-Step, R9-R-Sheet)
   Only when it matters: a swap from the store on soft plum, one faint ⇆ on
   specialty ingredients, a line inside an existing tip card. Plum, not the
   AI gradient (the "For this recipe" card is the AI's).
   ========================================================================== */
.swap-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-4); background: var(--plum-tint); color: var(--ink); font-size: 15px; }
.swap-bar[hidden] { display: none; }
.swap-bar svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--plum-icon); }
.swap-show { margin-left: auto; min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--plum-text); font: 700 15px var(--font-body); cursor: pointer; }
#easy-read-recipe li.is-swapped { border-radius: var(--r-3); background: var(--plum-tint); }
#easy-read-recipe li.is-swapped .ing-text { display: none; }
#easy-read-recipe li.is-skipped .ing-text { color: var(--muted); text-decoration: line-through; }
.swap-deco { display: inline-flex; flex-direction: column; gap: 2px; }
#easy-read-recipe li.is-skipped .swap-deco { display: inline; margin-left: 8px; color: var(--muted); font-size: 14px; }
.swap-deco-what { font-weight: 600; }
.swap-deco-what:has(.ing-amt) { font-weight: 400; }
.swap-deco-was { color: var(--muted); font-size: 14px; }
.swap-deco-was s { text-decoration-color: var(--soft); }
.swap-undo { padding: 0; border: 0; background: none; color: var(--plum-text); font: 700 14px var(--font-body); cursor: pointer; }
/* Round 10 (1.2): no ⇆ on the line. Every ingredient line ends in the
   Shopping list's quiet ··· (10-swaps.js), whose menu holds Swap…. 32px to
   see, 44px to tap; tapping the rest of the line still ticks it. */
#easy-read-recipe .ing-more { position: relative; display: grid; flex: 0 0 32px; width: 32px; height: 32px; margin: -6px -4px -6px auto; padding: 0; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#easy-read-recipe .ing-more::after { content: ""; position: absolute; inset: -6px; }
#easy-read-recipe .ing-more svg { width: 18px; height: 18px; fill: currentColor; }
#easy-read-recipe .ing-more:hover, #easy-read-recipe .ing-more:focus-visible, #easy-read-recipe .ing-more[aria-expanded="true"] { background: var(--well-bg); color: var(--ink); outline: none; }
#easy-read-recipe li.stricken .ing-more, .recipe-left li.stricken .ing-more { opacity: .6; }
.rs-tip-txt { white-space: pre-line; } /* "⇆ Don't have it? …" on its own line */

/* the swap sheet */
.swap-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); }
.swap-scrim[hidden] { display: none; }
.swap-sheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; max-height: 90vh; overflow-y: auto; padding: 10px 22px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--r-5) var(--r-5) 0 0; background: var(--ground); box-shadow: 0 -20px 50px rgba(0, 0, 0, .18); color: var(--ink); }
.swap-sheet[hidden] { display: none; }
@media (min-width: 700px) { .swap-sheet { left: 50%; right: auto; bottom: auto; top: 8vh; width: min(520px, 92vw); transform: translateX(-50%); border-radius: var(--r-5); } .swap-sheet-grip { display: none; } }
.swap-sheet-grip { align-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--ring); }
.swap-sheet .sheet-eyebrow { margin-bottom: -10px; color: var(--plum-text); font: 600 16px var(--font-body); }
.swap-sheet-h { font: 700 24px/1.2 var(--font-display); }
.swap-sheet-list { overflow: hidden; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
.swap-sheet-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.swap-sheet-row + .swap-sheet-row { border-top: 1px solid var(--sep); }
.swap-sheet-words { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.swap-sheet-what { font-weight: 600; }
.swap-sheet-note { color: var(--muted); font-size: 14px; }
.swap-sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swap-sheet-acts .btn { justify-content: center; }

/* ==========================================================================
   11. REFINE AN AI RECIPE (Nov 11; pages/my-recipe.php, recipe/11-refine.js)
   An AI area under the head: one line asking "Not quite right?", a well to
   type the change and a ring button (the page's filled button stays
   elsewhere), then how many changes are left and Undo. While it works, the
   AI spinner and what it's changing take the form's place.
   ========================================================================== */
.refine { display: grid; gap: 10px; margin: 18px 0 6px; padding: 14px 16px 12px; }
@media (min-width: 700px) { .refine { margin-top: 22px; padding: 16px 20px 14px; } }
.refine-form { display: grid; gap: 10px; }
.refine-form[hidden] { display: none; }
.refine-h { display: inline-flex; align-items: center; gap: 8px; font: 700 16px var(--font-body); color: var(--ink); }
.refine-h svg { width: 18px; height: 18px; flex: none; color: var(--ai-ink); }
.refine-row { display: flex; gap: 10px; }
.refine-input {
  flex: 1 1 auto; min-width: 0; height: var(--btn-lg); padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--card); box-shadow: var(--well); color: var(--ink); font: 400 16px var(--font-body);
}
.refine-input::placeholder { color: var(--muted); font-style: italic; } /* Nov 11: an example, not an answer */
.refine-input:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--plum-icon); }
.refine-go { flex: 0 0 auto; height: var(--btn-lg); }
@media (max-width: 559px) { .refine-row { flex-direction: column; } .refine-go { width: 100%; justify-content: center; } }
.refine-note { font-size: 14px; line-height: 1.45; color: var(--muted); }
.refine-note[hidden] { display: none; }
.refine-undo { margin-left: 4px; padding: 10px 0; border: 0; background: none; font: 600 14px var(--font-body); color: var(--plum-text); cursor: pointer; }
.refine-error { font-size: 14px; font-weight: 600; color: var(--error); }
.refine-wait { display: flex; align-items: center; gap: 12px; min-height: var(--btn-lg); font-size: 15px; color: var(--ink); }
.refine-go { gap: 8px; }
.refine-go svg { width: 18px; height: 18px; }
/* Nov 11: "Looks good" settles it; the box hides (··· opens it again) */
.refine[hidden] { display: none; }
.refine-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.refine-foot .refine-note { flex: 1 1 200px; }
.refine-foot[hidden] { display: none; }
.refine-done { flex: 0 0 auto; }

/* Nov 12 (Dave's dad): an AI recipe changed by hand. A line saying so and
   "Make the rest match" above the change box (recipe/11-refine.js). */
.refine-edited { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.refine-edited[hidden] { display: none; }
.refine-edited p { flex: 1 1 240px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.refine-edited .btn { flex: 0 0 auto; }

/* Nov 12: Rewrite with Cocamoo (an import, Paprika or written recipe) */
.import-rewrite { margin-top: 12px; gap: 8px; }
.import-rewrite svg { width: 18px; height: 18px; }
.rw-p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--ink); }

/* Nov 13 (Dave couldn't find it in the ···): Rewrite with Cocamoo under an
   imported recipe's head (pages/my-recipe.php) */
.import-rewrite-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 18px; padding: 12px 16px; border-radius: var(--r-4); }
.import-rewrite-row p { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 240px; font-size: 15px; color: var(--ink); }
.import-rewrite-row p svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ai-ink); }
.import-rewrite-row .btn svg { width: 15px; height: 15px; }

/* Nov 13 (Dave): an imported recipe's Ingredients in the left rail from
   1200px (7-page.js moves it; the line rules above also name .recipe-left).
   It scrolls on its own when it's taller than the window. */
.recipe-left .import-ingredients { margin: 18px 0 0; padding: 16px 14px 8px; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise), 0 0 0 1px var(--line); max-height: calc(100vh - var(--header-h) - 90px); overflow: auto; }
.recipe-left .import-ingredients .box-aside { display: none; }
.recipe-left .import-ingredients ul { margin: 0 0 8px; padding: 0; list-style: none; }
.recipe-left .import-ingredients ul.recipe-ingredient-list li { font-size: 15px; }
@media (min-width: 1200px) { body.has-left-ingredients .recipe-page.shell.has-left.has-right { grid-template-columns: 260px minmax(0, 1fr) 300px; } }
/* Nov 13: Rewrite with Cocamoo in an import's toolbar: a quiet glass pill,
   the spark in AI ink */
.tool-rewrite svg { color: var(--ai-ink); }
/* phones: just the spark, a round glass button like the heart beside it */
@media (max-width: 699px) {
  .recipe-tools .tool-rewrite { width: 44px; padding: 0; justify-content: center; }
  .tool-rewrite-label { display: none; }
}