/* ============================================================================
   Jobs vs. Invoices guide — "Aurora" documentation theme
   ----------------------------------------------------------------------------
   A Stripe-grade, light, editorial documentation surface. Everything is scoped
   to #sidebar / .documentation-content / .jvi-* / #sidebar-toggle / #back-to-top
   so it never leaks onto the rest of the app (this template renders as a
   fragment inside base.html).

   ⚠ DO NOT rename .jvi-* state classes or element IDs — static/js/guides/
     jobs-vs-invoices.js depends on them. This file only restyles; the markup
     contract is unchanged.
   ============================================================================ */

/* ─────────────────────────── Design tokens ─────────────────────────── */
:root {
    /* Ink & surfaces */
    --ink-900: #0a1f3b;          /* hero headings */
    --ink-800: #11243f;
    --ink-700: #1c2a45;          /* section headings */
    --ink-600: #34405c;          /* body text */
    --ink-500: #4a5772;          /* secondary text */
    --ink-400: #6b7693;          /* muted */
    --ink-300: #9aa3ba;          /* faint */

    --surface:        #ffffff;
    --surface-sunken: #f7f9fc;   /* sunken panels / table stripes */

    --hairline:       #e7eaf3;
    --hairline-soft:  #eef1f8;
    --hairline-strong:#d8dde9;

    /* Brand */
    --primary:        #635bff;   /* Stripe-ish indigo */
    --primary-strong: #4f46e8;
    --primary-deep:   #3a32c4;
    --primary-050:    #f1f0ff;
    --primary-100:    #e7e5ff;
    --primary-200:    #d6d3ff;

    /* Status */
    --green:        #0f9d63;
    --green-deep:   #0b7a4d;
    --green-050:    #ecfdf4;
    --green-100:    #d6f6e7;

    --amber:        #b76a00;
    --amber-deep:   #8f5300;
    --amber-050:    #fff8eb;
    --amber-100:    #fdedcc;

    --red:          #df1b41;     /* Stripe error red */
    --red-deep:     #b3122f;
    --red-050:      #fef2f4;

    /* Signature aurora gradient (used sparingly: hero glow, accents, buttons) */
    --aurora: linear-gradient(102deg,
        #ffd6a5 0%,
        #ff8fab 16%,
        #ff5c9d 32%,
        #b15cff 52%,
        #6b73ff 70%,
        #4ec5ff 88%,
        #6ad6c8 100%);

    /* Elevation — layered, soft, Stripe-style */
    --shadow-xs: 0 1px 2px rgba(10, 31, 59, 0.05);
    --shadow-sm: 0 1px 2px rgba(10, 31, 59, 0.05), 0 2px 6px rgba(10, 31, 59, 0.04);
    --shadow-md: 0 1px 2px rgba(10, 31, 59, 0.05), 0 8px 24px rgba(10, 31, 59, 0.06), 0 2px 6px rgba(10, 31, 59, 0.04);
    --shadow-lg: 0 2px 4px rgba(10, 31, 59, 0.04), 0 18px 44px rgba(10, 31, 59, 0.10), 0 6px 14px rgba(10, 31, 59, 0.06);

    /* Radii */
    --r-xs: 7px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Type */
    --font-display: "Bricolage Grotesque", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Layout */
    --content-pad-x: 3.25rem;
    --content-pad-t: 2.75rem;
    --header-clearance: 6rem;     /* scroll-margin so fixed app nav doesn't cover anchors */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ─────────────────────────── Scoped base ─────────────────────────── */
.documentation-content {
    font-family: var(--font-sans);
    color: var(--ink-600);
    line-height: 1.65;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern", "liga", "calt";
}

.documentation-content a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.18s ease;
}
.documentation-content a:hover { color: var(--primary-strong); }

#sidebar a { color: var(--ink-600); text-decoration: none; }

::selection { background: var(--primary-100); color: var(--ink-900); }

/* ─────────────────────────── App shell tweaks ─────────────────────────── */
/* The fragment lives inside main.col-md-9. :has() is a progressive
   enhancement — without it the page is plain white, still fine. */
main:has(> .documentation-content) {
    background: var(--surface);
    min-height: 100vh;
}

.documentation-content {
    /* fills the full width of <main> — the hero and section bands break out to
       the main column edge; only the readable copy is held in by the gutter */
    margin: 0;
    padding: var(--content-pad-t) var(--content-pad-x) 5rem;
    position: relative;
    /* how far full-bleed children pull out to reach <main>'s border box:
       the content gutter + Bootstrap's column half-gutter (main has no px-* now) */
    --bleed-x: calc(var(--content-pad-x) + var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ─────────────────────────── Sidebar ─────────────────────────── */
#sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
    padding-top: 1.5rem;
    overflow-y: auto;
    background: linear-gradient(180deg, #fcfcff 0%, #fafbff 100%);
    border-right: 1px solid var(--hairline);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
    scrollbar-width: thin;
    scrollbar-color: var(--hairline-strong) transparent;
}
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

.sidebar-header {
    padding: 0 1.1rem 1.15rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--hairline-soft);
}

/* "Jobs & Invoices" badge icon — an aurora chip */
.beast-logo {
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-sm);
    background: var(--aurora);
    color: #fff;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(123, 92, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}
.sidebar-title {
    color: var(--ink-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.sidebar-header .input-group {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sidebar-header .input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-050);
}
.sidebar-header .input-group-text {
    background: transparent;
    border: 0;
    color: var(--ink-300);
    padding-right: 0.25rem;
}
.sidebar-header .form-control {
    border: 0;
    background: transparent;
    box-shadow: none !important;
    font-size: 0.875rem;
    color: var(--ink-700);
    padding-left: 0.25rem;
}
.sidebar-header .form-control::placeholder { color: var(--ink-300); }

.sidebar-heading {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-300);
    font-weight: 700;
    padding-left: 1.5rem;
    margin-top: 1.6rem;
    margin-bottom: 0.4rem;
}

#sidebar .nav-link {
    position: relative;
    color: var(--ink-500);
    border-radius: var(--r-xs);
    padding: 0.42rem 0.85rem 0.42rem 1.5rem;
    margin: 0.05rem 0.6rem;
    font-size: 0.86rem;
    line-height: 1.4;
    font-weight: 500;
    transition: color 0.16s ease, background-color 0.16s ease;
}
#sidebar .nav-link::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 1.05rem;
    border-radius: 3px;
    background: var(--aurora);
    transition: transform 0.22s var(--ease-spring);
}
#sidebar .nav-link:hover { color: var(--ink-800); background: var(--surface-sunken); }
#sidebar .nav-link.active {
    color: var(--primary-deep);
    background: var(--primary-050);
    font-weight: 600;
}
#sidebar .nav-link.active::before { transform: translateY(-50%) scaleY(1); }

