* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── APP LOADER ──────────────────────────────────────────── */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader, 99999);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--warm-white, #F5F6F8);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.dark-mode .app-loader {
    background: var(--warm-white, #0F0F12);
}
.app-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}
.app-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.app-loader-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    animation: loaderPulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(13, 92, 107, 0.2));
}
@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.08); opacity: 1; }
}
.app-loader-dots {
    display: flex;
    gap: 0.4rem;
}
.app-loader-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary, #0D5C6B);
    animation: loaderBounce 1.2s ease-in-out infinite;
}
.app-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.app-loader-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loaderBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40%           { transform: scale(1); opacity: 1; }
}

/* Scrollbar styling — prevent white flash in dark mode */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--slate); }
html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, var(--cream) 0%, var(--warm-white) 100%);
    color: var(--body-text);
    line-height: 1.6;
    min-height: 100vh;
}

/* ─── LAYOUT ──────────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--canvas-bg, #F0F2F5);
}

/* ─── TOOL RAIL (Miro-style toolbar) ─── */
.tool-rail-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 28px;
    height: 28px;
    margin-bottom: 16px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    text-decoration: none;
    border: none;
}
.tool-rail-logo:hover {
    transform: scale(1.08);
}
.tool-rail-logo img {
    display: block;
    height: 28px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    border: 0;
    outline: none;
}
.tool-rail-logo .tool-rail-logo-full { display: none; }
body.rail-expanded .tool-rail-logo {
    width: auto;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    justify-content: center;
    align-self: stretch;
    padding: 16px 16px 18px;
    margin-bottom: 12px;
    border: none;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-surface);
    z-index: 2;
}
body.rail-expanded .tool-rail-logo .tool-rail-logo-symbol { display: none; }
body.rail-expanded .tool-rail-logo .tool-rail-logo-full {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
.tool-rail-logo .tool-rail-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tool-color, var(--charcoal));
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: var(--z-topbar);
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.tool-rail-logo .tool-rail-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--tool-color, var(--charcoal));
}
.tool-rail-logo:hover .tool-rail-tooltip {
    display: block;
}

.tool-rail {
    /* Rail always renders dark, regardless of the active theme or light/dark
       mode. These defaults mirror the default-dark palette and act as a
       fallback; applyTheme() in js/ui-helpers.js overrides them inline with
       the current theme's dark partner (e.g. warm-light → warm-tones,
       jewel-light → deep-jewel-tones) so every theme gets its own dark rail. */
    --bg-surface: #1A1A1F;
    --bg-panel: #1A1A1F;
    --topbar-bg: #1E1F26;
    --charcoal: #E8EAF0;
    --slate: #94A0B8;
    --border-light: #2D2D35;
    --border-lighter: #232329;
    --border-medium: #3F3F4A;
    --shadow-xs: rgba(0, 0, 0, 0.15);
    --shadow-sm: rgba(0, 0, 0, 0.2);
    --shadow-md: rgba(0, 0, 0, 0.25);
    --shadow-lg: rgba(0, 0, 0, 0.35);
    --shadow-primary: rgba(106, 170, 184, 0.2);
    --primary-tint-xs: rgba(106, 170, 184, 0.04);
    --primary-tint-sm: rgba(106, 170, 184, 0.08);
    --primary-tint-md: rgba(106, 170, 184, 0.12);
    --primary-tint-lg: rgba(106, 170, 184, 0.18);
    --primary-tint-xl: rgba(106, 170, 184, 0.25);
    --primary: #6AAAB8;
    --primary-mid: #2B7A8A;
    --green: #90C870;
    --gamboge: #E8B860;
    --rose: #D08898;
    --violet: #A878C0;
    --ultraviolet: #B0A0D0;
    --neutral: #9098A8;
    --on-brand: #1E2030;
    --on-brand-muted: rgba(30, 32, 48, 0.6);

    width: 56px;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0 10px;
    gap: 2px;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: var(--z-tooltip);
    flex-shrink: 0;
    border-right: 1px solid var(--border-light);
    box-shadow: 2px 0 8px var(--shadow-sm);
    overflow: visible;
}
.tool-rail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--topbar-bg, var(--bg-surface));
    box-shadow: 0 1px 4px var(--shadow-xs);
    z-index: -1;
}
.tool-rail::after {
    content: '';
    position: absolute;
    top: 47px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-light);
    z-index: 1;
}

.tool-rail-item {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    background: transparent;
    color: var(--slate);
    border: none;
    position: relative;
}
.tool-rail-item .tool-rail-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
/* Per-tool color identity — grouped by workflow phase */
/* Separator between My Journey and category groups */
.rail-separator {
    width: 32px;
    border: none;
    border-top: 1.5px solid var(--border-medium);
    margin: 6px auto;
    opacity: 0.6;
}

/* Standalone */
.tool-rail-item[data-tool="home"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="intake"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="recommendations"] { --tool-color: var(--ultraviolet); }
/* Toolkit group (primary/teal) */
.tool-rail-item[data-tool="narrative-arc"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="narrative-action-cycle"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="toolkit"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="clarity-check"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="change-map"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="decision-space"] { --tool-color: var(--primary); }
/* Library group (green) */
.tool-rail-item[data-tool="library"] { --tool-color: var(--green); }
.tool-rail-item[data-tool="workbooks"] { --tool-color: var(--green); }
.tool-rail-item[data-tool="coaching"] { --tool-color: var(--green); }
/* Workshop group (violet) */
.tool-rail-item[data-tool="narrative-expansion"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="organize"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="deliver"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="freewrite"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="synthesis"] { --tool-color: var(--violet); }
/* Legacy workshop aliases */
.tool-rail-item[data-tool="clarity-sort"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="discovery"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="structure-map"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="script-editor"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="present"] { --tool-color: var(--violet); }
/* Standalone items below groups */
.tool-rail-item[data-tool="community"] { --tool-color: var(--green); }
.rail-standalone-item { margin-top: 6px; }

.tool-rail-item:hover {
    background: color-mix(in srgb, var(--tool-color) 30%, transparent);
    color: var(--tool-color);
}
.tool-rail-item.active {
    background: color-mix(in srgb, var(--tool-color) 22%, transparent);
    color: var(--tool-color);
    font-weight: 600;
}
.tool-rail-item.disabled {
    opacity: 0.32;
    cursor: not-allowed;
}
.tool-rail-item.disabled:hover {
    background: transparent;
    color: var(--slate);
}

/* Active indicator pip */
.tool-rail-item.active::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--tool-color, var(--primary));
    border-radius: 0 3px 3px 0;
}

/* State of You: no session loaded, so the per-session sidebar and
   right panel have nothing to render. Hide them entirely on desktop
   so the home content fills the full width between the tool rail
   and the edge of the screen. The N-to-fullscreen toggle becomes
   a visual no-op on home as a result. */
