/* ==========================================================================
   RecipeMemoir /site/ — bones stylesheet.
   STYLE-AGNOSTIC RULE: every color, font, space, radius, and shadow below the
   token block consumes ONLY --rm-* tokens. Zero hex codes outside :root.
   When Annette picks her look, restyle by swapping token values here.
   ========================================================================== */

:root {
  /* Surfaces and ink (neutral, bright default) */
  --rm-bg:            #ffffff;
  --rm-bg-soft:       #f7f6f3;
  --rm-bg-band:       #f2f0eb;
  --rm-line:          #e5e1da;
  --rm-ink:           #232220;
  --rm-ink-muted:     #5d5953;
  --rm-ink-soft:      #8b867e;

  /* Brand and accent — red-check gingham country Americana */
  --rm-accent:        #c1272d;   /* gingham barn red (primary) */
  --rm-accent-soft:   #fdeceb;   /* soft red tint */
  --rm-accent-ink:    #ffffff;
  --rm-accent-line:   #f1b7b4;   /* soft red hairline */
  --rm-accent-glow:   rgba(193, 39, 45, 0.35);
  --rm-accent-2:      #38567f;   /* denim blue (secondary touch) */
  --rm-accent-2-soft: #e8eef6;
  --rm-focus:         #38567f;   /* denim focus ring */
  --rm-accent-deep:   #8a1f24;   /* darker accent for hovers/deep fills */
  --rm-accent-rgb:    193, 39, 45; /* accent as r,g,b for rgba() bands */
  --rm-panel-soft:    #fff8f8;   /* soft accent-tinted panel/banner fill */
  --rm-panel-line:    #f0d9d4;   /* soft accent-tinted hairline/border */
  --rm-ink-warm:      #6e514c;   /* warm muted body text */
  --rm-gingham:
    repeating-linear-gradient(90deg, rgba(193, 39, 45, 0.40) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg,  rgba(193, 39, 45, 0.40) 0 14px, transparent 14px 28px);

  /* Placeholder photo tints (bright pastels) */
  --rm-ph-0:          #f4e3dc;
  --rm-ph-1:          #e7ecdd;
  --rm-ph-2:          #e3e9f0;
  --rm-ph-3:          #f4ecda;
  --rm-ph-4:          #ece2ef;
  --rm-ph-5:          #ddeeea;

  /* Typography */
  --rm-font-display:  Georgia, "Times New Roman", serif;
  --rm-font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rm-fs-xs:         0.75rem;
  --rm-fs-sm:         0.875rem;
  --rm-fs-base:       1rem;
  --rm-fs-md:         1.125rem;
  --rm-fs-lg:         1.375rem;
  --rm-fs-xl:         1.75rem;
  --rm-fs-2xl:        2.375rem;
  --rm-fs-step:       2.125rem;    /* cook mode step type */
  --rm-lh-tight:      1.15;
  --rm-lh-snug:       1.35;
  --rm-lh-normal:     1.6;

  /* Space, radius, shadow, motion */
  --rm-sp-2xs:        0.25rem;
  --rm-sp-xs:         0.5rem;
  --rm-sp-sm:         0.75rem;
  --rm-sp-md:         1rem;
  --rm-sp-lg:         1.5rem;
  --rm-sp-xl:         2.5rem;
  --rm-sp-2xl:        4rem;
  --rm-radius-sm:     6px;
  --rm-radius-md:     12px;
  --rm-radius-lg:     18px;
  --rm-radius-pill:   999px;
  --rm-shadow-sm:     0 1px 3px rgba(35, 34, 32, 0.08);
  --rm-shadow-md:     0 6px 18px rgba(35, 34, 32, 0.10);
  --rm-ease:          180ms ease;

  /* Layout */
  --rm-container:     min(92%, 1680px);

  /* Reading measure and body size (Annette's standard, 2026-08-01):
     running prose renders 65 to 75 real characters a line, at 20px or more.

     ONE control point. Every prose column on every /site/ page points at
     --rm-measure. Do not reintroduce a per-page cap, and never express one in
     `ch`: one `ch` is the width of the digit zero at THAT element's font-size,
     so the same `ch` number produced five different columns across these pages
     (604px, 621px, 574px, 513px, 440px) and every one of them measured 84 to 90
     characters a line. 38rem was found by sweeping the real built pages at
     1440px, not calculated: it lands 67 to 73 across the whole set.
     rem, not px, so the column grows with a reader's own default font size. */
  --rm-fs-body:       1.25rem;             /* 20px */
  --rm-measure:       38rem;               /* 608px at a 16px root */
  --rm-measure-lede:  calc(var(--rm-measure) * 1.1);  /* type larger than body */
}