/* ─────────────────────────── Hero / content header ─────────────────────────── */
/* Modeled on the Stripe-style marketing hero: an animated multi-radial colour
   mesh clipped on a diagonal, a faint line grid masked to an ellipse, and a
   white wash that resolves the bottom to pure #fff so the hero melts into the
   page with no seam. */
.content-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: calc(var(--content-pad-t) * -1) calc(var(--bleed-x) * -1) 2.5rem;
    padding: calc(var(--content-pad-t) + 1.4rem) var(--bleed-x) 3.75rem;
    background: #fff;
}

/* Colour mesh */
.content-hero-gradient {
    position: absolute;
    inset: -22% -6% 0 -6%;
    z-index: -2;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    background:
        radial-gradient(at 18% 28%, #635BFF 0%, transparent 55%),
        radial-gradient(at 82% 18%, #00D4FF 0%, transparent 50%),
        radial-gradient(at 72% 74%, #FF7AB6 0%, transparent 45%),
        radial-gradient(at 28% 80%, #7DF9FF 0%, transparent 55%),
        radial-gradient(at 50% 50%, #635BFF 0%, transparent 60%);
    background-size: 200% 200%;
    opacity: 0.82;
    filter: saturate(1.05);
    animation: content-hero-shift 16s ease-in-out infinite;
    pointer-events: none;
}
.content-hero-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.58) 0%,
        rgba(255, 255, 255, 0.74) 55%,
        #ffffff 100%);
    pointer-events: none;
}
@keyframes content-hero-shift {
    0%   { background-position:   0%   0%,  100%   0%,  80% 100%, 20% 100%, 50% 50%; }
    25%  { background-position:  20%  10%,   80%  20%,  90%  90%, 10%  90%, 60% 40%; }
    50%  { background-position:  10%  30%,   90%  40%,  70% 100%, 30%  80%, 40% 60%; }
    75%  { background-position:  30%  20%,   70%  10%, 100%  80%, 20%  70%, 55% 45%; }
    100% { background-position:   0%   0%,  100%   0%,  80% 100%, 20% 100%, 50% 50%; }
}

/* Line grid */
.content-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right,  rgba(10, 37, 64, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 37, 64, 0.045) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at 35% center, #000 25%, transparent 72%);
    mask-image: radial-gradient(ellipse at 35% center, #000 25%, transparent 72%);
    pointer-events: none;
}

/* Title — big, tight, editorial */
.content-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-900);
    font-size: clamp(2.7rem, 1.4rem + 4.2vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.032em;
    margin: 0 0 1.35rem;
    max-width: 16ch;
    text-wrap: balance;
}
.content-header .lead {
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--ink-500);
    max-width: 52ch;
    font-weight: 400;
}

/* Action row */
.content-meta {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-top: 1.9rem;
}
.content-header .content-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary);
    color: #fff;
    padding: 0.72rem 1.2rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.content-header .content-cta:hover {
    background: var(--primary-strong);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.content-header .content-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-900);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.15s var(--ease-out);
}
.content-header .content-cta-ghost:hover { color: var(--primary); }
.content-header .content-cta svg,
.content-header .content-cta-ghost svg { transition: transform 0.15s var(--ease-out); }
.content-header .content-cta:hover svg,
.content-header .content-cta-ghost:hover svg { transform: translateX(3px); }

