/* ===================================================================== * BIDS Manager documentation -- design system * * Tokens mirror the GUI's QSS palette (theme_manager.py) so the docs and * the app feel like one product. Layout / motion idioms (glow filters, * hero rotation, animated workflow) lifted from INDoS_BrainHack. * * Dark is the default; the light theme is engaged via [data-theme="light"] * on . The toggle persists the choice in localStorage. * ===================================================================== */ :root { color-scheme: dark; /* Surfaces */ --bg: #0a0e13; --bg-soft: #11161d; --panel: #161b22; --panel-strong: #1c2128; --border: rgba(255, 255, 255, 0.12); /* Type */ --text: #e6edf3; --muted: #8b949e; --quiet: #656d76; /* Accents (match bidsmgr.gui.theme_manager DARK palette) */ --accent: #58a6ff; --success: #3fb950; --warning: #d29922; --error: #f85149; --purple: #d2a8ff; --teal: #39c5cf; /* Hero-journey palette (BrainHack-style workflow widget colors). */ --cyan: #4de3ff; --lime: #b8f46d; --coral: #ff8b6b; --violet: #bda6ff; /* Decorative glow tokens (from INDoS aesthetic) */ --glow-accent: rgba(88, 166, 255, 0.48); --glow-purple: rgba(210, 168, 255, 0.42); --glow-success: rgba(63, 185, 80, 0.40); /* Per-step palette used by the installation pipeline visualization. * Seven distinct hues so each install stage owns its own color. */ --step1: #58a6ff; /* folder blue */ --step2: #39c5cf; /* download teal */ --step3: #d2a8ff; /* extract purple */ --step4: #ffb454; /* venv amber */ --step5: #3fb950; /* pip install green */ --step6: #ff79c6; /* launcher pink */ --step7: #f85149; /* uninstaller red */ --step1-glow: rgba( 88, 166, 255, 0.55); --step2-glow: rgba( 57, 197, 207, 0.55); --step3-glow: rgba(210, 168, 255, 0.55); --step4-glow: rgba(255, 180, 84, 0.55); --step5-glow: rgba( 63, 185, 80, 0.55); --step6-glow: rgba(255, 121, 198, 0.55); --step7-glow: rgba(248, 81, 73, 0.55); --header-bg: rgba(10, 14, 19, 0.62); --shadow: 0 24px 80px rgba(0, 0, 0, 0.42); --radius: 10px; --max: 1180px; --max-narrow: 860px; /* Frosted-glass surface tokens. These are the translucent panel * fills that get backdrop-blur applied. The colored blob layer * (body::after) shows through and tints the glass. */ --panel-glass: rgba(22, 27, 34, 0.58); --panel-glass-strong: rgba(22, 27, 34, 0.78); --border-glass: rgba(255, 255, 255, 0.10); /* Colored background blobs for the glass effect (dark theme). */ --blob-1: rgba( 88, 166, 255, 0.22); --blob-2: rgba(210, 168, 255, 0.20); --blob-3: rgba( 57, 197, 207, 0.14); --blob-4: rgba( 63, 185, 80, 0.12); } [data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-soft: #f6f8fa; --panel: #ffffff; --panel-strong: #eef1f4; --border: rgba(18, 23, 32, 0.13); --text: #1f2328; --muted: #656d76; --quiet: #8c959f; --accent: #0969da; --success: #1a7f37; --warning: #9a6700; --error: #cf222e; --purple: #8250df; --teal: #1d7a8c; /* Hero-journey palette (light variants of BrainHack colors). */ --cyan: #067f9a; --lime: #3f7c14; --coral: #b94f33; --violet: #6550b8; --glow-accent: rgba(9, 105, 218, 0.32); --glow-purple: rgba(130, 80, 223, 0.32); --glow-success: rgba(26, 127, 55, 0.30); /* Per-step palette (light theme). Darkened vs. dark-theme variants * so the chip text and SVG labels meet WCAG AA on the panel * background. */ --step1: #0969da; --step2: #126b7c; --step3: #6f3eb3; --step4: #8a5e00; --step5: #1a7f37; --step6: #b41f6e; --step7: #cf222e; --step1-glow: rgba( 9, 105, 218, 0.32); --step2-glow: rgba( 29, 122, 140, 0.32); --step3-glow: rgba(130, 80, 223, 0.32); --step4-glow: rgba(191, 135, 0, 0.32); --step5-glow: rgba( 26, 127, 55, 0.32); --step6-glow: rgba(212, 54, 140, 0.32); --step7-glow: rgba(207, 34, 46, 0.32); --header-bg: rgba(255, 255, 255, 0.62); --shadow: 0 24px 80px rgba(34, 47, 68, 0.18); /* Frosted-glass surfaces (light theme). */ --panel-glass: rgba(255, 255, 255, 0.62); --panel-glass-strong: rgba(255, 255, 255, 0.82); --border-glass: rgba(18, 23, 32, 0.10); /* Colored background blobs (light theme): tinted but quieter so * the page surface stays bright and text readable. */ --blob-1: rgba( 9, 105, 218, 0.12); --blob-2: rgba(130, 80, 223, 0.12); --blob-3: rgba( 29, 122, 140, 0.10); --blob-4: rgba( 26, 127, 55, 0.08); } /* -------------------------------------------------------------------- * Base * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "SF Pro Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle grid texture behind everything (INDoS pattern). */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 78%); } [data-theme="light"] body::before { background: linear-gradient(rgba(18, 23, 32, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 23, 32, 0.035) 1px, transparent 1px); background-size: 64px 64px; } /* Glassmorphism backdrop. Soft colored blobs sit behind everything * and are blurred heavily; surface elements with backdrop-filter pick * them up and tint the frosted glass. The layer drifts slowly so the * tints shift over time. */ body::after { content: ""; position: fixed; inset: -25vh -25vw; z-index: -2; pointer-events: none; background: radial-gradient(38vw 38vw at 12% 18%, var(--blob-1), transparent 60%), radial-gradient(46vw 46vw at 86% 28%, var(--blob-2), transparent 60%), radial-gradient(34vw 34vw at 22% 88%, var(--blob-3), transparent 60%), radial-gradient(38vw 38vw at 82% 86%, var(--blob-4), transparent 60%); filter: blur(48px); animation: blob-drift 56s ease-in-out infinite alternate; } @keyframes blob-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-3%, 2%, 0) rotate(2deg); } 100% { transform: translate3d(3%, -2%, 0) rotate(-2deg); } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { display: block; max-width: 100%; } code { font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.012em; margin: 0 0 0.6em; font-weight: 700; line-height: 1.18; } h1 { font-size: clamp(2.1rem, 3.2vw, 3rem); } h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); } h3 { font-size: 1.2rem; } p { color: var(--text); margin: 0 0 1em; } p.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; } .muted { color: var(--muted); } .quiet { color: var(--quiet); } /* -------------------------------------------------------------------- * Header * ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(18px, 4vw, 48px); background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; } .brand img { width: 30px; height: 30px; object-fit: contain; } .brand-name { font-size: 1.05rem; letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); color: var(--muted); font-size: 0.92rem; } .nav-links a { color: inherit; text-decoration: none; font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .nav-links a:hover { color: var(--text); } .nav-links a.is-active { color: var(--text); border-bottom-color: var(--accent); } .theme-toggle { min-height: 34px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; padding: 7px 14px; white-space: nowrap; transition: border-color 120ms ease, background 120ms ease; } .theme-toggle:hover { border-color: var(--accent); background: rgba(88, 166, 255, 0.08); } [data-theme="light"] .theme-toggle { background: rgba(18, 23, 32, 0.04); } /* -------------------------------------------------------------------- * Layout: main / containers * ------------------------------------------------------------------ */ main { display: block; } .container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); } .container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); } .section { padding: clamp(56px, 9vw, 110px) 0; border-bottom: 1px solid var(--border); } .section-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; } .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); font-weight: 700; } .section-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); border-radius: 1px; } .section-title { margin: 0; } .section-lead { color: var(--muted); font-size: 1.05rem; max-width: 64ch; margin-top: 6px; } /* -------------------------------------------------------------------- * Hero (used on landing) * ------------------------------------------------------------------ */ .hero { position: relative; min-height: 78svh; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--border); } .hero-media, .hero-overlay { position: absolute; inset: 0; } .hero-media { opacity: 1; } /* Each shot pulses through opacity on its own 18s cycle, staggered via * animation-delay so they appear and disappear at different positions. * With six shots staggered by 3s in an 18s cycle, 2-3 shots are * visible at any moment and the set rotates continuously. */ @keyframes hero-pulse { 0% { opacity: 0; transform: var(--hero-rest) scale(0.99); } 16% { opacity: 0.92; transform: var(--hero-rest) scale(1); } 50% { opacity: 0.92; transform: var(--hero-rest) scale(1); } 64% { opacity: 0; transform: var(--hero-rest) scale(0.99); } 100% { opacity: 0; transform: var(--hero-rest) scale(0.99); } } .hero-shot { position: absolute; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; opacity: 0; animation: hero-pulse 18s ease-in-out infinite; will-change: opacity, transform; } [data-theme="light"] .hero-shot { border-color: rgba(18, 23, 32, 0.16); } /* Stagger each shot by 3 seconds so the appearances tile around the * cycle. The visible windows overlap by ~3 seconds, so the eye always * sees 2-3 shots; no moment of empty hero. */ .shot-a { animation-delay: 0s; } .shot-b { animation-delay: 3s; } .shot-c { animation-delay: 6s; } .shot-d { animation-delay: 9s; } .shot-e { animation-delay: 12s; } .shot-f { animation-delay: 15s; } @media (prefers-reduced-motion: reduce) { .hero-shot { opacity: 0.5; animation: none; transform: var(--hero-rest); } } /* Six-shot collage. Larger main panels anchor the corners; smaller * supporting shots fill the middle. Slight rotations break the grid * feel; tighter widths on the secondary shots keep them subordinate * to the main two. The rotation is handed to the keyframes via the * ``--hero-rest`` custom property so the @keyframes hero-pulse rule * can build the full transform without erasing the rotation. */ .shot-a { top: -3%; left: -8%; width: min(48vw, 620px); --hero-rest: rotate(-3deg); } .shot-b { top: 6%; right: -6%; width: min(48vw, 620px); --hero-rest: rotate(2.6deg); } .shot-c { bottom: -6%; left: 12%; width: min(38vw, 480px); --hero-rest: rotate(-1.5deg); } .shot-d { bottom: 2%; right: 18%; width: min(34vw, 440px); --hero-rest: rotate(3deg); } .shot-e { top: 40%; left: 28%; width: min(28vw, 360px); --hero-rest: rotate(-2deg); } .shot-f { top: 38%; right: 26%; width: min(28vw, 360px); --hero-rest: rotate(2deg); } /* On narrow viewports collapse the side shots so the hero text stays * legible. Keep two anchor shots for atmosphere. */ @media (max-width: 720px) { .shot-c, .shot-d, .shot-e, .shot-f { display: none; } .shot-a, .shot-b { width: 80vw; } .shot-a { top: 4%; left: -20%; } .shot-b { top: 50%; right: -28%; } } .hero-overlay { background: radial-gradient(110% 80% at 20% 18%, rgba(88, 166, 255, 0.18), transparent 60%), radial-gradient(80% 70% at 82% 84%, rgba(210, 168, 255, 0.18), transparent 60%), linear-gradient(180deg, rgba(10, 14, 19, 0.18) 0%, rgba(10, 14, 19, 0.86) 70%); } [data-theme="light"] .hero-overlay { background: radial-gradient(110% 80% at 20% 18%, rgba(9, 105, 218, 0.18), transparent 60%), radial-gradient(80% 70% at 82% 84%, rgba(130, 80, 223, 0.14), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.86) 70%); } .hero-content { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 110px) clamp(18px, 4vw, 48px); display: grid; gap: 26px; justify-items: start; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; } [data-theme="light"] .hero-eyebrow { background: rgba(18, 23, 32, 0.04); } .hero-eyebrow strong { color: var(--accent); font-weight: 700; } /* ==================================================================== * Hero workflow journey (BrainHack-style SVG widget). * All rules are scoped to `.workflow-animation` (only the hero SVG * carries that class) so they do NOT bleed into the intro page's * workflow diagram, which shares the `.workflow-graph` class but * uses its own styling. * ==================================================================== */ .workflow-animation { width: min(820px, 100%); height: auto; margin: -10px 0 -28px; opacity: 0.96; display: block; overflow: visible; cursor: pointer; outline: none; } .workflow-animation:focus-visible { filter: drop-shadow(0 0 0.75rem rgba(77, 227, 255, 0.5)); } .workflow-click-hint { display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin: 0 0 18px; padding: 7px 15px; border: 1px solid rgba(77, 227, 255, 0.42); border-radius: 999px; background: rgba(8, 9, 13, 0.7); color: #eef7ff; font-size: 12px; font-weight: 820; line-height: 1; opacity: 0.82; transition: opacity 180ms ease, transform 180ms ease; } .workflow-animation:hover + .workflow-click-hint, .workflow-animation:focus-visible + .workflow-click-hint, .workflow-click-hint:hover { opacity: 1; transform: translateY(-1px); } .workflow-animation.is-stepping + .workflow-click-hint { opacity: 0; } .workflow-animation .workflow-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 12; animation: workflowDash 3.8s linear infinite; } .workflow-animation .main-line { stroke: rgba(77, 227, 255, 0.58); } .workflow-animation .audit-line { stroke: rgba(184, 244, 109, 0.58); stroke-width: 2.4; animation-duration: 4.4s; } .workflow-animation .qc-line { stroke: rgba(255, 139, 107, 0.64); stroke-width: 2.4; animation-duration: 4.1s; } /* The node "disc" (background circle behind each MDI icon). */ .workflow-animation .node-disc { fill: rgba(8, 9, 13, 0.62); stroke: rgba(239, 247, 255, 0.88); stroke-width: 2; transition: fill 220ms ease, stroke 220ms ease, stroke-width 220ms ease; } .workflow-animation .node-icon { color: rgba(239, 247, 255, 0.96); pointer-events: none; transition: color 220ms ease, transform 220ms ease; } .workflow-animation .workflow-node { animation: workflowNodePulse 4.8s ease-in-out infinite; cursor: pointer; } .workflow-animation.is-stepping .workflow-node { animation: none; opacity: 0.64; transition: opacity 180ms ease, filter 180ms ease; } .workflow-animation .workflow-node.is-active, .workflow-animation .workflow-node.is-path-active { opacity: 1; -webkit-filter: url(#workflow-node-glow); filter: url(#workflow-node-glow); } .workflow-animation .workflow-node.is-active .node-disc, .workflow-animation .workflow-node.is-path-active .node-disc { stroke: rgba(255, 255, 255, 0.98); stroke-width: 2.8; } .workflow-animation .workflow-node.is-active .node-icon, .workflow-animation .workflow-node.is-path-active .node-icon { color: #ffffff; } .workflow-animation .scan-node { animation-delay: 0.35s; } .workflow-animation .bids-node { animation-delay: 0.7s; } .workflow-animation .assess-node { animation-delay: 1.05s; } .workflow-animation .control-node { animation-delay: 1.4s; } .workflow-animation .report-node { animation-delay: 1.75s; } .workflow-animation .workflow-node text { fill: #f4f7fb; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-anchor: middle; } .workflow-animation .workflow-mini-graph path { fill: none; stroke: rgba(189, 166, 255, 0.74); stroke-width: 2; } .workflow-animation .workflow-mini-graph circle { fill: var(--violet); } .workflow-animation .travel-dot { opacity: 0.95; pointer-events: none; -webkit-filter: url(#workflow-dot-glow); filter: url(#workflow-dot-glow); } .workflow-animation .dot-main { color: var(--lime); fill: var(--lime); } .workflow-animation .dot-audit { color: var(--cyan); fill: var(--cyan); } .workflow-animation .dot-qc { color: var(--coral); fill: var(--coral); } .workflow-animation .workflow-spotlight { fill: currentColor; color: var(--lime); opacity: 0; pointer-events: none; -webkit-filter: url(#workflow-spotlight-glow); filter: url(#workflow-spotlight-glow); transition: opacity 160ms ease, r 160ms ease; } .workflow-animation .workflow-spotlight.is-visible { opacity: 0.96; } .workflow-animation .workflow-flash { fill: none; stroke: currentColor; stroke-width: 4; opacity: 0; pointer-events: none; -webkit-filter: url(#workflow-flash-glow); filter: url(#workflow-flash-glow); transform-box: fill-box; transform-origin: center; } .workflow-animation .workflow-flash.is-flashing { animation: nodeFlash 520ms ease-out both; } .workflow-animation .click-brain { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; transition: opacity 160ms ease, transform 220ms ease; -webkit-filter: url(#workflow-brain-glow); filter: url(#workflow-brain-glow); } .workflow-animation .click-brain.is-visible { opacity: 1; } /* Run the breathing-halo animation only while the brain is on * screen. Leaving it on infinitely (even on an invisible element) * keeps a compositing layer alive and slows the idle traveling * dot post-finale until the next click. */ .workflow-animation .click-brain.is-visible .click-brain-halo { animation: brainHalo 1.2s ease-in-out infinite; } .workflow-animation .click-brain-halo { fill: rgba(7, 10, 16, 0.9); stroke: rgba(77, 227, 255, 0.72); stroke-width: 2; opacity: 0.94; /* Smooth the r / stroke / fill change when the finale promotes * the halo from the small workflow size to the big lifted size, * so it grows in place instead of looking like a second halo * pops in. */ transition: r 620ms cubic-bezier(.16, 1, .3, 1), stroke 480ms ease, stroke-width 480ms ease, fill 480ms ease; } .workflow-animation .brain-image { -webkit-filter: none; filter: none; transform-box: fill-box; transform-origin: center; transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease; } .workflow-animation .brain-final { opacity: 0; } /* Brain swap. The plain-brain stays visible all the way through the * Convert station; the strong-brain only starts to bleed in at * Enrich and fully takes over at Validate / BIDS. This makes the * "you finished converting -> your dataset is now strong" beat * narratively obvious. Stages map to nodes: * 0=Raw 1=Scan 2=Curate 3=Convert 4=Enrich 5=Validate/BIDS */ .workflow-animation .click-brain.stage-0 .brain-start, .workflow-animation .click-brain.stage-1 .brain-start, .workflow-animation .click-brain.stage-2 .brain-start, .workflow-animation .click-brain.stage-3 .brain-start { opacity: 1; } .workflow-animation .click-brain.stage-4 .brain-start { opacity: 0.42; } .workflow-animation .click-brain.stage-5 .brain-start { opacity: 0; } .workflow-animation .click-brain.stage-0 .brain-final, .workflow-animation .click-brain.stage-1 .brain-final, .workflow-animation .click-brain.stage-2 .brain-final, .workflow-animation .click-brain.stage-3 .brain-final { opacity: 0; } .workflow-animation .click-brain.stage-4 .brain-final { opacity: 0.7; } .workflow-animation .click-brain.stage-5 .brain-final { opacity: 1; } .workflow-animation .click-brain.stage-3, .workflow-animation .click-brain.stage-4, .workflow-animation .click-brain.stage-5 { -webkit-filter: url(#workflow-brain-glow); filter: url(#workflow-brain-glow); } /* Performance: during the lifted finale the click-brain hosts four * expanding ripple rings + a huge halo + the strong-brain image, all * animating at once. The SVG drop-shadow filter on the parent group * forces the browser to re-rasterise the whole composite through a * large blur kernel every frame, which is the main culprit for jank. * The multicolor rings + halo + title neon already carry the visual * impact, so we strip the outer glow filter for the finale and let * the rings shoulder the show. */ .workflow-animation .click-brain.is-finale-lifted, [data-theme="light"] .workflow-animation .click-brain.is-finale-lifted { /* Two selectors so we beat both the dark-theme stage-{3,4,5} * filter rule (specificity 0,3,0) AND the light-theme one * (specificity 0,4,0, attribute + 3 classes). Without the * second selector the light-theme filter survived and applied * its triple drop-shadow to every ripple ring + the huge halo * + the strong brain image, which is what was making the light * theme blurry and slow during the finale. */ -webkit-filter: none; filter: none; } /* Note: a previous version added `will-change: transform, opacity` * here to coax the GPU into compositing the ripple rings on their * own layer. The hint stayed in effect for too long even after the * finale class was removed — the browser was slow to demote the * promoted layers and the idle traveling dot ran at reduced * framerate until the next click. The cost of letting the GPU * promote those elements lazily during the finale is small in * practice; the benefit of releasing them cleanly after cleanup * is large, so we leave will-change off. */ .workflow-animation .click-brain.stage-5 .click-brain-halo { stroke: rgba(63, 185, 80, 0.85); stroke-width: 3; animation: brainHaloFinal 1.6s ease-in-out infinite; } .workflow-animation .click-brain.is-finale-lifted .click-brain-halo { /* Inner halo at the finale: a very wide thin ring orbiting well * outside the strong-brain. r grows; stroke shrinks so the ring * reads as a delicate hoop, not a thick band. */ r: 520; stroke-width: 2.4; fill: rgba(7, 10, 16, 0.10); opacity: 0.95; animation: brainHaloMega 2.4s ease-in-out infinite, brainHaloHueCycle 5.2s linear infinite; } [data-theme="light"] .workflow-animation .click-brain.is-finale-lifted .click-brain-halo { /* Same colour-cycle but with the BIDS Manager light-theme palette * (deeper hues) so the halo stays visible against the bright * hero collage. */ fill: rgba(26, 127, 55, 0.06); animation: brainHaloMega 2.4s ease-in-out infinite, brainHaloHueCycleLight 5.2s linear infinite; } @keyframes brainHaloHueCycle { 0%, 100% { stroke: rgba(184, 244, 109, 0.92); } /* lime */ 25% { stroke: rgba( 77, 227, 255, 0.92); } /* cyan */ 50% { stroke: rgba(255, 139, 107, 0.92); } /* coral */ 75% { stroke: rgba(189, 166, 255, 0.92); } /* violet */ } @keyframes brainHaloHueCycleLight { 0%, 100% { stroke: rgba( 26, 127, 55, 0.95); } 25% { stroke: rgba( 9, 105, 218, 0.95); } 50% { stroke: rgba(185, 79, 51, 0.95); } 75% { stroke: rgba(101, 80, 184, 0.95); } } /* ----- Concentric multicolor ripple rings (finale only) ----- * Four circles, all centred at the click-brain origin, all starting * with the same base r=60. Hidden until the finale-lifted state, * then each ring runs the same expand + fade keyframe with a * staggered animation-delay so the rings ripple outward * continuously like dropping a stone in water. Colours match the * BrainHack accent palette: lime / cyan / coral / violet. */ .workflow-animation .brain-halo-ring { fill: none; stroke-width: 5; pointer-events: none; opacity: 0; transform-box: fill-box; transform-origin: center; /* Keep the stroke a constant viewport-pixel width regardless of * the ring's scale or the parent click-brain's 2.7x finale scale. * Without this, the stroke grew with the transform until adjacent * rings overlapped into a single thick band. */ vector-effect: non-scaling-stroke; } .workflow-animation .click-brain.is-finale-lifted .brain-halo-ring { /* Longhand on purpose: the `animation` shorthand would reset * `animation-delay` to its default of 0s with higher specificity * than the per-ring rules below, dropping every ring into the * same phase. Splitting into individual properties lets the * per-ring `animation-delay` survive the cascade. */ animation-name: brainRingRipple; animation-duration: 2800ms; animation-timing-function: linear; animation-iteration-count: infinite; } /* Seven rings on a three-stop purple / blue / green palette, * evenly spaced at ~400 ms intervals so they distribute across * the full 2800 ms cycle. Base delay of 0.6 s holds them off * until the brain-burst glow has read on screen. */ .workflow-animation .brain-halo-ring.ring-1 { stroke: #bda6ff; animation-delay: 0.600s; } /* purple */ .workflow-animation .brain-halo-ring.ring-2 { stroke: #4de3ff; animation-delay: 1.000s; } /* blue */ .workflow-animation .brain-halo-ring.ring-3 { stroke: #b8f46d; animation-delay: 1.400s; } /* green */ .workflow-animation .brain-halo-ring.ring-4 { stroke: #bda6ff; animation-delay: 1.800s; } .workflow-animation .brain-halo-ring.ring-5 { stroke: #4de3ff; animation-delay: 2.200s; } .workflow-animation .brain-halo-ring.ring-6 { stroke: #b8f46d; animation-delay: 2.600s; } .workflow-animation .brain-halo-ring.ring-7 { stroke: #bda6ff; animation-delay: 3.000s; } [data-theme="light"] .workflow-animation .brain-halo-ring.ring-1, [data-theme="light"] .workflow-animation .brain-halo-ring.ring-4, [data-theme="light"] .workflow-animation .brain-halo-ring.ring-7 { stroke: #6550b8; } [data-theme="light"] .workflow-animation .brain-halo-ring.ring-2, [data-theme="light"] .workflow-animation .brain-halo-ring.ring-5 { stroke: #0969da; } [data-theme="light"] .workflow-animation .brain-halo-ring.ring-3, [data-theme="light"] .workflow-animation .brain-halo-ring.ring-6 { stroke: #1a7f37; } /* ----- One-shot glow burst when the strong-brain appears ----- * A single radial-gradient-filled circle that flashes the instant * .is-finale-lifted lands: scale up from a tiny dot, peak opacity * around 8%, then expand and fade to nothing in ~700 ms. Plays * exactly once per finale entry (iteration-count: 1, fill-mode: * forwards). The gradient gives the flash its shiny-neon look * without needing multiple SVG elements. */ .workflow-animation .brain-burst { fill: url(#brain-burst-glow-dark); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; } [data-theme="light"] .workflow-animation .brain-burst { fill: url(#brain-burst-glow-light); } .workflow-animation .click-brain.is-finale-lifted .brain-burst { animation: brainGlowBurst 900ms cubic-bezier(.16, .96, .35, 1) 1 forwards; } @keyframes brainGlowBurst { /* Blinding flash: ramps fast to full opacity, holds the brightness * for a sustained "over-exposed" beat, then expands to a huge * radius while fading. Peak scale 8.5 means the burst briefly * fills most of the hero area before vanishing. */ 0% { transform: scale(0.20); opacity: 0; } 6% { transform: scale(0.75); opacity: 1; } 20% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(8.5); opacity: 0; } } /* Theme-sensitive brains. The hrefs are swapped by JS in * `swapHeroBrains(theme)` (called from initThemeToggle.apply), so the * brain images are physically the right colour in each theme — no * filter trickery, which composed unpredictably with the SVG * drop-shadow filter on the parent group. */ [data-theme="light"] .workflow-animation .click-brain:not(.is-finale-lifted), [data-theme="light"] .workflow-animation .click-brain.stage-3:not(.is-finale-lifted), [data-theme="light"] .workflow-animation .click-brain.stage-4:not(.is-finale-lifted), [data-theme="light"] .workflow-animation .click-brain.stage-5:not(.is-finale-lifted) { /* In light theme the lime / cyan / coral SVG drop-shadow stack * disappears against the bright hero. Swap to a darker triple- * shadow filter so the muscled glyph keeps its glow halo. * * IMPORTANT: the :not(.is-finale-lifted) qualifier is mandatory. * Without it, this rule (specificity 0,4,0) outranks the filter * disable above and re-applies the heavy three-stage blur during * the finale, blurring the strong brain + every ripple ring and * tanking framerate in light mode. */ -webkit-filter: url(#workflow-brain-glow-light); filter: url(#workflow-brain-glow-light); } [data-theme="light"] .workflow-animation .node-disc { fill: rgba(255, 255, 255, 0.78); stroke: rgba(18, 23, 32, 0.78); } [data-theme="light"] .workflow-animation .node-icon { color: var(--text); } [data-theme="light"] .workflow-animation .workflow-node text { fill: var(--text); } [data-theme="light"] .workflow-animation .click-brain-halo { fill: rgba(255, 255, 255, 0.94); stroke: rgba(6, 127, 154, 0.74); } [data-theme="light"] .workflow-click-hint { border-color: rgba(6, 127, 154, 0.42); background: rgba(255, 255, 255, 0.78); color: var(--text); } @keyframes workflowDash { to { stroke-dashoffset: -44; } } @keyframes workflowNodePulse { 0%, 100% { opacity: 0.82; } 45% { opacity: 1; } } @keyframes brainHalo { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.08); } } @keyframes brainHaloFinal { 0%, 100% { transform: scale(1.0); opacity: 0.94; } 50% { transform: scale(1.5); opacity: 0.45; } } @keyframes brainHaloMega { /* Subtle breath at the lifted size: never collapse to a small * disc, just gently swell ~10% off the big halo's edge. */ 0%, 100% { transform: scale(1.0); opacity: 0.92; } 50% { transform: scale(1.10); opacity: 0.62; } } @keyframes brainRingRipple { /* Linear spread from scale 0.6 to 3.0 over the cycle. Opacity * snaps to full almost immediately and HOLDS at 1.0 across most * of the cycle, fading only in the last 10% so the ring stays * unmistakably visible through nearly its entire travel. */ 0% { transform: scale(0.6); opacity: 0; } 3% { transform: scale(0.65); opacity: 1; } 90% { transform: scale(2.8); opacity: 1; } 100% { transform: scale(3.0); opacity: 0; } } @keyframes nodeFlash { 0% { opacity: 0.95; stroke-width: 6; transform: scale(0.25); } 58% { opacity: 0.9; } 100% { opacity: 0; stroke-width: 1; transform: scale(3.2); } } @media (prefers-reduced-motion: reduce) { .workflow-animation .workflow-line, .workflow-animation .workflow-node, .workflow-animation .click-brain, .workflow-animation .click-brain-halo, .workflow-animation .click-brain.stage-5 .click-brain-halo { animation: none !important; } } /* The workflow SVG carries opacity: 0.96 which creates a new * stacking context. Put the title + supporting text on a higher * z-index inside hero-content so the ripple rings (which overflow * the SVG's box) stay behind the letters rather than sliding over * them. */ .hero-title, .hero-tagline, .hero-lead, .hero-actions { position: relative; z-index: 1; } .hero-title { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 18ch; margin: 0; } .hero-title em { font-style: normal; background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Title neon glow during the finale. * * Each letter glows from the inside out: a near-white inner halo * (the bright "tube" core) wrapped in larger, cycling coloured * blurs (the surrounding luminance). The whole thing breathes on * one keyframe; a second keyframe cross-fades the hot colour so * the neon shifts hue too. The gradient must drop its * gradient fill during the glow so the text-shadow can paint * around solid glyphs rather than transparent ones. */ .hero-title.is-mega-glow { color: #ffffff; animation: heroTitleNeon 2.4s ease-in-out infinite; } .hero-title.is-mega-glow em { background: none; -webkit-background-clip: initial; background-clip: initial; color: #ffffff; -webkit-text-fill-color: #ffffff; animation: heroEmNeon 2.4s ease-in-out infinite; } /* Title neon stacks. Kept tight (3-4 layers) and capped at ~60 px * blur so the GPU isn't shading large halos at 60 fps. Two opaque * inner whites form the bright tube core, two coloured outer * layers carry the radiance. */ @keyframes heroTitleNeon { 0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.95), 0 0 22px rgba(184, 244, 109, 0.88), 0 0 48px rgba( 77, 227, 255, 0.55); } 50% { text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1), 0 0 26px rgba( 77, 227, 255, 0.92), 0 0 56px rgba(255, 139, 107, 0.55); } } @keyframes heroEmNeon { 0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, 1), 0 0 9px rgba(255, 255, 255, 0.95), 0 0 22px rgba( 77, 227, 255, 0.92), 0 0 48px rgba(189, 166, 255, 0.55); } 50% { text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 12px rgba(255, 255, 255, 1), 0 0 26px rgba(255, 139, 107, 0.92), 0 0 56px rgba(184, 244, 109, 0.55); } } [data-theme="light"] .hero-title.is-mega-glow { /* Light theme: keep the glow palette but the text core stays * dark so the title is still legible against the bright hero. * Coloured halos around dark letters read as "letters caught in * a neon light". */ color: var(--text); animation: heroTitleNeonLight 2.4s ease-in-out infinite; } [data-theme="light"] .hero-title.is-mega-glow em { color: var(--accent); -webkit-text-fill-color: var(--accent); animation: heroEmNeonLight 2.4s ease-in-out infinite; } @keyframes heroTitleNeonLight { 0%, 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 14px rgba( 26, 127, 55, 0.85), 0 0 32px rgba( 9, 105, 218, 0.55); } 50% { text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 18px rgba( 9, 105, 218, 0.88), 0 0 44px rgba(185, 79, 51, 0.55); } } @keyframes heroEmNeonLight { 0%, 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 14px rgba( 9, 105, 218, 0.9), 0 0 36px rgba(101, 80, 184, 0.55); } 50% { text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 18px rgba(185, 79, 51, 0.9), 0 0 44px rgba( 26, 127, 55, 0.55); } } .hero-tagline { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -0.005em; color: var(--text); font-weight: 600; max-width: 30ch; margin: 0; } .hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 64ch; margin: 0; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* -------------------------------------------------------------------- * Buttons * ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: transform 100ms ease, box-shadow 200ms ease, background 120ms ease, border-color 120ms ease; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text); } /* :where() keeps this override at (0,1,0) specificity so the .btn-primary * and .btn-ghost variant rules below still win in light theme. Without * it, '[data-theme="light"] .btn' beats them and primary buttons render * with the neutral dark tint instead of the accent color. */ [data-theme="light"] :where(.btn) { background: rgba(18, 23, 32, 0.04); } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 12px 30px var(--glow-accent); } .btn-primary:hover { text-decoration: none; box-shadow: 0 14px 36px var(--glow-accent); } .btn-ghost { background: transparent; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* -------------------------------------------------------------------- * Feature card grid * ------------------------------------------------------------------ */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .feature-card { position: relative; padding: 24px; border: 1px solid var(--border-glass); border-radius: var(--radius); background: var(--panel-glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition: border-color 160ms ease, transform 160ms ease; } .feature-card:hover { border-color: var(--accent); transform: translateY(-2px); } .feature-card .feature-icon { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 14px; background: rgba(88, 166, 255, 0.10); color: var(--accent); font-size: 1.4rem; } .feature-card h3 { margin-bottom: 6px; font-size: 1.05rem; } .feature-card p { color: var(--muted); margin: 0; font-size: 0.95rem; } /* -------------------------------------------------------------------- * Points: flat, no-card list used on the landing page * ------------------------------------------------------------------ */ .points { display: grid; gap: 28px; } .point { padding-left: 18px; border-left: 2px solid var(--border-glass); transition: border-color 160ms ease; } .point:hover { border-left-color: var(--accent); } .point h3 { margin: 0 0 6px; color: var(--text); font-size: 1.1rem; font-weight: 700; } .point p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 1rem; } /* -------------------------------------------------------------------- * Centered CTA strip (used at the foot of the landing page) * ------------------------------------------------------------------ */ .cta-strip { text-align: center; } .cta-strip .hero-actions { justify-content: center; } /* -------------------------------------------------------------------- * Workflow animation (intro page) * Eight stages: * Raw -> Scan -> Curate -> Convert -> Enrich -> Fix-ups -> Validate -> BIDS * ------------------------------------------------------------------ */ .workflow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 8px; } .workflow-stage { position: relative; border: 1px solid var(--border-glass); border-radius: var(--radius); background: var(--panel-glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); padding: 28px; box-shadow: var(--shadow); } .workflow-graph { width: 100%; max-width: 980px; height: auto; display: block; margin: 0 auto; } .workflow-line { fill: none; stroke: var(--border); stroke-width: 2; stroke-linecap: round; } .workflow-line.main-line { stroke: rgba(88, 166, 255, 0.55); stroke-width: 2.4; } .workflow-dot { fill: var(--accent); filter: url(#wf-dot-glow); } .workflow-node circle { fill: var(--panel-strong); stroke: var(--border); stroke-width: 1.5; transition: fill 240ms ease, stroke 240ms ease; } .workflow-node text { fill: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; text-anchor: middle; letter-spacing: 0.02em; transition: fill 240ms ease; } .workflow-node:hover circle, .workflow-node.is-active circle { fill: rgba(88, 166, 255, 0.12); stroke: var(--accent); filter: url(#wf-node-glow); } .workflow-node:hover text, .workflow-node.is-active text { fill: var(--text); } .workflow-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .workflow-modes { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .workflow-mode { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; transition: all 150ms ease; } .workflow-mode:hover { color: var(--text); border-color: var(--accent); } .workflow-mode.is-active { color: var(--accent); border-color: var(--accent); background: rgba(88, 166, 255, 0.10); } .workflow-detail { border: 1px solid var(--border-glass); border-radius: var(--radius); background: var(--panel-glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); padding: 22px; min-height: 220px; } .workflow-detail h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .workflow-detail .badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: rgba(88, 166, 255, 0.12); color: var(--accent); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .workflow-detail ul { padding-left: 1.1em; margin: 0.4em 0; color: var(--muted); } .workflow-detail li { margin: 0.25em 0; } /* --- Intro prose paragraph above the flowchart -------------------- */ .workflow-intro { max-width: 860px; margin: 0 auto 28px; color: var(--muted); } .workflow-intro p { margin: 0 0 12px; line-height: 1.65; } .workflow-intro p:last-child { margin-bottom: 0; } .workflow-intro strong { color: var(--text); font-weight: 700; } /* --- Trail path: bright accent stroke that the JS reveals behind the * traveling dot via stroke-dashoffset (set by initWorkflowFlowchart). */ .workflow-line.trail-line { stroke: var(--accent); stroke-width: 3; opacity: 0.95; filter: drop-shadow(0 0 4px var(--glow-accent)); /* Initial state: trail hidden via a large dash gap. JS replaces these * values with the actual path length on init, then animates * strokeDashoffset from length (invisible) to 0 (fully revealed) * over the 9-second loop. The large default prevents a one-frame * flash of the fully-drawn trail before JS runs. */ stroke-dasharray: 9999; stroke-dashoffset: 9999; } /* --- Icons inside each node ---------------------------------------- */ .workflow-icon { color: var(--muted); transition: color 240ms ease; pointer-events: none; /* let clicks fall through to the parent */ } .workflow-node:hover .workflow-icon, .workflow-node.is-active .workflow-icon { color: var(--accent); } /* Make the entire node group clickable as one shape so clicks anywhere * inside the bounding box (icon, circle, label area, dead space) fire * the node's handler. pointer-events: none on .workflow-icon above is * still useful so the icon never becomes the event target itself, but * this rule guarantees the click is registered against the parent group * regardless of shadow-tree quirks in different browsers. */ .workflow-node { pointer-events: bounding-box; cursor: pointer; } /* --- Node pulse on dot arrival (added by JS as .is-passing) -------- */ .workflow-node.is-passing > circle { animation: wf-circle-pulse 0.9s ease-out; } .workflow-node.is-passing > .workflow-icon { animation: wf-icon-pulse 0.9s ease-out; } @keyframes wf-circle-pulse { 0% { stroke: var(--border); stroke-width: 1.5; } 30% { stroke: var(--accent); stroke-width: 3.5; filter: url(#wf-node-glow); } 100% { stroke: var(--border); stroke-width: 1.5; filter: none; } } @keyframes wf-icon-pulse { 0%, 100% { color: var(--muted); } 30% { color: var(--accent); } } /* Respect reduced-motion: stop the pulse + trail animations and show the * trail fully revealed at lower opacity, so static visitors still see the * full path emphasised. */ @media (prefers-reduced-motion: reduce) { .workflow-line.trail-line { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.6; } .workflow-node.is-passing > circle, .workflow-node.is-passing > .workflow-icon { animation: none; } } @media (max-width: 880px) { .workflow-side { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------- * Code block + inline code * ------------------------------------------------------------------ */ pre.code { position: relative; background: var(--panel-strong); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; padding-right: 90px; /* leave room for the copy button */ overflow-x: auto; font-size: 0.92rem; font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; line-height: 1.55; color: var(--text); } /* --- Copy-to-clipboard button on every 
 -----------
 * Injected by initCodeCopy() in script.js. Frosted-glass chip in the
 * top-right corner of the code window. On click it copies the cached
 * plain-text contents and flashes "Copied!" for 1.5 seconds. */

.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--panel-glass-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--border-glass);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing: 0.02em;
  opacity: 0.7;
  transition: opacity 180ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}
