:root {
                /* BlueSprig palette — navy primary, sprig green accent, gold warning, sky blue link */
                --navy-900: #0d3357; /* top app bar */
                --navy-800: #133f6b;
                --navy-700: #1e4c77; /* brand text, active module underline base */
                --navy-600: #2b6096;
                --navy-50: #eef3f8;

                --sky-600: #1f7fbf; /* primary link/button */
                --sky-500: #3a9adc;
                --sky-400: #56b5e6; /* brand bright accent */
                --sky-100: #e2f1fb;
                --sky-50: #f2f9fd;

                --sprig-700: #2e8b4a; /* on-target / AI-ready text color */
                --sprig-600: #4aae60;
                --sprig-500: #71ce7e; /* sprig mark, progress, ghost-text accent */
                --sprig-100: #def4e1;
                --sprig-50: #f1faf3;

                --gold: #e5a30a; /* draft status, warnings */
                --gold-50: #fbf0d2;

                --red: #c9302c;
                --red-50: #fdeceb;

                --ink: #1a2332;
                --ink-soft: #4b5a6b;
                --ink-fade: #8592a0;
                --ink-xfade: #b5bdc5;

                --cream: #fcf8f1; /* warm background — family-forward tone */
                --bg: #f5f2ea; /* page background (warm neutral) */
                --panel: #ffffff;
                --panel-tint: #fbf9f3; /* subtle warm tint for card heads */

                --border: #dcd6c5;
                --border-strong: #b5ae9b;
                --border-soft: #ece7d7;

                --shadow-card:
                    0 1px 2px rgba(13, 51, 87, 0.04),
                    0 4px 16px rgba(13, 51, 87, 0.05);
                --shadow-pop:
                    0 1px 2px rgba(13, 51, 87, 0.05),
                    0 8px 28px rgba(13, 51, 87, 0.14);
            }

            * {
                box-sizing: border-box;
            }
            html,
            body {
                margin: 0;
                padding: 0;
            }
            body {
                background: var(--bg);
                color: var(--ink);
                font-family:
                    "Lato",
                    system-ui,
                    -apple-system,
                    sans-serif;
                font-size: 13px;
                line-height: 1.5;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-variant-numeric: tabular-nums;
            }
            .serif {
                font-family: "Playfair Display", Georgia, serif;
                font-weight: 600;
                letter-spacing: -0.005em;
            }

            a {
                color: var(--sky-600);
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }

            /* ======================================================================
     Top app bar: navy brand, module nav, search, user
     ====================================================================== */
            .appbar {
                display: flex;
                align-items: center;
                background: var(--navy-900);
                color: #fff;
                height: 46px;
                padding: 0 18px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
                position: sticky;
                top: 0;
                z-index: 50;
            }
            .appbar .logo {
                display: flex;
                align-items: center;
                gap: 10px;
                padding-right: 20px;
                margin-right: 12px;
                border-right: 1px solid rgba(255, 255, 255, 0.14);
                height: 46px;
            }
            .appbar .logo .mark {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                color: var(--sprig-500);
            }
            .appbar .logo .mark svg {
                width: 26px;
                height: 26px;
            }
            .appbar .logo .brand {
                font-family: "Playfair Display", Georgia, serif;
                font-weight: 700;
                font-style: normal;
                font-size: 18px;
                letter-spacing: -0.005em;
                color: #fff;
            }
            .appbar .logo .brand em {
                font-family: "Lato", sans-serif;
                font-style: normal;
                font-weight: 400;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.75);
                margin-left: 8px;
                letter-spacing: 0.01em;
                vertical-align: 2px;
                text-transform: uppercase;
            }
            .appbar nav.modules {
                display: flex;
                height: 46px;
                gap: 0;
            }
            .appbar nav.modules a {
                display: inline-flex;
                align-items: center;
                padding: 0 14px;
                color: rgba(255, 255, 255, 0.82);
                font-size: 13px;
                font-weight: 500;
                text-decoration: none;
                border-bottom: 2px solid transparent;
                height: 46px;
            }
            .appbar nav.modules a:hover {
                background: rgba(255, 255, 255, 0.06);
                color: #fff;
            }
            .appbar nav.modules a.active {
                color: #fff;
                border-bottom-color: var(--gold);
                background: rgba(255, 255, 255, 0.05);
            }
            .appbar .spacer {
                flex: 1;
            }
            .appbar .search {
                display: flex;
                align-items: center;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 3px;
                padding: 4px 8px 4px 28px;
                width: 260px;
                height: 28px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.85);
                position: relative;
            }
            .appbar .search::before {
                content: "";
                position: absolute;
                left: 8px;
                top: 50%;
                transform: translateY(-50%);
                width: 12px;
                height: 12px;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' opacity='0.6'><circle cx='7' cy='7' r='5'/><line x1='10.5' y1='10.5' x2='14' y2='14' stroke-linecap='round'/></svg>");
            }
            .appbar .search input {
                background: transparent;
                border: none;
                outline: none;
                color: #fff;
                width: 100%;
                font: inherit;
            }
            .appbar .search input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            .appbar .icon-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                margin-left: 6px;
                color: rgba(255, 255, 255, 0.85);
                border-radius: 3px;
                cursor: pointer;
            }
            .appbar .icon-btn:hover {
                background: rgba(255, 255, 255, 0.08);
                color: #fff;
            }
            .appbar .icon-btn {
                cursor: pointer;
            }
            .appbar .icon-btn.active {
                background: rgba(255, 255, 255, 0.14);
                color: #fff;
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
            }
            .appbar .user {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 0 8px 0 10px;
                margin-left: 6px;
                height: 30px;
                border-radius: 3px;
                cursor: pointer;
            }
            .appbar .user:hover {
                background: rgba(255, 255, 255, 0.08);
            }
            .appbar .user .avatar {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background: var(--sprig-500);
                color: var(--navy-900);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 11px;
                border: 1px solid rgba(0, 0, 0, 0.08);
            }
            .appbar .user .name {
                font-size: 12px;
                color: #fff;
            }
            .appbar .reset-demo {
                font-size: 11px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.75);
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.15);
                border-radius: 3px;
                padding: 3px 10px;
                cursor: pointer;
                margin-right: 8px;
                user-select: none;
                transition: background 120ms ease-out;
            }
            .appbar .reset-demo:hover {
                background: rgba(255, 255, 255, 0.14);
                color: #fff;
            }

            /* Transient toast for Submit / Reset confirmations. */
            #toast {
                position: fixed;
                bottom: 80px;
                left: 50%;
                transform: translateX(-50%) translateY(16px);
                background: var(--navy-900);
                color: #fff;
                font-size: 12.5px;
                font-weight: 600;
                letter-spacing: 0.1px;
                padding: 10px 18px;
                border-radius: 6px;
                box-shadow: 0 12px 32px rgba(13, 51, 87, 0.3);
                z-index: 2000;
                opacity: 0;
                pointer-events: none;
                transition:
                    opacity 200ms ease-out,
                    transform 200ms ease-out;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            #toast.show {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
            #toast .dot-check {
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: var(--sprig-500);
                position: relative;
                flex-shrink: 0;
            }
            #toast .dot-check::after {
                content: "";
                position: absolute;
                top: 4px;
                left: 5px;
                width: 4px;
                height: 7px;
                border: solid var(--navy-900);
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

            /* ======================================================================
     Breadcrumb + page-title strip
     ====================================================================== */
            .subbar {
                background: #fff;
                border-bottom: 1px solid var(--border);
                padding: 12px 22px 14px;
            }
            .crumbs {
                font-size: 11.5px;
                color: var(--ink-fade);
                margin-bottom: 8px;
            }
            .crumbs a {
                color: var(--sky-600);
            }
            .crumbs .sep {
                margin: 0 5px;
                color: var(--ink-xfade);
            }
            .page-title-row {
                display: flex;
                align-items: baseline;
                gap: 14px;
            }
            .page-title-row h1 {
                font-family: "Playfair Display", Georgia, serif;
                font-weight: 600;
                font-size: 22px;
                margin: 0;
                color: var(--navy-900);
                letter-spacing: -0.005em;
                line-height: 1.15;
            }
            .page-title-row h1 .light {
                font-weight: 500;
                font-style: italic;
                color: var(--ink-soft);
            }
            .page-title-row .apt-id {
                font-size: 12px;
                color: var(--ink-fade);
                font-weight: 500;
            }
            .status-pill {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 2px 8px;
                border-radius: 11px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                align-self: center;
            }
            .status-pill.draft {
                background: var(--gold-50);
                color: var(--gold);
                border: 1px solid #f0d79a;
            }
            .status-pill.signed {
                background: var(--sprig-50);
                color: var(--sprig-700);
                border: 1px solid var(--sprig-100);
            }
            .status-pill.locked {
                background: #eef1f4;
                color: var(--ink-soft);
                border: 1px solid var(--border);
            }

            .risk-pill {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 3px 9px;
                border-radius: 999px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                border: 1px solid transparent;
                font-variant-numeric: tabular-nums;
                transition:
                    background 160ms ease-out,
                    color 160ms ease-out;
            }
            .risk-pill.low {
                background: var(--sprig-100);
                color: var(--sprig-700);
                border-color: var(--sprig-100);
            }
            .risk-pill.mid {
                background: var(--gold-50);
                color: var(--gold);
                border-color: #f0d79a;
            }
            .risk-pill.high {
                background: var(--red-50);
                color: var(--red);
                border-color: #f2c4c2;
            }

            /* First-load model banner — sits above the app bar during the initial
     weight download and goes away once the model is ready or the user
     dismisses it. */
            #first-load-banner {
                background: linear-gradient(
                    90deg,
                    var(--sky-100),
                    var(--sprig-100)
                );
                border-bottom: 1px solid var(--border-soft);
                padding: 6px 20px;
                font-size: 12px;
                color: var(--navy-800);
                display: none;
                align-items: center;
                gap: 14px;
                position: sticky;
                top: 0;
                z-index: 50;
            }
            #first-load-banner.show {
                display: flex;
            }
            #first-load-banner .fl-text {
                flex: 1;
                font-weight: 500;
            }
            #first-load-banner .fl-text strong {
                color: var(--navy-900);
            }
            #first-load-banner progress {
                width: 180px;
                height: 6px;
                border: none;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 3px;
                overflow: hidden;
                flex-shrink: 0;
            }
            #first-load-banner progress::-webkit-progress-bar {
                background: rgba(255, 255, 255, 0.5);
                border-radius: 3px;
            }
            #first-load-banner progress::-webkit-progress-value {
                background: var(--sky-600);
                border-radius: 3px;
            }
            #first-load-banner progress::-moz-progress-bar {
                background: var(--sky-600);
                border-radius: 3px;
            }
            #first-load-banner .fl-close {
                background: transparent;
                border: none;
                cursor: pointer;
                color: var(--ink-soft);
                padding: 2px 6px;
                border-radius: 3px;
                line-height: 0;
            }
            #first-load-banner .fl-close:hover {
                background: rgba(255, 255, 255, 0.4);
                color: var(--ink);
            }

            /* Offline indicator + accept-rate widget in the app bar */
            .appbar-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 3px 10px;
                border-radius: 999px;
                font-size: 11px;
                font-weight: 600;
                margin-right: 6px;
                letter-spacing: 0.1px;
            }
            .appbar-chip.offline {
                background: rgba(255, 255, 255, 0.12);
                color: #fff;
                border: 1px solid rgba(255, 170, 100, 0.4);
            }
            .appbar-chip.offline::before {
                content: "";
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #ffb950;
                box-shadow: 0 0 0 2px rgba(255, 185, 80, 0.3);
            }
            .appbar-chip.accept {
                background: rgba(255, 255, 255, 0.07);
                color: rgba(255, 255, 255, 0.85);
                font-variant-numeric: tabular-nums;
            }
            #offline-chip,
            #accept-chip {
                display: none;
            }
            #offline-chip.show,
            #accept-chip.show {
                display: inline-flex;
            }

            /* Fix-all button in the editor footer */
            .audit-fix-btn {
                display: none;
                padding: 2px 10px;
                border-radius: 999px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.2px;
                cursor: pointer;
                user-select: none;
                background: var(--sky-50);
                color: var(--sky-600);
                border: 1px solid var(--sky-100);
            }
            .audit-fix-btn.show {
                display: inline-flex;
            }
            .audit-fix-btn:hover {
                background: #d9ebf7;
                border-color: var(--sky-500);
            }

            /* Fix-all modal */
            #fix-all-modal {
                position: fixed;
                inset: 0;
                z-index: 2000;
                display: none;
                align-items: center;
                justify-content: center;
            }
            #fix-all-modal.show {
                display: flex;
            }
            #fix-all-modal .fa-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(13, 51, 87, 0.45);
                backdrop-filter: blur(2px);
            }
            #fix-all-modal .fa-card {
                position: relative;
                width: min(1000px, 90vw);
                max-height: 84vh;
                background: var(--panel);
                border-radius: 10px;
                box-shadow: 0 24px 60px rgba(13, 51, 87, 0.35);
                display: flex;
                flex-direction: column;
            }
            #fix-all-modal .fa-head {
                padding: 16px 20px;
                border-bottom: 1px solid var(--border-soft);
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                background: var(--panel-tint);
                border-radius: 10px 10px 0 0;
            }
            #fix-all-modal .fa-head h4 {
                margin: 0;
                font-family: "Playfair Display", serif;
                font-size: 16px;
                font-weight: 600;
                color: var(--navy-700);
            }
            #fix-all-modal .fa-sub {
                font-size: 11.5px;
                color: var(--ink-fade);
                display: block;
                margin-top: 2px;
            }
            #fix-all-modal .fa-close {
                background: transparent;
                border: none;
                cursor: pointer;
                color: var(--ink-soft);
                padding: 4px;
                border-radius: 4px;
                line-height: 0;
            }
            #fix-all-modal .fa-close:hover {
                background: var(--border-soft);
                color: var(--ink);
            }
            #fix-all-modal .fa-body {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                padding: 16px 20px;
                overflow: auto;
            }
            #fix-all-modal .fa-col {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            #fix-all-modal .fa-col-head {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            #fix-all-modal .fa-col-text {
                font-family: "Lato", sans-serif;
                font-size: 13px;
                line-height: 1.55;
                color: var(--ink);
                background: var(--panel-tint);
                border: 1px solid var(--border-soft);
                padding: 12px 14px;
                border-radius: 6px;
                white-space: pre-wrap;
                min-height: 180px;
                max-height: 52vh;
                overflow-y: auto;
            }
            #fix-all-modal .fa-del {
                background: #fdeceb;
                color: var(--red);
                text-decoration: line-through;
                padding: 0 2px;
                border-radius: 2px;
            }
            #fix-all-modal .fa-ins {
                background: var(--sprig-50);
                color: var(--sprig-700);
                padding: 0 2px;
                border-radius: 2px;
                font-weight: 600;
            }
            #fix-all-modal .fa-foot {
                padding: 12px 20px;
                border-top: 1px solid var(--border-soft);
                display: flex;
                justify-content: flex-end;
                gap: 10px;
                background: var(--panel-tint);
                border-radius: 0 0 10px 10px;
            }

            /* Incident modal reuses .fa-* classes; these only tweak the body grid. */
            #incident-modal {
                position: fixed;
                inset: 0;
                z-index: 2000;
                display: none;
                align-items: center;
                justify-content: center;
            }
            #incident-modal.show {
                display: flex;
            }
            #incident-modal .fa-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(13, 51, 87, 0.45);
                backdrop-filter: blur(2px);
            }
            #incident-modal .fa-card {
                position: relative;
                background: var(--panel);
                border-radius: 10px;
                box-shadow: 0 24px 60px rgba(13, 51, 87, 0.35);
                display: flex;
                flex-direction: column;
            }
            #incident-modal .fa-head {
                padding: 16px 20px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel-tint);
                border-radius: 10px 10px 0 0;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
            }
            #incident-modal .fa-head h4 {
                margin: 0;
                font-family: "Playfair Display", serif;
                font-size: 16px;
                font-weight: 600;
                color: var(--navy-700);
            }
            #incident-modal .fa-sub {
                font-size: 11.5px;
                color: var(--ink-fade);
                display: block;
                margin-top: 2px;
            }
            #incident-modal .fa-close {
                background: transparent;
                border: none;
                cursor: pointer;
                color: var(--ink-soft);
                padding: 4px;
                border-radius: 4px;
                line-height: 0;
            }
            #incident-modal .fa-close:hover {
                background: var(--border-soft);
                color: var(--ink);
            }
            #incident-modal .fa-foot {
                padding: 12px 20px;
                border-top: 1px solid var(--border-soft);
                display: flex;
                justify-content: flex-end;
                gap: 10px;
                background: var(--panel-tint);
                border-radius: 0 0 10px 10px;
            }
            #incident-modal .inc-form {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px 14px;
                padding: 16px 20px;
            }
            #incident-modal .inc-form label {
                display: flex;
                flex-direction: column;
                gap: 4px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            #incident-modal .inc-form label.inc-wide {
                grid-column: 1 / -1;
            }
            #incident-modal .inc-form input,
            #incident-modal .inc-form select {
                font-family: inherit;
                font-size: 13px;
                font-weight: 400;
                text-transform: none;
                letter-spacing: normal;
                color: var(--ink);
                padding: 7px 10px;
                border: 1px solid var(--border);
                border-radius: 5px;
                background: #fff;
                outline: none;
            }
            #incident-modal .inc-form input:focus,
            #incident-modal .inc-form select:focus {
                border-color: var(--sky-500);
                box-shadow: 0 0 0 2px var(--sky-100);
            }

            .subbar .meta-row {
                display: flex;
                align-items: center;
                gap: 16px;
                margin-top: 10px;
                font-size: 12px;
                color: var(--ink-soft);
            }
            .meta-row .sep-dot {
                width: 3px;
                height: 3px;
                border-radius: 50%;
                background: var(--ink-xfade);
            }
            .meta-row strong {
                color: var(--ink);
                font-weight: 700;
            }
            .timer {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 3px 10px;
                background: var(--sprig-50);
                border: 1px solid var(--sprig-100);
                border-radius: 11px;
                font-weight: 700;
                color: var(--sprig-700);
                font-size: 12px;
                margin-left: auto;
            }
            .timer .pulse {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--sprig-500);
                box-shadow: 0 0 0 0 rgba(113, 206, 126, 0.6);
                animation: pulse 1.8s ease-in-out infinite;
            }
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(113, 206, 126, 0.5);
                }
                70% {
                    box-shadow: 0 0 0 8px rgba(113, 206, 126, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(113, 206, 126, 0);
                }
            }

            /* ======================================================================
     Tab bar (Session Info, Goals, Narrative, Behaviors, Signatures)
     ====================================================================== */
            .tabbar {
                background: #fff;
                border-bottom: 1px solid var(--border);
                padding: 0 22px;
                display: flex;
                gap: 0;
                position: sticky;
                top: 46px;
                z-index: 40;
            }
            .tabbar .tab {
                padding: 10px 14px 9px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--ink-soft);
                border-bottom: 2px solid transparent;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 7px;
            }
            .tabbar .tab:hover {
                color: var(--ink);
            }
            .tabbar .tab.active {
                color: var(--navy-900);
                border-bottom-color: var(--sprig-500);
            }
            .tabbar .tab .count {
                display: inline-block;
                font-size: 10.5px;
                padding: 0 5px;
                min-width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                border-radius: 8px;
                background: var(--border-soft);
                color: var(--ink-soft);
                font-weight: 700;
            }
            .tabbar .tab.active .count {
                background: var(--sprig-100);
                color: var(--sprig-700);
            }
            .tabbar .tab .dot-alert {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--red);
            }

            /* ======================================================================
     Main workspace: two-column grid
     ====================================================================== */
            main.workspace {
                max-width: 1380px;
                margin: 16px auto 90px;
                padding: 0 22px;
                display: grid;
                grid-template-columns: 1fr 340px;
                gap: 16px;
                align-items: start;
            }

            .card {
                background: var(--panel);
                border: 1px solid var(--border);
                border-radius: 12px;
                box-shadow: var(--shadow-card);
                transition: box-shadow 200ms ease;
            }
            .card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 14px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel-tint);
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
            .card-head h3 {
                margin: 0;
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--navy-700);
            }
            .card-head .head-actions {
                display: flex;
                gap: 6px;
            }
            .card-head .head-btn {
                font-size: 11.5px;
                color: var(--sky-600);
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 2px;
                font-weight: 600;
            }
            .card-head .head-btn:hover {
                background: var(--sky-50);
            }
            .card-body {
                padding: 14px;
            }
            .card-body.tight {
                padding: 10px 14px;
            }

            /* Form fields */
            .field-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px 18px;
            }
            .field-grid.three {
                grid-template-columns: repeat(3, 1fr);
            }
            .field {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .field label {
                font-size: 10.5px;
                font-weight: 700;
                color: var(--ink-soft);
                text-transform: uppercase;
                letter-spacing: 0.06em;
            }
            .field .control {
                display: block;
                background: #fff;
                border: 1px solid var(--border);
                border-radius: 3px;
                padding: 6px 9px;
                font-size: 13px;
                color: var(--ink);
                min-height: 30px;
                line-height: 1.4;
            }
            .field .control.readonly {
                background: var(--panel-tint);
                color: var(--ink);
            }
            .field .control:focus-within {
                border-color: var(--sky-600);
                box-shadow: 0 0 0 2px rgba(31, 127, 191, 0.14);
            }

            /* ======================================================================
     Narrative editor (the centerpiece)
     ====================================================================== */
            .narrative-card {
                display: flex;
                flex-direction: column;
            }

            .narrative-toolbar {
                display: flex;
                align-items: center;
                gap: 2px;
                padding: 6px 10px;
                background: var(--panel-tint);
                border-bottom: 1px solid var(--border-soft);
            }
            .tb-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                color: var(--ink-soft);
                border-radius: 2px;
                cursor: pointer;
                font-size: 12px;
            }
            .tb-btn:hover {
                background: #efeadb;
                color: var(--ink);
            }
            .tb-btn.b {
                font-weight: 900;
            }
            .tb-btn.i {
                font-style: italic;
                font-family: "Playfair Display", serif;
            }
            .tb-btn.u {
                text-decoration: underline;
            }
            .tb-sep {
                width: 1px;
                height: 18px;
                margin: 0 5px;
                background: var(--border);
            }
            .tb-btn.ai-toggle {
                width: auto;
                padding: 0 10px;
                display: inline-flex;
                gap: 7px;
                font-size: 11.5px;
                font-weight: 700;
                color: var(--sprig-700);
                background: var(--sprig-50);
                border: 1px solid var(--sprig-100);
                border-radius: 12px;
                margin-left: auto;
                height: 24px;
            }
            .tb-btn.ai-toggle .dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--ink-xfade);
            }
            .tb-btn.ai-toggle.loading .dot {
                background: var(--gold);
                animation: pulse-dot 1.2s ease-in-out infinite;
            }
            .tb-btn.ai-toggle.ready .dot {
                background: var(--sprig-500);
                box-shadow: 0 0 0 3px rgba(113, 206, 126, 0.2);
            }
            .tb-btn.ai-toggle.error .dot {
                background: var(--red);
            }
            .tb-btn.ai-toggle.fallback .dot {
                background: var(--ink-xfade);
            }
            .tb-btn.ai-toggle .lock-icon {
                flex-shrink: 0;
                color: var(--sprig-700);
            }
            .tb-btn.ai-toggle.fallback .lock-icon {
                color: var(--ink-soft);
            }
            .tb-btn.ai-toggle.error .lock-icon {
                color: var(--red);
            }
            .tb-btn.ai-toggle.loading .lock-icon {
                color: var(--gold);
            }

            /* ======================================================================
     MIC / DICTATION BUTTON
     ====================================================================== */
            .tb-btn.mic {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 2px 10px;
                border-radius: 999px;
                border: 1px solid transparent;
                color: var(--ink-soft);
                cursor: pointer;
                user-select: none;
                transition:
                    background 120ms ease-out,
                    color 120ms ease-out;
                min-width: 0;
            }
            .tb-btn.mic:hover {
                background: var(--sky-50);
                color: var(--sky-600);
            }
            .tb-btn.mic.loading {
                background: var(--gold-50);
                color: var(--gold);
                border-color: #f0d79a;
            }
            .tb-btn.mic.recording {
                background: var(--red-50);
                color: var(--red);
                border-color: #f2c4c2;
                animation: mic-pulse 1.2s ease-in-out infinite;
            }
            .tb-btn.mic.transcribing {
                background: var(--gold-50);
                color: var(--gold);
                border-color: #f0d79a;
            }
            .tb-btn.mic.transcribing svg {
                animation: mic-spin 0.9s linear infinite;
            }
            .tb-btn.mic.error {
                background: var(--red-50);
                color: var(--red);
                border-color: #f2c4c2;
            }
            .tb-btn.mic .mic-label {
                font-size: 11.5px;
                font-weight: 600;
                font-variant-numeric: tabular-nums;
            }
            @keyframes mic-pulse {
                0%,
                100% {
                    box-shadow: 0 0 0 0 rgba(201, 48, 44, 0.35);
                }
                50% {
                    box-shadow: 0 0 0 6px rgba(201, 48, 44, 0);
                }
            }
            @keyframes mic-spin {
                to {
                    transform: rotate(360deg);
                }
            }
            /* Live audio-level VU bar — visible only while recording. Driven from JS
     via the --level custom property (0..1). */
            .tb-btn.mic .mic-vu {
                display: none;
                width: 22px;
                height: 3px;
                background: rgba(201, 48, 44, 0.18);
                border-radius: 2px;
                overflow: hidden;
                margin-left: 2px;
            }
            .tb-btn.mic.recording .mic-vu {
                display: inline-block;
            }
            .tb-btn.mic .mic-vu > .fill {
                display: block;
                width: 100%;
                height: 100%;
                background: var(--red);
                transform-origin: left center;
                transform: scaleX(var(--level, 0));
                transition: transform 40ms linear;
            }

            /* ======================================================================
     DEBUG / PERFORMANCE PANEL
     ====================================================================== */
            #debug-panel {
                position: fixed;
                top: 58px;
                right: 16px;
                width: 380px;
                max-height: calc(100vh - 80px);
                overflow: auto;
                background: var(--panel);
                border: 1px solid var(--border-strong);
                border-radius: 8px;
                box-shadow: 0 12px 36px rgba(13, 51, 87, 0.22);
                z-index: 1000;
                display: none;
                font-size: 12px;
                color: var(--ink);
            }
            #debug-panel.show {
                display: block;
            }
            #debug-panel .dbg-head {
                padding: 12px 14px;
                border-bottom: 1px solid var(--border-soft);
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: var(--panel-tint);
                border-radius: 8px 8px 0 0;
                position: sticky;
                top: 0;
            }
            #debug-panel .dbg-head h4 {
                font-family: "Playfair Display", serif;
                margin: 0;
                font-size: 14px;
                font-weight: 600;
                color: var(--navy-700);
                letter-spacing: 0.2px;
            }
            #debug-panel .dbg-close {
                cursor: pointer;
                color: var(--ink-soft);
                border: none;
                background: transparent;
                padding: 4px;
                border-radius: 4px;
                line-height: 0;
            }
            #debug-panel .dbg-close:hover {
                background: var(--border-soft);
                color: var(--ink);
            }
            #debug-panel .dbg-section {
                padding: 10px 14px;
                border-bottom: 1px solid var(--border-soft);
            }
            #debug-panel .dbg-section:last-child {
                border-bottom: none;
            }
            #debug-panel .dbg-section h5 {
                margin: 0 0 8px 0;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            #debug-panel .dbg-kv {
                display: grid;
                grid-template-columns: 112px 1fr;
                gap: 4px 10px;
                align-items: baseline;
            }
            #debug-panel .dbg-kv .k {
                color: var(--ink-soft);
                font-size: 11px;
            }
            #debug-panel .dbg-kv .v {
                color: var(--ink);
                font-variant-numeric: tabular-nums;
                overflow-wrap: anywhere;
            }
            #debug-panel .dbg-mono,
            #debug-panel .dbg-kv .v.mono {
                font-family: ui-monospace, "SF Mono", Consolas, monospace;
                font-size: 11px;
            }
            #debug-panel .dbg-pill {
                display: inline-block;
                padding: 1px 7px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                line-height: 1.6;
            }
            #debug-panel .dbg-pill.ok {
                background: var(--sprig-100);
                color: var(--sprig-700);
            }
            #debug-panel .dbg-pill.warn {
                background: var(--gold-50);
                color: var(--gold);
            }
            #debug-panel .dbg-pill.err {
                background: var(--red-50);
                color: var(--red);
            }
            #debug-panel .dbg-pill.idle {
                background: var(--border-soft);
                color: var(--ink-soft);
            }
            #debug-panel .dbg-files {
                margin-top: 6px;
                display: flex;
                flex-direction: column;
                gap: 6px;
                max-height: 200px;
                overflow: auto;
            }
            #debug-panel .dbg-file {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 2px 8px;
                font-size: 11px;
            }
            #debug-panel .dbg-file .name {
                font-family: ui-monospace, "SF Mono", Consolas, monospace;
                color: var(--ink-soft);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            #debug-panel .dbg-file .pct {
                font-variant-numeric: tabular-nums;
                color: var(--ink);
            }
            #debug-panel .dbg-file .bar {
                grid-column: 1 / -1;
                height: 3px;
                background: var(--border-soft);
                border-radius: 2px;
                overflow: hidden;
            }
            #debug-panel .dbg-file .bar > span {
                display: block;
                height: 100%;
                background: var(--sky-500);
                transition: transform 120ms ease-out;
                transform-origin: left center;
                width: 100%;
            }
            #debug-panel .dbg-empty {
                color: var(--ink-fade);
                font-style: italic;
                font-size: 11px;
            }
            @keyframes pulse-dot {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.3;
                }
            }

            .editor {
                position: relative;
                font-family: "Lato", sans-serif;
                font-size: 13.5px;
                line-height: 1.6;
                color: var(--ink);
            }
            .editor textarea,
            .editor .mirror {
                font: inherit;
                line-height: inherit;
                padding: 16px 20px;
                margin: 0;
                border: none;
                border-radius: 0;
                width: 100%;
                min-height: 380px;
                white-space: pre-wrap;
                word-wrap: break-word;
                overflow-wrap: break-word;
                box-sizing: border-box;
                overflow: hidden;
            }
            .editor textarea {
                position: relative;
                background: transparent;
                color: var(--ink);
                caret-color: var(--sky-600);
                resize: vertical;
                outline: none;
                z-index: 2;
            }
            .editor textarea:focus {
                box-shadow: inset 0 0 0 2px var(--sky-500);
            }
            .editor .mirror {
                position: absolute;
                top: 0;
                left: 0;
                color: transparent;
                pointer-events: none;
                z-index: 1;
            }
            .editor .mirror .ghost {
                color: var(--sprig-700);
                opacity: 0.82;
                background: var(--sprig-50);
                border-radius: 2px;
                padding: 0 2px;
                margin: 0 -2px;
                border-bottom: 1px dotted var(--sprig-500);
            }
            /* Audit-flag underline painted on the mirror beneath the transparent text.
     The visible glyphs are drawn by the textarea above; only the wavy line
     is visible here. */
            .editor .mirror .audit-flag {
                text-decoration: underline wavy var(--red);
                text-decoration-thickness: 1.5px;
                text-underline-offset: 3px;
                text-decoration-skip-ink: none;
            }
            .editor .mirror .audit-flag.sev-warn {
                text-decoration-color: var(--gold);
            }
            /* Placeholders look like little fillable slots — gold pill with dashed
       border, no wavy underline. Clicking them in the textarea selects the
       whole token; Tab / Shift+Tab cycles between them. */
            .editor .mirror .audit-flag[data-rule-id="placeholder"] {
                background: var(--gold-50);
                box-shadow: inset 0 0 0 1px var(--gold);
                border-radius: 4px;
                text-decoration: none;
            }

            /* Audit chip in the editor footer */
            .audit-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 2px 9px;
                border-radius: 999px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.2px;
                cursor: pointer;
                user-select: none;
                border: 1px solid transparent;
                transition: background 120ms ease-out;
            }
            .audit-chip.clean {
                background: var(--sprig-50);
                color: var(--sprig-700);
                border-color: var(--sprig-100);
            }
            .audit-chip.flagged {
                background: var(--red-50);
                color: var(--red);
                border-color: #f2c4c2;
            }
            .audit-chip:hover {
                filter: brightness(0.97);
            }
            .audit-chip svg {
                flex-shrink: 0;
            }
            .audit-chip.active {
                box-shadow: 0 0 0 2px rgba(201, 48, 44, 0.18);
            }

            /* Audit popover */
            #audit-popover {
                position: fixed;
                right: 20px;
                bottom: 80px;
                width: 420px;
                max-height: 60vh;
                overflow: hidden;
                background: var(--panel);
                border: 1px solid var(--border-strong);
                border-radius: 10px;
                box-shadow: 0 16px 42px rgba(13, 51, 87, 0.22);
                z-index: 900;
                display: none;
                flex-direction: column;
            }
            #audit-popover.show {
                display: flex;
            }
            #audit-popover .ap-head {
                padding: 12px 14px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel-tint);
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 10px 10px 0 0;
            }
            #audit-popover .ap-head h4 {
                font-family: "Playfair Display", serif;
                margin: 0;
                font-size: 14px;
                font-weight: 600;
                color: var(--navy-700);
            }
            #audit-popover .ap-head .ap-sub {
                font-size: 11px;
                color: var(--ink-fade);
                font-weight: 400;
                display: block;
                margin-top: 2px;
                letter-spacing: 0.1px;
            }
            #audit-popover .ap-close {
                cursor: pointer;
                color: var(--ink-soft);
                border: none;
                background: transparent;
                padding: 4px;
                border-radius: 4px;
                line-height: 0;
            }
            #audit-popover .ap-close:hover {
                background: var(--border-soft);
                color: var(--ink);
            }
            #audit-popover .ap-body {
                padding: 6px 0;
                overflow-y: auto;
                overflow-x: hidden;
            }
            #audit-popover .ap-empty {
                padding: 24px 16px;
                text-align: center;
                color: var(--sprig-700);
                font-size: 12.5px;
                font-weight: 500;
            }
            #audit-popover .ap-empty strong {
                display: block;
                margin-bottom: 2px;
                color: var(--sprig-700);
            }
            #audit-popover .ap-empty .sub {
                font-weight: 400;
                color: var(--ink-fade);
                font-size: 11.5px;
            }
            .audit-item {
                padding: 10px 14px;
                border-bottom: 1px solid var(--border-soft);
                font-size: 12px;
                cursor: pointer;
            }
            .audit-item:last-child {
                border-bottom: none;
            }
            .audit-item:hover {
                background: var(--sky-50);
            }
            .audit-item.active {
                background: var(--red-50);
                box-shadow: inset 3px 0 0 var(--red);
            }
            .audit-item .ai-head {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 4px;
            }
            .audit-item .ai-sev {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--red);
                flex-shrink: 0;
            }
            .audit-item .ai-sev.warn {
                background: var(--gold);
            }
            .audit-item .ai-rule {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                color: var(--red);
            }
            .audit-item .ai-rule.warn {
                color: var(--gold);
            }
            .audit-item .ai-excerpt {
                font-family: "Lato", sans-serif;
                font-size: 12px;
                line-height: 1.5;
                color: var(--ink);
                margin-bottom: 4px;
                background: #fff5f4;
                padding: 4px 8px;
                border-radius: 4px;
                border-left: 2px solid var(--red);
            }
            .audit-item.active .ai-excerpt {
                background: #fce7e5;
            }
            .audit-item .ai-excerpt .hit {
                font-weight: 700;
                color: var(--red);
                text-decoration: underline wavy var(--red);
                text-decoration-thickness: 1.2px;
                text-underline-offset: 2px;
            }
            .audit-item .ai-reason {
                color: var(--ink-soft);
                font-size: 11.5px;
                line-height: 1.45;
                margin-bottom: 6px;
            }
            .audit-item .ai-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }
            .audit-item .ai-btn {
                font: inherit;
                font-size: 11px;
                font-weight: 600;
                padding: 4px 10px;
                border-radius: 999px;
                border: 1px solid var(--sky-100);
                background: var(--sky-50);
                color: var(--sky-600);
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            .audit-item .ai-btn:hover {
                background: #d9ebf7;
                border-color: var(--sky-500);
            }
            .audit-item .ai-btn.dismiss {
                background: transparent;
                color: var(--ink-fade);
                border-color: var(--border);
            }
            .audit-item .ai-btn.dismiss:hover {
                color: var(--ink);
                border-color: var(--ink-fade);
                background: transparent;
            }

            .editor-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 14px;
                border-top: 1px solid var(--border-soft);
                font-size: 11.5px;
                color: var(--ink-fade);
                background: var(--panel-tint);
            }
            .editor-footer kbd {
                font-family: "Lato", sans-serif;
                font-size: 10.5px;
                font-weight: 700;
                background: #fff;
                border: 1px solid var(--border);
                border-bottom-width: 2px;
                border-radius: 2px;
                padding: 0 5px;
                color: var(--ink);
                margin: 0 2px;
            }
            .editor-footer .engine {
                font-weight: 700;
                color: var(--sprig-700);
            }
            .editor-footer .engine.fallback {
                color: var(--ink-soft);
            }

            .banner {
                margin: 10px 14px;
                padding: 8px 12px;
                background: var(--gold-50);
                border-left: 3px solid var(--gold);
                font-size: 12px;
                color: var(--ink-soft);
                display: none;
                border-radius: 2px;
            }
            .banner.show {
                display: block;
            }
            .banner strong {
                color: var(--ink);
            }

            /* ======================================================================
     Right sidebar panels
     ====================================================================== */
            .side-stack {
                display: flex;
                flex-direction: column;
                gap: 12px;
                position: sticky;
                top: 100px;
                max-height: calc(100vh - 120px);
                overflow-y: auto;
            }

            .client-summary {
                display: flex;
                gap: 12px;
                padding: 14px 16px;
            }
            .client-photo {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: linear-gradient(
                    135deg,
                    var(--sky-400),
                    var(--navy-700)
                );
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: "Playfair Display", Georgia, serif;
                font-weight: 600;
                font-size: 19px;
                flex-shrink: 0;
                border: 2px solid var(--sprig-100);
            }
            .client-info {
                flex: 1;
                min-width: 0;
            }
            .client-info .name {
                font-family: "Playfair Display", Georgia, serif;
                font-size: 17px;
                font-weight: 600;
                color: var(--navy-900);
                line-height: 1.05;
                letter-spacing: -0.005em;
            }
            .client-info .line2 {
                font-size: 11.5px;
                color: var(--ink-soft);
                margin-top: 2px;
            }
            .client-info .mrn {
                display: inline-block;
                margin-top: 5px;
                font-size: 11px;
                color: var(--sky-600);
                font-weight: 700;
                cursor: pointer;
            }
            .client-info .mrn:hover {
                text-decoration: underline;
            }

            .kv-list {
                display: flex;
                flex-direction: column;
            }
            .kv-list .kv {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                padding: 6px 0;
                border-bottom: 1px solid var(--border-soft);
                font-size: 12px;
            }
            .kv-list .kv:last-child {
                border-bottom: none;
            }
            .kv-list .k {
                color: var(--ink-soft);
            }
            .kv-list .v {
                color: var(--ink);
                font-weight: 700;
                text-align: right;
            }

            /* ======================================================================
     LEARNING TREE (CentralReach-style goal hierarchy)
     LTG (long-term goal) → STG (short-term goal) → Target
     ====================================================================== */
            .ltree {
                font-size: 12px;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .ltree-ltg {
                border-top: 1px solid var(--border-soft);
                padding-top: 8px;
            }
            .ltree-ltg:first-child {
                border-top: none;
                padding-top: 0;
            }
            .ltree-ltg-head {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 700;
                color: var(--navy-700);
                font-size: 12.5px;
                letter-spacing: 0.1px;
            }
            .ltree-ltg-head .lt-title {
                flex: 1;
                min-width: 0;
                overflow-wrap: anywhere;
            }
            .ltree-aggregate {
                font-weight: 400;
                color: var(--ink-fade);
                font-size: 10.5px;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                white-space: nowrap;
            }
            .ltree-status-dot {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .ltree-status-dot.acq {
                background: var(--sky-500);
                box-shadow: 0 0 0 2px var(--sky-100);
            }
            .ltree-status-dot.bl {
                background: var(--ink-xfade);
            }
            .ltree-status-dot.maint {
                background: var(--sprig-500);
            }
            .ltree-status-dot.mast {
                background: var(--sprig-600);
            }
            .ltree-status-dot.hold {
                background: var(--gold);
            }

            .ltree-stg {
                margin-top: 6px;
                padding-left: 10px;
                border-left: 2px solid var(--border-soft);
            }
            .ltree-stg + .ltree-stg {
                margin-top: 8px;
            }
            .ltree-stg-head {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
                color: var(--ink);
                font-size: 11.5px;
                padding-bottom: 2px;
            }
            .ltree-stg-head .lt-title {
                flex: 1;
                min-width: 0;
                overflow-wrap: anywhere;
            }

            .ltree-targets {
                display: flex;
                flex-direction: column;
                margin-top: 4px;
            }
            .ltree-target {
                display: grid;
                grid-template-columns: 1fr auto auto;
                gap: 2px 10px;
                padding: 6px 8px;
                border-radius: 5px;
                align-items: center;
                border: 1px solid transparent;
            }
            .ltree-target + .ltree-target {
                margin-top: 3px;
            }
            .ltree-target:hover {
                background: var(--sky-50);
            }
            .ltree-target.active {
                background: var(--sprig-50);
                border-color: var(--sprig-100);
                box-shadow: inset 2px 0 0 var(--sprig-500);
            }
            .ltree-target .t-name {
                font-weight: 500;
                color: var(--ink);
            }
            .ltree-target .t-sub {
                font-size: 10.5px;
                color: var(--ink-fade);
                font-weight: 400;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px;
            }
            .ltree-target .t-data {
                font-variant-numeric: tabular-nums;
                font-weight: 700;
                text-align: right;
                white-space: nowrap;
                color: var(--ink);
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }
            .ltree-target .tally-ctrls {
                display: inline-flex;
                gap: 3px;
            }
            .ltree-target .tally-btn {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid var(--border);
                background: var(--panel);
                color: var(--ink-soft);
                font-size: 13px;
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .ltree-target .tally-btn:hover {
                background: var(--sprig-50);
                border-color: var(--sprig-500);
                color: var(--sprig-700);
            }
            .ltree-target .tally-btn:active {
                background: var(--sprig-100);
            }
            .ltree-target .t-progress {
                grid-column: 1 / -1;
                height: 3px;
                background: var(--border-soft);
                border-radius: 2px;
                overflow: hidden;
                margin-top: 5px;
            }
            .ltree-target .t-progress > span {
                display: block;
                height: 100%;
                background: var(--sprig-500);
                transition: transform 220ms ease-out;
                transform-origin: left center;
                width: 100%;
            }
            .ltree-target .t-progress > span.warn {
                background: var(--gold);
            }
            .ltree-target .t-progress > span.met {
                background: var(--sprig-600);
            }
            .ltree-target .t-progress > span.mute {
                background: var(--ink-xfade);
            }

            /* Phase pill — CR's signature status language */
            .phase {
                display: inline-block;
                padding: 1px 7px;
                border-radius: 999px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                line-height: 1.6;
                white-space: nowrap;
            }
            .phase.baseline {
                background: var(--border-soft);
                color: var(--ink-soft);
            }
            .phase.acquisition {
                background: var(--sky-100);
                color: var(--sky-600);
            }
            .phase.generalization {
                background: #efe6f7;
                color: #6b3fa0;
            }
            .phase.maintenance {
                background: var(--sprig-100);
                color: var(--sprig-700);
            }
            .phase.mastered {
                background: var(--sprig-600);
                color: #fff;
            }
            .phase.hold {
                background: var(--gold-50);
                color: var(--gold);
            }

            /* Data-collection-type chip */
            .dtype {
                display: inline-block;
                padding: 1px 5px;
                font-size: 10px;
                color: var(--ink-soft);
                background: var(--panel-tint);
                border: 1px solid var(--border-soft);
                border-radius: 3px;
                font-family: ui-monospace, "SF Mono", Consolas, monospace;
                letter-spacing: 0.1px;
                white-space: nowrap;
            }

            /* Mastery criterion text under targets */
            .criterion {
                grid-column: 1 / -1;
                margin-top: 3px;
                font-size: 10.5px;
                color: var(--ink-fade);
                display: flex;
                justify-content: space-between;
                gap: 8px;
            }
            .criterion .met-tag {
                color: var(--sprig-700);
                font-weight: 600;
            }
            .criterion .near-tag {
                color: var(--gold);
                font-weight: 600;
            }

            /* ======================================================================
     SESSION EVENTS CARD — visible companion to TODAY_EVENTS data
     ====================================================================== */
            .events-group {
                padding: 8px 0 4px;
            }
            .events-group + .events-group {
                border-top: 1px solid var(--border-soft);
            }
            .events-group > h6 {
                margin: 0 14px 4px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.6px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .event-row {
                display: grid;
                grid-template-columns: 46px 1fr;
                gap: 2px 8px;
                padding: 6px 14px;
                font-size: 12px;
            }
            .event-row:hover {
                background: var(--sky-50);
                cursor: pointer;
            }
            .event-row .ev-t {
                color: var(--ink-fade);
                font-size: 11px;
                font-variant-numeric: tabular-nums;
                font-weight: 700;
                align-self: start;
                padding-top: 1px;
            }
            .event-row .ev-body .ev-head {
                display: flex;
                align-items: center;
                gap: 5px;
                margin-bottom: 2px;
            }
            .event-row .ev-body .ev-what {
                font-weight: 600;
                color: var(--ink);
            }
            .event-row .ev-body .ev-chip {
                font-size: 10px;
                font-weight: 700;
                padding: 1px 6px;
                border-radius: 999px;
                letter-spacing: 0.2px;
                text-transform: uppercase;
            }
            .event-row .ev-body .ev-chip.mild {
                background: var(--gold-50);
                color: var(--gold);
            }
            .event-row .ev-body .ev-chip.mod {
                background: #fdeceb;
                color: var(--red);
            }
            .event-row .ev-body .ev-chip.sev {
                background: var(--red-50);
                color: var(--red);
            }
            .event-row .ev-body .ev-chip.neutral {
                background: var(--panel-tint);
                color: var(--ink-soft);
                border: 1px solid var(--border-soft);
            }
            .event-row .ev-body .ev-desc {
                color: var(--ink-soft);
                font-size: 11.5px;
                line-height: 1.45;
            }
            .events-quote {
                margin: 4px 14px 6px;
                font-family: "Playfair Display", Georgia, serif;
                font-style: italic;
                font-size: 12.5px;
                color: var(--navy-800);
                padding-left: 10px;
                border-left: 3px solid var(--sprig-500);
                line-height: 1.45;
            }
            .events-attr {
                margin: 0 14px 8px;
                font-size: 10.5px;
                color: var(--ink-fade);
            }
            .events-parent {
                margin: 2px 14px 8px;
                font-size: 11.5px;
                color: var(--ink-soft);
                line-height: 1.5;
            }

            /* ======================================================================
     NOTE COMPLETENESS — three concentric rings + tier pill
     ====================================================================== */
            .tier-pill {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 3px 10px;
                border-radius: 999px;
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                font-variant-numeric: tabular-nums;
                transition:
                    background 240ms ease,
                    color 240ms ease,
                    box-shadow 240ms ease;
            }
            .tier-pill::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: currentColor;
                opacity: 0.75;
            }
            .tier-pill.tier-drafting {
                background: var(--border-soft);
                color: var(--ink-fade);
            }
            .tier-pill.tier-bronze {
                background: linear-gradient(135deg, #f4dcc1, #d39966);
                color: #6f3f15;
                box-shadow: inset 0 0 0 1px rgba(111, 63, 21, 0.18);
            }
            .tier-pill.tier-silver {
                background: linear-gradient(135deg, #f1f1f4, #c9ced6);
                color: #444c56;
                box-shadow: inset 0 0 0 1px rgba(68, 76, 86, 0.2);
            }
            .tier-pill.tier-gold {
                background: linear-gradient(135deg, #fbe9b8, #e5a30a);
                color: #5e4204;
                box-shadow: inset 0 0 0 1px rgba(94, 66, 4, 0.22);
            }

            .completeness-wrap {
                position: relative;
                padding: 8px 14px 14px;
            }
            .rings-stage {
                display: flex;
                justify-content: center;
                padding: 4px 0 2px;
            }
            .rings-svg {
                width: 132px;
                height: 132px;
                overflow: visible;
            }
            .rings-svg .ring-track {
                fill: none;
                stroke: var(--border-soft);
                stroke-width: 7;
            }
            .rings-svg .ring-fill {
                fill: none;
                stroke-width: 7;
                stroke-linecap: round;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
                transform-box: fill-box;
                transition: stroke-dashoffset 280ms
                    cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .rings-svg .ring-group {
                cursor: pointer;
            }
            .rings-svg .ring-group:focus {
                outline: none;
            }
            .rings-svg .ring-group:hover .ring-fill,
            .rings-svg .ring-group:focus-visible .ring-fill {
                stroke-width: 9;
            }
            .rings-svg .ring-group.pulse .ring-fill {
                animation: ringPulse 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .rings-svg.gold-breath .ring-fill {
                animation: ringBreath 4s ease-in-out infinite;
            }
            @keyframes ringPulse {
                0% {
                    stroke-width: 7;
                }
                45% {
                    stroke-width: 11;
                }
                100% {
                    stroke-width: 7;
                }
            }
            @keyframes ringBreath {
                0%,
                100% {
                    opacity: 0.85;
                }
                50% {
                    opacity: 1;
                }
            }

            .rings-legend {
                display: flex;
                flex-direction: column;
                gap: 2px;
                padding: 10px 2px 0;
            }
            .legend-row {
                display: grid;
                grid-template-columns: 10px 1fr auto;
                align-items: center;
                gap: 8px;
                padding: 5px 8px;
                font-size: 12px;
                color: var(--ink-soft);
                border-radius: 6px;
                cursor: pointer;
                transition: background 160ms ease;
            }
            .legend-row:hover,
            .legend-row:focus-visible {
                background: var(--sky-50);
                outline: none;
            }
            .legend-row .legend-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
            .legend-row .legend-count {
                font-variant-numeric: tabular-nums;
                font-weight: 600;
                color: var(--ink);
                font-size: 11.5px;
            }
            .legend-row.complete .legend-count {
                color: var(--sprig-700);
            }
            .completeness-hint {
                margin-top: 8px;
                font-size: 11px;
                color: var(--ink-fade);
                text-align: center;
            }

            #ring-popover {
                position: absolute;
                top: 8px;
                right: 10px;
                width: 232px;
                background: var(--panel);
                border: 1px solid var(--border-strong);
                border-radius: 10px;
                box-shadow: var(--shadow-pop);
                z-index: 50;
                display: none;
                overflow: hidden;
            }
            #ring-popover.show {
                display: block;
            }
            #ring-popover .rp-head {
                padding: 9px 12px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel-tint);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }
            #ring-popover .rp-title {
                font-family: "Playfair Display", serif;
                font-size: 13px;
                color: var(--navy-700);
                display: flex;
                align-items: center;
                gap: 7px;
            }
            #ring-popover .rp-title-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
            #ring-popover .rp-count {
                font-size: 11px;
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
                font-weight: 600;
            }
            #ring-popover .rp-body {
                padding: 4px 0 6px;
            }
            .rp-item {
                display: grid;
                grid-template-columns: 16px 1fr;
                gap: 9px;
                padding: 5px 12px;
                font-size: 12px;
                align-items: center;
            }
            .rp-item .rp-check {
                width: 14px;
                height: 14px;
                border-radius: 50%;
                position: relative;
            }
            .rp-item.pass .rp-check {
                background: var(--sprig-500);
            }
            .rp-item.pass .rp-check::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 4px;
                width: 4px;
                height: 7px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }
            .rp-item.miss .rp-check {
                background: transparent;
                border: 1.5px solid var(--ink-xfade);
            }
            .rp-item.pass .rp-label {
                color: var(--ink);
            }
            .rp-item.miss .rp-label {
                color: var(--ink-soft);
            }
            /* ======================================================================
     Bottom action bar
     ====================================================================== */
            .actionbar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: #fff;
                border-top: 1px solid var(--border);
                padding: 11px 26px;
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 30;
                box-shadow: 0 -2px 8px rgba(13, 51, 87, 0.06);
            }
            .actionbar .save-state {
                font-size: 11.5px;
                color: var(--ink-fade);
                display: flex;
                align-items: center;
                gap: 6px;
                font-weight: 600;
            }
            .actionbar .save-state::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--sprig-500);
            }
            .actionbar .spacer {
                flex: 1;
            }
            .btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 8px 16px;
                font-size: 13px;
                font-weight: 700;
                border-radius: 7px;
                border: 1px solid var(--border-strong);
                background: #fff;
                color: var(--ink);
                cursor: pointer;
                font-family: inherit;
                transition:
                    background 160ms ease,
                    border-color 160ms ease,
                    color 160ms ease,
                    transform 80ms ease,
                    box-shadow 160ms ease;
            }
            .btn:hover {
                background: var(--panel-tint);
            }
            .btn:active:not([disabled]):not(.is-blocked) {
                transform: scale(0.98);
            }
            .btn:focus-visible {
                outline: 2px solid var(--sky-500);
                outline-offset: 2px;
            }
            .btn.primary {
                background: var(--sky-600);
                color: #fff;
                border-color: var(--sky-600);
                box-shadow: 0 1px 0 rgba(13, 51, 87, 0.08);
                transition:
                    background 160ms ease,
                    border-color 160ms ease,
                    color 160ms ease,
                    box-shadow 160ms ease;
            }
            .btn.primary:hover {
                background: var(--navy-700);
                border-color: var(--navy-700);
            }
            .btn[disabled],
            .btn.is-blocked {
                cursor: not-allowed;
                box-shadow: none;
            }
            .btn.primary[disabled],
            .btn.primary.is-blocked,
            .btn.primary[disabled]:hover,
            .btn.primary.is-blocked:hover {
                background: var(--border-soft);
                border-color: var(--border);
                color: var(--ink-fade);
            }
            .btn.ghost {
                border-color: transparent;
                color: var(--sky-600);
            }
            .btn.ghost:hover {
                background: var(--sky-50);
            }

            /* ======================================================================
     SESSION DETAILS — top card mirroring the real-note encounter header
     ====================================================================== */
            .session-details {
                margin-bottom: 14px;
            }
            .sd-identity {
                display: grid;
                grid-template-columns: 56px 1fr auto;
                gap: 16px;
                align-items: center;
                padding: 18px 20px 16px;
                border-bottom: 1px solid var(--border-soft);
            }
            .sd-avatar {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: linear-gradient(
                    135deg,
                    var(--navy-600),
                    var(--sky-500)
                );
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: "Playfair Display", serif;
                font-weight: 600;
                font-size: 22px;
                letter-spacing: 0.5px;
                box-shadow: 0 1px 2px rgba(13, 51, 87, 0.2);
            }
            .sd-id {
                min-width: 0;
            }
            .sd-name {
                font-family: "Playfair Display", serif;
                font-size: 22px;
                font-weight: 600;
                color: var(--navy-700);
                margin: 0 0 4px;
                letter-spacing: -0.1px;
            }
            .sd-id-meta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                font-size: 12.5px;
                color: var(--ink-soft);
                font-variant-numeric: tabular-nums;
            }
            .sd-id-meta .sep-dot {
                width: 3px;
                height: 3px;
                background: var(--ink-xfade);
                border-radius: 50%;
            }
            .sd-dx-stack {
                display: flex;
                flex-direction: column;
                gap: 4px;
                align-items: flex-end;
            }
            .dx-chip {
                display: inline-flex;
                align-items: baseline;
                gap: 6px;
                padding: 3px 10px;
                font-size: 11.5px;
                color: var(--navy-700);
                background: var(--sky-50);
                border: 1px solid var(--sky-100);
                border-radius: 999px;
                font-variant-numeric: tabular-nums;
            }
            .dx-chip strong {
                font-weight: 700;
                letter-spacing: 0.4px;
            }

            .sd-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0;
                padding: 14px 0;
                border-bottom: 1px solid var(--border-soft);
            }
            .sd-cell {
                padding: 8px 20px;
                border-right: 1px solid var(--border-soft);
                min-width: 0;
            }
            .sd-cell:nth-child(3n) {
                border-right: none;
            }
            .sd-cell:nth-child(n + 4) {
                padding-top: 14px;
                border-top: 1px solid var(--border-soft);
            }
            .sd-label {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.7px;
                text-transform: uppercase;
                color: var(--ink-fade);
                margin-bottom: 4px;
            }
            .sd-value {
                font-size: 13.5px;
                color: var(--ink);
                font-weight: 500;
                font-variant-numeric: tabular-nums;
                line-height: 1.35;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            .sd-value .sd-sub {
                font-size: 11.5px;
                font-weight: 400;
                color: var(--ink-soft);
                font-variant-numeric: normal;
            }

            .sd-presence {
                padding: 12px 20px 16px;
                display: grid;
                grid-template-columns: 160px 1fr;
                gap: 4px 18px;
                align-items: baseline;
            }
            .sd-presence .sd-label {
                margin-bottom: 0;
                padding: 7px 0;
            }
            .sd-presence-row {
                display: contents;
            }
            .sd-presence-val {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px 10px;
                padding: 5px 0;
                font-size: 13px;
                color: var(--ink);
                border-bottom: 1px dashed var(--border-soft);
            }
            .sd-presence-row:last-child .sd-presence-val {
                border-bottom: none;
            }
            .sd-name-line {
                font-weight: 600;
            }
            .sd-presence .sd-sub {
                font-size: 11.5px;
                color: var(--ink-fade);
            }
            .presence-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 2px 9px;
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                border-radius: 999px;
                border: 1px solid transparent;
            }
            .presence-chip::before {
                content: "";
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: currentColor;
                opacity: 0.85;
            }
            .presence-chip.absent {
                background: #f4f1ea;
                color: var(--ink-fade);
                border-color: var(--border-soft);
            }
            .presence-chip.present {
                background: var(--sprig-50);
                color: var(--sprig-700);
                border-color: var(--sprig-100);
            }
            .presence-chip.participated {
                background: var(--sky-50);
                color: var(--navy-700);
                border-color: var(--sky-100);
            }

            @media (max-width: 900px) {
                .sd-identity {
                    grid-template-columns: 56px 1fr;
                }
                .sd-dx-stack {
                    grid-column: 1 / -1;
                    align-items: flex-start;
                }
                .sd-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
                .sd-cell:nth-child(3n) {
                    border-right: 1px solid var(--border-soft);
                }
                .sd-cell:nth-child(2n) {
                    border-right: none;
                }
                .sd-presence {
                    grid-template-columns: 1fr;
                }
            }

            /* ======================================================================
     INTERVENTIONS — checkbox grid (4×5) mirroring real-note structure
     ====================================================================== */
            .interventions {
                margin-bottom: 14px;
            }
            .iv-counter {
                font-size: 11px;
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
                font-weight: 600;
                letter-spacing: 0.3px;
            }
            .iv-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0;
            }
            .iv-cell {
                display: flex;
                align-items: flex-start;
                gap: 9px;
                padding: 12px 14px;
                cursor: pointer;
                border-right: 1px solid var(--border-soft);
                border-bottom: 1px solid var(--border-soft);
                transition: background 140ms ease;
                user-select: none;
                min-height: 52px;
            }
            .iv-cell:nth-child(4n) {
                border-right: none;
            }
            .iv-cell:nth-last-child(-n + 4) {
                border-bottom: none;
            }
            .iv-cell:hover {
                background: var(--sky-50);
            }
            .iv-cell:focus-visible {
                outline: 2px solid var(--sky-400);
                outline-offset: -2px;
                background: var(--sky-50);
            }
            .iv-box {
                width: 16px;
                height: 16px;
                border-radius: 4px;
                border: 1.5px solid var(--ink-xfade);
                background: var(--panel);
                position: relative;
                flex-shrink: 0;
                margin-top: 1px;
                transition:
                    background 140ms ease,
                    border-color 140ms ease;
            }
            .iv-cell.checked .iv-box {
                background: var(--sprig-500);
                border-color: var(--sprig-600);
            }
            .iv-cell.checked .iv-box::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 4px;
                width: 5px;
                height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }
            .iv-label {
                font-size: 12.5px;
                line-height: 1.35;
                color: var(--ink-soft);
            }
            .iv-cell.checked .iv-label {
                color: var(--ink);
                font-weight: 500;
            }

            @media (max-width: 900px) {
                .iv-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
                .iv-cell:nth-child(4n) {
                    border-right: 1px solid var(--border-soft);
                }
                .iv-cell:nth-child(2n) {
                    border-right: none;
                }
                .iv-cell:nth-last-child(-n + 4) {
                    border-bottom: 1px solid var(--border-soft);
                }
                .iv-cell:nth-last-child(-n + 2) {
                    border-bottom: none;
                }
            }

            /* ======================================================================
     ADDITIONAL INFO FOR BCBA — small textarea below interventions
     ====================================================================== */
            .addl-card {
                margin-bottom: 14px;
            }
            .head-btn.ghost {
                color: var(--ink-fade);
            }
            .addl-body {
                padding: 0 !important;
            }
            .addl-input {
                display: block;
                width: 100%;
                min-height: 64px;
                resize: vertical;
                border: none;
                border-radius: 0 0 10px 10px;
                background: var(--panel);
                padding: 14px 18px;
                font-family: inherit;
                font-size: 13px;
                line-height: 1.55;
                color: var(--ink);
                outline: none;
            }
            .addl-input::placeholder {
                color: var(--ink-xfade);
                font-style: italic;
            }
            .addl-input:focus {
                background: var(--sky-50);
            }

            /* ======================================================================
     DISCLOSURE — small print boilerplate that mirrors the real-note template
     ====================================================================== */
            .disclosure {
                font-size: 11.5px;
                line-height: 1.5;
                color: var(--ink-fade);
                padding: 10px 18px 14px;
                font-style: italic;
            }
            .disclosure + .disclosure {
                padding-top: 0;
            }

            /* ======================================================================
     PROGRAMS TABLE — Tufte-y table mirroring the real-note "PULL SESSION DATA"
     ====================================================================== */
            .programs-card {
                margin-bottom: 14px;
            }
            .programs-card .card-body {
                padding: 0;
            }
            .programs-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12.5px;
                color: var(--ink);
            }
            .programs-table thead th {
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.7px;
                color: var(--ink-fade);
                text-align: left;
                padding: 10px 12px;
                background: var(--panel-tint);
                border-bottom: 1px solid var(--border-soft);
                white-space: nowrap;
            }
            .programs-table thead th.num,
            .programs-table tbody td.num {
                text-align: right;
                font-variant-numeric: tabular-nums;
                white-space: nowrap;
            }
            .programs-table tbody td {
                padding: 9px 12px;
                border-bottom: 1px solid var(--border-soft);
                vertical-align: top;
                line-height: 1.4;
            }
            .programs-table tbody tr:last-child td {
                border-bottom: none;
            }
            .programs-table tbody tr:hover td {
                background: var(--sky-50);
            }
            .programs-table .branch-name {
                color: var(--ink);
                font-weight: 500;
            }
            .programs-table .branch-sub {
                display: block;
                color: var(--ink-fade);
                font-size: 11px;
                font-style: italic;
                margin-top: 1px;
            }
            .phase-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 2px 9px;
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 0.3px;
                text-transform: uppercase;
                border-radius: 999px;
                border: 1px solid transparent;
                white-space: nowrap;
            }
            .phase-chip::before {
                content: "";
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: currentColor;
                opacity: 0.85;
            }
            .phase-chip.acq {
                background: var(--sky-50);
                color: var(--navy-700);
                border-color: var(--sky-100);
            }
            .phase-chip.bl {
                background: #f4f1ea;
                color: var(--ink-soft);
                border-color: var(--border-soft);
            }
            .phase-chip.maint {
                background: var(--sprig-50);
                color: var(--sprig-700);
                border-color: var(--sprig-100);
            }
            .phase-chip.gen {
                background: #fbf0d2;
                color: #806008;
                border-color: #f0deac;
            }
            .phase-chip.hold {
                background: #f4f1ea;
                color: var(--ink-fade);
                border-color: var(--border-soft);
            }
            .data-point .num {
                font-weight: 600;
                color: var(--ink);
                font-variant-numeric: tabular-nums;
            }
            .data-point .frac {
                color: var(--ink-fade);
                font-size: 11px;
                margin-left: 4px;
                font-variant-numeric: tabular-nums;
            }

            @media (max-width: 900px) {
                .programs-table {
                    display: block;
                    overflow-x: auto;
                }
            }

            /* ======================================================================
     DATA-ADDED ATTESTATION — the "by checking this box…" row
     ====================================================================== */
            .data-attest {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: 12px 18px;
                background: var(--cream);
                border: 1px solid var(--border-soft);
                border-radius: 10px;
                margin-bottom: 14px;
                cursor: pointer;
                user-select: none;
                transition:
                    background 140ms ease,
                    border-color 140ms ease;
            }
            .data-attest:hover {
                background: var(--sky-50);
            }
            .data-attest .iv-box {
                margin-top: 2px;
            }
            .data-attest.checked .iv-box {
                background: var(--sprig-500);
                border-color: var(--sprig-600);
            }
            .data-attest.checked .iv-box::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 4px;
                width: 5px;
                height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }
            .data-attest .data-attest-text {
                font-size: 12.5px;
                line-height: 1.45;
                color: var(--ink-soft);
            }
            .data-attest.checked .data-attest-text {
                color: var(--ink);
            }

            /* ======================================================================
     SIGN & SUBMIT panel — consolidates attestation, signature, status, actions
     ====================================================================== */
            .sign-submit {
                margin-bottom: 32px;
            }
            .sign-submit .card-head h3 {
                font-size: 16px;
            }
            .sign-submit .ss-tier {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 3px 10px;
                border-radius: 999px;
                font-size: 10.5px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                background: var(--border-soft);
                color: var(--ink-fade);
            }
            .ss-body {
                padding: 18px 22px 16px !important;
            }
            .signature-box {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                position: relative;
                min-height: 96px;
                padding: 14px 18px 12px;
                margin: 14px 0 16px;
                border: 1.5px dashed var(--border-strong);
                border-radius: 10px;
                background: var(--cream);
                cursor: pointer;
                transition:
                    background 200ms ease,
                    border-color 200ms ease,
                    box-shadow 200ms ease;
            }
            .signature-box:hover {
                background: var(--sky-50);
                border-color: var(--sky-400);
            }
            .signature-box:focus-visible {
                outline: 2px solid var(--sky-500);
                outline-offset: 2px;
            }
            .signature-box.signed {
                cursor: default;
                border-style: solid;
                border-color: var(--sprig-500);
                background: var(--sprig-50);
            }
            .signature-box.signed:hover {
                background: var(--sprig-50);
                border-color: var(--sprig-500);
            }
            .sb-prompt {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                color: var(--ink-soft);
                font-style: italic;
                position: absolute;
                top: 50%;
                left: 18px;
                right: 18px;
                transform: translateY(-50%);
                pointer-events: none;
            }
            .sb-prompt strong {
                font-style: normal;
                color: var(--ink);
                font-weight: 600;
            }
            .sb-icon {
                color: var(--sky-600);
                flex-shrink: 0;
            }
            .signature-box.signed .sb-prompt {
                display: none;
            }
            .sb-signed {
                display: flex;
                align-items: center;
                gap: 12px;
                position: relative;
            }
            .sb-signed[hidden] {
                display: none;
            }
            .sb-signed .signature-mark {
                font-family:
                    "Caveat", "Snell Roundhand", "Brush Script MT", cursive;
                font-size: 36px;
                font-weight: 700;
                color: var(--navy-700);
                letter-spacing: 0.5px;
                line-height: 1;
                transform: rotate(-2deg);
                animation: sigDraw 600ms ease-out;
            }
            @keyframes sigDraw {
                from {
                    opacity: 0;
                    transform: translateY(6px) rotate(-2deg);
                }
                to {
                    opacity: 1;
                    transform: translateY(0) rotate(-2deg);
                }
            }
            .sb-check {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--sprig-500);
                color: #fff;
                animation: sigCheck 360ms ease-out 200ms both;
            }
            @keyframes sigCheck {
                from {
                    transform: scale(0);
                }
                to {
                    transform: scale(1);
                }
            }
            .sb-line {
                height: 1px;
                background: var(--ink-xfade);
                margin: 6px 0 4px;
            }
            .signature-box.signed .sb-line {
                background: var(--sprig-500);
                opacity: 0.45;
            }
            .sb-meta {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                font-size: 11.5px;
                color: var(--ink-fade);
                font-style: italic;
                font-variant-numeric: tabular-nums;
            }
            .signature-box.signed .sb-meta {
                color: var(--sprig-700);
                font-style: normal;
            }
            .sb-amend {
                background: transparent;
                border: none;
                color: var(--sky-600);
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                padding: 0;
                font-style: normal;
                text-decoration: underline dotted;
            }
            .sb-amend:hover {
                color: var(--navy-700);
            }
            .sb-amend[hidden] {
                display: none;
            }

            .ss-checklist {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: 14px 16px;
                margin: 4px 0 10px;
                background: var(--panel-tint);
                border: 1px solid var(--border-soft);
                border-radius: 10px;
            }
            .ss-checklist-head {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.7px;
                text-transform: uppercase;
                color: var(--ink-fade);
                margin-bottom: 2px;
            }
            .ss-row {
                display: grid;
                grid-template-columns: 18px 1fr;
                gap: 9px;
                align-items: center;
                font-size: 12.5px;
                color: var(--ink-soft);
            }
            .ss-row .ss-mark {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }
            .ss-row.pass .ss-mark {
                background: var(--sprig-500);
            }
            .ss-row.fail .ss-mark {
                background: var(--gold);
            }
            .ss-row.pass .ss-label {
                color: var(--ink);
            }
            .ss-row.fail .ss-label {
                color: var(--ink-soft);
            }
            .ss-row .ss-label strong {
                font-weight: 600;
            }
            .ss-row .ss-detail {
                color: var(--ink-fade);
                font-size: 11.5px;
                margin-left: 6px;
            }
            .ss-row.fail .ss-detail {
                color: var(--gold);
                font-weight: 600;
            }

            .ss-actions {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 14px 22px 18px;
                border-top: 1px solid var(--border-soft);
                background: var(--panel-tint);
                border-radius: 0 0 10px 10px;
            }
            .ss-actions .save-state {
                font-size: 11.5px;
                color: var(--ink-fade);
                font-style: italic;
                margin-right: 6px;
            }
            .ss-actions .save-state::before {
                content: "● ";
                color: var(--sprig-500);
                font-style: normal;
                margin-right: 2px;
            }
            .ss-actions .ss-blocker {
                flex: 1;
                font-size: 12px;
                color: var(--ink-fade);
                text-align: right;
                font-variant-numeric: tabular-nums;
            }
            .ss-actions .ss-blocker.has-block {
                color: var(--gold);
                font-weight: 600;
            }
            .ss-actions .btn.primary[disabled],
            .ss-actions .btn.primary.is-blocked {
                /* match the global rule but a touch more contrast for the panel */
                background: var(--border-soft);
                border-color: var(--border);
                color: var(--ink-fade);
            }

            @media (max-width: 700px) {
                .ss-actions {
                    flex-wrap: wrap;
                }
                .ss-actions .ss-blocker {
                    order: -1;
                    flex-basis: 100%;
                    text-align: left;
                }
            }

            /* ======================================================================
     ATTESTATION / SIGNATURE — block at the bottom of the note
     ====================================================================== */
            .attestation-block {
                margin-bottom: 14px;
                padding: 18px 22px 22px;
                background: var(--panel);
                border: 1px solid var(--border-soft);
                border-radius: 10px;
                box-shadow: var(--shadow-card);
            }
            .attestation-block .att-affirm {
                font-style: italic;
                color: var(--ink-soft);
                font-size: 12.5px;
                line-height: 1.55;
                margin: 0 0 14px;
            }
            .signature-row {
                display: flex;
                align-items: flex-end;
                gap: 16px;
                padding: 6px 0 8px;
                border-bottom: 1px solid var(--ink-xfade);
                margin-bottom: 8px;
                min-height: 60px;
            }
            .signature-mark {
                font-family:
                    "Caveat", "Snell Roundhand", "Brush Script MT", cursive;
                font-size: 32px;
                font-weight: 700;
                color: var(--navy-700);
                letter-spacing: 0.5px;
                line-height: 1;
                transform: rotate(-2deg);
                flex: 1;
            }
            .signed-line {
                font-size: 12px;
                color: var(--ink-soft);
                font-variant-numeric: tabular-nums;
                font-style: italic;
                margin-bottom: 14px;
            }
            .att-statement {
                font-style: italic;
                color: var(--ink-soft);
                font-size: 11.5px;
                line-height: 1.55;
                margin: 0 0 8px;
            }
            .att-name {
                font-size: 12.5px;
                color: var(--ink);
                font-weight: 600;
                margin-bottom: 16px;
            }
            .supervisor-line {
                font-size: 11.5px;
                color: var(--ink-fade);
                padding-top: 12px;
                border-top: 1px dashed var(--border-soft);
                font-style: italic;
            }

            /* ======================================================================
     AUDIT RAIL — Grammarly-style live audit panel in the right rail
     ====================================================================== */
            .audit-rail {
                margin-bottom: 14px;
            }
            .audit-rail .ar-count {
                font-size: 11px;
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
                font-weight: 600;
                letter-spacing: 0.3px;
            }
            .audit-rail.has-flags .ar-count {
                color: var(--red);
            }
            .audit-rail.has-warnings .ar-count {
                color: var(--gold);
            }
            .audit-rail.clean .ar-count {
                color: var(--sprig-700);
            }
            .audit-rail .head-btn[hidden] {
                display: none;
            }
            .ar-body {
                padding: 0 !important;
                max-height: calc(100vh - 280px);
                overflow-y: auto;
            }
            .ar-sticky {
                position: sticky;
                top: 0;
                z-index: 3;
                background: var(--panel);
            }
            .ar-score {
                padding: 14px 14px 12px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel-tint);
            }
            .ar-score.tier-great { background: var(--sprig-50); border-bottom-color: var(--sprig-100); }
            .ar-score.tier-good { background: var(--sprig-50); }
            .ar-score.tier-fair { background: var(--gold-50); }
            .ar-score.tier-low { background: #fbe9d2; }
            .ar-score.tier-poor { background: var(--red-50); }
            .ar-score-top {
                display: flex;
                align-items: center;
                gap: 14px;
            }
            .ar-score-num {
                font-family: "Playfair Display", serif;
                font-size: 38px;
                font-weight: 600;
                line-height: 1;
                color: var(--ink);
                font-variant-numeric: tabular-nums;
                min-width: 52px;
            }
            .ar-score.tier-great .ar-score-num { color: var(--sprig-700); }
            .ar-score.tier-good .ar-score-num { color: var(--sprig-700); }
            .ar-score.tier-fair .ar-score-num { color: #b78108; }
            .ar-score.tier-low .ar-score-num { color: #b97524; }
            .ar-score.tier-poor .ar-score-num { color: var(--red); }
            .ar-score-right {
                display: flex;
                flex-direction: column;
                gap: 1px;
                min-width: 0;
            }
            .ar-score-label {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .ar-score-tier {
                font-size: 14px;
                font-weight: 700;
                color: var(--ink);
                line-height: 1.2;
            }
            .ar-score-breakdown {
                font-size: 11px;
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
            }
            .ar-score-bar {
                margin-top: 12px;
                position: relative;
                height: 5px;
                background: rgba(0, 0, 0, 0.08);
                border-radius: 3px;
                overflow: visible;
            }
            .ar-score-fill {
                height: 100%;
                border-radius: 3px;
                background: var(--ink-soft);
                transition: width 250ms ease;
            }
            .ar-score.tier-great .ar-score-fill { background: var(--sprig-600); }
            .ar-score.tier-good .ar-score-fill { background: var(--sprig-500); }
            .ar-score.tier-fair .ar-score-fill { background: var(--gold); }
            .ar-score.tier-low .ar-score-fill { background: #d18826; }
            .ar-score.tier-poor .ar-score-fill { background: var(--red); }
            .ar-score-tick {
                position: absolute;
                top: -2px;
                width: 2px;
                height: 9px;
                background: var(--ink-fade);
                border-radius: 1px;
                transform: translateX(-1px);
                opacity: 0.55;
            }
            .ar-cat-bar {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                padding: 10px 14px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel);
            }
            .ar-cat-chip {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                background: var(--panel);
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 3px 10px;
                font-size: 11.5px;
                font-weight: 500;
                color: var(--ink-soft);
                cursor: pointer;
                line-height: 1.4;
                font-family: inherit;
            }
            .ar-cat-chip:hover {
                border-color: var(--border-strong);
                color: var(--ink);
            }
            .ar-cat-chip.active {
                background: var(--navy-700);
                color: #fff;
                border-color: var(--navy-700);
            }
            .ar-cat-chip-count {
                font-variant-numeric: tabular-nums;
                font-weight: 700;
                font-size: 11px;
                opacity: 0.85;
            }
            .ar-empty {
                padding: 28px 18px;
                text-align: center;
                color: var(--sprig-700);
                font-size: 13px;
                line-height: 1.5;
            }
            .ar-empty strong {
                display: block;
                margin-bottom: 4px;
                color: var(--sprig-700);
            }
            .ar-empty .ar-empty-sub {
                color: var(--ink-fade);
                font-size: 11.5px;
                font-weight: 400;
            }
            .ar-item {
                padding: 12px 14px;
                border-bottom: 1px solid var(--border-soft);
                cursor: pointer;
                transition: background 140ms ease;
            }
            .ar-item:last-child {
                border-bottom: none;
            }
            .ar-item:hover {
                background: var(--sky-50);
            }
            .ar-head-row {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 6px;
            }
            .ar-sev {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--red);
                flex-shrink: 0;
            }
            .ar-sev.warn {
                background: var(--gold);
            }
            .ar-rule {
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                color: var(--red);
            }
            .ar-rule.warn {
                color: var(--gold);
            }
            .ar-excerpt {
                font-size: 12.5px;
                line-height: 1.45;
                color: var(--ink-soft);
                margin-bottom: 6px;
                font-style: italic;
            }
            .ar-excerpt .hit {
                background: rgba(201, 48, 44, 0.12);
                color: var(--red);
                padding: 0 2px;
                border-radius: 2px;
                font-style: normal;
                font-weight: 600;
            }
            .ar-item .ar-excerpt .hit.warn,
            .ar-excerpt.warn .hit {
                background: rgba(229, 163, 10, 0.12);
                color: #806008;
            }
            .ar-reason {
                font-size: 11.5px;
                line-height: 1.5;
                color: var(--ink-soft);
                margin-bottom: 8px;
            }
            .ar-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }
            .ar-btn {
                display: inline-flex;
                align-items: center;
                padding: 4px 10px;
                font-size: 11.5px;
                font-weight: 500;
                line-height: 1.4;
                color: var(--sky-600);
                background: var(--panel);
                border: 1px solid var(--sky-100);
                border-radius: 6px;
                cursor: pointer;
                transition:
                    background 140ms ease,
                    border-color 140ms ease,
                    color 140ms ease;
                font-family: inherit;
            }
            .ar-btn:hover {
                background: var(--sky-50);
                border-color: var(--sky-400);
                color: var(--navy-700);
            }
            .ar-dismiss {
                background: transparent;
                border: none;
                color: var(--ink-fade);
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                padding: 4px 6px;
                margin-left: auto;
            }
            .ar-dismiss:hover {
                color: var(--ink);
                text-decoration: underline;
            }

            /* ======================================================================
     BCBA COACHING VIEW — supervisor-facing dashboard, hidden by default
     ====================================================================== */
            body.coaching .subbar,
            body.coaching main.workspace {
                display: none !important;
            }
            .coaching-view {
                max-width: 1280px;
                margin: 24px auto 80px;
                padding: 0 22px;
            }
            .coaching-view .cv-subbar {
                margin-bottom: 22px;
            }
            .cv-crumbs {
                font-size: 12px;
                color: var(--ink-fade);
                letter-spacing: 0.2px;
                margin-bottom: 6px;
            }
            .cv-crumbs a {
                color: var(--sky-600);
                text-decoration: none;
                font-weight: 500;
            }
            .cv-crumbs a:hover {
                color: var(--navy-700);
                text-decoration: underline;
            }
            .cv-crumbs .sep {
                margin: 0 6px;
                color: var(--ink-xfade);
            }
            .cv-title-row {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 18px;
                flex-wrap: wrap;
            }
            .cv-title-row h1 {
                font-family: "Playfair Display", serif;
                font-size: 28px;
                font-weight: 600;
                color: var(--navy-700);
                margin: 0 0 6px;
                letter-spacing: -0.4px;
            }
            .cv-title-row h1 .light {
                font-weight: 400;
                color: var(--ink-soft);
                font-size: 22px;
            }
            .cv-subtitle {
                font-size: 13px;
                color: var(--ink-soft);
                font-variant-numeric: tabular-nums;
            }
            .cv-cycle-tabs {
                display: inline-flex;
                background: var(--panel);
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 3px;
                box-shadow: var(--shadow-card);
            }
            .cv-tab {
                background: transparent;
                border: none;
                color: var(--ink-soft);
                font-family: inherit;
                font-size: 12px;
                font-weight: 600;
                padding: 5px 14px;
                border-radius: 999px;
                cursor: pointer;
                transition:
                    background 160ms ease,
                    color 160ms ease;
            }
            .cv-tab:hover {
                color: var(--ink);
            }
            .cv-tab.is-active {
                background: var(--navy-700);
                color: #fff;
            }

            .cv-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
            }
            .cv-kpis {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0;
                background: var(--panel);
                border: 1px solid var(--border);
                border-radius: 12px;
                box-shadow: var(--shadow-card);
                overflow: hidden;
            }
            .cv-trend-card,
            .cv-rules-card,
            .cv-notes-card,
            .cv-insights-card,
            .cv-plan-card,
            .cv-evidence-card,
            .cv-bst-card {
                grid-column: 1 / -1;
            }

            /* ============================================================
               SUPERVISION PLAN — single card, three internal sections
               separated by hairlines. Lightweight: no card-in-card boxes,
               no tinted backgrounds, color reserved for the focus accent.
               ============================================================ */
            .cv-plan-body {
                padding: 0 !important;
            }

            /* Scan strip — Recognize · Focus · Watch */
            .cv-plan-strip {
                display: grid;
                grid-template-columns: 1fr 1.5fr 1fr;
                border-bottom: 1px solid var(--border-soft);
            }
            .cv-plan-scan-cell {
                padding: 16px 20px 18px;
                border-right: 1px solid var(--border-soft);
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .cv-plan-scan-cell:last-child {
                border-right: none;
            }
            .cv-plan-scan-cell.is-focus {
                background: var(--gold-50);
                box-shadow: inset 0 2px 0 var(--gold);
            }
            .cv-plan-scan-tag {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.6px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .tone-recognize .cv-plan-scan-tag { color: var(--sprig-700); }
            .tone-coach .cv-plan-scan-tag { color: #b78108; }
            .cv-plan-scan-headline {
                font-family: "Playfair Display", serif;
                font-size: 17px;
                font-weight: 600;
                color: var(--ink);
                line-height: 1.25;
            }
            .cv-plan-scan-metric {
                font-size: 12px;
                color: var(--ink-soft);
                font-variant-numeric: tabular-nums;
            }
            .tone-recognize .cv-plan-scan-metric { color: var(--sprig-700); font-weight: 600; }
            .cv-plan-scan-target {
                font-size: 13.5px;
                color: var(--ink);
                font-variant-numeric: tabular-nums;
                font-weight: 500;
                letter-spacing: -0.1px;
            }
            .cv-plan-scan-target-num.goal {
                color: var(--sprig-700);
                font-weight: 700;
            }
            .cv-plan-scan-target-arrow {
                color: var(--ink-fade);
                margin: 0 2px;
            }
            .cv-plan-scan-target-suffix {
                color: var(--ink-fade);
                font-weight: 400;
                font-size: 12px;
            }
            .cv-plan-scan-detail {
                margin: 0;
                font-size: 12px;
                line-height: 1.5;
                color: var(--ink-soft);
            }

            /* Example row */
            .cv-plan-evidence {
                padding: 16px 20px 16px;
                border-bottom: 1px solid var(--border-soft);
            }
            .cv-plan-section-label {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                color: var(--ink-fade);
                margin-bottom: 8px;
            }
            .cv-plan-evidence-cols {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
            .cv-plan-ev {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .cv-plan-ev-tag {
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .cv-plan-ev.before .cv-plan-ev-tag { color: var(--red); }
            .cv-plan-ev.after .cv-plan-ev-tag { color: var(--sprig-700); }
            .cv-plan-ev-quote {
                font-size: 13px;
                line-height: 1.5;
                color: var(--ink);
                padding-left: 10px;
                border-left: 2px solid var(--border);
            }
            .cv-plan-ev.before .cv-plan-ev-quote {
                border-left-color: #e6b6b3;
                color: var(--ink-soft);
            }
            .cv-plan-ev.after .cv-plan-ev-quote {
                border-left-color: var(--sprig-500);
            }

            /* Action footer — three single-line rows */
            .cv-plan-foot {
                padding: 12px 20px 16px;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .cv-plan-foot-row {
                display: flex;
                align-items: baseline;
                gap: 12px;
                font-size: 12.5px;
                line-height: 1.5;
            }
            .cv-plan-foot-label {
                flex-shrink: 0;
                width: 84px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .cv-plan-foot-text {
                flex: 1;
                color: var(--ink-soft);
            }
            .cv-plan-foot-text.bst {
                color: var(--ink);
            }
            .cv-plan-bst-phase {
                font-weight: 600;
                color: var(--navy-700);
            }
            .cv-plan-bst-dur {
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
            }
            .cv-plan-bst-sep {
                color: var(--ink-xfade);
                margin: 0 6px;
            }

            /* KPI: clean data-ink. Label, big numeric value, sparkline beneath
       at consistent width, delta line, baseline line. Sparkline lives on
       its own row so it doesn't fight with text baselines. */
            .cv-kpi {
                padding: 18px 22px 20px;
                border-right: 1px solid var(--border-soft);
                position: relative;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .cv-kpi:last-child {
                border-right: none;
            }
.cv-kpi-label {
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.7px;
                color: var(--ink-fade);
                margin: 0 0 8px;
            }
            .cv-kpi-value {
                font-family: "Lato", sans-serif;
                font-size: 32px;
                font-weight: 800;
                color: var(--navy-700);
                line-height: 1;
                font-variant-numeric: tabular-nums;
                letter-spacing: -0.8px;
                white-space: nowrap;
                margin: 0;
            }
            .cv-kpi-value.is-text {
                font-size: 19px;
                font-weight: 700;
                letter-spacing: -0.2px;
                font-family: "Playfair Display", serif;
                color: var(--navy-700);
            }
            .cv-kpi-value .unit {
                font-size: 16px;
                color: var(--ink-fade);
                font-weight: 400;
                margin-left: 4px;
                font-family: "Lato", sans-serif;
            }
            .cv-insights-card .card-body {
                padding: 12px 0 0;
            }
            .cv-insight {
                background: transparent;
                border: none;
                border-top: 3px solid var(--ink-xfade);
                border-radius: 0;
                padding: 14px 20px 8px;
                line-height: 1.55;
                font-size: 13px;
                color: var(--ink-soft);
            }
            .cv-insight + .cv-insight {
                border-left: 1px solid var(--border-soft);
            }
            .cv-kpi-value {
                font-family: "Lato", sans-serif;
                font-size: 30px;
                font-weight: 700;
                color: var(--navy-700);
                line-height: 1.05;
                font-variant-numeric: tabular-nums;
                letter-spacing: -0.6px;
                white-space: nowrap;
                margin: 0;
            }
            .cv-kpi-value.is-text {
                font-size: 18px;
                font-weight: 700;
                letter-spacing: -0.2px;
                font-family: "Playfair Display", serif;
                color: var(--navy-700);
            }
            .cv-kpi-value .unit {
                font-size: 14px;
                color: var(--ink-fade);
                font-weight: 400;
                margin-left: 2px;
                font-family: "Lato", sans-serif;
            }
            .cv-kpi-spark {
                width: 100%;
                max-width: 140px;
                height: 26px;
                display: block;
                margin-top: 2px;
            }
            .cv-kpi-delta {
                font-size: 11.5px;
                color: var(--ink-fade);
                line-height: 1.4;
                margin: 2px 0 0;
            }
            .cv-kpi-delta .arrow {
                font-weight: 700;
                margin-right: 3px;
            }
            .cv-kpi-delta .pct {
                color: var(--ink);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
            .cv-kpi-delta.good .pct,
            .cv-kpi-delta.good .arrow {
                color: var(--sprig-700);
            }
            .cv-kpi-delta.bad .pct,
            .cv-kpi-delta.bad .arrow {
                color: var(--gold);
            }
            .cv-kpi-baseline {
                font-size: 10.5px;
                color: var(--ink-fade);
                margin: 0;
            }

            .cv-trend-card .card-body.cv-trend-body {
                padding: 14px 18px 22px;
            }
            .cv-trend-svg {
                width: 100%;
                height: 240px;
                display: block;
                overflow: visible;
            }
            .cv-trend-svg .cv-axis-baseline {
                stroke: var(--ink-soft);
                stroke-width: 1;
            }
            .cv-trend-svg .cv-grid {
                stroke: var(--border-soft);
                stroke-width: 1;
            }
            .cv-trend-svg .cv-line {
                fill: none;
                stroke: var(--navy-700);
                stroke-width: 1.6;
                stroke-linecap: round;
                stroke-linejoin: round;
            }
            .cv-trend-svg .cv-line.team {
                stroke: var(--ink-xfade);
                stroke-width: 1.2;
                stroke-dasharray: 3 3;
            }
            .cv-trend-svg .cv-dot {
                fill: var(--navy-700);
            }
            .cv-trend-svg .cv-dot.endpoint {
                fill: var(--navy-700);
            }
            .cv-trend-svg .cv-dot.team {
                fill: var(--ink-xfade);
            }
            .cv-trend-svg .cv-tick {
                fill: var(--ink-fade);
                font-family: "Lato", sans-serif;
                font-size: 10px;
                font-variant-numeric: tabular-nums;
            }
            .cv-trend-svg .cv-direct {
                fill: var(--ink);
                font-family: "Lato", sans-serif;
                font-size: 11px;
                font-weight: 600;
                font-variant-numeric: tabular-nums;
            }
            .cv-trend-svg .cv-direct.team {
                fill: var(--ink-fade);
                font-weight: 400;
                font-style: italic;
            }
            .cv-trend-meta {
                font-size: 11.5px;
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
            }
            .cv-meta-note {
                font-size: 11px;
                color: var(--ink-fade);
                font-variant-numeric: tabular-nums;
                font-style: italic;
            }

            .cv-rules-card .card-body.cv-rules-body,
            .cv-notes-card .card-body.cv-notes-body {
                padding: 0;
            }
            .cv-rules-table,
            .cv-notes-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12.5px;
            }
            .cv-rules-table thead th,
            .cv-notes-table thead th {
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.7px;
                color: var(--ink-fade);
                text-align: left;
                padding: 10px 14px;
                background: var(--panel-tint);
                border-bottom: 1px solid var(--border-soft);
            }
            .cv-rules-table thead th.num,
            .cv-rules-table tbody td.num,
            .cv-notes-table thead th.num,
            .cv-notes-table tbody td.num {
                text-align: right;
                font-variant-numeric: tabular-nums;
                white-space: nowrap;
            }
            .cv-rules-table tbody td,
            .cv-notes-table tbody td {
                padding: 10px 14px;
                border-bottom: 1px solid var(--border-soft);
                vertical-align: middle;
                line-height: 1.4;
            }
            .cv-rules-table tbody tr:last-child td,
            .cv-notes-table tbody tr:last-child td {
                border-bottom: none;
            }
            .cv-rules-table tbody tr:hover td,
            .cv-notes-table tbody tr:hover td {
                background: var(--sky-50);
            }
            .cv-rule-name {
                font-weight: 500;
                color: var(--ink);
            }
            .cv-rule-id {
                color: var(--ink-fade);
                font-family:
                    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
                font-size: 10.5px;
                margin-left: 6px;
            }
            .cv-delta {
                display: inline-flex;
                align-items: baseline;
                gap: 3px;
                font-weight: 600;
            }
            .cv-delta.good {
                color: var(--sprig-700);
            }
            .cv-delta.bad {
                color: var(--gold);
            }
            .cv-delta.flat {
                color: var(--ink-fade);
            }
            /* Tufte-style line sparklines: thin line, faint min/max marks,
       solid endpoint dot with the current value direct-labeled. */
            .cv-spark-cell {
                white-space: nowrap;
            }
            .cv-spark {
                width: 92px;
                height: 22px;
                vertical-align: middle;
                overflow: visible;
            }
            .cv-spark .cv-spark-line {
                fill: none;
                stroke: var(--navy-700);
                stroke-width: 1.2;
                stroke-linejoin: round;
                stroke-linecap: round;
            }
            .cv-spark .cv-spark-dot {
                stroke: none;
            }
            .cv-spark .cv-spark-dot.end {
                fill: var(--navy-700);
            }
            .cv-spark .cv-spark-dot.max {
                fill: var(--red);
            }
            .cv-spark .cv-spark-dot.min {
                fill: var(--ink-xfade);
            }
            .cv-spark-end {
                display: inline-block;
                margin-left: 6px;
                font-size: 11px;
                font-weight: 600;
                color: var(--ink);
                font-variant-numeric: tabular-nums;
                vertical-align: middle;
            }
            .cv-status-pill {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 2px 9px;
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                border-radius: 999px;
            }
            .cv-status-pill.submitted {
                background: var(--sprig-50);
                color: var(--sprig-700);
                border: 1px solid var(--sprig-100);
            }
            .cv-status-pill.returned {
                background: var(--gold-50);
                color: var(--gold);
                border: 1px solid #f0deac;
            }
            .cv-status-pill.draft {
                background: var(--navy-50);
                color: var(--navy-700);
                border: 1px solid #cad9e6;
            }
            .cv-status-pill::before {
                content: "";
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: currentColor;
            }

            /* Insights are flat text panels separated by thin top accents — no
       fills, no card boxes. Color carries meaning, not decoration. */
            .cv-insights {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0;
            }
            .cv-insight {
                background: transparent;
                border: none;
                border-top: 2px solid var(--ink-xfade);
                border-radius: 0;
                padding: 12px 18px 4px;
                line-height: 1.5;
                font-size: 12.5px;
                color: var(--ink-soft);
            }
            .cv-insight + .cv-insight {
                border-left: 1px solid var(--border-soft);
            }
            .cv-insight.kind-win {
                border-top-color: var(--sprig-500);
            }
            .cv-insight.kind-watch {
                border-top-color: var(--gold);
            }
            .cv-insight.kind-info {
                border-top-color: var(--sky-500);
            }
            .cv-insight-tag {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.7px;
                margin-bottom: 8px;
            }
            .cv-insight.kind-win .cv-insight-tag {
                color: var(--sprig-700);
            }
            .cv-insight.kind-watch .cv-insight-tag {
                color: #806008;
            }
            .cv-insight.kind-info .cv-insight-tag {
                color: var(--navy-700);
            }
            .cv-insight-headline {
                font-weight: 600;
                color: var(--ink);
                font-size: 13px;
                margin-bottom: 4px;
                line-height: 1.35;
            }
            .cv-insights-card .card-body {
                padding: 0;
            }

            /* Footer note — Tufte loves explicit data context. */
            .cv-context-note {
                grid-column: 1 / -1;
                margin-top: 10px;
                padding-top: 12px;
                border-top: 1px solid var(--border-soft);
                font-size: 11px;
                color: var(--ink-fade);
                font-style: italic;
                line-height: 1.5;
            }

            @media (max-width: 900px) {
                .cv-kpis {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
                .cv-insights {
                    grid-template-columns: 1fr;
                }
            }

            /* ======================================================================
     PLACEHOLDER CHOOSER — popover anchored to a clicked placeholder pill
     ====================================================================== */
            #ph-popover {
                position: fixed;
                z-index: 800;
                width: 280px;
                max-width: 92vw;
                background: var(--panel);
                border: 1px solid var(--border-strong);
                border-radius: 12px;
                box-shadow:
                    0 16px 40px rgba(13, 51, 87, 0.18),
                    0 1px 2px rgba(13, 51, 87, 0.06);
                padding: 12px 14px;
                display: none;
                transform-origin: top center;
            }
            #ph-popover.show {
                display: block;
                animation: phFade 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            @keyframes phFade {
                from {
                    opacity: 0;
                    transform: translateY(4px) scale(0.98);
                }
                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }
            .ph-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.6px;
                color: var(--ink-fade);
                margin-bottom: 9px;
            }
            .ph-head .ph-token {
                color: #6f4d05;
                background: var(--gold-50);
                border: 1px solid #f0deac;
                font-family:
                    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
                text-transform: none;
                letter-spacing: 0;
                font-weight: 600;
                padding: 1px 6px;
                border-radius: 4px;
            }
            .ph-chips {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                margin-bottom: 9px;
            }
            .ph-chip {
                background: var(--sky-50);
                border: 1px solid var(--sky-100);
                color: var(--navy-700);
                border-radius: 999px;
                padding: 4px 10px;
                font-size: 12px;
                font-family: inherit;
                cursor: pointer;
                transition:
                    background 140ms ease,
                    border-color 140ms ease,
                    transform 80ms ease;
            }
            .ph-chip:hover {
                background: #d4e8f8;
                border-color: var(--sky-400);
            }
            .ph-chip:active {
                transform: scale(0.97);
            }
            .ph-chip:focus-visible {
                outline: 2px solid var(--sky-500);
                outline-offset: 2px;
            }
            .ph-input-row {
                display: flex;
                gap: 6px;
            }
            .ph-input {
                flex: 1;
                border: 1px solid var(--border);
                border-radius: 7px;
                padding: 6px 9px;
                font-family: inherit;
                font-size: 12.5px;
                outline: none;
                background: var(--panel-tint);
                transition:
                    border-color 140ms ease,
                    background 140ms ease;
                min-width: 0;
            }
            .ph-input:focus {
                border-color: var(--sky-500);
                background: var(--panel);
            }
            .ph-apply {
                background: var(--sky-600);
                color: #fff;
                border: 1px solid var(--sky-600);
                border-radius: 7px;
                padding: 0 12px;
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                font-family: inherit;
                transition:
                    background 140ms ease,
                    transform 80ms ease;
            }
            .ph-apply:hover {
                background: var(--navy-700);
                border-color: var(--navy-700);
            }
            .ph-apply:active {
                transform: scale(0.97);
            }
            .ph-hint {
                margin-top: 8px;
                font-size: 10.5px;
                color: var(--ink-fade);
                font-style: italic;
                line-height: 1.4;
            }
            .ph-hint kbd {
                font-family: "Lato", sans-serif;
                font-style: normal;
                background: var(--panel-tint);
                border: 1px solid var(--border-soft);
                border-bottom-width: 2px;
                border-radius: 3px;
                padding: 0 4px;
                font-size: 9.5px;
                font-weight: 700;
                color: var(--ink-soft);
            }

            /* ======================================================================
     DEMO CONTROL — presenter-mode panel hidden behind the gear icon
     ====================================================================== */
            #demo-modal {
                position: fixed;
                inset: 0;
                z-index: 1100;
                display: none;
            }
            #demo-modal.show {
                display: block;
            }
            #demo-modal .dm-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(13, 51, 87, 0.42);
                backdrop-filter: blur(2px);
            }
            #demo-modal .dm-card {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: min(720px, 92vw);
                max-height: 86vh;
                background: var(--panel);
                border: 1px solid var(--border-strong);
                border-radius: 12px;
                box-shadow: 0 24px 60px rgba(13, 51, 87, 0.28);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            #demo-modal .dm-head {
                padding: 14px 18px;
                border-bottom: 1px solid var(--border-soft);
                background: var(--panel-tint);
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 12px;
            }
            #demo-modal .dm-head h4 {
                font-family: "Playfair Display", serif;
                font-size: 16px;
                font-weight: 600;
                color: var(--navy-700);
                margin: 0 0 2px;
            }
            #demo-modal .dm-sub {
                font-size: 11.5px;
                color: var(--ink-fade);
                font-weight: 400;
            }
            #demo-modal .dm-close {
                background: transparent;
                border: none;
                cursor: pointer;
                color: var(--ink-soft);
                padding: 4px;
                border-radius: 4px;
                line-height: 0;
            }
            #demo-modal .dm-close:hover {
                background: var(--border-soft);
                color: var(--ink);
            }
            #demo-modal .dm-body {
                padding: 4px 18px 18px;
                overflow-y: auto;
            }
            #demo-modal .dm-section {
                padding: 14px 0;
                border-bottom: 1px solid var(--border-soft);
            }
            #demo-modal .dm-section:last-child {
                border-bottom: none;
            }
            #demo-modal .dm-section h5 {
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 0.7px;
                text-transform: uppercase;
                color: var(--ink-fade);
                margin: 0 0 10px;
            }
            #demo-modal .dm-help {
                margin: -4px 0 12px;
                font-size: 11.5px;
                color: var(--ink-fade);
                line-height: 1.45;
            }
            #demo-modal .dm-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
            #demo-modal .dm-actions .btn {
                font-size: 12.5px;
            }
            .dm-rules {
                display: flex;
                flex-direction: column;
                gap: 1px;
                background: var(--border-soft);
                border: 1px solid var(--border-soft);
                border-radius: 8px;
                overflow: hidden;
            }
            .dm-rule {
                background: var(--panel);
                padding: 10px 12px;
                display: grid;
                grid-template-columns: 28px 1fr;
                gap: 10px;
                align-items: flex-start;
            }
            .dm-rule.disabled {
                opacity: 0.55;
            }
            .dm-rule .dm-toggle {
                appearance: none;
                width: 28px;
                height: 16px;
                border-radius: 999px;
                background: var(--ink-xfade);
                position: relative;
                cursor: pointer;
                transition: background 160ms ease;
                margin-top: 3px;
                flex-shrink: 0;
            }
            .dm-rule .dm-toggle::after {
                content: "";
                position: absolute;
                top: 2px;
                left: 2px;
                width: 12px;
                height: 12px;
                background: #fff;
                border-radius: 50%;
                transition: transform 160ms ease;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
            }
            .dm-rule .dm-toggle:checked {
                background: var(--sprig-500);
            }
            .dm-rule .dm-toggle:checked::after {
                transform: translateX(12px);
            }
            .dm-rule-meta {
                min-width: 0;
            }
            .dm-rule-head {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 4px;
            }
            .dm-rule-id {
                font-family:
                    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
                font-size: 10.5px;
                color: var(--ink-fade);
            }
            .dm-rule-section-head {
                margin: 18px 0 6px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .dm-rule-label-static {
                font-size: 13px;
                font-weight: 600;
                color: var(--ink);
                flex: 1;
            }
            .dm-rule-label {
                font-size: 12.5px;
                font-weight: 600;
                color: var(--ink);
            }
            .dm-rule-sev {
                display: inline-flex;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--red);
            }
            .dm-rule-sev.warn {
                background: var(--gold);
            }
            .dm-rule-fields {
                display: grid;
                grid-template-columns: 1fr;
                gap: 6px;
            }
            .dm-rule-fields label {
                display: flex;
                flex-direction: column;
                gap: 2px;
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: 0.6px;
                text-transform: uppercase;
                color: var(--ink-fade);
            }
            .dm-rule-fields textarea,
            .dm-rule-fields input {
                font-family: inherit;
                font-size: 12px;
                line-height: 1.4;
                color: var(--ink);
                background: var(--panel-tint);
                border: 1px solid var(--border-soft);
                border-radius: 5px;
                padding: 5px 7px;
                outline: none;
                resize: vertical;
                font-weight: 400;
                letter-spacing: normal;
                text-transform: none;
            }
            .dm-rule-fields textarea {
                min-height: 36px;
            }
            .dm-rule-fields input:focus,
            .dm-rule-fields textarea:focus {
                border-color: var(--sky-500);
                background: var(--panel);
            }
            .dm-rule-pattern {
                font-family:
                    ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
                font-size: 10.5px !important;
                color: var(--ink-soft) !important;
            }
            .dm-rule-pattern.invalid {
                border-color: var(--red) !important;
                color: var(--red) !important;
            }
            #demo-modal .dm-section-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 4px;
            }
            #demo-modal .dm-section-head h5 {
                margin: 0;
            }
            .dm-add-rule {
                font-size: 12px !important;
                padding: 4px 12px !important;
                min-height: 0 !important;
            }
            .dm-rule-head {
                position: relative;
            }
            .dm-rule-label-input {
                flex: 1;
                font-family: inherit;
                font-size: 13px;
                font-weight: 600;
                color: var(--ink);
                background: transparent;
                border: 1px solid transparent;
                border-radius: 5px;
                padding: 3px 6px;
                outline: none;
                min-width: 0;
                transition:
                    border-color 140ms ease,
                    background 140ms ease;
            }
            .dm-rule-label-input:hover {
                border-color: var(--border-soft);
            }
            .dm-rule-label-input:focus {
                background: var(--panel-tint);
                border-color: var(--sky-500);
            }
            .dm-rule-sev-select {
                font-family: inherit;
                font-size: 11px;
                color: var(--ink-soft);
                background: var(--panel-tint);
                border: 1px solid var(--border-soft);
                border-radius: 5px;
                padding: 3px 6px;
                cursor: pointer;
                outline: none;
                transition: border-color 140ms ease;
            }
            .dm-rule-sev-select:focus {
                border-color: var(--sky-500);
            }
            .dm-rule-del {
                position: absolute;
                top: -2px;
                right: -2px;
                background: transparent;
                border: none;
                color: var(--ink-fade);
                font-size: 18px;
                line-height: 1;
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 4px;
                transition:
                    color 140ms ease,
                    background 140ms ease;
            }
            .dm-rule-del:hover {
                color: var(--red);
                background: var(--red-50);
            }
            .dm-rule-fields {
                margin-top: 4px;
            }

            /* ======================================================================
     EDITOR FOOTER polish — tighter, less chrome
     ====================================================================== */
            .editor-footer .ef-hint {
                color: var(--ink-fade);
                font-size: 11.5px;
                font-style: italic;
            }
            .editor-footer .ef-actions {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            @media (max-width: 1100px) {
                main.workspace {
                    grid-template-columns: 1fr;
                }
                .side-stack {
                    position: static;
                    max-height: none;
                }
            }

.disclosure-tight {
    padding: 0 4px 8px;
}

/* ======================================================================
   APP FOOTER
   ====================================================================== */
.app-footer {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: var(--ink-fade);
    margin-top: 40px;
    margin-bottom: 20px;
}