@media (min-width: 601px) {
    body.no-session-mode #sidebar,
    body.no-session-mode #rightPanel,
    body.no-session-mode .sidebar,
    body.no-session-mode .right-panel,
    body.no-session-mode .panel-pull-tab,
    body.no-session-mode .panel-border-toggle,
    body.no-session-mode .panel-expand-tab {
        display: none !important;
    }
    /* Force full width even if another renderer has written inline margins
       on the main area (e.g., coming from canvas with margins still set).
       Use left/right for the view-toggle-bar (which is fixed-positioned)
       and margin-left/margin-right for the main-area (flex-positioned). */
    body.no-session-mode .main-area {
        margin-left: 56px !important;
        margin-right: 0 !important;
    }
    body.no-session-mode.rail-expanded .main-area {
        margin-left: 170px !important;
    }
    body.no-session-mode .view-toggle-bar {
        left: 56px !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.no-session-mode.rail-expanded .view-toggle-bar {
        left: 170px !important;
    }

    /* Hide top-bar buttons that only make sense with a session loaded. */
    body.no-session-mode .top-bar-add-idea-btn,
    body.no-session-mode .msg-new-btn,
    body.no-session-mode .topbar-setup-nudge {
        display: none !important;
    }
}

/* Session-scoped rail items dim when no narrative is loaded (desktop only).
   Library group, home, assessments, community, and coaching stay active. */
@media (min-width: 601px) {
    body.no-session-mode .tool-rail-item[data-tool="recommendations"],
    body.no-session-mode .tool-rail-item[data-tool="narrative-arc"],
    body.no-session-mode .tool-rail-item[data-tool="narrative-action-cycle"],
    body.no-session-mode .tool-rail-item[data-tool="narrative-expansion"],
    body.no-session-mode .tool-rail-item[data-tool="toolkit"],
    body.no-session-mode .tool-rail-item[data-tool="clarity-check"],
    body.no-session-mode .tool-rail-item[data-tool="change-map"],
    body.no-session-mode .tool-rail-item[data-tool="decision-space"],
    body.no-session-mode .tool-rail-item[data-tool="deliver"],
    body.no-session-mode .tool-rail-item[data-tool="organize"],
    body.no-session-mode .tool-rail-item[data-tool="freewrite"],
    body.no-session-mode .tool-rail-item[data-tool="synthesis"],
    body.no-session-mode .tool-rail-item[data-tool="clarity-sort"],
    body.no-session-mode .tool-rail-item[data-tool="discovery"],
    body.no-session-mode .tool-rail-item[data-tool="structure-map"],
    body.no-session-mode .tool-rail-item[data-tool="script-editor"],
    body.no-session-mode .tool-rail-item[data-tool="present"] {
        opacity: 0.4;
        pointer-events: none;
    }
}

/* Hotkey number badge */
/* Hotkey badges: hidden on collapsed rail, shown when expanded */
.tool-rail-item .tool-rail-hotkey {
    display: none;
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: 8px;
    width: auto;
    height: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1;
    text-align: right;
    color: var(--slate);
    opacity: 0.4;
    pointer-events: none;
    z-index: 2;
}
.tool-rail-item:hover .tool-rail-hotkey,
.tool-rail-item.active .tool-rail-hotkey {
    color: var(--tool-color, var(--primary));
    opacity: 0.6;
}

/* Completion checkmark badge */
.tool-rail-item .tool-complete-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tool-color, var(--green));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.tool-rail-item .tool-complete-badge svg {
    width: 8px;
    height: 8px;
    stroke: var(--on-brand);
    stroke-width: 2.5;
    fill: none;
}

/* ─── Return to My Journey button ─── */
.return-to-journey-bar {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem 2rem;
}
.return-to-journey-bar.return-bar-complete {
    padding: 1rem 1rem 2rem;
}
.return-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.return-bar-message {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green);
    text-align: center;
}
.return-to-journey-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    background: var(--green);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.return-bar-complete .return-to-journey-btn {
    padding: 0.65rem 1.8rem;
    font-size: 0.88rem;
    animation: journeyBtnPulse 2s ease-in-out 1;
}
@keyframes journeyBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 0%, transparent); }
}
.return-to-journey-btn:hover { background: color-mix(in srgb, var(--green) 85%, #000); }
.return-to-journey-btn:active { transform: scale(0.97); }
.return-to-journey-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Sticky 'Back to {Toolkit Model}' pill ─── */
/* Lives in the top-right corner of the workbook view when the user arrived
   via a toolkit "Helps with" chip. Always visible; does not move on scroll. */
.toolkit-return-pill {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem 0.5rem 0.65rem;
    background: var(--bg-panel);
    color: var(--charcoal);
    border: 1px solid color-mix(in srgb, var(--pill-color, var(--primary)) 40%, transparent);
    border-radius: 999px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pill-color, var(--primary)) 18%, transparent);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.toolkit-return-pill:hover {
    background: color-mix(in srgb, var(--pill-color, var(--primary)) 8%, var(--bg-panel));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pill-color, var(--primary)) 28%, transparent);
    transform: translateY(-1px);
}
.toolkit-return-pill:active {
    transform: translateY(0);
}
.toolkit-return-pill-arrow {
    width: 14px;
    height: 14px;
    color: var(--pill-color, var(--primary));
    flex-shrink: 0;
}
.toolkit-return-pill-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.toolkit-return-pill-eyebrow {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.toolkit-return-pill-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pill-color, var(--primary));
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .toolkit-return-pill {
        top: 64px;
        right: 12px;
        padding: 0.4rem 0.7rem 0.4rem 0.55rem;
    }
    .toolkit-return-pill-title { max-width: 140px; font-size: 0.76rem; }
}

/* ── Tutorial placement-hook elements ────────────────────────
   .tool-learn-link: inline header link rendered by renderToolLearnLink()
   .tutorial-empty-cta: secondary CTA rendered by renderTutorialEmptyStateCTA()
   Both built so views without a matching tutorial degrade cleanly (the
   helpers return '' and the buttons never render). */
.tool-learn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: transparent;
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.tool-learn-link:hover {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: var(--green);
}
.tool-learn-link svg { width: 12px; height: 12px; }

.tutorial-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: var(--bg-panel);
    color: var(--charcoal);
    border: 1px dashed color-mix(in srgb, var(--green) 50%, transparent);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    margin-top: 0.5rem;
}
.tutorial-empty-cta:hover {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: var(--green);
    color: var(--green);
}
.tutorial-empty-cta-primary {
    background: var(--green);
    color: var(--on-brand);
    border-style: solid;
    border-color: var(--green);
}
.tutorial-empty-cta-primary:hover {
    background: color-mix(in srgb, var(--green) 85%, #000);
    color: var(--on-brand);
}
.tutorial-empty-cta svg { width: 14px; height: 14px; }

/* Separator line — hidden, spacing handled by tool-rail gap */
.tool-rail-separator {
    display: none;
}

/* Tooltip */
.tool-rail-item .tool-rail-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tool-color, var(--charcoal));
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: var(--z-topbar);
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
/* Left-pointing arrow on tooltip */
.tool-rail-item .tool-rail-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--tool-color, var(--charcoal));
}
.tool-rail-item .tool-rail-tooltip .tool-rail-soon {
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--on-brand-muted, rgba(255,255,255,0.7));
    margin-top: 2px;
}
.tool-rail-item:hover .tool-rail-tooltip {
    display: block;
}

/* ─── Rail Groups (accordion) ─── */
.tool-rail-spacer { flex: 1; }