.code-copy svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  fill: none;
  stroke: currentColor;
}
pre.code:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}
.code-copy:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.code-copy.is-copied {
  color: var(--success);
  border-color: var(--success);
  opacity: 1;
}
.code-copy.is-failed {
  color: var(--error);
  border-color: var(--error);
  opacity: 1;
}
pre.code .cmt  { color: var(--quiet); }
pre.code .kw   { color: var(--purple); font-weight: 700; }
pre.code .str  { color: var(--success); }

code.inline {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------
 * Callouts / admonitions
 * ------------------------------------------------------------------ */

.callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-glass);
  background: var(--panel-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  margin: 18px 0;
}
.callout .callout-icon { font-size: 1.2rem; line-height: 1.2; }
.callout-tip     { border-color: rgba(88, 166, 255, 0.45);  background: rgba(88, 166, 255, 0.06); }
.callout-tip     .callout-icon { color: var(--accent); }
.callout-warning { border-color: rgba(210, 153, 34, 0.45); background: rgba(210, 153, 34, 0.06); }
.callout-warning .callout-icon { color: var(--warning); }
.callout-success { border-color: rgba(63, 185, 80, 0.45); background: rgba(63, 185, 80, 0.06); }
.callout-success .callout-icon { color: var(--success); }
.callout strong { color: var(--text); }
.callout p { margin: 0; color: var(--muted); }

