/* =====================================================================
   Under the Tuscan Sun — guide design system (PROD module, kontent)
   The single source of visual truth for guide content blocks. Realizes the six
   locked decisions: 1 brand-led minimal palette · 2 two-tier type · 3 flat/airy
   (Matt) · 4 soft/subtle shape · 5 refined editorial · 6 light + brand band.
   Namespace: g-*  · tokens: --g-*  (keyed off --kon-brand-color).
   Loads ON TOP of the kontent base (app.css font, kon-utilities, kon_post_detail).
   THE SOLE GUIDE STYLESHEET: legacy kon_guide.css is retired — its load-bearing
   rules were ported in (see the "Phase 12" block below) and verified empirically
   (disable-and-smoke, zero-diff) across all 9 guide surfaces. Mirror/spec:
   docs/plans/under_the_tuscan_sun/ (uts.css catalog + design-system-spec.md).
   Plan: brand FILLS pair with --g-on-brand; brand-as-text on white uses --g-brand-ink.
   ===================================================================== */

:root{
  /* color — brand-led; semantic colors ONLY for meaning (Q1) */
  --g-brand: var(--kon-brand-color, #cf0015);
  /* CONTRAST GUARDRAIL:
     --g-on-brand = text/icons ON brand FILLS (band, disc, submit). Defaults white;
       a site with a LIGHT brand sets this to a dark value (the schema already pairs
       header_background_color + header_text_color — map --g-on-brand to header_text_color).
     --g-brand-ink = brand used AS TEXT on white/light (links, +/-, badges). color-mix
       anchors it toward ink so it stays legible even when the brand is pale. */
  --g-on-brand:#fff;
  --g-brand-ink: color-mix(in srgb, var(--g-brand) 55%, var(--g-ink));
  --g-ink:#222;            /* headings/strong */
  --g-body:#3a3a3a;        /* body text */
  --g-muted:#6b7280;       /* secondary */
  --g-faint:#9aa0a6;       /* labels/notes */
  --g-line:#eee;           /* hairline divider */
  --g-line2:#e2e2e2;       /* slightly stronger hairline */
  --g-tint:#f7f7f8;        /* neutral fill (callouts) */
  --g-ok:#198754;          /* complete / correct */
  --g-bad:#dc3545;         /* incorrect */
  --g-warn-bg:#fff8e1; --g-warn-bd:#f0c000; --g-warn-ink:#7a5b00;  /* tip (amber=attention) */
  /* type (Q2 two-tier) */
  --g-font:'BasicGothicWebPro',-apple-system,system-ui,sans-serif;
  /* shape (Q4) */
  --g-radius:6px; --g-thumb:48px; --g-disc:30px;
  --g-shadow:0 10px 40px rgba(0,0,0,.18);  /* overlay ONLY */
}

.g{ font-family:var(--g-font); color:var(--g-body); }

/* ---- editorial atoms (Q5) ---- */
.g-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--g-faint); }
.g-title{ font-weight:200; font-size:2rem; line-height:1.15; color:var(--g-ink); margin:.1rem 0 .4rem; }   /* ultralight, large only */
.g-sectiontitle{ font-weight:500; font-size:1.15rem; color:var(--g-ink); margin:1.6rem 0 .5rem; }
.g-grouphdr{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g-faint); padding:1.1rem 0 .35rem; border-bottom:1px solid var(--g-line); }

/* UTS cleanup 2026-07-05: retired dead g-rating* / g-meta* / g-callout* / g-badge*
   families (zero refs across templates + JS; the live callout is .g-explain and
   metadata renders via .g-md). */