.rail-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0;
    border: none;
    transition: none;
}
.rail-group.rail-group-open {
    padding: 0 0 2px;
}
.rail-group-header {
    width: 42px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    background: color-mix(in srgb, var(--tool-color, var(--slate)) 15%, transparent);
    color: var(--tool-color, var(--slate));
    border: none;
    border-left: 2.5px solid var(--tool-color, var(--slate));
    position: relative;
    flex-shrink: 0;
    margin-top: 6px;
}
.rail-group-header .tool-rail-icon {
    width: 17px;
    height: 17px;
    display: block;
    flex-shrink: 0;
}
.rail-group-header:hover {
    background: color-mix(in srgb, var(--tool-color, var(--primary)) 30%, transparent);
    color: var(--tool-color, var(--primary));
}
/* Group header label as tooltip (collapsed/hover modes) */
.rail-group-header .tool-rail-label {
    display: none;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tool-color, var(--charcoal));
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: var(--z-topbar);
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.rail-group-header .tool-rail-label::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--tool-color, var(--charcoal));
}
.rail-group-header:hover .tool-rail-label {
    display: block;
}

.rail-group-chevron {
    display: none; /* hidden in collapsed rail mode */
}
.rail-group-chevron svg {
    width: 10px;
    height: 10px;
    transition: transform 0.2s ease;
}
.rail-group.rail-group-open .rail-group-chevron svg {
    transform: rotate(90deg);
}

/* Group items — hidden by default */
.rail-group-items {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
    padding: 2px 0 6px;
}
.rail-group.rail-group-open .rail-group-items {
    display: flex;
}

/* Active group indicator dot — shown when group is collapsed but has active child */
.rail-group.rail-group-has-active > .rail-group-header::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tool-color, var(--primary));
}
.rail-group.rail-group-open.rail-group-has-active > .rail-group-header::after {
    display: none;
}
/* When group is open and has active child, highlight group header with left accent bar */
.rail-group.rail-group-open.rail-group-has-active > .rail-group-header::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--tool-color, var(--primary));
    border-radius: 0 3px 3px 0;
}
.rail-group.rail-group-open.rail-group-has-active > .rail-group-header {
    color: var(--tool-color, var(--primary));
    background: color-mix(in srgb, var(--tool-color, var(--primary)) 18%, transparent);
}

/* expand-all button removed */

/* Scrollable rail — only in expanded mode where content may overflow */
.tool-rail::-webkit-scrollbar { width: 0; }
body.rail-expanded .tool-rail { overflow-y: auto; overflow-x: hidden; }

/* ─── Rail Groups in Expanded Mode ─── */
body.rail-expanded .rail-group { align-items: stretch; margin-bottom: 2px; }
body.rail-expanded .rail-group-items { align-items: stretch; }
body.rail-expanded .rail-group-header {
    width: auto;
    height: 30px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px;
    border-radius: 6px;
    border-left: 2.5px solid var(--tool-color, var(--slate));
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tool-color, var(--slate));
    opacity: 0.75;
}
body.rail-expanded .rail-group-header .tool-rail-icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}
body.rail-expanded .rail-group-header .tool-rail-label {
    display: block;
    position: static;
    transform: none;
    background: none;
    color: var(--tool-color, var(--slate));
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
    pointer-events: auto;
}
body.rail-expanded .rail-group-header .tool-rail-label::before { display: none; }
body.rail-expanded .rail-group-header:hover .tool-rail-label { display: block; }
body.rail-expanded .rail-group-chevron { display: flex; align-items: center; margin-left: auto; }
body.rail-expanded .rail-group-chevron svg { width: 10px; height: 10px; }
body.rail-expanded .rail-group-items {
    padding: 1px 0 4px 0;
    margin: 0 4px 0 10px;
    border-left: 2.5px solid color-mix(in srgb, var(--tool-color, var(--border-light)) 70%, transparent);
}
body.rail-expanded .rail-group-items .tool-rail-item {
    padding: 4px 8px;
    min-height: 34px;
    height: auto;
    font-size: 0.65rem;
    font-weight: 500;
    border-radius: 0 6px 6px 0;
}
/* rail-expand-all removed */

/* ─── Rail Groups in Hover Mode ─── */
/* In hover mode, groups behave the same as collapsed — no inline expansion */

/* ─── Sidebar Control (bottom of tool rail) ─── */

.sidebar-control-wrap {
    position: relative;
    margin-top: auto;
    margin-bottom: 4px;
    align-self: center;
}
.sidebar-control-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--slate);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-control-btn:hover {
    background: var(--primary-tint-xs);
    color: var(--primary);
    border-color: var(--primary-tint-md);
}
.sidebar-control-btn svg { width: 16px; height: 16px; }

/* Popover menu — opens to the right of the rail */
.sidebar-control-menu {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 64px;
    min-width: 190px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow-md), 0 2px 6px var(--shadow-sm);
    z-index: 300;
    padding: 4px;
    flex-direction: column;
}
.sidebar-control-menu.open { display: flex; }
body.rail-expanded .sidebar-control-menu { left: 178px; }

.sidebar-control-menu-header {
    padding: 8px 12px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 2px;
}

.sidebar-control-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s, color 0.1s;
    text-align: left;
}
.sidebar-control-option:hover {
    background: var(--primary-tint-xs);
    color: var(--primary);
}
.sidebar-control-option.active {
    color: var(--primary);
    font-weight: 600;
}
.sidebar-control-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.sidebar-control-option.active .sidebar-control-radio {
    border-color: var(--primary);
}
.sidebar-control-radio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s;
}
.sidebar-control-option.active .sidebar-control-radio-dot {
    background: var(--primary);
}

/* ─── Tool rail label (hidden by default, shown in expanded mode) ─── */
.tool-rail-label {
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.2;
    pointer-events: none;
    min-width: 0;
    flex: 1;
    text-align: left;
}

/* ─── Tool rail EXPANDED mode ─── */
body.rail-expanded .tool-rail {
    width: 170px;
    align-items: stretch;
    padding: 4px 6px 8px;
    box-shadow: 4px 0 16px var(--shadow-md);
}
body.rail-expanded .tool-rail-item {
    width: auto;
    min-height: 34px;
    height: auto;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 6px;
}
body.rail-expanded .tool-rail-item .tool-rail-icon {
    width: 20px;
    height: 20px;
}
body.rail-expanded .tool-rail-label { display: block; }
body.rail-expanded .tool-rail-item:hover .tool-rail-tooltip { display: none; }
body.rail-expanded .tool-rail-item .tool-rail-hotkey { display: block; position: static; margin-left: auto; order: 10; }
body.rail-expanded .tool-rail-item.active::before { left: 0; }
/* In expanded mode, use the existing border-left for the active group indicator */
body.rail-expanded .rail-group.rail-group-open.rail-group-has-active > .rail-group-header::before {
    display: none;
}
body.rail-expanded .rail-group.rail-group-open.rail-group-has-active > .rail-group-header {
    border-left-color: var(--tool-color, var(--primary));
    opacity: 1;
}
body.rail-expanded .sidebar-control-btn { width: 100%; border-radius: 8px; height: 34px; }
body.rail-expanded .sidebar-control-wrap { width: 100%; }

/* ─── Expanded rail pushes layout over ─── */
body.rail-expanded .sidebar { left: 170px; }
body.rail-expanded .main-area { margin-left: 450px; }
body.rail-expanded .view-toggle-bar { left: 450px; }
body.rail-expanded.sidebar-collapsed .main-area { margin-left: 170px !important; }
body.rail-expanded.sidebar-collapsed .view-toggle-bar { left: 170px !important; }
body.rail-expanded .panel-expand-tab-left { left: 170px; }