/* --------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 36px clamp(18px, 4vw, 48px);
  color: var(--muted);
  font-size: 0.92rem;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* --------------------------------------------------------------------
 * Page-content prose container
 * (used by installation / tutorial / future pages)
 * ------------------------------------------------------------------ */

.prose { max-width: 78ch; margin: 0 auto; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul,
.prose ol { padding-left: 1.3em; }
.prose ul li,
.prose ol li { margin: 0.25em 0; color: var(--text); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.94rem;
}
.prose th,
.prose td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.prose thead th { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------------
 * Tabs (per-OS, used on installation.html)
 *
 * Buttons are pill-shaped chips like the workflow modes. Panels live in
 * a sibling .tab-panels container; the JS toggles .is-active. Hidden
 * panels are display:none so their 
 blocks do not steal layout.
 * ------------------------------------------------------------------ */

.tabs {
  margin: 1.4em 0 1.2em;
}

.tab-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tab-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.tab-btn:hover { color: var(--text); border-color: var(--accent); }
.tab-btn.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.10);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* --------------------------------------------------------------------
 * Numbered steps (used on installation.html)
 *
 * Custom counters render the leading number as an accent-coloured pill
 * so the steps read like a short recipe, not a generic ordered list.
 * ------------------------------------------------------------------ */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.2em 0 1.4em;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 4px 0 4px 44px;
  margin: 0 0 16px;
  min-height: 28px;
  color: var(--text);
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  top: 2px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(88, 166, 255, 0.14);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  border: 1px solid rgba(88, 166, 255, 0.45);
}

[data-theme="light"] .steps > li::before {
  background: rgba(9, 105, 218, 0.10);
  border-color: rgba(9, 105, 218, 0.45);
}

.steps > li pre.code { margin: 10px 0 0; }

/* --------------------------------------------------------------------
 * Disclosure (
) (used on installation.html)
 *
 * Native 
 styled to match the callout card. The triangle is
 * replaced with a custom rotating chevron so the open / closed state
 * is consistent across browsers.
 * ------------------------------------------------------------------ */

details.disclosure {
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 0;
  margin: 18px 0;
  overflow: hidden;
  transition: border-color 160ms ease;
}
details.disclosure[open] {
  border-color: rgba(88, 166, 255, 0.45);
}

details.disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text);
}
details.disclosure > summary::-webkit-details-marker { display: none; }

details.disclosure > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
details.disclosure[open] > summary::before {
  transform: rotate(45deg);
}

details.disclosure > :not(summary) {
  padding: 0 18px;
}
details.disclosure > :first-of-type:not(summary) { padding-top: 4px; }
details.disclosure > :last-child { padding-bottom: 16px; }

details.disclosure p,
details.disclosure ol,
details.disclosure ul {
  color: var(--text);
}
details.disclosure p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------
 * Method chooser cards (installation page top)
 *
 * Two big "pick your install path" cards. Each is an anchor so the
 * whole card is clickable; jumps to the matching section below.
 * ------------------------------------------------------------------ */

.method-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 2em 0 0;
}

.method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 26px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease,
              box-shadow 220ms ease;
}
.method-card:hover,
.method-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px var(--glow-accent);
  text-decoration: none;
  outline: none;
}

.method-card .method-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
}
.method-card .method-icon svg { width: 28px; height: 28px; }

.method-card h3 { margin: 0; font-size: 1.2rem; }
.method-card p { margin: 0; color: var(--muted); }

.method-card .method-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.66rem;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.method-badge.is-rec {
  background: rgba(63, 185, 80, 0.14);
  color: var(--success);
  border: 1px solid rgba(63, 185, 80, 0.45);
}
.method-badge.is-adv {
  background: rgba(210, 168, 255, 0.14);
  color: var(--purple);
  border: 1px solid rgba(210, 168, 255, 0.45);
}

.method-card .method-go {
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.92rem;
}
.method-card:hover .method-go { text-decoration: underline; }

/* --------------------------------------------------------------------
 * Page TOC (installation.html sub-navigation)
 *
 * Fixed-position vertical drawer on the left edge of the viewport.
 * Persistent across all sections. A round toggle button (hamburger /
 * X) opens and closes the link panel; state is saved to localStorage
 * (key: bidsmgr-docs-toc-open). Active section is highlighted via
 * IntersectionObserver scroll-spy in script.js.
 * ------------------------------------------------------------------ */

.page-toc {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  top: 92px;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;   /* children opt in */
}
.page-toc > * { pointer-events: auto; }

.page-toc-toggle {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  background: var(--panel-glass-strong);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: border-color 200ms ease, color 200ms ease,
              transform 200ms ease;
}
.page-toc-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Hamburger that morphs into an X. Three absolutely-positioned bars
 * translate / rotate when the panel is open. */
.toc-bars {
  position: relative;
  width: 18px;
  height: 14px;
  display: block;
}
.toc-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 260ms ease, opacity 200ms ease, top 260ms ease;
}
.toc-bars span:nth-child(1) { top: 0; }
.toc-bars span:nth-child(2) { top: 6px; }
.toc-bars span:nth-child(3) { top: 12px; }

.page-toc.is-open .toc-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.page-toc.is-open .toc-bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.page-toc.is-open .toc-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.page-toc-panel {
  width: 232px;
  background: var(--panel-glass-strong);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 14px 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transform: translateX(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms ease, opacity 220ms ease;
}
.page-toc.is-open .page-toc-panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.page-toc-title {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 700;
  padding: 4px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.page-toc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}

.page-toc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 220ms ease, transform 240ms ease,
              box-shadow 240ms ease;
  flex-shrink: 0;
}

.page-toc-link:hover {
  color: var(--accent);
  background: rgba(88, 166, 255, 0.10);
  text-decoration: none;
}
.page-toc-link:hover .page-toc-dot { background: var(--accent); }

.page-toc-link.is-active {
  color: var(--accent);
  background: rgba(88, 166, 255, 0.14);
}
.page-toc-link.is-active .page-toc-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow-accent);
  transform: scale(1.5);
}

[data-theme="light"] .page-toc-link:hover     { background: rgba(9, 105, 218, 0.08); }
[data-theme="light"] .page-toc-link.is-active { background: rgba(9, 105, 218, 0.12); }

/* On viewports too narrow to host the open panel without crowding
 * the article, hide it visually but keep it reachable via the
 * toggle (which sits over the content edge). */
@media (max-width: 1180px) {
  .page-toc-panel { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
}
@media (max-width: 640px) {
  .page-toc { top: 76px; left: 10px; }
  .page-toc-panel { width: min(78vw, 280px); }
}

/* --------------------------------------------------------------------
 * Interactive install pipeline (installation.html)
 *
 * A 7-step "what the installer does" visualization. Each chip + its
 * matching SVG layer owns a distinct color via --step-color /
 * --step-glow. JS auto-advances on a timer; hover previews; click
 * pins; Pause / Auto-play toggles.
 * ------------------------------------------------------------------ */

.install-pipeline {
  margin: 0;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  padding: clamp(22px, 3vw, 36px);
  box-shadow: var(--shadow);
  /* JS updates this when the active step changes; used by the
   * progress bar gradient and the detail-step eyebrow color. */
  --current-step-color: var(--step1);
  --current-step-glow:  var(--step1-glow);
}

/* Per-step color tokens. Cascaded to chips AND to the matching SVG
 * layer so both speak the same hue. */
.pipeline-chip[data-step="1"], .stage-layer[data-layer="1"] {
  --step-color: var(--step1); --step-glow: var(--step1-glow);
}
.pipeline-chip[data-step="2"], .stage-layer[data-layer="2"] {
  --step-color: var(--step2); --step-glow: var(--step2-glow);
}
.pipeline-chip[data-step="3"], .stage-layer[data-layer="3"] {
  --step-color: var(--step3); --step-glow: var(--step3-glow);
}
.pipeline-chip[data-step="4"], .stage-layer[data-layer="4"] {
  --step-color: var(--step4); --step-glow: var(--step4-glow);
}
.pipeline-chip[data-step="5"], .stage-layer[data-layer="5"] {
  --step-color: var(--step5); --step-glow: var(--step5-glow);
}
.pipeline-chip[data-step="6"], .stage-layer[data-layer="6"] {
  --step-color: var(--step6); --step-glow: var(--step6-glow);
}
.pipeline-chip[data-step="7"], .stage-layer[data-layer="7"] {
  --step-color: var(--step7); --step-glow: var(--step7-glow);
}

.pipeline-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  align-items: stretch;
  position: relative;
}

.pipeline-track::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.pipeline-track li { position: relative; z-index: 1; min-width: 0; }

.pipeline-chip {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  transition: color 180ms ease, border-color 180ms ease,
              background 180ms ease, box-shadow 220ms ease,
              transform 160ms ease;
}
.pipeline-chip:hover {
  border-color: var(--step-color, var(--accent));
  color: var(--step-color, var(--text));
  transform: translateY(-2px);
}
.pipeline-chip.is-active {
  border-color: var(--step-color);
  background: color-mix(in srgb, var(--step-color) 18%, var(--panel));
  color: var(--step-color);
  box-shadow: 0 0 0 1px var(--step-color),
              0 14px 38px var(--step-glow);
  animation: chip-breathe 2.4s ease-in-out infinite;
}

@keyframes chip-breathe {
  0%, 100% { box-shadow: 0 0 0 1px var(--step-color),
                          0 12px 30px var(--step-glow); }
  50%      { box-shadow: 0 0 0 1px var(--step-color),
                          0 20px 46px var(--step-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline-chip.is-active { animation: none; }
}

.pipeline-chip svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  transition: transform 200ms ease;
}
.pipeline-chip.is-active svg { transform: scale(1.08); }

.pipeline-chip .chip-num {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.pipeline-chip.is-active .chip-num { color: var(--step-color); }

.pipeline-chip .chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Compact chips on narrow viewports: hide the label, keep icon + number. */
@media (max-width: 720px) {
  .pipeline-chip .chip-label { display: none; }
  .pipeline-chip svg { width: 28px; height: 28px; }
}

.pipeline-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 760px) {
  .pipeline-stage { grid-template-columns: 1fr; }
}

.stage-illustration {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 30% 20%,
                    color-mix(in srgb, var(--current-step-color) 18%, transparent),
                    transparent 60%),
    radial-gradient(80% 70% at 78% 82%,
                    color-mix(in srgb, var(--current-step-color) 12%, transparent),
                    transparent 60%),
    var(--bg-soft);
  padding: 16px;
  width: 100%;
  max-height: 320px;
  aspect-ratio: 720 / 380;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background 400ms ease;
}
/* On narrow / stacked layout, keep the illustration short so the
 * explanation panel below it stays in view. */
@media (max-width: 760px) {
  .stage-illustration { max-height: 240px; }
}

.stage-illustration .stage-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Each SVG layer inherits color from its --step-color custom property
 * so the stroke / text / fill (which all use currentColor) match the
 * chip. Inactive layers shown dim; the current layer pulses bright. */
.stage-layer {
  color: var(--step-color, var(--accent));
  opacity: 0;
  transition: opacity 500ms ease, filter 400ms ease;
}
.stage-layer.is-shown   { opacity: 0.55; }
.stage-layer.is-current {
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--step-glow));
  animation: pipeline-pulse 1.8s ease-in-out infinite;
}

/* Beef up the current layer's stroke so the active step pops more. */
.stage-layer.is-current path,
.stage-layer.is-current rect,
.stage-layer.is-current line,
.stage-layer.is-current circle {
  stroke-width: 2.8;
}

@keyframes pipeline-pulse {
  0%,100% { filter: drop-shadow(0 0 8px  var(--step-glow)); }
  50%     { filter: drop-shadow(0 0 18px var(--step-glow)); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-layer.is-current { animation: none; }
}

.pipeline-detail h3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}
.pipeline-detail .detail-step {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--current-step-color);
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  transition: color 250ms ease;
}
.pipeline-detail .detail-title {
  font-size: 1.45rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.pipeline-detail p {
  color: var(--text);
  font-size: 0.98rem;
  margin: 0 0 0.6em;
}
.pipeline-detail p:last-child { margin-bottom: 0; }
.pipeline-detail code.inline { font-size: 0.85em; }

.pipeline-progress {
  margin-top: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.pipeline-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress, 0%);
  background: linear-gradient(
    90deg,
    var(--current-step-color),
    color-mix(in srgb, var(--current-step-color) 60%, #ffffff)
  );
  box-shadow: 0 0 12px var(--current-step-glow);
  transition: width 90ms linear, background 300ms ease;
  border-radius: 999px;
}

.pipeline-controls {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.pipeline-controls button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 150ms ease, color 150ms ease;
}
.pipeline-controls button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --------------------------------------------------------------------
 * Tutorial page (tutorial.html)
 *
 * The tutorial page opens with a download card, a 3-subject overview
 * strip, and an interactive series breakdown. The scene mocks land
 * in a future commit.
 * ------------------------------------------------------------------ */

/* ---- Download card ---- */

.download-card {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 1.6em 0 0;
  padding: 28px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .download-card { grid-template-columns: 1fr; }
}

.download-card-body h2 { font-size: 1.6rem; }
.download-card-body p  { color: var(--text); }

.download-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.download-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
}
.download-stat strong {
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Shrink-fit long words like 'Siemens' so they don't blow past the
   * card edge. */
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.05;
}
.download-stat span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}

/* ---- Subject overview strip (3 cards) ---- */

.subject-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0 0 28px;
}

.subject-card {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subject-card h3 { margin: 0; font-size: 1.3rem; }
.subject-card p { margin: 0; color: var(--muted); font-size: 0.94rem; }

.subject-card-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 700;
}

.subject-card-stats {
  display: flex;
  gap: 18px;
  margin: 2px 0 4px;
}
.subject-card-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
.subject-card-stats strong {
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 800;
}

/* ---- Interactive dataset overview (series list + detail) ---- */

.dataset-overview {
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: clamp(18px, 2vw, 24px);
  box-shadow: var(--shadow);
}
.dataset-overview > .tabs { margin: 0 0 20px; }

.dataset-overview-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .dataset-overview-stage { grid-template-columns: 1fr; }
}

/* The series list: one button-row per DICOM series for the active
 * subject. Each row has an icon (datatype-coloured), the SeriesNumber +
 * description, and a datatype chip on the right. Clicking / hovering a
 * row updates the detail panel. */

.series-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.series-list::-webkit-scrollbar { width: 6px; }
.series-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.series-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 160ms ease, background 160ms ease,
              transform 160ms ease;
}
.series-row:hover {
  border-color: var(--series-color, var(--accent));
  transform: translateX(2px);
}
.series-row.is-active {
  border-color: var(--series-color, var(--accent));
  background: color-mix(in srgb, var(--series-color, var(--accent)) 12%, var(--panel));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--series-color, var(--accent)) 32%, transparent);
}
.series-row .series-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--series-color, var(--accent)) 14%, transparent);
  color: var(--series-color, var(--accent));
}
.series-row .series-icon svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.series-row .series-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.series-row .series-no {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.series-row .series-desc {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.series-row .series-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--series-color, var(--accent)) 14%, transparent);
  color: var(--series-color, var(--accent));
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  white-space: nowrap;
}

/* Datatype colors. Re-use the install-pipeline step palette so the
 * docs feel cohesive. */
.series-row[data-type="scout"]  { --series-color: var(--quiet); }
.series-row[data-type="anat"]   { --series-color: var(--step1); }
.series-row[data-type="func"]   { --series-color: var(--step5); }
.series-row[data-type="fmap"]   { --series-color: var(--step4); }
.series-row[data-type="dwi"]    { --series-color: var(--step3); }
.series-row[data-type="physio"] { --series-color: var(--step2); }
.series-row[data-type="sr"]     { --series-color: var(--quiet); }

.series-row[data-skipped="1"] .series-desc { color: var(--muted); }
.series-row[data-skipped="1"] .series-chip {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
}

/* The detail panel on the right. */

.series-detail {
  position: sticky;
  top: 92px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: 22px;
  min-height: 320px;
  transition: border-color 200ms ease;
}
@media (max-width: 820px) {
  .series-detail { position: relative; top: 0; }
}
.series-detail .series-detail-eyebrow {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--series-color, var(--accent)) 14%, transparent);
  color: var(--series-color, var(--accent));
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 10px;
}
.series-detail h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.series-detail .series-detail-meta {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 14px;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.series-detail p { color: var(--text); font-size: 0.95rem; }
.series-detail .series-detail-bids {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

/* --------------------------------------------------------------------
 * GUI tour (tutorial.html, #gui-tour)
 *
 * Annotated screenshots of the real Converter / Editor windows.
 * The screenshot fills the section's full width. Numbered markers
 * are absolutely positioned in percentages so they scale with the
 * image. Each marker has a sibling popover bubble that pops up at
 * the marker's location when clicked. Only one popover at a time;
 * clicking outside, on another marker, or Esc dismisses.
 * ------------------------------------------------------------------ */

.gui-tour-hint {
  font-size: 0.86rem;
  margin: 0 0 14px;
}
.gui-tour-hint kbd {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--text);
  vertical-align: 1px;
}

.gui-tour {
  position: relative;
  margin: 0;
  /* No overflow:hidden so popovers can extend past the screenshot
   * edges. The image keeps its own rounded frame below. */
  isolation: isolate;
}
.gui-tour-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}

