/* ✅ 25Oct2026 🍞 [SJ-BAKE-01] sjBake.css — Your Bake (the Recipe Execution Engine) + the header band (01Nov2026: the IN PROGRESS pill and its drop-down).
   The card follows JoeB's deck (A–G) in the Recipe card's language: white card, blue chrome, the Timeline's
   green for the live things and its gold for Ready to Eat. 16 px controls on touch.
   ✅ 26Oct2026 [SJ-BAKE-02] the inert timer on a rest preview / review, the START BAKING pill under the Schedule
   answer card (and OPEN YOUR BAKE while live), the quiet-window pop-up. */
/* ✅ 01Nov2026(d) [SJ-BAKE-CARD-08] JoeB's QA panel: the black-bordered 640 px card "looked cheap" — the card is borderless now and fills
   the Your Bake section edge to edge inside its light-green frame (the section's own side padding is zeroed for this section only;
   the things that are not the card — the log fold, the home hint, the empty state — carry that padding themselves). */
.sjbk-root { max-width: none; margin: 0; }
#yourBake > .content-section-verbiage > #sjBakeRoot { margin: 0; padding-bottom: 0; border-bottom: 0; overflow: visible; }   /* (f) the Book's generic `.content-section-verbiage > div` gave the root 10 px of top margin — the white strip over the header */
#yourBake > .content-section-verbiage { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
.sjbk-root > .sjbk-home-hint, .sjbk-root > .sjbk-empty, .sjbk-root > .sjbk-hist-title, .sjbk-root > .sjbk-hist { margin-left: .9rem; margin-right: .9rem; }
.sjbk-empty { padding: .6rem .2rem; color: #374151; line-height: 1.5; }
.sjbk-hist-title { margin: .8rem 0 .2rem; font-weight: 700; color: #1f2937; }
.sjbk-hist { margin: 0; padding-left: 1.1rem; color: #4b5563; font-size: .92rem; }
.sjbk-link { background: none; border: 0; padding: 0; color: #2563eb; text-decoration: underline; cursor: pointer; font: inherit; }
.sjbk-link:disabled { color: #9ca3af; text-decoration: none; cursor: default; }
.sjbk-link--danger { color: #b91c1c; }

.sjbk-card { background: #fff; border: 0; border-radius: 0; padding: .8rem .9rem 1rem; box-shadow: none; }
.sjbk-card--preview { background: #fafafa; }
/* ✅ 29Oct2026 [SJ-BAKE-NOHEADER-01] JoeB: the section has no title bar; the card's first line wears the section-title green
   (.content-section-title's #e6f4ed + #75ba75 rule), spans the card edge to edge under its rounded top, same size as before:
   "MY FIRST BAKE recipe in progress" — the recipe name upper-case, the rest as written. */
.sjbk-recipe { font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: #343a40; background: #f1f3f5; border-bottom: 1px solid #dee2e6; margin: -.8rem -.9rem .35rem; padding: .35rem .9rem; border-radius: 0; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sjbk-recipe-name { text-transform: uppercase; letter-spacing: .05em; color: #3730a3; }
.sjbk-preview-tag { font-size: .72rem; font-weight: 700; color: #6b7280; background: #e5e7eb; padding: .1rem .5rem; border-radius: 999px; text-transform: none; letter-spacing: 0; }
/* ✅ 01Nov2026 [SJ-BAKE-HEAD-01] the step title fits ONE line where it can: sjBake.js fitTitle() measures it and steps the size
   down from 1.7rem to a 1.1rem floor (nowrap while it fits); below the floor it wraps at the floor — readable before narrow. */
/* (d) [SJ-BAKE-CARD-08] the step's name in the app's voice — sentence case, medium weight, no tracking */
.sjbk-title { margin: .45rem 0 .5rem; text-align: center; font-size: clamp(1.25rem, 5.2vw, 1.7rem); line-height: 1.2; letter-spacing: 0; text-transform: none; font-weight: 500; color: #212529; }   /* the CSS size is the fallback until fitTitle() has measured */
.sjbk-title[data-sjbk-fit="line"] { white-space: nowrap; overflow: hidden; }
.sjbk-title[data-sjbk-fit="wrap"] { white-space: normal; }
/* ✅ 01Nov2026(c) [SJ-BAKE-TAG-01] the step's name and (on a review / preview) its grey tag share a centred row; the <h3> is the only thing fitTitle() measures */
.sjbk-title-row { display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0; }
.sjbk-title-row > .sjbk-title { flex: 0 1 auto; min-width: 0; }
.sjbk-title-row > .sjbk-preview-tag { flex: 0 0 auto; }

/* ✅ 01Nov2026 [SJ-BAKE-HEAD-01] JoeB (31Oct a→b): the green header is two lines. Line 1 — the bake's name (larger) left,
   Done? right. Line 2 — ✎ + time left, TIMELINE centre, INGREDIENTS right; on a narrow card the two pills drop to a line of
   their own, centred ([SJ-BAKE-CARD-05]'s centring, kept). The header spans the card edge to edge under its rounded top. */
/* (d) [SJ-BAKE-CARD-08] the header is the app's light grey (its title / Imperial / Metric / Volume bar), full width of the green frame */
.sjbk-head { background: #f1f3f5; border-bottom: 2px solid #dee2e6; margin: -.8rem -.9rem .35rem; padding: .35rem .9rem .4rem; border-radius: 3.5px 3.5px 0 0; color: #343a40; }   /* (e) flush under the frame's 5 px corners; no rule between its two lines */
.sjbk-head-1 { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
/* ✅ 01Nov2026(c) [SJ-BAKE-HEAD-03] the bake's name in the app's title voice — large, light, dark, as the baker wrote it (no caps) */
.sjbk-head-name { min-width: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: #111827; }
.sjbk-head-name .sjbk-recipe-name { font-size: clamp(1.25rem, 5cqi, 1.6rem); text-transform: none; letter-spacing: 0; color: #111827; font-weight: 500; }
.sjbk-head { container-type: inline-size; }
.sjbk-head-1 > .sjbk-done { flex: 0 0 auto; }
.sjbk-head-2 { display: flex; align-items: center; justify-content: space-between; gap: .4rem .6rem; flex-wrap: wrap; margin-top: .15rem; container-type: inline-size; }
.sjbk-head-2 > .sjbk-when { flex: 1 1 auto; }
.sjbk-head-2 > .sjbk-btn { font-size: .9rem; padding: .3rem .75rem; }
.sjbk-head-2 > .sjbk-btn--timeline { margin-left: auto; margin-right: auto; }
.sjbk-head-2 > .sjbk-btn--ingredients { border-color: #3730a3; color: #3730a3; }
.sjbk-head-2 > .sjbk-btn--ingredients[hidden] { display: none; }   /* ✅ 01Nov2026(b) [SJ-BAKE-HEAD-02] hidden for now (JoeB); with one pill on line 2 the auto margins put TIMELINE at the right edge */
@container (max-width: 379px) { .sjbk-head-2 { gap: .35rem .4rem; } .sjbk-head-2 > .sjbk-when { font-size: 1.02rem; } .sjbk-head-2 > .sjbk-when .sjbk-pencil { width: 26px; height: 26px; font-size: .9rem; } .sjbk-head-2 > .sjbk-btn { font-size: .7rem; padding: .3rem .5rem; letter-spacing: .02em; } }   /* a phone-width card: everything a notch smaller so time · TIMELINE · INGREDIENTS still share the line */
/* when they cannot share it (the ✎ beside the time on a phone-width card, or a very narrow card): the time on a line of its
   own, centred, and the two pills share the next — never a pill orphaned on the left under a pill on the right */
@container (max-width: 379px) { .sjbk-head-2--pencil:has(> .sjbk-btn--ingredients:not([hidden])) > .sjbk-when { flex-basis: 100%; justify-content: center; } .sjbk-head-2--pencil:has(> .sjbk-btn--ingredients:not([hidden])) > .sjbk-btn { flex: 1 1 0; } }
@container (max-width: 300px) { .sjbk-head-2:has(> .sjbk-btn--ingredients:not([hidden])) > .sjbk-when { flex-basis: 100%; justify-content: center; } .sjbk-head-2:has(> .sjbk-btn--ingredients:not([hidden])) > .sjbk-btn { flex: 1 1 0; } }   /* (b): only while INGREDIENTS shows — one pill always fits beside the time */
.sjbk-when { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: 1.15rem; color: #064f8f; font-variant-numeric: tabular-nums; }
.sjbk-clock--est { color: #6b7280; font-weight: 600; }
.sjbk-pencil { width: 30px; height: 30px; border: 1px solid #c7d2fe; border-radius: 50%; background: #eef2ff; color: #3730a3; cursor: pointer; font-size: 1rem; }
.sjbk-done { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: #374151; }
.sjbk-done input { width: 26px; height: 26px; accent-color: #15803d; }
.sjbk-done--active { color: #15803d; }
.sjbk-done--later { color: #9ca3af; }
.sjbk-btn { font: inherit; font-weight: 800; font-size: .9rem; padding: .45rem .9rem; border: 2px solid #111827; border-radius: 999px; background: #fff; color: #111827; cursor: pointer; letter-spacing: .03em; }
.sjbk-btn:disabled { opacity: .45; cursor: default; }
.sjbk-btn--active { background: #111827; color: #fff; }
/* ✅ 01Nov2026(c) [SJ-BAKE-HEAD-03] the Timeline pill in the app's outline-button voice: 1px blue, soft corners, an icon (an original
   glyph — three stops on a line) and the word — at every width ((c) [SJ-BAKE-HEAD-04]: the narrow icon-only form is retired). */
.sjbk-btn--timeline { display: inline-flex; align-items: center; gap: .4em; border: 1px solid #0d6efd; color: #0d6efd; border-radius: .375rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sjbk-btn--timeline:hover { background: #0d6efd; color: #fff; }
.sjbk-btn--timeline svg { width: 1.7em; height: 1.35em; flex: 0 0 auto; }   /* (e) a wider box: the legs have room */
/* ✅ 01Nov2026(c) [SJ-BAKE-HEAD-04] JoeB: the icon-only Timeline pill under 380 px is retired — icon + word fit at every width from an SE to a PC (the ≤379 px word-hiding rule is gone). */
.sjbk-btn--ghost { border-color: #9ca3af; color: #6b7280; }
.sjbk-btn--end { border-color: #15803d; color: #15803d; }
.sjbk-btn--save { background: #064f8f; border-color: #064f8f; color: #fff; }
.sjbk-btn--finish { background: #15803d; border-color: #15803d; color: #fff; }
.sjbk-pencil-pop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; margin: .4rem 0; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; font-size: .92rem; }
.sjbk-pencil-pop input { font-size: 16px; padding: .25rem .4rem; }
.sjbk-msg { margin: .4rem 0; padding: .45rem .6rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; color: #78350f; font-size: .92rem; display: flex; justify-content: space-between; gap: .5rem; }
/* ✅ 02Nov2026 [SJ-CLOSE-ICON-02] the drawing is .sj-close (sjDesignTokens.css); only colour / placement stays here. */
.sjbk-msg-close { color: #78350f; }
.sjbk-cancel-x { color: #6b7280; vertical-align: middle; }   /* the pencil / custom pop-ups' cancel (was a ghost ✕ button) */

/* ✅ 01Nov2026(c) [SJ-BAKE-NAV-01] JoeB's QA panel: the trio was too big — now the size of the app's Details / Explore pair, solid,
   blue at either end and green in the middle, content-sized and centred (no stretching); a disabled one fades. */
.sjbk-nav { display: flex; justify-content: center; gap: 1rem; margin: .6rem 0; }
.sjbk-nav .sjbk-btn { flex: 0 0 auto; font-size: .9rem; font-weight: 600; letter-spacing: 0; padding: .4rem 1rem; border: 0; border-radius: 999px; background: #0d6efd; color: #fff; }
.sjbk-nav .sjbk-btn:hover:not(:disabled) { background: #0b5ed7; }
.sjbk-nav .sjbk-btn--active { background: #198754; }
.sjbk-nav .sjbk-btn--active:hover:not(:disabled) { background: #157347; }
.sjbk-nav .sjbk-btn:disabled { opacity: .5; }

.sjbk-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; margin: .5rem 0; }
.sjbk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ✅ 02Nov2026 [SJ-BAKE-VIDEO-01] JoeB (02Nov docx, Q12): on PC-sized screens and in tablet / phone LANDSCAPE the step video looked
   "cartoonishly large" — 20 % narrower there (80 % of the card body, centred; the 16:9 box keeps its ratio). Phone PORTRAIT is
   excluded on purpose (full width as before). The breakpoint is width ≥ 1024 OR a landscape viewport ≥ 560 wide. */
@media only screen and (min-width: 1024px), only screen and (orientation: landscape) and (min-width: 560px) {
  .sjbk-video:not(.sjbk-video--idle) { width: 80%; margin-left: auto; margin-right: auto; }
}
.sjbk-video--idle { aspect-ratio: auto; background: #f3f4f6; color: #6b7280; font-size: .85rem; text-align: center; padding: .6rem; }

/* ✅ 31Oct2026 [SJ-BAKE-TIMER-COLOUR-01] JoeB: the live timer was pale green on a pale-green body — it is pale BLUE now
   (his pick from the 31Oct swatches: blue / lavender / rose), so it stands out from the card; over = amber, inert = grey as before. */
.sjbk-timer { margin: .5rem 0; padding: .9rem .6rem; border-radius: 12px; background: #eff6ff; border: 2px solid #1d4ed8; text-align: center; }
.sjbk-timer--over { background: #fffbeb; border-color: #f59e0b; }
.sjbk-timer--inert { background: #f3f4f6; border-color: #9ca3af; }
.sjbk-timer--inert .sjbk-timer-clock { color: #4b5563; }
.sjbk-card--preview.sjbk-card--wait .sjbk-timer--inert .sjbk-timer-btns { opacity: .55; }
.sjbk-timer-clock { font-size: clamp(2.6rem, 14vw, 4rem); font-weight: 800; letter-spacing: .04em; color: #1e3a8a; font-variant-numeric: tabular-nums; line-height: 1.05; }
.sjbk-timer--over .sjbk-timer-clock { color: #b45309; }
.sjbk-timer-sub { font-size: .9rem; color: #374151; margin: .2rem 0 .6rem; }
/* ✅ 01Nov2026(b) [SJ-BAKE-TIMER-NUDGE-01] JoeB: the ± 1 min pills are a quiet stacked pair beside the clock — ▲ +1 over ▼ −1,
   small, bordered in the timer's own blue, 44 px tall together so a thumb finds them (.sjbk-tweak — .sjbk-nudge is the amber "did it really take" box). The face centres the clock with the pair
   hugging its right; under it the "ends at" line, then the one pill, End early — Done. [SJ-BAKE-CARD-04] (29Oct) — the one-line
   − 1 · End early · + 1 order and its container query — retired with the pills. */
.sjbk-timer-face { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.sjbk-timer-tweaks { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.sjbk-tweak { display: flex; align-items: center; gap: .2rem; font: inherit; font-size: .72rem; font-weight: 800; line-height: 1; padding: .18rem .4rem; min-width: 2.6rem; border: 1.5px solid #93c5fd; border-radius: 6px; background: #fff; color: #1e40af; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sjbk-tweak:hover { background: #dbeafe; }
.sjbk-tweak:active { background: #bfdbfe; }
.sjbk-tweak:disabled { opacity: .45; cursor: default; }
.sjbk-tweak-arrow { font-size: .6rem; }
.sjbk-timer--over .sjbk-tweak { border-color: #fcd34d; color: #92400e; }
.sjbk-timer--over .sjbk-tweak:hover { background: #fef3c7; }
.sjbk-timer--inert .sjbk-tweak { border-color: #d1d5db; color: #6b7280; }
.sjbk-timer-btns { display: flex; justify-content: center; }

/* (e) [SJ-BAKE-CARD-09] → (f) [SJ-BAKE-CARD-10] JoeB: ONLY the step's instructions sit on the header's grey; the stats and the
   notes under them are on the card's white. The body is just the container now (no fill, no border). */
.sjbk-body { background: transparent; border: 0; padding: 0; margin-top: .5rem; }
.sjbk-instr { font-size: 1rem; line-height: 1.5; color: #111827; padding: .6rem .75rem; background: #f1f3f5; border: 1px solid #dee2e6; border-radius: 8px; }
.sjbk-card--preview .sjbk-instr { background: #f3f4f6; border-color: #d1d5db; }
.sjbk-detail { padding: 0 .25rem; }
.sjbk-stepnote { margin-top: .3rem; font-size: .85rem; color: #4b5563; font-style: italic; }
.sjbk-stats { padding: .5rem 0; border-bottom: 1px solid #dee2e6; font-size: .92rem; color: #1f2937; line-height: 1.55; }
/* [SJ-BAKE-CARD-06] 29Oct(c), JoeB: the statistics use ~30% of the body; on wide bodies Baker's Notes sits to their right
   (most notes stay empty — the space is shared), stacking only when the body is narrow. The body is the container; the
   stats column is content-sized but capped at 42% so a long oven cue cannot squeeze the notes. */
.sjbk-body { container-type: inline-size; }
/* (f) [SJ-BAKE-NOTES-01] JoeB: side by side, the notes box is exactly as tall as the stats stack — it cannot grow past it (no
   resize handle there; a long note scrolls inside the box), so a wordy note can never break the layout. Stacked (narrow), the
   box keeps its own height and vertical resize. */
@container (min-width: 560px) {
  .sjbk-detail { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); column-gap: 1rem; align-items: stretch; }
  .sjbk-detail > .sjbk-stats { border-bottom: 0; border-right: 1px solid #dee2e6; padding-right: 1rem; }
  .sjbk-detail > .sjbk-notes { padding-top: .5rem; display: flex; flex-direction: column; min-height: 0; }
  .sjbk-detail > .sjbk-notes > .sjbk-note { flex: 1 1 0; min-height: 0; height: 0; resize: none; overflow: auto; }
  .sjbk-detail > .sjbk-notes > .sjbk-lasttime { flex: 0 0 auto; }
}
@supports not (container-type: inline-size) { @media (min-width: 700px) {
  .sjbk-detail { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); column-gap: 1rem; align-items: stretch; }
  .sjbk-detail > .sjbk-stats { border-bottom: 0; border-right: 1px solid #dee2e6; padding-right: 1rem; }
  .sjbk-detail > .sjbk-notes { padding-top: .5rem; display: flex; flex-direction: column; min-height: 0; }
  .sjbk-detail > .sjbk-notes > .sjbk-note { flex: 1 1 0; min-height: 0; height: 0; resize: none; overflow: auto; }
} }
.sjbk-stats strong { color: #111827; }
.sjbk-notes { padding-top: .5rem; }
.sjbk-notes label { display: block; font-size: .8rem; font-weight: 700; color: #3730a3; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.sjbk-note { width: 100%; min-height: 3.6rem; font: inherit; font-size: 16px; padding: .4rem .5rem; border: 1px solid #9ca3af; border-radius: 8px; resize: vertical; box-sizing: border-box; }
.sjbk-note--session { min-height: 5.5rem; }
.sjbk-lasttime { margin-top: .3rem; font-size: .85rem; color: #6b7280; font-style: italic; }
.sjbk-lasttime span { font-weight: 700; font-style: normal; }
.sjbk-foot { margin-top: .7rem; font-size: .85rem; color: #6b7280; text-align: center; }

.sjbk-card--synopsis { border-top: 3px solid #b45309; background: #fffbeb; }
.sjbk-card--synopsis .sjbk-title { color: #92400e; }
.sjbk-stats--syn { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; border: 0; justify-content: center; }
.sjbk-syn { width: 100%; border-collapse: collapse; font-size: .88rem; margin: .4rem 0 .6rem; background: #fff; }
.sjbk-syn th, .sjbk-syn td { padding: .3rem .4rem; border-bottom: 1px solid #e5e7eb; text-align: left; }
.sjbk-syn th:nth-child(n+2), .sjbk-syn td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sjbk-syn-wait td:first-child { color: #6b7280; padding-left: 1rem; }
.sjbk-over { color: #b45309; } .sjbk-under { color: #065f46; }
.sjbk-syn-actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; margin-top: .6rem; }
.sjbk-syn-hint { font-size: .8rem; color: #6b7280; }

/* =============================================================================================
   ✅ 01Nov2026 [SJ-BAKE-PILL-01] the IN PROGRESS pill in the black header + its drop-down (the band)
   JoeB (31Oct a→b): the app's "In Progress ▾" in the title slot, instead of a permanent row under the header. The pill
   sits INSIDE #mainTitle (the icon placement's landmark) and html.sj-bake-live hides the title's own spans. The menu
   is absolutely positioned under .header-container (position: sticky → its containing block), full width, above the
   content; it holds the 25Oct band unchanged in substance (step · clock · Done?), one banner per bake.
   The band's old permanent-row rules ([SJ-BAKE-BAND-02/03/04]: the compact-header grid, 134 / 69 px --sjHeaderH) are
   RETIRED with the row — nothing is added to the header's height any more.
   ============================================================================================= */
html.sj-bake-live #mainTitle#mainTitle .sj-book-title-full, html.sj-bake-live #mainTitle#mainTitle .sj-book-title-short, html.sj-bake-live #mainTitle#mainTitle > .sjb-helpDot { display: none !important; }   /* the doubled id out-ranks the compact header's `display: inline !important` on the short title */
/* ✅ 01Nov2026(c) [SJ-BAKE-PILL-02] JoeB's QA panel: the app's "In Progress ▾" won — a solid blue button, soft corners, title case,
   medium weight — so the pill wears exactly that (the app's primary #0d6efd); amber keeps the shape when the bake is done. */
.sj-bake-pill { display: inline-flex; align-items: center; gap: .35em; max-width: 100%; box-sizing: border-box; font: inherit; font-weight: 600; font-size: clamp(12px, 3vw, 15px); letter-spacing: 0; line-height: 1; padding: .5em .85em; border: 0; border-radius: .375em; background: #0d6efd; color: #fff; cursor: pointer; white-space: nowrap; vertical-align: middle; -webkit-tap-highlight-color: transparent; }
.sj-bake-pill[hidden] { display: none !important; }
.sj-bake-pill-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sj-bake-pill:hover, .sj-bake-pill--open { background: #0b5ed7; }
.sj-bake-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sj-bake-pill-caret { font-size: .9em; transition: transform .15s; }   /* only rendered while the drop-down is on ([SJ-BAKE-PILL-03]) */
.sj-bake-pill--open .sj-bake-pill-caret { transform: rotate(180deg); }
.sj-bake-pill--complete { background: #b45309; }
/* ✅ 02Nov2026 [SJ-BAKE-PILL-04] JoeB (02Nov docx, the compass drawer's pill duo): Back to Bake! (Book in front) is the More…/Less…
   duo's GOLD with black text; Back to Book (the layer in front) stays the blue; Bake Done keeps its amber. */
.sj-bake-pill[data-sjbk-pill-mode="book"]:not(.sj-bake-pill--complete) { background: rgb(253, 193, 17); color: #111; }
.sj-bake-pill[data-sjbk-pill-mode="book"]:not(.sj-bake-pill--complete):hover, .sj-bake-pill[data-sjbk-pill-mode="book"]:not(.sj-bake-pill--complete).sj-bake-pill--open { background: rgb(240, 180, 0); }
.sj-bake-pill--complete:hover, .sj-bake-pill--complete.sj-bake-pill--open { background: #92400e; }
html.sj-compact-header:not(.sj-compact-header-expanded):not(.sj-search-active) .sj-bake-pill { font-size: 11.5px; gap: .25em; padding: .45em .6em; }   /* the compact strip's title slot is ~110 px on an SE in landscape */
.sj-bake-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1001; background: #065f46; box-shadow: 0 8px 20px rgba(0,0,0,.28); border-bottom: 1px solid #10b981; }
.sj-bake-menu[hidden] { display: none; }
html.sj-search-active .sj-bake-menu { display: none !important; }
/* the band: one banner per bake in progress (a 34 px row — step · clock · Done?) */
.sj-bake-band { display: flex; align-items: center; gap: .5rem; height: 34px; padding: 0 .8rem; box-sizing: border-box; min-width: 0; max-width: 100%; overflow: hidden; background: #065f46; color: #ecfdf5; font-size: .9rem; line-height: 1.2; cursor: pointer; border-top: 1px solid #10b981; }
.sj-bake-band:hover { background: #047857; }
.sj-bake-band[hidden] { display: none; }
.sj-bake-band-txt { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sj-bake-band-clock { font-variant-numeric: tabular-nums; font-weight: 800; }
.sj-bake-band-clock--over { color: #fde68a; }
.sj-bake-band-done { font: inherit; font-weight: 800; font-size: .85rem; padding: .2rem .7rem; border-radius: 999px; border: 2px solid #ecfdf5; background: transparent; color: #ecfdf5; cursor: pointer; }
/* [SJ-BAKE-BAND-05] 29Oct(c): the trailing "open" label on the band is gone; the whole band opens Your Bake */
@media (max-width: 400px) { .sjbk-nav { gap: .9rem; } .sjbk-nav .sjbk-btn { font-size: .85rem; padding: .35rem .8rem; } }   /* (e) the trio keeps its air on a phone */
.sjbk-oven { color: #92400e; }

/* [SJ-BAKE-02] the pill under the Recipes section's Schedule answer card */
.sjbk-start-row { display: flex; justify-content: center; margin: .35rem 0 .6rem; }
.sjbk-start-pill { font: inherit; font-weight: 800; font-size: 1rem; letter-spacing: .06em; padding: .6rem 1.4rem; border: 2px solid #15803d; border-radius: 999px; background: #15803d; color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(21,128,61,.25); }
.sjbk-start-pill:hover { background: #166534; }
.sjbk-start-pill--live { background: #fff; color: #064f8f; border-color: #064f8f; box-shadow: none; }

/* [SJ-BAKE-02] the quiet-window pop-up: one card over a veil, answered before anything is written */
.sjbk-pop { position: fixed; inset: 0; z-index: 10050; background: rgba(17,24,39,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sjbk-pop[hidden] { display: none; }
.sjbk-pop-card { background: #fff; border: 2px solid #f59e0b; border-radius: 14px; padding: 1rem 1.1rem 1.1rem; max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.3); text-align: center; }
.sjbk-pop-icon { font-size: 2rem; line-height: 1; }
.sjbk-pop-title { margin: .3rem 0 .4rem; font-size: 1.2rem; color: #111827; }
.sjbk-pop-text { margin: 0 0 .4rem; color: #1f2937; line-height: 1.45; }
.sjbk-pop-sub { margin: 0 0 .8rem; color: #4b5563; font-size: .9rem; line-height: 1.4; }
.sjbk-pop-btns { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.sjbk-pop-btns .sjbk-btn { font-size: 1rem; }

/* [SJ-BAKE-BAND-02/03/04] (26Oct b, 29Oct a/c): the band's full-width row under the compact header, the grid that kept the two
   strips on screen beside it and the 134 / 69 px --sjHeaderH — all retired 01Nov2026 by [SJ-BAKE-PILL-01] above: the band is a
   drop-down now and adds nothing to the header. */

/* =============================================================================================
   ✅ 29Oct2026(d) [SJ-BAKE-LOG-01] the end of a bake + the Bake Log (E1–E12 in HANDOFF_29Oct2026d_addendum.md)
   ============================================================================================= */
/* E1 the band while complete-but-not-logged (the pill is amber too — [SJ-BAKE-PILL-01]) */
.sj-bake-band--complete { background: #92400e; }
.sj-bake-band--complete:hover { background: #b45309; }
.sj-bake-band--complete .sj-bake-band-txt { font-weight: 700; }
.sj-bake-menu:has(> .sj-bake-band--complete) { background: #92400e; border-bottom-color: #fbbf24; }
/* E4 the stars: white interior, black border; the clicked one and all before it black */
.sjbk-syn-block { padding: .45rem 0; border-bottom: 1px solid #fde68a; }
.sjbk-syn-label { display: block; font-size: .8rem; font-weight: 700; color: #3730a3; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.sjbk-rate { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.sjbk-star { background: transparent; border: 0; padding: .1rem; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; }
.sjbk-star svg { width: 34px; height: 34px; fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; }
.sjbk-star--on svg { fill: #111; }
.sjbk-star:focus-visible svg { outline: 2px solid #3730a3; outline-offset: 2px; border-radius: 4px; }
.sjbk-rate-word { font-size: .9rem; color: #1f2937; margin-left: .3rem; }
/* ✅ 29Oct2026(e) [SJ-BAKE-PHOTOS-01] E9 photos: a strip of square thumbnails, an Add button, a full-screen viewer */
.sjbk-photos-count { font-weight: 600; color: #6b7280; text-transform: none; letter-spacing: 0; margin-left: .3rem; }
.sjbk-photo-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .5rem; }
.sjbk-photo { position: relative; width: 88px; height: 88px; }
.sjbk-photo-btn { display: block; width: 88px; height: 88px; padding: 0; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #e5e7eb; cursor: pointer; }
.sjbk-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sjbk-photo-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff; background: #991b1b; color: #fff; font-size: .7rem; line-height: 20px; padding: 0; cursor: pointer; }
.sjbk-btn--photo { display: inline-block; background: #3730a3; color: #fff; cursor: pointer; }
.sjbk-photos-busy { font-size: .9rem; color: #3730a3; font-style: italic; padding: .2rem 0; }
.sjbk-log-thumbs { display: flex; gap: .3rem; align-items: center; margin-top: .3rem; }
.sjbk-log-thumbs img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid #d1d5db; background: #e5e7eb; }
.sjbk-log-more { font-size: .8rem; color: #6b7280; }
.sjbk-photo-view { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.92); color: #fff; display: flex; flex-direction: column; }
.sjbk-photo-view[hidden] { display: none; }
.sjbk-photo-view-bar { display: flex; justify-content: space-between; align-items: center; padding: calc(.5rem + var(--appTop, 0px)) .8rem .5rem; font-weight: 700; }
.sjbk-photo-view-x { color: #fff; }   /* [SJ-CLOSE-ICON-02] */
.sjbk-photo-view-img { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 .5rem; }
.sjbk-photo-view-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.sjbk-photo-view-nav { display: flex; justify-content: center; gap: .8rem; padding: .6rem .8rem calc(.8rem + env(safe-area-inset-bottom, 0px)); }
.sjbk-photo-view-nav .sjbk-btn { background: #1f2937; color: #fff; border: 1px solid #9ca3af; }
.sjbk-photo-view-nav .sjbk-btn[disabled] { opacity: .35; }
.sjbk-nudge, .sjbk-evict { background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px; padding: .55rem .7rem; margin: .4rem 0; font-size: .92rem; color: #7c2d12; }
.sjbk-nudge p, .sjbk-evict p { margin: 0 0 .45rem; }
.sjbk-nudge .sjbk-pop-btns, .sjbk-evict .sjbk-pop-btns { margin-top: 0; }
.sjbk-stats--syn .sjbk-pencil { margin-left: .2rem; }
/* E10 the Bake Timeline: a wide collapsed pill; chapter rows dark, step rows light, untick rows amber */
.sjbk-tl { margin: .5rem 0 .2rem; }
.sjbk-tl-pill { display: block; list-style: none; cursor: pointer; text-align: center; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; color: #fff; background: #3730a3; border-radius: 999px; padding: .45rem 1rem; user-select: none; }
.sjbk-tl-pill::-webkit-details-marker { display: none; }
.sjbk-tl-pill::before { content: '▸ '; } .sjbk-tl[open] .sjbk-tl-pill::before { content: '▾ '; }
.sjbk-tl-head { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; justify-content: center; font-size: .88rem; color: #1f2937; padding: .5rem 0 .2rem; }
.sjbk-tl-table { font-size: .82rem; table-layout: fixed; width: 100%; }
.sjbk-tl-table th:first-child { width: 43%; }
.sjbk-tl-table td, .sjbk-tl-table th { padding: .28rem .3rem; }
.sjbk-tl-table td:first-child, .sjbk-tl-table th:first-child { white-space: normal; overflow-wrap: normal; word-break: normal; }
.sjbk-tl-table td:nth-child(n+2), .sjbk-tl-table th:nth-child(n+2) { font-size: .78rem; }
.sjbk-tl-chapter th, .sjbk-tl-chapter td { background: #1f2937; color: #f9fafb; font-weight: 800; text-align: left; }
.sjbk-tl-chapter td:nth-child(n+2) { text-align: right; }
.sjbk-tl-task td { background: #fff; } .sjbk-tl-wait td { background: #f9fafb; color: #4b5563; }
.sjbk-tl-wait td:first-child { padding-left: 1rem; }
.sjbk-tl-untick td { background: #fffbeb; color: #92400e; font-style: italic; text-align: left !important; white-space: normal !important; }
/* viewing a logged bake */
.sjbk-card--viewing { border-top: 3px solid #3730a3; background: #f5f3ff; }
.sjbk-card--viewing .sjbk-title { color: #3730a3; }
.sjbk-back { margin-left: auto; font-weight: 700; white-space: nowrap; }   /* 01Nov(c): "‹ My Bake Log" on one line */
.sjbk-custom { background: #fff; border: 1px solid #c7d2fe; border-radius: 10px; padding: .55rem .7rem; font-size: .92rem; }
.sjbk-custom label { display: block; margin-bottom: .4rem; }
.sjbk-custom-name { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: .35rem .5rem; border: 1px solid #9ca3af; border-radius: 8px; margin-top: .2rem; }
.sjbk-custom-dur { font-size: .85rem; color: #374151; }
/* ✅ 01Nov2026(d) [SJL-HEADER-BAKE-LINK-02] JoeB: while the In Progress / Bake Done pill shows, the header's "Bake" word hides — the two did
   the same thing side by side. The logo stays (it is still the link, and the placement script's landmark). */
html.sj-bake-live .back-to-recipes-link .back-to-recipes-text { display: none !important; }
/* ✅ 01Nov2026(c) 📓 [SJ-BAKE-LOG-CHAPTER-01] the log is the MY BAKE LOG chapter: its card's "In this chapter" list holds the rows
   (left-aligned inside the centred chapter list; the open bake is tinted), the count sits beside the list title, and the opened
   bake renders in the chapter's section (#bakeLogView) edge to edge like Your Bake. The E5 fold / log card are retired. */
.sjbk-log-count { font-size: .78rem; font-weight: 600; color: #6b7280; text-transform: none; letter-spacing: 0; }
#bakeLogIntro .sjsc-chapter-card--flow { display: block; }   /* no image (JoeB): the standard card's image column would stand empty, so the card flows — copy, then the list */
#bakeLogIntro .sjsc-section-list.sjbk-log-list { text-align: left; max-width: 640px; margin: .2rem auto .4rem; border: 1px solid #c7d2fe; border-radius: 12px; background: #fff; padding: .2rem .6rem; }
#bakeLogIntro .sjsc-section-list.sjbk-log-list > .sjbk-log-empty { padding: .4rem .2rem; }
#bakeLogIntro .sjbk-log-item--open > .sjbk-log-btn { background: #ede9fe; }
#bakeLogView > .content-section-verbiage { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
#bakeLogView > .content-section-verbiage > #sjBakeLogRoot { margin: 0; padding-bottom: 0; border-bottom: 0; overflow: visible; }
.sjbk-root--log > .sjbk-log-empty { margin: .6rem .9rem; }
.sjbk-log-empty { color: #6b7280; font-style: italic; margin: .4rem 0; }
.sjbk-log-start { font-size: .92rem; color: #374151; margin: .4rem 0 .2rem; }
.sjbk-log-list { list-style: none; margin: .2rem 0 .4rem; padding: 0; }
.sjbk-log-item + .sjbk-log-item { border-top: 1px solid #e5e7eb; }
.sjbk-log-btn { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: .5rem .2rem; font: inherit; cursor: pointer; color: inherit; border-radius: 8px; }
.sjbk-log-btn:hover, .sjbk-log-btn:focus-visible { background: #f5f3ff; outline: none; }
.sjbk-log-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.sjbk-log-name { font-weight: 800; color: #3730a3; text-transform: uppercase; letter-spacing: .02em; }
.sjbk-log-stars { margin-left: auto; white-space: nowrap; font-size: .9rem; }
.sjbk-ministar { color: #d1d5db; } .sjbk-ministar--on { color: #111; }
.sjbk-log-unrated { font-size: .78rem; color: #9ca3af; font-style: italic; }
.sjbk-log-brick { font-size: .95rem; }
.sjbk-log-kept { font-size: .85rem; }
.sjbk-log-line2 { display: block; font-size: .85rem; color: #4b5563; }
.sjbk-log-note { display: block; font-size: .85rem; color: #6b7280; font-style: italic; margin-top: .15rem; }
.sjbk-log-item--kept .sjbk-log-btn { border-left: 3px solid #3730a3; }
/* ✅ 31Oct2026 [SJ-BAKE-COUNT-01] "3rd bake of 5" in the log rows and the card header; "Baked 3×" beside START BAKING */
.sjbk-log-ord { color: #3730a3; font-weight: 600; }
.sjbk-start-row { flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.sjbk-baked-badge { font-size: .85rem; color: #374151; white-space: nowrap; }
.sjbk-baked-badge[hidden] { display: none; }
/* ✅ 31Oct2026 [SJ-BAKE-PROMOTE-01] a bake that became a custom recipe says so, in the log and on its card */
.sjbk-log-promoted { display: block; font-size: .82rem; color: #15803d; margin-top: .1rem; }
.sjbk-promoted { font-size: .88rem; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: .35rem .6rem; margin: .3rem 0; }
/* ✅ 31Oct2026 [SJ-BAKE-LOAF-01] the cooled loaf: weight + dimensions, the derived line, the two links */
.sjbk-loaf-row { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; margin: .25rem 0; font-size: .92rem; }
.sjbk-loaf-field { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.sjbk-loaf-in { width: 5.2rem; font: inherit; font-size: 16px; padding: .25rem .4rem; border: 1px solid #9ca3af; border-radius: 8px; text-align: right; }
.sjbk-loaf-sel { font: inherit; font-size: 16px; padding: .25rem .3rem; border: 1px solid #9ca3af; border-radius: 8px; background: #fff; }
.sjbk-loaf-derived { font-size: .88rem; color: #374151; margin: .25rem 0 .15rem; }
.sjbk-loaf-derived > div + div { margin-top: .1rem; }
.sjbk-loaf-muted { color: #6b7280; font-style: italic; }
.sjbk-loaf-links { font-size: .85rem; }
/* ✅ 31Oct2026 📲 [SJ-HOME-SCREEN-01] the Add-to-Home-Screen hint at the top of Your Bake */
.sjbk-home-hint { display: flex; gap: .55rem; align-items: flex-start; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 12px; padding: .6rem .7rem; margin: 0 0 .7rem; font-size: .9rem; color: #1e3a8a; }
.sjbk-home-hint-icon { font-size: 1.3rem; line-height: 1; }
.sjbk-home-hint-body { flex: 1 1 auto; line-height: 1.4; }
.sjbk-home-hint-body .sjbk-btn { display: inline-block; margin-top: .4rem; }
.sjbk-home-hint .sjbk-msg-close { flex: 0 0 auto; }
.sjbk-share-glyph { display: inline-block; border: 1px solid currentColor; border-radius: 4px; padding: 0 .25em; font-size: .85em; line-height: 1.2; }

/* =============================================================================================
   ✅ 01Nov2026 🎯 [SJ-BAKE-FOCUS-01] BAKE FOCUS — the step card as a bounded, focused layer (BAKE-FOCUS-SPEC_01Nov2026.md)
   JoeB: while a bake is in progress and a step is on screen the Book must not scroll into view around it. One class on
   <html> — sj-bake-focus, set by sjBake.js focus(true) when Your Bake opens on a live bake — does all of it:
     • the page is FROZEN with `html { overflow: hidden }` (+ overscroll-behavior: none), never the drawers' body-pin:
       the header is position: sticky and a pinned body carries it off-screen. The page's scroll position is left where
       it was and the return spot is restored by JS on Back to Book.
     • #yourBake ITSELF is the layer: position: fixed from the header's bottom to the screen's bottom, full width, its own
       scroller (overscroll-behavior: contain, touch-action: pan-y) UNDER the header's z 1000 and under the Timeline drawer
       (2001), the start pop-up and the photo viewer (10050). No DOM move, no second root — the section controller still
       sees Your Bake as the active section, so the pill, the clocks, Done?, the drawer all work unchanged.
     • the BOUND comes free from a bounded scroller: scroll range = card height − layer height; pull-down stops at the
       header's bottom, push-up stops with the card's bottom edge at the screen's bottom; a short card does not scroll.
     • the LOWER header (search, scroll-to-top) hides as the keypad hides it, and --sjHeaderH is the top row alone (60 px),
       so the layer's `top` sits flush under the header. The compact landscape row ([SJ-HEADER-COMPACT-01]) keeps its 41 px
       (its rule out-ranks this one) and loses the search / Top icons, not the row (D4).
     • NOTHING of the Book shows (D2): the layer paints the Your Bake frame's light green edge to edge (the card keeps its
       clamp width inside it, framed, on a wide screen as on a phone), and the header-container's ::before paints the
       status-bar pad above the black header black (var(--appTop); 0 on a landscape SE / a PC).
     • the pill reads Back to Book while the layer is in front (data-sjbk-pill-mode="focus"; amber when complete-but-not-logged).
   Off (FOCUS = false in sjBake.js) → today's behaviour, byte for byte: none of these rules match.
   ============================================================================================= */
html.sj-bake-focus { overscroll-behavior: none; --sjHeaderH: 60px; }   /* 03Nov(d) [SJ-DRW-CHROME-BAND-03]: the html overflow:hidden is gone — it made the page "unscrollable" for iOS Chrome, which then shrinks the fixed viewport; the body's pin + overflow:hidden (below) is the lock */
/* ✅ 01Nov2026 [SJ-BAKE-FOCUS-02] JoeB's SE bless (Safari AND Chrome): a step page that had to scroll was herky-jerky. The 26Oct lesson
   exactly ([SJ-SCROLL-PINLOCK-01]): on WebKit an overflow-hidden document that still carries a scroll offset fights every nested
   scroller above it; a PINNED body does not. The spec's reason for not pinning — the sticky header rides off with a pinned body — is
   met by making the header position: fixed for as long as the layer is up (the body's pin creates no containing block for fixed
   descendants, so the header and the layer stay put). sjBake.js sets body.style.top = -y when the layer goes up and clears it when it
   comes down; the document's own scroll offset is 0 the whole time. Tablet / PC were solid before and are unchanged by this. */
html.sj-bake-focus body { position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; overflow: hidden !important; }
html.sj-bake-focus .header-container { position: fixed !important; top: var(--appTop, 0px) !important; left: 0; right: 0; }
html.sj-bake-focus .header-bottom-div { display: none !important; }
html.sj-bake-focus.sj-compact-header:not(.sj-compact-header-expanded):not(.sj-search-active) .header-top-div { padding-right: 44px; box-sizing: border-box; }   /* room for the chevron, as the keypad rule leaves it */
html.sj-bake-focus .header-container::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--appTop, 0px); background: #212429; pointer-events: none; }
/* ✅ 02Nov2026 [SJ-BAKE-FOCUS-03] JoeB (01Nov 17:57): Chrome on the SE showed a WHITE BAND under the layer (sometimes a thin one above) —
   the [SJ-DRW-LOCK-CHROMEHEADROOM-01] class: Chrome's toolbar collapses while the layer scrolls, the visual viewport grows, and a
   `bottom: 0` box inside a pinned body does not follow it on iOS Chrome. So the layer is sized by HEIGHT now, not by bottom: 0 —
   candidate (1) + (2) of the (f) addendum together: `100dvh` follows the toolbar on iOS 15.4+ (100vh is the fallback line), and
   sjBake.js writes the visualViewport's live height into --sjVVH on every vv resize / scroll while the layer is up (Chrome lags
   dvh; the px value does not), cleared when it comes down. Safari reads the same rule and is unchanged (dvh == its layout). */
html.sj-bake-focus #yourBake { position: fixed; top: calc(var(--appTop, 0px) + var(--sjHeaderH, 100px)); left: 0; right: 0; height: calc(100vh - var(--appTop, 0px) - var(--sjHeaderH, 100px)); height: calc(var(--sjVVH, 100dvh) - var(--appTop, 0px) - var(--sjHeaderH, 100px)); bottom: auto; z-index: 999; margin: 0; width: auto; max-width: none; border: 0; border-radius: 0; background: #e6f4ed; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
html.sj-bake-focus #yourBake[hidden] { display: none; }
html.sj-bake-focus #yourBake > .content-section-verbiage { width: clamp(68%, calc(-9vw + 693px), 90%) !important; max-width: none !important; margin: 0 auto !important; overflow: visible; background: #fff; border: 1px solid #75ba75; border-top: 0; border-radius: 0 0 5px 5px; box-sizing: border-box; }   /* the section's own clamp width ([SJL-PASS17H]'s 100% / 940 px rail out-ranked): the card is as wide as it was in the Book, framed, the light green at its sides */
html.sj-bake-focus .sjbk-card { border-radius: 0 0 4px 4px; }
/* ✅ 03Nov2026(b) [SJ-DRW-CHROME-BAND-01] (see sjDrawerStyles.css): on touch devices the focus layer overshoots the viewport's bottom by one
   chrome delta, with the same inner padding, so iOS Chrome's un-relaid viewport never shows bare canvas under it. */
@media (pointer: coarse) {
  html.sj-bake-focus #yourBake { height: calc(100vh - var(--appTop, 0px) - var(--sjHeaderH, 100px) + var(--sjChromeBand, 120px)); height: calc(var(--sjVVH, 100dvh) - var(--appTop, 0px) - var(--sjHeaderH, 100px) + var(--sjChromeBand, 120px)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sjChromeBand, 120px)); }
}

/* =============================================================================================
   ✅ 03Nov2026 [SJ-BAKE-LOG-FOLD-01] JoeB 03Nov item 2: a logged bake folds like a Book section. Everything down to the
   Baker's notes always shows, then ONE pill (Bake this Recipe again) and the Book's More… button; More… reveals the
   BAKE TIMELINE pill and Save as a My Custom Recipe. Pills: content-sized, all one width (.sjbk-pill-col), centred,
   a one-line helper under each; the foot's Keep / Remove carry helpers too. The More… button is the Book's own
   drawing (.left-box.moreButton from sjLearnStyles.css: green More… / the Book's orange Less…), drawn here as a real
   <button> so it needs the font + the orange state only. */
.sjbk-syn-actions--log { align-items: center; gap: .6rem; }
.sjbk-pill-col { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sjbk-pill-col > .sjbk-btn, .sjbk-pill-col > .sjbk-tl { width: min(100%, 20rem); box-sizing: border-box; }
.sjbk-pill-col > .sjbk-btn { white-space: normal; }
.sjbk-pill-col > .sjbk-tl { margin: 0; }
.sjbk-pill-col > .sjbk-tl[open] { width: 100%; }           /* the opened timeline table wants the whole card */
.sjbk-pill-col > .sjbk-tl[open] > .sjbk-tl-pill { width: min(100%, 20rem); margin: 0 auto; box-sizing: border-box; }
.sjbk-pill-col > .sjbk-syn-hint { text-align: center; margin-top: .25rem; max-width: 32rem; }
.sjbk-fold-row { display: flex; width: 100%; justify-content: flex-start; margin-top: .3rem; }
.sjbk-fold-btn { font-family: inherit; cursor: pointer; }
.sjbk-fold-btn[aria-expanded="true"] { background-color: rgb(253, 193, 17); color: #000; }   /* the Book's Less… orange */
.sjbk-fold { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.sjbk-fold[hidden] { display: none; }
.sjbk-fold > .sjbk-custom { width: min(100%, 32rem); box-sizing: border-box; align-self: center; }
.sjbk-foot--log { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: .3rem; }
.sjbk-foot--log > div { flex: 1 1 14rem; max-width: 20rem; }
.sjbk-foot--log .sjbk-link { font-size: .9rem; }
.sjbk-foot--log .sjbk-syn-hint { margin-top: .15rem; }

/* ✅ 03Nov2026 [SJ-BAKE-LOG-CARD-02] JoeB 03Nov item 4: the chapter card = a 25 % photo column (the first photo, "+n" badge)
   + the facts; no photo → the column stays and says so. The 44 px thumb strip (.sjbk-log-thumbs) is retired with it. */
.sjbk-log-btn { display: flex; align-items: center; gap: .7rem; }
.sjbk-log-photo { flex: 0 0 25%; align-self: flex-start; position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #e5e7eb; border: 1px solid #d1d5db; box-sizing: border-box; }
.sjbk-log-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .sjbk-log-photo { flex-basis: 34%; } }   /* a phone's card is narrow — a quarter of it is a sliver; a third still leaves the facts room */
.sjbk-log-photo .sjbk-log-more { position: absolute; right: 4px; bottom: 4px; font-size: .75rem; font-weight: 700; color: #fff; background: rgba(17, 24, 39, .72); border-radius: 999px; padding: .05rem .45rem; }
.sjbk-log-photo--none > span { font-size: .72rem; line-height: 1.2; color: #6b7280; text-align: center; padding: .3rem; }
.sjbk-log-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* ✅ 03Nov2026 [SJ-BAKE-BANNER-01] JoeB 03Nov item 5: the gold REVIEW / PREVIEW banner above the card's media (video or countdown). */
.sjbk-banner { margin: .5rem auto 0; width: 100%; box-sizing: border-box; background: #fdc111; color: #111827; font-weight: 900; font-size: 1.05rem; letter-spacing: .05em; text-align: center; padding: .5rem .6rem; border-radius: 10px 10px 0 0; border: 2px solid #b45309; border-bottom: 0; }
.sjbk-banner + .sjbk-video, .sjbk-banner + .sjbk-timer { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
@media only screen and (min-width: 1024px), only screen and (orientation: landscape) and (min-width: 560px) { .sjbk-banner:has(+ .sjbk-video:not(.sjbk-video--idle)) { width: 80%; } }   /* the video is 80 % wide there ([SJ-BAKE-VIDEO-01], same breakpoint) — the banner matches */
@media (max-width: 420px) { .sjbk-banner { font-size: .92rem; letter-spacing: .03em; } }

/* ✅ 03Nov2026(b) [SJ-BAKE-LOG-STATS-01] the logged bake's Statistics + Nutrition tables (behind More ▾), the Recipes panels' look in miniature */
.sjbk-logstats, .sjbk-lognutri { width: 100%; }
.sjbk-stat-table th, .sjbk-nutri-table th[scope="row"] { font-weight: 600; color: #1f2937; }
.sjbk-stat-table tr:nth-child(odd) td, .sjbk-stat-table tr:nth-child(odd) th { background: #eff6ff; }
.sjbk-nutri-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #3730a3; background: #fff; border-bottom: 2px solid #111827; }
.sjbk-nutri-table thead th:nth-child(n+2) { text-align: right; }
.sjbk-nutri-sub th { padding-left: 1.2rem !important; font-weight: 400 !important; color: #4b5563; }
.sjbk-nutri-foot { font-size: .8rem; color: #374151; border-top: 2px solid #111827; padding-top: .3rem; margin-top: -.4rem; }
.sjbk-fold > .sjbk-loaf { width: 100%; }

/* ✅ 03Nov2026(c) [SJ-DRW-CHROME-BAND-02] (see sjDrawerStyles.css): while the focus layer is up the canvas is the layer's green, so an
   un-relaid Chrome viewport can only ever show green under it, never white. */
html.sj-bake-focus { background-color: #e6f4ed; }

/* ✅ 03Nov2026(g) [SJ-BAKE-LOG-HELP-01] the logged bake's helper dots: each pill + its blue i dot on one row; the row carries the dot's
   width + gap as left padding too, so the pill itself stays centred and every pill keeps one common width (min(100% − 2 × 30px, 20rem)).
   The Bake Timeline's dot sits beside its summary pill (absolutely, so the opened table below can still take the whole card). */
.sjbk-pill-row { position: relative; display: block; width: 100%; }
.sjbk-pill-row > .sjbk-btn { display: block; width: min(100% - 64px, 20rem); margin: 0 auto; box-sizing: border-box; white-space: normal; }
.sjbk-pill-row > .sjbk-tl { width: 100%; margin: 0; }
.sjbk-pill-row > .sjbk-tl > .sjbk-tl-pill { width: min(100% - 64px, 20rem); margin: 0 auto; box-sizing: border-box; }
.sjbk-pill-row > .sjbk-help { position: absolute; left: calc(50% + min(50% - 32px, 10rem) + 8px); top: 50%; transform: translateY(-50%); }
.sjbk-pill-row--tl > .sjbk-help { top: 8px; transform: none; }   /* beside the summary pill, whether the table below is open or not */
.sjbk-foot--log .sjbk-help { margin-left: 6px; vertical-align: middle; }