/* Smooth transitions when toggling rail */
.sidebar { transition: left 0.25s ease; }
.main-area { transition: margin-left 0.25s ease; }
.view-toggle-bar { transition: left 0.25s ease; }
.tool-rail { transition: width 0.25s ease; }

/* ─── DYNAMIC TWO-TIER RAIL ──────────────────────────────── */
/* Phase 2: styles for #dynamicRail, hidden until Phase 3 swap. */

/* Section divider label */
.rail-tier-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    padding: 6px 10px 2px;
    text-align: left;
    opacity: 0.6;
    display: none; /* hidden in collapsed rail; shown when expanded */
}

body.rail-expanded .rail-tier-label { display: block; }
.rail-all-tools-label { display: block; margin-top: 4px; }

/* ─── MY TOOLS ACCORDION ─────────────────────────────────────── */
.my-tools-toggle {
    display: none; /* hidden in collapsed (icon-only) rail */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px 2px;
    width: 100%;
    text-align: left;
    border-radius: 4px;
    transition: background 0.15s;
}
body.rail-expanded .my-tools-toggle {
    display: flex;
    align-items: center;
}
body.rail-expanded .my-tools-toggle:hover {
    background: var(--primary-tint-xs);
}
body.rail-expanded .my-tools-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.my-tools-label-text {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.6;
    flex: 1;
    transition: opacity 0.15s;
}
body.rail-expanded .my-tools-toggle:hover .my-tools-label-text { opacity: 1; }
.my-tools-chevron {
    display: none;
    align-items: center;
    opacity: 0.4;
    color: var(--slate);
    transition: opacity 0.15s;
}
body.rail-expanded .my-tools-chevron { display: flex; }
body.rail-expanded .my-tools-toggle:hover .my-tools-chevron { opacity: 1; }
.my-tools-chevron-icon {
    width: 9px;
    height: 9px;
    transition: transform 0.2s ease;
}
/* chevron points down when open */
.rail-tier-1-section:not(.my-tools-collapsed) .my-tools-chevron-icon {
    transform: rotate(90deg);
}
.my-tools-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
body.rail-expanded .my-tools-items { align-items: stretch; }
/* hide items only in expanded mode when the section is collapsed */
body.rail-expanded .rail-tier-1-section.my-tools-collapsed .my-tools-items {
    display: none;
}

/* Sub-group dividers inside .rail-group-items (e.g. Spectrum / Delivery / Thinking
   inside the Assessments group). Renders as a short hr in collapsed rail, and a
   small uppercase label in expanded rail. */
.rail-subgroup-label {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 4px 0 2px;
}
button.rail-subgroup-label {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: background 120ms ease;
}
button.rail-subgroup-label:hover {
    background: var(--primary-tint-xs);
}
button.rail-subgroup-label:hover span:not(.rail-subgroup-chevron),
button.rail-subgroup-label:focus-visible span:not(.rail-subgroup-chevron) {
    opacity: 1;
    color: var(--charcoal);
}
button.rail-subgroup-label:hover .rail-subgroup-chevron,
button.rail-subgroup-label:focus-visible .rail-subgroup-chevron {
    opacity: 1;
    color: var(--charcoal);
}
button.rail-subgroup-label:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.rail-subgroup-chevron {
    display: none;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--slate);
    opacity: 0.85;
    transition: transform 120ms ease, opacity 120ms ease, color 120ms ease;
    margin-right: 8px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
body.rail-expanded .rail-subgroup-chevron { display: inline-block; }
button.rail-subgroup-label.is-collapsed .rail-subgroup-chevron {
    transform: rotate(-90deg);
}
.tool-rail-item.rail-subgroup-collapsed { display: none; }
.rail-subgroup-label span {
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tool-color, var(--slate));
    opacity: 1;
}
.rail-subgroup-label::before {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tool-color, var(--border-light));
    opacity: 0.4;
    margin: 0 8px;
}
/* In expanded rail, the label gets a tinted background so the user can
   see at a glance that it is a category, not an individual rail item.
   The tint color comes from the parent rail-group's --tool-color. */
body.rail-expanded .rail-subgroup-label {
    justify-content: flex-start;
    padding: 6px 10px;
    margin: 6px 4px 2px;
    background: color-mix(in srgb, var(--tool-color, var(--primary)) 12%, transparent);
    border-radius: 5px;
}
body.rail-expanded button.rail-subgroup-label:hover {
    background: color-mix(in srgb, var(--tool-color, var(--primary)) 20%, transparent);
}
body.rail-expanded .rail-subgroup-label span { display: inline; }
body.rail-expanded .rail-subgroup-label::before { display: none; }
body.rail-expanded .rail-subgroup-chevron {
    color: var(--tool-color, var(--slate));
}

/* "All Tools" Tier 2 toggle button */
.rail-tier2-toggle {
    position: relative;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

body.rail-expanded .rail-tier2-toggle.tool-rail-item {
    height: auto;
    padding: 6px 10px 2px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.6;
    background: transparent;
    border-radius: 0;
    border-top: none;
    gap: 0;
}
body.rail-expanded .rail-tier2-toggle.tool-rail-item:hover {
    background: transparent;
    color: var(--slate);
    opacity: 0.8;
}
body.rail-expanded .rail-tier2-toggle .tool-rail-icon {
    display: none;
}
body.rail-expanded .rail-tier2-toggle .tool-rail-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
}

.rail-tier2-chevron {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    transition: transform 0.2s ease;
}
.rail-tier2-chevron svg { width: 10px; height: 10px; }

body.rail-expanded .rail-tier2-chevron { display: flex; }

#dynamicRail.rail-tier2-open .rail-tier2-chevron {
    transform: translateY(-50%) rotate(90deg);
}

/* Collapsed Tier 2 items container */
.rail-tier2-items {
    display: none;
    flex-direction: column;
}
.rail-tier2-items.open { display: flex; }

/* In expanded rail, tier 2 items stay compact (no descriptions) */
body.rail-expanded .rail-tier2-item {
    height: 34px;
    padding: 0 10px;
}

/* ─── Journey item states (Tier 1) ──────────────────────── */
/* Completed: green text, checkmark */
.rail-journey-item.rail-completed {
    color: var(--green);
    opacity: 0.65;
}
.rail-journey-item.rail-completed:hover { opacity: 0.85; }

/* Upcoming: dimmed */
.rail-journey-item.rail-upcoming {
    opacity: 0.4;
}
.rail-journey-item.rail-upcoming:hover { opacity: 0.7; }

/* Next-up: normal opacity, pulsing dot */
.rail-journey-item.rail-next {
    opacity: 1;
}

/* Checkmark indicator (completed items) */
.rail-item-check {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rail-check-icon {
    width: 9px;
    height: 9px;
    stroke: var(--on-brand);
    fill: none;
    stroke-width: 2.5;
}

/* Progress dot stack (in-progress items) */
.rail-progress {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.rp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border-light);
    flex-shrink: 0;
    transition: background 0.2s;
}
.rp-dot.rp-filled {
    background: var(--primary);
}

/* Next-up pulsing dot */
.rail-item-next-dot {
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    animation: railPulse 2s ease-in-out infinite;
}
@keyframes railPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ─── DYNAMIC RAIL ACTIVE STATE ───────────────────────────── */
/* Shows the dynamic rail (My Tools) above the static groups.
   Both sections are always visible — no hiding/swapping.       */