/* Anchor: a 0-size point at the (left, top) coordinate of the
 * marker. The marker is absolutely positioned relative to this
 * anchor (centered on it); the popover hangs off the anchor at a
 * direction picked per-marker via data-pos. */
.gui-tour-anchor {
  position: absolute;
  width: 0;
  height: 0;
}

.gui-tour-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.92rem;
  font-family: "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent),
              0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform 220ms ease, box-shadow 220ms ease,
              background 220ms ease, color 220ms ease;
  animation: gui-marker-pulse 2.6s ease-in-out infinite;
  padding: 0;
  z-index: 2;
}
.gui-tour-marker:hover,
.gui-tour-marker.is-active {
  transform: translate(-50%, -50%) scale(1.18);
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent),
              0 12px 30px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: none;
}

@keyframes gui-marker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
                          0 8px 18px color-mix(in srgb, var(--accent) 25%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent),
                          0 8px 22px color-mix(in srgb, var(--accent) 25%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .gui-tour-marker { animation: none; }
}

/* Popover bubble. Hidden by default; .is-shown reveals it. Position
 * is per-anchor via data-pos: bottom (default), top, left, right.
 * The transform places the bubble offset from the anchor center,
 * leaving room for a small caret pointing back at the marker. */
.gui-tour-pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 86vw;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--panel-glass-strong);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 26%, transparent),
              0 4px 16px rgba(0, 0, 0, 0.32);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms ease, visibility 200ms;
}
.gui-tour-pop.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Default position: BELOW the marker. */
.gui-tour-pop                       { transform: translate(-50%, 24px); }
.gui-tour-pop.is-shown              { transform: translate(-50%, 18px); }
.gui-tour-pop[data-pos="top"]       { transform: translate(-50%, calc(-100% - 24px)); }
.gui-tour-pop[data-pos="top"].is-shown
                                    { transform: translate(-50%, calc(-100% - 18px)); }
.gui-tour-pop[data-pos="left"]      { transform: translate(calc(-100% - 24px), -50%); }
.gui-tour-pop[data-pos="left"].is-shown
                                    { transform: translate(calc(-100% - 18px), -50%); }
.gui-tour-pop[data-pos="right"]     { transform: translate(24px, -50%); }
.gui-tour-pop[data-pos="right"].is-shown
                                    { transform: translate(18px, -50%); }

/* Caret: a small square rotated 45deg, anchored to the popover edge
 * facing the marker. */
.gui-tour-pop::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  border: 1px solid var(--accent);
  /* same blur/saturate as the popover so the caret picks up the
   * frosted glass tint */
  backdrop-filter: blur(18px) saturate(150%);
}
/* Default position (pop below marker): caret on the top edge. */
.gui-tour-pop::before {
  left: 50%; top: -7px;
  transform: translateX(-50%) rotate(45deg);
  border-right: none; border-bottom: none;
}
/* Pop above marker: caret on the bottom edge. */
.gui-tour-pop[data-pos="top"]::before {
  left: 50%; bottom: -7px; top: auto;
  transform: translateX(-50%) rotate(45deg);
  border-left: none; border-top: none;
}
/* Pop to the left of the marker: caret on the right edge. */
.gui-tour-pop[data-pos="left"]::before {
  right: -7px; top: 50%; left: auto;
  transform: translateY(-50%) rotate(45deg);
  border-left: none; border-bottom: none;
}
/* Pop to the right of the marker: caret on the left edge. */
.gui-tour-pop[data-pos="right"]::before {
  left: -7px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-right: none; border-top: none;
}

.gui-tour-pop strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.98rem;
  color: var(--text);
}
.gui-tour-pop p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.5;
}

/* Narrow viewports: shrink markers, narrower popover. */
@media (max-width: 720px) {
  .gui-tour-marker { width: 26px; height: 26px; font-size: 0.78rem; }
  .gui-tour-pop    { width: min(80vw, 280px); }
}

/* --------------------------------------------------------------------
 * Tutorial scenes (tutorial.html, #scenes)
 *
 * State machine in script.js (initTutorialScenes). One scene is
 * data-active at a time; the others are hidden. The scene's
 * .scene-mock is a fake GUI window the JS animates.
 * ------------------------------------------------------------------ */

.scene-stage {
  margin-top: 8px;
}

/* --- top controls: progress dots + prev / pause / next ---------- */

.scene-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.scene-progress {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.scene-progress::-webkit-scrollbar { display: none; }
.scene-progress li { flex: 1 1 0; min-width: 84px; }

.scene-dot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  transition: color 180ms ease, border-color 180ms ease,
              background 180ms ease, transform 160ms ease,
              box-shadow 200ms ease;
}
.scene-dot:hover:not(.is-locked):not(.is-active) {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.scene-dot.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  box-shadow: 0 0 0 1px var(--accent), 0 10px 26px var(--glow-accent);
}
.scene-dot.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}
.scene-dot-num {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--quiet);
  letter-spacing: 0.04em;
}
.scene-dot.is-active .scene-dot-num { color: var(--accent); }
.scene-dot-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 720px) {
  .scene-dot-label { display: none; }
  .scene-progress li { min-width: 48px; }
}

.scene-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.scene-btn {
  border: 1px solid var(--border);
  background: var(--panel-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 150ms ease, border-color 150ms ease,
              background 150ms ease;
}
.scene-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.scene-counter {
  flex: 1 1 auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.scene-counter strong { color: var(--text); }

/* --- the scene itself -------------------------------------------- */

.scene {
  display: none;
  animation: scene-enter 320ms ease;
}
.scene[data-active] { display: block; }

@keyframes scene-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.scene-header {
  margin-bottom: 18px;
}
.scene-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.scene-header h3 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: 0 0 6px;
}
.scene-header p {
  color: var(--text);
  max-width: 72ch;
  margin: 0 0 10px;
}
.scene-header p:last-child { margin-bottom: 0; }

/* 'How the panes connect' explainer, placed inside the scene header
 * to underline an inter-pane relationship the visitor should watch
 * for during the animation. */
.scene-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 10px 0 0;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  max-width: 80ch;
}
.scene-link .scene-link-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.78rem;
  flex-shrink: 0;
  font-family: "SF Pro Text", Inter, sans-serif;
}
.scene-link strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.scene-link p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}
.scene-link p + p { margin-top: 4px; }

.scene-body { margin-top: 8px; }

.scene-cli {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scene-cli-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
}
.scene-cli pre.code { margin: 0; }

.scene-more {
  margin-top: 36px;
  padding: 18px 22px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--muted);
  font-size: 0.94rem;
}
.scene-more p { margin: 0; }

/* --------------------------------------------------------------------
 * Mock GUI window (used inside each scene)
 *
 * Faithful to the real BIDS Manager Converter view (see BIDS-Manager/
 * bidsmgr/gui/theme.qss + converter_panel.py): window chrome, two
 * PathBar rows, a 44-px toolbar with TSV input + 4 status chips +
 * spinner + Settings / Run, and an inventory table whose columns
 * (id / ses / data / task / conf / predicted basename) and row
 * tints (warn 6 percent, err 6 percent, skipped solid) match the
 * Qt model + delegates.
 * ------------------------------------------------------------------ */

.scene-mock {
  position: relative;
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  background: var(--panel-glass-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow);
  padding: 0;
  overflow: hidden;
  font-size: 0.82rem;   /* GUI baseline 11px -> 13px-ish in docs */
}

/* --- Real app top bar (brand + view switcher + Settings + Run) ---- */

/* ---- Top header (QFrame#top-header).
 *      Matches `theme.qss` #top-header: background surface, 1px bottom
 *      border, 48 px tall, horizontal margins 14, vertical 6. ---- */
.mock-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.mock-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mock-topbar-name {
  font-size: 1rem;          /* 16 px, matches QSS #brand-name */
  font-weight: 600;
  color: var(--text);
}
.mock-topbar-logo {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px var(--glow-accent);
}

/* View pills (QPushButton#view-pill) live as plain buttons in a row,
 * not wrapped in a rounded pill container. Real GUI uses rectangular
 * pills (border-radius 5 px) that get an accent background when
 * checked. Spacing 6 px between pills. */
.mock-topbar-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 0;
  border: none;
  background: transparent;
}
.mock-switch-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 5px 16px;
  min-width: 76px;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  transition: color 140ms ease, background 140ms ease,
              border-color 140ms ease;
}
.mock-switch-btn:hover {
  color: var(--text);
  background: var(--panel-strong);
}
.mock-switch-btn.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 600;
}

/* Theme toggle (QPushButton#theme-toggle): icon-only square button at
 * the far right of the top header. 32x28 in the real GUI. */
.mock-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.mock-theme-toggle:hover {
  background: var(--border);
  border-color: var(--accent);
}
.mock-theme-toggle svg { display: block; }

/* --- Legacy window-chrome variant (kept in case any other surface
 *     still references it; nothing on the tutorial page does). --- */

.mock-windowbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-glass);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
}
.mock-window-dots { display: inline-flex; gap: 6px; }
.mock-window-dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--border);
}
.mock-window-dots span:nth-child(1) { background: var(--error);   }
.mock-window-dots span:nth-child(2) { background: var(--warning); }
.mock-window-dots span:nth-child(3) { background: var(--success); }
.mock-window-title {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- PathBars (Scene 1 / 2 / 3) ---- */

.mock-pathbars {
  display: flex;
  flex-direction: column;
  background: var(--panel);
}
.mock-pathbar-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-glass);
}
.mock-pathbar-row:last-child { border-bottom: none; }

.mock-pathbar-label {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mock-pathbar-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  min-height: 27px;
  overflow: hidden;
}
.mock-pathbar-glyph {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.92em;
  flex-shrink: 0;
}
.mock-pathbar-glyph.is-ok {
  color: var(--success);
  font-weight: 800;
}
.mock-pathbar-value {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.84rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  min-height: 1em;
}
.mock-pathbar-value.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 1px;
  vertical-align: -2px;
  animation: mock-cursor 800ms steps(2) infinite;
}
@keyframes mock-cursor {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* --- Main toolbar (Scene 1 disabled-state, Scene 2 active, Scene 3 compact) ---- */

.mock-tb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--panel);
  flex-wrap: wrap;
}
.mock-tb.mock-tb-compact { min-height: 40px; padding: 4px 14px; }
.mock-tb-grow { flex: 1 1 auto; }

/* Vertical separator like the QSS `vsep`. */
.mock-tb-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px;
  background: var(--border);
}

.mock-tb-btn {
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  transition: color 140ms ease, border-color 140ms ease,
              background 140ms ease, transform 140ms ease;
}
.mock-tb-btn:hover { color: var(--accent); border-color: var(--accent); }
.mock-tb-btn.is-pressed,
.mock-tb-btn.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-strong));
  border-color: var(--accent);
  color: var(--accent);
}
.mock-tb-btn.is-disabled {
  color: var(--quiet);
  cursor: default;
  opacity: 0.5;
}

/* Toggle-style toolbar button (QPushButton#tb-btn-toggle). Greyed by
 * default; flips to a purple highlight when its toggle is "on". */
.mock-tb-btn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  transition: color 140ms ease, border-color 140ms ease,
              background 140ms ease;
}
.mock-tb-btn-toggle:hover {
  color: var(--text);
  background: var(--panel-strong);
}
.mock-tb-btn-toggle.is-active,
.mock-tb-btn-toggle[aria-pressed="true"] {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 55%, transparent);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
}
.mock-tb-btn-toggle.is-disabled {
  color: var(--quiet);
  cursor: default;
  opacity: 0.5;
}

/* Inline SVG icons inside toolbar buttons (real GUI gets these from
 * qtawesome MDI6 glyphs). Keep the icon vertically centred next to
 * the label. */
.mock-tb-btn .mock-tb-icon,
.mock-tb-btn-toggle .mock-tb-icon,
.mock-tb-btn-primary .mock-tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  color: currentColor;
}
.mock-tb-btn .mock-tb-icon svg,
.mock-tb-btn-toggle .mock-tb-icon svg,
.mock-tb-btn-primary .mock-tb-icon svg {
  display: block;
}
.mock-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mock-tb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mock-tb-btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  transition: filter 140ms ease, box-shadow 200ms ease;
}
.mock-tb-btn-primary:hover { box-shadow: 0 8px 22px var(--glow-accent); }
.mock-tb-btn-primary.is-disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.mock-tb-ghost {
  background: transparent;
  border: none;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  color: var(--muted);
  transition: color 140ms ease, background 140ms ease;
}
.mock-tb-ghost:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.mock-tb-mini-label {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}
.mock-tb-input {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--text);
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  min-width: 110px;
}

.mock-tb-status {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 200px;
}

/* --- 4 status chips on the toolbar (real labels) ---- */

.mock-tb-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mock-tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.mock-tb-chip strong {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  min-width: 1.4ch;
  text-align: right;
  display: inline-block;
}
.mock-tb-chip.chip-success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}
.mock-tb-chip.chip-warn {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning);
}
.mock-tb-chip.chip-err {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
}
.mock-tb-chip.chip-default {
  background: var(--panel-strong);
  border-color: var(--border);
  color: var(--muted);
}

/* --- Busy spinner ---- */

.mock-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.mock-spinner.is-spinning { animation: mock-spin 800ms linear infinite; }
@keyframes mock-spin { to { transform: rotate(360deg); } }

/* --- 3 counter tiles below toolbar (Scene 2) ---- */

.mock-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: var(--panel);
}
.mock-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.mock-stat strong {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 1.45rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mock-stat span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

/* --- Inventory table (Scene 3) ---- */

.mock-inv-scroll {
  max-height: 380px;
  overflow: auto;
  background: var(--bg);   /* GUI uses pane-dark (bg) for the inspection pane */
}

.mock-inv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
  font-family: "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
.mock-inv-table thead th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 6px 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.mock-inv-table thead th + th {
  border-left: 1px solid var(--border-glass);
}

/* Column widths chosen to mirror the model's setColumnWidth calls. */
.mock-inv-table .col-cb       { width: 28px; }
.mock-inv-table .col-status   { width: 28px; }
.mock-inv-table .col-id       { width: 68px; }
.mock-inv-table .col-ses      { width: 50px; }
.mock-inv-table .col-data     { width: 64px; }
.mock-inv-table .col-task     { width: 64px; }
.mock-inv-table .col-conf     { width: 50px; }

.mock-inv-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-glass);
  vertical-align: middle;
  color: var(--text);
}
.mock-inv-table tbody tr:last-child td { border-bottom: none; }

.mock-inv-table .cell-id,
.mock-inv-table .cell-ses,
.mock-inv-table .cell-conf,
.mock-inv-table .cell-basename {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
}
.mock-inv-table .cell-basename code {
  font-family: inherit;
  font-size: inherit;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
}
.mock-inv-table .cell-basename em {
  font-style: italic;
  color: var(--muted);
}
.mock-inv-table .cell-basename small {
  color: var(--muted);
  font-size: 0.84em;
  margin-left: 6px;
}

/* Conf colors (matches the conf delegate: >=0.9 green, >=0.75 amber,
 * <0.75 red). */
.mock-inv-table .conf-high { color: var(--success); }
.mock-inv-table .conf-med  { color: var(--warning); }
.mock-inv-table .conf-low  { color: var(--error);   }

/* Checkbox cell (just a glyph, mirrors include-column delegate). */
.mock-inv-table .mock-check {
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}
.mock-inv-table .mock-check.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Status badge cell (mirrors the StatusBadgeDelegate). */
.mock-inv-table .mock-badge {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  font-family: "SF Pro Text", "Segoe UI", Inter, sans-serif;
  line-height: 1;
}
.mock-inv-table .badge-ok     { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.mock-inv-table .badge-warn   { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.mock-inv-table .badge-err    { background: color-mix(in srgb, var(--error)   18%, transparent); color: var(--error);   }
.mock-inv-table .badge-info   { background: color-mix(in srgb, var(--purple)  18%, transparent); color: var(--purple);  }
.mock-inv-table .badge-physio { background: color-mix(in srgb, var(--teal)    18%, transparent); color: var(--teal);    }
.mock-inv-table .badge-skip   { background: var(--panel-strong);                                  color: var(--muted);   border: 1px solid var(--border); }

/* Data chip in the data column (mirrors the small datatype chip in
 * the real model). Colored per datatype. */
.mock-inv-table .mock-chip-data {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  background: color-mix(in srgb, var(--row-color, var(--muted)) 14%, transparent);
  color: var(--row-color, var(--muted));
}
.mock-inv-table .mock-chip-data.is-muted {
  background: var(--panel-strong);
  color: var(--muted);
  border: 1px solid var(--border);
}
.mock-inv-table .mock-chip-data.is-rerouted {
  background: color-mix(in srgb, var(--purple) 16%, transparent);
  color: var(--purple);
}

/* Per-row colour via the same step palette tokens. */
.mock-row[data-type="anat"]   { --row-color: var(--step1); }
.mock-row[data-type="func"]   { --row-color: var(--step5); }
.mock-row[data-type="fmap"]   { --row-color: var(--step4); }
.mock-row[data-type="dwi"]    { --row-color: var(--step3); }
.mock-row[data-type="physio"] { --row-color: var(--step2); }
.mock-row[data-type="scout"]  { --row-color: var(--quiet); }
.mock-row[data-type="sr"]     { --row-color: var(--quiet); }

/* Reveal animation (one row at a time, top-to-bottom). */
.mock-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms ease, transform 360ms ease,
              background 280ms ease;
}
.mock-row.is-visible { opacity: 1; transform: none; }

/* Status-tinted row backgrounds (mirrors paint_row_state in the
 * delegate: 6% alpha for warn/err). */
.mock-row[data-status="warn"].is-visible {
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.mock-row[data-status="reroute"].is-visible {
  background: color-mix(in srgb, var(--purple)  7%, transparent);
}
.mock-row[data-status="skip"]            { opacity: 0.55; }
.mock-row[data-status="skip"].is-visible { opacity: 0.55; }
.mock-row[data-status="skip"].is-visible code,
.mock-row[data-status="skip"].is-visible em {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent);
}
.mock-row[data-status="ok"].is-visible:hover,
.mock-row[data-status="warn"].is-visible:hover,
.mock-row[data-status="reroute"].is-visible:hover {
  background: color-mix(in srgb, var(--row-color, var(--accent)) 12%, transparent);
}

/* Inventory footer (legend + 'more columns' note). */
.mock-inv-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border-glass);
  color: var(--muted);
  font-size: 0.76rem;
}
.mock-legend {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
}
.mock-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mock-inv-note { font-size: 0.74rem; }
.mock-inv-note em { font-style: italic; }

/* --- Tight inventory scroll (Scenes 4 / 5: focused on a few rows) -- */
.mock-inv-scroll-tight { max-height: 280px; }

/* =====================================================================
 * Full 4-column Converter inspector (Scene 3 + variants on 4-5).
 *
 * Ports the level of detail from BIDS-Manager/docs/gui_mockups.html:
 * Raw FS tree | Filter / structure | Inspection table | Properties.
 * Plus a bottom dock (BIDS preview / Log / Conflicts) and a status
 * bar at the bottom.
 * =================================================================== */

.mock-insp-main {
  display: grid;
  grid-template-columns: 200px 180px minmax(0, 1fr) 280px;
  background: var(--bg);
  border-top: 1px solid var(--border-glass);
  min-height: 360px;
}

.mock-insp-pane {
  border-right: 1px solid var(--border-glass);
  overflow: auto;
  max-height: 520px;
  background: var(--bg);
  font-size: 0.74rem;
}
.mock-insp-pane:last-child { border-right: none; }
.mock-insp-pane.is-table { background: var(--bg); padding: 0; }