/* Last-updated line below the actions */
.content-updated {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin: 1.5rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-400);
}
.content-updated .bi { font-size: 0.92rem; color: var(--ink-300); }

@media (prefers-reduced-motion: reduce) {
    .content-hero-gradient { animation: none; }
    .documentation-content,
    .documentation-content *,
    .documentation-content *::before,
    .documentation-content *::after,
    #sidebar,
    #sidebar *,
    #sidebar-toggle,
    .sidebar-backdrop {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─────────────────────────── Section scaffolding ─────────────────────────── */
/* Sections run full-bleed (cancel the content gutter) so the alternating
   white / soft-grey backgrounds read as edge-to-edge bands, then re-inset
   their own content with matching horizontal padding. */
.content-section {
    margin: 0 calc(var(--bleed-x) * -1);
    padding: 3.5rem var(--bleed-x);
    scroll-margin-top: var(--header-clearance);
}
.content-section--soft {
    background: var(--surface-sunken);
}
/* breathing room before the footer regardless of the last section's tone */
.content-section:last-child { padding-bottom: 4.75rem; }

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -0.025em;
    color: var(--ink-900);
    margin-bottom: 1.1rem;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.section-title::before {
    content: "";
    width: 0.3rem;
    height: 1.5rem;
    border-radius: 3px;
    background: var(--aurora);
    flex-shrink: 0;
}

/* Typography */
.documentation-content h3 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 650;
    color: var(--ink-800);
    letter-spacing: -0.015em;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.documentation-content p {
    margin-bottom: 1.35rem;
    line-height: 1.72;
    color: var(--ink-600);
}
.documentation-content strong { color: var(--ink-800); font-weight: 650; }

.documentation-content code {
    font-family: var(--font-mono);
    background: var(--primary-050);
    color: var(--primary-deep);
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    font-size: 0.84em;
    border: 1px solid var(--primary-100);
    white-space: nowrap;
}

/* generic list spacing (the jvi-* lists below manage their own) */
.documentation-content ul:not(.nav):not(.jvi-result-features):not(.jvi-workflow-steps):not(.jvi-rules) li {
    margin-bottom: 0.45rem;
}

/* ─────────────────────────── Bootstrap cards (scenario cards inherit) ─────────────────────────── */
.documentation-content .card {
    border-radius: var(--r-lg);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s;
    overflow: hidden;
}
.documentation-content .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--hairline-strong);
}
.documentation-content .card-header {
    background: linear-gradient(180deg, #fff, #fdfdff);
    border-bottom: 1px solid var(--hairline-soft);
    font-weight: 600;
    padding: 1.1rem 1.35rem;
}
.documentation-content .card-body { padding: 1.35rem; }
.documentation-content .card-footer {
    background: var(--surface-sunken);
    border-top: 1px solid var(--hairline-soft);
    padding: 0.9rem 1.35rem;
}
/* ─────────────────────────── "The short version" — rule-of-thumb card ─────────────────────────── */
/* Closes #mental-model with a single tinted "rule of thumb" band, in the same
   card family as the use-case scenarios. (The card carries only a footer — the
   relationship map above it does the explaining.) */

/* Rule of thumb — sits flush in the card footer as a tinted band */
.jvi-essentials-card .card-footer {
    padding: 0;
    background: linear-gradient(120deg, var(--primary-050), #fff 72%);
}
.jvi-rule-of-thumb {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 1.1rem 1.35rem;
}
.jvi-rule-of-thumb-icon {
    flex-shrink: 0;
    width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--aurora);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(123, 92, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.jvi-rule-of-thumb-text { min-width: 0; }
.jvi-rule-of-thumb-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--primary-deep);
    margin-bottom: 0.2rem;
}
.jvi-rule-of-thumb p {
    margin: 0;
    font-size: 0.95rem; line-height: 1.6;
    color: var(--ink-600);
}
.jvi-rule-of-thumb p strong { color: var(--ink-900); font-weight: 650; }

/* ============================================================================
   DECISION ENGINE  — the centrepiece interactive widget
   ============================================================================ */
#decision-helper {
    position: relative;
}
.jvi-flowchart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 2.25rem;
    margin-top: 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    background:
        radial-gradient(640px 280px at 50% -10%, rgba(123, 92, 255, 0.07), transparent 60%),
        linear-gradient(180deg, #fcfcff, #fafbff);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.jvi-flowchart::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(10, 31, 59, 0.045) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(560px 360px at 50% 0%, #000, transparent 70%);
    mask-image: radial-gradient(560px 360px at 50% 0%, #000, transparent 70%);
    pointer-events: none;
}
.jvi-flowchart > * { position: relative; }

/* ── Progress rail ── */
.jvi-flow-progress {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
}
.jvi-pn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid var(--hairline-strong);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.78rem; font-weight: 600;
    color: var(--ink-400);
    background: var(--surface);
    flex-shrink: 0;
    transition: all 0.4s var(--ease-out);
}
.jvi-pn.active {
    border-color: var(--primary);
    color: var(--primary-deep);
    box-shadow: 0 0 0 5px var(--primary-050);
}
.jvi-pn.done {
    border-color: transparent;
    background: var(--ink-900);
    color: #fff;
    box-shadow: 0 4px 12px rgba(10, 31, 59, 0.22);
}
.jvi-pn.done.skipped {
    background: var(--hairline-strong);
    color: #fff;
    box-shadow: none;
    opacity: 0.7;
}
.jvi-pn.result-node { color: var(--ink-300); }
.jvi-pn.result-node svg { display: block; }
.jvi-pn.result-node.active {
    border-color: transparent;
    background: var(--green);
    color: #fff;
    box-shadow: 0 0 0 5px var(--green-050), 0 6px 14px rgba(15, 157, 99, 0.25);
}
.jvi-pn.result-node.active.amber {
    background: var(--amber);
    box-shadow: 0 0 0 5px var(--amber-050), 0 6px 14px rgba(183, 106, 0, 0.25);
}
.jvi-pl {
    flex: 1; height: 3px; margin: 0 2px;
    background: var(--hairline);
    border-radius: 3px;
    position: relative; overflow: hidden;
}
.jvi-pl-fill {
    position: absolute; inset: 0 auto 0 0;
    width: 0;
    background: var(--aurora);
    transition: width 0.55s var(--ease-out);
}
.jvi-pl.filled .jvi-pl-fill { width: 100%; }