/* ----- Base ----- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--rm-bg);
  color: var(--rm-ink);
  font-family: var(--rm-font-body);
  /* Body size lives here, not on `html`. The rest of this sheet sizes chrome
     (nav, chips, table cells, buttons) in rem against the root, so moving the
     root would scale all of it too. */
  font-size: var(--rm-fs-body);
  line-height: var(--rm-lh-normal);
  overflow-wrap: anywhere;
}
img { max-width: 100%; display: block; }
a { color: var(--rm-accent); }
a:hover { color: var(--rm-ink); }
:focus-visible { outline: 2px solid var(--rm-focus); outline-offset: 2px; }

.container { width: var(--rm-container); margin-inline: auto; }

/* ----- Header band (full bleed, scrolls away — nothing sticky) ----- */
.site-header { background-color: var(--rm-bg); background-image: var(--rm-gingham); border-bottom: 3px solid var(--rm-accent); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rm-sp-md);
  padding: var(--rm-sp-md) 0;
}
.brand {
  font-family: var(--rm-font-display); font-size: var(--rm-fs-lg);
  color: var(--rm-ink); text-decoration: none; letter-spacing: 0.01em;
  background: var(--rm-bg-soft); padding: var(--rm-sp-2xs) var(--rm-sp-sm); border-radius: var(--rm-radius-sm);
}
.brand span { color: var(--rm-accent); }
/* flex-wrap is load-bearing: the nav grew to 7 links, and without wrapping it
   overflows horizontally on a phone. */
.site-nav { display: flex; flex-wrap: wrap; gap: var(--rm-sp-2xs) var(--rm-sp-md); margin-left: auto; align-items: center;
  background: var(--rm-bg-soft); padding: var(--rm-sp-2xs) var(--rm-sp-md); border-radius: var(--rm-radius-sm); }
.site-nav a { color: var(--rm-accent-2); text-decoration: none; font-size: var(--rm-fs-sm); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--rm-accent); }
.rm-auth-links { display: inline-flex; align-items: center; gap: var(--rm-sp-md); }
.rm-auth-links-header { border-left: 1px solid var(--rm-line); padding-left: var(--rm-sp-md); }
.rm-auth-signout {
  appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer;
  color: var(--rm-accent-2); font: inherit; font-size: var(--rm-fs-sm); text-decoration: none;
}
.rm-auth-signout:hover { color: var(--rm-accent); }
.rm-auth-signout[disabled] { cursor: wait; opacity: .6; }

.site-footer { background-color: var(--rm-bg); background-image: var(--rm-gingham); border-top: 3px solid var(--rm-accent); margin-top: var(--rm-sp-2xl); }
.site-footer .container { padding: var(--rm-sp-lg) 0; font-size: var(--rm-fs-sm); }
.footer-note { display: inline-block; background: var(--rm-bg-soft); color: var(--rm-ink-muted);
  padding: var(--rm-sp-xs) var(--rm-sp-md); border-radius: var(--rm-radius-sm); }
.rm-auth-links-footer::before { content: '\00b7'; color: var(--rm-ink-muted); }

/* ----- Gate ----- */
.gate { padding: var(--rm-sp-2xl) 0; text-align: center; }
.gate h1 { font-family: var(--rm-font-display); font-size: var(--rm-fs-xl); margin: 0 0 var(--rm-sp-sm); }
.gate p { color: var(--rm-ink-muted); margin: 0 0 var(--rm-sp-lg); }
.gate form { display: flex; gap: var(--rm-sp-xs); justify-content: center; flex-wrap: wrap; }
.gate input {
  font-size: var(--rm-fs-base); padding: var(--rm-sp-xs) var(--rm-sp-md);
  border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm);
  background: var(--rm-bg); color: var(--rm-ink); max-width: 100%;
}
.gate .gate-err { color: var(--rm-accent); font-size: var(--rm-fs-sm); min-height: 1.4em; margin-top: var(--rm-sp-xs); }
[hidden] { display: none !important; }