body.dynamic-rail-active #dynamicRail {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}
body.dynamic-rail-active .dynamic-rail-sep {
    display: block !important;
}
/* Hide the original static separator (dynamic-rail-sep replaces it) */
body.dynamic-rail-active .rail-separator:not(.dynamic-rail-sep) {
    display: none !important;
}

/* ─── Tool rail EXPAND-ON-HOVER mode ─── */
/* In hover mode the rail stays 56px; individual items show tooltips on hover */
body.rail-hover .tool-rail {
    width: 56px;
    overflow: visible;
}
body.rail-hover .tool-rail-item {
    transition: background 0.15s, color 0.15s;
}

.sidebar {
    width: 280px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 56px;
    height: 100vh;
    z-index: var(--z-guide);
    overflow: visible;
}

.sidebar-header {
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 4px var(--shadow-xs);
    background: var(--topbar-bg, var(--bg-surface));
    flex-shrink: 0;
    z-index: 1;
}

.sidebar-app-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-top: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.sidebar-app-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--charcoal);
    padding: 0.5rem 0.75rem 0;
    flex-shrink: 0;
}

.beta-badge {
    display: inline-block;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--subpoint-color);
    color: var(--on-brand);
    padding: 0.18rem 0.5rem;
    border-radius: 20px;
    vertical-align: middle;
    line-height: 1;
    margin-left: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-y: overlay;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; }

/* Node-details header shown at the top of the left panel when a node is selected */
.sidebar-node-header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.sidebar-node-title-row {
    width: 100%;
}
.sidebar-node-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--charcoal);
    display: block;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.sidebar-node-title-editable {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.35rem;
    border: 1.5px solid transparent;
    border-radius: 5px;
    background: transparent;
    outline: none;
    resize: none;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.sidebar-node-title-editable:hover {
    border-color: var(--border-light);
    background: var(--bg-panel);
}
.sidebar-node-title-editable:focus {
    border-color: var(--primary);
    background: var(--warm-white, #fff);
}
.sidebar-node-controls-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}
.sidebar-node-back {
    font-size: 0.65rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    background: var(--bg-surface);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.15s;
}
.sidebar-node-back:hover { border-color: var(--primary); color: var(--primary); }
.sidebar-ic-btn {
    font-size: 0.65rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    background: none;
    flex-shrink: 0;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.sidebar-ic-btn svg { width: 12px; height: 12px; }
.sidebar-ic-btn:hover { border-color: var(--primary); color: var(--primary); }
.sidebar-details-body { padding: 0.25rem 0 0.5rem; }

.sidebar-section { margin-bottom: 0.75rem; }

.sidebar-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--charcoal);
    opacity: 0.5;
    padding: 0 0.75rem;
    margin-bottom: 0.35rem;
}

.sidebar-info-block {
    padding: 0.3rem 0.75rem;
    border-bottom: none;
}

.sidebar-info-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    margin-bottom: 0.1rem;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.sidebar-info-label .i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.7;
}
.sidebar-info-label::after {
    content: 'edit';
    font-size: 0.55rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.15s;
    margin-left: auto;
}
.sidebar-info-block:hover .sidebar-info-label::after { opacity: 0.5; }
.sidebar-label-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
    font-size: 0.6rem;
    flex: 1;
    color: var(--slate);
}

.sidebar-info-value {
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.4;
    font-weight: 500;
}

.sidebar-edit-link {
    font-size: 0.65rem;
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    float: right;
}

.sidebar-edit-link:hover { text-decoration: underline; }

.sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--charcoal);
}

.sidebar-action-btn:hover { background: var(--cream); }

.sidebar-action-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: var(--primary-tint-md);
    color: var(--primary);
}

/* Accordion header for sidebar sections */
.sidebar-accordion-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.sidebar-accordion-header:hover { opacity: 0.8; }
.accordion-chevron {
    margin-left: auto;
    margin-right: 0.75rem;
    font-size: 0.55rem;
    transition: transform 0.2s ease;
}
.accordion-chevron.collapsed { transform: rotate(-90deg); }

/* Coaching guide tiles in the sidebar narrative info view */
.coaching-guides-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.coaching-guide-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.coaching-guide-item.disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.coaching-guide-item:not(.disabled):hover {
    background: var(--primary-tint-sm);
    border-color: var(--primary-tint-bg);
}

.coaching-guide-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.coaching-guide-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
}

.coaching-guide-desc {
    font-size: 0.62rem;
    color: var(--slate);
    line-height: 1.3;
    margin-top: 0.1rem;
}

.coaching-guide-soon {
    margin-left: auto;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--border-medium);
    color: var(--slate);
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
    flex-shrink: 0;
}

/* ─── MAIN AREA ──────────────────────────────── */
.main-area {
    flex: 1;
    margin-left: 336px;
    margin-right: 340px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: 38px;
    position: relative;
    background-color: var(--bg-surface);
    container-type: inline-size;
}

.script-view-active.main-area {
    padding-top: 38px;
}

/* ─── GRAPH AREA ──────────────────────────────── */
.graph-area {
    position: relative;
    flex: 1;
    min-height: 100vh;
    overflow: hidden;
    touch-action: none;
    background-color: var(--canvas-bg, #F0F2F5);
    background-image: radial-gradient(circle, var(--canvas-dot, #D5DAE0) 0.8px, transparent 0.8px);
    background-size: 20px 20px;
}

#graphSvg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

#nodesContainer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}

#graphWorld {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: center center;
}

.zoom-controls {
    position: absolute;
    top: 56px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: var(--z-fab);
}

.zoom-btn, .canvas-fullscreen-btn {
    height: 36px;
    min-width: 36px;
    border-radius: 18px;
    border: 1.5px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--shadow-md);
    transition: min-width 0.25s ease, gap 0.25s ease, background 0.15s, border-color 0.15s, color 0.15s;
}
.zoom-btn { font-size: 18px; font-weight: 700; }
.canvas-fullscreen-btn { font-size: 15px; margin-top: 2px; }

.zoom-btn .fab-icon, .canvas-fullscreen-btn .fab-icon {
    flex-shrink: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-btn .fab-label, .canvas-fullscreen-btn .fab-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    padding-right: 0;
}
.zoom-controls:hover .fab-label {
    max-width: 7rem;
    opacity: 1;
    padding-right: 0.7rem;
}

.zoom-btn:hover, .canvas-fullscreen-btn:hover {
    background: var(--primary-tint-bgest);
    border-color: var(--primary-tint-bg);
    color: var(--primary);
}

/* ─── Collapsible sidebar / right panel ──────── */
/* Legacy class kept for any remaining references */
.panel-collapse-btn { display: none !important; }

/* Triangle toggles sitting on the panel border edge */
.panel-border-toggle {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--slate);
    z-index: 110;
    transition: color 0.15s, background 0.15s;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}
.panel-border-toggle:hover {
    color: var(--primary);
    background: var(--bg-surface);
}
/* Left sidebar: triangle on right edge */
.panel-border-toggle-sidebar {
    right: -1px;
    border-radius: 0 5px 5px 0;
    border-left: none;
    transform: translateY(-50%) translateX(100%);
}
/* Right panel: triangle on left edge */
.panel-border-toggle-right {
    left: -1px;
    border-radius: 5px 0 0 5px;
    border-right: none;
    transform: translateY(-50%) translateX(-100%);
}

