/* ============================================================
   WPRM recipe card — "TAF 2026" template
   Warm Oven restyle of the TAF Chic template. CSS-ONLY (R2):
   this file is embedded in the wprm_template_taf-2026 option's
   `css` field; the template HTML is byte-identical to TAF Chic.

   - Wrapper class is hardcoded (same pattern as the old template):
     .wprm-recipe-template-taf-2026
   - Every theme token is re-declared as --taf-* WITH a literal
     fallback, because the /wprm_print/ page renders this CSS
     without the theme stylesheet (no :root tokens there).
   - Layout: the card is a flex column; `order` re-sequences the
     fixed template DOM (photo first, rating CTA last) with zero
     markup changes. All direct children get an explicit order.
   - Selector inventory verified against the real rendered markup
     of the production TAF Chic card (WPRM 10.5 modern mode).
   ============================================================ */

/* ---- 1. Card shell + Warm Oven tokens ---- */
.wprm-recipe-template-taf-2026 {
  /* == GENERATED: tokens — do not edit by hand. Source: design/tokens.json (scripts/build-tokens.py) == */
  --taf-milk:      var(--milk, #FEFBFA);
  --taf-cream:     var(--cream, #FAEDF2);
  --taf-paper:     var(--paper, #FFFFFF);
  --taf-chocolate: var(--chocolate, #33202B);
  --taf-cocoa:     var(--cocoa, #6E5964);
  --taf-rose:      var(--rose, #E11584);
  --taf-rose-deep: var(--rose-deep, #B80E67);
  --taf-link:      var(--rose-link, #D01277);
  --taf-rose-tint: var(--rose-tint, #FCE7F3);
  --taf-saffron:   var(--saffron, #E29B32);
  --taf-saffron-deep: var(--saffron-deep, #B87716);
  --taf-focus-ring-color: var(--focus-ring-color, #B87716);
  --taf-line:      var(--line, #F0DEE6);
  --taf-sans:      var(--sans, 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  --taf-display:   var(--display, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --taf-r:         var(--radius, 8px);
  --taf-r-sm:      var(--radius-sm, 6px);
  --taf-r-pill:    var(--radius-pill, 6px);
  --taf-r-round:   var(--radius-round, 50%);
  --taf-shadow:    var(--shadow, 0 1px 2px rgba(51, 32, 43, .06), 0 6px 24px -8px rgba(51, 32, 43, .12));
  --taf-speed:     var(--speed, .15s);
  --taf-card-pad:  20px;
  /* == END GENERATED == */

  /* WPRM core checkbox hooks (label::before/::after read these) */
  /* 24px (was 18): the visible box itself clears the WCAG 2.5.8 24px floor —
     the label hit-area padding in section 9 stacks on top of it. */
  --wprm-list-checkbox-size: 20px;  /* 20×20 (the padded label row stays the ≥44px target) */
  --wprm-list-checkbox-background: var(--taf-paper);
  --wprm-list-checkbox-borderwidth: 1.5px;
  --wprm-list-checkbox-border-style: solid;
  --wprm-list-checkbox-border-color: var(--taf-rose);  /* control chrome is brand pink, no muted tints */
  --wprm-list-checkbox-check-color: var(--color-on-accent, #FFFFFF);  /* README: white check on rose */
  --wprm-list-checkbox-border-radius: 5px;  /* comp literal */
  --wprm-list-checkbox-check-width: 2px;
  --wprm-list-checkbox-check-color: var(--taf-rose);

  margin: var(--space-32) auto var(--space-24);  /* comp: 30px above the card at 390 */
  max-width: 100%;
  background-color: var(--taf-paper);
  box-shadow: none;                       /* V2: bordered shell, no shadow */
  border: var(--bw-1) solid #DFC3D2;      /* token-exempt: V2 local constant — card border/section rules */
  border-radius: var(--taf-r);
  /* comp mobile pad 26/20/30, snapped to the token scale (24/20/32) */
  padding: var(--space-24) var(--taf-card-pad) var(--space-32);
  font-family: var(--taf-sans);
  font-size: var(--fs-18);     /* was 16px; card prose matches the
                                  18px page body set the same day */
  line-height: var(--lh-165);  /* comp: card inherits body 1.65 */
  color: var(--taf-chocolate);
  display: flex;
  flex-direction: column;
}
.wprm-recipe-template-taf-2026 a { color: var(--taf-link); }
.wprm-recipe-template-taf-2026 br { display: none; }
.wprm-recipe-template-taf-2026 p,
.wprm-recipe-template-taf-2026 li {
  font-family: var(--taf-sans);
  font-size: var(--fs-18) !important;   /* was 16px — see the card root */
  line-height: var(--lh-165) !important;
}

/* ---- 2. Visual re-sequencing (2026-07-31 handoff: photo joins the
   header — beside the text ≥700px, below the description on phones;
   rating band last). Every direct child gets an explicit order;
   anything unmapped (svg gradient defs, empty <style>) parks at 50,
   zero-sized. The JS-injected cook-mode row (taf-recipe.js) slots
   itself between ingredients and instructions with order 115. ---- */
.wprm-recipe-template-taf-2026 > * { order: 50; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-name                    { order: 2; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-author                  { order: 3; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating                  { order: 4; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-summary                 { order: 5; }
.wprm-recipe-template-taf-2026 > .wprm-container-float-right          { order: 6; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-times-container         { order: 7; }
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced       { order: 8; }
.wprm-recipe-template-taf-2026 > .wprm-template-chic-buttons          { order: 9; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-equipment-container     { order: 10; }
.wprm-recipe-template-taf-2026 > .taf-cookmode                        { order: 11; }  /* V2: cook mode ABOVE ingredients */
.wprm-recipe-template-taf-2026 > .wprm-recipe-ingredients-container   { order: 12; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-instructions-container  { order: 13; }
/* mobile V2: photo first, centered text under it */
/* ONE rule on purpose: WPRM's zero-height #recipe-video jump anchor must
   TRAVEL with the video it marks — as a shared selector the pair can never
   drift apart when this slot number changes. (Split rules DID drift: the
   anchor fell to the blanket order and the header's Watch-video button
   landed ~1.5k px past the video — reproduced and measured.) */
.wprm-recipe-template-taf-2026 > .wprm-recipe-video-container,
.wprm-recipe-template-taf-2026 > #recipe-video                        { order: 14; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-notes-container         { order: 15; }
/* order 16 is deliberately UNUSED: it belonged to .taf-adrail--wide, the
   full-width reserved slot removed at Raptive's request 2026-08-06 (v0.88.0).
   The gap is kept so nothing above or below has to be renumbered. */
.wprm-recipe-template-taf-2026 > .wprm-nutrition-label-shortcode-container { order: 17; }
.wprm-recipe-template-taf-2026 > .wprm-call-to-action                 { order: 18; }

/* ---- Raptive in-card units HOLD the position their script gave them.
   Raptive's own review caught the old behavior: on phones
   (<700px there are no rails, so nothing adopts) their script inserts
   Recipe_N slots as DIRECT children of the card at section boundaries, and
   the blanket order:50 flung both measured units past the CTA to the card
   tail — +2116px / +2013px on /the-perfect-mango-matcha-latte/ at 390
   (units nested one level deeper, e.g. inside the notes <ul>, were never
   affected — which is how the cause was isolated to this sheet).
   Mechanism: an adjacency tie hands an injected unit its PRECEDING mapped
   sibling's order; flex ties resolve by DOM position, so the unit renders
   exactly where Raptive inserted it. The `+ x + x` arm covers two stacked
   units. A unit preceded only by junk (style/svg/spacer — all order 50)
   still falls to the blanket rule; never observed in the wild.
   ⚠️ 2026-08-06 (v0.88.0): these rules now govern DESKTOP TOO. Until this
   release a >=700px script adopted the injected units into .taf-adrail
   containers, so on desktop they were never direct children and the ladder
   was inert. Raptive asked for the adoption (and the rails) to go, so every
   injected unit is a direct child at every width and this ladder is the ONLY
   thing holding it at its insertion point. Do NOT "simplify" this back to
   one blanket — that is exactly the defect Raptive reported. ---- */
.wprm-recipe-template-taf-2026 > .wprm-recipe-name + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-name + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 2; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-author + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-author + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 3; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 4; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-summary + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-summary + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 5; }
/* photo: order 1 on phones (the mobile rule below), 6 in the >=700 grid —
   the media-query block re-states this pair at 6 alongside the photo's own. */
.wprm-recipe-template-taf-2026 > .wprm-container-float-right + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-container-float-right + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 1; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-times-container + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-times-container + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 7; }
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 8; }
.wprm-recipe-template-taf-2026 > .wprm-template-chic-buttons + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-template-chic-buttons + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 9; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-equipment-container + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-equipment-container + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 10; }
.wprm-recipe-template-taf-2026 > .taf-cookmode + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .taf-cookmode + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 11; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-ingredients-container + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-ingredients-container + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 12; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-instructions-container + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-instructions-container + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 13; }
.wprm-recipe-template-taf-2026 > :is(.wprm-recipe-video-container, #recipe-video) + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > :is(.wprm-recipe-video-container, #recipe-video) + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 14; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-notes-container + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-recipe-notes-container + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 15; }
/* (the .taf-adrail--wide arm of this ladder went with the rail itself,
   v0.88.0 — there is no such element for an injected unit to follow.) */
.wprm-recipe-template-taf-2026 > .wprm-nutrition-label-shortcode-container + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-nutrition-label-shortcode-container + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 17; }
.wprm-recipe-template-taf-2026 > .wprm-call-to-action + :is([class*="adthrive"], [id*="AdThrive"]),
.wprm-recipe-template-taf-2026 > .wprm-call-to-action + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 18; }

/* Neutralize template chrome we re-express with margins:
   spacers, decorative icon/line dividers, in-header rules. */
.wprm-recipe-template-taf-2026 .wprm-spacer { display: none !important; }
.wprm-recipe-template-taf-2026 .wprm-icon-shortcode { display: none !important; }
.wprm-recipe-template-taf-2026 .wprm-recipe-header .wprm-decoration-line { display: none !important; }

/* ---- 3. Photo: plain rounded 4:3 image (2026-07-31 handoff — "no
   scallop or fluted edge on photos"; the earlier full-bleed 16:10 +
   fade treatment is retired at every width). Mobile: full card width,
   below the description (order 6). ≥700px it moves into the header
   grid, column 2 at 300px (comp mid tier; the ≥900-container comp
   tier never applies — our content column caps the card at ~728px). ---- */
.wprm-recipe-template-taf-2026 > .wprm-container-float-right {
  float: none;
  /* V2 mobile: photo FIRST, centered, min(80%, 340px) */
  order: 1;
  width: min(80%, 340px);  /* token-exempt: V2 mobile photo sizing */
  margin: 0 auto;
  position: relative;
}
/* V2 mobile: title/byline/stars centered under the photo */
.wprm-recipe-template-taf-2026 > .wprm-recipe-name,
.wprm-recipe-template-taf-2026 > .wprm-recipe-author { text-align: center; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating { justify-content: center; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-name { margin-top: var(--space-14) !important; }
.wprm-recipe-template-taf-2026 .wprm-recipe-image {
  float: none;
  width: 100%;
  margin: 0 !important;
}
/* Grow (social-pug) wraps the recipe img in a pin-it wrapper that
   shrink-wraps to the img's attribute width — force it full-width so
   the img's width:100% resolves against the container. */
.wprm-recipe-template-taf-2026 .wprm-recipe-image .dpsp-pin-it-wrapper {
  display: block;
  width: 100%;
}
.wprm-recipe-template-taf-2026 .wprm-recipe-image img {
  /* token-frozen: reserves the box: CLS, on a template with zero margin
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-1-1);        /* V2: square photo; fixed box = zero CLS on lazy-load */
  object-fit: cover;
  border-radius: var(--taf-r-sm) !important;  /* V2 radius 6; beats the inline 3px */
}

/* ---- 4. Identity: name, author, summary ---- */
.wprm-recipe-template-taf-2026 .wprm-recipe-name {
  font-family: var(--taf-display) !important;
  font-weight: var(--w-semibold) !important;   /* Fix 9 (2026-07-09): was 400 — match in-content H2s; core .wprm-block-text-bold is !important */
  font-size: var(--fs-26);  /* V2 mobile title */
  line-height: var(--lh-115);
  letter-spacing: var(--ls--001em);
  color: var(--taf-chocolate);
  margin: 0 !important;  /* the card shell now carries the top padding */
  padding: 0 !important;
}
.wprm-recipe-template-taf-2026 > .wprm-recipe-author {
  margin: var(--space-8) 0 0;   /* reference: title→byline 8 */
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);   /* comp UI face */
  font-size: var(--fs-14);   /* README byline 14px */
  color: var(--taf-cocoa);
}
/* comp byline: "By <name>" with the name as a rose underlined link */
.wprm-recipe-template-taf-2026 > .wprm-recipe-author,
.wprm-recipe-template-taf-2026 > .wprm-recipe-author a {
  color: var(--taf-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wprm-recipe-template-taf-2026 > .wprm-recipe-author a {
  color: var(--taf-cocoa);
  text-decoration: none;
}
.wprm-recipe-template-taf-2026 > .wprm-recipe-author a:hover { color: var(--taf-link); }
.wprm-recipe-template-taf-2026 .wprm-recipe-summary {
  margin: var(--space-12) 0 0;   /* + the stars' compensated bottom = reference 12 */
  font-size: var(--fs-18);   /* V2 had 15px; raised with the rest of the card prose */
  line-height: var(--lh-165);
  color: var(--taf-cocoa);
}

/* ---- 5. Rating row (voteable stars) — SAFFRON anatomy (star rework, matching main.css's sitewide painter): filled = saffron
   fill + deep-saffron stroke, empty = quiet line-grey fill AND stroke,
   partial = gradient head saffron / tail grey. Star SVGs carry color as
   presentation ATTRIBUTES (#5A822B data-color) plus per-widget #id rules
   and inline hover fills from WPRM's JS — hence the !importants. The
   hover fill-to-cursor (-selecting-*) rules live in main.css and
   out-specify everything here on purpose. ---- */
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating {
  /* reference gaps are to the 19px GLYPHS; the 44px tap boxes carry
     ~12px invisible padding each side — negative margins restore the
     visual 8-above/12-below rhythm without shrinking the targets */
  margin: -4px 0 -12px;   /* token-exempt: optical compensation for tap padding */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wprm-recipe-template-taf-2026 .wprm-rating-star { cursor: pointer; }
.wprm-recipe-template-taf-2026 .wprm-rating-star svg {
  width: var(--star-interactive, 20px);   /* D6-A interactive tier (was the README's 19px) */
  height: var(--star-interactive, 20px);  /* the ≥44 hit box is preserved by padding + mins below */
  display: block;
}
/* WPRM injects per-widget rules with ID specificity
   (#wprm-recipe-user-rating-N ... svg * { fill: <setting color> }),
   so the color rules need !important. State classes (-full, -33/50/66,
   -selecting-*) still drive which stars are filled, so JS hover/vote
   feedback keeps working. The base fill skips partial stars via a
   zero-specificity :where() — flattening their url(#gradient) fill
   was the "partial stars look full/empty" bug. */
.wprm-recipe-template-taf-2026 .wprm-rating-star:where(:not(.wprm-rating-star-33):not(.wprm-rating-star-50):not(.wprm-rating-star-66)) polygon,
.wprm-recipe-template-taf-2026 .wprm-rating-star:where(:not(.wprm-rating-star-33):not(.wprm-rating-star-50):not(.wprm-rating-star-66)) path {
  fill: var(--taf-line) !important;   /* D1-C quiet empty */
}
.wprm-recipe-template-taf-2026 .wprm-rating-star polygon,
.wprm-recipe-template-taf-2026 .wprm-rating-star path {
  stroke: var(--taf-line) !important;
  fill-opacity: 1 !important;  /* pins WPRM's not-voted 30% wash; the anatomy carries the affordance */
}
.wprm-recipe-template-taf-2026 .wprm-rating-star-33 polygon,
.wprm-recipe-template-taf-2026 .wprm-rating-star-33 path,
.wprm-recipe-template-taf-2026 .wprm-rating-star-50 polygon,
.wprm-recipe-template-taf-2026 .wprm-rating-star-50 path,
.wprm-recipe-template-taf-2026 .wprm-rating-star-66 polygon,
.wprm-recipe-template-taf-2026 .wprm-rating-star-66 path { stroke: var(--taf-saffron-deep) !important; }
.wprm-recipe-template-taf-2026 .wprm-rating-star-full polygon,
.wprm-recipe-template-taf-2026 .wprm-rating-star-full path {
  fill: var(--taf-saffron) !important;
  stroke: var(--taf-saffron-deep) !important;
}
/* D2-A fractional fill: WPRM's gradient defs (4 stops, two opacity pairs —
   the defs svg sits beside the star spans). Head pair saffron; tail pair
   grey, forced visible (markup ships it at stop-opacity 0). !important
   beats the per-widget linearGradient#id stop rules — the old single
   both-stops rule here silently lost that specificity fight AND had no
   stop discrimination. */
.wprm-recipe-template-taf-2026 svg linearGradient stop:nth-of-type(-n+2) { stop-color: var(--taf-saffron) !important; }
.wprm-recipe-template-taf-2026 svg linearGradient stop:nth-of-type(n+3) {
  stop-color: var(--taf-line) !important;
  stop-opacity: 1 !important;
}
.wprm-recipe-template-taf-2026 .wprm-recipe-rating-details {
  margin-left: var(--space-4);
  font-size: var(--fs-13);   /* README: header star status line 13px */
  color: var(--taf-cocoa);
}

/* ---- 6. Facts strip (2026-07-31 handoff): grouped hairline boxes.
   Time group = the times-container (its 2-3 cells, self-hairlined so
   any cell count works). Category (course/cuisine) + Yield
   (servings/calories) = the columns-spaced block's two column divs,
   drawn as two boxes sharing a row from 700px up. Cells: rose glyph +
   uppercase label over a bold value. Icons ride the label's ::before
   as inline-SVG masks — zero markup, zero font bytes (Phase-1 icon
   decision stands). */
.wprm-recipe-template-taf-2026 > .wprm-recipe-times-container,
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced > div {
  border: var(--bw-1) solid var(--taf-line) !important;
  border-radius: var(--taf-r-sm);
  overflow: hidden;               /* clips the cells' -1px hairline overdraw */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* comp mobile: 2-up per group */
  padding: 0;
}
.wprm-recipe-template-taf-2026 > .wprm-recipe-times-container { margin: var(--space-16) 0 0; }  /* V2 meta margin-top 16 */
/* V2 mobile: a custom time (Resting/Proof) spans the full row so it does not leave a
   dangling empty slot — but ONLY when nothing follows it. `:last-child` is the whole
   fix: on a 4-time recipe (prep · cook · proof · total) the
   unconditional span pushed TOTAL onto a third row, which read as "hours is too long
   to fit". It never was — the container is already a 2-col grid and the cells are
   equal width; the span was the cause. 3 times => proof is last => spans, as designed.
   4 times => proof is followed by total => no span => a clean 2x2. */
.wprm-recipe-template-taf-2026 .wprm-recipe-custom-time-container:last-child { grid-column: 1 / -1; }
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* groups stack on phones */
  gap: var(--space-10);
  margin: var(--space-10) 0 0;
}
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced .wprm-recipe-details-container-table,
.wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced .wprm-recipe-meta-container { display: contents !important; }
/* Cells draw their own top/left hairlines a la the comp: -1px margins
   overdraw the group border, the group's overflow:hidden clips them. */
.wprm-recipe-template-taf-2026 .wprm-recipe-block-container-table {
  display: flex !important;
  flex-direction: column;           /* label above value (comp) */
  gap: var(--space-2);
  flex: none !important;
  text-align: left;
  padding: var(--space-8) var(--space-12) !important;  /* V2 compact cells */
  margin: -1px 0 0 -1px;  /* token-exempt: hairline overdraw — exactly one border-width, clipped by the group's overflow:hidden */
  border-top: var(--bw-1) solid var(--taf-line);
  border-left: var(--bw-1) solid var(--taf-line);
  background: var(--taf-paper);
}
.wprm-recipe-template-taf-2026 .wprm-recipe-details-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6, 6px);
  font-size: var(--fs-14);          /* V2 comp had 10px. review walked it 10 -> 12 -> 14
                                       -> 16 on 2026-08-04, then settled BACK on 14/16.
                                       The facts strip reads as metadata, deliberately a
                                       step below the 18px card prose. Do not "fix" the
                                       gap — it is the call, not an oversight. */
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-1px);
  text-transform: uppercase;        /* core's uppercase-faded agrees */
  color: var(--taf-cocoa);
  opacity: var(--o-1);
}
.wprm-recipe-template-taf-2026 .wprm-recipe-block-container-table > span:not(.wprm-recipe-details-label),
.wprm-recipe-template-taf-2026 .wprm-recipe-block-container-table > span:not(.wprm-recipe-details-label) span {
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);   /* comp UI face */
  font-size: var(--fs-16) !important;  /* V2 comp had 14/600; settled at 16 (the author
                                          2026-08-04). Uniform incl. unit spans. */
  font-weight: var(--w-semibold);
  color: var(--taf-chocolate);
}
/* comp facts show a plain value — the adjustable-servings dotted
   affordance stays clickable, just not underlined here */
.wprm-recipe-template-taf-2026 .wprm-recipe-block-container-table .wprm-recipe-servings-adjustable-tooltip {
  /* the facts cell is a passive label — the number
     still follows the 1x/2x/3x scaler, but no slider popup here */
  border-bottom: none !important;
  pointer-events: none;
  cursor: default;
}
/* Cell glyphs: 14px Phosphor-style strokes as masks, rose (comp). */
.wprm-recipe-template-taf-2026 .wprm-recipe-details-label::before {
  content: "";
  width: 12px;               /* V2 icons 12px */
  height: 12px;
  flex: none;
  background-color: var(--taf-rose);
  -webkit-mask: var(--taf-facts-icon) center / contain no-repeat;
  mask: var(--taf-facts-icon) center / contain no-repeat;
}
.wprm-recipe-template-taf-2026 .wprm-recipe-prep-time-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3Cpath d='M12 14v-4M9 2h6'/%3E%3C/svg%3E"); }
.wprm-recipe-template-taf-2026 .wprm-recipe-cook-time-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8.5 14h7'/%3E%3C/svg%3E"); }
.wprm-recipe-template-taf-2026 .wprm-recipe-custom-time-container .wprm-recipe-details-label,
.wprm-recipe-template-taf-2026 .wprm-recipe-total-time-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.wprm-recipe-template-taf-2026 .wprm-recipe-course-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v6.5M4.5 3v6.5a2.5 2.5 0 0 0 5 0V3M7 12v9M16.5 3c-1.6 0-3 2.2-3 5s1.4 5 3 5v8M16.5 3v18'/%3E%3C/svg%3E"); }
.wprm-recipe-template-taf-2026 .wprm-recipe-cuisine-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.3 2.4 2.3 14.6 0 17-2.3-2.4-2.3-14.6 0-17z'/%3E%3C/svg%3E"); }
.wprm-recipe-template-taf-2026 .wprm-recipe-servings-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.5'/%3E%3Cpath d='M3 20c.8-3.2 3.1-5 6-5s5.2 1.8 6 5M15.5 5.3a3.5 3.5 0 0 1 0 6.4M17.5 15.3c1.9.7 3.1 2.2 3.5 4.7'/%3E%3C/svg%3E"); }
.wprm-recipe-template-taf-2026 .wprm-recipe-calories-container .wprm-recipe-details-label { --taf-facts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c3.9 0 6.5-2.5 6.5-6.2 0-3.9-2.9-6.2-4.4-9.3-1 2-1.6 3-3.6 4.6C8.6 11.7 5.5 13.3 5.5 15.4 5.5 18.7 8.1 21 12 21z'/%3E%3C/svg%3E"); }
/* servings is a PLAIN label everywhere in the card —
   no slider, no underline; the value still re-renders with 1x/2x/3x.
   The interactive element is an <a.wprm-recipe-servings-link> WRAPPING
   the number (found via elementsFromPoint — the span itself was clean),
   so the link is neutralized too. */
.wprm-recipe-template-taf-2026 .wprm-recipe-servings-adjustable-tooltip,
.wprm-recipe-template-taf-2026 a.wprm-recipe-servings-link {
  cursor: default !important;
  border-bottom: none !important;
  text-decoration: none !important;
  pointer-events: none !important;
  color: inherit !important;
}
/* V2 casing: "10 servings" (the ".taf-ing-makes b" half of this rule went with the
   retired makes label, 2026-08-04) */
.wprm-recipe-template-taf-2026 .wprm-recipe-servings-unit { text-transform: lowercase; }
/* Round-2 defect: the adjustable-servings value renders as a rose
   interactive link (400/rose-link), breaking uniformity with its
   sibling prep/cook/total stat values (700/chocolate, rule above).
   Comp shows all four stat values identical. Re-assert the value
   token on the servings span (scoped rule out-specifies the WPRM
   tooltip link color; no !important needed). */
.wprm-recipe-template-taf-2026 .wprm-recipe-servings {
  color: var(--taf-chocolate);
  font-weight: var(--w-bold);
}

/* ---- 7. Action buttons (Print = primary rose, Pin/Save = outline)
   Colors arrive as inline styles from shortcode attrs, hence the
   !important overrides. Icon SVGs recolor via currentColor on any
   explicit fill/stroke attribute (never touching fill="none"). ---- */
.wprm-recipe-template-taf-2026 > .wprm-template-chic-buttons {
  display: flex;
  flex-direction: column;       /* V2 mobile: stacked full-width */
  /* stretch is load-bearing: WPRM core's .wprm-container-columns-spaced-middle
     doubles up to align-items:center, which shrank the stacked buttons to
     content width on phones (spec says full-width) */
  align-items: stretch;
  gap: var(--space-10, 10px);
  margin: var(--space-18) 0 0;
  clear: none;
}
/* core .wprm-container-columns-gutter puts 5px/8px margins on children */
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons > * { margin: 0 !important; }
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-link {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 46px;  /* token-exempt: V2 action height */
  padding: var(--space-12) var(--space-16) !important;
  border-radius: var(--taf-r-pill) !important;
  border-width: var(--bw-15) !important;
  border-style: solid !important;
  font-family: var(--taf-display);
  font-size: var(--fs-13);            /* V2: UPPERCASE 13/700 */
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-08em);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--taf-speed) var(--ease), color var(--taf-speed) var(--ease), border-color var(--taf-speed) var(--ease);
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-print {
  background-color: var(--taf-rose) !important;
  border-color: var(--taf-rose) !important;
  color: var(--color-on-accent) !important;
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-print:hover,
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-print:focus-visible {
  background-color: var(--taf-rose-deep) !important;
  border-color: var(--taf-rose-deep) !important;
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-pin,
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons a[class*="wprm-recipe-add-to-collection"] {
  background-color: var(--taf-paper) !important;   /* README: white fill, rose border, rose-deep text */
  border-color: var(--taf-rose) !important;
  color: var(--taf-rose-deep) !important;
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-pin:hover,
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-pin:focus-visible,
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons a[class*="wprm-recipe-add-to-collection"]:hover {
  background-color: var(--taf-rose-tint) !important;   /* README hover */
  border-color: var(--taf-rose) !important;
  color: var(--taf-rose-deep) !important;
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-icon {
  margin: 0;
  display: inline-flex;
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-icon svg {
  width: 17px;    /* V2 action icons 17px */
  height: 17px;
  display: block;
}
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* ---- 8. Section headers (+ unit/servings controls in the
   ingredients header). Serif, sentence case, controls right. ---- */
/* V2: every section heading carries a trailing rule filling the line */
.wprm-recipe-template-taf-2026 .wprm-recipe-header::after {
  content: "";
  flex: 1;
  align-self: center;
  border-top: var(--bw-1) solid #DFC3D2;  /* token-exempt: V2 section-rule constant */
  margin-left: var(--space-6, 6px);
}
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredients-header::after {
  grid-column: 2 / -1;
  grid-row: 1;
}
.wprm-recipe-template-taf-2026 .wprm-recipe-header {
  font-family: var(--taf-display) !important;
  font-weight: var(--w-semibold) !important;
  font-size: var(--fs-20);   /* V2: h3 20px */
  line-height: var(--lh-115);  /* comp heading leading */
  letter-spacing: var(--ls--001em);
  text-transform: none !important;  /* overrides .wprm-block-text-uppercase */
  color: var(--taf-chocolate);
  margin: 0 0 var(--space-8) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-8);
}
/* Both segmented controls sit on ONE row, 8px apart, as visual twins — so they
   must share a size. They did not: this rule set 12px, which
   the 1x/2x/3x scaler inherited, while `button.wprm-unit-conversion` below
   declares 13px. Measured containers 125.8x34.8 vs 149.1x36.2 — the pills sat
   on different boxes. 13px is the card's control-text size already (Print/Pin
   are 13/700 uppercase), so both land on it. Control chrome staying a step
   under the 18px list is deliberate; the mismatch was not. */
.wprm-recipe-template-taf-2026 .wprm-unit-conversion-container,
.wprm-recipe-template-taf-2026 .wprm-toggle-buttons-container {
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);   /* comp UI face */
  font-size: var(--fs-13);
  font-weight: var(--w-bold);
  letter-spacing: 0;
}
.wprm-recipe-template-taf-2026 .wprm-unit-conversion-container {
  display: inline-flex;
  margin-left: auto;  /* comp: toggles sit at the panel's right edge */
  overflow: hidden;
  background-color: var(--taf-paper) !important;
  border: var(--bw-15) solid var(--taf-rose) !important;   /* README: 1.5px rose segmented */
  color: var(--taf-rose-deep) !important;
  border-radius: var(--taf-r-pill) !important;
}
.wprm-recipe-template-taf-2026 button.wprm-unit-conversion {
  background-color: var(--taf-paper) !important;
  color: var(--taf-rose-deep) !important;    /* README idle: white fill, rose-deep text */
  border: none !important;
  padding: var(--space-8) var(--space-13, 13px);   /* README 8/13 */
  cursor: pointer;
  font: inherit;
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);   /* comp UI face */
  font-size: var(--fs-13);
  font-weight: var(--w-bold);
}
.wprm-recipe-template-taf-2026 button.wprm-unit-conversion.wprmpuc-active {
  background-color: var(--taf-rose) !important;   /* comp: active unit is rose; the 1x scaler stays chocolate */
  color: var(--color-on-accent, #FFFFFF) !important;
}
/* Core toggle group (1x/2x/3x + media toggle) is var-driven; the
   accent arrives as an inline custom property, hence !important. */
/* comp header layout: row 1 = heading + unit toggle (right); row 2 =
   scaler (left, content-width) + "Makes N" (right). Grid placement —
   a flex line-break would stretch the scaler pill to the full row. */
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredients-header {
  /* V2: row 1 = "Ingredients ———"; row 2 = scaler + "makes N" left,
     unit toggle right (≥700). Mobile-first base is TWO columns and the
     unit toggle wraps to its own row 3: at 390 the scaler (~128px) +
     toggle (~149px) auto tracks left the middle minmax(0,1fr) track
     11px and "makes 24 rolls" letter-stacked (the V2 dc.html wraps the toggle the same way via flex-wrap). */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12) var(--space-10, 10px);
}
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredients-header .wprm-recipe-adjustable-servings-container {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
/* the scaler and the unit toggle sit DIRECTLY next to each other
   at every width. Previously the "makes N servings" label took column 2 and pushed
   the toggle onto its own row 3 on mobile / to the far right on desktop. That label
   is gone (see taf-recipe.js) so the toggle simply takes column 2 beside the scaler.
   No breakpoint override any more — one behaviour at all widths. */
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredients-header .wprm-unit-conversion-container {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-left: 0;   /* kills the `margin-left:auto` that pinned it to the right edge */
}
.wprm-recipe-template-taf-2026 .wprm-toggle-buttons-container {
  --wprm-toggle-button-accent: var(--taf-chocolate) !important;
  --wprm-toggle-button-background: var(--taf-paper) !important;
  --wprm-toggle-button-radius: var(--taf-r-pill) !important;
  border-color: var(--taf-rose) !important;  /* brand pink control chrome */
}
.wprm-recipe-template-taf-2026 .wprm-toggle-buttons-container button.wprm-toggle:not(.wprm-toggle-active) {
  color: var(--taf-rose-deep) !important;  /* idle segments read pink, not cocoa */
}
/* No vertical separators between segments — WPRM core
   draws border-left on every non-first .wprm-toggle segment (+ border-right
   in RTL). This selects the 1x/2x/3x scaler only: the US cups/Metric
   control is DIFFERENT markup (button.wprm-unit-conversion, chrome on the
   container) and never had per-segment borders — verified rendered. */
.wprm-recipe-template-taf-2026 .wprm-toggle-buttons-container button.wprm-toggle {
  border-left: none !important;
  border-right: none !important;
}

/* V2: NO cream ingredients panel — the list sits on the card white
   (the V1 tinted panel is retired). */

/* ---- V2 ad rails: REMOVED 2026-08-06 (v0.88.0), at Raptive's request.
   What stood here: .taf-adrail chrome (pink placeholder stripes, dashed
   border, ADVERTISEMENT caption, :empty quieting), the three rail variants
   (--ingredients / --steps 300x250, --wide 120px), and a >=700px block that
   turned the ingredients container into a `minmax(0,1fr) 300px` GRID and the
   instructions container into a positioning context for an absolutely placed
   rail, with li.taf-beside-ad margining the steps the rail overlapped.

   All of it existed only to host the units taf-recipe.js re-homed into it.
   Raptive asked us to stop forcing their first three in-card units into our
   containers so their own spacing logic places them, so the adoption script
   went (taf-recipe.js section 1c) and the containers went with it.

   ⚠️ The ingredients container is back to its intrinsic single-column block
   flow at every width — the two-column grid was NOT a design choice, it was
   the rail's column. Re-adding either half without the other regresses one
   of them. The in-card placement contract is now entirely the adjacency-tie
   order ladder in section 2 above. ---- */

/* ---- 9. Checkable lists (ingredients + equipment) ----
   Checkbox geometry is WPRM core's (absolute at -32px, hidden input,
   label::before box, label::after check): restyled purely through
   the core custom properties set in section 1. Checked state =
   core line-through + our muted color — zero layout shift. ---- */
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredients-container,
.wprm-recipe-template-taf-2026 .wprm-recipe-equipment-container,
.wprm-recipe-template-taf-2026 .wprm-recipe-instructions-container,
.wprm-recipe-template-taf-2026 .wprm-recipe-video-container,
.wprm-recipe-template-taf-2026 .wprm-recipe-notes-container,
.wprm-recipe-template-taf-2026 .wprm-nutrition-label-shortcode-container {
  margin: var(--space-20) 0 0;  /* comp: section h3 gap 20px */
}
/* comp: the ingredients panel sits 24-26px under the actions row */
.wprm-recipe-template-taf-2026 > .wprm-recipe-ingredients-container { margin-top: var(--space-24); }
.wprm-recipe-template-taf-2026 ul.wprm-recipe-ingredients,
.wprm-recipe-template-taf-2026 ul.wprm-recipe-equipment {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.wprm-recipe-template-taf-2026 li.wprm-recipe-ingredient,
.wprm-recipe-template-taf-2026 li.wprm-recipe-equipment-item {
  position: relative;
  /* comp: li spans the full list width (padding-left 32, not margin),
     so the dashed border runs under the checkbox too */
  margin: 0 !important;
  padding: var(--space-6, 6px) 0 var(--space-6, 6px) var(--space-32) !important;  /* V2: pad 6, no separators */
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif) !important;   /* comp UI face (ingredient rows render Poppins in the comp) */
  font-size: var(--fs-18) !important;      /* was 15px — card prose is 18px now */
  line-height: var(--lh-15) !important;    /* README 1.5 */
}

/* Checkbox box target: the box is now 24px (WCAG 2.5.8 — was the comp's 18px;
   size set via --wprm-list-checkbox-size in section 1) at left 2px of the li
   (li carries padding-left 32, so the box ends at 26 with 6px to the text).
   Core offsets the container a further -16px internally (measured), so left:2px
   lands the visible box at +2px. top drops 16 -> 13 to keep the bigger box on
   the old optical center (16 + 18/2 = 13 + 24/2 = 25). */
.wprm-recipe-template-taf-2026 li .wprm-checkbox-container { top: 10px; left: 2px; }  /* re-centered for the 10px row pad (15px/1.65 line: center 22.4 → 24px box top 10) */
/* Padded label hit area: core's label is display:inline (padding paints/hit-tests
   without moving any line box), so the padding grows the tappable area around the
   24px box toward the 44px comfort zone without shifting layout. The box/check
   pseudo-elements are ABSOLUTELY positioned against the label's padding-box origin,
   which padding does not move — geometry verified against core public-modern.css. */
.wprm-recipe-template-taf-2026 .wprm-checkbox-container label.wprm-checkbox-label {
  padding: var(--space-10, 10px) var(--space-10, 10px) var(--space-10, 10px) var(--space-32, 32px);
}
/* Align the visible 20px box with the first text line's center: the box
   anchors at the label's padding-box TOP, which sits ~13px above the
   line center (measured; the label overflows its absolute container
   upward). 14px = (line-center 23.5) − (box 20 / 2). */
.wprm-recipe-template-taf-2026 .wprm-checkbox-container label.wprm-checkbox-label::before {
  top: 10px !important;  /* token-exempt: empirical optical alignment for the V2 6px row pad — visually re-verified */
}
.wprm-recipe-template-taf-2026 .wprm-checkbox-container label.wprm-checkbox-label::after {
  margin-top: 10px !important;  /* token-exempt: rides the box offset */
}
.wprm-recipe-template-taf-2026 li.wprm-checkbox-is-checked { color: var(--taf-cocoa); }
/* README checked state: box fills rose, white check */
.wprm-recipe-template-taf-2026 .wprm-checkbox-container input[type="checkbox"]:checked + label::before {
  background: var(--taf-rose) !important;
  border-color: var(--taf-rose) !important;
}
.wprm-recipe-template-taf-2026 .wprm-checkbox-container input[type="checkbox"]:focus + label::before {
  outline: var(--focus-ring) solid var(--taf-rose) !important;  /* */
  outline-offset: 1px;
}
/* Amounts are NOT bold (overriding the V2 comp's "bold amount,
   regular name"). The whole ingredient row reads at one weight now. */
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredient-amount,
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredient-unit {
  font-weight: var(--w-regular);
}
/* Inline ingredient notes ("I used olive oil…"). 15 -> 16:
   15px dated from when the row itself was 15px, where the note was the SAME
   size and separated by colour alone. Against an 18px row it read as a size
   cliff mid-line. 16 keeps the subordination without the drop. */
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredient-notes {
  color: var(--taf-cocoa);
  font-size: var(--fs-16);
}
/* Core fades "faded" ingredient/equipment notes with opacity:.7, which drags the
   cocoa ink below AA. Full opacity; the muted color alone carries the hierarchy
   (cocoa on paper = 6.4:1). Core's rule is `.wprm-recipe-ingredients-container
   .wprm-recipe-ingredient-notes-faded` (0,2,0) and loads after this sheet, so the
   container class rides along here for (0,3,0) — wins at any print order. */
.wprm-recipe-template-taf-2026 .wprm-recipe-ingredients-container .wprm-recipe-ingredient-notes-faded,
.wprm-recipe-template-taf-2026 .wprm-recipe-equipment-container .wprm-recipe-equipment-notes-faded {
  opacity: var(--o-1, 1);
  color: var(--taf-cocoa);
}
/* Core's .wprm-block-text-light asks for weight 300!important — a weight this
   theme does not ship (400 is the floor), so browsers synthesized a lighter face.
   Pin the real regular. (0,2,0) beats core's (0,1,0) at any print order. */
.wprm-recipe-template-taf-2026 .wprm-block-text-light {
  font-weight: var(--w-regular, 400) !important;
}
/* Group names (ingredient groups AND instruction-group subheads):
   comp eyebrow treatment — uppercase rose-link micro-label.

   SIZE: 12 -> 14. The 12px was set when ingredient rows were
   15px (0.80x — a defensible eyebrow). Rows are 18px since the card-prose move,
   which left this at 0.67x of the rows it labels: the smallest text in the
   section, heading the largest. 14px is ALSO the facts-strip label size, so the
   card now has one micro-label size instead of two.

   ⚠️ font-family and font-weight are deliberately NOT declared here. They were
   (--taf-sans / --w-bold) and BOTH were dead — measured Poppins 600 against a
   declared Mulish 700. Two rules outrank this one on an h4:
     • inc/enqueue.php's Feast counter, `h1..h6{font-family:var(--display)
       !important;line-height:var(--lh-display)!important}` — !important, and
       load-bearing (prime directive 4), so it must not be fought;
     • taf-postfooter.css `.single-post .taf-post-content :is(h1..h6)
       {font-weight:var(--w-semibold)}` — (0,2,1) beats this rule's (0,2,0).
   Poppins 600 is what this label has always PAINTED. Re-declaring the losing
   values only hides that. Do not "restore" them. */
.wprm-recipe-template-taf-2026 .wprm-recipe-group-name {
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--taf-link);
  margin: var(--space-16) 0 var(--space-2) !important;
  padding: 0 !important;
}

/* ---- 10. Instructions: numbered cream badges ----
   Inline list-style-type:decimal on each li is beaten with
   !important; numbering comes from a CSS counter per list (matches
   native per-group restart behavior). ---- */
.wprm-recipe-template-taf-2026 ul.wprm-recipe-instructions {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: taf-step;
}
.wprm-recipe-template-taf-2026 li.wprm-recipe-instruction {
  list-style: none !important;
  line-height: var(--lh-16) !important;  /* README step text 1.6 (generic li rule pins 1.65) */
  counter-increment: taf-step;
  position: relative;
  margin: 0 !important;
  padding: var(--space-8) 0 var(--space-8) var(--space-42, 42px) !important;  /* V2: no separators; 28px badge + 14 gap */
}
.wprm-recipe-template-taf-2026 li.wprm-recipe-instruction::before {
  content: counter(taf-step);
  position: absolute;
  left: 0;
  top: var(--space-8);
  width: 28px;                       /* V2: 28px cream CIRCLE */
  height: 28px;
  border-radius: var(--taf-r-round);
  background: var(--taf-cream);
  color: var(--taf-chocolate);
  font-family: var(--taf-sans);
  font-size: var(--fs-13);
  font-weight: var(--w-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* V2: the unnumbered glaze group's badge holds a rose drop icon. */
.wprm-recipe-template-taf-2026 .wprm-recipe-instruction-group:last-of-type ul.wprm-recipe-instructions li.wprm-recipe-instruction:only-child::before {
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7c3.4 4.1 6.5 7.6 6.5 11.5a6.5 6.5 0 1 1-13 0C5.5 10.3 8.6 6.8 12 2.7z'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7c3.4 4.1 6.5 7.6 6.5 11.5a6.5 6.5 0 1 1-13 0C5.5 10.3 8.6 6.8 12 2.7z'/%3E%3C/svg%3E") center / 14px no-repeat;
  background: var(--taf-rose) !important;
  color: transparent;
}

/* Per-step ingredient amounts get NO theme treatment: hand-typed <em> amounts
   lines render exactly as authored (italic), and WPRM's own
   .wprm-inline-ingredient associations keep WPRM's styling (bold via
   wprm-block-text-bold, native scaler/unit-toggle behavior). */
/* JS-injected panel helpers */
.taf-nut-per {
  margin-left: auto;
  font-size: var(--fs-13);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--taf-cocoa);   /* README: "Per slice, estimated" right of the Nutrition head */
}
.taf-ing-makes {
  width: 100%;
  text-align: right;
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);   /* comp UI face */
  font-size: var(--fs-14);   /* README */
  color: var(--taf-cocoa);
}
.taf-ing-makes b { color: var(--taf-chocolate); }
.taf-ing-note {
  display: block;
  font-size: var(--fs-13);
  color: var(--taf-cocoa);
  margin: var(--space-6, 6px) 0 var(--space-2);   /* README: plain 13px label, no rule */
}
/* follow-up paragraphs inside a step: same 16px chocolate as the main
   step text — only the block layout + spacing remain ours */
.wprm-recipe-template-taf-2026 .wprm-recipe-instruction-text > span ~ span,
.wprm-recipe-template-taf-2026 .wprm-recipe-instruction-text > p ~ p {
  /* general sibling: WPRM inserts a zero-height div between the blocks */
  display: block;
  margin-top: var(--space-6, 6px);
}
.wprm-recipe-template-taf-2026 .wprm-recipe-instruction-image { margin-top: var(--space-8); }
.wprm-recipe-template-taf-2026 .wprm-recipe-instruction-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--taf-r) !important;
}

/* V2: omit the whole video block for recipes without video — the template
   prints the heading regardless (seen on brazilian-cheese-bread). Same
   guard for an empty notes body.

   ⚠️ EXPECTED ENVIRONMENT DIVERGENCE — DO NOT "FIX" (investigated).
   Off production, this rule hides the card's video section on every post,
   so the "Video" header disappears and `#recipe-video` looks like it jumps
   to nothing. That is correct: Raptive's in-post player never mounts on a
   non-production hostname. Its loader ads.min.js DOES fetch (HTTP 200) and
   adthriveCLS.siteAds initialises, but the .adthrive-video-player div is
   left with only its schema <meta> children at 0 height — the same
   domain-gating that 403s Slickstream there. With no iframe/video inside,
   the :has() guard correctly reads the container as empty.

   On PRODUCTION Raptive fills it, the guard stops matching, and the header
   + player render — verified against production markup. */
.wprm-recipe-template-taf-2026 > .wprm-recipe-video-container:not(:has(iframe, video, .rll-youtube-player, img)) { display: none !important; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-notes-container:not(:has(.wprm-recipe-notes li, .wprm-recipe-notes p, .wprm-recipe-notes ul)) { display: none !important; }

/* ---- 11. Video: rounded media box (comp 16:9, radius 8) ---- */
.wprm-recipe-template-taf-2026 .wprm-recipe-video iframe,
.wprm-recipe-template-taf-2026 .wprm-recipe-video .rll-youtube-player { max-width: 100%; }
.wprm-recipe-template-taf-2026 .wprm-recipe-video {
  border-radius: var(--taf-r);
  overflow: hidden;
}
/* V2 §7: scrimmed poster + 64px rose
   play circle over Rocket's facade. The mobile double-tap is the
   facade's own autoplay limitation, accepted. */
.wprm-recipe-template-taf-2026 .rll-youtube-player {
  position: relative;
  overflow: hidden;
  border-radius: var(--taf-r);
}
.wprm-recipe-template-taf-2026 .rll-youtube-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wprm-recipe-template-taf-2026 .rll-youtube-player::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(51, 32, 43, .22);  /* token-exempt: V2 video scrim */
  pointer-events: none;
  z-index: 1;
}
.wprm-recipe-template-taf-2026 .rll-youtube-player button.play {
  background: none !important;
  position: absolute;
  inset: 0;
  z-index: 2;  /* token-exempt: above the scrim, local stack */
  cursor: pointer;
}
.wprm-recipe-template-taf-2026 .rll-youtube-player button.play::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;  /* token-exempt: V2 64px play circle */
  margin: -32px 0 0 -32px;    /* token-exempt: centering offset */
  border-radius: var(--taf-r-round);
  background: var(--taf-rose);
  box-shadow: 0 10px 30px -8px rgba(51, 32, 43, .5);  /* token-exempt: V2 play shadow */
  transition: background var(--taf-speed) var(--ease);
}
.wprm-recipe-template-taf-2026 .rll-youtube-player button.play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin: -13px 0 0 -8px;     /* token-exempt: optical centering */
  border-style: solid;
  border-width: 13px 0 13px 22px;  /* token-exempt: V2 26px play glyph */
  border-color: transparent transparent transparent var(--color-on-accent, #FFFFFF);
}
.wprm-recipe-template-taf-2026 .rll-youtube-player button.play:hover::before,
.wprm-recipe-template-taf-2026 .rll-youtube-player button.play:focus-visible::before {
  background: var(--taf-rose-deep);
}

/* ---- 12. Notes: quiet cream callout ---- */
.wprm-recipe-template-taf-2026 .wprm-recipe-notes {
  background: var(--taf-cream);
  border: none;                 /* V2: plain cream panel */
  border-radius: var(--taf-r);
  padding: var(--space-16) var(--space-18);
  font-size: var(--fs-18);      /* was 15px — card prose is 18px now */
  line-height: var(--lh-16);
}
/* Notes lead with PLAIN BULLETS. The V2 build put a 16px rose info glyph on every
   note row via li::before (plus a matching one on paragraph-notes); review
   retires it, matching the same decision made for the body-copy
   why-you'll-love list — no theme-invented markers.
   `disc !important` is deliberate: WPRM's own stylesheet sets list-style:none on
   notes lists, so plain `disc` loses. Paragraph-notes get no marker at all — they
   are paragraphs, and a bullet on a <p> would be inventing structure. */
.wprm-recipe-template-taf-2026 .wprm-recipe-notes ul { list-style: disc !important; }
/* WP content defaults drag 30px list padding + 32px margins into the
   callout (the cream box ran ~50px past the last bullet). */
.wprm-recipe-template-taf-2026 .wprm-recipe-notes ul {
  margin: 0 !important;
  padding: 0 0 0 var(--space-20) !important;
}
.wprm-recipe-template-taf-2026 .wprm-recipe-notes li {
  margin: 0 0 var(--space-8) !important;
  padding: 0 !important;   /* the 24px was room for the retired info glyph; the bullet
                              sits in the ul's own 20px padding like any list */
}
.wprm-recipe-template-taf-2026 .wprm-recipe-notes li:last-child { margin-bottom: 0 !important; }
.wprm-recipe-template-taf-2026 .wprm-recipe-notes p { margin: 0 0 var(--space-6, 6px); }
.wprm-recipe-template-taf-2026 .wprm-recipe-notes p:last-child { margin-bottom: 0; }

/* ---- 13. Nutrition (2026-07-31 handoff): hairline rows, label left /
   bold value right; 1 column on phones, 2 from the tablet tier. The
   plugin writes inline flex-basis per cell — the grid override
   ignores it, but width:auto neutralizes it for safety. ---- */
.wprm-recipe-template-taf-2026 .wprm-nutrition-label-container-grouped {
  display: flex;             /* V2: one wrapped inline line of pairs */
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-18);
  font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--fs-14);
}
.wprm-recipe-template-taf-2026 .wprm-nutrition-label-text-nutrition-container {
  display: inline-flex !important;   /* V2 pair: nowrap unit */
  align-items: baseline;
  gap: var(--space-4);
  width: auto !important;
  flex-basis: auto !important;
  padding: 0;
  border-bottom: none;
  white-space: nowrap;
}
.wprm-recipe-template-taf-2026 .wprm-nutrition-label-text-nutrition-label {
  color: var(--taf-chocolate) !important;   /* V2: bold labels */
  font-weight: var(--w-bold) !important;
}
.wprm-recipe-template-taf-2026 .wprm-nutrition-label-text-nutrition-value,
.wprm-recipe-template-taf-2026 .wprm-nutrition-label-text-nutrition-unit {
  color: var(--taf-cocoa) !important;   /* V2: regular values after bold labels */
  font-weight: var(--w-regular);
  white-space: nowrap;
}
/* JS-injected V2 disclaimer */
.taf-nut-note {
  display: block;
  width: 100%;
  text-align: center;
  font-style: italic;
  font-size: var(--fs-12);
  color: var(--taf-cocoa);
  margin-top: var(--space-8);
}

/* ---- 14. Rating CTA (the template's call-to-action block,
   re-ordered to the card foot, rose-tint per design). Colors are
   inline from shortcode attrs → !important. ---- */
.wprm-recipe-template-taf-2026 > .wprm-call-to-action {
  margin: var(--space-20) 0 0 !important;  /* comp rate-cta margin-top */
  padding: var(--space-24) var(--space-20) !important;  /* comp band pad 24/20/26 */
  background-color: var(--taf-rose-tint) !important;
  color: var(--taf-chocolate) !important;
  border-radius: var(--taf-r-sm) !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.wprm-recipe-template-taf-2026 .wprm-call-to-action-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.wprm-recipe-template-taf-2026 .wprm-call-to-action-icon svg [fill]:not([fill="none"]) { fill: var(--taf-rose); }
.wprm-recipe-template-taf-2026 .wprm-call-to-action-icon svg [stroke]:not([stroke="none"]) { stroke: var(--taf-rose); }
.wprm-recipe-template-taf-2026 .wprm-call-to-action-text-container { display: block; }
.wprm-recipe-template-taf-2026 .wprm-call-to-action-header {
  /* token-frozen: must out-order WP core
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: block;
  color: var(--taf-chocolate) !important;
  font-weight: var(--w-bold);
  font-size: var(--fs-16) !important;  /* core scales it to 1.3em otherwise */
}
.wprm-recipe-template-taf-2026 .wprm-call-to-action-text {
  font-size: var(--fs-15);
  color: var(--taf-chocolate);
}
.wprm-recipe-template-taf-2026 .wprm-call-to-action a {
  /* Slice 1 gate fix (axe cluster B): --taf-link #D01277 on the rose-tint
     panel #FCE7F3 = 4.43:1 (needs 4.5:1). Rose-deep #B80E67 = 5.42:1 on
     the panel (6.37:1 on white). !important still needed: WPRM prints an
     inline style="color: var(--color-on-accent)" from the shortcode attrs. */
  color: var(--taf-rose-deep) !important;
  font-weight: var(--w-bold);
}

/* ---- 15. Focus + motion + desktop (728px content column) ---- */
.wprm-recipe-template-taf-2026 a:focus-visible,
.wprm-recipe-template-taf-2026 button:focus-visible,
.wprm-recipe-template-taf-2026 [role="button"]:focus-visible {
  /* card focus rings are brand pink (rose = 4.5:1 on
     white, clears the 3:1 non-text floor; sitewide deep-saffron stands
     outside the card) */
  outline: var(--focus-ring) solid var(--taf-rose);
  outline-offset: 2px;
}
/* STAR elements are the exception (2026-08-01 star rework): their rings use
   the sitewide deep-saffron ring token, matching the saffron anatomy. Same
   specificity as the [role="button"] rule above — order carries the win. */
.wprm-recipe-template-taf-2026 .wprm-rating-star:focus-visible,
.wprm-recipe-template-taf-2026 .taf-band__star:focus-visible {
  outline: var(--focus-ring) solid var(--taf-focus-ring-color);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wprm-recipe-template-taf-2026 *,
  .wprm-recipe-template-taf-2026 *::before,
  .wprm-recipe-template-taf-2026 *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* Tablet tier (700-899, per the sitewide breakpoint convention) — the
   comp's mid tier, which is ALSO the desktop structure: our 728px
   content column caps the card below the comp's ≥900-container tier,
   so 300px photo / 36px-snapped title / 2-col groups carry through.
   - photo joins the header grid: column 2 at 300px (the 300×300 WPRM
     derivative renders it sharp), spanning name/author/rating/summary;
   - time group cells auto-fit across; category + yield share a row;
   - nutrition 2-up; actions capped at the comp's 440px. */
@media (min-width: 700px) {
  .wprm-recipe-template-taf-2026 {
    padding: var(--space-32) var(--space-32) var(--space-40);  /* comp 30/34/38 snapped */
    display: grid;
    /* token-exempt: V2 header photo column 200px square */
    grid-template-columns: minmax(0, 1fr) 200px;
    /* The photo spans rows 1-3; when it is taller than the three text
       rows' content, grid spreads the surplus across ALL THREE auto
       tracks and the title→byline→summary gaps inflate.
       A flexible row 3 takes the whole surplus instead: rows 1-2 stay
       content-tight, leftover whitespace lands below the summary. */
    grid-template-rows: auto auto 1fr;
    gap: 0 var(--space-24);   /* column gap only — an 18px row gap STACKED on the
                                 elements' own margins and double-spaced the header
                                 (measured vs the reference: 8/8/12/16 rhythm) */
  }
  .wprm-recipe-template-taf-2026 > * { grid-column: 1 / -1; }
  .wprm-recipe-template-taf-2026 > .wprm-recipe-name,
  .wprm-recipe-template-taf-2026 > .wprm-recipe-author,
  .wprm-recipe-template-taf-2026 > .wprm-recipe-rating,
  .wprm-recipe-template-taf-2026 > .wprm-recipe-summary { grid-column: 1; }
  .wprm-recipe-template-taf-2026 > .wprm-container-float-right {
    grid-column: 2;
    grid-row: 1 / 4;      /* three header rows: title / byline+stars / description */
    align-self: start;
    order: 6;
    width: auto;
    margin: 0;            /* top edge aligns with the title */
  }
  /* the photo's ad-adjacency pair follows it to 6 here (base rule says 1,
     matching the phone photo above; same-specificity, later block wins) */
  .wprm-recipe-template-taf-2026 > .wprm-container-float-right + :is([class*="adthrive"], [id*="AdThrive"]),
  .wprm-recipe-template-taf-2026 > .wprm-container-float-right + :is([class*="adthrive"], [id*="AdThrive"]) + :is([class*="adthrive"], [id*="AdThrive"]) { order: 6; }
  .wprm-recipe-template-taf-2026 > .wprm-recipe-name,
  .wprm-recipe-template-taf-2026 > .wprm-recipe-author { text-align: left; }
  .wprm-recipe-template-taf-2026 > .wprm-recipe-rating { justify-content: flex-start; }
  .wprm-recipe-template-taf-2026 > .wprm-recipe-name { margin-top: 0 !important; }
  .wprm-recipe-template-taf-2026 .wprm-recipe-name { font-size: var(--fs-30); }  /* V2 desktop title */
  /* Section headings (Ingredients / Instructions / Notes / Nutrition) step
     20 -> 22 here. They were 20px flat at EVERY width, which
     after the 18px prose move made the card the flattest hierarchy on the page
     (1.11x) and the only thing that did not step at desktop — the page's own h3
     goes 20 -> 22 and h2 24 -> 30 across this same breakpoint. 22 matches the
     page h3, so the card's sections read at the page's own section level.
     Mobile deliberately stays 20: the phone card is dense and 20/18 holds there.
     ✅ APPROVED in review after reviewing it on the rendered page. This is
     settled — it is the decision, not a provisional value awaiting a verdict.
     Do not "restore" the flat 20 reading the step as drift. */
  .wprm-recipe-template-taf-2026 .wprm-recipe-header { font-size: var(--fs-22); }
  .wprm-recipe-template-taf-2026 > .wprm-recipe-times-container {
    /* one row, N equal columns for any cell count (auto-fit can't:
       a 0-min minmax collapses it to a single track) */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .wprm-recipe-template-taf-2026 .wprm-recipe-custom-time-container { grid-column: auto; }
  .wprm-recipe-template-taf-2026 > .wprm-container-columns-spaced {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* category + yield share the row */
  }
  .wprm-recipe-template-taf-2026 .wprm-nutrition-label-container-grouped {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wprm-recipe-template-taf-2026 > .wprm-template-chic-buttons { flex-direction: row; max-width: none; }  /* V2 desktop: split row */
}

/* Desktop layer (≥900): the tablet structure holds; desktop-only touches. */
@media (min-width: 900px) {
  .wprm-recipe-template-taf-2026 { margin-top: var(--space-32); }
}

/* ---- Rating & review band (2026-07-31 handoff): the CTA block becomes
   a cream band; taf-recipe.js swaps its stock copy for the 3-state
   review capture (stars → inline form → thanks) that posts into the
   WPRM comment-rating flow. Without JS the band renders the template's
   own CTA copy on cream — graceful. (Supersedes the 2026-07-09
   chocolate treatment.) WPRM inlines grey #616161 → !important. ---- */
/* FULL-BLEED to the card's edges: "the tried this recipe
   component should span the width of the recipe card". It sat inset by the
   card's own horizontal padding — 21px in from each border on mobile, 33px on
   desktop — so a panel that is the card's one ASK read as narrower than the
   ingredient list above it. Cancel exactly that padding with negative inline
   margins; the values MUST track the card's own padding rule (base 20 /
   >=700 32, section "card shell"), so if that changes these change with it.
   Radius goes to 0: an 8px corner against the card's own 8px border leaves a
   sliver of white at each corner, which reads as a rendering bug. */
.wprm-recipe-template-taf-2026 .wprm-call-to-action,
.wprm-call-to-action.wprm-call-to-action-simple {
  /* Approved comp (the SECOND comp — it supersedes the transparent/hairline
     treatment shipped before it): a soft tinted panel with rounded
     corners, copy left, saffron outline stars right. --taf-cream is the
     theme's PANEL tint (#FAEDF2 — the same ground as the ingredients panel
     and the Pro Tips callouts), not --taf-rose-tint, which is the pinker
     sign-off ground.
     !important on all four: the base rule (§ "rate-cta") declares
     background/padding/border-radius !important, and this block only wins by
     coming later at equal specificity — dropping !important here silently
     hands the panel back to that rule. */
  background-color: var(--taf-cream) !important;
  color: var(--taf-chocolate) !important;
  border-radius: var(--taf-r) !important;
  border-top: 0 !important;
  padding: var(--space-24) !important;
}
/* FULL-BLEED to the card's edges: "the tried this recipe
   component should span the width of the recipe card". It sat inset by the
   card's own horizontal padding — measured 21px in from each border at 390,
   33px at 1280 — so the card's one ASK read as narrower than the ingredient
   list above it.
   MUST come after the panel block above and carry !important: that block
   declares `border-radius` !important, and WPRM core sets `margin` as a
   SHORTHAND later in the cascade, which silently zeroes a longhand
   margin-left/right declared earlier (first attempt did exactly that —
   computed 0px, rule present in the served file, no error anywhere).
   The negative values MUST track the card's own padding (base 20 / >=700 32,
   the `padding: var(--space-32) var(--space-32) var(--space-40)` rule); if
   that changes, change these with it.
   Radius 0: an 8px corner inside the card's own 8px border leaves a sliver of
   card background at each corner that reads as a rendering fault. */
.wprm-recipe-template-taf-2026 > .wprm-call-to-action {
  margin-left: calc(-1 * var(--space-20)) !important;
  margin-right: calc(-1 * var(--space-20)) !important;
  /* Also bleed to the card's FOOT ("remove the white space").
     The band is the card's last child, so the card's bottom padding was
     rendering as a bare white strip under a full-width tinted panel — it read
     as a gap, not as breathing room. Same coupling as the sides: these track
     the card's own bottom padding (base 32 / >=700 40). Bottom corners take the
     card's radius so the band ends ON the card's curve instead of squaring it
     off; the top two stay 0 because the band meets flat card above. */
  margin-bottom: calc(-1 * var(--space-32)) !important;
  border-radius: 0 0 var(--taf-r) var(--taf-r) !important;
}
@media (min-width: 700px) {
  .wprm-recipe-template-taf-2026 > .wprm-call-to-action {
    margin-left: calc(-1 * var(--space-32)) !important;
    margin-right: calc(-1 * var(--space-32)) !important;
    margin-bottom: calc(-1 * var(--space-40)) !important;
  }
}
.wprm-recipe-template-taf-2026 .wprm-call-to-action > :not(.taf-band):not(a) {
  color: var(--taf-chocolate) !important;  /* stock CTA copy on cream; band styles its own */
}
.wprm-recipe-template-taf-2026 .wprm-call-to-action a {
  color: var(--taf-rose-deep) !important; /* 5.42:1 on cream */
}
/* Band internals (JS-injected). Stars: 26px glyphs (band tier) on 44px targets. */
/* Comp layout: copy left, stars right, on one row.
   Flex + an explicit .taf-band__text wrapper — the earlier CSS-grid version
   let the star cell inflate the text rows (measured 46/73px against 27/48px
   of content), which is what read as "spacing is off". ---- */
.taf-band {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
  /* NO flex-wrap on purpose. With wrap, the row broke at whatever width the
     content happened to need (measured: still stacked at 580px, one row by
     590px) while the centring media query fired at 559 — so 560-585px
     rendered stacked BUT left-aligned, stars adrift under the copy. Making
     the stack an explicit flex-direction change at the same breakpoint means
     "stacked" and "centred" can no longer disagree. */
}
.taf-band__text { flex: 1 1 260px; min-width: 0; }
@media (max-width: 559px) {
  /* Phone centres the whole ask — same call as the
     sign-off band. Both children take a full row so the flex centring
     applies to each, not to a leftover gap between them. */
  .taf-band        { flex-direction: column; text-align: center; justify-content: center; }
  .taf-band__text  { flex: 0 0 auto; width: 100%; }
  .taf-band__stars { flex: 0 0 auto; justify-content: center; }
}
/* (V2's 22px rose heart before the heading REMOVED — the approved mock
   shows the plain heading only.) */
/* The !important here is NOT decoration. This card's own base rule
   `.wprm-recipe-template-taf-2026 p` (section 1) declares
   `font-size: var(--fs-16) !important; line-height: var(--lh-165) !important`,
   and !important beats specificity — a p-qualified selector alone still lost
   (measured 16px/26px against the 17px/1.15 declared). Margin is NOT
   !important because that base rule doesn't set one. */
.wprm-call-to-action p.taf-band__heading {
  font-family: var(--taf-display);
  /* 17 -> 18 -> 30. The 18 fixed an orphan
     value; the mock then made this a real heading. The band is the card's one
     ASK, and at 18 it matched the ingredient rows above it — it read as another
     line of card copy rather than the thing you are meant to act on. The mock
     sets it roughly twice its supporting line; --fs-30 is the scale step that
     lands there (the mock measures ~32, there is no --fs-32 and none is being
     added — the call was to build on the existing scale). */
  font-size: var(--fs-30) !important;
  font-weight: var(--w-bold);
  color: var(--taf-chocolate) !important;
  line-height: var(--lh-display) !important;
  margin: 0;
}
.taf-band__stars { display: flex; justify-content: flex-end; gap: var(--space-2); margin: 0; flex: none; }  /* comp 2026-08-03 */
.taf-band__star,
.taf-band__star:hover,
.taf-band__star:focus,
.taf-band__star:active {
  background: none !important;   /* same Kadence button:focus leak guard */
}
.taf-band__star {
  /* README: 30px glyphs, padding 2px 4px; ::after keeps touch ≥44 */
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.taf-band__star::after {
  content: "";
  position: absolute;
  /* token-exempt: invisible hit-area expansion to 44px. Box = 26px glyph +
     2px/4px padding = 34×30; -7/-5 tops it up to 44×44 (the old -5/-3 was
     tuned for 30px glyphs and left 40×40). */
  inset: -7px -5px;
}
.taf-band__star svg { width: var(--star-band, 26px); height: var(--star-band, 26px); display: block; }  /* D6-A band tier */
/* Band anatomy: SAFFRON OUTLINE empties (the mock is the spec),
   saffron fill + deep-saffron stroke when lit. */
/* EMPTIES ARE QUIET AGAIN. The 2026-08-01 mock made this
   surface deviate from the D1-C grey-empty rule with saffron outlines; the new
   mock puts it back on the house convention — an unrated star is --taf-line,
   the same quiet empty the card's own rating row uses (section 1, "D1-C quiet
   empty"). Saffron now means RATED and nothing else, so five gold stars no
   longer sit there implying a score nobody gave. .is-lit / .is-filled below are
   untouched: the moment you point at a star it fills saffron. */
/* FILLED SAFFRON at rest ("you were supposed to keep this
   filled"). The previous pass filled them with --taf-line, which is #F0DEE6 on
   a #FAEDF2 panel — a 2-point difference, so the "fill" was invisible and the
   stars still read as empty outlines. Filled now means FILLED: the card's own
   rated-star treatment, saffron body with a deep-saffron edge, identical to
   .is-lit / .is-filled below. Tapping any star still overrides it and sets
   that rating on WPRM's comment-rating field. */
.taf-band__star svg path { stroke: var(--taf-saffron-deep); fill: var(--taf-saffron); stroke-width: 2; stroke-linejoin: round; }
.taf-band__star.is-lit svg path { fill: var(--taf-saffron); stroke: var(--taf-saffron-deep); }
/* HOVER CHANGES THE FILL ("should behave like the stars in the
   post header — as someone hovers, they change the fill").
   Once the resting state became five SOLID saffron stars, the existing .is-lit
   preview stopped being visible at all: taf-recipe.js was correctly lighting
   stars 1..n saffron on top of stars that were already saffron, so pointing at
   star 2 looked identical to pointing at star 5. Nothing was broken in the JS —
   the resting colour had swallowed the feedback.
   So the row INVERTS while it is being pointed at: every star drops to the
   quiet empty, and only 1..n come back saffron. Let go and all five fill again.
   :focus-within carries the same thing for keyboards — the JS lights .is-lit on
   focus too, and without this the preview would be sighted-pointer-only. */
.taf-band__stars:hover .taf-band__star svg path,
.taf-band__stars:focus-within .taf-band__star svg path {
  fill: var(--taf-line); stroke: var(--taf-line);
}
.taf-band__stars:hover .taf-band__star.is-lit svg path,
.taf-band__stars:focus-within .taf-band__star.is-lit svg path {
  fill: var(--taf-saffron); stroke: var(--taf-saffron-deep);
}
.taf-band__star.is-filled svg path { fill: var(--taf-saffron); stroke: var(--taf-saffron-deep); }
/* D3-B pop, band tier: taf-recipe.js puts .is-hot on the pointer-hovered star
   (already pointer:fine-gated in JS); the media query here is belt+braces and
   mirrors the card rule in main.css ("Rating prompt"). Same 1.15 / --speed. */
@media (hover: hover) and (pointer: fine) {
  .taf-band__star svg { transition: transform var(--speed, .15s) var(--ease, ease); }
  .taf-band__star.is-hot svg { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .taf-band__star.is-hot svg { transform: none; }
}
/* text-wrap: balance kept as a guard, not a fix: the comp copy ("A rating
   helps others find it") fits one line at every width we ship, but balance
   costs nothing and keeps a one-word widow off the second line if the string
   is ever lengthened. (The 421px-vs-400px widow it was originally added for
   belonged to the longer pre-comp copy, now retired.) */
.wprm-call-to-action p.taf-band__copy { font-size: var(--fs-15) !important; line-height: var(--lh-14) !important; color: var(--taf-cocoa) !important; margin: var(--space-4) 0 0; text-wrap: balance; }
/* The inline review form's CSS (.taf-band__form/__row/__submit/__fine/
   __error) is deleted with the markup — stars now jump to the real comment
   form. */

/* ---- Cook mode row (JS-injected between ingredients and instructions):
   white box, hairline, switch right. ---- */
.taf-cookmode {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  background: var(--taf-cream);    /* V2: cream row, no border */
  border: none;
  border-radius: var(--taf-r);
  padding: var(--space-14) var(--space-16);
  margin: var(--space-20) 0 0;
}
.taf-cookmode::before {
  content: "";
  flex: none;
  width: 20px;    /* README icon 20px */
  height: 20px;
  background-color: var(--taf-rose);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.taf-cookmode__text { flex: 1; }
.taf-cookmode__label { font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); font-weight: var(--w-bold); font-size: var(--fs-15); color: var(--taf-chocolate); }
.taf-cookmode__hint { font-family: var(--ui, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); font-size: var(--fs-13); color: var(--taf-cocoa); }
.taf-cookmode__switch {
  /* README geometry: 48×28 track, 22px knob, 3px inset, travel 3→23 */
  flex: none;
  width: 48px;   /* token-exempt: README switch geometry */
  height: 28px;  /* token-exempt: README switch geometry */
  /* PILL, not ellipse: --taf-r-round is 50%, which on a 48×28 rect
     renders an OVAL. The spec's 99px caps the short axis. */
  border-radius: 99px;  /* token-exempt: README switch radius — pill cap */
  /* off: light-rose track, no outer border; the knob carries the rose
     edge so both states read as the iOS switch */
  border: none;
  /* solid mid-pink OFF track (mixed from the brand rose — the tint was
     too close to white and the pill vanished): plain white knob pops,
     exactly the iOS read, in Tasha's pink */
  background: color-mix(in srgb, var(--taf-rose) 30%, var(--taf-paper)) !important;  /* token-exempt: derived from --rose, no new hex */
  position: relative;
  cursor: pointer;
  transition: background var(--taf-speed) var(--ease);
  padding: 0;
}
.taf-cookmode__switch::before {
  /* token-exempt: invisible hit-area expansion — the 48×28 spec track is
     under the 44px floor and (unlike the unit toggle) had no expander;
     -8px vertical tops it up to 48×44 (audit catch 2026-08-01) */
  content: "";
  position: absolute;
  inset: -8px 0;
}
.taf-cookmode__switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;  /* token-exempt: README switch geometry */
  border-radius: var(--taf-r-round);
  background: var(--taf-paper);   /* plain white knob, iOS-style */
  box-shadow: 0 1px 3px rgba(51, 32, 43, .3);  /* token-exempt: README knob shadow */
  transition: transform var(--taf-speed) var(--ease);
}
/* Kadence's global button:focus paints a brick-brown background that
   out-specified the base rule (the "weird chocolate state" reported in
   review — computed rgb(179,79,54) on the focused OFF switch). Pin every
   interaction state. */
.taf-cookmode__switch:hover,
.taf-cookmode__switch:focus,
.taf-cookmode__switch:active {
  background: color-mix(in srgb, var(--taf-rose) 30%, var(--taf-paper)) !important;  /* token-exempt: derived from --rose */
}
.taf-cookmode__switch[aria-checked="true"],
.taf-cookmode__switch[aria-checked="true"]:hover,
.taf-cookmode__switch[aria-checked="true"]:focus,
.taf-cookmode__switch[aria-checked="true"]:active { background: var(--taf-rose) !important; }
.taf-cookmode__switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---- iOS input-zoom floor (found by scripts/constraint-check.py, 2026-07-14) ----
   WPRM's own user-rating modal renders its comment/name/email fields at 14.4px
   (its 0.9em default). iOS Safari ZOOMS THE VIEWPORT when a focused text field is
   under 16px — so on iPhone, tapping the field to leave a rating jerks the page.
   That is on the recipe template: ~600 pages, 78% of traffic, and it sits on the
   exact interaction we most want a reader to finish.
   It is the plugin's markup, but ours to restyle. 16px is the documented floor
   everywhere else in this theme (see the token-frozen rules in main.css).
   NOTE this MOVES PIXELS — the modal's text gets slightly larger. That is the fix,
   not a side effect. */
.wprm-recipe-template-taf-2026 .wprm-user-rating-modal input[type="text"],
.wprm-recipe-template-taf-2026 .wprm-user-rating-modal input[type="email"],
.wprm-recipe-template-taf-2026 .wprm-user-rating-modal textarea,
.wprm-user-rating-modal-comment,
.wprm-user-rating-modal-field input,
.wprm-user-rating-modal-field textarea,
#wprm-user-rating-name,
#wprm-user-rating-email,
.wprm-user-rating-modal input[type="text"],
.wprm-user-rating-modal input[type="email"],
.wprm-user-rating-modal textarea {
  font-size: var(--fs-16) !important;
}

/* ---- 16. Tap targets — WCAG 2.5.8 (Task 1b, measured on the rendered page
   /kaju-katli/ at 390px, 2026-07). Hit areas ONLY: padding /
   min-height grow the touch box; glyph sizes, colors and type are
   untouched. Literal px fallbacks throughout because /wprm_print/
   renders this CSS without the theme's :root tokens (file header). ---- */

/* Rating stars (the rate-this-recipe CTA): span.wprm-rating-star
   measured 16×14px, adjacent with zero spacing — fails 2.5.8 (24px
   min) outright. 14px padding around the untouched 16px glyph
   (17px ≥900px) = 44×44 hit box per star (45×45 desktop). The
   padding opens ~28px between glyphs; hit boxes stay separated by
   the row's 2px flex gap, so a tap can never straddle two stars. */
.wprm-recipe-template-taf-2026 .wprm-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12, 12px) var(--space-6, 6px);
  min-width: 0;   /* V2: the caption sits INLINE after the stars — 44px-wide
                     boxes pushed it to wrap; height stays ≥44, width 31px
                     clears the 2.5.8 spacing exception (adjacent ≥24) */
  /* Padding math alone measured 41.6px tall in the render (the svg's
     line box comes in under its 16px attribute size), so pin the
     floor explicitly on both axes. Measured 2026-07-17. */
  min-height: var(--space-44, 44px);
  min-width: var(--space-44, 44px);
}
/* Keep the glyph column on the card's left text edge — the first
   star's left padding is hit area, not indent. (14px < the 20px
   card pad, so the hit box stays inside the card.) */
.wprm-recipe-template-taf-2026 .wprm-rating-star-1 {
  margin-left: calc(-1 * var(--space-14, 14px));
}
/* The stars' 14px top padding now supplies the breathing room the
   row's 8px margin used to; drop the margin to 0 (optical gap ≈14px)
   rather than go negative — a negative margin would slide the stars'
   hit boxes up over the author link's tappable line box. */
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating {
  margin-top: 0;
}

/* Post-meta rating stars (the [wprm-recipe-rating] row under the H1 — theme
   markup, .taf-post-meta__stars, OUTSIDE the card wrapper): the card's tight
   v0.34.5 geometry, extended here (2026-08-01 star rework — this row sat on
   the old wide 14px-padding spread). 20px interactive-tier glyphs on ~24px
   boxes with ≥44px height (2.5.8's adjacent-target floor is 24; the card
   header row shipped this same tradeoff). First star keeps the column's
   left text edge. */
.taf-post-meta__stars .wprm-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12, 12px) var(--space-2, 2px);
  min-height: var(--space-44, 44px);
  min-width: 0;
}
.taf-post-meta__stars .wprm-rating-star svg {
  width: var(--star-interactive, 20px);   /* D6-A interactive tier (attrs say 16px) */
  height: var(--star-interactive, 20px);
  display: block;
}
.taf-post-meta__stars .wprm-rating-star-1 {
  margin-left: -2px;  /* token-exempt: glyph sits on the text edge (2px pad) */
}

/* Serving adjuster 1x/2x/3x (button.wprm-recipe-adjustable-servings
   .wprm-toggle): measured 33.8×23.8px (core pads 5px 10px). ≥44px on
   both axes; inline-flex re-centers the label in the taller box
   (core's display:inline-block would top-align it). */
.wprm-recipe-template-taf-2026 .wprm-toggle-buttons-container button.wprm-toggle {
  /* spec visuals (pad 8×14 → ~35px) supersede the
     sweep's 44px box; the ::after inset keeps the touch target honest. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: var(--space-8, 8px) var(--space-14, 14px);
  line-height: var(--lh-14);   /* 13px/1.4 + 2×8 ≈ the spec's ~35px */
  position: relative;
}
.wprm-recipe-template-taf-2026 .wprm-toggle-buttons-container button.wprm-toggle::after {
  content: "";
  position: absolute;
  inset: -5px 0;  /* token-exempt: invisible hit-area expansion to ~45px */
}

/* Print / Pin (a.wprm-recipe-link): measured 151×42.8px — 1.2px under
   the 44px floor. Supersedes section 7's 40px comp .btn-sm min-height
   for this control only (accessibility floor beats comp literal). */
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-link {
  min-height: var(--space-44, 44px);
}

/* Metric/US toggle (button.wprm-unit-conversion): measured 21.8px tall
   on /stollen-recipe/ 2026-07-17 — under even the 24px 2.5.8 hard
   floor. Same treatment as the serving toggles; width stays content-
   driven (adjacent labels differ too much for a min-width). */
.wprm-recipe-template-taf-2026 button.wprm-unit-conversion {
  /* spec visuals (§8 pad 8×13 → ~36px); hit
     expansion below keeps touch ≥44. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  line-height: var(--lh-14);
  position: relative;
}
.wprm-recipe-template-taf-2026 button.wprm-unit-conversion::after {
  content: "";
  position: absolute;
  inset: -4px 0;  /* token-exempt: invisible hit-area expansion */
}

/* ---- 17. Delight micro-interactions (2026-07-17). Transform/opacity/
   paint only — nothing here moves layout (CLS budget). Section 15's
   reduced-motion block already kills every animation and transition
   inside the card, these included. ---- */

/* 17a. Rating thank-you pulse. WPRM's rating JS flips the container class
   wprm-user-rating-not-voted → wprm-user-rating-has-voted the moment the
   user's vote lands (evidence: wp-recipe-maker-premium/dist/public-pro.js,
   `0<t.user ? classList.add("wprm-user-rating-has-voted") : ...` on the
   element carrying .wprm-user-rating — the rendered .wprm-recipe-rating
   div). One pulse per flip: the star GLYPH scales (the span's 44px hit box
   never moves) and a SAFFRON halo fades through (2026-08-01 star rework:
   the glow follows the saffron star fill; supersedes the 2026-07-17
   rose-glow call, which rode the short-lived rose-star era). Known +
   accepted: WPRM restores has-voted on load for a returning voter, so
   they get one quiet pulse. */
@keyframes taf-rating-thanks {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 var(--saffron-glow-0, rgba(226, 155, 50, 0)));
  }
  35% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 5px var(--saffron-glow, rgba(226, 155, 50, .5)));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 3px var(--saffron-glow-0, rgba(226, 155, 50, 0)));
  }
}
.wprm-recipe-template-taf-2026 .wprm-user-rating.wprm-user-rating-has-voted .wprm-rating-star svg {
  animation: taf-rating-thanks var(--dur-35, .35s) var(--ease, ease) 1;
}

/* 17b. Ingredient-check satisfaction. Evidence (public-pro.css, the rendered page):
   box = .wprm-checkbox-container label::before; the check mark ::after
   exists only while :checked (content none → ""), already carrying
   transform:rotate(-45deg); the strike is core's
   `li.wprm-checkbox-is-checked { text-decoration: line-through }`.
   The strike-line is PRE-DECLARED transparent on every checkable li, so
   checking only animates its COLOR (paint-only, zero layout shift). The
   higher-specificity checked rule re-takes the color longhand from core's
   shorthand (public-pro.css loads after this sheet, same 0,2,1 selector —
   the extra .wprm-recipe-ingredient class wins the tie-break). */
.wprm-recipe-template-taf-2026 li.wprm-recipe-ingredient,
.wprm-recipe-template-taf-2026 li.wprm-recipe-equipment-item {
  text-decoration-line: line-through;
  text-decoration-color: transparent;
  transition: color var(--dur-2, .2s) var(--ease, ease),
              text-decoration-color var(--dur-2, .2s) var(--ease, ease);
}
.wprm-recipe-template-taf-2026 li.wprm-recipe-ingredient.wprm-checkbox-is-checked,
.wprm-recipe-template-taf-2026 li.wprm-recipe-equipment-item.wprm-checkbox-is-checked {
  text-decoration-color: var(--taf-cocoa);
}
/* The box gives one quick press-pulse and the check mark eases in (the
   ::after is created at :checked, so its one-shot animation runs exactly
   then; unchecking animates nothing). Keyframes preserve the core
   rotate(-45deg) — a bare scale would flatten the check. */
@keyframes taf-check-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes taf-check-draw {
  from { opacity: 0; transform: rotate(-45deg) scale(.6); }
  to   { opacity: var(--o-1, 1); transform: rotate(-45deg) scale(1); }
}
.wprm-recipe-template-taf-2026 .wprm-checkbox-container input[type="checkbox"]:checked + label::before {
  animation: taf-check-pulse var(--dur-15, .15s) var(--ease, ease) 1;
}
.wprm-recipe-template-taf-2026 .wprm-checkbox-container input[type="checkbox"]:checked + label::after {
  animation: taf-check-draw var(--dur-2, .2s) var(--ease, ease) 1;
}

/* ---- 18. User-rating modal ("Rate This Recipe") — Warm Oven restyle
   (star rules updated 2026-08-01). The modal
   (#wprm-popup-modal-user-rating) is appended at BODY level, so the card
   wrapper's --taf-* bridge does NOT reach it: rules here resolve :root
   tokens directly, with literal fallbacks per the file-header convention.
   Measured pre-restyle: white 4px box, no shadow, black title, WPRM-default
   olive #5A822B buttons at 34px tall (under the 44px floor), grey #CECECE
   system-font inputs.
   STARS (2026-08-01 star rework): the modal's source color from
   wprm_settings is saffron #E29B32 — with stars saffron sitewide again,
   source = target, so the rose-era path/use overrides were DELETED, not
   re-tinted. The strip renders as <use> clones of per-row light-DOM defs
   (path.wprm-modal-star-empty / -full with inline-!important row sizing);
   the two class rules below restyle those defs toward the D1-C/filled
   anatomy — harmless if WPRM's clone plumbing keeps them from reaching
   (empties then stay the source saffron outline; documented deviation).
   The overlay scrim stays the plugin's neutral. The submit buttons keep
   their plugin-JS-managed inline `display`, so that property is
   deliberately not set here. ---- */
.wprm-popup-modal .wprm-popup-modal__container {
  background: var(--paper, #FFFFFF);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow, 0 1px 2px rgba(51, 32, 43, .06), 0 6px 24px -8px rgba(51, 32, 43, .12));
  font-family: var(--sans, 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  color: var(--chocolate, #33202B);
}
.wprm-popup-modal .wprm-popup-modal__title {
  font-family: var(--display, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--fs-20, 20px);
  font-weight: var(--w-semibold, 600);
  color: var(--chocolate, #33202B);
}
/* Close glyph: chocolate, on a 44px hit box (measured 36×43 stock). */
.wprm-popup-modal .wprm-popup-modal__close {
  color: var(--chocolate, #33202B);
  min-width: var(--space-44, 44px);
  min-height: var(--space-44, 44px);
}
.wprm-popup-modal .wprm-user-ratings-modal-recipe-name {
  font-weight: var(--w-bold, 700);
  color: var(--chocolate, #33202B);
}
/* Fields join the sitewide form convention (main.css "Form inputs → rose
   hairline + 6px radius"): --line hairline, 6px, Mulish. The 16px size
   floor is already pinned by the iOS block above. */
.wprm-popup-modal .wprm-user-rating-modal-comment,
.wprm-popup-modal .wprm-user-rating-modal-field input {
  border: var(--bw-15, 1.5px) solid var(--line, #F0DEE6) !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-family: var(--sans, 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  color: var(--chocolate, #33202B);
  background: var(--paper, #FFFFFF);
}
.wprm-popup-modal .wprm-user-rating-modal-field input {
  min-height: var(--space-44, 44px);  /* was 36px */
  padding: 0 var(--space-12, 12px);
}
/* Stock 75px clips the third line of WPRM's own placeholder copy. */
.wprm-popup-modal .wprm-user-rating-modal-comment {
  min-height: var(--space-90, 90px);
}
.wprm-popup-modal .wprm-user-rating-modal-field label {
  color: var(--chocolate, #33202B);
}
/* Submit buttons → the card's Print-button face: rose, 6px, bold 15,
   44px floor (was olive 34px). Hover/focus deepen like every other rose
   control. */
.wprm-popup-modal .wprm-popup-modal__btn {
  min-height: var(--space-44, 44px);
  padding: var(--space-8, 8px) var(--space-20, 20px) !important;
  background-color: var(--rose, #E11584) !important;
  border: none !important;
  border-radius: var(--radius-pill, 6px) !important;
  color: var(--color-on-accent, #FFFFFF) !important;
  font-family: var(--sans, 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-size: var(--fs-15, 15px);
  font-weight: var(--w-bold, 700);
  cursor: pointer;
  transition: background var(--speed, .15s) var(--ease, ease);
  display: block;              /* center the CTA */
  margin-inline: auto;
}
.wprm-popup-modal .wprm-popup-modal__btn:hover,
.wprm-popup-modal .wprm-popup-modal__btn:focus-visible {
  background-color: var(--rose-deep, #B80E67) !important;
}
/* Byline inside the rating row (JS moves it there ≥700) */
.wprm-recipe-rating .taf-byline-inline {
  margin: 0 var(--space-10, 10px) 0 0 !important;
  text-align: left !important;
}
/* separator between the name and the stars+status group */
.wprm-recipe-rating .taf-byline-inline::after {
  content: "·";
  display: inline-block;   /* escapes the link underline */
  margin-left: var(--space-10, 10px);
  color: var(--taf-cocoa);
  font-weight: var(--w-regular);
}
/* title→byline-row spacing: the row's optical -4px (star tap padding
   compensation) read as cramped once the byline joined the row — the
   author text has no padding of its own */
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating:has(.taf-byline-inline) {
  margin-top: var(--space-2) !important;
}
/* One-line guarantee (C1): the inline byline row never
   wraps — taf-recipe.js shortens the status to "5.0 · 3 ratings" (or
   "Thank you!" post-vote), and if any future copy/name still overruns,
   the status truncates with an ellipsis instead of spilling to line 2.
   Gated by :has(.taf-byline-inline) = the ≥700 inline layout only; the
   <700 stacked header keeps its own centered status line. */
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating:has(.taf-byline-inline) { flex-wrap: nowrap; }
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating:has(.taf-byline-inline) .wprm-recipe-rating-details {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

/* Header stars, final geometry: tight 20px glyphs
   (interactive tier; §5 sizes them) — an earlier tap-sweep min-width:44
   kept a 46px center spread and a -14px first-star margin tuned for the
   old padding. Height stays ≥44. */
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating .wprm-rating-star {
  min-width: 0 !important;
  padding: var(--space-12, 12px) var(--space-2) !important;
  margin: 0 !important;
}
.wprm-recipe-template-taf-2026 > .wprm-recipe-rating .wprm-rating-star:first-of-type {
  margin-left: -2px !important;  /* token-exempt: glyph sits on the text edge (2px pad) */
}

/* Focus visibility inside the modal — deep-saffron ring, the sitewide
   pattern (and, since the 2026-08-01 saffron star rework, the same family
   as the stars it sits beside). */
.wprm-popup-modal button:focus-visible,
.wprm-popup-modal input:focus-visible,
.wprm-popup-modal textarea:focus-visible {
  outline: var(--focus-ring, 3px) solid var(--focus-ring-color, #B87716);
  outline-offset: 2px;
}
/* Modal star anatomy attempt (see the §18 header): style the light-DOM defs
   the <use> rows clone. If these don't reach, the stars stay the source
   saffron from wprm_settings — acceptable. */
.wprm-popup-modal .wprm-user-ratings-modal-stars path.wprm-modal-star-empty {
  fill: var(--line, #F0DEE6) !important;    /* D1-C quiet empty */
  stroke: var(--line, #F0DEE6) !important;
}
.wprm-popup-modal .wprm-user-ratings-modal-stars path.wprm-modal-star-full {
  fill: var(--saffron, #E29B32) !important;
  stroke: var(--saffron-deep, #B87716) !important;
}
/* Validation errors: the deep rose used for on-panel emphasis. */
.wprm-popup-modal #wprm-user-rating-modal-errors,
.wprm-popup-modal [id^="wprm-user-rating-modal-error-"] {
  color: var(--rose-deep, #B80E67);
}

/* ==== Delight pack (JS = taf-recipe.js D1-D3) ==== */

/* ---- Step check-off (D2): a transparent button laid exactly over the
   28px number badge; done = saffron badge with a check + calmed text. ---- */
.wprm-recipe-template-taf-2026 .taf-step-check {
  position: absolute; left: 0; top: var(--space-8);
  width: 28px; height: 28px;
  border-radius: var(--taf-r-round);
  background: transparent; border: none; padding: 0; cursor: pointer;
}
.wprm-recipe-template-taf-2026 .taf-step-check:focus-visible {
  outline: var(--focus-ring) solid var(--taf-focus-ring-color); outline-offset: 2px;
}
.wprm-recipe-template-taf-2026 li.wprm-recipe-instruction.taf-step-done::before {
  content: "\2713";
  background: var(--taf-saffron);
  color: var(--taf-chocolate);
}
.wprm-recipe-template-taf-2026 li.taf-step-done .wprm-recipe-instruction-text {
  opacity: .55;  /* token-exempt: done-step calm — legible but visibly retired */
}

/* ---- Rating sparkle (D4/#6): one-shot saffron shimmer on the header star
   strip when a vote or review lands. Class applied by JS, which skips
   reduced-motion users entirely; the media query is belt-and-braces. ---- */
@keyframes taf-sparkle {
  0%   { filter: none; }
  35%  { filter: drop-shadow(0 0 6px var(--taf-saffron)) brightness(1.3); }
  100% { filter: none; }
}
.wprm-recipe-template-taf-2026 .taf-sparkle {
  /* token-exempt: 0.9s one-shot celebration timing, not a UI transition */
  animation: taf-sparkle 0.9s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .wprm-recipe-template-taf-2026 .taf-sparkle { animation: none; }
}