/* ----- Buttons, inputs, chips ----- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  font-size: var(--rm-fs-sm); font-family: var(--rm-font-body);
  padding: var(--rm-sp-xs) var(--rm-sp-md);
  border: 1px solid var(--rm-line); border-radius: var(--rm-radius-pill);
  background: var(--rm-bg); color: var(--rm-ink); transition: background var(--rm-ease);
}
.btn:hover { background: var(--rm-bg-soft); color: var(--rm-ink); }
.btn-primary { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-ink); }
.btn-primary:hover { background: var(--rm-ink); border-color: var(--rm-ink); color: var(--rm-accent-ink); }
.btn[aria-pressed="true"], .btn.is-active { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-ink); }

.chip {
  display: inline-block; font-size: var(--rm-fs-xs); color: var(--rm-ink-muted);
  background: var(--rm-bg-soft); border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-pill); padding: 2px var(--rm-sp-sm);
  text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--rm-accent-soft); color: var(--rm-ink); }
.chip.is-on { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-ink); }
.chip.has-dot::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rm-accent); margin-left: var(--rm-sp-2xs); vertical-align: middle; }
.chip.is-on.has-dot::after { background: var(--rm-accent-ink); }
.chip:disabled { opacity: 0.6; cursor: default; }

/* ----- Commentary panel ----- */
.commentary-panel { margin-top: var(--rm-sp-xl); grid-column: 1 / -1; }
.mode-chips { display: flex; flex-wrap: wrap; gap: var(--rm-sp-xs); margin-bottom: var(--rm-sp-md); }
/* Commentary modes read as clickable links (underlined, accent colour) so people
   notice they can tap them. The is-on rule below still paints the active pill. */
.mode-chips .chip { border: none; cursor: pointer; font-family: var(--rm-font-body);
  background: transparent; color: var(--rm-accent); text-decoration: underline; text-underline-offset: 3px; }
.mode-chips .chip:hover { color: var(--rm-ink); background: var(--rm-accent-soft); }
.mode-chips .chip.is-on { text-decoration: none; color: var(--rm-accent-ink); background: var(--rm-accent); }
.commentary-block { background: var(--rm-bg-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); padding: var(--rm-sp-lg); margin-bottom: var(--rm-sp-md); }
.commentary-block-title { font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: #38567f; margin: 0 0 var(--rm-sp-sm); }
.commentary-block p { margin: 0 0 var(--rm-sp-sm); }
.commentary-block p:last-child { margin-bottom: 0; }
.commentary-block ul { margin: 0 0 var(--rm-sp-sm); padding-left: 1.2em; }
.commentary-block .commentary-loading, .commentary-block .commentary-error { color: var(--rm-ink-soft); font-style: italic; }
.commentary-block .commentary-error { color: var(--rm-accent-2); font-style: normal; }

.search-row { display: flex; gap: var(--rm-sp-xs); flex-wrap: wrap; }
.search-row input[type="search"] {
  flex: 1 1 220px; min-width: 0; font-size: var(--rm-fs-base);
  padding: var(--rm-sp-xs) var(--rm-sp-md);
  border: 1px solid var(--rm-line); border-radius: var(--rm-radius-pill);
  background: var(--rm-bg); color: var(--rm-ink);
}
select {
  font-size: var(--rm-fs-sm); padding: var(--rm-sp-2xs) var(--rm-sp-sm);
  border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm);
  background: var(--rm-bg); color: var(--rm-ink);
}

/* ----- Hero / search band (home) ----- */
.hero { background: var(--rm-bg-soft); border-bottom: 1px solid var(--rm-line); }
.hero .container { padding: var(--rm-sp-xl) 0; }
.hero h1 { font-family: var(--rm-font-display); font-size: var(--rm-fs-2xl); line-height: var(--rm-lh-tight); margin: 0 0 var(--rm-sp-xs); }
.hero p { color: var(--rm-ink-muted); margin: 0 0 var(--rm-sp-lg); }
.hero .search-row { max-width: 640px; }