.mock-pane-title {
  margin: 0;
  padding: 7px 12px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border-glass);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 1100px) {
  .mock-insp-main {
    grid-template-columns: 170px 150px minmax(0, 1fr) 240px;
  }
}
@media (max-width: 900px) {
  /* On narrow viewports collapse trees + properties; keep the
   * inspection table visible because it's the focus. */
  .mock-insp-main { grid-template-columns: 1fr; }
  .mock-insp-pane.col-raw,
  .mock-insp-pane.col-filter,
  .mock-insp-pane.col-props { max-height: 140px; }
}

/* ----- Raw FS tree (col 1) ----- */

.fs-tree {
  padding: 4px 0;
  font-size: 0.74rem;
}
.fs-tree .it {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-tree .it.d1 { padding-left: 26px; }
.fs-tree .it.d2 { padding-left: 42px; font-family: "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.7rem; }
.fs-tree .arr {
  display: inline-block;
  width: 10px;
  color: var(--quiet);
  font-size: 0.7rem;
}
.fs-tree .meta {
  margin-left: auto;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.66rem;
  color: var(--quiet);
}
.fs-tree .it.skip { color: var(--quiet); opacity: 0.7; }
.fs-tree .it.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border-radius: 4px;
  margin: 0 6px;
  padding-left: 36px;
}

/* ----- Filter / structure pane (col 2) ----- */

.mod-filter {
  padding: 4px 0;
  font-size: 0.74rem;
}
.mod-filter .item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  color: var(--text);
}
.mod-filter .item.d1 { padding-left: 22px; }
.mod-filter .item.d2 { padding-left: 36px; }
.mod-filter .item.d3 { padding-left: 50px; }

.mod-filter .ck {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 8px;
  color: transparent;
  line-height: 1;
  font-weight: 700;
}
.mod-filter .ck.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.mod-filter .ck.checked::before { content: "\2713"; }
.mod-filter .ck.partial {
  background: color-mix(in srgb, var(--accent) 32%, var(--panel));
  border-color: var(--accent);
  color: var(--accent);
}
.mod-filter .ck.partial::before { content: "\2212"; }
.mod-filter .arr {
  display: inline-block;
  width: 10px;
  color: var(--quiet);
  font-size: 0.7rem;
}
.mod-filter .name { flex: 1 1 auto; }
.mod-filter .count {
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.66rem;
  color: var(--quiet);
}

/* ----- Properties panel (col 4) ----- */

.ent-form {
  padding: 12px 14px;
}
.ent-title {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
}
.ent-title-strong {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 700;
  margin-top: 6px;
}
.ent-title-strong .ent-meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

.ent-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.ent-row label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ent-row label .req { color: var(--error); font-weight: 800; }
.ent-row label .opt {
  color: var(--quiet);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ent-row input,
.ent-row select {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--text);
  font: inherit;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.74rem;
  width: 100%;
}

.ent-divider {
  border: none;
  border-top: 1px solid var(--border-glass);
  margin: 12px 0;
}

.ent-preview {
  padding: 9px 11px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.65;
  word-break: break-all;
}
.ent-preview .seg { color: var(--accent); }
.ent-preview .ent { color: var(--purple); }
.ent-preview .suf { color: var(--teal); }
.ent-preview .ext { color: var(--muted); }

.ent-validation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.ent-validation .item {
  display: flex;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
  align-items: flex-start;
}
.ent-validation .badge {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ent-validation .badge.ok   { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.ent-validation .badge.info { background: color-mix(in srgb, var(--accent) 18%, transparent);  color: var(--accent);  }

/* ----- Bottom dock + status bar ----- */

.mock-insp-dock {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-top: 1px solid var(--border-glass);
  background: var(--panel);
}
.mock-insp-dock .dock-tab {
  padding: 5px 12px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
}
.mock-insp-dock .dock-tab.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
}

/* Dock content area (Scene 6: Log tab shows streaming engine output
 * below the dock tab strip). */
.mock-dock-content {
  background: var(--bg);
  border-top: 1px solid var(--border-glass);
}
.mock-dock-content .mock-log {
  margin: 0;
  padding: 10px 14px;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text);
  height: 160px;
  overflow-y: auto;
  white-space: pre;
  background: var(--bg);
  border: none;
}

.mock-insp-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 5px 14px;
  border-top: 1px solid var(--border-glass);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  font-size: 0.7rem;
  color: var(--muted);
}
.mock-insp-statusbar .pill {
  display: inline-block;
  padding: 1px 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 700;
}

/* --- Selected row + editable cell (Scene 4) ---- */

.mock-row.is-selected.is-visible {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.mock-row.is-selected td:first-child {
  box-shadow: inset 3px 0 var(--accent);
}

.cell-editable {
  position: relative;
  cursor: text;
}
.cell-editable.is-editing {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-radius: 4px;
  outline: 1px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cell-editable.is-editing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: -2px;
  animation: mock-cursor 800ms steps(2) infinite;
}

/* --- BIDS preview strip below the table (Scene 4) ---- */

.mock-bids-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border-glass);
}
.mock-preview-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.mock-bids-preview code {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

/* --- Bulk edit dialog (Scene 5) ----
 * The dialog lives inside the mock window and is layered above the
 * inventory table when active. JS toggles is-shown to reveal it.  */

.mock-dialog-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms;
  z-index: 4;
}
.mock-dialog-wrap.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mock-dialog {
  width: min(420px, 90%);
  padding: 20px 22px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--panel-glass-strong);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(6px) scale(0.98);
  transition: transform 240ms ease;
}
.mock-dialog-wrap.is-shown .mock-dialog { transform: none; }

.mock-dialog-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.mock-dialog-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.mock-dialog-field {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.mock-dialog-field span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.mock-dialog-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.86rem;
}
.mock-dialog-input:focus { outline: 1px solid var(--accent); }
.mock-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Run conversion (Scene 6): progress bars + streaming log ---- */

.mock-convert {
  padding: 18px 18px 14px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mock-convert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mock-convert-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}
.mock-convert-title strong { color: var(--text); font-weight: 700; }
.mock-convert-counter {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.84rem;
  color: var(--muted);
}

.mock-progress-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-progress-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}
.mock-progress-label {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}
.mock-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.mock-progress-fill {
  position: absolute;
  inset: 0;
  width: var(--prog, 0%);
  background: linear-gradient(90deg, var(--accent),
                color-mix(in srgb, var(--accent) 60%, #ffffff));
  border-radius: 999px;
  transition: width 80ms linear;
  box-shadow: 0 0 10px var(--glow-accent);
}
.mock-progress-pct {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text);
  text-align: right;
  font-weight: 600;
}

.mock-log-wrap {
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}
.mock-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--panel-strong);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
}
.mock-log {
  margin: 0;
  padding: 10px 12px;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text);
  height: 180px;
  overflow-y: auto;
  white-space: pre;
  background: var(--bg);
}
.mock-log-line { display: block; opacity: 0; animation: log-fade 220ms ease forwards; }
.mock-log-line.log-tag-scan      { color: var(--accent); }
.mock-log-line.log-tag-stage     { color: var(--purple); }
.mock-log-line.log-tag-fixup     { color: var(--teal);   }
.mock-log-line.log-tag-enrich    { color: #ff79c6; font-weight: 600; }
.mock-log-line.log-tag-done      { color: var(--success); font-weight: 700; }
.mock-log-line.log-tag-warn      { color: var(--warning); }
@keyframes log-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------
 * Editor scenes (7 / 8 / 9): toolbar, BIDS tree, sidecar form,
 * NIfTI tri-view, validation list.
 * ------------------------------------------------------------------ */

/* --- Editor toolbar ---- */

.mock-editor-tb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--panel);
  flex-wrap: wrap;
}

/* Toggle switch (Strict BIDS). */
.mock-toggle {
  display: inline-block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}
.mock-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--muted);
}
.mock-toggle.is-on {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-strong));
  border-color: var(--accent);
}
.mock-toggle.is-on .mock-toggle-knob {
  left: auto; right: 1px;
  background: var(--accent);
}

/* --- Editor splitter (2-col: BIDS tree | center pane) ---- */

.mock-editor-split {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  min-height: 320px;
  background: var(--bg);
}
@media (max-width: 760px) {
  .mock-editor-split { grid-template-columns: 1fr; }
  .mock-bids-tree { max-height: 200px; }
}

.mock-pane-header {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 700;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- BIDS tree ---- */

.mock-bids-tree {
  border-right: 1px solid var(--border-glass);
  background: var(--bg);
  font-size: 0.78rem;
  overflow-y: auto;
  max-height: 360px;
}

.mock-tree {
  list-style: none;
  padding: 6px 4px 6px 8px;
  margin: 0;
}
.mock-tree ul {
  list-style: none;
  padding-left: 14px;
  margin: 0;
}

.mock-tree li {
  position: relative;
  padding: 3px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  color: var(--text);
  white-space: nowrap;
}
.mock-tree li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mock-tree li.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.tree-chev {
  display: inline-block;
  width: 12px;
  font-size: 0.72rem;
  color: var(--quiet);
  text-align: center;
  flex-shrink: 0;
}
.tree-folder.is-open > .tree-chev { color: var(--accent); }

.tree-glyph {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 14px;
  border-radius: 3px;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.tree-glyph.json {
  background: color-mix(in srgb, var(--purple) 16%, transparent);
  color: var(--purple);
}
.tree-glyph.nii  {
  background: color-mix(in srgb, var(--step1) 16%, transparent);
  color: var(--step1);
}
.tree-glyph.tsv  {
  background: color-mix(in srgb, var(--step5) 16%, transparent);
  color: var(--step5);
}

.tree-name {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tree-dot.dot-ok   { background: var(--success); }
.tree-dot.dot-warn { background: var(--warning); }
.tree-dot.dot-err  { background: var(--error);   }

/* Folder rows use a folder-icon visual via the chevron + name only. */

/* --- Sidecar form (Scene 7) ---- */

.mock-sidecar {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
}
.mock-sidecar-header {
  gap: 10px;
}
.mock-sidecar-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  background: var(--panel-strong);
}
.mock-sidecar-tab {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
}
.mock-sidecar-tab.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
}

.mock-sidecar-legend {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--panel);
}
.legend-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  border: 1px solid;
}
.legend-pill.legend-req {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
}
.legend-pill.legend-rec {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.legend-pill.legend-opt {
  background: var(--panel-strong);
  color: var(--muted);
  border-color: var(--border);
}

.mock-sidecar-form {
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
}
.mock-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-glass);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.mock-form-row.is-visible { opacity: 1; transform: none; }
.mock-form-key {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.mock-form-key::after {
  content: " *";
  color: var(--error);
  font-weight: 800;
  display: none;
}
.mock-form-row.is-req .mock-form-key::after { display: inline; }
.mock-form-val {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mock-form-row .legend-pill { font-size: 0.62rem; padding: 1px 7px; }

/* --- NIfTI viewer (Scene 8) ---- */

.mock-nifti {
  display: flex;
  flex-direction: column;
  background: #050709;
  min-width: 0;
}
.mock-nifti-header {
  gap: 8px;
  background: var(--panel);
  flex-wrap: wrap;
}
.mock-nifti-tabs {
  display: inline-flex;
  gap: 4px;
}
.mock-nifti-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  background: #050709;
  flex: 1 1 auto;
}
@media (max-width: 720px) {
  .mock-nifti-tiles { grid-template-columns: 1fr; }
}
.mock-nifti-tile {
  position: relative;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.mock-nifti-svg { width: 100%; height: 100%; display: block; }
.mock-crosshair {
  stroke: #3dffaf;
  stroke-width: 0.7;
  stroke-dasharray: 2 3;
  opacity: 0.85;
}
.mock-tile-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  pointer-events: none;
}

/* =====================================================================
 * Precise Editor scenes (7 / 8 / 9): 3-col splitter with BIDS tree,
 * center file viewer (file tabs + sidecar / NIfTI), and right
 * validation panel. Matches BIDS-Manager/docs/gui_mockups.html.
 * =================================================================== */

.mock-edit-main {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  background: var(--bg);
  border-top: 1px solid var(--border-glass);
  min-height: 460px;
}
@media (max-width: 1100px) {
  .mock-edit-main { grid-template-columns: 180px minmax(0, 1fr) 240px; }
}
@media (max-width: 900px) {
  .mock-edit-main { grid-template-columns: 1fr; }
  .mock-edit-main .col-tree,
  .mock-edit-main .col-val { max-height: 180px; }
}

/* File tabs at the top of the center viewer (one per open file). */
.mock-edit-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-glass);
}
.mock-edit-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  border-bottom: 2px solid transparent;
}
.mock-edit-tab .ico {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--muted);
}
.mock-edit-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.mock-edit-tab.is-active .ico { color: var(--accent); }
.mock-edit-tab .close { color: var(--quiet); margin-left: 6px; font-size: 0.7rem; }

.mock-edit-center {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mock-edit-viewer {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}
.mock-edit-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border-glass);
  font-size: 0.72rem;
  color: var(--muted);
}

/* Sidecar legend bar (REQ / REC / OPT / DEP swatches). */
.sc-legend {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.7rem;
  color: var(--muted);
}
.sc-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sc-legend .sw {
  width: 6px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.sc-legend .sw.req { background: var(--error); }
.sc-legend .sw.rec { background: var(--warning); }
.sc-legend .sw.opt { background: var(--quiet); opacity: 0.55; }
.sc-legend .sw.dep { background: var(--quiet); }
.sc-legend-tag {
  margin-left: auto;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

/* Sidecar form (one row per JSON key/value). The 4px coloured stripe
 * on the left indicates the field's kind (req / rec / opt / dep). */
.sidecar {
  padding: 6px 0;
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
}
.sc-field {
  display: grid;
  grid-template-columns: 4px 200px 1fr;
  gap: 0 12px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border-glass);
  align-items: center;
}
.sc-field:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sc-field .req-mark {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  align-self: center;
}
.sc-field.req .req-mark { background: var(--error); }
.sc-field.rec .req-mark { background: var(--warning); }
.sc-field.opt .req-mark { background: var(--quiet); opacity: 0.55; }
.sc-field.dep .req-mark { background: var(--quiet); }
.sc-field .key { color: var(--text); }
.sc-field.dep .key { color: var(--muted); text-decoration: line-through; }
.sc-field .val { color: var(--accent); word-break: break-all; }
.sc-field .val.todo { color: var(--error); font-style: italic; }
.sc-field .val.num { color: var(--purple); }
.sc-field .val.str::before { content: '"'; color: var(--muted); }
.sc-field .val.str::after  { content: '"'; color: var(--muted); }

/* Validation panel (right column). */
.mock-val-panel {
  background: var(--bg);
  border-left: 1px solid var(--border-glass);
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 0.78rem;
}
.mock-val-panel-section { margin-bottom: 16px; }
.mock-val-panel-section:last-child { margin-bottom: 0; }
.mock-val-panel-section h5 {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-val-panel-section h5 .count {
  background: var(--panel-strong);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.mock-val-msg {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 0.76rem;
  line-height: 1.5;
}
.mock-val-msg.ok   { border-color: color-mix(in srgb, var(--success) 45%, transparent);
                     background: color-mix(in srgb, var(--success) 6%, var(--panel)); }
.mock-val-msg.warn { border-color: color-mix(in srgb, var(--warning) 45%, transparent);
                     background: color-mix(in srgb, var(--warning) 6%, var(--panel)); }
.mock-val-msg.err  { border-color: color-mix(in srgb, var(--error)   45%, transparent);
                     background: color-mix(in srgb, var(--error)   6%, var(--panel)); }
.mock-val-msg.info { border-color: color-mix(in srgb, var(--accent)  45%, transparent);
                     background: color-mix(in srgb, var(--accent)  6%, var(--panel)); }

.mock-val-msg .b {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}
.mock-val-msg.ok   .b { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.mock-val-msg.warn .b { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.mock-val-msg.err  .b { background: color-mix(in srgb, var(--error)   18%, transparent); color: var(--error);   }
.mock-val-msg.info .b { background: color-mix(in srgb, var(--accent)  18%, transparent); color: var(--accent);  }

.mock-val-msg .rule {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mock-val-msg .body { color: var(--text); }
.mock-val-msg .body code {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.76em;
  color: var(--muted);
}
.mock-val-msg .fix-btn {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.7rem;
  margin-left: 6px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

/* --- Validation list (Scene 9) ---- */

.mock-validation {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.mock-val-list {
  list-style: none;
  padding: 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
}
.mock-val-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  background: var(--panel);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease,
              border-color 200ms ease;
}
.mock-val-row.is-visible { opacity: 1; transform: none; }
.mock-val-row[data-sev="warn"] {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 6%, var(--panel));
}
.mock-val-row[data-sev="hint"] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.mock-val-row[data-sev="err"] {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  background: color-mix(in srgb, var(--error) 6%, var(--panel));
}
.mock-val-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.78rem;
}
.mock-val-row[data-sev="warn"] .mock-val-icon {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.mock-val-row[data-sev="hint"] .mock-val-icon {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.mock-val-row[data-sev="err"] .mock-val-icon {
  background: color-mix(in srgb, var(--error) 18%, transparent);
  color: var(--error);
}
.mock-val-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  font-size: 0.88rem;
}
.mock-val-desc {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.mock-val-desc code {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.84em;
}
.mock-val-target {
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  align-self: flex-start;
}

/* --------------------------------------------------------------------
 * Tutorial mobile (<= 640px) polish: the scene mocks are dense, so
 * shrink the font size, hide the brand word-mark, collapse the toggle
 * spacing, and drop progress-row labels to a fixed narrow column.
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .scene-mock { font-size: 0.78rem; border-radius: 10px; }

  /* Top bar: hide the word-mark but keep the gradient logo. */
  .mock-topbar { gap: 8px; padding: 8px 10px; min-height: 48px; }
  .mock-topbar-brand > span:last-child { display: none; }
  .mock-topbar-switch { margin-left: 0; }
  .mock-switch-btn { padding: 4px 10px; font-size: 0.74rem; }

  /* PathBar: drop the label, keep the field + button only. */
  .mock-pathbar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px 10px; }
  .mock-pathbar-label { display: none; }
  .mock-pathbar-value { font-size: 0.76rem; }

  /* Scan toolbar: small chips. */
  .mock-tb { gap: 6px; padding: 6px 10px; }
  .mock-tb-btn, .mock-tb-btn-primary { padding: 4px 10px; font-size: 0.74rem; }
  .mock-tb-mini-label { font-size: 0.7rem; }
  .mock-tb-input { font-size: 0.72rem; min-width: 80px; }
  .mock-tb-chip { font-size: 0.7rem; padding: 1px 7px; }
  .mock-tb-status { display: none; }   /* spinner alone is enough on mobile */

  /* Counter tiles smaller. */
  .mock-status-grid { padding: 10px; gap: 6px; }
  .mock-stat { padding: 10px 12px; }
  .mock-stat strong { font-size: 1.25rem; }

  /* Inventory table cells shrink. */
  .mock-inv-table { font-size: 0.7rem; }
  .mock-inv-table .cell-id, .mock-inv-table .cell-ses,
  .mock-inv-table .cell-conf, .mock-inv-table .cell-basename {
    font-size: 0.7rem;
  }

  /* Editor toolbar: wrap aggressively. */
  .mock-editor-tb { padding: 6px 10px; }

  /* BIDS tree narrower. */
  .mock-bids-tree { font-size: 0.74rem; max-height: 180px; }

  /* Sidecar form: collapse the legend pill into the row, smaller font. */
  .mock-form-row { grid-template-columns: minmax(140px, 1fr) 1fr; padding: 5px 10px; }
  .mock-form-row .legend-pill { grid-column: 1 / -1; justify-self: start; }

  /* Validation rows: drop the target pill onto the next row. */
  .mock-val-row { grid-template-columns: 24px 1fr; }
  .mock-val-row .mock-val-target { grid-column: 2; margin-top: 6px; }
  .mock-val-icon { width: 22px; height: 22px; }

  /* Scene controls + counter shrink. */
  .scene-controls-row { gap: 6px; }
  .scene-btn { padding: 5px 11px; font-size: 0.78rem; }
  .scene-counter { font-size: 0.82rem; }

  /* Progress dots: hide labels on the very narrowest screens. */
  .scene-dot { padding: 8px 4px; }
  .scene-dot-num { font-size: 0.68rem; }
  .scene-progress li { min-width: 38px; }
}

/* Honour prefers-reduced-motion globally for tutorial-specific
 * animations not already covered. */
@media (prefers-reduced-motion: reduce) {
  .mock-spinner.is-spinning { animation: none; }
  .mock-row { transition: none; }
  .mock-form-row, .mock-val-row { transition: none; }
  .mock-row.is-visible { opacity: 1; transform: none; }
  .mock-form-row.is-visible { opacity: 1; transform: none; }
  .mock-val-row.is-visible { opacity: 1; transform: none; }
  .scene { animation: none; }
  .mock-log-line { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------
 * Reveal-on-scroll (IntersectionObserver)
 * ------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------
 * GUI-faithful mock (.scene-mock-gui)
 *
 * A 1:1 visual re-implementation of the real BIDS Manager Qt window
 * for the tutorial scenes. Selectors are scoped to .scene-mock-gui so
 * the older .mock-* styling on other scenes is unaffected.
 *
 * Palette + metrics mirror bidsmgr/gui/theme.qss and theme_manager.py
 * `DARK` exactly:
 *   bg        #0a0e13   (app background)
 *   surface   #11161d   (#top-header, panes, code areas)
 *   surface2  #161b22   (#pathbar, #toolbar)
 *   surface3  #1c2128   (#tb-btn, #tb-input, theme-toggle)
 *   border    #21262d   (1 px borders)
 *   subtle    #1a1f26   (pathbar bottom)
 *   text      #e6edf3
 *   dim       #8b949e
 *   muted     #656d76
 *   accent    #58a6ff
 *
 * Font baseline: 11 px to match QSS rule on every Q* widget.
 * ------------------------------------------------------------------ */

.scene-mock-gui {
  /* Override .scene-mock's frosted glass with a solid desktop-app
   * background. Sharp 6 px corners read more like a Qt window than
   * the 12 px we use for cards across the docs. */
  background: #0a0e13;
  border: 1px solid #21262d;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  color: #e6edf3;
  overflow: hidden;
}

/* ---- #top-header (48 px tall) ---- */
.scene-mock-gui .gui-topheader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  height: 48px;
  background: #11161d;
  border-bottom: 1px solid #21262d;
}
.scene-mock-gui .gui-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scene-mock-gui .gui-logo {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.scene-mock-gui .gui-brand-name {
  font-size: 16px;
  font-weight: 600;
  color: #e6edf3;
  letter-spacing: -0.01em;
  margin-left: 2px;
}

/* View pills (Converter | Editor). Real GUI uses rectangular pills
 * with 5 px radius; checked = accent-bg + accent text + accent border. */
.scene-mock-gui .gui-view-pill {
  border: 1px solid transparent;
  background: transparent;
  color: #8b949e;
  padding: 5px 16px;
  min-width: 76px;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  margin-left: 6px;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease;
}
.scene-mock-gui .gui-view-pill:hover {
  color: #e6edf3;
  background: #1c2128;
}
.scene-mock-gui .gui-view-pill.is-checked {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.40);
  font-weight: 600;
}

.scene-mock-gui .gui-grow { flex: 1 1 auto; }

/* Theme toggle button: 32x28, square, sun icon by default. */
.scene-mock-gui .gui-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #21262d;
  background: #1c2128;
  color: #e6edf3;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease;
}
.scene-mock-gui .gui-theme-toggle:hover { background: #21262d; }
.scene-mock-gui .gui-theme-toggle svg { display: block; }

/* ---- #pathbar (per row) ---- */
.scene-mock-gui .gui-pathbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #161b22;
  border-bottom: 1px solid #1a1f26;
}
.scene-mock-gui .gui-path-label {
  color: #8b949e;
  font-size: 11px;
  min-width: 80px;
}
.scene-mock-gui .gui-path-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  background: #0a0e13;
  border: 1px solid #21262d;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  font-size: 11px;
  color: #e6edf3;
  overflow: hidden;
}
.scene-mock-gui .gui-path-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: #8b949e;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.scene-mock-gui .gui-path-glyph.is-ok {
  color: #3fb950;
}
.scene-mock-gui .gui-path-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.scene-mock-gui .gui-path-value.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: currentColor;
  margin-left: 1px;
  vertical-align: -1px;
  animation: mock-cursor 800ms steps(2) infinite;
}

/* Ghost button (change…). QSS #tb-btn-ghost. */
.scene-mock-gui .gui-tb-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: #8b949e;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  flex-shrink: 0;
  transition: color 140ms ease, background 140ms ease;
}
.scene-mock-gui .gui-tb-ghost:hover {
  color: #e6edf3;
  background: #1c2128;
}

/* ---- #toolbar (44 px) ---- */
.scene-mock-gui .gui-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  height: 44px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}