/* ---- material row (Q3 flat/airy, image-light) ---- */
.g-mat{ display:flex; align-items:center; gap:.75rem; padding:.55rem 0; border-bottom:1px solid var(--g-line); }
.g-mat:last-child{ border-bottom:none; }
.g-mat-thumb{ position:relative; width:var(--g-thumb); height:var(--g-thumb); flex-shrink:0; border-radius:var(--g-radius); overflow:hidden; background:var(--g-tint); display:flex; align-items:center; justify-content:center; color:var(--g-faint); }
.g-mat-thumb svg{ width:20px; height:20px; }   /* primary video=play / audio=waveform glyph (type-aware thumb) */
.g-mat-thumb-wrap{ display:contents; }         /* click-routing wrapper (tap thumb → lightbox); no box, thumb stays the flex item */
.g-mat-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.g-mat-thumb--ph{ background:var(--g-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23cfcfcf' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/20px no-repeat; }
.g-mat-gal{ position:absolute; right:2px; bottom:2px; background:rgba(0,0,0,.62); color:#fff; font-size:9px; line-height:1; padding:2px 4px; border-radius:3px; }
.g-mat-body{ flex:1; min-width:0; }
.g-mat-name{ font-size:15px; color:var(--g-ink); overflow-wrap:anywhere; }
.g-mat-type{ font-size:11px; color:var(--g-faint); }      /* neutral type label, not a colored badge */
.g-mat-opt{ font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--g-faint); border:1px solid var(--g-line2); border-radius:3px; padding:0 5px; margin-left:6px; }
.g-mat-note{ font-size:12px; color:var(--g-faint); font-style:italic; margin-top:3px; }
.g-mat-qty{ font-size:14px; color:var(--g-ink); font-weight:600; white-space:nowrap; flex-shrink:0; padding-left:.4rem; }

/* ---- step (instruction) ---- */
.g-step{ display:flex; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--g-line); align-items:flex-start; }
.g-step:last-child{ border-bottom:none; }
.g-step-num{ width:var(--g-disc); height:var(--g-disc); border-radius:50%; background:var(--g-brand); color:var(--g-on-brand); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0; }
.g-step-num--done{ background:var(--g-ok); color:#fff; }
.g-step-num--wrong{ background:var(--g-bad); color:#fff; }
.g-step-body{ flex:1; min-width:0; }
.g-step-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.15rem; }
.g-step-title{ font-size:14px; font-weight:600; color:var(--g-ink); }
.g-step-dur{ font-size:10px; color:var(--g-muted); background:var(--g-tint); padding:1px 7px; border-radius:10px; white-space:nowrap; }
.g-step-text{ font-size:15px; line-height:1.6; color:var(--g-body); }
.g-tip{ margin-top:.5rem; font-size:13px; color:var(--g-warn-ink); background:var(--g-warn-bg); border-left:3px solid var(--g-warn-bd); padding:.5rem .7rem; border-radius:0 var(--g-radius) var(--g-radius) 0; }
.g-explain{ margin-top:.5rem; font-size:13px; color:var(--g-body); background:var(--g-tint); border-left:3px solid var(--g-brand); padding:.5rem .7rem; border-radius:0 var(--g-radius) var(--g-radius) 0; }

/* ---- step (instruction) — Phase 4 (UTS): standalone disc glyph · mark-as-done (.g-check) · done-state rides the compiler's existing .o-block-step--completed (NO new JS) ---- */
.g-step-num svg{ width:15px; height:15px; }                       /* standalone instruction glyph (no ordinal); collection discs show 1..N */
.g-step-media{ margin-top:.55rem; }                               /* breathing room for the reused o_mat_thumb in a step body */
.g-check{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.65rem; font-size:13px; color:var(--g-muted); cursor:pointer; user-select:none; }
.g-check input{ width:16px; height:16px; accent-color:var(--g-brand); cursor:pointer; margin:0; }
.g-check input:disabled{ cursor:default; }                        /* anon: compiler leaves it disabled until sign-in */
.o-block-step--completed .g-step-num{ background:var(--g-ok); }                                  /* done: disc → green … */
.o-block-step--completed .g-step-num svg{ display:none; }                                        /* … glyph out … */
.o-block-step--completed .g-step-num::after{ content:"\2713"; font-weight:700; font-size:15px; } /* … ✓ in */
.o-block-step--completed .g-step-title{ text-decoration:line-through; color:var(--g-muted); }    /* done: title struck/dimmed */
.o-block-step--completed .g-check{ color:var(--g-ok); }                                          /* done: label greens ("Done") */

/* ---- question (Q1 semantics: green correct / red incorrect; no rainbow) ---- */
.g-q-prompt{ font-size:15px; line-height:1.6; color:var(--g-body); margin:.1rem 0 .6rem; }
.g-opt{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--g-line2); border-radius:var(--g-radius); margin-bottom:.4rem; font-size:14px; color:var(--g-body); cursor:pointer; }
.g-opt .bi{ color:var(--g-faint); }
/* state styling rides the compiler's .o-block-step-answer--* hooks. The .g-opt COMPOUND selectors
   (+ !important / ::after reset where legacy kon_guide.css uses them) OVERRIDE the old answer rules
   (label.o-…--interactive border:transparent · --correct/--incorrect !important + ::after ✓/✗ ·
   label.--selected blue · --locked opacity), which still load for step_collection (Phase 6).
   .g-opt--* kept as catalog aliases. step_collection options lack .g-opt → unaffected. */
.g-opt.o-block-step-answer--interactive{ border-color:var(--g-line2); }
.g-opt.o-block-step-answer--interactive:hover{ border-color:var(--g-line2); }
.g-opt--selected, .g-opt.o-block-step-answer--selected{ border-color:var(--g-brand); background:color-mix(in srgb, var(--g-brand) 6%, #fff); }
.g-opt--correct, .g-opt.o-block-step-answer--correct{ border-color:var(--g-ok) !important; background:#e9f5ee !important; color:#0f5132; }
.g-opt--correct .bi, .g-opt.o-block-step-answer--correct .bi{ color:var(--g-ok); }
.g-opt.o-block-step-answer--correct::after{ content:none; }
.g-opt--incorrect, .g-opt.o-block-step-answer--incorrect{ border-color:var(--g-bad) !important; background:#fbe9eb !important; color:#842029; }
.g-opt--incorrect .bi, .g-opt.o-block-step-answer--incorrect .bi{ color:var(--g-bad); }
.g-opt.o-block-step-answer--incorrect::after{ content:none; }
.g-opt--locked, .g-opt.o-block-step-answer--locked{ pointer-events:none; }
.g-opt.o-block-step-answer--locked{ opacity:1; }
.g-submit{ font-size:13px; font-weight:600; color:var(--g-on-brand); background:var(--g-brand); border:none; border-radius:var(--g-radius); padding:.45rem 1rem; cursor:pointer; }
/* D20.6: in the LEARN lightbox, center + space the Submit-Answer button to match the
   centered Mark-Complete (.o-guide-lightbox-lesson-action). SCOPED to the lightbox so the
   shared standalone step blocks (_block_step, _block_step_collection) keep their layout. */
[data-guide-lightbox] .g-submit{ display:block; width:fit-content; margin:1.1rem auto 0; padding:.5rem 1.2rem; }
.g-qtype{ font-size:11px; color:var(--g-faint); }                                /* neutral qtype label — consistent with material_type (D5.4) */
/* breathing room between a question's primary media / gallery and its options.
   Targets the actual answers CONTAINER — options are wrapped in .o-block-step-answers
   (body) / .o-guide-lightbox-step-answers (lightbox), so the old `+ .g-opt` adjacency
   never matched and the media butted flush against the first option. */
.g-step-media + .o-block-step-answers, .g-gal + .o-block-step-answers,
.g-step-media + .o-guide-lightbox-step-answers, .g-gal + .o-guide-lightbox-step-answers{ margin-top:.55rem; }
/* "Try again" — compiler appends <button class="o-block-step-reset"> to an answered/revealed RESETTABLE block (rides the compiler's class, D5.1; no JS). Aligns under the body, past the disc. */
.o-block-step-reset{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.7rem; margin-left:calc(var(--g-disc) + .85rem); font-size:13px; font-weight:600; color:var(--g-brand-ink); background:none; border:none; padding:0; cursor:pointer; text-decoration:none; }  /* text-decoration:none overrides legacy .o-block-step-reset underline */
.o-block-step-reset:hover{ text-decoration:underline; }
/* shared reset-confirm dialog (Try-again / collection / post reset) — FULL g- skin,
   CSS-ONLY over the compiler's existing Bootstrap DOM (no DOM/JS change; the compiler
   still builds + shows/hides it — D5.1). Generic chrome (.modal-content/.btn-danger/…)
   is SCOPED via :has(.o-block-reset-modal-body) so other modals are untouched.
   The 3 custom hooks (-title/-body/-warning) are unique to this modal → no scope needed. */
.modal-content:has(.o-block-reset-modal-body){ width:100%; max-width:360px; margin:0 auto; background:#fff; border:1px solid var(--g-line2); border-radius:14px; box-shadow:var(--g-shadow); overflow:hidden; }
.modal-content:has(.o-block-reset-modal-body) .modal-header{ border-bottom:none; padding:1.25rem 1.3rem .35rem; align-items:flex-start; gap:.6rem; }
.o-block-reset-modal-title{ display:flex; align-items:center; gap:.65rem; font-size:1.05rem; font-weight:600; color:var(--g-ink); margin:0; }
.o-block-reset-modal-title::before{ content:""; flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background-color:color-mix(in srgb, var(--g-bad) 11%, #fff);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:17px; }
.modal-content:has(.o-block-reset-modal-body) .btn-close{ margin:-.15rem -.15rem 0 auto; padding:.4rem; width:.7rem; height:.7rem; box-sizing:content-box; border:none; opacity:.5; cursor:pointer;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa0a6'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:.7rem; transition:opacity .15s ease; }
.modal-content:has(.o-block-reset-modal-body) .btn-close:hover{ opacity:.9; }
.o-block-reset-modal-body{ font-size:14px; line-height:1.6; color:var(--g-body); padding:.15rem 1.3rem .35rem; }
.o-block-reset-modal-body br{ display:none; }                                    /* compiler emits <br><br> before the warning; it's a block callout with its own margin → suppress the raw breaks */
.o-block-reset-modal-warning{ display:block; margin-top:.75rem; font-size:12.5px; font-weight:600; color:var(--g-bad); background:color-mix(in srgb, var(--g-bad) 6%, #fff); border-left:3px solid var(--g-bad); border-radius:0 var(--g-radius) var(--g-radius) 0; padding:.45rem .65rem; }
.modal-content:has(.o-block-reset-modal-body) .modal-footer{ border-top:none; padding:.6rem 1.3rem 1.3rem; gap:.5rem; justify-content:flex-end; }
.modal-content:has(.o-block-reset-modal-body) .btn{ font-size:13px; font-weight:600; border-radius:var(--g-radius); padding:.45rem 1rem; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.modal-content:has(.o-block-reset-modal-body) .btn-outline-secondary{ background:transparent; border:1px solid var(--g-line2); color:var(--g-muted); }
.modal-content:has(.o-block-reset-modal-body) .btn-outline-secondary:hover{ background:var(--g-tint); color:var(--g-ink); }
.modal-content:has(.o-block-reset-modal-body) .btn-danger{ background:var(--g-bad); border:none; color:#fff; }
.modal-content:has(.o-block-reset-modal-body) .btn-danger:hover{ background:color-mix(in srgb, var(--g-bad) 88%, #000); }

/* flashcard */
.g-flash{ border:1px solid var(--g-line2); border-radius:var(--g-radius); overflow:hidden; }
.g-flash-front{ padding:.85rem 1rem; background:var(--g-tint); }
.g-flash-q{ font-size:15px; color:var(--g-ink); }
.g-flash-reveal{ display:flex; align-items:center; gap:.4rem; justify-content:center; padding:.6rem; border-top:1px dashed var(--g-line2); color:var(--g-brand-ink); font-size:13px; font-weight:600; cursor:pointer; }
.g-flash-back{ padding:.85rem 1rem; border-top:1px solid var(--g-line2); font-size:14px; line-height:1.6; color:var(--g-body); }

/* ---- step_collection timeline + progress ---- */
.g-progress{ height:4px; background:var(--g-line2); border-radius:2px; overflow:hidden; margin:.25rem 0 1rem; position:static; }
.g-progress-fill{ height:100%; background:var(--g-ok); }

/* step_collection — Phase 6 (UTS): compose the g- step/question atoms inline; ride the compiler's
   .o-block-step-collection-* + .o-block-progress-bar* hooks; neutralize the legacy kon_guide.css
   timeline/connector/disc/progress styling (still loaded during migration; no !important on it except
   the disc state bg, which == our --g-ok/--g-bad so we ride it). */
/* timeline wrapper: drop the legacy 2.5rem indent + the vertical connector (D6.1 = no connector) */
.o-block-step-collection-timeline{ padding-left:0; position:static; }
.o-block-step-collection-timeline::before{ content:none; }
/* item = the hairline-separated row (the inner .g-step is :last-child → its own border is suppressed,
   so the separator lives here); drop the legacy absolute-layout padding + the connector ::before */
.o-block-step-collection-item{ position:static; padding-bottom:0; border-bottom:1px solid var(--g-line); }
.o-block-step-collection-item:last-child{ border-bottom:none; }
.o-block-step-collection-item::before, .o-block-step-collection-item--completed::before{ content:none; }
/* disc: keep the compiler circle hook (it rewrites the text ordinal → ✓/✗) + the g- disc; neutralize the
   legacy absolute positioning + the state rings. The legacy !important green/red bg drives done/answered/wrong. */
.o-block-step-collection-circle.g-step-num{ position:static; left:auto; top:auto; z-index:auto; box-shadow:none; }
.o-block-step-collection-item--completed .g-step-num,
.o-block-step-collection-item--answered .g-step-num,
.o-block-step-collection-item--answered-incorrect .g-step-num{ box-shadow:none; }
/* completed instruction: green the "Done" checkbox label (matches the standalone .o-block-step--completed .g-check).
   No title strike/dim for a collection step — the green ✓ disc + progress convey completion (per the signed mockup). */
.o-block-step-collection-item--completed .g-check{ color:var(--g-ok); }
/* progress bar: ride the .o-block-progress-bar* hooks + the g- visual; green fill throughout (100% signal = banner) */
.o-block-step-collection .g-progress{ margin:.8rem 0 .35rem; }
.o-block-step-collection .o-block-progress-bar-label{ margin:0 0 .7rem; }
.o-block-progress-bar-fill.g-progress-fill{ background:var(--g-ok); }
/* "Reset progress" link + completion banner (compiler-injected at runtime) — g- skin over the legacy */
.o-block-progress-reset{ font-size:12px; font-weight:600; color:var(--g-brand-ink); background:none; border:none; padding:0; cursor:pointer; text-decoration:none; }
.o-block-progress-reset:hover{ color:var(--g-brand-ink); text-decoration:underline; }
.o-block-progress-complete{ display:flex; align-items:center; gap:.45rem; margin:.1rem 0 1rem; padding:.5rem .7rem; font-size:13px; font-weight:600; color:#0f5132; background:#e9f5ee; border-left:3px solid var(--g-ok); border-radius:0 var(--g-radius) var(--g-radius) 0; }
/* post-level "Reset all progress on this page" container (Phase 8 — block-level reset; button = .o-block-step-reset, airy/no-icon) */
.o-post-reset-all{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--g-line); text-align:center; }

/* ---- accordion (Q3 all-open default; Q4 brand +/-) ---- */
.g-acc{ margin-bottom:4px; }                                          /* tint section bar replaces the hairline */
.g-acc-sum{ list-style:none; cursor:pointer; padding:.6rem .7rem; background:var(--g-tint); border-radius:var(--g-radius); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g-ink); display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.g-acc-sum::-webkit-details-marker{ display:none; }
.g-acc-sum::after{ content:"\2212"; color:var(--g-brand-ink); font-size:18px; line-height:1; }
.g-acc:not([open])>.g-acc-sum::after{ content:"+"; }
.g-acc-body{ padding:.25rem 0 .7rem; }                                /* rows flush to the bar/column edge — align with single material blocks */

/* ---- gallery (per-material/step media_gallery) ---- */
/* overflow = single-row horizontal SWIPE (touch) / scroll (desktop); snap for a refined swipe; next tile peeks as the cue */
.g-strip{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.g-strip>*{ scroll-snap-align:start; }
.g-strip img{ width:64px; height:64px; object-fit:cover; flex:0 0 auto; border-radius:var(--g-radius); }
/* mixed-media tiles: image / video (poster + play) / audio / document — type from media_type, NOT assumed photos */
.g-tile{ position:relative; width:64px; height:64px; flex:0 0 auto; border-radius:var(--g-radius); overflow:hidden; background:var(--g-tint); display:flex; align-items:center; justify-content:center; color:var(--g-faint); }
.g-tile img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
.g-tile-ic{ font-size:22px; line-height:1; }                              /* audio/doc glyph (svg or bi) */
.g-tile-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.4), rgba(0,0,0,0) 78%); }
.g-tile-play svg{ width:20px; height:20px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.g-tile-tag{ position:absolute; left:3px; bottom:3px; font-size:8px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.62); border-radius:3px; padding:1px 4px; line-height:1.3; }

/* ---- gallery DISCLOSURE: airy by default — strip collapsed, reveals on demand.
       Native <details>, NO JS, spec-valid (summary holds only the toggle link; the
       .g-mat row stays a normal sibling). Revealed tiles open the EXISTING shared
       viewers by reuse (collection-item-compiler): image-lightbox / media-lightbox / doc new-tab. ---- */
.g-gal{ margin-top:.4rem; }                                     /* flush-left + breathing room above the toggle */
.g-gal>summary{ list-style:none; cursor:pointer; outline:none;
  display:inline-flex; align-items:center; gap:5px; padding:.15rem 0;
  font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--g-brand-ink); }
.g-gal>summary::-webkit-details-marker{ display:none; }
.g-gal>summary svg{ width:9px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .25s ease; }
.g-gal[open]>summary svg{ transform:rotate(180deg); }
.g-gal>summary:focus-visible{ text-decoration:underline; }
.g-gal-reveal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.g-gal[open] .g-gal-reveal{ grid-template-rows:1fr; }
.g-gal-reveal>div{ overflow:hidden; }
.g-gal-reveal .g-strip{ padding-top:.4rem; }
@media (prefers-reduced-motion:reduce){ .g-gal-reveal,.g-gal>summary svg{ transition:none; } }

/* ---- guide header band (Q6 light + brand band) ---- */
.g-band{ background:var(--g-brand); color:var(--g-on-brand); text-align:center; padding:0 1rem 1.25rem; }
.g-band .g-eyebrow,.g-band .g-title{ color:var(--g-on-brand); }
.g-band-cover{ width:100%; display:block; }
.g-band-author{ width:84px; height:84px; border-radius:50%; border:3px solid rgba(127,127,127,.35); object-fit:cover; margin:-42px auto .4rem; position:relative; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:600; background:rgba(127,127,127,.22); }
.g-band-stats{ font-size:12px; font-weight:200; opacity:.95; }

/* UTS cleanup 2026-07-05: retired dead g-media* family (video/audio media rows
   were never emitted; step/material media use o_mat_thumb + g-step-media). */

/* gallery item captions */
.g-strip figure{ margin:0; flex:0 0 auto; width:72px; }
.g-strip figure img{ width:72px; height:72px; }
.g-strip figcaption{ font-size:9px; color:var(--g-faint); margin-top:3px; line-height:1.2; }

/* UTS cleanup 2026-07-05: retired dead g-lightbox* family (a never-used image
   lightbox skin; the guide lightbox uses the o-guide-lightbox-* namespace). */

/* generic GuideMetadata renderer (any key -> value; respects visible) */
.g-md{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; align-items:baseline; }
.g-md-k{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--g-faint); white-space:nowrap; }
.g-md-v{ font-size:13.5px; color:var(--g-body); }
.g-md-v a{ color:var(--g-brand-ink); }

/* empty state */
.g-empty{ text-align:center; color:var(--g-faint); font-size:13px; padding:1.25rem; border:1px dashed var(--g-line2); border-radius:var(--g-radius); }

/* =====================================================================
   Phase 9 (UTS) — guide LIGHTBOX shell + generic metadata (restyle).
   Reskins the SHARED shell of _guide_lightbox.gohtml onto g- tokens: the
   brand-band masthead (.g-band* — replaces the legacy cover/title/badges/stats),
   the generic .g-md metadata, and the section/overview/footer chrome. The mode
   CONTENT (materials/steps [cook]; lessons/completion/review [learn]) stays on
   legacy kon_guide.css until Phases 10/11. These rules ride ON TOP of the legacy
   cascade (kon_guide.css loads first, this file second → equal specificity wins).
   Every compiler hook (footer/progress/scroll-hint/step) is preserved.
   ===================================================================== */

/* Overlay → OPAQUE field + centered white panel. The guide is an *isolated* experience:
   full-screen on mobile, a centered card on desktop — an opaque backdrop keeps that isolation
   at every size (the host page never shows through), placing it in the immersive lightbox
   family with the media viewer (#000), not the CEWL/series "return to the page" scrim.
   (Reopens D9.1 deliberately.) Legacy .o-guide-lightbox is fixed/inset/z-index + display:none;
   JS toggles display:flex. */
.o-guide-lightbox{ background:#000; flex-direction:row; align-items:center; justify-content:center; }
.o-guide-lightbox-panel{ position:relative; width:100%; max-width:650px; max-height:90vh; background:#fff;
  border-radius:.75rem; display:flex; flex-direction:column; overflow:hidden; }

/* Reading column now fills the 650 panel (the panel caps the width, not the inner). The
   masthead bleed + cover calc(100% + 3rem) keep working relative to the inner padding. */
.o-guide-lightbox-body-inner,
.o-guide-lightbox-page-inner{ max-width:none; }

/* Scroll containment — the panel reveals the page behind it, so lock the document while a
   guide lightbox is open (keyed off the overlay's own [hidden] state — no JS; :has() is
   already used in this file) and contain rubber-band chaining. Locks <html>, the actual
   document scroller (kon-scroll-lock's body class is dropped by an Unpoly hash race on open). */
html:has(.o-guide-lightbox:not([hidden])){ overflow:hidden; }
.o-guide-lightbox-body,
.o-guide-lightbox-page,
.o-guide-lightbox-review{ overscroll-behavior:contain; }

/* Learn pages scroll inside the panel. height:100% stops resolving once the panel is
   max-height (not full-screen), so make the visible page a flex child that fills the body
   and scrolls — otherwise the overview's "Start Course" button is clipped + unreachable. */
.o-guide-lightbox-body--learn{ display:flex; flex-direction:column; min-height:0; }
.o-guide-lightbox-page{ flex:1 1 auto; min-height:0; height:auto; }
.o-guide-lightbox-review{ min-height:0; }

/* ---- Masthead: brand band, cover at NATURAL aspect, full-bleed within the column ----
   The cover + band break out of the inner's padding so they span the column
   edge-to-edge (like the post hero); the content below keeps its padding. */
.o-guide-lightbox-body-inner > .g-band-cover,
.o-guide-lightbox-body-inner > .g-band,
.o-guide-lightbox-page-inner > .g-band-cover,
.o-guide-lightbox-page-inner > .g-band{ margin-left:-1.5rem; margin-right:-1.5rem; }
/* the cover is an <img> with an explicit width — negative margins reposition but do NOT
   widen it, so it must span the content box PLUS both bled margins to fill the column
   edge-to-edge (no right-side gap). Couples to the 1.5rem inner padding above. */
.o-guide-lightbox-body-inner > .g-band-cover,
.o-guide-lightbox-page-inner > .g-band-cover{ width:calc(100% + 3rem); max-width:none; }
.o-guide-lightbox-body-inner > .g-band-cover{ margin-top:-1rem; }          /* cancel inner top padding → cover flush to top */
.o-guide-lightbox-page-inner > .g-band-cover{ margin-top:-1.5rem; }
.o-guide-lightbox-body-inner > .g-band:first-child{ margin-top:-1rem; padding-top:1.25rem; }   /* no-cover guides: band reaches the top */
.o-guide-lightbox-page-inner > .g-band:first-child{ margin-top:-1.5rem; padding-top:1.25rem; }
.o-guide-lightbox .g-band:first-child .g-band-author{ margin-top:.5rem; }  /* no cover to overlap → drop the −42px pull */

/* COVER GUARD (belt-and-braces). The legacy crop (height:260px/180px/160px +
   object-fit:cover) only matched `.o-guide-lightbox-cover img`, which the template
   no longer emits — but pin natural aspect explicitly so size is WIDTH-driven only:
   no forced height, no cap, no crop. A tall portrait just scrolls, like the post. */
.o-guide-lightbox .g-band-cover{ height:auto; max-height:none; object-fit:initial; display:block; }
/* breathing room between the band and the first content below it (metadata / overview chrome) —
   the mockup's content wrapper had ~1.1rem top padding; without it the metadata butts the colored band. */
.o-guide-lightbox .g-band{ margin-bottom:1.1rem; }

/* ---- Floating close button (reskin: brand hover) ---- */
.o-guide-lightbox-close{ transition:color .15s ease, transform .15s ease; }
.o-guide-lightbox-close:hover{ color:var(--g-brand); transform:scale(1.06); }

/* ---- Shared section-title chrome (eyebrow style — used by Materials/Steps headers) ---- */
.o-guide-lightbox-section-title{ display:flex; align-items:center; gap:.5rem; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g-faint); border-bottom:none; padding-bottom:0; margin:1.5rem 0 .7rem; }
.o-guide-lightbox-section-title i{ color:var(--g-faint); }
.o-guide-lightbox-section-desc{ color:var(--g-muted); font-size:13px; }

/* ---- Overview chrome (learn page 0): de-rainbow → g- tokens ---- */
.o-guide-lightbox-overview-objective{ background:var(--g-tint); border-radius:0 var(--g-radius) var(--g-radius) 0; border-left:3px solid var(--g-brand); color:var(--g-body); }
.o-guide-lightbox-overview-objective i{ color:var(--g-brand-ink); }
.o-guide-lightbox-overview-objective strong{ color:var(--g-ink); }
.o-guide-lightbox-overview-objective p{ color:var(--g-body); }
.o-guide-lightbox-overview-start .btn-primary{ background-color:var(--g-brand); border-color:var(--g-brand); color:var(--g-on-brand); border-radius:var(--g-radius); font-weight:600; }
.o-guide-lightbox-overview-count{ color:var(--g-faint); }
.o-guide-lightbox-scroll-hint{ color:var(--g-faint); }

/* ---- Footer chrome (cook progress+reset / learn prev-next) ---- */
.o-guide-lightbox-footer{ background:#fcfbf9; border-top:1px solid var(--g-line); }
.o-guide-lightbox-progress-track{ background:var(--g-line2); }
.o-guide-lightbox-progress-text{ color:var(--g-muted); }
/* progress fill green in BOTH modes (de-rainbow) — match the legacy compound specificity, source order wins */
.o-guide-lightbox:not(.o-guide-lightbox--learn) .o-guide-lightbox-progress-fill,
.o-guide-lightbox--learn .o-guide-lightbox-progress-fill{ background:var(--g-ok); }
.o-guide-lightbox-progress-fill--complete,
.o-guide-lightbox--learn .o-guide-lightbox-progress-fill--complete{ background:var(--g-ok); }
.o-guide-lightbox-reset{ color:var(--g-brand-ink); font-weight:600; text-decoration:none; }
.o-guide-lightbox-reset:hover{ color:var(--g-brand-ink); text-decoration:underline; }
.o-guide-lightbox-nav-btn{ background:none; border:none; min-width:auto; padding:.375rem .25rem; color:var(--g-brand-ink); font-weight:600; }
.o-guide-lightbox-nav-btn:hover{ background:none; color:var(--g-brand-ink); text-decoration:underline; }
.o-guide-lightbox-nav-btn:disabled{ color:var(--g-faint); opacity:1; }

/* ---- Mobile: panel fills the screen (matches the house lightbox idiom) + masthead bleed matches the reduced padding ---- */
@media (max-width:767.98px){
  .o-guide-lightbox-panel{ max-width:100%; max-height:100%; height:100%; border-radius:0; }
  .o-guide-lightbox-body-inner > .g-band-cover,
  .o-guide-lightbox-body-inner > .g-band,
  .o-guide-lightbox-page-inner > .g-band-cover,
  .o-guide-lightbox-page-inner > .g-band{ margin-left:-1rem; margin-right:-1rem; }
  .o-guide-lightbox-body-inner > .g-band-cover,
  .o-guide-lightbox-page-inner > .g-band-cover{ width:calc(100% + 2rem); }
  .o-guide-lightbox-body-inner > .g-band-cover,
  .o-guide-lightbox-body-inner > .g-band:first-child{ margin-top:-.75rem; }
  .o-guide-lightbox-page-inner > .g-band-cover,
  .o-guide-lightbox-page-inner > .g-band:first-child{ margin-top:-1rem; }
}

/* =====================================================================
   Phase 10 (UTS) — guide-lightbox COOK CONTENT (materials + steps) restyle.
   Materials + steps reuse the g- atoms (the same ones the standalone blocks use).
   Materials carry NO legacy class (clean g- replacement) → no override needed.
   Steps keep ONLY the lightbox compiler's hook classes (step wrapper / disc /
   answer options + state modifiers) + add g- classes; these narrow rules make
   the g- atoms OUTRANK the legacy kon_guide.css step styling (loaded first).
   ===================================================================== */

/* Step disc — keeps the ordinal; legacy 32px blue → g- 30px brand circle
   (.g-step-num wins by source order). Compiler state classes → g- ok/bad
   (compound 0,2,0 beats the legacy 0,1,0; no !important needed). */
.o-guide-lightbox-step-number--completed.g-step-num,
.o-guide-lightbox-step-number--answered-correct.g-step-num{ background:var(--g-ok); }
.o-guide-lightbox-step-number--answered-incorrect.g-step-num{ background:var(--g-bad); }
/* completed instruction: green the "Done" label (parity with the standalone .o-block-step--completed .g-check) */
.o-guide-lightbox-step--completed .g-check{ color:var(--g-ok); }

/* Answer options — neutralize the legacy blue hover/selected + green/red fills;
   ride the g- palette. KEEP the legacy ::after ✓/✗ (the lightbox compiler does
   NOT swap the option icon, unlike the block compiler, and the legacy ✓/✗ colors
   already == --g-ok/--g-bad — leverage the legacy where it matches, per Phase 6). */
.g-opt.o-guide-lightbox-step-answer{ align-items:center; }
.g-opt.o-guide-lightbox-step-answer:hover{ border-color:var(--g-line2); background:transparent; }
.g-opt.o-guide-lightbox-step-answer--selected{ border-color:var(--g-brand); background:color-mix(in srgb, var(--g-brand) 6%, #fff); }
.g-opt.o-guide-lightbox-step-answer--correct{ border-color:var(--g-ok); background:#e9f5ee; color:#0f5132; }
.g-opt.o-guide-lightbox-step-answer--incorrect{ border-color:var(--g-bad); background:#fbe9eb; color:#842029; }
.g-opt.o-guide-lightbox-step-answer--locked{ opacity:1; }
.g-opt.o-guide-lightbox-step-answer .bi{ color:var(--g-faint); }

/* Reset-confirm modal — the lightbox compiler appends it to <body> (#guide-reset-modal
   / #guide-reset-backdrop) as a Bootstrap modal (z ~1055), which sits BELOW the guide
   lightbox (z 9998) → the dialog hid behind the overlay (only the backdrop fade showed).
   Raise both above the lightbox, like the media-lightbox sub-modals (10005/10010). */
#guide-reset-backdrop{ z-index:10005; }
#guide-reset-modal{ z-index:10010; }

/* =====================================================================
   Phase 11 (UTS) — guide-lightbox LEARN content + picker + hero compass.
   Paged lessons + completion + review reuse the g- atoms; the learn chrome
   classes get COMPLETE g- rules so they stand alone once kon_guide.css retires
   after this phase. Lesson MC/TF options reuse the Phase-10 answer overrides.
   The hero compass is already brand (.m-post-hero-media-link) → no rule here.
   ===================================================================== */

/* lesson header: counter (eyebrow) + neutral qtype (de-rainbowed) */
.o-guide-lightbox-lesson-header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; padding-right:2.25rem; }  /* right pad: keep the qtype clear of the panel close button */
.o-guide-lightbox-lesson-counter{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--g-faint); }
.o-guide-lightbox-lesson-title{ font-size:1.25rem; font-weight:500; color:var(--g-ink); line-height:1.25; margin:.1rem 0 .8rem; }
.o-guide-lightbox-lesson-body{ font-size:15px; line-height:1.6; color:var(--g-body); }
/* a paged lesson is NOT a numbered list → no ordinal disc; the counter conveys position */

/* "Mark Complete" → g- brand button; done → success-tint, locked */
.o-guide-lightbox-lesson-action{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--g-line); text-align:center; }
.o-guide-lightbox-lesson-action .btn{ font-size:13px; font-weight:600; border-radius:var(--g-radius); padding:.5rem 1.2rem; background:var(--g-brand); border:none; color:var(--g-on-brand); cursor:pointer; }
.o-guide-lightbox-lesson-action--done .btn{ background:#e9f5ee; border:none; color:#0f5132; pointer-events:none; }

/* completion page — success vocabulary (matches the collection completion banner) */
.o-guide-lightbox-completion{ text-align:center; padding:2.4rem 1rem; }
.o-guide-lightbox-completion-icon{ width:72px; height:72px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--g-on-brand); background:var(--g-brand); }
.o-guide-lightbox-completion-title{ font-weight:200; font-size:1.6rem; color:var(--g-ink); margin:0 0 .5rem; }
.o-guide-lightbox-completion-score{ font-size:13px; color:var(--g-muted); }
.o-guide-lightbox-completion-score b{ display:block; color:var(--g-ok); font-weight:600; font-size:1.5rem; }
.o-guide-lightbox-completion-detail{ font-size:12px; color:var(--g-faint); margin-top:.3rem; }
.o-guide-lightbox-completion-actions{ display:flex; justify-content:center; gap:.6rem; margin-top:1.4rem; }
.o-guide-lightbox-completion-actions .btn{ font-size:13px; font-weight:600; border-radius:var(--g-radius); padding:.5rem 1.1rem; background:none; border:1px solid var(--g-line2); color:var(--g-brand-ink); cursor:pointer; }

/* review section — inset to clear the panel edges (it's a panel sibling, NOT wrapped in
   -page-inner, so it had no horizontal padding); then per-lesson rows (ordinal = lesson
   number; green/red by result). First row top zeroed so it aligns like the lesson pages. */
.o-guide-lightbox-review{ padding:1.5rem; }
.o-guide-lightbox-review-lesson{ padding:1rem 0; border-bottom:1px solid var(--g-line); }
.o-guide-lightbox-review-lesson:first-child{ padding-top:0; }
.o-guide-lightbox-review-lesson:last-child{ border-bottom:none; }
.o-guide-lightbox-review-header{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.o-guide-lightbox-review-number{ width:var(--g-disc); height:var(--g-disc); border-radius:50%; background:var(--g-brand); color:var(--g-on-brand); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0; }
.o-guide-lightbox-review-number--completed,.o-guide-lightbox-review-number--correct{ background:var(--g-ok); }
.o-guide-lightbox-review-number--incorrect{ background:var(--g-bad); }
.o-guide-lightbox-review-title{ font-size:14px; font-weight:600; color:var(--g-ink); }
.o-guide-lightbox-review-body{ font-size:13.5px; line-height:1.6; color:var(--g-body); padding-left:calc(var(--g-disc) + .6rem); }
/* W12a: review answers as labeled pills. The label rule below landed dead in Phase 11
   (nothing emitted it) — now live, extended with the weight; the dead -answer-text--*
   color rules it shipped with are RETIRED, replaced by the pills (same ink, plus the
   .g-opt--correct/--incorrect tint bg — no new colors). */
.o-guide-lightbox-review-answer-label{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--g-faint); margin-bottom:.25rem; }
.o-guide-lightbox-review-answer-pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border-radius:var(--g-radius); font-size:13px; }
.o-guide-lightbox-review-answer-pill .bi{ font-size:12px; }
.o-guide-lightbox-review-answer-pill--correct{ background:#e9f5ee; color:#0f5132; }
.o-guide-lightbox-review-answer-pill--incorrect{ background:#fbe9eb; color:#842029; }
.o-guide-lightbox-review-answer-pill + .o-guide-lightbox-review-answer-label{ margin-top:.5rem; }

/* multi-guide picker — g- skin + de-rainbow the type badges (Q1). Compiler-generated
   markup (.o-guide-picker-*) → CSS-only reskin (like the reset modal). */
.o-guide-picker-modal{ width:100%; max-width:420px; margin:0 auto; background:#fff; border-radius:.75rem; overflow:hidden; box-shadow:var(--g-shadow); }
.o-guide-picker-header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--g-line); }
.o-guide-picker-title{ font-size:1.05rem; font-weight:600; color:var(--g-ink); margin:0; }
.o-guide-picker-close{ background:none; border:none; font-size:1.15rem; color:var(--g-faint); cursor:pointer; padding:0; line-height:1; }
.o-guide-picker-close:hover{ color:var(--g-ink); }
.o-guide-picker-item{ display:block; width:100%; padding:.85rem 1.25rem; border:none; border-bottom:1px solid var(--g-line); background:#fff; text-align:left; cursor:pointer; }
.o-guide-picker-item:last-child{ border-bottom:none; }
.o-guide-picker-item:hover{ background:var(--g-tint); }
.o-guide-picker-item-name{ font-size:14px; font-weight:600; color:var(--g-ink); margin-bottom:.15rem; }
.o-guide-picker-item-meta{ font-size:11px; color:var(--g-faint); }
.o-guide-picker-item-badge{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:var(--g-radius); margin-right:.4rem; vertical-align:middle; background:var(--g-tint); color:var(--g-muted); }
.o-guide-picker-item-badge--course,.o-guide-picker-item-badge--recipe,.o-guide-picker-item-badge--food,.o-guide-picker-item-badge--cocktail{ background:var(--g-tint); color:var(--g-muted); }

/* =====================================================================
   Phase 12 (UTS) — kon_guide.css RETIREMENT: port the load-bearing legacy
   rules into v2 so this file is SELF-CONTAINED for every guide surface.
   The migration phases (1–11) reskinned colors/atoms but LEFT structural
   base rules (positioning, flex/overflow, the padding the masthead-bleed
   math couples to, the answer ✓/✗ ::after marks, the collection disc state
   bg, the progress-label layout, scroll-hint, picker-list) in kon_guide.css
   and only delta'd on top of them — disabling kon_guide.css proved this
   (the overlay vanished: legacy owned position:fixed/z-index/display).
   These rules re-state ONLY the properties legacy still provides; equal
   specificity + source order completes the earlier phase rules. ZERO-DIFF:
   each value matches the CURRENT effective output (g-ok #198754 / g-bad
   #dc3545 / on-brand #fff are byte-identical to the legacy hexes).
   Rollback = delete this block. Audit/plan: docs/plans/under_the_tuscan_sun/
   kon-guide-css-retirement.md. (Cosmetic legacy leftovers v2's design
   supersedes — completed-step opacity dim, review double-spacing/rings,
   reset red-hover, answer-icon nudge — are intentionally NOT ported; see
   the retirement doc's decision list.)
   ===================================================================== */

/* ---- Lightbox shell: overlay + scroll containers (the load-bearing base) ---- */
.o-guide-lightbox{ position:fixed; inset:0; z-index:9998; display:none; }   /* JS sets inline display:flex on open; [hidden] + this = closed */
.o-guide-lightbox-body{ flex:1; overflow-y:auto; position:relative; }
.o-guide-lightbox-body--learn{ flex:1; overflow:hidden; }                   /* learn body clips; the visible .o-guide-lightbox-page scrolls */
.o-guide-lightbox-page{ overflow-y:auto; }
/* margin auto + padding: the masthead cover bleed (calc(100% + 3rem)) couples to the 1.5rem side padding (mobile 1rem below) */
.o-guide-lightbox-body-inner{ margin:0 auto; padding:1rem 1.5rem 2rem; }
.o-guide-lightbox-page-inner{ margin:0 auto; padding:1.5rem; }
/* Floating close: legacy owned ALL positioning/appearance; v2 only added transition+hover */
.o-guide-lightbox-close{ position:absolute; top:calc(.75rem + env(safe-area-inset-top, 0px)); right:calc(.75rem + env(safe-area-inset-right, 0px)); z-index:10; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.92); color:#333; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.15); }

/* ---- Footer + progress + nav (layout legacy owned; v2 only colored them) ---- */
.o-guide-lightbox-footer{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:.625rem 1.5rem; }
.o-guide-lightbox-footer--learn{ justify-content:space-between; gap:1rem; }
.o-guide-lightbox-footer--review{ justify-content:center; }                 /* JS swaps to this in review mode */
.o-guide-lightbox-progress{ flex:1; margin-right:1rem; }
.o-guide-lightbox-progress-track{ height:5px; border-radius:3px; overflow:hidden; }
.o-guide-lightbox-progress-fill{ height:100%; border-radius:3px; transition:width .4s ease; width:0%; }   /* color from the v2 compound rules above */
.o-guide-lightbox-progress-text{ font-size:.7rem; margin-top:.25rem; display:block; }
.o-guide-lightbox-reset{ background:none; border:none; padding:0; font-size:.7rem; cursor:pointer; text-underline-offset:2px; white-space:nowrap; }
.o-guide-lightbox-nav-btn{ border-radius:.375rem; font-size:.85rem; cursor:pointer; white-space:nowrap; text-align:center; display:flex; align-items:center; justify-content:center; gap:.375rem; }

/* ---- Overview chrome (learn page 0) + section desc ---- */
.o-guide-lightbox-overview-about{ margin-bottom:1rem; }
.o-guide-lightbox-overview-objective{ display:flex; align-items:flex-start; gap:.75rem; padding:.875rem 1rem; margin-bottom:1rem; font-size:.875rem; }
.o-guide-lightbox-overview-objective i{ font-size:1.25rem; margin-top:.125rem; }
.o-guide-lightbox-overview-objective p{ margin:.25rem 0 0; }
.o-guide-lightbox-overview-start{ text-align:center; padding:1.5rem 0; }
.o-guide-lightbox-overview-count{ display:block; margin-top:.5rem; font-size:.75rem; }
.o-guide-lightbox-materials{ margin-bottom:1rem; }
.o-guide-lightbox-steps{ margin-bottom:1rem; }
.o-guide-lightbox-section-desc{ margin-bottom:.75rem; }

/* ---- Scroll hint (sticky fade + bounce) ---- */
.o-guide-lightbox-scroll-hint{ position:sticky; bottom:0; text-align:center; padding:1.5rem 0 .75rem; background:linear-gradient(transparent 0%, rgba(255,255,255,.95) 40%, #fff 100%); font-size:.8rem; transition:opacity .3s ease; }
.o-guide-lightbox-scroll-hint i{ display:block; margin-bottom:.25rem; animation:bounce-down 1.5s ease infinite; }
.o-guide-lightbox-scroll-hint--hidden{ opacity:0; pointer-events:none; transition:opacity .3s ease; }
@keyframes bounce-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ---- Completion score spacing ---- */
.o-guide-lightbox-completion-score{ margin-bottom:.375rem; }

/* ---- Cook/learn answer options: the TRAILING ✓/✗ marks. The lightbox compiler
        does NOT reset the option ::after (only swaps the leading .bi icon), so v2
        DELIBERATELY relies on the legacy ::after for the result mark (Phase 10).
        Port it (recolored to the byte-identical g- tokens) + the reveal transition. ---- */
.o-guide-lightbox-step-answer--correct::after{ content:"\2713"; margin-left:auto; color:var(--g-ok); font-weight:700; font-size:1rem; }
.o-guide-lightbox-step-answer--incorrect::after{ content:"\2717"; margin-left:auto; color:var(--g-bad); font-weight:700; font-size:1rem; }
.g-opt.o-guide-lightbox-step-answer{ transition:background .15s ease, border-color .15s ease; }

/* ---- Learn review section: scroll + centered rows + answer indent ---- */
.o-guide-lightbox-review{ overflow-y:auto; flex:1; }
.o-guide-lightbox-review-lesson{ max-width:650px; margin:0 auto; }
.o-guide-lightbox-review-body p{ margin:0 0 .5rem; }
.o-guide-lightbox-review-answer{ margin-left:calc(var(--g-disc) + .6rem); margin-top:.5rem; }
/* W12: #555 → --g-muted (palette hygiene, same visual weight; Flutter already maps it) */
.o-guide-lightbox-review-answer--revealed{ color:var(--g-muted); font-style:italic; font-size:13.5px; }
/* W12b: review explanation reuses .g-explain (box + its own top margin); this rule only
   aligns it with the answer-pill indent above it. */
.o-guide-lightbox-review-explain{ margin-left:calc(var(--g-disc) + .6rem); }

/* ---- Multi-guide picker list container ---- */
.o-guide-picker-list{ padding:0; margin:0; }
.o-guide-picker-item{ transition:background .15s ease; }

/* ---- Standalone step_collection: the disc STATE bg. v2 neutralized the rings
        (box-shadow:none above) but relied on the legacy !important green/red bg
        for done/answered/wrong. Port it (no !important needed once legacy is gone). ---- */
.o-block-step-collection-item--completed .g-step-num,
.o-block-step-collection-item--answered .g-step-num{ background:var(--g-ok); }
.o-block-step-collection-item--answered-incorrect .g-step-num{ background:var(--g-bad); }

/* ---- Standalone step_collection progress: the label-row layout (no g- class on
        the row) + the count-complete green + the banner-icon size + fill init. ---- */
.o-block-progress-bar-label{ display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:#6c757d; }
.o-block-progress-bar-label-count--green{ color:var(--g-ok); }
.o-block-progress-complete i{ font-size:1rem; }
.o-block-progress-bar-fill.g-progress-fill{ width:0; transition:width .4s ease; }   /* pre-JS init + smooth fill */

/* ---- Reset links: underline offset (compiler-injected; v2 colored them) ---- */
.o-block-progress-reset{ text-underline-offset:2px; }
.o-block-step-reset{ text-underline-offset:2px; }

/* ---- Containers/states with NO g- class (legacy was the only source) ---- */
.o-block-step-answers{ margin-top:.75rem; }          /* standalone answer-group spacing below the prompt */
.o-guide-lightbox-step-answers{ margin-top:.75rem; } /* lightbox answer-group spacing */
.g-opt.o-block-step-answer--interactive{ transition:background .15s ease; }   /* smooths the select-background change v2 defines */
.g-opt.o-guide-lightbox-step-answer--locked{ pointer-events:none; }   /* v2 set opacity:1 but legacy owned the lock */
.o-guide-lightbox-nav-btn:disabled{ cursor:default; }

/* ---- Mobile: the bleed math couples to the reduced inner padding; safe-area footers ---- */
@media (max-width:767.98px){
  .o-guide-lightbox-body-inner{ padding:.75rem 1rem 2rem; }
  .o-guide-lightbox-page-inner{ padding:1rem; }
  .o-guide-lightbox-footer{ padding-bottom:calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .o-guide-lightbox-footer--learn{ padding-bottom:calc(.75rem + env(safe-area-inset-bottom, 0px)); }
  .o-guide-lightbox-nav-btn{ min-height:44px; }
  .o-guide-lightbox-close{ top:calc(.5rem + env(safe-area-inset-top, 0px)); right:calc(.5rem + env(safe-area-inset-right, 0px)); width:32px; height:32px; font-size:.875rem; }
}