/* ── "Start here" pill ── */
.jvi-flow-start {
    background: var(--ink-900);
    border-radius: var(--r-pill);
    padding: 0.6rem 1.5rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.7rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    box-shadow: 0 6px 18px rgba(10, 31, 59, 0.22);
}

/* ── Connectors ── */
.jvi-flow-connector {
    width: 2px; height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--hairline-strong), var(--hairline));
    transition: height 0.4s var(--ease-out);
    flex-shrink: 0;
}
.jvi-flow-connector.visible { height: 2.5rem; }

/* ── Question steps ── */
.jvi-flow-step {
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
    max-height: 0; overflow: hidden;
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), max-height 0.5s var(--ease-out);
    pointer-events: none;
}
.jvi-flow-step.visible {
    max-height: 1200px; overflow: visible;
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
}
.jvi-flow-step.jvi-step2-variant { display: none; }
.jvi-flow-step.jvi-step2-variant.visible { display: flex; }

.jvi-flow-question {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 1.6rem 1.7rem;
    width: 100%;
    max-width: 580px;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.jvi-flow-question-wide { max-width: min(840px, 100%); }
.jvi-flow-step.answered .jvi-flow-question {
    border-color: var(--primary-200);
    background: linear-gradient(135deg, var(--primary-050), #fff 60%);
    box-shadow: var(--shadow-sm);
}
.jvi-q-number {
    font-family: var(--font-mono);
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--primary-deep);
    margin-bottom: 0.4rem;
}
.jvi-q-text {
    font-family: var(--font-display);
    font-weight: 650; font-size: 1.18rem;
    color: var(--ink-900); line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: 1.15rem;
}

/* ── Option buttons ── */
.jvi-q-options { display: flex; flex-direction: column; gap: 0.6rem; }
.jvi-q-opt {
    position: relative;
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
    cursor: pointer; text-align: left; width: 100%;
    color: var(--ink-600);
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease-out), background 0.18s, opacity 0.18s;
}
.jvi-q-opt::after {
    content: "";
    position: absolute; right: 0.95rem; top: 1rem;
    width: 1.05rem; height: 1.05rem;
    border-radius: 50%;
    border: 2px solid var(--hairline-strong);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.jvi-q-opt:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.jvi-q-opt:hover::after { border-color: var(--primary); }
.jvi-q-opt.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary-050), #fff 70%);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
}
.jvi-q-opt.selected::after {
    border-color: var(--primary);
    background: var(--primary)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.6rem no-repeat;
    box-shadow: 0 0 0 4px var(--primary-050);
}
.jvi-q-opt.selected .jvi-q-opt-title { color: var(--primary-deep); }
.jvi-q-opt.unselected { opacity: 0.4; }
.jvi-q-opt.unselected:hover { opacity: 0.75; transform: none; box-shadow: none; border-color: var(--hairline-strong); }
.jvi-q-opt.unselected:hover::after { border-color: var(--hairline-strong); }
.jvi-q-opt-icon {
    flex-shrink: 0;
    font-size: 1.15rem; line-height: 1;
    width: 2.1rem; height: 2.1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
}
.jvi-q-opt.selected .jvi-q-opt-icon { background: #fff; border-color: var(--primary-200); }
.jvi-q-opt-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; flex: 1; padding-right: 1.6rem; }
.jvi-q-opt-title { font-weight: 650; font-size: 0.94rem; color: var(--ink-800); line-height: 1.35; }
.jvi-q-opt-sub { font-size: 0.83rem; color: var(--ink-400); line-height: 1.45; }