/* Expand tabs shown when panels are collapsed (same style, fixed position) */
.panel-expand-tab {
    position: fixed;
    top: 42%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--slate);
    z-index: var(--z-tooltip);
    transition: color 0.15s, background 0.15s;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}
.panel-expand-tab:hover {
    color: var(--primary);
    background: var(--bg-surface);
}
.panel-expand-tab-left {
    left: 56px;
    border-radius: 0 5px 5px 0;
    border-left: none;
}
.panel-expand-tab-right {
    right: 0;
    border-radius: 5px 0 0 5px;
    border-right: none;
}

body.sidebar-collapsed .sidebar { display: none !important; }
body.sidebar-collapsed .main-area { margin-left: 56px !important; }
body.sidebar-collapsed.rail-expanded .main-area { margin-left: 170px !important; }
body.sidebar-collapsed .view-toggle-bar { left: 56px !important; }
body.sidebar-collapsed.rail-expanded .view-toggle-bar { left: 170px !important; }

body.right-panel-collapsed .right-panel { display: none !important; }
body.right-panel-collapsed .panel-pull-tab { display: none !important; }
body.right-panel-collapsed .main-area { margin-right: 0 !important; }
body.right-panel-collapsed .view-toggle-bar { right: 0 !important; }

/* Hide border toggles during fullscreen and intake modes (expand tabs stay for re-opening panels) */
body.canvas-fullscreen .panel-border-toggle { display: none !important; }
body.intake-fullscreen .panel-expand-tab, body.intake-fullscreen .panel-border-toggle { display: none !important; }
@media (max-width: 1024px) { .panel-expand-tab { display: none !important; } .panel-border-toggle { display: none !important; } }

/* Canvas fullscreen mode */
body.canvas-fullscreen .tool-rail {
    z-index: var(--z-topbar);
    box-shadow: 2px 0 12px var(--shadow-sm);
}
body.canvas-fullscreen .tool-rail .rail-separator:first-of-type { display: none; }
body.canvas-fullscreen .sidebar { display: none !important; }
body.canvas-fullscreen .right-panel { display: none !important; }
body.canvas-fullscreen .panel-pull-tab { display: none !important; }
body.canvas-fullscreen .mobile-header { display: none !important; }
body.canvas-fullscreen .main-area {
    margin-left: 56px !important;
    margin-right: 0 !important;
}
body.canvas-fullscreen.rail-expanded .main-area {
    margin-left: 170px !important;
}
/* Walkthrough-style intake: hide everything but the main area */
body.intake-fullscreen .tool-rail { display: none !important; }
body.intake-fullscreen .sidebar { display: none !important; }
body.intake-fullscreen .view-toggle-bar { display: none !important; }
body.intake-fullscreen .mobile-bottom-bar { display: none !important; }
body.intake-fullscreen .mobile-header { display: none !important; }
body.intake-fullscreen .main-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
}
/* Intake completion: sidebar reveal animation */
@keyframes sidebarSlideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes intakeFieldReveal {
    0%   { opacity: 0; transform: translateY(10px); background: transparent; }
    30%  { opacity: 1; transform: translateY(0); background: rgba(5,150,105,0.13); }
    100% { opacity: 1; transform: translateY(0); background: transparent; }
}
body.intake-reveal .sidebar {
    display: flex !important;
    animation: sidebarSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.intake-reveal .tool-rail {
    display: flex !important;
}
body.intake-reveal .sidebar-info-block {
    opacity: 0;
    border-radius: 6px;
    animation: intakeFieldReveal 0.8s ease forwards;
}
body.intake-reveal .sidebar-info-block:nth-child(1) { animation-delay: 0.4s; }
body.intake-reveal .sidebar-info-block:nth-child(2) { animation-delay: 0.55s; }
body.intake-reveal .sidebar-info-block:nth-child(3) { animation-delay: 0.7s; }
body.intake-reveal .sidebar-info-block:nth-child(4) { animation-delay: 0.85s; }
body.intake-reveal .sidebar-info-block:nth-child(5) { animation-delay: 1.0s; }
body.intake-reveal .sidebar-info-block:nth-child(6) { animation-delay: 1.15s; }
body.intake-reveal .sidebar-info-block:nth-child(7) { animation-delay: 1.3s; }



/* Rail is independent of fullscreen — no rail-forcing rules here */
body.canvas-fullscreen .view-toggle-bar {
    left: 56px !important;
    right: 0 !important;
    align-items: center;
    padding: 0 12px;
}
body.canvas-fullscreen.rail-expanded .view-toggle-bar {
    left: 170px !important;
}

/* Undo/redo/dark-toggle buttons shown in top bar when right panel is hidden */
.fullscreen-topbar-buttons {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
}

/* Fullscreen branding — logo + title on top-left, page header shifts right */
.fullscreen-brand {
    display: none;
}
body.canvas-fullscreen .fullscreen-brand {
    display: none;
}
body.canvas-fullscreen .fullscreen-brand-text {
    display: none;
}
.fullscreen-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.fullscreen-brand-logo:hover {
    transform: scale(1.08);
}
.fullscreen-brand-logo svg {
    width: 32px;
    height: 32px;
}
.fullscreen-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fullscreen-brand-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    line-height: 1.3;
}
.fullscreen-brand-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 300;
    color: var(--slate);
    white-space: nowrap;
}
body.canvas-fullscreen .top-bar-page-title {
    top: 0;
}
body.canvas-fullscreen .canvas-fullscreen-btn {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
body.canvas-fullscreen .floating-fullscreen-btn {
    right: 16px !important;
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
body.canvas-fullscreen .panel-expand-tab { display: none !important; }
body.canvas-fullscreen .panel-border-toggle { display: none !important; }

/* Floating fullscreen button — bottom-right of canvas */
.floating-fullscreen-btn {
    position: fixed;
    bottom: 16px;
    right: 356px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--slate);
    z-index: 90;
    transition: all 0.15s;
}
.floating-fullscreen-btn:hover {
    background: var(--charcoal);
    color: var(--on-brand);
    border-color: var(--charcoal);
}
.floating-fullscreen-btn .i { width: 16px; height: 16px; }
.floating-structure-btn {
    position: fixed;
    bottom: 16px;
    right: 490px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    cursor: pointer;
    color: var(--slate);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 90;
    transition: all 0.15s;
}
.floating-structure-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-tint-xs);
}
.floating-structure-btn .i { width: 14px; height: 14px; }
body.canvas-fullscreen .floating-structure-btn { right: 150px; }
body.intake-fullscreen .floating-structure-btn { display: none !important; }
@media (max-width: 1024px) { .floating-structure-btn { display: none !important; } }

.floating-tidy-btn {
    position: fixed;
    bottom: 16px;
    right: 400px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    cursor: pointer;
    color: var(--slate);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 90;
    transition: all 0.15s;
}
.floating-tidy-btn:hover {
    background: var(--charcoal);
    color: var(--on-brand);
    border-color: var(--charcoal);
}
.floating-tidy-btn .i { width: 14px; height: 14px; }
body.canvas-fullscreen .floating-tidy-btn { right: 60px; }
body.intake-fullscreen .floating-fullscreen-btn, body.intake-fullscreen .floating-tidy-btn { display: none !important; }
@media (max-width: 1024px) { .floating-fullscreen-btn, .floating-tidy-btn { display: none !important; } }