/* Standard tb-btn: surface3 bg, 1 px border, 4 px radius, 11 px text */
.scene-mock-gui .gui-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1c2128;
  border: 1px solid #21262d;
  color: #e6edf3;
  padding: 4px 11px;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}
.scene-mock-gui .gui-tb-btn:hover { background: #21262d; }
.scene-mock-gui .gui-tb-btn.is-disabled {
  color: #656d76;
  background: #161b22;
  cursor: default;
}

/* Primary tb-btn-primary: accent bg + #primary_btn_text (#0a0e13) */
.scene-mock-gui .gui-tb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #58a6ff;
  border: 1px solid #58a6ff;
  color: #0a0e13;
  padding: 4px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 140ms ease;
}
.scene-mock-gui .gui-tb-btn-primary:hover { filter: brightness(1.08); }
.scene-mock-gui .gui-tb-btn-primary.is-disabled {
  background: #1c2128;
  border-color: #21262d;
  color: #656d76;
  cursor: default;
}

.scene-mock-gui .gui-tb-icon { display: inline-block; flex-shrink: 0; }

/* Tiny "TSV:" label before the input. */
.scene-mock-gui .gui-tb-mini-label {
  color: #8b949e;
  font-size: 11px;
}

/* Toolbar input. Compact, surface3 bg. */
.scene-mock-gui .gui-tb-input {
  background: #1c2128;
  color: #e6edf3;
  border: 1px solid #21262d;
  border-radius: 4px;
  padding: 2px 6px;
  font: inherit;
  font-size: 11px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  width: 140px;
}
.scene-mock-gui .gui-tb-input:focus {
  outline: none;
  border-color: #58a6ff;
}

/* Vertical separator (QFrame#vsep). 1 px wide, 4 px margin top/bottom. */
.scene-mock-gui .gui-vsep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: #21262d;
  margin: 4px 4px;
}

/* Status chips (QLabel[chipKind]). 11 px text, 9 px border radius,
 * tinted to the kind. Idle (zero values) uses the default surface3
 * fill that the QSS gives QLabel[chipKind] without a specific kind. */
.scene-mock-gui .gui-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #21262d;
  background: #1c2128;
  color: #8b949e;
  white-space: nowrap;
}
.scene-mock-gui .gui-chip.chip-success {
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.30);
  color: #3fb950;
}
.scene-mock-gui .gui-chip.chip-warn {
  background: rgba(210, 153, 34, 0.12);
  border-color: rgba(210, 153, 34, 0.30);
  color: #d29922;
}
.scene-mock-gui .gui-chip.chip-err {
  background: rgba(248, 81, 73, 0.12);
  border-color: rgba(248, 81, 73, 0.30);
  color: #f85149;
}

/* BusySpinner placeholder. Hidden when idle; spins when .is-spinning. */
.scene-mock-gui .gui-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #21262d;
  border-top-color: #58a6ff;
  visibility: hidden;
}
.scene-mock-gui .gui-spinner.is-spinning {
  visibility: visible;
  animation: gui-spin 0.9s linear infinite;
}
@keyframes gui-spin {
  to { transform: rotate(360deg); }
}

/* ---- Sub-scene stepper (Scene 3 only) ---- */
.inspect-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.inspect-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel-strong);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 160ms ease, border-color 160ms ease,
              background 160ms ease;
}
.inspect-step:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.inspect-step.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: var(--accent);
  font-weight: 600;
}
.inspect-step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inspect-step.is-active .inspect-step-num {
  background: var(--accent);
  color: var(--bg);
}

/* Per-sub-scene caption shown above the mock. Only the one matching
 * the active step is visible. */
.inspect-captions {
  margin-top: 18px;
}
.inspect-caption {
  display: none;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  border-radius: 0 8px 8px 0;
  color: var(--text);
}
.inspect-caption.is-active { display: block; }
.inspect-caption strong { color: var(--accent); font-weight: 700; }
.inspect-caption p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.92rem;
}

/* ====================================================================
 * Scene 3: 3-column panel splitter (gui-converter-body)
 * Stripped down to the three teaching panels:
 *   [filter] | [inspection] | [properties]
 *   sizes:   220       1fr (wide)       320
 * The full window chrome (top header, pathbars, toolbar, FS trees,
 * bottom dock, statusbar) is omitted — Scene 3 teaches the panels in
 * isolation so the inspection table gets the room it needs.
 * ==================================================================== */

.gui-converter-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 320px;
  min-height: 520px;
  max-height: 620px;
  background: #0a0e13;
  border-bottom: 1px solid #21262d;
  border-radius: 6px;
  overflow: hidden;
}

[data-theme="light"] .gui-converter-body {
  background: #ffffff;
  border-color: #d0d7de;
}

/* Mobile fallback: stack the columns. The mock is primarily a desktop
 * pattern; on narrow viewports we collapse to one column and let the
 * user scroll. */
@media (max-width: 1024px) {
  .gui-converter-body {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

/* ---- gui-pane (base) ---- */
.gui-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #21262d;
  background: #11161d;
  transition: opacity 240ms ease, background 240ms ease;
}
.gui-pane:last-child { border-right: none; }
.gui-pane.is-dim { opacity: 0.45; }
.gui-pane.is-focus {
  background: #161b22;
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.45);
}

