/* ═══════════════════════════════════════════════════════════════════════
   assets/docs/tutorial.css — tutorial snapshot primitives
   ─────────────────────────────────────────────────────────────────────
   SPEC-HLP-4 P1 (2026-08-22) — SPLIT OUT of docs.css so the help DRAWER
   can load it without dragging the whole hub stylesheet onto every app
   page. The drawer used to load nothing, which is why a tutorial demo
   opened from a help icon rendered with no styles of its own — and worse,
   picked up the HOST page's rules, because the demo markup deliberately
   reuses real app class names (.dose-card, .tod-group-header, …). Opening
   the protocol article from protocol.html let that page paint the demo.

   THE SCOPING CONTRACT, which is what makes this file safe to load
   anywhere: EVERY rule below is scoped under `.tutorial-snapshot`. Nothing
   here can reach a real component, and a host page's own `.dose-card`
   rule loses to `.tutorial-snapshot .dose-card` on specificity.
   tests/hlp4-help-render.test.js fails the build on an unscoped rule.

   BREAKPOINTS ARE @container, NOT @media. These layouts care about the
   width of the PANEL they are in, not the window. As @media they never
   fired in a 560px drawer on a 1440px monitor — the demo took its
   widescreen layout inside a narrow panel and overflowed, which is the
   bulk of what the owner's screenshot showed. `.tutorial-snapshot` is the
   container; the queries below read its inline size.

   Source of truth for visual parity is the real component's own CSS; when
   that changes, update these rules. Staleness is the known cost of
   snapshot tutorials — see SPEC-HLP-4 P4 for what that cost came to.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SPEC-HLP-4 P1 — the isolation reset ────────────────────────────────
   Loading this file was not enough on its own. The demo markup reuses real
   app class names, and a host page's rule still wins for every property
   THIS file does not happen to declare. protocol.html sets
   `.dose-card { display: flex; flex-wrap: wrap }` and
   `.dose-card-header { order: 1 }` (protocol.html:4301) — neither is a
   property the snapshot rules below declare, so opening the protocol
   article from protocol.html re-laid-out the whole demo: dose stats to the
   left of the compound name, controls in the wrong order. Measured in a
   browser probe, not guessed.

   `all: revert` drops every AUTHOR declaration on these elements back to
   the user-agent default, so nothing a host page says can reach inside a
   snapshot. The 545 rules below then build the component up from a known
   floor. Two things make this safe:

     - It sits BEFORE those rules and at lower specificity (0,1,0 vs the
       0,2,0 of `.tutorial-snapshot .dose-card`), so it never fights them.
     - `revert` on an INHERITED property falls back to the inherited value,
       not to an initial one — so the theme colour and font set on
       `.tutorial-snapshot` just below still flow down to every child.

   SVG is excluded: reverting `fill`/`stroke` on icon internals would strip
   the very attributes that draw them. The exclusion is wrapped in `:where()`
   so it contributes NO specificity — written as `:not(svg):not(svg *)` the
   reset scored (0,1,2) and outranked the snapshot's own chrome rules
   (`.tutorial-snapshot-header`, `.tutorial-reset-btn`, `.tod-group-header`,
   all (0,1,0)), stripping the demo frame it was meant to protect.
   ───────────────────────────────────────────────────────────────────── */
.tutorial-snapshot *:where(:not(svg, svg *)) { all: revert; }

.tutorial-snapshot {
  margin: 18px 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
  overflow: hidden;
  /* SPEC-HLP-4 P1 — the query container for every breakpoint in this file.
     `inline-size` so the queries read width only; a size container would need
     the height to be independent of its contents, which it is not. */
  container-type: inline-size;
  container-name: tutorial;
  /* The floor the reset above leaves behind: colour and font are inherited
     properties, so setting them here carries them to every child that does
     not override them. Without this a snapshot would render UA-black text
     on a dark theme. */
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
}
.tutorial-snapshot-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(108, 116, 204, 0.08);
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot-label {
  font-size: 0.68rem; font-weight: 700;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.tutorial-reset-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tutorial-reset-btn:hover {
  background: var(--accent);
  color: #fff;
}
.tutorial-snapshot-body {
  padding: 16px;
  background: var(--bg);
}

/* .tutorial-annotations container — now houses hover/tap
   .tutorial-annotation cards (new format). The earlier <ol>/<li>
   numbered-marker format was dropped in the 2026 polish pass, as
   were the related .tutorial-marker rules. */
.tutorial-annotations {
  list-style: none; padding: 0; margin: 18px 0 6px;
}

/* ─── New-format annotation entries (hover/tap highlight mechanism) ──
   Session 4 polish: replaces the numbered-marker overlay pattern with
   descriptive labels that cross-highlight snapshot elements on hover,
   focus, or tap. Each entry is a focusable card; its description
   explains a feature, and interacting with it lights up the matching
   element(s) in the snapshot above via [data-annotation-id]. */
.tutorial-annotation {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease;
}
.tutorial-annotation:last-child { margin-bottom: 0; }
.tutorial-annotation:hover,
.tutorial-annotation:focus-visible,
.tutorial-annotation.is-active,
.tutorial-annotation.is-tap-active {
  background: rgba(108, 116, 204, 0.08);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(108, 116, 204, 0.25);
}
.tutorial-annotation strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 3px;
}
.tutorial-annotation p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}
.tutorial-annotation p + p { margin-top: 6px; }

/* Snapshot-side highlight: applied to elements carrying
   `data-annotation-id` whenever their paired annotation is hovered,
   focused, or tapped. Outline + soft glow; no layout shift because
   both outline and box-shadow render outside the element's box. */
/* SPEC-HLP-4 P5 — scoped under .tutorial-snapshot like everything else in this
   file. Every element that carries data-annotation-id IS inside a snapshot (the
   annotation CARDS live outside, but they are targeted by .tutorial-annotation),
   so nothing is lost by scoping it, and the file's one-line contract — no rule
   here can reach a real component — stays absolute rather than gaining an
   exception a later reader has to trust. */
.tutorial-snapshot [data-annotation-id] {
  transition: box-shadow .15s ease, outline-color .15s ease;
}
.tutorial-snapshot [data-annotation-id].is-highlighted {
  outline: 2px solid rgba(108, 116, 204, 0.4);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(108, 116, 204, 0.15);
  /* Ensure the element sits above its siblings visually so the glow
     isn't clipped by subsequent rows with solid backgrounds. */
  position: relative;
  z-index: 1;
}

/* Empty-action placeholder — shows up on the member-added snapshot
   row where the Eaten/Remove stack would sit, just hosting marker #4
   so annotations can still point at "the row with no buttons". */
/* Placeholder div that holds column space on member-added rows
   where the real Today view renders nothing. min-width matches
   the width of the .meal-item-status-col on scheduled rows so
   the kcal numbers stay aligned top-to-bottom across all rows.
   Now used as a data-annotation-id hook so the "no buttons on
   this row" annotation can highlight the empty column. */
.tutorial-no-actions {
  flex-shrink: 0; align-self: center;
  min-width: 84px;
  display: flex; align-items: center; justify-content: center;
}

/* Row-level fade-out when a Remove button is clicked in the demo.
   Tutorial JS sets `.fading` to trigger the transition before hiding. */