.graph-area { cursor: grab; }
.graph-area.is-panning { cursor: grabbing !important; }
.graph-area .graph-node { cursor: pointer; }

/* Quick add bar */
.quick-add-bar {
    position: absolute;
    top: 56px;
    right: 56px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.4rem 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    box-shadow: 0 4px 16px var(--shadow-md);
    z-index: 51;
    min-width: 300px;
    height: 36px;
    box-sizing: border-box;
}

.quick-add-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--charcoal);
    background: transparent;
}
.quick-add-bar input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.quick-add-btn {
    padding: 0.4rem 0.8rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
}

.quick-add-btn:hover { background: var(--primary-mid); }

.quick-add-cancel {
    font-size: 0.8rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0 0.25rem;
}

.quick-add-cancel:hover { color: var(--charcoal); }

/* Link mode hint */
.link-mode-hint {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pillar-color);
    color: var(--on-brand);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    z-index: var(--z-fab);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--pillar-color) 30%, transparent);
}

.link-cancel-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: 'Montserrat', sans-serif;
}

/* Canvas brand logo (above FAB) */
.canvas-brand {
    position: absolute;
    top: 60px;
    right: 1.5rem;
    z-index: 10;
    display: block;
    width: 48px;
}
.canvas-brand img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.82;
    filter: drop-shadow(0 1px 3px var(--shadow-md));
    transition: opacity 0.15s;
}
.canvas-brand:hover img { opacity: 1; }

/* Add idea floating button */
/* ── FAB control group ── */
.fab-controls {
    position: absolute;
    top: 56px;
    right: 1rem;
    z-index: 51;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ── Shared FAB pill-expand behaviour ── */
.fab-add, .fab-group, .fab-filter {
    position: relative;
    right: auto;
    top: auto;
    height: 36px;
    min-width: 36px;
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: min-width 0.25s ease, gap 0.25s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 51;
}
.fab-add .fab-icon, .fab-group .fab-icon, .fab-filter .fab-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fab-add .fab-icon svg, .fab-group .fab-icon svg, .fab-filter .fab-icon svg {
    width: 18px;
    height: 18px;
}
.fab-add .fab-label, .fab-group .fab-label, .fab-filter .fab-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    padding-right: 0;
}
.fab-controls:hover .fab-label {
    max-width: 7rem;
    opacity: 1;
    padding-right: 0.7rem;
}

/* ── Add button ── */
.fab-add {
    background: var(--primary);
    color: var(--on-brand);
    border: 1.5px solid var(--primary);
    font-size: 1.25rem;
    box-shadow: 0 4px 16px var(--shadow-primary);
}
.fab-add:hover { background: var(--primary-mid); }
.fab-add.active { background: var(--slate); }

/* ── Group button ── */
.fab-group {
    background: var(--bg-surface);
    color: var(--charcoal);
    border: 1.5px solid var(--border-medium);
    font-size: 1.1rem;
    box-shadow: 0 2px 8px var(--shadow-sm);
}
.fab-group:hover { border-color: var(--primary); color: var(--primary); }

/* ── Filter button ── */
.fab-filter {
    background: var(--bg-surface);
    color: var(--charcoal);
    border: 1.5px solid var(--border-medium);
    font-size: 1rem;
    box-shadow: 0 2px 8px var(--shadow-sm);
}
.fab-filter:hover { border-color: var(--primary); color: var(--primary); }
.fab-filter.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-brand);
}

.level-filter-menu {
    position: absolute;
    top: 136px;
    right: calc(1rem + 44px);
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.5rem 0;
    box-shadow: 0 6px 24px var(--shadow-md);
    z-index: 52;
    min-width: 180px;
    display: none;
}
.level-filter-menu.open {
    display: block;
}
.level-filter-menu .filter-menu-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.35rem 0.85rem 0.35rem;
}
.level-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.85rem;
    color: var(--charcoal);
    user-select: none;
}
.level-filter-item:hover {
    background: var(--primary-tint-xs);
}
.level-filter-item input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}
.level-filter-item .filter-color-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── SCRIPT VIEW TOGGLE ──────────────────────────────── */
.view-toggle-bar {
    position: fixed;
    top: 0;
    left: 336px;
    right: 340px;
    height: 38px;
    background: var(--topbar-bg, var(--bg-surface));
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 4px var(--shadow-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    z-index: var(--z-guide);
    padding: 0 8px;
}
.top-bar-page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex-shrink: 1;
}
.journey-breadcrumb {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--slate);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    margin-left: 0.25rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    opacity: 0.6;
}
.journey-breadcrumb:hover { opacity: 1; color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
.top-bar-page-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-bar-page-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.view-toggle-btn {
    padding: 0.4rem 0.7rem;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.view-toggle-btn .btn-icon {
    margin-right: 0.3em;
    font-style: normal;
}

.view-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.view-toggle-btn.active {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}

/* Icon-only top-bar dropdown trigger (e.g. Messages) — square, no text.
   Matches the bell + search style: transparent border by default so the
   icon row reads as a row of glyphs, not a row of chips. The hover state
   below paints a subtle background + colored icon to confirm the target. */
.view-toggle-btn.icon-only-toggle-btn {
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 1.5px solid transparent;
    color: var(--charcoal);
}
.view-toggle-btn.icon-only-toggle-btn .i {
    width: 19px;
    height: 19px;
}
.view-toggle-btn.icon-only-toggle-btn:hover {
    background: var(--primary-tint-xs);
    border-color: transparent;
}
.view-toggle-btn.icon-only-toggle-btn.active {
    background: var(--primary-tint-sm);
    color: var(--primary);
    border-color: transparent;
}

/* ─── Per-button semantic hover colors ───────────────────── */
.top-bar-project-btn:hover {
    border-color: var(--violet);
    color: var(--violet);
    background: color-mix(in srgb, var(--violet) 6%, transparent);
}
.top-bar-help-btn:hover {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, transparent);
}
.top-bar-messages-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-tint-xs);
}
.notif-bell-btn:hover {
    background: color-mix(in srgb, var(--rose) 8%, transparent);
    color: var(--rose);
}

/* ─── SPACER (pushes right-side controls to the right) ── */
.top-bar-spacer {
    flex: 1;
    min-width: 0;
}

/* ─── SEARCH BUTTON (top bar) ─────────────────────── */
.top-bar-print-btn {
    margin-left: 0;
    margin-right: 0.15rem;
    padding: 0.35rem;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.top-bar-print-btn svg { width: 19px; height: 19px; }
.top-bar-print-btn:hover {
    background: var(--primary-tint-xs);
    color: var(--primary);
    border-color: var(--border-light);
}

.top-bar-search-btn {
    margin-left: 0;
    margin-right: 0.15rem;
    padding: 0.35rem;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.top-bar-search-btn svg { width: 19px; height: 19px; }
.top-bar-search-btn:hover {
    background: var(--primary-tint-xs);
    color: var(--primary);
    border-color: var(--border-light);
}

/* ─── + IDEA BUTTON (top bar) ──────────────────────── */
.top-bar-add-idea-btn {
    margin-left: 0;
    margin-right: 0.15rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.15s;
    flex-shrink: 0;
}
.top-bar-add-idea-btn .i {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.idea-btn-label {
    max-width: 60px;
    opacity: 1;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}
.top-bar-add-idea-btn:hover {
    background: var(--primary-mid);
    border-color: var(--primary-mid);
    color: var(--on-brand);
}
.top-bar-add-idea-wrap {
    margin-left: auto;
    margin-right: 0.25rem;
    display: flex;
    align-items: center;
}
.top-bar-add-idea-input {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--charcoal);
    width: 200px;
    outline: none;
    font-family: 'Inter', sans-serif;
}
.top-bar-add-idea-input:focus {
    box-shadow: 0 0 0 2px var(--primary-tint-sm);
}

.actions-dropdown {
    position: relative;
    flex-shrink: 0;
}

.actions-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow-lg);
    min-width: 260px;
    padding: 4px 0;
    z-index: var(--z-topbar);
}