/* ----- Recipe cards ----- */
.card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--rm-ink);
  background: var(--rm-bg); border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md); overflow: hidden;
  transition: box-shadow var(--rm-ease);
}
.card:hover { box-shadow: var(--rm-shadow-md); color: var(--rm-ink); }
.card-photo {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-display); font-size: var(--rm-fs-2xl); color: var(--rm-ink-soft);
}
/* Real R2 photo fills the same box as the monogram, cropped to cover. */
img.card-photo { width: 100%; object-fit: cover; display: block; background: var(--rm-bg-soft); }
.ph-0 { background: var(--rm-ph-0); } .ph-1 { background: var(--rm-ph-1); }
.ph-2 { background: var(--rm-ph-2); } .ph-3 { background: var(--rm-ph-3); }
.ph-4 { background: var(--rm-ph-4); } .ph-5 { background: var(--rm-ph-5); }
.card-body { padding: var(--rm-sp-sm) var(--rm-sp-md) var(--rm-sp-md); display: flex; flex-direction: column; gap: var(--rm-sp-2xs); }
.card-title { font-family: var(--rm-font-display); font-size: var(--rm-fs-md); line-height: var(--rm-lh-snug); margin: 0; }
.card-meta { font-size: var(--rm-fs-xs); color: var(--rm-ink-soft); }
.card-stars { color: var(--rm-accent); font-size: var(--rm-fs-xs); letter-spacing: 0.12em; }

/* Card grid (browse) */
.card-grid {
  display: grid; gap: var(--rm-sp-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Shelf rails (home): rail scrolls inside itself; the page never scrolls sideways */
.shelf { margin: var(--rm-sp-xl) 0; }
.shelf-head { display: flex; align-items: baseline; gap: var(--rm-sp-md); flex-wrap: wrap; }
.shelf h2 { font-family: var(--rm-font-display); font-size: var(--rm-fs-lg); margin: 0; color: var(--rm-accent-2); }
.shelf .dek { color: var(--rm-ink-soft); font-size: var(--rm-fs-sm); }
.shelf .see-all { margin-left: auto; font-size: var(--rm-fs-sm); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 26vw, 300px);
  gap: var(--rm-sp-md); overflow-x: auto; padding: var(--rm-sp-sm) 2px var(--rm-sp-md);
  scroll-snap-type: x proximity;
}
.rail .card { scroll-snap-align: start; }

/* ----- Browse layout ----- */
.browse-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--rm-sp-xl); padding: var(--rm-sp-xl) 0; align-items: start; }
@media (max-width: 860px) { .browse-layout { grid-template-columns: 1fr; } }
.facets details { border-top: 1px solid var(--rm-line); padding: var(--rm-sp-xs) 0; }
.facets details:last-child { border-bottom: 1px solid var(--rm-line); }
.facets summary {
  cursor: pointer; font-size: var(--rm-fs-sm); font-weight: 600;
  text-transform: capitalize; color: var(--rm-ink); padding: var(--rm-sp-2xs) 0;
}
.facet-list { list-style: none; margin: var(--rm-sp-2xs) 0 var(--rm-sp-xs); padding: 0; }
.facet-list a {
  display: flex; justify-content: space-between; gap: var(--rm-sp-xs);
  text-decoration: none; color: var(--rm-ink-muted); font-size: var(--rm-fs-sm);
  padding: 2px var(--rm-sp-xs); border-radius: var(--rm-radius-sm);
}
.facet-list a:hover { background: var(--rm-bg-soft); color: var(--rm-ink); }
.facet-list a.is-active { background: var(--rm-accent-soft); color: var(--rm-ink); font-weight: 600; }
.facet-list .count { color: var(--rm-ink-soft); font-size: var(--rm-fs-xs); }
.browse-toolbar { display: flex; flex-wrap: wrap; gap: var(--rm-sp-sm); align-items: center; margin-bottom: var(--rm-sp-lg); }
.browse-toolbar .search-row { flex: 1 1 260px; }
.result-count { color: var(--rm-ink-soft); font-size: var(--rm-fs-sm); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--rm-sp-xs); margin-bottom: var(--rm-sp-md); }
.pager { display: flex; gap: var(--rm-sp-xs); justify-content: center; flex-wrap: wrap; margin: var(--rm-sp-xl) 0; }
.empty-note { color: var(--rm-ink-muted); padding: var(--rm-sp-xl) 0; }

