/* tutorial.css — guided onboarding overlay + launcher
   Loaded always-on for admin via the `tutorial` AssetCatalog plugin. */

/* ---------------------------------------------------------------
   Overlay: four fixed rects frame the target, leaving it clickable
   in the uncovered hole. The ring outlines the highlighted element.
   --------------------------------------------------------------- */
.tutorial-overlay-rect {
    position: fixed;
    background: rgba(17, 24, 39, 0.55);
    z-index: 99990;
    pointer-events: auto;       /* block interaction outside the hole */
    transition: all 0.15s ease;
}

.tutorial-overlay-ring {
    position: fixed;
    z-index: 99995;
    pointer-events: auto;       /* read-only: block clicks on the highlighted control */
    cursor: default;
    border: 2px solid #607DBF;  /* ChartColors::PRIMARY */
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(96, 125, 191, 0.35);
    transition: all 0.15s ease;
}

/* Action steps (requireAction): the whole overlay becomes click-through so the
   user can perform the action — clicking the highlighted control (e.g. the Edit
   pencil) or something else on the page (e.g. a list row). The dim stays purely
   visual. The engine toggles these classes per step. */
.tutorial-overlay-rect.-passthrough,
.tutorial-overlay-ring.-clickable { pointer-events: none; }
.tutorial-overlay-ring.-clickable { cursor: pointer; }

/* "You are here" highlight on the active left-nav item — painted on EVERY step
   by _paintNavHighlight so the current screen's menu item is always marked. Uses
   the same solid focus-ring style as a landing step's nav frame, so the nav is
   highlighted consistently throughout a tour. */
.tutorial-overlay-ring.-navsolid {
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(96, 125, 191, 0.35);
}

/* Legacy dashed "context" variant — retained for the _setRings _nav toggle; the
   persistent nav highlight above is the active path. */
.tutorial-overlay-ring.-nav {
    border-style: dashed;
    box-shadow: 0 0 0 3px rgba(96, 125, 191, 0.30);
}

/* ---------------------------------------------------------------
   Popover (Tippy content)
   --------------------------------------------------------------- */
.tutorial-pop {
    /* Modern-form stack, not the inherited legacy body font: Firefox draws U+2192
       (and kin) in tour copy as a tofu box when Helvetica lacks the glyph and won't
       fall back (same quirk as .wf-title-arrow in admin.css). Roboto's unicode-range
       subsets let symbols fall through to a system font that carries them. */
    font-family: 'Roboto', -apple-system, sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #1f2937;
    /* Cap height to the viewport and let the body scroll, so the header and the
       Back/Next footer stay visible even for long steps or small screens. */
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.tutorial-pop-head,
.tutorial-pop-foot { flex: 0 0 auto; }

.tutorial-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #e5e7eb;
}

.tutorial-pop-title {
    font-weight: 600;
    font-size: 0.98rem;
    color: #111827;
}