@media (min-width: 768px) {
    .jvi-q-options { display: grid; grid-template-columns: 1fr 1fr; }
    .jvi-q-options .jvi-q-opt:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* ── Result cards ── */
.jvi-flow-result-wrap {
    width: 100%; max-width: 640px;
    max-height: 0; overflow: hidden;
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), max-height 0.5s var(--ease-out), margin 0.45s;
    pointer-events: none;
}
.jvi-flow-result-wrap.visible {
    max-height: 1400px; overflow: visible;
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
}
.jvi-flow-result {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.6rem 1.7rem 1.7rem;
    background: var(--surface);
    overflow: hidden;
}
.jvi-flow-result::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
}
.jvi-flow-result::after {
    content: "";
    position: absolute; z-index: 0;
    top: -90px; right: -90px;
    width: 240px; height: 240px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
    pointer-events: none;
}
.jvi-flow-result > * { position: relative; z-index: 1; }
.result-jobs::before { background: linear-gradient(90deg, var(--green), #45d8a0); }
.result-jobs::after { background: var(--green-100); }
.result-mixed::before { background: linear-gradient(90deg, var(--amber), #f5b342); }
.result-mixed::after { background: var(--amber-100); }
.result-invoices::before { background: var(--aurora); }
.result-invoices::after { background: var(--primary-100); }

.jvi-result-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    padding: 0.28rem 0.65rem;
    border-radius: var(--r-pill);
    margin-bottom: 0.85rem;
    border: 1px solid;
}
.jvi-result-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.result-jobs .jvi-result-badge { color: var(--green-deep); background: var(--green-050); border-color: var(--green-100); }
.result-mixed .jvi-result-badge { color: var(--amber-deep); background: var(--amber-050); border-color: var(--amber-100); }
.result-invoices .jvi-result-badge { color: var(--primary-deep); background: var(--primary-050); border-color: var(--primary-100); }

.jvi-result-title {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin-bottom: 0.55rem;
}
.jvi-flow-result p { font-size: 0.95rem; color: var(--ink-600); line-height: 1.65; margin-bottom: 0; }
.jvi-result-features { list-style: none; padding: 0; margin: 1rem 0 0; }
.jvi-result-features li {
    font-size: 0.92rem; color: var(--ink-600);
    padding: 0.32rem 0 0.32rem 1.7rem;
    margin: 0; position: relative; line-height: 1.5;
}
.jvi-result-features li::before {
    content: "";
    position: absolute; left: 0; top: 0.55rem;
    width: 1.05rem; height: 1.05rem;
    border-radius: 50%;
    background-position: center; background-repeat: no-repeat; background-size: 0.62rem;
}
.result-jobs .jvi-result-features li::before {
    background-color: var(--green-050);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a4d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.result-mixed .jvi-result-features li::before {
    background-color: var(--amber-050);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f5300' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.result-invoices .jvi-result-features li::before {
    background-color: var(--primary-050);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a32c4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.jvi-result-meta {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-size: 0.84rem; line-height: 1.5;
    color: var(--ink-500);
}
.jvi-result-meta-label { font-weight: 700; margin-right: 0.35rem; color: var(--ink-800); }
.jvi-result-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 1.05rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--primary-deep);
    transition: gap 0.18s var(--ease-out), color 0.18s;
}
.jvi-result-link:hover { color: var(--primary-strong); gap: 0.5rem; }

/* ── Reset button ── */
.jvi-flow-reset {
    display: none; align-items: center; gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    color: var(--ink-500);
    font-family: var(--font-mono);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    margin-top: 1.75rem;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease-out);
}
.jvi-flow-reset.visible { display: inline-flex; }
.jvi-flow-reset:hover { border-color: var(--primary); color: var(--primary-deep); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.jvi-flow-reset svg { display: block; }

/* ============================================================================
   USE-CASE / SCENARIO CARDS
   ============================================================================ */
.jvi-scenario-card { margin-bottom: 1.5rem; scroll-margin-top: var(--header-clearance); }
.jvi-scenario-header { display: flex; align-items: center; gap: 1rem; }
.jvi-scenario-avatar {
    width: 3rem; height: 3rem;
    border-radius: var(--r-md);
    background:
        linear-gradient(135deg, rgba(123, 92, 255, 0.12), rgba(78, 197, 255, 0.1)),
        var(--surface);
    border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem; line-height: 1;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}
.jvi-scenario-title-area { flex: 1; min-width: 0; }
.jvi-scenario-case {
    font-family: var(--font-mono);
    font-size: 0.65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink-300);
    margin-bottom: 0.18rem;
}
.jvi-scenario-title {
    font-family: var(--font-display);
    font-weight: 650; font-size: 1.08rem;
    letter-spacing: -0.015em;
    color: var(--ink-900); line-height: 1.3;
    margin-bottom: 0.15rem;
}
.jvi-scenario-subtitle { font-size: 0.86rem; color: var(--ink-400); line-height: 1.45; }

.jvi-scenario-body { padding: 1.4rem 1.35rem; }
.jvi-scenario-section-label {
    font-family: var(--font-mono);
    font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--primary-deep);
    margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.45rem;
}
.jvi-scenario-section-label::before {
    content: ""; width: 1rem; height: 1px; background: var(--primary-200);
}
.jvi-scenario-profile + .jvi-scenario-section-label,
.jvi-scenario-workflow + .jvi-scenario-section-label,
.jvi-scenario-section-label + .jvi-scenario-section-label { margin-top: 1.3rem; }
.jvi-scenario-profile p { margin-bottom: 0.7rem; line-height: 1.6; font-size: 0.95rem; }
.jvi-scenario-profile p:last-child { margin-bottom: 0; }
.jvi-scenario-workflow { margin: 0; }
.jvi-workflow-steps { list-style: none; padding: 0; margin: 0; counter-reset: wf; }
.jvi-workflow-steps li {
    font-size: 0.92rem; color: var(--ink-600);
    padding: 0.32rem 0 0.32rem 1.85rem;
    margin: 0; position: relative; line-height: 1.55;
    counter-increment: wf;
}
.jvi-workflow-steps li::before {
    content: counter(wf);
    position: absolute; left: 0; top: 0.32rem;
    width: 1.2rem; height: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
    color: var(--primary-deep);
    background: var(--primary-050);
    border: 1px solid var(--primary-100);
    border-radius: 50%;
}
.jvi-scenario-note { font-size: 0.85rem; color: var(--ink-400); margin: 1rem 0 0; line-height: 1.5; }
.jvi-scenario-note i { color: var(--primary); }

.jvi-scenario-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.jvi-verdict-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.32rem 0.7rem;
    border-radius: var(--r-pill);
    border: 1px solid;
}
.jvi-verdict-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jvi-verdict-badge.green { color: var(--green-deep); background: var(--green-050); border-color: var(--green-100); }
.jvi-verdict-badge.amber { color: var(--amber-deep); background: var(--amber-050); border-color: var(--amber-100); }
.jvi-scenario-uses { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--ink-300); }