[data-theme="light"] .gui-pane { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .gui-pane.is-focus { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(9, 105, 218, 0.40); }

/* gui-pane-header (#pane-h5 in the real QSS) */
.gui-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #11161d;
  color: #8b949e;
  border-bottom: 1px solid #1a1f26;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gui-pane-header-meta {
  margin-left: auto;
  font-size: 10px;
  color: #656d76;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
}
[data-theme="light"] .gui-pane-header { background: #f6f8fa; color: #656d76; border-color: #e5e7ea; }

/* ---- gui-fs-col: vertical split of raw + output FS trees ---- */
.gui-fs-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.gui-fs {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid #21262d;
}
.gui-fs:last-child { border-bottom: none; }
.gui-fs-body {
  overflow: auto;
  padding: 6px 8px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11px;
  color: #e6edf3;
  flex: 1 1 auto;
}
[data-theme="light"] .gui-fs-body { color: #1f2328; }
.gui-fs-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  cursor: default;
  border-radius: 3px;
}
.gui-fs-item:hover { background: #161b22; }
[data-theme="light"] .gui-fs-item:hover { background: #eef1f4; }
.gui-fs-item .chev {
  display: inline-block;
  width: 12px;
  color: #8b949e;
  text-align: center;
}
.gui-fs-item .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gui-fs-item .meta {
  font-size: 10px;
  color: #656d76;
  font-weight: 600;
}
.gui-fs-item.d1 { padding-left: 18px; }
.gui-fs-item.d2 { padding-left: 30px; }
.gui-fs-item.d3 { padding-left: 42px; }
.gui-fs-item.d4 { padding-left: 54px; }
.gui-fs-item.is-skip .name { color: #656d76; text-decoration: line-through; }
.gui-fs-item.is-skip:hover .name { color: #8b949e; }
.gui-fs-item.is-folder .name { font-weight: 600; }
.gui-fs-item.is-highlight {
  background: rgba(88, 166, 255, 0.18);
  outline: 1px solid rgba(88, 166, 255, 0.55);
}

/* ---- gui-filter-pane ---- */
.gui-filter-body {
  overflow: auto;
  padding: 6px 8px;
  font-size: 11px;
  color: #e6edf3;
  flex: 1 1 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="light"] .gui-filter-body { color: #1f2328; }
.gui-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: default;
  white-space: nowrap;
  transition: background 200ms ease;
}
.gui-filter-row:hover { background: #161b22; }
[data-theme="light"] .gui-filter-row:hover { background: #eef1f4; }
.gui-filter-row.d1 { padding-left: 16px; }
.gui-filter-row.d2 { padding-left: 28px; }
.gui-filter-row.d3 { padding-left: 40px; }
.gui-filter-row .chev {
  display: inline-block;
  width: 12px;
  color: #8b949e;
  text-align: center;
}
.gui-filter-row .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gui-filter-row .count {
  font-size: 10px;
  color: #656d76;
  font-weight: 700;
  background: rgba(88, 166, 255, 0.08);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(88, 166, 255, 0.20);
}
.gui-filter-row.is-folder .name { font-weight: 600; }
.gui-filter-row.is-unchecked .name { color: #656d76; opacity: 0.7; }
[data-theme="light"] .gui-filter-row .count {
  color: #656d76;
  background: rgba(9, 105, 218, 0.06);
  border-color: rgba(9, 105, 218, 0.20);
}

/* Tri-state checkbox: empty, partial, checked. */
.ck {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid #21262d;
  background: #0a0e13;
  border-radius: 3px;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease;
}
.ck.is-checked {
  background: #58a6ff;
  border-color: #58a6ff;
  color: #0a0e13;
}
.ck.is-checked::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #0a0e13;
  border-bottom: 2px solid #0a0e13;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ck.is-partial {
  background: #1c2128;
  border-color: #58a6ff;
}
.ck.is-partial::after {
  content: "";
  width: 7px;
  height: 2px;
  background: #58a6ff;
}
[data-theme="light"] .ck {
  background: #ffffff;
  border-color: #d0d7de;
}
[data-theme="light"] .ck.is-checked {
  background: #0969da;
  border-color: #0969da;
}
[data-theme="light"] .ck.is-checked::after {
  border-left-color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ---- gui-table-pane (#inspection-table style) ---- */
.gui-table-pane {
  background: #0a0e13;
}
[data-theme="light"] .gui-table-pane { background: #ffffff; }

.gui-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.gui-inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="light"] .gui-inv-table { color: #1f2328; }

.gui-inv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #11161d;
  color: #8b949e;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid #21262d;
  text-align: left;
  white-space: nowrap;
}
[data-theme="light"] .gui-inv-table thead th { background: #f6f8fa; color: #656d76; border-color: #d0d7de; }

.gui-inv-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #1a1f26;
  white-space: nowrap;
  vertical-align: middle;
}
[data-theme="light"] .gui-inv-table tbody td { border-color: #e5e7ea; }

.gui-inv-row { transition: background 200ms ease; }
.gui-inv-row:hover { background: #161b22; }
.gui-inv-row.is-selected {
  background: rgba(88, 166, 255, 0.10);
  outline: 1px solid rgba(88, 166, 255, 0.35);
}
.gui-inv-row.is-skip { color: #656d76; }
.gui-inv-row.is-skip code { color: #656d76; }
.gui-inv-row.is-skip em { font-style: italic; color: #656d76; }
[data-theme="light"] .gui-inv-row:hover { background: #eef1f4; }
[data-theme="light"] .gui-inv-row.is-selected { background: rgba(9, 105, 218, 0.10); outline-color: rgba(9, 105, 218, 0.40); }

.gui-inv-table .col-cb { width: 28px; }
.gui-inv-table .col-status { width: 22px; }
.gui-inv-table .col-id { width: 60px; }
.gui-inv-table .col-data { width: 50px; }
.gui-inv-table .col-suffix { width: 80px; }
.gui-inv-table .col-task { width: 70px; }
.gui-inv-table .col-run { width: 40px; }
.gui-inv-table .col-conf { width: 50px; }
.gui-inv-table .col-seq { width: 22ch; }

.gui-inv-table .cell-id   { font-family: "SF Mono", "Menlo", monospace; }
.gui-inv-table .cell-task { font-weight: 600; }
.gui-inv-table .cell-seq  { font-family: "SF Mono", "Menlo", monospace; color: #8b949e; }
.gui-inv-table .cell-basename {
  font-family: "SF Mono", "Menlo", monospace;
  color: #e6edf3;
}
.gui-inv-table .cell-basename code {
  background: transparent;
  font-family: inherit;
  color: inherit;
}
.gui-inv-table .cell-basename small { color: #d2a8ff; margin-left: 6px; }
.gui-inv-table .cell-rerouted { color: #d2a8ff; font-weight: 600; }
[data-theme="light"] .gui-inv-table .cell-rerouted { color: #8250df; }
[data-theme="light"] .gui-inv-table .cell-seq { color: #656d76; }
[data-theme="light"] .gui-inv-table .cell-basename small { color: #8250df; }

.cell-conf {
  font-family: "SF Mono", "Menlo", monospace;
  font-weight: 700;
}
.cell-conf.conf-high { color: #3fb950; }
.cell-conf.conf-med  { color: #d29922; }
.cell-conf.conf-low  { color: #f85149; }
[data-theme="light"] .cell-conf.conf-high { color: #1a7f37; }
[data-theme="light"] .cell-conf.conf-med  { color: #9a6700; }
[data-theme="light"] .cell-conf.conf-low  { color: #cf222e; }

.gui-cb {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid #21262d;
  background: #0a0e13;
  border-radius: 3px;
  color: transparent;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
}
.gui-cb.is-on {
  background: #58a6ff;
  border-color: #58a6ff;
  color: #0a0e13;
}
[data-theme="light"] .gui-cb { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .gui-cb.is-on { background: #0969da; border-color: #0969da; color: #ffffff; }

.gui-row-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #656d76;
}
.gui-row-dot.dot-ok    { background: #3fb950; }
.gui-row-dot.dot-warn  { background: #d29922; }
.gui-row-dot.dot-err   { background: #f85149; }
.gui-row-dot.dot-info  { background: #d2a8ff; }
.gui-row-dot.dot-skip  { background: #656d76; }

.gui-table-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #11161d;
  border-top: 1px solid #21262d;
}
[data-theme="light"] .gui-table-footer { background: #f6f8fa; border-color: #d0d7de; }

.gui-table-footer .gui-tb-btn,
.gui-table-footer .gui-tb-btn-toggle {
  font-size: 11px;
  padding: 4px 11px;
}

/* ---- gui-tb-btn-toggle (used in inspection footer and other toggles) ---- */
.scene-mock-gui .gui-tb-btn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #21262d;
  color: #8b949e;
  padding: 4px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.scene-mock-gui .gui-tb-btn-toggle:hover { color: #e6edf3; background: #1c2128; }
.scene-mock-gui .gui-tb-btn-toggle[aria-pressed="true"] {
  background: rgba(210, 168, 255, 0.12);
  border-color: rgba(210, 168, 255, 0.40);
  color: #d2a8ff;
}
[data-theme="light"] .scene-mock-gui .gui-tb-btn-toggle { color: #656d76; border-color: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn-toggle:hover { color: #1f2328; background: #eef1f4; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn-toggle[aria-pressed="true"] {
  background: rgba(130, 80, 223, 0.10);
  border-color: rgba(130, 80, 223, 0.40);
  color: #8250df;
}

/* ---- gui-props-pane ---- */
.gui-props-body {
  overflow: auto;
  padding: 12px 14px 16px;
  font-size: 11px;
  flex: 1 1 auto;
}
.gui-props-section {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}
.gui-props-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 10px;
}
.gui-props-label {
  color: #8b949e;
  font-size: 11px;
  text-transform: lowercase;
  font-weight: 500;
}
.gui-props-label .req {
  color: #f85149;
  font-weight: 700;
  margin-left: 2px;
}
.gui-props-label .rec {
  color: #58a6ff;
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(88, 166, 255, 0.10);
  margin-left: 4px;
  font-weight: 700;
}
.gui-props-label .opt {
  color: #656d76;
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: #1c2128;
  border: 1px solid #21262d;
  margin-left: 4px;
  font-weight: 700;
}
.gui-props-value,
.gui-props-input {
  background: #0a0e13;
  border: 1px solid #21262d;
  color: #e6edf3;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
  min-height: 22px;
}
.gui-props-input.is-readonly {
  color: #8b949e;
  background: #161b22;
}
.gui-props-input.placeholder { color: #656d76; }
.gui-props-input:focus,
.gui-props-input.is-editing {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.30);
}
[data-theme="light"] .gui-props-value,
[data-theme="light"] .gui-props-input { background: #ffffff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .gui-props-input.is-readonly { background: #f6f8fa; color: #656d76; }
[data-theme="light"] .gui-props-label .rec { color: #0969da; background: rgba(9, 105, 218, 0.08); }
[data-theme="light"] .gui-props-label .opt { background: #f6f8fa; border-color: #d0d7de; }

.gui-props-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8b949e;
  margin: 14px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #1a1f26;
}
.gui-props-title .muted {
  font-size: 9px;
  font-weight: 500;
  color: #656d76;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  margin-left: 6px;
}
[data-theme="light"] .gui-props-title { color: #656d76; border-color: #e5e7ea; }

.gui-props-preview {
  background: #11161d;
  border: 1px solid #21262d;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
  color: #e6edf3;
  line-height: 1.5;
  word-break: break-all;
}
.gui-props-preview .seg  { color: #58a6ff; font-weight: 600; }
.gui-props-preview .ent  { color: #d2a8ff; font-weight: 600; }
.gui-props-preview .suf  { color: #3fb950; font-weight: 600; }
.gui-props-preview .ext  { color: #656d76; }
.gui-props-preview .dim  { color: #656d76; }
[data-theme="light"] .gui-props-preview { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .gui-props-preview .seg { color: #0969da; }
[data-theme="light"] .gui-props-preview .ent { color: #8250df; }
[data-theme="light"] .gui-props-preview .suf { color: #1a7f37; }

.gui-props-provenance {
  font-size: 11px;
  color: #8b949e;
  line-height: 1.55;
}
.gui-props-provenance p {
  margin: 0 0 6px;
}
.gui-props-provenance strong { color: #e6edf3; }
[data-theme="light"] .gui-props-provenance { color: #656d76; }
[data-theme="light"] .gui-props-provenance strong { color: #1f2328; }

/* ---- Bottom dock + statusbar ---- */
.gui-dock {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  background: #11161d;
  border-bottom: 1px solid #21262d;
  height: 28px;
}
.gui-dock-tab {
  border: none;
  background: transparent;
  color: #8b949e;
  padding: 6px 12px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.gui-dock-tab:hover { color: #e6edf3; }
.gui-dock-tab.is-active {
  color: #58a6ff;
  border-bottom-color: #58a6ff;
}
[data-theme="light"] .gui-dock { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .gui-dock-tab { color: #656d76; }
[data-theme="light"] .gui-dock-tab:hover { color: #1f2328; }
[data-theme="light"] .gui-dock-tab.is-active { color: #0969da; border-bottom-color: #0969da; }

.gui-statusbar {
  display: flex;
  align-items: center;
  padding: 5px 14px;
  background: #0a0e13;
  border-top: 1px solid #21262d;
  font-size: 11px;
  color: #8b949e;
  height: 24px;
}
.gui-statusbar-right { margin-left: auto; }
.gui-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(63, 185, 80, 0.14);
  border: 1px solid rgba(63, 185, 80, 0.30);
  color: #3fb950;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
[data-theme="light"] .gui-statusbar { background: #ffffff; border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .gui-status-pill { background: rgba(26, 127, 55, 0.10); border-color: rgba(26, 127, 55, 0.30); color: #1a7f37; }

/* ---- Scene recording figure (used in Step 2: Run a scan) ----
 * Wraps a captured screen recording (converted to GIF) so it lands
 * in a Qt-window-like frame matching the rest of the GUI mocks.
 *
 * The parent .container caps at 1180 px which is too narrow for the
 * recording's 7.7:1 aspect ratio (it would render only ~150 px tall
 * at that width). The figure breaks out of the container using the
 * classic centered-extend technique: position relative, left 50 %,
 * transform translateX(-50 %), so it can use up to 1600 px or the
 * viewport width (whichever is smaller). */
/* ====================================================================
 * Modality tutorial pages: dataset tree + results grid + tags
 * ==================================================================== */

/* File / folder tree visualization */
.dataset-tree {
  margin: 20px 0;
  padding: 14px 18px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}
.dataset-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  white-space: nowrap;
  flex-wrap: wrap;
}
.dataset-tree-row.d1 { padding-left: 22px; }
.dataset-tree-row.d2 { padding-left: 44px; }
.dataset-tree-row.d3 { padding-left: 66px; }
.dataset-tree-row .chev {
  display: inline-block;
  width: 14px;
  text-align: center;
  color: var(--muted);
  flex-shrink: 0;
}
.dataset-tree-row .name { color: var(--text); }
.dataset-tree-row.is-folder .name { color: var(--accent); font-weight: 600; }
.dataset-tree-row .meta {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(88, 166, 255, 0.10);
  padding: 1px 8px;
  border-radius: 999px;
}
.dataset-tree-row.muted { color: var(--muted); padding-top: 0; padding-bottom: 0; }
.dataset-tree-row.muted .name { color: var(--muted); }
.dataset-tree-row .muted { color: var(--muted); }

/* Inline tags next to filenames or folder names */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag-info {
  background: rgba(88, 166, 255, 0.14);
  color: var(--accent);
}
.tag-accent {
  background: rgba(210, 168, 255, 0.14);
  color: var(--purple);
}
.tag-muted {
  background: rgba(101, 109, 118, 0.18);
  color: var(--muted);
}
.tag-warn {
  background: rgba(210, 153, 34, 0.16);
  color: var(--warning);
}

/* The 3-up "what you'll see" results grid */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.results-card {
  padding: 18px 18px 16px;
  background: var(--panel-glass);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.results-card-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.results-card-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.results-card-label {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 10px;
}
.results-card p.muted {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* The EEG protocol mapping table */
.dataset-protocol {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.92rem;
}
.dataset-protocol th,
.dataset-protocol td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.dataset-protocol th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ====================================================================
 * Step 2 sub-step 2: chip-click explainer + IssuesDialog mock
 * ==================================================================== */

.scan-chip-explainer {
  display: grid;
  gap: 28px;
}
.scan-chip-explainer[hidden] { display: none; }
.scan-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: #11161d;
  border: 1px solid #21262d;
  border-radius: 6px;
  align-self: start;
}
[data-theme="light"] .scan-chip-row {
  background: #f6f8fa;
  border-color: #d0d7de;
}

.scan-chip-row .gui-chip.is-clickable {
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease;
}
.scan-chip-row .gui-chip.is-clickable:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.scan-chip-key {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.scan-chip-key li {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 16px;
}
.scan-chip-key .legend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legend-pill.legend-success {
  background: rgba(63, 185, 80, 0.14);
  color: #3fb950;
}
.legend-pill.legend-warn {
  background: rgba(210, 153, 34, 0.14);
  color: #d29922;
}
.legend-pill.legend-err {
  background: rgba(248, 81, 73, 0.14);
  color: #f85149;
}
.legend-pill.legend-skip {
  background: rgba(101, 109, 118, 0.18);
  color: #8b949e;
}

/* IssuesDialog mock (drops in the chip-explainer flow) */
.mock-issues-dialog {
  margin: 0;
  max-width: 720px;
  background: #11161d;
  border: 1px solid #21262d;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
[data-theme="light"] .mock-issues-dialog {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 16px 40px rgba(31, 35, 40, 0.10);
}

.mock-issues-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}
.mock-issues-dialog-title {
  color: #e6edf3;
  font-size: 0.95rem;
  font-weight: 600;
}
.mock-issues-dialog-subtitle {
  flex-basis: 100%;
  margin-top: 4px;
  color: #8b949e;
  font-size: 0.82rem;
  font-weight: 400;
}
[data-theme="light"] .mock-issues-dialog-subtitle { color: #656d76; }
.mock-issues-dialog-close {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.mock-issues-dialog-close:hover { background: #1c2128; color: #e6edf3; }
[data-theme="light"] .mock-issues-dialog-header { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .mock-issues-dialog-title { color: #1f2328; }
[data-theme="light"] .mock-issues-dialog-close { color: #656d76; }

.mock-issues-dialog-body {
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.mock-issue-card {
  background: #0a0e13;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 10px 14px;
}
[data-theme="light"] .mock-issue-card { background: #ffffff; border-color: #d0d7de; }
.mock-issue-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mock-issue-row {
  background: transparent;
  border: none;
  color: #58a6ff;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  flex: 1 1 auto;
}
.mock-issue-row:hover { text-decoration: underline; }
[data-theme="light"] .mock-issue-row { color: #0969da; }
.mock-issue-jump {
  color: #8b949e;
  font-size: 0.7rem;
}
.mock-issue-msg {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(210, 153, 34, 0.08);
  border-left: 3px solid #d29922;
}
.mock-issue-msg.sev-err {
  background: rgba(248, 81, 73, 0.08);
  border-left-color: #f85149;
}
.mock-issue-msg .b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(210, 153, 34, 0.2);
  color: #d29922;
  font-weight: 700;
}
.mock-issue-msg.sev-err .b {
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
}
.mock-issue-msg .rule {
  color: #d29922;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.72rem;
  font-weight: 700;
}
.mock-issue-msg.sev-err .rule { color: #f85149; }
.mock-issue-msg .body {
  color: #8b949e;
  font-size: 0.84rem;
  margin-top: 2px;
  line-height: 1.5;
}
[data-theme="light"] .mock-issue-msg .body { color: #656d76; }

/* ====================================================================
 * Scene 5 (Editor): 3-column editor body
 * Layout matches editor_panel.py:
 *   [BIDS tree] | [center viewer] | [validation pane]
 *   widths:    240px      1fr            320px
 * ==================================================================== */

.gui-editor-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  min-height: 520px;
  max-height: 620px;
  background: #0a0e13;
  border-radius: 6px;
  overflow: hidden;
}
[data-theme="light"] .gui-editor-body { background: #ffffff; }

@media (max-width: 1024px) {
  .gui-editor-body {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

/* ---- gui-bids-tree-pane ---- */
.gui-bids-tree { overflow: auto; padding: 6px 8px; flex: 1 1 auto; font-family: "SF Mono", "Menlo", monospace; font-size: 11px; }
.gui-bids-tree-rows { display: block; }
.gui-bids-empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 36px 18px;
  color: #8b949e;
  height: 100%;
}
.gui-bids-empty p { margin: 4px 0; }
.gui-bids-empty .muted { color: #656d76; font-size: 10px; }

.gui-bids-tree .gui-fs-item {
  padding: 3px 6px;
  position: relative;
}
.gui-bids-tree .gui-fs-item.is-selected {
  background: rgba(88, 166, 255, 0.18);
}
.gui-bids-tree .gui-fs-item .tree-glyph {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 14px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-right: 2px;
}
.gui-bids-tree .gui-fs-item .tree-glyph.json {
  background: rgba(210, 168, 255, 0.18);
  color: #d2a8ff;
}
.gui-bids-tree .gui-fs-item .tree-glyph.tsv {
  background: rgba(57, 197, 207, 0.18);
  color: #39c5cf;
}
.gui-bids-tree .gui-fs-item .tree-glyph.nii {
  background: rgba(88, 166, 255, 0.18);
  color: #58a6ff;
}
.gui-bids-tree .gui-fs-item .tree-glyph.txt {
  background: rgba(101, 109, 118, 0.18);
  color: #8b949e;
}
.gui-bids-tree .gui-fs-item .gui-row-dot {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
}

/* ---- gui-editor-center (the extension-routed viewer) ---- */
.gui-editor-center {
  display: flex;
  flex-direction: column;
  background: #0a0e13;
}
[data-theme="light"] .gui-editor-center { background: #ffffff; }

.gui-editor-empty {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #8b949e;
}
.gui-editor-empty-card { text-align: center; max-width: 360px; }
.gui-editor-empty-card svg { color: #656d76; margin-bottom: 12px; }
.gui-editor-empty-card p { margin: 4px 0; }
.gui-editor-empty-card .muted { color: #656d76; font-size: 11px; }

/* Tabs / toolbar above the sidecar form */
.gui-sidecar-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #11161d;
  border-bottom: 1px solid #1a1f26;
  flex-shrink: 0;
}
[data-theme="light"] .gui-sidecar-tabs { background: #f6f8fa; border-color: #e5e7ea; }

.gui-sidecar-tab {
  background: transparent;
  border: 1px solid transparent;
  color: #8b949e;
  padding: 4px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.gui-sidecar-tab:hover { color: #e6edf3; background: #1c2128; }
.gui-sidecar-tab.is-active {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.40);
  font-weight: 600;
}
.gui-tsv-name {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
  color: #e6edf3;
  padding: 4px 6px;
}

/* Sidecar form (REQ / REC / OPT / DEP stripe pattern) */
.gui-sidecar-legend {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: #0a0e13;
  border-bottom: 1px solid #1a1f26;
  flex-shrink: 0;
}
.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.legend-pill::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.legend-req { color: #f85149; }
.legend-req::before { background: #f85149; }
.legend-rec { color: #d29922; }
.legend-rec::before { background: #d29922; }
.legend-opt { color: #8b949e; }
.legend-opt::before { background: #8b949e; }
.legend-dep { color: #656d76; }
.legend-dep::before { background: #656d76; }

.gui-sidecar-form {
  flex: 1 1 auto;
  overflow: auto;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
}
.sc-field {
  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr 1.4fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid #1a1f26;
}
[data-theme="light"] .sc-field { border-color: #e5e7ea; }
.sc-field .req-stripe {
  width: 4px;
  align-self: stretch;
}
.sc-field.kind-req .req-stripe { background: #f85149; }
.sc-field.kind-rec .req-stripe { background: #d29922; }
.sc-field.kind-opt .req-stripe { background: #8b949e; }
.sc-field.kind-dep .req-stripe { background: repeating-linear-gradient(0deg, #656d76 0 3px, transparent 3px 6px); }
.sc-field.is-invalid {
  background: rgba(248, 81, 73, 0.08);
}
.sc-key { color: #e6edf3; padding-left: 12px; }
[data-theme="light"] .sc-key { color: #1f2328; }
.sc-key .req-mark { color: #f85149; font-weight: 700; margin-left: 2px; }
.sc-val { color: #e6edf3; padding-right: 8px; }
.sc-val.str { color: #3fb950; }
.sc-val.num { color: #58a6ff; }
.sc-val.placeholder { color: #d29922; font-style: italic; }
[data-theme="light"] .sc-val.str { color: #1a7f37; }
[data-theme="light"] .sc-val.num { color: #0969da; }
[data-theme="light"] .sc-val.placeholder { color: #9a6700; }
.sc-flag {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(248, 81, 73, 0.18);
  color: #f85149;
  font-weight: 700;
}

/* JSON tree view */
.gui-json-tree {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 14px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
  color: #e6edf3;
  background: #0a0e13;
}
[data-theme="light"] .gui-json-tree { color: #1f2328; background: #ffffff; }
.json-row { padding: 1px 0; }
.json-row.d1 { padding-left: 18px; }
.json-row.d2 { padding-left: 36px; }
.json-key { color: #d2a8ff; }
.json-val.str { color: #3fb950; }
.json-val.num { color: #58a6ff; }
.json-val.placeholder { color: #d29922; font-style: italic; }
[data-theme="light"] .json-key { color: #8250df; }
[data-theme="light"] .json-val.str { color: #1a7f37; }
[data-theme="light"] .json-val.num { color: #0969da; }

/* TSV viewer */
.gui-tsv-viewer { display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; }
.gui-tsv-viewer[hidden] { display: none; }
.gui-tsv-scroll { flex: 1 1 auto; overflow: auto; }
.gui-tsv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
  color: #e6edf3;
}
[data-theme="light"] .gui-tsv-table { color: #1f2328; }
.gui-tsv-table thead th {
  background: #11161d;
  color: #8b949e;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border-bottom: 1px solid #21262d;
  text-align: left;
}
.gui-tsv-table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid #1a1f26;
}
[data-theme="light"] .gui-tsv-table thead th { background: #f6f8fa; color: #656d76; border-color: #d0d7de; }
[data-theme="light"] .gui-tsv-table tbody td { border-color: #e5e7ea; }

/* Validation pane */
.gui-validation-pane { background: #0a0e13; display: flex; flex-direction: column; }
[data-theme="light"] .gui-validation-pane { background: #ffffff; }
.gui-validation-body { flex: 1 1 auto; overflow: auto; padding: 10px 12px; font-size: 11px; }
.gui-validation-empty { text-align: center; padding: 24px 12px; color: #656d76; }
.gui-validation-empty .muted { color: #8b949e; font-size: 11px; }
.gui-validation-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 10px;
  border-bottom: 1px solid #1a1f26;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 8px;
}
.gui-validation-summary .muted { color: #d29922; font-weight: 700; }
.gui-validation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gui-validation-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #21262d;
  border-radius: 4px;
  background: #11161d;
  cursor: pointer;
}
.gui-validation-row.sev-warn { border-left: 3px solid #d29922; }
.gui-validation-row.sev-err  { border-left: 3px solid #f85149; }
.gui-validation-row.sev-ok   { border-left: 3px solid #3fb950; }
.gui-validation-row .sev-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  font-weight: 700;
}
.gui-validation-row .rule {
  color: #58a6ff;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 10px;
  font-weight: 700;
}
.gui-validation-row .path {
  color: #e6edf3;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 10px;
  word-break: break-all;
  margin-top: 2px;
}
.gui-validation-row .body {
  color: #8b949e;
  font-size: 11px;
  margin-top: 2px;
}
[data-theme="light"] .gui-validation-row { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .gui-validation-row .path { color: #1f2328; }
[data-theme="light"] .gui-validation-row .body { color: #656d76; }
[data-theme="light"] .gui-validation-row .rule { color: #0969da; }

/* ====================================================================
 * Editor stepper sub-step focus rules (5-substep flow)
 *   1. no audit yet         -> validation pane highlighted
 *   2. validate dataset run -> Validate dataset button + chips ring
 *   3. chip-click dialog    -> warnings chip + dialog overlay
 *   4. sidecar tree edit    -> centre pane
 *   5. tsv edit             -> centre pane
 * ==================================================================== */
.scene-mock-editor[data-editor-step="1"] .gui-pane[data-pane="validation"] { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); }
.scene-mock-editor[data-editor-step="1"] .gui-row-dot { background: #30363d; }
.scene-mock-editor[data-editor-step="1"] .sc-todo .sc-flag { visibility: hidden; }
.scene-mock-editor[data-editor-step="1"] .sc-todo .sc-val.placeholder { color: #6e7681; }

.scene-mock-editor[data-editor-step="2"] [data-editor-btn="vdataset"] { box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.55); }
.scene-mock-editor[data-editor-step="2"] .gui-chip.chip-warn { box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.55); }

.scene-mock-editor[data-editor-step="3"] .gui-chip.chip-warn { box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.85); }

.scene-mock-editor[data-editor-step="4"] .gui-pane[data-pane="center"] { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); }
.scene-mock-editor[data-editor-step="5"] .gui-pane[data-pane="center"] { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); }

/* Warn / err chips are clickable shortcuts to the warnings dialog. */
.gui-chip.is-clickable { cursor: pointer; transition: filter 160ms ease, transform 160ms ease; }
.gui-chip.is-clickable:hover { filter: brightness(1.18); transform: translateY(-1px); }

/* ====================================================================
 * Validation pane (Step 5 sub-steps 2-5): grouped section cards
 * ==================================================================== */
.gui-validation-section { margin-bottom: 14px; }
.gui-validation-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #21262d;
}
.gui-validation-card {
  background: #11161d;
  border: 1px solid #21262d;
  border-left: 3px solid #d29922;
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: grid;
  gap: 4px;
}
.gui-validation-card.sev-warn { border-left-color: #d29922; }
.gui-validation-card.sev-err  { border-left-color: #f85149; }
.gui-validation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.gui-validation-rule {
  color: #d29922;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gui-validation-card-body {
  margin: 0;
  font-size: 11px;
  color: #c9d1d9;
  line-height: 1.45;
}
.gui-validation-card-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.18);
  color: #79c0ff;
  font-size: 10px;
  font-weight: 600;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
}
.gui-validation-card-action {
  align-self: end;
  padding: 3px 10px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #c9d1d9;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.gui-validation-card-action:hover { background: #30363d; color: #e6edf3; }
.gui-validation-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #21262d;
  font-size: 11px;
  color: #8b949e;
  display: grid;
  gap: 3px;
}
.gui-validation-footer strong { color: #e6edf3; }
[data-theme="light"] .gui-validation-section-label { color: #656d76; border-color: #d0d7de; }
[data-theme="light"] .gui-validation-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .gui-validation-rule { color: #9a6700; }
[data-theme="light"] .gui-validation-card-body { color: #1f2328; }
[data-theme="light"] .gui-validation-card-tag { background: rgba(9, 105, 218, 0.12); color: #0969da; }
[data-theme="light"] .gui-validation-card-action { background: #ffffff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .gui-validation-footer { color: #656d76; border-color: #d0d7de; }
[data-theme="light"] .gui-validation-footer strong { color: #1f2328; }

/* ====================================================================
 * Warnings chip-click dialog overlay (Step 5 sub-step 3)
 * ==================================================================== */
.gui-warnings-dialog {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 9, 0.55);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.gui-warnings-dialog.is-open { opacity: 1; pointer-events: auto; }
.gui-warnings-dialog[hidden] { display: none; }
.gui-warnings-dialog-card {
  width: min(720px, 100%);
  max-height: 88%;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gui-warnings-dialog-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}
.gui-warnings-dialog-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(210, 153, 34, 0.22);
  color: #d29922;
  font-weight: 700;
}
.gui-warnings-dialog-title {
  display: block;
  color: #e6edf3;
  font-size: 0.95rem;
  font-weight: 600;
}
.gui-warnings-dialog-subtitle {
  display: block;
  margin-top: 2px;
  color: #8b949e;
  font-size: 0.78rem;
}
.gui-warnings-dialog-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.gui-warnings-dialog-close:hover { background: #1c2128; color: #e6edf3; }
.gui-warnings-dialog-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 14px;
  display: grid;
  gap: 14px;
}
.gui-warnings-group {
  border: 1px solid #21262d;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0e13;
}
.gui-warnings-group > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}
.gui-warnings-group-path {
  color: #8b949e;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
}
.gui-warnings-group-jump {
  color: #58a6ff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.gui-warnings-row {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid #11161d;
  border-left: 3px solid transparent;
}
.gui-warnings-row:first-of-type { border-top: none; }
.gui-warnings-row.sev-warn { border-left-color: #d29922; }
.gui-warnings-row.sev-err  { border-left-color: #f85149; }
.gui-warnings-rule {
  color: #d29922;
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gui-warnings-msg {
  color: #c9d1d9;
  font-size: 11px;
}
.gui-warnings-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gui-warnings-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #161b22;
  border-top: 1px solid #21262d;
}
[data-theme="light"] .gui-warnings-dialog { background: rgba(140, 149, 159, 0.4); }
[data-theme="light"] .gui-warnings-dialog-card { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .gui-warnings-dialog-header { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .gui-warnings-dialog-title { color: #1f2328; }
[data-theme="light"] .gui-warnings-dialog-subtitle { color: #656d76; }
[data-theme="light"] .gui-warnings-group { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .gui-warnings-group > header { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .gui-warnings-group-path { color: #656d76; }
[data-theme="light"] .gui-warnings-rule { color: #9a6700; }
[data-theme="light"] .gui-warnings-msg { color: #1f2328; }
[data-theme="light"] .gui-warnings-dialog-actions { background: #f6f8fa; border-color: #d0d7de; }

/* ====================================================================
 * TSV viewer additions: row-number column + footer
 * ==================================================================== */
.gui-tsv-table .gui-tsv-rownum {
  width: 28px;
  color: #6e7681;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.gui-tsv-footer {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid #21262d;
  background: #0d1117;
  font-size: 11px;
  color: #8b949e;
}
[data-theme="light"] .gui-tsv-footer { background: #f6f8fa; border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .gui-tsv-table .gui-tsv-rownum { color: #8c959f; background: rgba(0, 0, 0, 0.02); }

/* Allow the editor mock to host the warnings dialog overlay. */
.scene-mock-editor { position: relative; }

/* Toggle widget (Strict BIDS) */
.gui-toggle {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 16px;
  background: #21262d;
  border-radius: 999px;
  padding: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.gui-toggle.is-on { background: #58a6ff; }
.gui-toggle-knob {
  width: 12px;
  height: 12px;
  background: #e6edf3;
  border-radius: 50%;
  transition: transform 160ms ease;
}
.gui-toggle.is-on .gui-toggle-knob { transform: translateX(12px); }

/* ---- Placeholder card for scenes whose recording is not yet captured ---- */
.scene-mock-placeholder {
  display: grid;
  place-items: center;
  padding: 48px 24px;
  min-height: 280px;
  background: var(--panel-glass);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.scene-mock-placeholder-card {
  max-width: 480px;
  text-align: center;
  color: var(--muted);
}
.scene-mock-placeholder-eyebrow {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.10);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.scene-mock-placeholder h4 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.1rem;
}
.scene-mock-placeholder p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Scan recording sits inside the parent .container (max-width 1180 px).
 * No full-bleed; the image fills the available column width and stops
 * there. The Qt-window-like border + drop shadow live on the image
 * itself so they hug the recording. */
.scene-recording {
  margin: 0;
  width: 100%;
  text-align: center;
}
.scene-recording img {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0e13;
  border: 1px solid #21262d;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .scene-recording img {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 16px 40px rgba(31, 35, 40, 0.12);
}

/* Step 6 NIfTI recording: ship a dark gif + a light gif, show the
 * one that matches the active theme so the recording chrome matches
 * the page chrome around it. */
.scene-nifti-recording .nifti-recording-light { display: none; }
[data-theme="light"] .scene-nifti-recording .nifti-recording-dark  { display: none; }
[data-theme="light"] .scene-nifti-recording .nifti-recording-light { display: block; }

/* ---- Sub-scene focus state machine ----
 * Per-sub-scene `[data-substep="N"]` flips which pane is highlighted
 * and which are dimmed. JS in script.js syncs the data-substep with
 * the active step button. Four sub-scenes total. */

.scene-mock-inspect[data-substep="1"] .gui-pane[data-pane="table"]      { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); background: #161b22; }
.scene-mock-inspect[data-substep="1"] .gui-pane[data-pane="filter"]     { opacity: 0.55; }
.scene-mock-inspect[data-substep="1"] .gui-pane[data-pane="properties"] { opacity: 0.55; }

.scene-mock-inspect[data-substep="2"] .gui-pane[data-pane="table"]      { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.35); }
.scene-mock-inspect[data-substep="2"] .gui-pane[data-pane="properties"] { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); background: #161b22; }
.scene-mock-inspect[data-substep="2"] .gui-pane[data-pane="filter"]     { opacity: 0.45; }

.scene-mock-inspect[data-substep="3"] .gui-pane[data-pane="table"]      { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); background: #161b22; }
.scene-mock-inspect[data-substep="3"] .gui-pane[data-pane="properties"] { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); background: #161b22; }
.scene-mock-inspect[data-substep="3"] .gui-pane[data-pane="filter"]     { opacity: 0.45; }

/* Sub-step 4: Bulk-edit. Table is the focus (where the multi-select
 * happens); dialog overlay sits on top of the table. */
.scene-mock-inspect[data-substep="4"] .gui-pane[data-pane="table"]      { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); background: #161b22; }
.scene-mock-inspect[data-substep="4"] .gui-pane[data-pane="filter"]     { opacity: 0.45; }
.scene-mock-inspect[data-substep="4"] .gui-pane[data-pane="properties"] { opacity: 0.45; }

/* Sub-step 5: Filter pane focus. */
.scene-mock-inspect[data-substep="5"] .gui-pane[data-pane="filter"]     { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.55); background: #161b22; }
.scene-mock-inspect[data-substep="5"] .gui-pane[data-pane="table"]      { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.35); }
.scene-mock-inspect[data-substep="5"] .gui-pane[data-pane="properties"] { opacity: 0.45; }

/* Multi-select highlight on inventory rows (used in sub-step 4). */
.scene-mock-inspect .gui-inv-row.is-bulk-selected {
  background: rgba(88, 166, 255, 0.18);
  outline: 1px solid rgba(88, 166, 255, 0.55);
}

/* Bulk-edit dialog overlay (Sub-step 4). Lives inside .gui-table-pane
 * and is absolute-positioned. Initially hidden; JS adds .is-shown. */
.scene-mock-inspect .gui-table-pane { position: relative; }
.gui-bulk-dialog {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 19, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 5;
}
.gui-bulk-dialog.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.gui-bulk-dialog-card {
  width: min(320px, 80%);
  background: #11161d;
  border: 1px solid #21262d;
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 14px 16px;
  color: #e6edf3;
  font-size: 11px;
}
.gui-bulk-dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 12px;
}
.gui-bulk-dialog-count {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.14);
  color: #58a6ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gui-bulk-dialog-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.gui-bulk-dialog-row label {
  color: #8b949e;
  font-size: 11px;
}
.gui-bulk-dialog-select,
.gui-bulk-dialog-input {
  background: #0a0e13;
  border: 1px solid #21262d;
  color: #e6edf3;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
}
.gui-bulk-dialog-input.is-typing {
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.30);
}
.gui-bulk-dialog-help {
  font-size: 10px;
  color: #8b949e;
  padding: 6px 0 10px;
  border-bottom: 1px solid #1a1f26;
  margin-bottom: 10px;
}
.gui-bulk-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.gui-bulk-dialog-actions .gui-tb-btn-primary.is-pressed {
  filter: brightness(0.92);
}

[data-theme="light"] .gui-bulk-dialog { background: rgba(31, 35, 40, 0.30); }
[data-theme="light"] .gui-bulk-dialog-card { background: #ffffff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .gui-bulk-dialog-count { background: rgba(9, 105, 218, 0.12); color: #0969da; }
[data-theme="light"] .gui-bulk-dialog-row label { color: #656d76; }
[data-theme="light"] .gui-bulk-dialog-select,
[data-theme="light"] .gui-bulk-dialog-input { background: #ffffff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .gui-bulk-dialog-help { color: #656d76; border-color: #e5e7ea; }

/* Edit-propagation flash (Sub-scene 3). The task cell + props field +
 * preview span all carry data-cell-task / data-props-task / etc. The
 * JS adds .is-editing for the moment of change. */
.scene-mock-inspect .cell-task.is-editing,
.scene-mock-inspect [data-props-task].is-editing,
.scene-mock-inspect [data-props-preview-task].is-editing {
  background: rgba(88, 166, 255, 0.22);
  color: #58a6ff;
  border-radius: 3px;
  padding: 0 4px;
  transition: background 200ms ease, color 200ms ease;
}

/* Filter pane uncheck flash (Sub-scene 4) */
.scene-mock-inspect [data-flash-target].is-flashing {
  background: rgba(248, 81, 73, 0.16);
  outline: 1px solid rgba(248, 81, 73, 0.40);
  transition: background 240ms ease, outline-color 240ms ease;
}

/* FS click highlight (Sub-scene 5) */
.scene-mock-inspect [data-fs-row].is-highlight,
.scene-mock-inspect [data-row-key].is-highlight {
  background: rgba(88, 166, 255, 0.22);
  outline: 1px solid rgba(88, 166, 255, 0.55);
}

/* Light-theme overrides for the GUI mock. The docs site's light
 * theme triggers via [data-theme="light"] on , so we mirror
 * the GUI's LIGHT palette here. */
[data-theme="light"] .scene-mock-gui {
  background: #ffffff;
  border-color: #d0d7de;
  color: #1f2328;
  box-shadow: 0 16px 40px rgba(31, 35, 40, 0.12);
}
[data-theme="light"] .scene-mock-gui .gui-topheader { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-pathbar  { background: #ffffff; border-color: #e5e7ea; }
[data-theme="light"] .scene-mock-gui .gui-toolbar  { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-brand-name { color: #1f2328; }
[data-theme="light"] .scene-mock-gui .gui-view-pill  { color: #656d76; }
[data-theme="light"] .scene-mock-gui .gui-view-pill.is-checked {
  background: rgba(9, 105, 218, 0.08);
  color: #0969da;
  border-color: rgba(9, 105, 218, 0.32);
}
[data-theme="light"] .scene-mock-gui .gui-theme-toggle { background: #eef1f4; color: #1f2328; border-color: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-path-label   { color: #656d76; }
[data-theme="light"] .scene-mock-gui .gui-path-field   { background: #ffffff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .scene-mock-gui .gui-path-glyph   { color: #656d76; }
[data-theme="light"] .scene-mock-gui .gui-tb-ghost     { color: #656d76; }
[data-theme="light"] .scene-mock-gui .gui-tb-ghost:hover { color: #1f2328; background: #eef1f4; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn       { background: #eef1f4; color: #1f2328; border-color: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn:hover { background: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn.is-disabled { color: #8c959f; background: #f6f8fa; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn-primary { background: #0969da; border-color: #0969da; color: #ffffff; }
[data-theme="light"] .scene-mock-gui .gui-tb-btn-primary.is-disabled { background: #eef1f4; border-color: #d0d7de; color: #8c959f; }
[data-theme="light"] .scene-mock-gui .gui-tb-input { background: #ffffff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .scene-mock-gui .gui-tb-mini-label { color: #656d76; }
[data-theme="light"] .scene-mock-gui .gui-vsep         { background: #d0d7de; }
[data-theme="light"] .scene-mock-gui .gui-chip         { background: #eef1f4; border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .scene-mock-gui .gui-chip.chip-success { background: rgba(26, 127, 55, 0.10); border-color: rgba(26, 127, 55, 0.30); color: #1a7f37; }
[data-theme="light"] .scene-mock-gui .gui-chip.chip-warn    { background: rgba(154, 103, 0, 0.10); border-color: rgba(154, 103, 0, 0.30); color: #9a6700; }
[data-theme="light"] .scene-mock-gui .gui-chip.chip-err     { background: rgba(207, 34, 46, 0.10); border-color: rgba(207, 34, 46, 0.30); color: #cf222e; }

/* --------------------------------------------------------------------
 * Tutorial landing: modality picker + workflow mini + checklist
 * ------------------------------------------------------------------ */

/* Back-to-landing breadcrumb (top of every per-modality tutorial) */
.tutorial-back-bar {
  border-bottom: 1px solid var(--border);
  background: var(--panel-strong);
}
.tutorial-back-bar .container {
  padding-top: 12px;
  padding-bottom: 12px;
}
.tutorial-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tutorial-back-link:hover { color: var(--accent); }

/* Compact 8-step workflow mini-strip on the landing */
.workflow-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
  counter-reset: workflow;
}
.workflow-mini li {
  position: relative;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  color: var(--muted);
  font-size: 0.93rem;
  counter-increment: workflow;
}
.workflow-mini li::before {
  content: counter(workflow);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.14);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.workflow-mini li strong { color: var(--text); font-weight: 700; }

/* Checklist (used on landing) */
.checklist {
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.checklist li {
  position: relative;
  padding: 14px 18px 14px 46px;
  border-left: 2px solid var(--border-glass);
  color: var(--muted);
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 16px; top: 18px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.14);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.checklist li strong { color: var(--text); }
.checklist[type="1"], ol.checklist { list-style: none; }
ol.checklist { counter-reset: checklist; }
ol.checklist li::before {
  content: counter(checklist);
  counter-increment: checklist;
  display: grid;
  place-items: center;
  background: rgba(88, 166, 255, 0.14);
  box-shadow: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  width: 22px; height: 22px;
  left: 12px; top: 14px;
}
ol.checklist li {
  padding-left: 50px;
}

/* Modality picker grid (4 cards) */
.modality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.modality-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: border-color 180ms ease, transform 180ms ease;
  overflow: hidden;
}
.modality-card::before {
  /* Top accent stripe per modality */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.85;
}
.modality-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.modality-card .modality-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 4px;
}
.modality-card h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}
.modality-card .modality-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}
.modality-card .modality-desc {
  margin: 6px 0 14px;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.55;
}
.modality-card .modality-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Per-modality accent palette */
.modality-card.mod-mri::before     { background: var(--accent); }
.modality-card.mod-mri .modality-badge { background: rgba(88, 166, 255, 0.14); color: var(--accent); }

.modality-card.mod-eeg::before     { background: var(--success); }
.modality-card.mod-eeg .modality-badge { background: rgba(63, 185, 80, 0.16); color: var(--success); }

.modality-card.mod-meg::before     { background: var(--teal); }
.modality-card.mod-meg .modality-badge { background: rgba(57, 197, 207, 0.16); color: var(--teal); }

.modality-card.mod-mri-adv::before { background: var(--purple); }
.modality-card.mod-mri-adv .modality-badge { background: rgba(210, 168, 255, 0.16); color: var(--purple); }

/* "Coming soon" stub layout on per-modality pages */
.tutorial-stub {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(88, 166, 255, 0.04);
}
.tutorial-stub h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.tutorial-stub ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  line-height: 1.65;
}

/* After-tutorial recap (shared partial) */
.tutorial-after h2 {
  margin-top: 28px;
}
.tutorial-after h2:first-child { margin-top: 0; }
.tutorial-after p > .btn + .btn { margin-left: 8px; }

/* CLI footer panel (shared partial) */
.tutorial-cli-footer details {
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  background: var(--panel-glass);
  padding: 18px 22px;
}
.tutorial-cli-footer summary {
  cursor: pointer;
  font-size: 1.02rem;
  color: var(--text);
  margin-bottom: 12px;
}
.tutorial-cli-footer summary::marker { color: var(--accent); }

/* --------------------------------------------------------------------
 * Responsive nips
 * ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .nav-links a:not(.is-active) { display: none; }
  .brand img { width: 26px; height: 26px; }
}

/* ====================================================================
 * CLI reference (Section 7): definition list for command arguments.
 * Each dt is a flag / positional name; the dd that follows is its
 * description. Two-column grid on wide screens, stacked on narrow.
 * ==================================================================== */
.cli-args {
  display: grid;
  grid-template-columns: minmax(220px, max-content) 1fr;
  column-gap: 28px;
  row-gap: 14px;
  margin: 14px 0 22px;
  padding: 0;
}
.cli-args dt {
  margin: 0;
  padding-top: 2px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text);
}
.cli-args dt code {
  white-space: nowrap;
}
.cli-args dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}
.cli-args dd code {
  white-space: nowrap;
}
.prose .cli-args + h4,
.prose h4 {
  margin: 22px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .cli-args { grid-template-columns: 1fr; row-gap: 6px; }
  .cli-args dt { padding-top: 14px; border-top: 1px solid var(--border-glass); }
  .cli-args dt:first-of-type { border-top: none; padding-top: 0; }
}