.tutorial-pop-close {
    border: none;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 0.15rem;
}
.tutorial-pop-close:hover { color: #4b5563; }

.tutorial-pop-body {
    padding: 0.75rem 0.85rem;
    flex: 1 1 auto;
    overflow-y: auto;
}
.tutorial-pop-body p:first-child { margin-top: 0; }
.tutorial-pop-body p:last-child  { margin-bottom: 0; }
/* Bulleted enumerations (column / option / action lists). Compact, hanging
   indent so the bold lead term reads cleanly against the marker. */
.tutorial-pop-body ul {
    margin: 0.5rem 0;
    padding-left: 1.15rem;
    list-style: disc;
}
.tutorial-pop-body ul:last-child  { margin-bottom: 0; }
.tutorial-pop-body li {
    margin: 0.2rem 0;
    line-height: 1.4;
}
.tutorial-pop-body li::marker { color: #607DBF; }
.tutorial-pop-body code {
    background: #f3f4f6;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* Help reference inside a tour step body — renders as a "? topic" pill that
   opens the help slideout (see data-help-topic handler in tutorialPlayer.js). */
.tutorial-pop-body a[data-help-topic] {
    /* Block-level + fit-content so several help-page links stack vertically,
       each on its own line sized to its text, rather than running inline. */
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid #607DBF;   /* ChartColors::PRIMARY */
    border-radius: 5px;
    color: #607DBF !important;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
}
.tutorial-pop-body a[data-help-topic]:hover { background: rgba(96, 125, 191, 0.08); }
.tutorial-pop-body a[data-help-topic]::before {
    content: "?";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #607DBF;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

/* First-step "here's where you are" grounding line. */
.tutorial-pop-loc {
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.55rem;
    background: #f3f4f6;
    border-radius: 5px;
    font-size: 0.82rem;
    color: #374151;
}
.tutorial-pop-loc strong { color: #111827; }
.tutorial-pop-loc-pin { margin-right: 0.15rem; }

.tutorial-pop-hint {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(96, 125, 191, 0.10);
    border-left: 3px solid #607DBF;
    border-radius: 4px;
    font-size: 0.86rem;
    color: #374151;
}

/* Inline red caution callout for a step body (raw HTML, GFM html_input=allow). */
.tutorial-pop-warn {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(178, 59, 59, 0.08);
    border-left: 3px solid #b23b3b;
    border-radius: 4px;
    font-size: 0.86rem;
    color: #8a2f2f;
}

/* End-of-tour nudge: closes the final step on an open invitation to feed back. */
.tutorial-pop-feedback {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(46, 125, 50, 0.08);
    border-left: 3px solid #2e7d32;
    border-radius: 4px;
    font-size: 0.86rem;
    color: #374151;
}

/* -----------------------------------------------------------------
   Recap-quiz card (end-of-group wrap-up). A light, no-stakes question:
   pick an option, the right/wrong answers reveal, then an explanation.
   ----------------------------------------------------------------- */
.tutorial-quiz-q {
    font-size: 0.92rem;
    line-height: 1.45;
    color: #1f2937;
    margin-bottom: 0.7rem;
}
.tutorial-quiz-opts {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tutorial-quiz-opt {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1f2937;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.tutorial-quiz-opt:hover:not(:disabled) { border-color: #607DBF; background: #f5f8fe; }
.tutorial-quiz-opt:disabled { cursor: default; }
/* Reveal: the correct option goes green, a wrong pick goes red. */
.tutorial-quiz-opt.-correct {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.10);
    color: #1e5b22;
    font-weight: 600;
}
.tutorial-quiz-opt.-wrong {
    border-color: #b23b3b;
    background: rgba(178, 59, 59, 0.08);
    color: #8a2f2f;
}
.tutorial-quiz-explain[hidden] { display: none; }
.tutorial-quiz-explain {
    margin-top: 0.7rem;
    padding: 0.5rem 0.6rem;
    background: #f3f4f6;
    border-left: 3px solid #607DBF;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #374151;
}
/* Centred stage for the quiz/recap card. Fixed over the content area, with its
   left edge offset past the live sidebar width (set inline by the engine) so the
   card sits in the middle of what the operator is looking at, not the whole
   viewport. pointer-events:none lets clicks fall through to the dim everywhere
   except the card itself, so the owl (bottom-left) stays reachable. */
.tutorial-quiz-stage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;                 /* overridden inline with the sidebar offset */
    z-index: 100020;         /* above the dim, level with the popover */
    display: none;           /* flipped to flex while a quiz step is shown */
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
}
/* The card itself, standalone (no Tippy box) — so it carries the same white
   panel chrome the tippy 'tutorial' theme gives the normal popover. */
.tutorial-quiz-stage .tutorial-pop {
    pointer-events: auto;
    width: 400px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.18);
    overflow: hidden;        /* clip the scrollable body to the rounded corners */
}

.tutorial-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid #e5e7eb;
}

.tutorial-pop-count {
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
}

.tutorial-pop-actions {
    display: flex;
    gap: 0.4rem;
}

.tutorial-pop-back,
.tutorial-pop-next {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 5px;
    padding: 0.32rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.tutorial-pop-next {
    background: #607DBF;
    border-color: #607DBF;
    color: #fff;
    font-weight: 600;
}
.tutorial-pop-next:hover { background: #516daa; }
/* Final step: the Next button relabels to "Finish" and turns green. */
.tutorial-pop-next.-finish {
    background: #43a047;   /* ChartColors::GOOD */
    border-color: #43a047;
}
.tutorial-pop-next.-finish:hover { background: #388e3c; }
.tutorial-pop-back:hover { background: #f9fafb; }
.tutorial-pop-back:disabled,
.tutorial-pop-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tutorial Tippy theme: white panel, no default content padding, white arrow */
.tippy-box[data-theme~='tutorial'] {
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.18);
    overflow: hidden;  /* clip the scrollable body to the rounded corners */
    /* default.css sets `.tippy-box { max-width:1080px !important }`, which beats
       the JS maxWidth and lets the popover balloon to ~full width — that covers
       the left nav when a grounding step anchors the popover to the right of a
       sidebar item. Pin it back to a sane width so placement:right clears the
       250px sidebar and the highlighted nav item stays visible. */
    max-width: 380px !important;
}
/* default.css gives every .tippy-content a 2px solid #888 border + radius +
   shadow; the tutorial popover supplies its own chrome on the tippy-box, so
   strip the inner one or it shows as a double border inside ours. */
.tippy-box[data-theme~='tutorial'] .tippy-content {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.tippy-box[data-theme~='tutorial'] .tippy-arrow { color: #fff; }

/* ---------------------------------------------------------------
   In-step dialog preview: a read-only mock of the "change address"
   dialog, showing the ship-to fulfilment centre flipping A -> B.
   Authored as HTML inside a flip-delivery tour step body.
   --------------------------------------------------------------- */
.tutorial-fc-flip {
    margin: 0.6rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.tutorial-fc-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
}
.tutorial-fc-row.-from { background: #f9fafb; }
.tutorial-fc-row.-to   { background: rgba(67, 160, 71, 0.10); }
.tutorial-fc-label {
    flex: 0 0 2.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.tutorial-fc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
}
.tutorial-fc-row.-to .tutorial-fc-code {
    color: #2e7d32;
    border-color: #43a047;
}
.tutorial-fc-addr {
    font-size: 0.82rem;
    color: #4b5563;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tutorial-fc-arrow {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
    color: #607DBF;  /* ChartColors::PRIMARY */
    padding: 0.15rem 0;
}
.tutorial-fc-eg {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: #9ca3af;
}

/* ---------------------------------------------------------------
   Fragment stage — a real admin dialog, fetched and neutralised, shown
   centred over the dim. Dialogs are the one surface a tour can't simply
   navigate to (they open on a click), so this is the only overlaid panel
   the engine has. Screens are navigated to and framed; slideouts and menus
   are opened for real.
   --------------------------------------------------------------- */
.tutorial-fragment-stage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;                 /* above dim (99990/99995), below popover (100020) */
    width: min(820px, 88vw);         /* dialogs are laid out for ~760px; narrower wraps them */
    max-height: 84vh;
    overflow: auto;
    background: #fff;
    border: 1px solid #c9ced6;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.45);
    font-size: 0.9rem;
    color: #1f2937;
}
.tutorial-fragment {
    padding: 14px 16px;
    pointer-events: none;            /* backstop; `inert` does the real work */
    user-select: none;
}
.tutorial-fragment > *:first-child { margin-top: 0; }
/* A fragment may carry absolutely/fixed-positioned chrome (tooltip hosts,
   sticky toolbars) that would otherwise escape the panel and float over the
   tour. Pin everything back into flow. */
.tutorial-fragment [style*="position:fixed"],
.tutorial-fragment [style*="position: fixed"],
.tutorial-fragment .sticky,
.tutorial-fragment .tippy { position: static !important; }
.tutorial-fragment img { max-width: 100%; height: auto; }
/* Hide the empty shells of content the real screen would have loaded over
   htmx — neutralised, they never fetch, so they'd read as broken panels. */
.tutorial-fragment .gallery-loading,
.tutorial-fragment .fetch-load { display: none; }

/* ---------------------------------------------------------------
   "Show me" links — markdown authors a [Show me](tutorial:module/tour)
   link in a help page; it renders as a launch button. tutorialPlayer
   intercepts the click to start the tour.
   --------------------------------------------------------------- */
a[href^="tutorial:"] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: #607DBF;  /* ChartColors::PRIMARY */
    color: #fff !important;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
}
a[href^="tutorial:"]:hover { background: #516daa; }

/* "Guided walkthroughs" block auto-injected at the top of help content */
.help-walkthroughs {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.65rem;
    background: rgba(96, 125, 191, 0.07);
    border: 1px solid rgba(96, 125, 191, 0.20);
    border-radius: 6px;
}
.help-walkthroughs-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4b5563;
    margin-bottom: 0.4rem;
}
.help-walkthroughs-list {
    /* Stack the "Show me" buttons vertically — in the narrow help slideout a
       horizontal row forces the panel unnecessarily wide. Each button sizes to
       its own content and sits on its own line. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
a[href^="tutorial:"]::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent #fff;
}

/* ---------------------------------------------------------------
   Launcher (slideout content)
   --------------------------------------------------------------- */
.tutorial-launcher-intro {
    margin: 0 0 0.75rem;
    color: #4b5563;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Completion banner shown when the launcher reopens after finishing a tour. */
.tutorial-launcher-done {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.7rem;
    background: rgba(67, 160, 71, 0.10);   /* ChartColors::GOOD tint */
    border: 1px solid rgba(67, 160, 71, 0.35);
    border-radius: 6px;
}
.tutorial-launcher-done-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #2e7d32;
}
.tutorial-launcher-done-next {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.tutorial-launcher-progress {
    margin: 0 0 0.75rem;
}
.tutorial-launcher-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.tutorial-launcher-progress-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}
.tutorial-launcher-progress-count {
    font-size: 0.85rem;
    color: #374151;
}
.tutorial-launcher-progress-track {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.tutorial-launcher-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #607DBF;  /* ChartColors::PRIMARY */
    transition: width 0.3s ease;
}

.tutorial-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.7rem 0 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #eceef1;
}
.tutorial-group-head:first-child { margin-top: 0; }
.tutorial-group-name {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4b5563;
}
.tutorial-group-count {
    font-size: 0.78rem;
    color: #9ca3af;
    white-space: nowrap;
}

.tutorial-launcher-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tutorial-launcher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid #edeff2;
    border-radius: 5px;
    background: #fff;
}
.tutorial-launcher-item:hover { border-color: #d6dbe2; background: #fafbfc; }

.tutorial-launcher-item-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.tutorial-launcher-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    border-radius: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
}
.tutorial-launcher-copy:hover { background: #f3f4f6; color: #1f2937; }
.tutorial-launcher-copy .tlc-icon { display: block; }
/* Show the share glyph by default, the tick only after a copy. */
.tutorial-launcher-copy .tlc-tick { display: none; }
.tutorial-launcher-copy.-copied {
    border-color: #43a047;   /* ChartColors::GOOD */
    color: #2e7d32;
    background: rgba(67, 160, 71, 0.10);
}
.tutorial-launcher-copy.-copied .tlc-share { display: none; }
.tutorial-launcher-copy.-copied .tlc-tick { display: block; }
/* The suggested next tour after a completion. */
.tutorial-launcher-item.-next {
    border-color: #607DBF;
    background: rgba(96, 125, 191, 0.06);
}

.tutorial-launcher-item-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.tutorial-launcher-item-title {
    font-weight: 500;
    font-size: 0.86rem;
    color: #111827;
}

.tutorial-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.35rem;
    border-radius: 10px;
}
.tutorial-badge.-next {
    background: rgba(96, 125, 191, 0.14);
    color: #4257a0;
}
/* Completed-but-behind: the tour's content was updated since the user did it. */
.tutorial-badge.-updated {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

/* Start / Restart icon button. Play = the primary action, filled in brand
   blue; Restart = a completed tour, replayable, tinted green (the green glyph
   now carries the "completed" signal the old text badge used to). Sized to the
   28px copy glyph so the two actions read as a tidy pair. */
.tutorial-launcher-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    min-height: 0;
    border-radius: 5px;
    border: 1px solid #607DBF;   /* brand */
    background: #607DBF;
    color: #fff;
    cursor: pointer;
}
.tutorial-launcher-start:hover { background: #516cab; border-color: #516cab; }
.tutorial-launcher-start .tls-icon { display: block; }
.tutorial-launcher-start .tls-restart { display: none; }
/* Completed tour: green and replayable. */
.tutorial-launcher-start.-done {
    border-color: #43a047;       /* ChartColors::GOOD */
    background: rgba(67, 160, 71, 0.10);
    color: #2e7d32;
}
.tutorial-launcher-start.-done:hover { background: rgba(67, 160, 71, 0.18); }
.tutorial-launcher-start.-done .tls-play { display: none; }
.tutorial-launcher-start.-done .tls-restart { display: block; }

.tutorial-launcher-empty {
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.tutorial-launcher-foot {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}
.tutorial-launcher-dismiss {
    border: none;
    background: none;
    color: #6b7280;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.2rem;
}
.tutorial-launcher-dismiss:hover { color: #374151; }

/* ---------------------------------------------------------------
   Topbar launch button
   --------------------------------------------------------------- */
/* Match the other topbar buttons (.tb-help / .tb-notify) so it reads as a
   consistent boxed button next to the help icon. */
.tb-tutorial { position: relative; margin-left: 8px; }
.tb-tutorial-btn {
    background: none;
    border: 1px solid #444;
    color: #ccc;
    width: 36px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tb-tutorial-btn:hover { background-color: #333; color: #fff; }
/* Outstanding-training badge on the cap (mirrors .tb-notify-badge). Blue when the
   outstanding tours are simply not-yet-done; amber when any are content updates
   we'd like re-done. */
.tb-tutorial-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    pointer-events: none;
}
.tb-tutorial-new     { background-color: #3b82f6; }
.tb-tutorial-updated { background-color: #f59e0b; }

/* -----------------------------------------------------------------
   Coaching avatar (the owl)
   Sits bottom-left while a tour is active OR the launcher is open: above the
   dim/rings, below the popover (100020). Doubles as the "leave a note" entry
   point. The container is click-through; only the owl, CTA and note bubble
   catch clicks, so the rest of the page stays interactive.
   ----------------------------------------------------------------- */
.tutorial-avatar {
    position: fixed;
    left: 20px;
    bottom: 20px;
    /* Above the tutorial popover (100020) so the owl's note bubble — a child of
       this container's stacking context — sits in front of the step popover,
       not behind it. Kept below the opener/closer video modal (100030). */
    z-index: 100025;
    pointer-events: none;            /* container never intercepts page clicks */
}
.tutorial-avatar-owl {
    pointer-events: auto;
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
    transition: transform 0.2s ease;
}
.tutorial-avatar-owl .owl-svg,
.tutorial-avatar-owl img { width: 100%; height: 100%; display: block; }
/* The custom-avatar fallback <img> is hidden until a tour supplies one — the
   display:block above must not override its hidden state (else an empty,
   src-less box renders below the owl). */
.tutorial-avatar-owl img[hidden] { display: none; }
.tutorial-avatar-owl:hover { transform: scale(1.06); }
/* No-feedback context (launcher open, or tour opted out): owl is decorative. */
.tutorial-avatar.-nofeedback .tutorial-avatar-owl { cursor: default; }
.tutorial-avatar.-nofeedback .tutorial-avatar-owl:hover { transform: none; }

/* ----------------------------------------------------------------
   The owl, alive. Inline-SVG parts are animated off the tour state
   classes (-talking / -celebrate) plus an always-on idle (blink +
   gentle wing flap). transform-box:fill-box makes each part's
   transform-origin local to its own bounding box.
   ---------------------------------------------------------------- */
.owl-svg .owl-eyes,
.owl-svg .owl-body,
.owl-svg .owl-beak,
.owl-svg .owl-wing,
.owl-svg .owl-ear { transform-box: fill-box; }

/* Idle blink — always, every few seconds. */
.owl-svg .owl-eyes {
    transform-origin: 50% 50%;
    animation: owl-blink 4.2s ease-in-out infinite;
}
@keyframes owl-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    96%           { transform: scaleY(0.1); }
}

/* Idle wing flap — gentle, always; the two wings beat in opposition. */
.owl-svg .owl-wing-l { transform-origin: 80% 20%; animation: owl-flap-l 2.8s ease-in-out infinite; }
.owl-svg .owl-wing-r { transform-origin: 20% 20%; animation: owl-flap-r 2.8s ease-in-out infinite; }
@keyframes owl-flap-l { 0%, 100% { transform: rotate(0deg); }  50% { transform: rotate(-15deg); } }
@keyframes owl-flap-r { 0%, 100% { transform: rotate(0deg); }  50% { transform: rotate(15deg); } }

/* Excited flapping on hover and on the final step (faster beats). */
.tutorial-avatar-owl:hover .owl-wing-l,
.tutorial-avatar.-celebrate .owl-wing-l,
.tutorial-avatar-owl:hover .owl-wing-r,
.tutorial-avatar.-celebrate .owl-wing-r { animation-duration: 0.42s; }

/* Attentive: a gentle, slow bob while guiding, with the beak gently "talking". */
.tutorial-avatar.-talking .tutorial-avatar-owl { animation: tutorial-avatar-bob 2.4s ease-in-out infinite; }
.tutorial-avatar.-talking .owl-beak {
    transform-origin: 50% 0%;
    animation: owl-beak 0.62s ease-in-out infinite;
}
@keyframes tutorial-avatar-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes owl-beak {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.55); }
}

/* Final step: a celebratory hop + lean, with the ear tufts wiggling. */
.tutorial-avatar.-celebrate .tutorial-avatar-owl { animation: owl-hop 0.9s ease-in-out infinite; }
.tutorial-avatar.-celebrate .owl-ear-l { transform-origin: 50% 100%; animation: owl-wiggle-l 0.5s ease-in-out infinite; }
.tutorial-avatar.-celebrate .owl-ear-r { transform-origin: 50% 100%; animation: owl-wiggle-r 0.5s ease-in-out infinite; }
@keyframes owl-hop {
    0%, 55%, 100% { transform: translateY(0) rotate(-3deg); }
    25%           { transform: translateY(-10px) rotate(-3deg); }
    40%           { transform: translateY(0) rotate(-3deg); }
}
@keyframes owl-wiggle-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-11deg); } }
@keyframes owl-wiggle-r { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(11deg); } }

/* Final step: swap the round eyes for a happy "◠◠" squint. */
.owl-svg .owl-eyes-happy { display: none; }
.tutorial-avatar.-celebrate .owl-svg .owl-eyes       { display: none; }
.tutorial-avatar.-celebrate .owl-svg .owl-eyes-happy { display: block; }

/* ----------------------------------------------------------------
   Finish confetti — a body-level burst fired on the Finish click
   (_celebrateBurst adds .-go). Sits just above the owl, pieces fan
   up and out from its head and fade.
   ---------------------------------------------------------------- */
.tutorial-confetti {
    position: fixed;
    left: 56px;          /* ~ owl head centre (avatar left:20 + ~36) */
    bottom: 86px;        /* just above the owl */
    width: 0; height: 0;
    z-index: 100026;     /* just above the avatar (100025) */
    pointer-events: none;
}
.tutorial-confetti i {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 1px;
    opacity: 0;
}
.tutorial-confetti.-go i { animation: owl-confetti 1.5s ease-out forwards; }
@keyframes owl-confetti {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}
.tutorial-confetti i:nth-child(1)  { background: #607DBF; --dx: -36px; --dy: -28px; --rot: 200deg; animation-delay: 0s;    }
.tutorial-confetti i:nth-child(2)  { background: #FFB74D; --dx: -24px; --dy: -42px; --rot: -160deg; animation-delay: .04s; }
.tutorial-confetti i:nth-child(3)  { background: #43a047; --dx:  -8px; --dy: -34px; --rot: 120deg; animation-delay: .10s;  }
.tutorial-confetti i:nth-child(4)  { background: #ef6ea8; --dx:   8px; --dy: -44px; --rot: -200deg; animation-delay: .02s; }
.tutorial-confetti i:nth-child(5)  { background: #9ec1ef; --dx:  26px; --dy: -30px; --rot: 150deg; animation-delay: .12s;  }
.tutorial-confetti i:nth-child(6)  { background: #516daa; --dx:  38px; --dy: -22px; --rot: -130deg; animation-delay: .06s; }
.tutorial-confetti i:nth-child(7)  { background: #FFB74D; --dx: -32px; --dy: -12px; --rot: 240deg; animation-delay: .14s;  }
.tutorial-confetti i:nth-child(8)  { background: #607DBF; --dx:  32px; --dy: -10px; --rot: -240deg; animation-delay: .16s; }
.tutorial-confetti i:nth-child(9)  { background: #43a047; --dx: -16px; --dy: -48px; --rot: 180deg; animation-delay: .08s;  }
.tutorial-confetti i:nth-child(10) { background: #ef6ea8; --dx:  16px; --dy: -50px; --rot: -180deg; animation-delay: .18s; }
.tutorial-confetti i:nth-child(11) { background: #9ec1ef; --dx:  -2px; --dy: -56px; --rot: 90deg; animation-delay: .22s;    }
.tutorial-confetti i:nth-child(12) { background: #FFB74D; --dx:   4px; --dy: -20px; --rot: -90deg; animation-delay: .20s;   }

/* Respect reduced-motion: the owl holds still (it stays expressive via state),
   and the confetti never plays. */
@media (prefers-reduced-motion: reduce) {
    .tutorial-avatar.-talking .tutorial-avatar-owl,
    .tutorial-avatar.-celebrate .tutorial-avatar-owl,
    .owl-svg .owl-eyes,
    .owl-svg .owl-wing,
    .owl-svg .owl-ear,
    .owl-svg .owl-beak,
    .tutorial-confetti.-go i { animation: none; }
}

/* "Leave a note" call-to-action pill, to the right of the owl. Hidden when the
   note is open or there's no step to attach a note to (-nofeedback). */
.tutorial-avatar-cta {
    pointer-events: auto;
    position: absolute;
    left: 80px;
    bottom: 24px;
    white-space: nowrap;
    border: 1px solid #607DBF;
    background: #fff;
    color: #3a4f7a;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.tutorial-avatar-cta::before { content: '\1F4AC'; margin-right: 0.3rem; }   /* speech balloon */
.tutorial-avatar-cta:hover { background: #f3f6fc; }
.tutorial-avatar.-nofeedback .tutorial-avatar-cta,
.tutorial-avatar.-noting .tutorial-avatar-cta { display: none; }

/* The note bubble, popping up above the owl. */
.tutorial-avatar-note {
    pointer-events: auto;
    position: absolute;
    left: 0;
    bottom: 84px;
    width: 280px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.tutorial-avatar-note::after {   /* little pointer toward the owl */
    content: '';
    position: absolute;
    left: 26px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    transform: rotate(45deg);
}
/* Warm intro above the compose box — invites feedback, not just "leave a note". */
.tutorial-avatar-prompt {
    font-size: 0.84rem;
    line-height: 1.35;
    color: #374151;
    margin-bottom: 0.45rem;
}
.tutorial-avatar-text {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
}
.tutorial-avatar-text:focus { outline: none; border-color: #607DBF; }
.tutorial-avatar-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.45rem;
}
/* the [hidden] attr must win over display:flex above (else Send/Cancel linger
   on the confirmation) */
.tutorial-avatar-row[hidden] { display: none; }
.tutorial-avatar-cancel,
.tutorial-avatar-delete,
.tutorial-avatar-edit,
.tutorial-avatar-send {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 5px;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.tutorial-avatar-send,
.tutorial-avatar-edit {
    background: #607DBF;
    border-color: #607DBF;
    color: #fff;
    font-weight: 600;
}
.tutorial-avatar-send:hover,
.tutorial-avatar-edit:hover { background: #516daa; }
.tutorial-avatar-cancel:hover { background: #f9fafb; }
/* Delete is a quiet destructive action — text stays muted red, no fill. */
.tutorial-avatar-delete { color: #b23b3b; }
.tutorial-avatar-delete:hover { background: #fdf0f0; }
.tutorial-avatar-done { color: #2e7d32; font-size: 0.85rem; padding: 0.2rem 0; }

/* VIEW face: the user's saved note for this step. */
.tutorial-avatar-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.2rem;
}
.tutorial-avatar-yournote {
    font-size: 0.85rem;
    color: #374151;
    white-space: pre-wrap;
    max-height: 8rem;
    overflow-y: auto;
}

/* Small dot on the owl when the current step already has the user's note. */
.tutorial-avatar.-hasnote .tutorial-avatar-owl::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #43a047;
    border: 2px solid #fff;
}
.tutorial-avatar-owl { position: relative; }

/* -----------------------------------------------------------------
   Opener / closer video modal
   Above the popover so the video takes the foreground when it plays.
   ----------------------------------------------------------------- */
.tutorial-video-modal {
    position: fixed;
    inset: 0;
    z-index: 100030;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tutorial-video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.72);
}
.tutorial-video-panel {
    position: relative;
    width: min(880px, 92vw);
    max-height: 88vh;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.tutorial-video-media {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.tutorial-video-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.tutorial-video-close:hover { background: rgba(0, 0, 0, 0.8); }