.tutorial-snapshot .meal-item-row {
  transition: opacity .25s ease, transform .25s ease;
}
.tutorial-snapshot .meal-item-row.fading {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped meal-card visuals — a trimmed copy of the real rules in
   nutrition.html's inline <style> block. Only the classes used by the
   Session 3 snapshot are mirrored. Keep in sync when the real UI
   changes.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .meal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.tutorial-snapshot .meal-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 8px;
}
.tutorial-snapshot .meal-header-line {
  font-weight: 700; font-size: 0.96rem; color: var(--text);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.tutorial-snapshot .meal-cals { font-weight: 700; color: var(--text); }
.tutorial-snapshot .meal-pending-chip {
  display: inline-flex; align-items: center;
  background: rgba(200,155,60,0.15); color: #c89b3c;
  border: 1px solid rgba(200,155,60,0.4);
  border-radius: 999px; padding: 0 8px;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.tutorial-snapshot .meal-card-body {
  display: flex; flex-direction: column; gap: 8px;
}

/* Item row — mirrors .meal-item-row in nutrition.html */
.tutorial-snapshot .meal-item-row {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}
.tutorial-snapshot .meal-item-row:first-child { border-top: none; padding-top: 0; }
.tutorial-snapshot .meal-item-row.is-pending { opacity: 0.78; }

.tutorial-snapshot .meal-item-icon {
  width: 34px; height: 34px; border-radius: 7px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; overflow: hidden;
}
.tutorial-snapshot .meal-item-main { flex: 1; min-width: 0; }
.tutorial-snapshot .meal-item-name {
  color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tutorial-snapshot .meal-item-source-row { margin-top: 2px; }
.tutorial-snapshot .meal-item-meta {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 1px;
}
.tutorial-snapshot .meal-item-macros {
  font-size: 0.7rem; color: var(--text-muted); margin-top: 2px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
}
.tutorial-snapshot .meal-item-macros-unit {
  color: var(--text-dim); font-size: 0.64rem; margin-left: 1px;
}
.tutorial-snapshot .meal-item-kcal {
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  font-size: 0.82rem; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.tutorial-snapshot .meal-item-status-mark {
  font-size: 0.82rem; font-weight: 700;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.tutorial-snapshot .meal-item-status-mark.eaten   { color: #3d9e8c; }

/* Source pills — three variants mirroring nutrition.html */
.tutorial-snapshot .source-pill {
  display: inline-flex; align-items: center;
  font-size: 0.64rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap; vertical-align: baseline;
  border: 1px solid transparent;
}
.tutorial-snapshot .source-pill.coach {
  background: rgba(108,116,204,0.12); color: var(--accent);
  border-color: rgba(108,116,204,0.4);
}
.tutorial-snapshot .source-pill.self {
  background: rgba(90,163,216,0.14); color: #5aa3d8;
  border-color: rgba(90,163,216,0.4);
}
.tutorial-snapshot .source-pill.manual {
  background: var(--surface2); color: var(--text-muted);
  border-color: var(--border);
}

/* Stacked Eaten/Remove buttons */
.tutorial-snapshot .meal-item-status-col {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0; align-self: center;
}
.tutorial-snapshot .status-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; line-height: 1.2;
  white-space: nowrap;
  min-width: 84px; text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.tutorial-snapshot .status-btn.eaten:hover {
  color: #3d9e8c; border-color: rgba(61,158,140,0.55);
  background: rgba(61,158,140,0.08);
}
.tutorial-snapshot .status-btn.eaten.active {
  background: #3d9e8c; color: #fff; border-color: #3d9e8c;
}
.tutorial-snapshot .status-btn.remove:hover {
  color: #cc6b6b; border-color: rgba(204,107,107,0.55);
  background: rgba(204,107,107,0.08);
}

/* Responsive — on narrow viewports the status column wraps under the
   row content. Matches what the real Today view does for small screens. */
@container tutorial (max-width: 520px) {
  .tutorial-snapshot .meal-item-row { flex-wrap: wrap; }
  .tutorial-snapshot .meal-item-status-col {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .tutorial-snapshot .tutorial-no-actions {
    width: 100%; justify-content: flex-end; margin-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Jump-link TOC (inline within a tutorial article)
   ─────────────────────────────────────────────────────────────────────
   Sits near the top of long tutorials, giving members a compact way to
   skip between sections. Intentionally low-key (not a sidebar, not a
   sticky element) so it reads as part of the article rather than a
   separate piece of chrome.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-toc {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 14px 0 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 0.86rem;
  line-height: 1.5;
}
.tutorial-toc-label {
  color: var(--text-muted); font-weight: 600;
  margin-right: 2px;
}
.tutorial-toc a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tutorial-toc a:hover { border-bottom-color: var(--accent); }
.tutorial-toc-sep { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   Source-pill row (small labeled-variants snapshot)
   ─────────────────────────────────────────────────────────────────────
   Lighter-touch snapshot than .tutorial-snapshot — just a row of the
   three source-pill flavors with a one-liner under each. Used in
   workflow-overview articles where a full meal-card snapshot would be
   overkill for the point being made.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-pill-row {
  display: flex; flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  margin: 14px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tutorial-pill-row-item {
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 150px;
}
.tutorial-pill-row-label {
  font-size: 0.8rem; color: var(--text-muted);
  line-height: 1.45;
}

/* Reuse the scoped .source-pill rule set from .tutorial-snapshot — we
   need the same visuals outside that wrapper in .tutorial-pill-row. */
.tutorial-pill-row .source-pill {
  display: inline-flex; align-items: center;
  font-size: 0.64rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap; vertical-align: baseline;
  border: 1px solid transparent;
  align-self: flex-start;
}
.tutorial-pill-row .source-pill.coach {
  background: rgba(108,116,204,0.12); color: var(--accent);
  border-color: rgba(108,116,204,0.4);
}
.tutorial-pill-row .source-pill.self {
  background: rgba(90,163,216,0.14); color: #5aa3d8;
  border-color: rgba(90,163,216,0.4);
}
.tutorial-pill-row .source-pill.manual {
  background: var(--surface2); color: var(--text-muted);
  border-color: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped dose-card visuals — a trimmed copy of the real rules in
   protocol.html's inline <style> block. Used by the protocol/today-logging
   tutorial snapshot. Classes mirrored one-to-one so the markup stays
   faithful to what the real app renders. Keep in sync if the real UI
   changes — staleness is the known cost of snapshot tutorials.

   Deliberate simplifications for the snapshot:
   - `.dose-card-body` is always visible (no max-height collapse) because
     the tutorial demos Taken/Skip which live in both header (Taken) and
     expanded body (Skip). A collapsed-by-default card would hide Skip.
   - No expand/collapse chevron interaction — the chevron is decorative
     here. Section 3's narrative explains that real cards collapse.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .tod-group-header {
  font-size: 0.75rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 4px 0 10px;
  display: flex; align-items: center;
}

.tutorial-snapshot .dose-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.tutorial-snapshot .dose-card:last-child { margin-bottom: 0; }
.tutorial-snapshot .dose-card.taken {
  border-color: rgba(98,111,150,0.4);
  background: rgba(98,111,150,0.04);
  opacity: 0.78;
}
.tutorial-snapshot .dose-card.skipped {
  border-color: rgba(249,115,22,0.3);
  background: rgba(249,115,22,0.03);
  opacity: 0.82;
}

.tutorial-snapshot .dose-card-header {
  display: flex; align-items: center; gap: 10px;
  user-select: none;
}
.tutorial-snapshot .dose-card-chevron {
  font-size: 0.72rem; color: var(--text-dim);
  flex-shrink: 0; width: 12px; text-align: center;
}
.tutorial-snapshot .dose-card-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
  background: rgba(76,81,153,0.12);
  color: var(--accent);
}
.tutorial-snapshot .dose-card-icon[data-icon-kind="supplement"] {
  background: rgba(16,185,129,0.1);
  color: #10b981;
}
.tutorial-snapshot .dose-card-header-info { flex: 1; min-width: 0; }
.tutorial-snapshot .dose-card-name {
  font-size: 0.94rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
.tutorial-snapshot .dose-card-meta {
  font-size: 0.78rem; color: var(--text-dim);
  margin-top: 2px;
}

.tutorial-snapshot .draw-hero {
  background: rgba(98,111,150,0.12);
  border: 1.5px solid rgba(98,111,150,0.4);
  border-radius: 9px;
  padding: 5px 10px;
  text-align: center; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.tutorial-snapshot .draw-hero-val {
  font-size: 1.1rem; font-weight: 800;
  color: #3d9e8c; line-height: 1;
}
.tutorial-snapshot .draw-hero-lbl {
  font-size: 0.55rem; font-weight: 700;
  color: #3d9e8c; opacity: 0.85;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 2px;
}

.tutorial-snapshot .mark-taken-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.tutorial-snapshot .mark-taken-btn:hover {
  border-color: #10b981; color: #10b981;
}
.tutorial-snapshot .mark-taken-btn.done {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.45);
  color: #10b981;
}
.tutorial-snapshot .mark-taken-btn.skipped {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}

.tutorial-snapshot .dose-card-body {
  /* Override the real app's collapsed-by-default rule so the tutorial
     snapshot always shows the body. See header comment above. */
  max-height: none; overflow: visible;
}
.tutorial-snapshot .dose-card-details {
  display: flex; gap: 12px;
  justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap; align-items: flex-start;
}
.tutorial-snapshot .dose-card-details-left {
  display: flex; gap: 16px; align-items: flex-start;
}
.tutorial-snapshot .dose-card-details-right {
  display: flex; flex-direction: column;
  gap: 5px; align-items: flex-end;
}
.tutorial-snapshot .dose-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.tutorial-snapshot .dose-stat-val {
  font-size: 0.95rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .dose-stat-lbl {
  font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-dim);
}

.tutorial-snapshot .mark-skip-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem; font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.tutorial-snapshot .mark-skip-btn:hover {
  border-color: #f97316; color: #f97316;
}
.tutorial-snapshot .mark-skip-btn.done {
  background: rgba(249,115,22,0.08);
  border-color: rgba(249,115,22,0.4);
  color: #f97316;
}

.tutorial-snapshot .badge-pill {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 3px 8px; border-radius: 20px;
  display: inline-block;
  border: 1px solid transparent;
}
.tutorial-snapshot .badge-pill.badge-on {
  background: rgba(16,185,129,0.15);
  color: #10b981;
  border-color: rgba(16,185,129,0.3);
}
.tutorial-snapshot .badge-pill.badge-cont {
  background: rgba(16,185,129,0.1);
  color: #10b981;
  border-color: rgba(16,185,129,0.25);
}
.tutorial-snapshot .badge-pill.badge-single {
  background: rgba(76,81,153,0.1);
  color: var(--accent);
  border-color: rgba(76,81,153,0.25);
}
.tutorial-snapshot .badge-pill.badge-off {
  background: rgba(92,97,128,0.12);
  color: var(--text-dim);
  border-color: var(--border);
}
.tutorial-snapshot .dose-tod-badge {
  font-size: 0.7rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--text-muted);
  text-transform: capitalize;
  white-space: nowrap;
}

.tutorial-snapshot .dose-journal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tutorial-snapshot .dose-journal-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tutorial-snapshot .dose-journal-row {
  display: flex; justify-content: flex-end;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped journal-drawer visuals — a trimmed copy of the real rules in
   protocol.html. Used by the protocol/today-logging tutorial's
   "Logging how things went" section. Deliberately STATIC — the snapshot
   is a visual illustration, not an interactive demo (no overlay, no
   slide-in, no save handler).
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .tutorial-snapshot-body.tutorial-snapshot-journal {
  /* Put the drawer on a slightly-darker backdrop so it visually reads
     as a drawer-over-page, not a flat card. */
  background: var(--surface2);
  padding: 20px;
}
.tutorial-snapshot .jd-drawer-static {
  max-width: 460px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 10px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
}
.tutorial-snapshot .jd-drag-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 4px;
}
.tutorial-snapshot .jd-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot .jd-header-name {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .jd-header-date {
  font-size: 0.78rem; color: var(--text-muted);
  margin-top: 2px;
}
.tutorial-snapshot .jd-close-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit; font-size: 1rem;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
}
.tutorial-snapshot .jd-close-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.tutorial-snapshot .jd-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px 18px;
}
.tutorial-snapshot .jd-field-label {
  font-size: 0.68rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.tutorial-snapshot .jd-textarea,
.tutorial-snapshot .jd-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem; line-height: 1.45;
  resize: none;
}
.tutorial-snapshot .jd-textarea[readonly],
.tutorial-snapshot .jd-input[readonly] {
  cursor: default;
}
.tutorial-snapshot .jd-emoji-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tutorial-snapshot .jd-emoji-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, transform .08s;
}
.tutorial-snapshot .jd-emoji-btn:hover {
  border-color: var(--accent);
}
.tutorial-snapshot .jd-emoji-btn.selected {
  background: rgba(108,116,204,0.14);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Compounds sidebar + detail panel + dual-tab visuals
   Used by protocol/compound-setup. Mirrors the .pl-*, .pp-*, .rp-*,
   .cm-*, and .day-* classes in protocol.html, scoped to
   .tutorial-snapshot so the rules can't leak onto the real page when
   docs.css is loaded (nutrition.html, protocol.html both include it
   for the HelpIcon styling).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sidebar snapshot (Compounds list) ───────────────────────────── */
.tutorial-snapshot .pl-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  max-width: 340px;
}
.tutorial-snapshot .pl-section-label {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim);
  padding: 10px 10px 4px;
  font-weight: 700;
}
.tutorial-snapshot .pl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: default;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.tutorial-snapshot .pl-item.active {
  background: rgba(76,81,153,0.1);
  border-color: rgba(76,81,153,0.3);
}
.tutorial-snapshot .pl-item-info { flex: 1; min-width: 0; }
.tutorial-snapshot .pl-item-name {
  font-size: 0.84rem; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tutorial-snapshot .pl-item-meta {
  font-size: 0.67rem;
  color: var(--text-dim);
  margin-top: 1px;
}
.tutorial-snapshot .pl-item-badge {
  font-size: 0.58rem; font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(98,111,150,0.12);
  color: #10b981;
  border: 1px solid rgba(98,111,150,0.3);
}
.tutorial-snapshot .pl-item-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.tutorial-snapshot .pl-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.tutorial-snapshot .add-item-btn {
  display: block; width: 100%;
  background: var(--surface2);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0 8px;
  font-family: inherit; font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.tutorial-snapshot .add-item-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(76,81,153,0.04);
}

/* ── Calc-modal snapshot (simplified 3-step form) ─────────────────── */
.tutorial-snapshot .cm-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 520px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.tutorial-snapshot .cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tutorial-snapshot .cm-title {
  font-size: 0.95rem; font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.tutorial-snapshot .cm-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.tutorial-snapshot .cm-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.tutorial-snapshot .cm-step {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  border-top-width: 3px;
}
.tutorial-snapshot .cm-step-1 { border-top-color: var(--accent); }
.tutorial-snapshot .cm-step-2 { border-top-color: #22d3ee; }
.tutorial-snapshot .cm-step-3 { border-top-color: #7c3aed; }
.tutorial-snapshot .cm-step-label {
  display: flex; align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tutorial-snapshot .cm-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800;
  color: #fff; flex-shrink: 0;
}
.tutorial-snapshot .cm-step-1 .cm-step-num { background: var(--accent); }
.tutorial-snapshot .cm-step-2 .cm-step-num { background: #22d3ee; }
.tutorial-snapshot .cm-step-3 .cm-step-num { background: #7c3aed; }
.tutorial-snapshot .cm-step-title {
  font-size: 0.74rem; font-weight: 700;
  color: var(--text);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tutorial-snapshot .cm-step-hint {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: none; letter-spacing: 0; font-weight: 400;
  margin-left: 6px;
}
.tutorial-snapshot .cm-custom-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.tutorial-snapshot .cm-custom-lbl {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.tutorial-snapshot .cm-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem; font-weight: 600;
  width: 100px;
  -moz-appearance: textfield;
}
.tutorial-snapshot .cm-input::-webkit-outer-spin-button,
.tutorial-snapshot .cm-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tutorial-snapshot .cm-input:focus {
  outline: none;
  border-color: var(--accent);
}
.tutorial-snapshot .cm-result-row {
  display: flex; justify-content: space-between;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(16,185,129,0.08);
  border: 1.5px solid rgba(16,185,129,0.35);
  border-radius: 10px;
}
.tutorial-snapshot .cm-result-lbl {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #10b981;
}
.tutorial-snapshot .cm-result-val {
  font-size: 1.25rem; font-weight: 800;
  color: #10b981;
  line-height: 1;
}
.tutorial-snapshot .cm-result-sub {
  font-size: 0.68rem;
  color: #10b981; opacity: 0.8;
  font-weight: 600;
  margin-top: 2px;
}

/* ── Day picker snapshot ─────────────────────────────────────────── */
.tutorial-snapshot .config-section { margin-bottom: 16px; }
.tutorial-snapshot .config-section:last-child { margin-bottom: 0; }
.tutorial-snapshot .config-label {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex; align-items: center; flex-wrap: wrap;
}
.tutorial-snapshot .day-picker-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none; letter-spacing: 0;
  margin-left: 6px;
}
.tutorial-snapshot .day-picker-hint.satisfied { color: #10b981; }
.tutorial-snapshot .day-picker {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tutorial-snapshot .day-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.72rem; font-weight: 700;
  cursor: default;
  flex-shrink: 0;
  font-family: inherit;
}
.tutorial-snapshot .day-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Time-of-day readout — matches .rp-tod-row / .dose-tod-badge styling */
.tutorial-snapshot .rp-tod-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 8px;
}
.tutorial-snapshot .rp-tod-with-meal {
  color: #f59e0b;
  font-weight: 600;
  margin-left: 4px;
}

/* ── Phase-mode triptych ─────────────────────────────────────────── */
.tutorial-snapshot .phase-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@container tutorial (max-width: 600px) {
  .tutorial-snapshot .phase-triptych { grid-template-columns: 1fr; }
}
.tutorial-snapshot .phase-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.tutorial-snapshot .phase-card-title {
  font-size: 0.9rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .phase-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Dual-tab (coach-vs-custom) ──────────────────────────────────── */
.tutorial-snapshot .pp-proto-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
}
.tutorial-snapshot .pp-ptab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 0.88rem; font-weight: 700;
  color: var(--text-dim);
  cursor: default;
  font-family: inherit;
  text-align: center;
}
.tutorial-snapshot .pp-ptab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 6px rgba(0,0,0,0.14);
}
.tutorial-snapshot .pp-ptab.my-tab.active { color: #10b981; }
.tutorial-snapshot .pp-tab-dot {
  font-size: 0.62rem;
  margin-right: 4px;
  vertical-align: 1px;
}
.tutorial-snapshot .pp-proto-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.tutorial-snapshot .pp-my-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.22);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tutorial-snapshot .pp-my-hdr-left {
  display: flex; flex-direction: column; gap: 2px;
}
.tutorial-snapshot .pp-my-hdr-status {
  font-size: 0.78rem; font-weight: 700;
  color: #10b981;
}
.tutorial-snapshot .pp-my-hdr-right {
  display: flex; align-items: center; gap: 10px;
}
.tutorial-snapshot .pp-my-toggle-lbl {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted);
}
.tutorial-snapshot .pp-remove-link {
  background: none; border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: default;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-align: left;
}
/* Static toggle visual — looks like the real .manage-toggle but
   doesn't wire to anything in the snapshot. */
.tutorial-snapshot .manage-toggle {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
  display: inline-block;
}
.tutorial-snapshot .manage-toggle-track {
  position: absolute; inset: 0;
  background: rgba(16,185,129,0.18);
  border: 1px solid #10b981;
  border-radius: 22px;
}
.tutorial-snapshot .manage-toggle-track::after {
  content: ''; position: absolute;
  left: 21px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: #10b981;
  border-radius: 50%;
}

/* Read-only protocol preview card used inside the Recommended panel */
.tutorial-snapshot .rec-proto-preview {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top: 3px solid #626f96;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.tutorial-snapshot .rp-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tutorial-snapshot .rp-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  text-align: center;
  flex: 1;
  min-width: 70px;
}
.tutorial-snapshot .rp-stat-lbl {
  font-size: 0.56rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  margin-bottom: 3px;
}
.tutorial-snapshot .rp-stat-val {
  font-size: 0.92rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .rp-stat-freq {
  border-color: rgba(76,81,153,0.4);
  background: rgba(76,81,153,0.07);
  flex: 1.4;
}
.tutorial-snapshot .rp-stat-freq .rp-stat-lbl { color: var(--accent); }
.tutorial-snapshot .rp-stat-freq .rp-stat-val { font-size: 1.05rem; color: var(--accent); }
.tutorial-snapshot .rp-stat-draw {
  border-color: rgba(98,111,150,0.45);
  background: rgba(98,111,150,0.08);
  flex: 1.4;
}
.tutorial-snapshot .rp-stat-draw .rp-stat-lbl { color: #10b981; }
.tutorial-snapshot .rp-stat-draw .rp-stat-val { font-size: 1.2rem; color: #10b981; }
.tutorial-snapshot .rp-stat-draw .rp-stat-sub {
  font-size: 0.6rem; color: #10b981;
  opacity: 0.8; font-weight: 600;
  margin-top: -2px;
}
.tutorial-snapshot .coach-note {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(76,81,153,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Workouts Today visuals (consistency header + Today card)
   Mirrors the `.consistency-*`, `.next-wk-*`, `.freestyle-btn`,
   `.state-c-*` classes in workouts.html. Used by
   workouts/today-overview. Scope under .tutorial-snapshot so rules
   can't leak onto workouts.html (which will include docs.css for the
   <help-icon> styling).
   ═══════════════════════════════════════════════════════════════════════ */

/* Consistency header */
.tutorial-snapshot .consistency-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
}
.tutorial-snapshot .consistency-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(108,116,204,0.12);
  color: var(--accent);
}
.tutorial-snapshot .consistency-body { flex: 1; min-width: 0; }
.tutorial-snapshot .consistency-headline {
  font-size: 0.94rem; font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.tutorial-snapshot .consistency-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.tutorial-snapshot .consistency-meta {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-muted);
  text-transform: uppercase;
}
/* State variants: one-day = neutral, long-gap = amber tint */
.tutorial-snapshot .consistency-header.consistency-one-day .consistency-icon {
  background: rgba(245,158,11,0.12); color: #f59e0b;
}

/* Freestyle launch button */
.tutorial-snapshot .freestyle-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: default;
  color: var(--accent);
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  margin-bottom: 10px;
}
.tutorial-snapshot .freestyle-btn svg { color: var(--accent); flex-shrink: 0; }
.tutorial-snapshot .freestyle-btn-hint {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.76rem;
}

/* Today card */
.tutorial-snapshot .next-wk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tutorial-snapshot .next-wk-card:last-child { margin-bottom: 0; }
.tutorial-snapshot .next-wk-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px 10px;
}
.tutorial-snapshot .next-wk-hd-main { flex: 1; min-width: 0; }
.tutorial-snapshot .next-wk-label {
  font-size: 0.68rem; font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tutorial-snapshot .next-wk-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.tutorial-snapshot .next-wk-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Muscle chips row with add-exercise button */
.tutorial-snapshot .next-wk-muscles-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 18px 10px;
  flex-wrap: wrap;
}
.tutorial-snapshot .next-wk-muscles {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1;
}
.tutorial-snapshot .next-wk-muscle-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--text-muted);
}
.tutorial-snapshot .next-wk-add-ex-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: inherit; font-size: 0.74rem; font-weight: 600;
  cursor: default;
  flex-shrink: 0;
}

/* Gym pill */
.tutorial-snapshot .gym-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: inherit; font-size: 0.76rem; font-weight: 600;
  cursor: default;
  flex-shrink: 0;
}
.tutorial-snapshot .gym-pill svg { color: var(--text-muted); flex-shrink: 0; }

/* Exercise rows */
.tutorial-snapshot .next-wk-exs {
  padding: 0 18px 12px;
}
.tutorial-snapshot .next-wk-ex-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.tutorial-snapshot .next-wk-ex-row:first-child {
  border-top: none;
}
.tutorial-snapshot .next-wk-ex-drag {
  width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.tutorial-snapshot .next-wk-ex-thumb {
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--surface2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  position: relative;
}
.tutorial-snapshot .next-wk-ex-main { flex: 1; min-width: 0; }
.tutorial-snapshot .next-wk-ex-name {
  font-size: 0.88rem; font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tutorial-snapshot .next-wk-ex-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tutorial-snapshot .next-wk-ex-actions {
  display: flex; gap: 5px;
  flex-shrink: 0;
}
.tutorial-snapshot .next-wk-ex-action {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: default;
  font-family: inherit;
}
.tutorial-snapshot .next-wk-ex-action:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}
.tutorial-snapshot .next-wk-ex-action.danger:hover {
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.05);
}

/* Card CTAs */
.tutorial-snapshot .next-wk-cta {
  display: flex; gap: 8px;
  padding: 8px 18px 14px;
}
.tutorial-snapshot .btn-primary,
.tutorial-snapshot .btn-secondary {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  cursor: default;
  text-align: center;
}
.tutorial-snapshot .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.tutorial-snapshot .btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Coach-assigned variant: label text gets a subtle coach tint */
.tutorial-snapshot .next-wk-label.label-coach {
  color: #10b981;
}

/* Completed state rows */
.tutorial-snapshot .state-c-ex-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.tutorial-snapshot .state-c-ex-row:first-child { border-top: none; }
.tutorial-snapshot .state-c-ex-thumb {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: var(--surface2);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.tutorial-snapshot .state-c-ex-main { flex: 1; min-width: 0; }
.tutorial-snapshot .state-c-ex-name {
  font-size: 0.86rem; font-weight: 600;
  color: var(--text);
}
.tutorial-snapshot .state-c-ex-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped active-session visuals (takeover overlay innards)
   Trimmed copy of the .ast-* classes in active-session-takeover.js. The
   snapshot renders inside the docs article, not the real takeover
   overlay, so the dark-mode session colors are mapped back to the
   tutorial's surface/accent tokens for visual consistency with other
   snapshots.
   ═══════════════════════════════════════════════════════════════════════ */

/* Station list — used by the station stack snapshot */
.tutorial-snapshot .ast-stations-stack {
  display: flex; flex-direction: column;
  gap: 8px;
}
.tutorial-snapshot .ast-stations-stack .ast-station-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.tutorial-snapshot .ast-stations-stack .ast-station-card.completed {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.25);
}
.tutorial-snapshot .ast-stations-stack .ast-station-card.upcoming {
  opacity: 0.65;
}
.tutorial-snapshot .ast-stations-stack .ast-station-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tutorial-snapshot .ast-stations-stack .ast-station-card.completed .ast-station-badge {
  background: #10b981;
  color: #fff;
}
.tutorial-snapshot .ast-stations-stack .ast-station-card.active .ast-station-badge {
  background: rgba(108,116,204,0.12);
  color: var(--accent);
  border: 2px solid var(--accent);
}
.tutorial-snapshot .ast-stations-stack .ast-station-info { flex: 1; min-width: 0; }
.tutorial-snapshot .ast-stations-stack .ast-station-title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .ast-stations-stack .ast-station-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tutorial-snapshot .ast-stations-stack .ast-station-state-tag {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.tutorial-snapshot .ast-stations-stack .ast-station-state-tag.completed {
  background: rgba(16,185,129,0.15);
  color: #10b981;
}
.tutorial-snapshot .ast-stations-stack .ast-station-state-tag.active {
  background: rgba(108,116,204,0.12);
  color: var(--accent);
}
.tutorial-snapshot .ast-stations-stack .ast-station-state-tag.upcoming {
  background: var(--surface2);
  color: var(--text-dim);
}

/* Set rows — primary set-logging snapshot */
.tutorial-snapshot .ast-set-rows {
  display: flex; flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.tutorial-snapshot .ast-set-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.tutorial-snapshot .ast-set-row .set-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid transparent;
}
.tutorial-snapshot .ast-set-row.completed .set-badge {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.tutorial-snapshot .ast-set-row.focused .set-badge {
  background: rgba(108,116,204,0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.tutorial-snapshot .ast-set-row.pending .set-badge {
  opacity: 0.55;
}
.tutorial-snapshot .ast-set-col {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tutorial-snapshot .ast-set-col label {
  font-size: 0.62rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tutorial-snapshot .ast-stepper {
  display: flex; align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.tutorial-snapshot .ast-stepper-btn {
  background: var(--surface2);
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem; font-weight: 700;
  font-family: inherit;
  width: 30px;
  cursor: default;
}
.tutorial-snapshot .ast-stepper input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem; font-weight: 600;
  text-align: center;
  padding: 8px 4px;
  outline: none;
  -moz-appearance: textfield;
}
.tutorial-snapshot .ast-stepper input::-webkit-outer-spin-button,
.tutorial-snapshot .ast-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tutorial-snapshot .ast-set-row.completed .ast-stepper input {
  opacity: 0.7;
}
.tutorial-snapshot .ast-set-row.pending input { opacity: 0.4; }

.tutorial-snapshot .ast-log-set {
  margin-top: 10px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  cursor: default;
  width: 100%;
}

/* Rest timer banner */
.tutorial-snapshot .ast-rest-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--accent), #6d7bc9);
  color: #fff;
  border-radius: 10px;
}
.tutorial-snapshot .ast-rest-time {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.4rem;
}
.tutorial-snapshot .ast-rest-label {
  flex: 1;
  font-size: 0.82rem;
  opacity: 0.9;
}
.tutorial-snapshot .ast-rest-btn {
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-weight: 700; font-size: 0.82rem;
  cursor: default;
}

/* RIR prompt */
.tutorial-snapshot .ast-rir-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.tutorial-snapshot .ast-rir-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.tutorial-snapshot .ast-rir-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .ast-rir-q {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.tutorial-snapshot .ast-rir-btns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.tutorial-snapshot .ast-rir-btn {
  min-height: 56px;
  border: none;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.15rem;
  font-family: inherit;
  cursor: default;
}
.tutorial-snapshot .ast-rir-btn.selected {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.tutorial-snapshot .ast-rir-caption {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

/* Finish confirmation dialog */
.tutorial-snapshot .ast-finish-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 380px;
  margin: 0 auto;
}
.tutorial-snapshot .ast-finish-dialog-title {
  font-size: 1.02rem; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.tutorial-snapshot .ast-finish-dialog-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.tutorial-snapshot .ast-finish-dialog-row {
  display: flex; gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Journal visuals — checkin, daily note + structured, per-item
   rating, and calendar history. Mirrors `.j-*` classes in journal.html.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .j-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.tutorial-snapshot .j-section:last-child { margin-bottom: 0; }
.tutorial-snapshot .j-section-title {
  font-size: 0.82rem; font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.tutorial-snapshot .j-checkin-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.tutorial-snapshot .j-checkin-summary {
  display: flex; flex-direction: column;
  gap: 6px;
}
.tutorial-snapshot .j-checkin-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot .j-checkin-row:last-child { border-bottom: none; }
.tutorial-snapshot .j-checkin-dim-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tutorial-snapshot .j-checkin-dim-val {
  font-size: 1.1rem;
}
.tutorial-snapshot .j-checkin-dim-val.null-val {
  opacity: 0.28;
  filter: grayscale(60%);
}

.tutorial-snapshot .j-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem; line-height: 1.45;
  resize: none;
}
.tutorial-snapshot .j-structured-toggle {
  display: inline-flex; align-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem; font-weight: 600;
  padding: 4px 0;
  cursor: default;
  margin-top: 6px;
}
.tutorial-snapshot .j-structured-fields {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.tutorial-snapshot .j-structured-fields.open { display: flex; }
.tutorial-snapshot .j-field-label {
  font-size: 0.7rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* Protocol item cards with mini emoji rows */
.tutorial-snapshot .j-item-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.tutorial-snapshot .j-item-card:last-child { margin-bottom: 0; }
.tutorial-snapshot .j-item-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.tutorial-snapshot .j-item-name {
  flex: 1; min-width: 0;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tutorial-snapshot .j-item-taken-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--text-muted);
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  cursor: default;
}
.tutorial-snapshot .j-item-taken-btn.taken {
  background: rgba(16,185,129,0.12);
  color: #10b981;
  border-color: rgba(16,185,129,0.4);
}
.tutorial-snapshot .j-item-details {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.tutorial-snapshot .j-item-details.open { display: flex; }
.tutorial-snapshot .j-mini-emoji-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tutorial-snapshot .j-mini-emoji-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.05rem; line-height: 1;
  cursor: default;
  font-family: inherit;
  opacity: 0.55;
}
.tutorial-snapshot .j-mini-emoji-btn.selected {
  opacity: 1;
  border-color: var(--accent);
  background: rgba(108,116,204,0.1);
}

/* Calendar history view */
.tutorial-snapshot .j-view-modes {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.tutorial-snapshot .j-view-mode-btn {
  flex: 1;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.74rem; font-weight: 600;
  color: var(--text-muted);
  cursor: default;
}
.tutorial-snapshot .j-view-mode-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.tutorial-snapshot .j-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.tutorial-snapshot .j-cal-day {
  aspect-ratio: 1;
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.tutorial-snapshot .j-cal-day.has-data {
  background: rgba(108,116,204,0.18);
  color: var(--accent);
}
.tutorial-snapshot .j-cal-day.selected {
  background: var(--accent);
  color: #fff;
}
.tutorial-snapshot .j-cal-day.empty { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   Scoped My-Plan (Workouts Programs) visuals
   Mirrors .plan-row, .plan-row-meta, .plan-row-reset-link, .plan-switch,
   .plan-section-head, .plan-toggle-row from workouts.html. Used by
   workouts/plan-setup.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.tutorial-snapshot .plan-card-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot .plan-card-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .plan-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.tutorial-snapshot .plan-row-wrap {
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot .plan-row-wrap:last-child { border-bottom: none; }
.tutorial-snapshot .plan-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  cursor: default;
}
.tutorial-snapshot .plan-row.is-editing {
  background: rgba(108,116,204,0.06);
}
.tutorial-snapshot .plan-row-label {
  flex: 1; min-width: 0;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text);
}
.tutorial-snapshot .plan-row-value {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: right;
}
.tutorial-snapshot .plan-row-chev {
  color: var(--text-dim);
  font-size: 1rem;
  flex-shrink: 0;
  margin-left: 6px;
}
.tutorial-snapshot .plan-row-meta {
  padding: 0 18px 10px;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.tutorial-snapshot .plan-row-meta-coach {
  color: var(--accent);
  font-weight: 600;
}
.tutorial-snapshot .plan-row-reset-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: default;
}
.tutorial-snapshot .plan-section-head {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 18px 4px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot .plan-toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.tutorial-snapshot .plan-toggle-row:last-child { border-bottom: none; }
.tutorial-snapshot .plan-switch {
  width: 38px; height: 22px;
  border-radius: 22px;
  background: var(--surface2);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}
.tutorial-snapshot .plan-switch::after {
  content: '';
  position: absolute;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: left .15s;
}
.tutorial-snapshot .plan-switch.on {
  background: rgba(108,116,204,0.2);
  border-color: var(--accent);
}
.tutorial-snapshot .plan-switch.on::after {
  left: 19px;
  background: var(--accent);
}
.tutorial-snapshot .plan-row-edit {
  display: flex; align-items: center; gap: 6px;
}
.tutorial-snapshot .plan-row-input {
  width: 80px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 5px 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem; font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
}
.tutorial-snapshot .plan-row-input::-webkit-outer-spin-button,
.tutorial-snapshot .plan-row-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tutorial-snapshot .plan-row-select {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 5px 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem; font-weight: 600;
}
.tutorial-snapshot .plan-row-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 0.76rem; font-weight: 700;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Nutrition Plan visuals
   Mirrors .plan-section, .plan-target-pill, .plan-head-actions,
   .plan-coach-chip, .plan-meal-block*, .plan-dow-*, .plan-btn-* from
   nutrition.html. Used by nutrition/plan-setup.
   Name collision with the workouts .plan-* classes avoided by keying on
   the wrapper — .tutorial-snapshot-nplan scope.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .nplan-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.tutorial-snapshot .nplan-section:last-child { margin-bottom: 0; }
.tutorial-snapshot .nplan-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tutorial-snapshot .nplan-section-head h3 {
  font-size: 0.95rem; font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tutorial-snapshot .nplan-head-actions {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.tutorial-snapshot .nplan-coach-chip {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(108,116,204,0.12);
  color: var(--accent);
  border: 1px solid rgba(108,116,204,0.3);
}
.tutorial-snapshot .nplan-btn-secondary,
.tutorial-snapshot .nplan-btn-primary {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 7px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 0.78rem; font-weight: 600;
  cursor: default;
}
.tutorial-snapshot .nplan-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tutorial-snapshot .nplan-btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.78rem; font-weight: 600;
  padding: 4px 0;
  cursor: default;
  text-decoration: underline;
}
.tutorial-snapshot .nplan-targets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.tutorial-snapshot .nplan-target-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.tutorial-snapshot .nplan-target-pill .lbl {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.tutorial-snapshot .nplan-target-pill .val {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .nplan-target-pill .unit {
  font-size: 0.7rem; font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}
.tutorial-snapshot .nplan-target-pill.is-editing {
  border-color: var(--accent);
  background: rgba(108,116,204,0.06);
}
.tutorial-snapshot .nplan-target-pill input {
  width: 64px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 3px 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem; font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}
.tutorial-snapshot .nplan-target-pill input::-webkit-outer-spin-button,
.tutorial-snapshot .nplan-target-pill input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tutorial-snapshot .nplan-muted {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tutorial-snapshot .nplan-phase-line {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tutorial-snapshot .nplan-phase-line strong { color: var(--text); }

/* Favorites + schedule meal block */
.tutorial-snapshot .nplan-meal-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.tutorial-snapshot .nplan-meal-block:last-child { margin-bottom: 0; }
.tutorial-snapshot .nplan-meal-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.tutorial-snapshot .nplan-meal-block-title {
  font-size: 0.88rem; font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .nplan-meal-block-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.tutorial-snapshot .nplan-meal-add {
  display: block; width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: default;
  text-align: center;
}

/* Day-of-week pills (Schedule) */
.tutorial-snapshot .nplan-dow-row {
  display: flex; gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tutorial-snapshot .nplan-dow-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 0.76rem; font-weight: 700;
  cursor: default;
}
.tutorial-snapshot .nplan-dow-pill.today {
  border-color: var(--accent);
  color: var(--accent);
}
.tutorial-snapshot .nplan-dow-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tutorial-snapshot .nplan-dow-pill .count {
  background: rgba(255,255,255,0.18);
  color: inherit;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.64rem;
  margin-left: 2px;
}
.tutorial-snapshot .nplan-dow-pill:not(.active) .count {
  background: rgba(108,116,204,0.15);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped IF panel visuals — the three-state (disabled / idle / active)
   tiles used by the nutrition/today-overview IF extension.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .if-triptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@container tutorial (min-width: 700px) {
  .tutorial-snapshot .if-triptych { grid-template-columns: repeat(3, 1fr); }
}
.tutorial-snapshot .if-tile {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.tutorial-snapshot .if-tile.is-active {
  border-color: rgba(108,116,204,0.4);
  background: rgba(108,116,204,0.04);
}
.tutorial-snapshot .if-tile-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--surface2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.tutorial-snapshot .if-tile-body {
  flex: 1; min-width: 0;
}
.tutorial-snapshot .if-tile-title {
  font-size: 0.84rem; font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.tutorial-snapshot .if-tile-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.tutorial-snapshot .if-tile-target-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.tutorial-snapshot .if-tile-target-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.76rem; font-weight: 600;
}
.tutorial-snapshot .if-progress-main {
  font-size: 0.82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tutorial-snapshot .if-progress-pct {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tutorial-snapshot .if-progress-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 5px;
}
.tutorial-snapshot .if-progress-bar .if-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .2s;
}
.tutorial-snapshot .if-tile-action {
  display: flex; gap: 5px;
  flex-shrink: 0;
}
.tutorial-snapshot .if-ico-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
  cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
}
.tutorial-snapshot .if-ico-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tutorial-snapshot .if-ico-btn.danger {
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.tutorial-snapshot .if-ico-btn.enable-btn {
  width: auto; padding: 0 12px;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-size: 0.78rem; font-weight: 700;
}
.tutorial-snapshot .if-state-cycle-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}
.tutorial-snapshot .if-state-cycle-btn:hover { opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Labs visuals — PDF review rows, range bars, Trends sparkline.
   Mirrors .pdf-review, .pdf-match-row, .range-*, .zone-* from labs.html.
   Used by labs/workflow.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .pdf-review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.tutorial-snapshot .pdf-review-head {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.tutorial-snapshot .pdf-review-head strong { color: var(--text); }
.tutorial-snapshot .pdf-match-row {
  display: grid;
  grid-template-columns: 20px 1fr auto 28px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.tutorial-snapshot .pdf-match-row:last-child { border-bottom: none; }
.tutorial-snapshot .pdf-match-row.is-rejected {
  opacity: 0.45;
  text-decoration: line-through;
}
.tutorial-snapshot .pdf-match-check {
  color: #10b981;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}
.tutorial-snapshot .pdf-match-row.is-rejected .pdf-match-check {
  color: var(--text-dim);
}
.tutorial-snapshot .pdf-match-name {
  color: var(--text);
  font-weight: 500;
}
.tutorial-snapshot .pdf-match-mapping {
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 4px;
}
.tutorial-snapshot .pdf-match-value {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tutorial-snapshot .pdf-match-value input {
  width: 70px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 3px 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
}
.tutorial-snapshot .pdf-match-value input::-webkit-outer-spin-button,
.tutorial-snapshot .pdf-match-value input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tutorial-snapshot .pdf-include-check {
  accent-color: var(--accent);
  width: 18px; height: 18px;
  cursor: default;
}
.tutorial-snapshot .pdf-unmatched-sec {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tutorial-snapshot .pdf-unmatched-sec h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.tutorial-snapshot .pdf-unmatched-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.84rem;
}
.tutorial-snapshot .pdf-unmatched-name {
  color: #f59e0b;
}
.tutorial-snapshot .pdf-unmatched-name strong { color: var(--text); }
.tutorial-snapshot .pdf-map-dd {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Range bar */
.tutorial-snapshot .range-bar-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px 10px;
}
.tutorial-snapshot .range-bar-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.tutorial-snapshot .range-bar-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.tutorial-snapshot .range-bar-unit {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 3px;
}
.tutorial-snapshot .range-bar {
  position: relative;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  margin-top: 10px;
}
.tutorial-snapshot .range-zone { height: 100%; }
.tutorial-snapshot .range-zone.zone-low     { background: linear-gradient(90deg, #2d3a6e, #3a4a8a); }
.tutorial-snapshot .range-zone.zone-below   { background: linear-gradient(90deg, #3a4a8a, #4a6ab0); }
.tutorial-snapshot .range-zone.zone-optimal { background: linear-gradient(90deg, #2a8a78, #3daf9c); }
.tutorial-snapshot .range-zone.zone-above   { background: linear-gradient(90deg, #6b5aa0, #8a6abf); }
.tutorial-snapshot .range-zone.zone-high    { background: linear-gradient(90deg, #7a4aaa, #9055cc); }
.tutorial-snapshot .range-dot {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  background: #3daf9c;
}
.tutorial-snapshot .range-labels {
  display: flex;
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 6px;
  gap: 2px;
}
.tutorial-snapshot .range-label-zone {
  flex: 1;
  text-align: center;
  line-height: 1.3;
}
.tutorial-snapshot .range-label-zone strong {
  display: block;
  font-weight: 700;
  font-size: 0.62rem;
  color: var(--text-dim);
}
.tutorial-snapshot .range-label-zone span {
  font-size: 0.56rem;
}

/* Trends sparkline block */
.tutorial-snapshot .trends-row {
  display: grid;
  grid-template-columns: 1.3fr 2fr 0.7fr;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.tutorial-snapshot .trends-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.tutorial-snapshot .trends-name-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tutorial-snapshot .trends-spark {
  position: relative;
  height: 42px;
}
.tutorial-snapshot .trends-spark svg {
  width: 100%; height: 100%;
  display: block;
}
.tutorial-snapshot .trends-latest {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tutorial-snapshot .trends-latest-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .trends-latest-arrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 3px;
}
.tutorial-snapshot .trends-latest-arrow.up   { color: #10b981; }
.tutorial-snapshot .trends-latest-arrow.down { color: #ef4444; }
.tutorial-snapshot .trends-latest-arrow.flat { color: var(--text-muted); }
.tutorial-snapshot .trends-latest-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Progress Metrics visuals
   Mirrors .quick-log-panel, .qlp-pill, .metric-card, .range-btn,
   .cycle-toggle from progress.html. Used by progress/metrics.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .quick-log-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.tutorial-snapshot .quick-log-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tutorial-snapshot .qlp-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tutorial-snapshot .qlp-pill {
  background: rgba(108,116,204,0.1);
  border: 1px solid rgba(108,116,204,0.3);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: default;
}

.tutorial-snapshot .metric-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.tutorial-snapshot .metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tutorial-snapshot .metric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tutorial-snapshot .metric-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.tutorial-snapshot .due-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(108,116,204,0.12);
  color: var(--accent);
}
.tutorial-snapshot .metric-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.tutorial-snapshot .metric-change {
  font-size: 0.7rem;
  font-weight: 600;
}
.tutorial-snapshot .metric-change.change-up   { color: #10b981; }
.tutorial-snapshot .metric-change.change-down { color: #ef4444; }
.tutorial-snapshot .metric-change.change-flat { color: var(--text-muted); }
.tutorial-snapshot .metric-spark {
  height: 32px;
  margin-top: 2px;
}
.tutorial-snapshot .metric-spark svg {
  width: 100%; height: 100%;
  display: block;
}
.tutorial-snapshot .metric-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.tutorial-snapshot .metric-last-logged {
  flex: 1;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.tutorial-snapshot .metric-log-btn {
  background: rgba(108,116,204,0.1);
  border: 1px solid rgba(108,116,204,0.3);
  color: var(--accent);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: default;
}

/* Chart section — range buttons + overlay toggle */
.tutorial-snapshot .chart-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.tutorial-snapshot .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tutorial-snapshot .chart-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tutorial-snapshot .range-group {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface2);
}
.tutorial-snapshot .range-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: default;
}
.tutorial-snapshot .range-btn.active {
  background: var(--accent);
  color: #fff;
}
.tutorial-snapshot .cycle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}
.tutorial-snapshot .chart-canvas-demo {
  position: relative;
  height: 160px;
  background: var(--surface2);
  border-radius: 8px;
  margin-top: 10px;
  overflow: hidden;
}
.tutorial-snapshot .chart-canvas-demo svg {
  width: 100%; height: 100%;
  display: block;
}
.tutorial-snapshot .chart-cycle-band {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(108,116,204,0.1);
  border-left: 2px dashed rgba(108,116,204,0.4);
  border-right: 2px dashed rgba(108,116,204,0.4);
  pointer-events: none;
}
.tutorial-snapshot .chart-cycle-marker {
  position: absolute;
  top: 0;
  bottom: 20px;
  width: 1px;
  background: rgba(108,116,204,0.6);
  pointer-events: none;
}
.tutorial-snapshot .chart-cycle-marker-label {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Account Integrations visuals
   Mirrors .integration-card, .integration-status, .status-dot,
   .connect-btn, .btn-integ from account.html.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .integration-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.tutorial-snapshot .integration-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.tutorial-snapshot .integration-card:last-child { margin-bottom: 0; }
.tutorial-snapshot .integration-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tutorial-snapshot .integration-logo {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--surface2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tutorial-snapshot .integration-logo.seca {
  background: rgba(108,116,204,0.12);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}
.tutorial-snapshot .integration-info {
  flex: 1; min-width: 0;
}
.tutorial-snapshot .integration-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
}
.tutorial-snapshot .integration-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tutorial-snapshot .integration-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tutorial-snapshot .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
}
.tutorial-snapshot .status-dot.green { background: #10b981; }
.tutorial-snapshot .status-dot.amber { background: #f59e0b; }
.tutorial-snapshot .integration-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.55;
}
.tutorial-snapshot .integration-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.tutorial-snapshot .connect-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: default;
}
.tutorial-snapshot .btn-integ {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 7px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: default;
}
.tutorial-snapshot .btn-integ.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tutorial-snapshot .btn-integ.danger {
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.tutorial-snapshot .seca-upload-zone {
  background: var(--surface2);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 24px 14px;
  margin-top: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.tutorial-snapshot .seca-upload-zone strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Progress Photos visuals — upload modal mock, compare grid,
   thumbnail silhouettes. Used by progress/photos.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .photo-upload-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  max-width: 440px;
  margin: 0 auto;
}
.tutorial-snapshot .photo-upload-modal-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.tutorial-snapshot .photo-upload-preview {
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  margin-bottom: 12px;
}
.tutorial-snapshot .photo-placeholder-svg {
  width: 80px; height: 100px;
  margin: 0 auto 8px;
}
.tutorial-snapshot .photo-form-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.tutorial-snapshot .photo-form-row:last-child { margin-bottom: 0; }
.tutorial-snapshot .photo-form-label {
  font-size: 0.76rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  flex: 0 0 70px;
}
.tutorial-snapshot .photo-form-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
}

/* Compare mode — two-column grid with metric snapshot underneath */
.tutorial-snapshot .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tutorial-snapshot .compare-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tutorial-snapshot .compare-photo {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-snapshot .compare-photo svg {
  width: 50%; height: 60%;
  opacity: 0.55;
}
.tutorial-snapshot .compare-col-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}
.tutorial-snapshot .compare-col-meta strong { color: var(--text); }
.tutorial-snapshot .compare-col-metrics {
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.tutorial-snapshot .compare-col-metrics .snap-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0;
}
.tutorial-snapshot .compare-col-metrics .snap-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tutorial-snapshot .compare-thumbnails-row {
  display: flex; gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tutorial-snapshot .compare-thumb {
  width: 64px;
  border: 2px solid transparent;
  border-radius: 7px;
  padding: 4px;
  background: var(--surface2);
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: inherit;
}
.tutorial-snapshot .compare-thumb-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-snapshot .compare-thumb-img svg {
  width: 55%; height: 65%;
  opacity: 0.45;
}
.tutorial-snapshot .compare-thumb-date {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 600;
}
.tutorial-snapshot .compare-thumb.active-left {
  border-color: var(--accent);
  background: rgba(108,116,204,0.08);
}
.tutorial-snapshot .compare-thumb.active-right {
  border-color: #10b981;
  background: rgba(16,185,129,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   Scoped Peptide Calculator visuals — mirrors the real calculator.html
   page layout (preset grid + custom input + mcg/mg toggle + 3-row
   results + syringe SVG). Used by calculator/peptide-dose.
   ═══════════════════════════════════════════════════════════════════════ */

.tutorial-snapshot .calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.tutorial-snapshot .calc-step {
  margin-bottom: 18px;
}
.tutorial-snapshot .calc-step:last-of-type { margin-bottom: 0; }
.tutorial-snapshot .calc-step-label {
  font-size: 0.7rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.tutorial-snapshot .calc-step-label .hint {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 5px;
}
.tutorial-snapshot .calc-custom-row {
  display: flex; align-items: center; gap: 8px;
}
.tutorial-snapshot .calc-custom-label {
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.tutorial-snapshot .calc-custom-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem; font-weight: 600;
  width: 100px;
  -moz-appearance: textfield;
}
.tutorial-snapshot .calc-custom-input::-webkit-outer-spin-button,
.tutorial-snapshot .calc-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tutorial-snapshot .calc-custom-input:focus {
  outline: none;
  border-color: var(--accent);
}
.tutorial-snapshot .calc-uom-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.tutorial-snapshot .calc-uom-btn {
  background: var(--surface2);
  color: var(--text-muted);
  border: none;
  padding: 3px 12px;
  font-family: inherit;
  font-size: 0.72rem; font-weight: 700;
  cursor: default;
  letter-spacing: 0.3px;
}
.tutorial-snapshot .calc-uom-btn.active {
  background: var(--accent);
  color: #fff;
}

.tutorial-snapshot .calc-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.tutorial-snapshot .calc-results {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}
@container tutorial (max-width: 560px) {
  .tutorial-snapshot .calc-results { grid-template-columns: 1fr; }
}
.tutorial-snapshot .calc-result-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.tutorial-snapshot .calc-result-row:last-child { margin-bottom: 0; }
.tutorial-snapshot .calc-result-row.highlight {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.06);
}
.tutorial-snapshot .calc-result-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.tutorial-snapshot .calc-result-row.highlight .calc-result-lbl {
  color: #10b981;
}
.tutorial-snapshot .calc-result-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tutorial-snapshot .calc-result-row.highlight .calc-result-val {
  color: #10b981;
  font-size: 1.2rem;
}

/* Syringe visualization — simplified SVG */
.tutorial-snapshot .calc-syringe-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.tutorial-snapshot .calc-syringe-svg {
  width: 50px; height: 180px;
}
.tutorial-snapshot .calc-syringe-units {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  min-width: 110px;
}
.tutorial-snapshot .calc-syringe-units .lbl {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
}
.tutorial-snapshot .calc-syringe-units .big {
  font-size: 1.4rem; font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tutorial-snapshot .calc-syringe-units .sub {
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   SPEC-HLP-4 P1 — narrow-container behaviour
   ─────────────────────────────────────────────────────────────────────
   These demos were laid out for the hub's ~700px article column. In the
   help drawer the same markup gets 420–470px on a laptop and the full
   viewport on a phone, so the rows that pack a fixed-width icon, a hero
   readout and two buttons onto one line run out of room and clip.

   Everything here is a @container query on `.tutorial-snapshot`, so it
   responds to the PANEL and is inert in the wide hub. Measured, not
   guessed: at 390px the dose card wanted 406px against 305px available,
   with `.dose-card-header-info` squeezed to zero.
   ═══════════════════════════════════════════════════════════════════════ */

@container tutorial (max-width: 520px) {
  /* The dose card: let the header wrap and give the name its own line.
     The hero readout and the action buttons then sit together underneath
     rather than stealing width from the compound name. */
  .tutorial-snapshot .dose-card-header { flex-wrap: wrap; row-gap: 10px; }
  .tutorial-snapshot .dose-card-header-info { flex: 1 1 100%; order: 1; min-width: 0; }
  .tutorial-snapshot .dose-card-chevron { order: 0; }
  .tutorial-snapshot .dose-card-icon { order: 0; }
  .tutorial-snapshot .draw-hero { order: 2; margin-left: 22px; }
  .tutorial-snapshot .mark-taken-btn,
  .tutorial-snapshot .mark-skip-btn { order: 3; }

  /* Any grid inside a snapshot collapses to a single column rather than
     squeezing columns below legibility. */
  .tutorial-snapshot [class*="-grid"],
  .tutorial-snapshot [class*="-triptych"],
  .tutorial-snapshot [class*="-two-col"] { grid-template-columns: 1fr !important; }
}

/* A safety net, not a layout: a snapshot row that still cannot fit scrolls
   sideways ON ITS OWN instead of clipping its content or pushing the panel.
   Clipping is what made the owner's screenshot look broken — content was
   simply gone, with nothing to say so. */
.tutorial-snapshot .tutorial-snapshot-body { overflow-x: auto; }
.tutorial-snapshot table { display: block; overflow-x: auto; max-width: 100%; }

/* The jump-to strip at the top of 24 articles is not inside a snapshot, so
   it needs its own wrap — it is a single flex line of section links and was
   the first thing to run off the edge of a narrow drawer. */
.tutorial-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tutorial-toc a { word-break: break-word; }

/* ── SPEC-HLP-4 P3 — icons inside snapshot controls ─────────────────────
   The article markup now carries Direction-2 inline SVG where it used to
   carry emoji (CLAUDE.md's project-wide ban; the emoji rating faces were
   the worst of it — the owner's second screenshot). An inline icon defaults
   to 15px, which is right in a line of prose and far too small inside a
   rating button, where five 15px faces read as five identical dots.
   Rating rows get a larger glyph and the button centres it. */
.tutorial-snapshot .j-mini-emoji-row svg,
.tutorial-snapshot .jd-emoji-row svg,
.tutorial-snapshot .pdjm-emoji-row svg { width: 22px; height: 22px; vertical-align: middle; }
.tutorial-snapshot .j-mini-emoji-btn,
.tutorial-snapshot .jd-emoji-btn,
.tutorial-snapshot .pdjm-emoji-btn { display: inline-flex; align-items: center; justify-content: center; }

/* An icon standing in for a compound-type badge sits inside a small tinted
   square; centre it there too rather than letting it sit on the text
   baseline it no longer shares with a glyph. */
.tutorial-snapshot .dose-card-icon svg,
.tutorial-snapshot .pl-item-icon svg,
.tutorial-snapshot .j-item-icon svg { width: 18px; height: 18px; vertical-align: middle; }
.tutorial-snapshot .dose-card-icon,
.tutorial-snapshot .pl-item-icon,
.tutorial-snapshot .j-item-icon { display: inline-flex; align-items: center; justify-content: center; }