/* ----- Recipe page ----- */
.recipe-head { background: var(--rm-bg-soft); border-bottom: 1px solid var(--rm-line); }
.recipe-head .container { padding: var(--rm-sp-xl) 0; }
.recipe-head h1 { font-family: var(--rm-font-display); font-size: var(--rm-fs-2xl); line-height: var(--rm-lh-tight); margin: 0 0 var(--rm-sp-xs); }
.recipe-head .dek { color: var(--rm-ink-muted); max-width: min(100%, var(--rm-measure-lede)); }
.recipe-meta { display: flex; flex-wrap: wrap; gap: var(--rm-sp-md); color: var(--rm-ink-muted); font-size: var(--rm-fs-sm); margin: var(--rm-sp-sm) 0; }
.recipe-meta b { color: var(--rm-ink); font-weight: 600; }
.recipe-tags { display: flex; flex-wrap: wrap; gap: var(--rm-sp-xs); margin-top: var(--rm-sp-sm); align-items: center; }
/* Owner-only category editing: a remove control on each chip, plus an add box. */
.tag-wrap { display: inline-flex; align-items: center; }
.tag-x { border: 1px solid var(--rm-line); border-left: 0; background: var(--rm-bg-soft);
  color: var(--rm-ink-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 3px 7px;
  border-radius: 0 var(--rm-radius-pill) var(--rm-radius-pill) 0; margin-left: -2px; }
.tag-x:hover { background: #fdeaea; color: #b3261e; border-color: #f0c9c9; }
.tag-add { cursor: pointer; border-style: dashed; background: transparent; color: var(--rm-accent); }
.tag-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-form input, .tag-form select { border: 1px solid var(--rm-line); border-radius: 9px;
  padding: 5px 8px; font: inherit; font-size: 0.88rem; background: #fff; color: var(--rm-ink); }
.tag-form input { min-width: 150px; }
.tag-save { border: 0; border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 0.88rem;
  font-weight: 600; cursor: pointer; background: var(--rm-accent); color: var(--rm-accent-ink, #fff); }
.tag-msg { font-size: 0.85rem; color: var(--rm-ink-warm); }
.recipe-actions { display: flex; flex-wrap: wrap; gap: var(--rm-sp-xs); margin-top: var(--rm-sp-md); }

.recipe-photo { border-radius: var(--rm-radius-lg); overflow: hidden; margin: var(--rm-sp-lg) 0 0; width: fit-content; max-width: 100%; }
/* Recipe hero: show the WHOLE photo, never cropped; cap the height so it stays
   above the fold on common monitors. Width follows the photo's real shape. */
.recipe-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 440px; object-fit: contain; aspect-ratio: auto; }
.recipe-photo div.card-photo { aspect-ratio: 16 / 7; }

/* Nutrition second opinion */
#soWrap { margin-top: var(--rm-sp-md); }
.so-panel { margin-top: var(--rm-sp-sm); }
.so-summary { font-size: var(--rm-fs-sm); color: var(--rm-ink-muted); background: #fffaf3; border: 1px solid #f0e2d0; border-radius: 10px; padding: .55rem .8rem; }
.so-table { width: 100%; border-collapse: collapse; font-size: var(--rm-fs-sm); margin: var(--rm-sp-xs) 0 var(--rm-sp-sm); }
.so-table th, .so-table td { text-align: left; padding: .3rem .45rem; border-bottom: 1px solid var(--rm-line); }
.so-table th small { font-weight: 400; color: var(--rm-ink-soft); }
.so-differs td { font-weight: 600; color: var(--rm-accent-2); }
.so-note { font-size: var(--rm-fs-xs); color: var(--rm-ink-soft); }
.so-breakdown { margin-top: var(--rm-sp-xs); }
.so-breakdown summary { cursor: pointer; font-size: var(--rm-fs-sm); color: var(--rm-ink-muted); }
.so-breakdown .so-table { font-size: var(--rm-fs-xs); }

.recipe-body { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: var(--rm-sp-xl); padding: var(--rm-sp-xl) 0; align-items: start; }
/* Right column: Directions, Notes, Commentary stacked in reading order. */
.recipe-main { display: flex; flex-direction: column; gap: var(--rm-sp-xl); min-width: 0; grid-column: 2; grid-row: 1 / span 2; }
/* Nutrition sits under Ingredients in the left column on desktop; when the grid
   collapses (phone), the explicit placements reset and DOM order rules, which
   puts it AFTER Directions (steps never sink below the nutrient tables). The
   panel chrome stays hidden until the nutrition JS actually renders content. */
.nutrition-panel { grid-column: 1; grid-row: 2; }
.nutrition-panel:not(:has(#nutRings > *, #microsTable > *, #soWrap:not([hidden]))) { display: none; }
@media (max-width: 860px) {
  .recipe-body { grid-template-columns: 1fr; }
  .recipe-main, .nutrition-panel { grid-column: auto; grid-row: auto; }
}
.panel { background: var(--rm-bg-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); padding: var(--rm-sp-lg); }
.panel h2 { font-family: var(--rm-font-display); font-size: var(--rm-fs-lg); margin: 0 0 var(--rm-sp-sm); }
.recipe-body h2 { color: var(--rm-accent-2); }
.panel h3 { font-size: var(--rm-fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--rm-ink-soft); margin: var(--rm-sp-md) 0 var(--rm-sp-2xs); }
.scaler { display: flex; gap: var(--rm-sp-2xs); flex-wrap: wrap; margin-bottom: var(--rm-sp-sm); }
.unit-toggle { display: flex; gap: var(--rm-sp-2xs); flex-wrap: wrap; margin-bottom: var(--rm-sp-sm); }
.ing-list { list-style: none; margin: 0; padding: 0; }
.ing-list li { padding: var(--rm-sp-2xs) 0; border-bottom: 1px dashed var(--rm-line); }
.ing-list li:last-child { border-bottom: 0; }
.ing-qty { font-weight: 600; color: var(--rm-accent); }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: step; display: flex; gap: var(--rm-sp-md); padding: var(--rm-sp-md) 0; border-bottom: 1px solid var(--rm-line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step);
  flex: 0 0 2em; height: 2em; display: flex; align-items: center; justify-content: center;
  background: var(--rm-accent-soft); color: var(--rm-ink); font-weight: 700;
  border-radius: var(--rm-radius-pill); font-size: var(--rm-fs-sm);
}
.nutrition-block table { border-collapse: collapse; width: 100%; font-size: var(--rm-fs-sm); }
.nutrition-block td { padding: var(--rm-sp-2xs) 0; border-bottom: 1px dashed var(--rm-line); }
.nutrition-block td:last-child { text-align: right; }
.source-line { color: var(--rm-ink-soft); font-size: var(--rm-fs-sm); margin-top: var(--rm-sp-lg); }

/* "Last made 12 July". The date was always in cook_log and the API always returned it;
   the page just never showed it, so the button gave you nothing back for pressing it. */
.last-cooked { color: var(--rm-ink-soft); font-size: var(--rm-fs-sm); margin: var(--rm-sp-sm) 0 0; }

/* Notes: the Paprika field restored by migration 022. pre-wrap because these are real
   paragraphs Annette typed years ago and the line breaks are hers; RM.rich handles the
   escaping and the links but deliberately leaves newlines alone. break-word because a
   pasted URL should not push the page sideways. */
/* Full width, like .commentary-panel. Left in the sidebar column a 1,900-character
   note renders as a tall thin ribbon about 180px wide. */
.notes-panel { margin-top: var(--rm-sp-xl); grid-column: 1 / -1; }
.notes-body { white-space: pre-wrap; overflow-wrap: break-word; color: var(--rm-ink);
              font-size: var(--rm-fs-body); line-height: 1.65; max-width: min(100%, var(--rm-measure)); }

/* ----- Cook Mode (distinct full-page view in normal flow — nothing fixed) ----- */
.cook-mode { background: var(--rm-bg); min-height: 100vh; }
.cook-mode .container { padding: var(--rm-sp-xl) 0; display: flex; flex-direction: column; gap: var(--rm-sp-lg); min-height: 90vh; }
.cook-top { display: flex; align-items: center; gap: var(--rm-sp-md); flex-wrap: wrap; }
.cook-top .cook-title { font-family: var(--rm-font-display); font-size: var(--rm-fs-lg); margin: 0; }
.cook-top .cook-count { color: var(--rm-ink-soft); font-size: var(--rm-fs-sm); margin-left: auto; }
.cook-step {
  flex: 1; font-size: var(--rm-fs-step); line-height: var(--rm-lh-snug);
  font-family: var(--rm-font-display); max-width: 28ch;
}
.cook-controls { display: flex; gap: var(--rm-sp-sm); flex-wrap: wrap; }
.cook-controls .btn { font-size: var(--rm-fs-md); padding: var(--rm-sp-sm) var(--rm-sp-xl); }
.cook-ings { background: var(--rm-bg-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); padding: var(--rm-sp-lg); }
.cook-hint { color: var(--rm-ink-soft); font-size: var(--rm-fs-sm); }

/* ----- Print: the recipe only, clean single column ----- */
@media print {
  .site-header, .site-footer, .recipe-actions, .scaler, .unit-toggle, .gate,
  .cook-mode, .site-nav, .no-print, .commentary-panel { display: none !important; }
  body { background: var(--rm-bg); }
  .recipe-head, .panel { background: var(--rm-bg); border: 0; padding: 0; }
  .recipe-body { display: block; }
  .panel { margin-bottom: 1.5rem; }
  .recipe-photo { max-width: 360px; }
  a { color: inherit; text-decoration: none; }
}

/* Timers */
.timer-chip { display: inline-flex; align-items: center; gap: var(--rm-sp-2xs); margin: var(--rm-sp-2xs) var(--rm-sp-2xs) 0 var(--rm-sp-xs);
  padding: 2px var(--rm-sp-xs); border: 1px solid var(--rm-accent); border-radius: var(--rm-radius-pill);
  background: var(--rm-bg); color: var(--rm-accent); font-size: var(--rm-fs-sm); cursor: pointer; }
.timer-chip:hover { background: var(--rm-accent); color: var(--rm-accent-ink); }
.timer-tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rm-sp-xs); margin-top: var(--rm-sp-sm); }
.timer-mute { border: none; background: transparent; font-size: var(--rm-fs-md); cursor: pointer; line-height: 1; }
.timer-row { display: inline-flex; align-items: center; gap: var(--rm-sp-xs); padding: var(--rm-sp-2xs) var(--rm-sp-sm);
  border: 1px solid var(--rm-accent-line); border-radius: var(--rm-radius-md); background: var(--rm-accent-soft); font-size: var(--rm-fs-sm); }
.timer-row .timer-when { color: var(--rm-ink-muted); }
.timer-row .timer-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rm-ink); }
.timer-row button { border: none; background: transparent; color: var(--rm-accent); cursor: pointer; padding: 2px var(--rm-sp-2xs); }
.timer-row.is-done { background: var(--rm-accent-soft); animation: timerPulse 1s ease-in-out 3; }
@keyframes timerPulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--rm-accent-glow); } }