.actions-dropdown-menu.open {
    display: block;
}

.actions-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s;
}

.actions-dropdown-menu button:hover {
    background: var(--primary-tint-sm);
    color: var(--primary);
}

.actions-dropdown-menu button.action-narratives {
    color: var(--primary);
    font-weight: 600;
}

.actions-dropdown-menu .action-icon {
    font-size: 0.85rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}

.actions-dropdown-menu .action-format {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--primary-tint-bg);
    color: var(--primary);
    border-radius: 3px;
    padding: 0.1em 0.35em;
    margin-left: 0.1rem;
}

.actions-dropdown-menu .action-kbd {
    font-size: 0.6rem;
    font-weight: 700;
    font-family: monospace;
    background: var(--bg-panel);
    color: var(--slate);
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    padding: 0.1em 0.4em;
    margin-left: auto;
}

.actions-dropdown-menu hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

.actions-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.4rem 1rem 0.2rem;
}

.coaching-action-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.coaching-action-item:disabled {
    opacity: 0.42;
}

.undo-btn, .redo-btn {
    width: 34px;
    height: 34px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--charcoal);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    padding: 0;
    line-height: 1;
}

.undo-btn .i, .redo-btn .i { width: 19px; height: 19px; }

.undo-btn:hover:not(:disabled), .redo-btn:hover:not(:disabled) {
    background: var(--primary-tint-xs);
    color: var(--primary);
}

.undo-btn:disabled, .redo-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Reset standalone undo/redo styles when inside actions menu */
.actions-dropdown-menu .undo-btn,
.actions-dropdown-menu .redo-btn {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    justify-content: flex-start;
}

/* ─── Top-bar right cluster (undo, redo, theme) ─────────────── */
.top-bar-right-cluster {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
    border-left: 1px solid var(--border-light);
    margin-left: 4px;
}

/* ─── Instant tooltip (data-tooltip attribute) ──────────────── */
/* Used on top-bar icon buttons to replace the native title tooltip delay.
   Tooltips appear below the button so they stay within the viewport. */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    color: var(--charcoal);
    border: 1px solid var(--border-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: calc(var(--z-topbar) + 10);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    /* visibility-based so there is zero transition delay */
    visibility: hidden;
}
[data-tooltip]:hover::after {
    visibility: visible;
}
/* Right-edge tooltip anchor: prevents the tooltip from running off the
   right side of the viewport for buttons that sit at the far right of
   the top bar (e.g. the dark-mode toggle, last child of the right cluster). */
.top-bar-right-cluster > [data-tooltip]:last-child::after,
[data-tooltip].tooltip-right-anchor::after {
    left: auto;
    right: 0;
    transform: none;
}

/* ─── VOCAB TIPS (inline jargon definitions) ─────────────── */
/* Underlined term in flowing text that pops a definition on hover/focus.
   Tooltip appears ABOVE the term to avoid clipping at page bottom. */
.vocab-tip {
    text-decoration: underline dotted;
    text-decoration-color: var(--slate);
    text-underline-offset: 2px;
    cursor: help;
    position: relative;
    display: inline-block;
}
.vocab-tip::after {
    content: attr(data-vocab);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    color: var(--charcoal);
    border: 1px solid var(--border-light);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    max-width: 220px;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    visibility: hidden;
}
.vocab-tip:hover::after,
.vocab-tip:focus::after {
    visibility: visible;
}

/* ─── USER MENU ───────────────────────────────────────────── */
.user-menu-btn {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    padding: 0.4rem 1rem !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: none;
}
.user-menu-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}
.user-menu-btn .i {
    width: 16px;
    height: 16px;
}
.user-initials {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.user-avatar-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}
.user-menu-dropdown {
    flex-shrink: 0;
}
.user-menu-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.user-menu-dropdown .actions-dropdown-menu a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.user-menu-dropdown .actions-dropdown-menu a:hover {
    background: var(--primary-tint-sm);
    color: var(--primary);
}

/* ─── A35: UTILITY CLASSES (extracted from inline styles) ─── */
.section-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Montserrat', sans-serif;
}
.empty-state-text {
    font-size: 0.75rem;
    color: var(--slate);
    text-align: center;
    padding: 1rem;
}
.flex-row { display: flex; align-items: center; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.35rem; }
.gap-md { gap: 0.5rem; }
.gap-lg { gap: 0.75rem; }
.gap-xl { gap: 1rem; }
.helper-text {
    font-size: 0.7rem;
    color: var(--slate);
    margin-top: 0.5rem;
}
.section-divider {
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.25rem;
}
.interactive-card {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-surface);
    color: var(--charcoal);
}
.interactive-card:hover {
    border-color: var(--primary-tint-bg);
    background: var(--primary-tint-sm);
}
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── SKIP LINK ──────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--z-skip-link);
}
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--on-brand);
    border-radius: 4px;
    font-size: 0.875rem;
    text-decoration: none;
    z-index: var(--z-skip-link);
}

/* Phone sidebar fallback — tool rail hidden at ≤600px so sidebar must start at left:0 */
@media (max-width: 600px) {
    .sidebar { left: 0; }
    .journey-breadcrumb { display: none; }
}

/* ── Read-Only Mode (Coach viewing coachee session) ── */
.read-only-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--primary-tint-sm);
    border-bottom: 2px solid var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    position: sticky;
    top: 0;
    z-index: 10;
}
.read-only-banner svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; }
.read-only-exit-btn {
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.read-only-exit-btn:hover { opacity: 0.85; }

/* Globally disable all form inputs in read-only mode.
   Exception: .coach-guidance-textarea stays interactive so coaches can
   write Coach Notes while reviewing a coachee's session. updateCoachNote
   is gated by canEditCoachNotes(), so users without coach/admin roles
   still cannot write through this exemption. */
body.read-only-mode textarea:not(.coach-guidance-textarea),
body.read-only-mode input:not(.read-only-exit-btn),
body.read-only-mode select {
    pointer-events: none !important;
    opacity: 0.7;
}
body.read-only-mode .coach-guidance-textarea {
    border-color: var(--primary) !important;
    background: var(--primary-tint-xs);
}
/* Hide mutation buttons (add, delete, edit, assign) */
body.read-only-mode .quick-add-btn,
body.read-only-mode .node-delete-btn,
body.read-only-mode [data-action="delete"],
body.read-only-mode .intake-continue-btn,
body.read-only-mode .floating-action-btn,
body.read-only-mode .fab-wrapper {
    display: none !important;
}

/* Admin-only UI: hidden by default, revealed when body.is-admin is set by
   coach-assignments.js loadCurrentUserRole(). Used by the Content Lab rail
   entry and any future admin-gated surfaces inside the main SPA. */
.admin-only {
    display: none !important;
}
body.is-admin .admin-only {
    display: flex !important;
}