/* ============================================================================
   REFERENCE — <details> accordions
   ============================================================================ */
.jvi-details {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    scroll-margin-top: var(--header-clearance);
}
.jvi-details[open] { box-shadow: var(--shadow-sm); border-color: var(--hairline-strong); }
.jvi-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.05rem 1.35rem 1.05rem 2.85rem;
    position: relative;
    user-select: none;
    transition: background 0.18s;
    display: flex; flex-direction: column; gap: 0.12rem;
}
.jvi-details > summary::-webkit-details-marker { display: none; }
.jvi-details > summary:hover { background: var(--surface-sunken); }
.jvi-details > summary::before {
    content: "";
    position: absolute;
    left: 1.15rem; top: 1.2rem;
    width: 0.5rem; height: 0.5rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    transition: transform 0.22s var(--ease-out);
}
.jvi-details[open] > summary::before { transform: rotate(45deg); }
.jvi-details-title { font-family: var(--font-display); font-weight: 650; font-size: 1rem; color: var(--ink-900); letter-spacing: -0.01em; }
.jvi-details-hint { font-size: 0.84rem; color: var(--ink-400); }
.jvi-details-body { padding: 1rem 1.35rem 1.5rem; border-top: 1px solid var(--hairline-soft); }
.jvi-details-body > *:last-child { margin-bottom: 0; }