/* Interactive star rating picker (recipe page meta row) */
.rating-pick { display: inline-flex; gap: .1rem; }
.rating-pick .star { border: none; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: var(--rm-line); padding: 0 .05rem; }
.rating-pick .star.on { color: var(--rm-accent); }
.rating-pick .star:hover, .rating-pick .star:focus-visible { transform: scale(1.15); }

/* ----- Favorites heart + add-to-list menu ----- */
/* Favorited state: readable red-on-cream, overriding the generic pressed-button fill. */
.heart-btn.on, .heart-btn.on[aria-pressed="true"] { background: var(--rm-bg); color: var(--rm-accent); border-color: var(--rm-accent); }
.list-menu { display: inline-block; min-width: 220px; padding: var(--rm-sp-xs) var(--rm-sp-sm); border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md); background: var(--rm-bg); box-shadow: var(--rm-shadow-md); }
.list-opt { display: block; padding: var(--rm-sp-2xs) 0; cursor: pointer; }
.list-new { display: flex; gap: var(--rm-sp-2xs); margin-top: var(--rm-sp-xs); }
.list-new input { flex: 1; }
.card-fav { color: var(--rm-accent); font-size: var(--rm-fs-base); }

/* Cooked-it + streak */
.streak-banner { display: flex; align-items: center; gap: var(--rm-sp-xs); margin: var(--rm-sp-md) 0;
  padding: var(--rm-sp-sm) var(--rm-sp-md); background: var(--rm-accent-soft); border: 1px solid var(--rm-accent-line);
  border-radius: var(--rm-radius-md); color: var(--rm-ink); font-family: var(--rm-font-display); font-size: var(--rm-fs-md); }
.streak-banner .streak-icon { font-size: var(--rm-fs-lg); }
.btn.just-cooked { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-ink); }

/* Copyright hold: an imported recipe is private until she publishes it as hers */
.pending-banner { margin: var(--rm-sp-sm) 0; padding: var(--rm-sp-sm) var(--rm-sp-md);
  background: var(--rm-accent-soft); border: 1px solid var(--rm-accent-line);
  border-radius: var(--rm-radius-md); color: var(--rm-ink); font-size: var(--rm-fs-base); }
.pending-banner .pb-row { display: flex; flex-wrap: wrap; gap: var(--rm-sp-xs); align-items: center; margin-top: var(--rm-sp-xs); }
.pending-banner .pb-row label { margin-right: var(--rm-sp-xs); }
.pending-banner .pb-msg { color: var(--rm-accent); }