/* ── Comparison table ── */
.jvi-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
}
.jvi-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.9rem; }
.jvi-table thead th {
    background: var(--ink-900);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 600; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.8rem 1rem; text-align: left;
}
.jvi-table tbody th, .jvi-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--hairline-soft);
    vertical-align: top; text-align: left; line-height: 1.55;
}
.jvi-table tbody th[scope="row"] {
    font-weight: 600; color: var(--ink-800);
    width: 27%; background: var(--surface-sunken);
}
.jvi-table tbody td { color: var(--ink-600); }
.jvi-table tbody tr:nth-child(even) td { background: rgba(247, 249, 252, 0.55); }
.jvi-table tbody tr:hover td { background: var(--primary-050); }
.jvi-table tbody tr:hover th[scope="row"] { background: var(--primary-100); }
.jvi-table tbody tr:last-child th, .jvi-table tbody tr:last-child td { border-bottom: none; }
.jvi-table code {
    font-family: var(--font-mono);
    background: #fff;
    color: var(--ink-800);
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    font-size: 0.84em;
    border: 1px solid var(--hairline-strong);
}
.jvi-table thead th code { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.jvi-table tbody th[scope="row"] code { background: #fff; }

/* ── Rules panels ── */
.jvi-panel {
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
}
.jvi-panel:last-child { margin-bottom: 0; }
.jvi-panel-label {
    font-family: var(--font-mono);
    font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--primary-deep);
    margin-bottom: 0.55rem;
}
.jvi-rules { list-style: none; padding: 0; margin: 0; }
.jvi-rules li {
    position: relative;
    padding: 0.32rem 0 0.32rem 1.45rem;
    margin: 0; line-height: 1.6;
    font-size: 0.93rem; color: var(--ink-600);
}
.jvi-rules li::before {
    content: ""; position: absolute; left: 0.15rem; top: 0.78rem;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
}

/* ── Common mistakes ── */
.jvi-mistake {
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    padding: 1.15rem 1.3rem;
    margin-bottom: 0.85rem;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.jvi-mistake:last-child { margin-bottom: 0; }
.jvi-mistake h3 {
    font-family: var(--font-display);
    font-size: 0.98rem; font-weight: 650;
    color: var(--ink-900);
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
}
.jvi-mistake-row {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.55rem 0.7rem;
    font-size: 0.92rem; line-height: 1.55;
    border-radius: var(--r-xs);
}
.jvi-mistake-row + .jvi-mistake-row { margin-top: 0.4rem; }
.jvi-mistake-row.dont { background: var(--red-050); box-shadow: inset 3px 0 0 var(--red); }
.jvi-mistake-row.do { background: var(--green-050); box-shadow: inset 3px 0 0 var(--green); }
.jvi-mistake-mark { flex-shrink: 0; font-weight: 800; line-height: 1.55; }
.jvi-mistake-mark.dont { color: var(--red); }
.jvi-mistake-mark.do { color: var(--green); }
.jvi-mistake-label {
    font-family: var(--font-mono);
    font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-right: 0.4rem;
}
.jvi-mistake-row.dont .jvi-mistake-label { color: var(--red-deep); }
.jvi-mistake-row.do .jvi-mistake-label { color: var(--green-deep); }
.jvi-mistake-row strong { color: var(--ink-800); }

/* ── Glossary ── */
.jvi-glossary { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 768px) { .jvi-glossary { grid-template-columns: minmax(170px, 0.9fr) 3fr; column-gap: 1.75rem; } }
.jvi-glossary dt {
    font-family: var(--font-display);
    font-weight: 650; font-size: 0.92rem;
    color: var(--primary-deep);
    padding-top: 0.85rem; padding-bottom: 0.85rem;
    border-top: 1px solid var(--hairline-soft);
}
.jvi-glossary dd {
    margin: 0; color: var(--ink-500);
    font-size: 0.93rem; line-height: 1.6;
    padding-top: 0.85rem; padding-bottom: 0.85rem;
    border-top: 1px solid var(--hairline-soft);
}
.jvi-glossary dt:first-of-type, .jvi-glossary dd:first-of-type { border-top: none; padding-top: 0; }
@media (max-width: 767.98px) {
    .jvi-glossary dt { padding-bottom: 0.2rem; border-top: 1px solid var(--hairline-soft); }
    .jvi-glossary dd { border-top: none; padding-top: 0.1rem; }
    .jvi-glossary dt:first-of-type { padding-top: 0; border-top: none; }
}

/* ============================================================================
   FLOATING CONTROLS — mobile sidebar toggle, backdrop, back-to-top, search
   ============================================================================ */
#sidebar-toggle {
    display: none;
    position: fixed; bottom: 26px; right: 26px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--ink-900);
    color: #fff; border: none;
    font-size: 20px; padding: 0;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(10, 31, 59, 0.3);
    align-items: center; justify-content: center;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
#sidebar-toggle:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 30px rgba(10, 31, 59, 0.35); }

/* #back-to-top: intentionally NOT re-skinned — it keeps the host template's
   green FAB (tools/guides.html sets background-color #2d8a4e), so it matches
   the other guides (e.g. beast-forms-guide). Only its mobile size/position is
   nudged below — see the mobile block. */

.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(10, 31, 59, 0.42);
    backdrop-filter: blur(2px);
    z-index: 1028; display: none;
}
.sidebar-backdrop.show { display: block; }

/* Live-search dropdown (built by the JS) */
.search-results {
    position: absolute;
    width: 100%; left: 0; top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 320px; overflow-y: auto;
    overflow: hidden;
}
.search-results-list { list-style: none; padding: 0.3rem; margin: 0; }
.search-results-list li { border-bottom: 0; }
.search-results-list a {
    display: block;
    padding: 0.6rem 0.7rem;
    color: var(--ink-700) !important;
    border-radius: var(--r-xs);
    font-size: 0.88rem;
    transition: background 0.15s;
}
.search-results-list a:hover { background: var(--primary-050); color: var(--primary-deep) !important; }
.search-results-list .text-muted { color: var(--ink-300) !important; font-size: 0.8rem; }
.search-results p { padding: 0.7rem 0.9rem; margin: 0; color: var(--ink-400); font-size: 0.86rem; }

/* Reused #sidebar-toggle as .btn.btn-primary in markup — neutralise Bootstrap */
#sidebar-toggle.btn-primary { --bs-btn-bg: var(--ink-900); --bs-btn-border-color: var(--ink-900); --bs-btn-hover-bg: var(--ink-800); --bs-btn-hover-border-color: var(--ink-800); }

/* ============================================================================
   ENTRANCE ANIMATIONS
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
    @keyframes jvi-rise {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .content-header .content-title,
    .content-header .lead,
    .content-header .content-meta,
    .content-header .content-updated {
        animation: jvi-rise 0.7s var(--ease-out) both;
    }
    .content-header .content-title { animation-delay: 0.07s; }
    .content-header .lead { animation-delay: 0.14s; }
    .content-header .content-meta { animation-delay: 0.21s; }
    .content-header .content-updated { animation-delay: 0.28s; }

    /* Scroll-driven section reveals — progressive enhancement (Chromium 115+) */
    @supports (animation-timeline: view()) {
        @keyframes jvi-section-in {
            from { opacity: 0; transform: translateY(26px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .content-section {
            animation: jvi-section-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 32%;
        }
        #mental-model { animation: none; }  /* first one is above the fold */
    }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 991.98px) {
    .documentation-content { --content-pad-x: 1.75rem; --content-pad-t: 2.25rem; padding-bottom: 4rem; }
    .section-title { font-size: 1.6rem; }
    .jvi-flowchart { padding: 1.5rem 1rem 1.75rem; }
}

@media (max-width: 767.98px) {
    #sidebar {
        position: fixed; left: -100%; top: 0;
        height: 100vh; z-index: 1029;
        transition: left 0.3s var(--ease-out);
        overflow-y: auto;
        width: 84%; max-width: 320px;
        box-shadow: var(--shadow-lg);
    }
    #sidebar.show { left: 0; }
    #sidebar-toggle { display: flex; }

    #back-to-top { bottom: 88px; }
    #sidebar-toggle, #back-to-top { width: 46px; height: 46px; font-size: 18px; }

    .documentation-content { --content-pad-x: 0.75rem; --content-pad-t: 1.5rem; padding-bottom: 3.5rem; }
    .content-header { padding-bottom: 2rem; margin-bottom: 2.25rem; }
    .content-header .lead { max-width: none; }

    /* Sections run edge-to-edge on phones — only loose copy (titles, intro text)
       keeps a side gutter, and boxed surfaces drop their side chrome so they read
       as clean full-bleed strips rather than rounded boxes jammed to the screen. */
    .content-section { padding-left: 0; padding-right: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .content-section:last-child { padding-bottom: 3.5rem; }
    .content-section > .section-title,
    .content-section > p { padding-left: 1rem; padding-right: 1rem; }
    .documentation-content .card,
    .jvi-flowchart,
    .jvi-details {
        border-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
    }
    /* keep a comfortable, consistent text gutter inside the now full-bleed cards */
    .documentation-content .card-header,
    .documentation-content .card-body { padding-left: 1rem; padding-right: 1rem; }

    .jvi-flow-question { padding: 1.3rem 1.15rem; }
    .jvi-q-text { font-size: 1.05rem; }
    .jvi-rule-of-thumb { padding-left: 1rem; padding-right: 1rem; }
    .jvi-scenario-header { gap: 0.75rem; }
    .jvi-scenario-avatar { width: 2.7rem; height: 2.7rem; font-size: 1.3rem; }
    .section-title { font-size: 1.4rem; }
    .jvi-result-title { font-size: 1.25rem; }
}