/* ─── MERGED TOOL TAB BARS ────────────────────────── */
.explorer-tab-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}
.explorer-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.explorer-tab:hover {
    color: var(--charcoal);
}
.explorer-tab.active {
    color: var(--tab-color, var(--primary));
    border-bottom-color: var(--tab-color, var(--primary));
}
.explorer-tab svg {
    width: 16px;
    height: 16px;
}

/* ─── CANVAS TAB BAR (multi-canvas within graph) ──── */
.canvas-tab-bar {
    position: relative;
    z-index: 15;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

/* ─── CANVAS MANAGEMENT ──────────────────────────── */
.canvas-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.canvas-tab-label {
    outline: none;
    min-width: 2ch;
}
.canvas-tab-label[contenteditable="true"] {
    background: var(--bg-surface);
    border: 1px solid var(--primary);
    border-radius: 3px;
    padding: 0 0.25rem;
}
.canvas-tab-menu-btn {
    display: flex;
    align-items: center;
    padding: 0.15rem;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.canvas-tab:hover .canvas-tab-menu-btn,
.canvas-tab.active .canvas-tab-menu-btn {
    opacity: 0.6;
}
.canvas-tab-menu-btn:hover {
    opacity: 1 !important;
    background: var(--primary-tint-sm);
}
.canvas-tab-menu-btn svg {
    width: 14px;
    height: 14px;
}
.canvas-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    background: none;
    color: var(--slate);
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 0.25rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.canvas-add-btn:hover {
    background: var(--primary-tint-sm);
    color: var(--primary);
    border-color: var(--primary);
}
.canvas-context-menu {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 4px 0;
    z-index: 300;
}
.canvas-context-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--charcoal);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s;
}
.canvas-context-menu button:hover {
    background: var(--primary-tint-sm);
    color: var(--primary);
}
.canvas-context-menu button.danger-item {
    color: var(--rose);
}
.canvas-context-menu button.danger-item:hover {
    background: var(--rose-light);
}
.canvas-context-menu button:disabled {
    opacity: 0.4;
    cursor: default;
}
.canvas-context-menu button:disabled:hover {
    background: none;
    color: var(--charcoal);
}
.canvas-context-menu hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}
.canvas-color-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
}
.canvas-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.canvas-color-swatch:hover {
    transform: scale(1.15);
}
.canvas-color-swatch.active {
    border-color: var(--charcoal);
}
.canvas-menu-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    padding: 0.3rem 1rem 0.1rem;
}
.canvas-type-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0.25rem;
}
.canvas-type-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    color: var(--charcoal);
    text-align: left;
    white-space: nowrap;
}
.canvas-type-option:hover {
    background: var(--primary-tint-xs);
}
.canvas-type-option.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.canvas-type-option svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.canvas-type-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    opacity: 0.6;
}
.canvas-type-badge svg {
    width: 12px;
    height: 12px;
}
@media (max-width: 600px) {
    .canvas-tab-bar {
        padding: 0.5rem 0.75rem 0;
    }
    .canvas-tab-menu-btn {
        opacity: 0.6;
    }
    .canvas-context-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: 12px 12px 0 0;
        min-width: unset;
        padding: 8px 0 env(safe-area-inset-bottom, 8px);
    }
}

/* ─── PROJECT OVERVIEW ──────────────────────────── */
.project-overview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--bg);
    overflow: hidden;
}
.project-overview-header {
    padding: 1rem 1.5rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.project-overview-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--charcoal);
}
.project-overview-subtitle {
    font-size: 0.8rem;
    color: var(--slate);
    margin-top: 0.2rem;
}
.project-overview-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 0;
    cursor: grab;
    touch-action: none; /* let JS handle pan/pinch without the browser scrolling */
    user-select: none;
    -webkit-user-select: none;
}
.project-overview-stage.is-panning {
    cursor: grabbing;
}
.project-overview-world {
    position: absolute;
    inset: 0;
    will-change: transform;
    transform-origin: 0 0;
}
.project-overview-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.overview-canvas-group {
    transition: opacity 0.15s;
}
.overview-canvas-group:hover {
    opacity: 0.85;
}
.overview-canvas-group:hover polygon,
.overview-canvas-group:hover circle {
    filter: brightness(1.08);
}
/* Fit-to-screen button overlay inside the overview stage. Uses the same
 * .zoom-btn styling as the regular canvas for consistency, but positions
 * relative to the stage (not the whole app) so it lives inside the
 * project-overview viewport. */
.overview-zoom-controls {
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 10;
}
.canvas-tab.canvas-tab-overview {
    font-weight: 600;
}
.canvas-tab.canvas-tab-overview.active {
    --tab-color: var(--charcoal);
}

/* ─── NARRATIVE ARC VIEW ──────────────────────────── */
.narc-layout {
    display: flex;
    gap: 2rem;
    padding: 2rem 1.5rem 3rem;
}
.narc-view {
    flex: 1 1 0;
    min-width: 0;
    max-width: 820px;
    margin: 0 auto;
}
.narc-vis-panel {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 38px;
    align-self: flex-start;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
@media (max-width: 1024px) {
    .narc-layout { flex-direction: column; }
    .narc-vis-panel { width: 100%; max-width: none; position: static; max-height: none; }
}

/* ─── Arc dual perspective columns (stacked: initiator first, receiver second) ────────── */
.narc-dual-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.narc-perspective-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0.75rem;
}
.narc-perspective-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.5rem;
}
.narc-perspective-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.narc-initiator-col .narc-perspective-label { color: var(--ultraviolet); }
.narc-receiver-col .narc-perspective-label { color: var(--neutral); }
.narc-perspective-name {
    font-size: 0.78rem;
    color: var(--slate);
    font-weight: 500;
}
.narc-perspective-col .narc-textarea {
    margin-bottom: 0.25rem;
}

/* ─── Arc panel dual-arc tabs ─────────────── */
.narc-vis-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.narc-vis-tab {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-surface);
    border: none;
    cursor: pointer;
    color: var(--slate);
    transition: all 0.15s ease;
}
.narc-vis-tab:not(:last-child) { border-right: 1px solid var(--border-light); }
.narc-vis-tab.active {
    background: color-mix(in srgb, var(--ultraviolet) 10%, transparent);
    color: var(--ultraviolet);
}
.narc-vis-tab.active-receiver {
    background: color-mix(in srgb, var(--neutral) 10%, transparent);
    color: var(--neutral);
}
.narc-vis-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.narc-vis-card:last-child {
    flex: 1;
    margin-bottom: 0;
}
.narc-vis-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    margin-bottom: 0.85rem;
}
.narc-vis-svg { width: 100%; height: auto; }
.narc-vis-path-bg {
    fill: none;
    stroke: var(--border-light);
    stroke-width: 3;
    stroke-linecap: round;
}
.narc-vis-path-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.narc-vis-dot {
    fill: var(--bg-surface);
    stroke: var(--border-light);
    stroke-width: 2;
    transition: all 0.3s ease;
}
.narc-vis-dot.filled {
    fill: var(--primary);
    stroke: var(--primary);
    filter: drop-shadow(0 0 4px var(--shadow-primary));
}
.narc-vis-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    fill: var(--slate);
    text-anchor: middle;
}
.narc-vis-label.filled { fill: var(--primary); }
/* Synopsis card */
.narc-synopsis-empty {
    text-align: center;
    padding: 2rem 1.25rem;
    color: var(--slate);
    font-size: 0.82rem;
    line-height: 1.6;
    font-style: italic;
}
.narc-synopsis-step {
    margin-bottom: 0.75rem;
    padding-left: 0.85rem;
    animation: intakeSlideUp 0.35s ease-out;
}
.narc-synopsis-step-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    margin-bottom: 0.15rem;
}
.narc-synopsis-step.filled .narc-synopsis-step-label { color: var(--primary); }
.narc-synopsis-step-text {
    font-size: 0.82rem;
    color: var(--charcoal);
    line-height: 1.5;
}
.narc-synopsis-step-empty {
    font-size: 0.7rem;
    color: var(--slate);
    opacity: 0.5;
    font-style: italic;
}
.narc-vis-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--slate);
}
.narc-vis-progress-bar {
    flex: 1;
    max-width: 180px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.narc-vis-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--narc-context), var(--narc-pattern), var(--narc-change), var(--narc-resolution), var(--narc-difference));
    border-radius: 2px;
    transition: width 0.4s ease;
}
.narc-vis-panel-wrap {
    padding: 0.75rem 0.75rem 0;
}
.narc-vis-milestone {
    min-height: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin-top: 0.4rem;
    color: transparent;
    transition: color 0.3s ease;
}
.narc-vis-milestone--drafted {
    color: var(--slate);
}
.narc-vis-milestone--grounded {
    color: var(--primary);
}
.narc-view-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.25rem;
}
.narc-view-subtitle {
    font-size: 0.78rem;
    color: var(--slate);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.perspective-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--green) 8%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.perspective-hint svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; color: var(--green); }
.perspective-hint strong { color: var(--green); }
.perspective-hint-dismiss {
    background: none; border: none; cursor: pointer; color: var(--slate);
    font-size: 0.85rem; padding: 0; line-height: 1; opacity: 0.5;
    flex-shrink: 0;
}
.perspective-hint-dismiss:hover { opacity: 1; }
.narc-question {
    margin-bottom: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.narc-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    flex-shrink: 0;
    padding-top: 0.15rem;
}
.narc-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: var(--bg-surface);
    border: 2px solid var(--border-light);
    color: var(--slate);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
/* Per-step unfilled icon border tints */
[data-narc-step="0"] .narc-step-icon { border-color: var(--narc-context); color: var(--narc-context); }
[data-narc-step="1"] .narc-step-icon { border-color: var(--narc-pattern); color: var(--narc-pattern); }
[data-narc-step="2"] .narc-step-icon { border-color: var(--narc-change); color: var(--narc-change); }
[data-narc-step="3"] .narc-step-icon { border-color: var(--narc-resolution); color: var(--narc-resolution); }
[data-narc-step="4"] .narc-step-icon { border-color: var(--narc-difference); color: var(--narc-difference); }
/* Per-step filled icon backgrounds */
[data-narc-step="0"] .narc-step-icon.filled { background: var(--narc-context); border-color: var(--narc-context); color: var(--on-brand); }
[data-narc-step="1"] .narc-step-icon.filled { background: var(--narc-pattern); border-color: var(--narc-pattern); color: var(--on-brand); }
[data-narc-step="2"] .narc-step-icon.filled { background: var(--narc-change); border-color: var(--narc-change); color: var(--on-brand); }
[data-narc-step="3"] .narc-step-icon.filled { background: var(--narc-resolution); border-color: var(--narc-resolution); color: var(--on-brand); }
[data-narc-step="4"] .narc-step-icon.filled { background: var(--narc-difference); border-color: var(--narc-difference); color: var(--on-brand); }
.narc-step-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
    text-align: center;
}
/* Per-step label colors */
[data-narc-step="0"] .narc-step-label { color: var(--narc-context); }
[data-narc-step="1"] .narc-step-label { color: var(--narc-pattern); }
[data-narc-step="2"] .narc-step-label { color: var(--narc-change); }
[data-narc-step="3"] .narc-step-label { color: var(--narc-resolution); }
[data-narc-step="4"] .narc-step-label { color: var(--narc-difference); }
.narc-step-connector {
    width: 2px;
    height: 100%;
    min-height: 2rem;
    flex: 1;
    background: var(--border-light);
    margin-top: 0.35rem;
    transition: background 0.3s ease;
}
.narc-step-connector.filled {
    background: var(--border-light);
}
/* Per-step filled connector gradients */
[data-narc-step="0"] .narc-step-connector.filled { background: linear-gradient(to bottom, var(--narc-context), var(--narc-pattern)); }
[data-narc-step="1"] .narc-step-connector.filled { background: linear-gradient(to bottom, var(--narc-pattern), var(--narc-change)); }
[data-narc-step="2"] .narc-step-connector.filled { background: linear-gradient(to bottom, var(--narc-change), var(--narc-resolution)); }
[data-narc-step="3"] .narc-step-connector.filled { background: linear-gradient(to bottom, var(--narc-resolution), var(--narc-difference)); }
.narc-question-body {
    flex: 1;
    min-width: 0;
}
/* Per-step filled question label colors */
[data-narc-step="0"].narc-question-filled .narc-question-label { color: var(--narc-context); }
[data-narc-step="1"].narc-question-filled .narc-question-label { color: var(--narc-pattern); }
[data-narc-step="2"].narc-question-filled .narc-question-label { color: var(--narc-change); }
[data-narc-step="3"].narc-question-filled .narc-question-label { color: var(--narc-resolution); }
[data-narc-step="4"].narc-question-filled .narc-question-label { color: var(--narc-difference); }

/* Transition/Bridge rows between arc steps */
.narc-transition {
    margin: 0 0 0 28px;
    padding: 0;
    border-left: 2px dashed var(--border-light);
}
.narc-transition-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--slate);
    transition: color 0.15s;
}
.narc-transition-toggle:hover { color: var(--primary); }
.narc-transition-toggle svg { width: 12px; height: 12px; opacity: 0.5; }
.narc-transition-indicator {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--slate);
    opacity: 0.6;
}
.narc-transition-filled .narc-transition-indicator { color: var(--green); opacity: 1; }
.narc-transition-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height 0.25s ease, padding 0.25s ease;
}
.narc-transition.expanded .narc-transition-body {
    max-height: 200px;
    padding: 4px 12px 12px;
}
.narc-transition-prompt {
    font-size: 0.7rem;
    color: var(--slate);
    margin-bottom: 6px;
    font-style: italic;
}
.narc-transition-textarea {
    font-size: 0.78rem !important;
    min-height: 44px;
}

.narc-question-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.15rem;
    transition: color 0.2s ease;
}
.narc-question-note {
    font-size: 0.68rem;
    color: var(--slate);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.narc-textarea {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--charcoal);
    background: var(--bg-surface);
    resize: vertical;
    min-height: 2.5rem;
    line-height: 1.5;
    transition: border-color 0.15s;
}
.narc-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--shadow-primary);
}
/* Per-step textarea focus colors */
[data-narc-step="0"] .narc-textarea:focus { border-color: var(--narc-context); box-shadow: 0 0 0 3px color-mix(in srgb, var(--narc-context) 15%, transparent); }
[data-narc-step="1"] .narc-textarea:focus { border-color: var(--narc-pattern); box-shadow: 0 0 0 3px color-mix(in srgb, var(--narc-pattern) 15%, transparent); }
[data-narc-step="2"] .narc-textarea:focus { border-color: var(--narc-change); box-shadow: 0 0 0 3px color-mix(in srgb, var(--narc-change) 15%, transparent); }
[data-narc-step="3"] .narc-textarea:focus { border-color: var(--narc-resolution); box-shadow: 0 0 0 3px color-mix(in srgb, var(--narc-resolution) 15%, transparent); }
[data-narc-step="4"] .narc-textarea:focus { border-color: var(--narc-difference); box-shadow: 0 0 0 3px color-mix(in srgb, var(--narc-difference) 15%, transparent); }


/* ─── NAC VIEW ──────────────────────────────────── */
.nac-view {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    padding: 1.5rem;
    height: 100%;
    overflow: hidden;
}
.nac-left-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow-y: auto;
}
.nac-right-col {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}
@media (max-width: 768px) {
    .nac-view { flex-direction: column; overflow-y: auto; }
    .nac-right-col { width: 100%; overflow-y: visible; }
    .nac-left-col { overflow-y: visible; }
}
.nac-narc-ref {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
    flex-shrink: 0;
}
.nac-answers-ref {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.nac-answers-ref-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}
.nac-answers-ref-lens {
    margin-bottom: 0.75rem;
}
.nac-answers-ref-lens-title {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.3rem;
}
.nac-answers-ref-entry {
    font-size: 0.75rem;
    color: var(--charcoal);
    line-height: 1.4;
    padding: 0.2rem 0 0.2rem 0.6rem;
    border-left: 2px solid var(--border-light);
    margin-bottom: 0.25rem;
}
.nac-answers-ref-perspective {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: baseline;
}
.nac-answers-ref-perspective--initiator {
    color: var(--primary);
    background: var(--primary-tint-xs);
}
.nac-answers-ref-perspective--receiver {
    color: var(--rose);
    background: color-mix(in srgb, var(--rose) 10%, transparent);
}
.nac-narc-ref-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}
.nac-narc-ref-item {
    margin-bottom: 0.6rem;
}
.nac-narc-ref-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
}
.nac-narc-ref-value {
    font-size: 0.78rem;
    color: var(--charcoal);
    line-height: 1.4;
}

.nac-main {
    flex: 1;
    min-width: 0;
}
/* ─── NAC CONFIG BAR ────────────────────────────────── */
.nac-config-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    align-items: center;
}
.nac-config-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
/* Visual separator between groups so PERSPECTIVE / FLOW / FRAMING / SCOPE /
   DEPTH read as distinct chunks. Without it, the category label text sits
   inline with the pills and blends in visually (flagged by Jim from a dark-
   mode screenshot). Only applies between adjacent groups, so the first
   group doesn't get a leading rule. */
.nac-config-group + .nac-config-group {
    border-left: 1px solid var(--border-light);
    padding-left: 0.85rem;
}
.nac-config-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-right: 0.5rem;
    white-space: nowrap;
    cursor: help;
    border-bottom: 1px dotted var(--primary);
    padding-bottom: 1px;
}
.nac-config-pill {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: 'Open Sans', sans-serif;
}
.nac-config-pill:hover:not(:disabled) {
    background: var(--primary-tint-xs);
    border-color: var(--primary);
}
.nac-config-pill.active {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
    font-weight: 600;
}
.nac-config-pill.disabled {
    opacity: 0.4;
    cursor: default;
}
.nac-config-bar-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
}
.nac-config-done {
    font-size: 0.75rem;
    padding: 0.4rem 1.1rem;
    border-radius: 4px;
    border: 1.5px solid var(--charcoal);
    background: transparent;
    color: var(--charcoal);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-family: 'Open Sans', sans-serif;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.nac-config-done:hover {
    background: var(--charcoal);
    color: var(--on-brand);
}

/* ─── NAC CONFIG SUMMARY (collapsed bar) ────────────────── */
.nac-config-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
}
.nac-config-summary-icon {
    display: inline-flex;
    color: var(--primary);
    flex-shrink: 0;
}
.nac-config-summary-icon svg {
    width: 14px;
    height: 14px;
}
.nac-config-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--charcoal);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}
.nac-config-summary-recipe {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--charcoal);
    white-space: normal;
}
.nac-config-summary-axes {
    color: var(--slate);
    font-size: 0.75rem;
    white-space: normal;
    min-width: 0;
}
.nac-config-summary-edit,
.nac-config-summary-reset {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Open Sans', sans-serif;
    white-space: nowrap;
}
.nac-config-summary-edit:hover,
.nac-config-summary-reset:hover {
    background: var(--primary-tint-xs);
    border-color: var(--primary);
}
.nac-config-summary-edit {
    font-weight: 600;
    color: var(--primary);
    border-color: var(--primary);
}

/* ─── NAC SETUP SCREEN (pre-flight recipes) ─────────────── */
.nac-setup-screen {
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
}
.nac-setup-header {
    margin-bottom: 1rem;
}
.nac-setup-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.25rem;
}
.nac-setup-subtitle {
    font-size: 0.85rem;
    color: var(--slate);
}
.nac-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.nac-setup-recipe-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.9rem 0.9rem 0.8rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-family: 'Open Sans', sans-serif;
}
.nac-setup-recipe-card:hover {
    background: var(--primary-tint-xs);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.nac-setup-recipe-header {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    width: 100%;
}
.nac-setup-recipe-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-tint-xs);
    color: var(--primary);
    margin-top: 0.05rem;
}
.nac-setup-recipe-icon svg {
    width: 20px;
    height: 20px;
}
.nac-setup-recipe-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.25;
}
.nac-setup-recipe-scenario {
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.4;
}
.nac-setup-skip-preview {
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--primary-tint-xs);
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
}
.nac-setup-skip-preview-text {
    font-size: 0.82rem;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 0.35rem;
}
.nac-setup-skip-preview-example {
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.5;
    margin-bottom: 0.35rem;
}
.nac-setup-skip-preview-example em {
    color: var(--charcoal);
    font-style: italic;
}
.nac-setup-skip-preview-cta {
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.5;
}
.nac-setup-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}
.nac-setup-skip {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--slate);
    cursor: pointer;
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
}
.nac-setup-skip:hover {
    background: var(--primary-tint-xs);
    color: var(--charcoal);
}
@media (max-width: 600px) {
    .nac-setup-grid {
        grid-template-columns: 1fr;
    }
    .nac-config-summary-text {
        font-size: 0.75rem;
    }
}

/* ─── NAC VALUES PROMPT (inner-values mode) ────────────────── */
.nac-values-prompt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.25rem;
    background: var(--bg-surface);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    font-size: 0.75rem;
}
.nac-values-prompt label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    white-space: nowrap;
}
.nac-values-input {
    width: 100px;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Open Sans', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
}
.nac-values-input:focus {
    outline: none;
    border-color: var(--primary);
}
.nac-values-vs {
    font-size: 0.7rem;
    color: var(--slate);
    font-style: italic;
}

@media (max-width: 600px) {
    .nac-values-prompt { flex-wrap: wrap; }
    .nac-values-input { width: 80px; }
    .nac-config-bar {
        gap: 0.4rem;
        padding: 0.4rem 0.5rem;
    }
    .nac-config-label { font-size: 0.58rem; }
    .nac-config-pill { font-size: 0.62rem; padding: 0.15rem 0.4rem; }
}

/* ─── NAC Guided Sequence Panel ──────────────────────── */
.nac-guided-sequence {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--primary-tint-xs);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}
.nac-guided-sequence-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.6rem;
}
.nac-guided-sequence-row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.nac-guided-step {
    flex: 1 1 0;
    min-width: 110px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-panel, rgba(255,255,255,0.6));
    border: 1px solid color-mix(in srgb, var(--lens-color) 30%, transparent);
    border-left: 3px solid var(--lens-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-align: left;
    font: inherit;
}
.nac-guided-step:hover {
    background: color-mix(in srgb, var(--lens-color) 8%, transparent);
}
.nac-guided-step:active { transform: scale(0.98); }
.nac-guided-step-number {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lens-color);
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nac-guided-step-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.nac-guided-step-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.nac-guided-step-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.2;
}
.nac-guided-step-desc {
    font-size: 0.68rem;
    color: var(--slate);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nac-guided-arrow {
    display: flex;
    align-items: center;
    color: var(--slate);
    font-size: 1.1rem;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .nac-guided-arrow { display: none; }
    .nac-guided-step-desc { white-space: normal; }
}
.nac-guided-sequence-hint {
    font-size: 0.72rem;
    color: var(--slate);
    margin-top: 0.5rem;
    font-style: italic;
}

.nac-lens-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    transition: all 0.25s ease;
}
@media (max-width: 768px) {
    .nac-lens-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .nac-lens-grid { grid-template-columns: repeat(2, 1fr); }
}
.nac-lens-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.6rem;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.nac-lens-btn:hover {
    border-color: color-mix(in srgb, var(--lens-color) 60%, transparent);
    background: color-mix(in srgb, var(--lens-color) 6%, var(--bg-surface));
}
.nac-lens-btn.current {
    border-color: var(--lens-color);
    background: color-mix(in srgb, var(--lens-color) 10%, var(--bg-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lens-color) 20%, transparent);
}
.nac-lens-btn.has-entries {
    border-color: var(--lens-color);
    background: color-mix(in srgb, var(--lens-color) 8%, var(--bg-surface));
}
.nac-lens-btn.has-entries.current {
    border-color: var(--lens-color);
    background: color-mix(in srgb, var(--lens-color) 14%, var(--bg-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lens-color) 20%, transparent);
}
.nac-lens-btn.suggested {
    border-color: var(--lens-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lens-color) 25%, transparent);
    animation: nac-pulse 2s ease-in-out infinite;
}
@keyframes nac-pulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lens-color) 25%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lens-color) 15%, transparent); }
}
.nac-lens-suggested {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--lens-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.nac-lens-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nac-lens-icon .i {
    width: 36px;
    height: 36px;
    stroke-width: 1.2;
    transition: all 0.2s ease;
}
.nac-lens-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.2;
    transition: all 0.2s ease;
}
.nac-lens-count {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--lens-color);
    background: color-mix(in srgb, var(--lens-color) 12%, white);
    border-radius: 10px;
    padding: 0.1rem 0.35rem;
    transition: all 0.2s ease;
}
.nac-lens-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--slate);
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* Collapsed lens grid: compact icon row with labels, shrink-to-fit */
.nac-lens-grid.collapsed {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
}
.nac-lens-grid.collapsed .nac-lens-btn {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    padding: 0.4rem 0.2rem 0.25rem;
    border-radius: 8px;
    gap: 0.15rem;
    border-width: 1.5px;
}
.nac-lens-grid.collapsed .nac-lens-icon {
    flex-shrink: 0;
}
.nac-lens-grid.collapsed .nac-lens-icon .i {
    width: 36px;
    height: 36px;
    stroke-width: 1.2;
}
.nac-lens-grid.collapsed .nac-lens-label {
    font-size: 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.nac-lens-grid.collapsed .nac-lens-count {
    display: none;
}
.nac-lens-grid.collapsed .nac-lens-desc {
    display: none;
}

.nac-status-screen {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.nac-back-to-grid {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem;
    margin: -0.2rem 0 0.5rem -0.4rem;
    color: var(--slate);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.nac-back-to-grid:hover {
    background: var(--primary-tint-xs);
    color: var(--primary);
}
.nac-status-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nac-status-title .i {
    width: 18px;
    height: 18px;
}
.nac-module-provenance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--primary);
    background: var(--primary-tint-xs);
    border-radius: 20px;
    padding: 2px 8px;
    margin-bottom: 0.4rem;
}
.nac-module-provenance .i {
    width: 12px;
    height: 12px;
}
.nac-status-subtitle {
    font-size: 0.7rem;
    color: var(--slate);
    margin-bottom: 0.5rem;
}
.nac-status-desc {
    font-size: 0.78rem;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.nac-status-question {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.4;
    padding: 0.75rem;
    background: var(--primary-tint-xs);
    border-radius: 8px;
}

/* ─── NAC Connected Context ──────────────────────────── */
.nac-connected-context {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--primary-tint-xs);
    border-left: 3px solid var(--primary);
    border-radius: 0 6px 6px 0;
}
.nac-connected-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate);
    margin-bottom: 0.35rem;
}
.nac-connected-ref {
    font-size: 0.78rem;
    color: var(--charcoal);
    margin-bottom: 0.2rem;
}
.nac-connected-ref-title {
    font-weight: 600;
    font-size: 0.72rem;
}
.nac-connected-bridge {
    margin-top: 0.4rem;
    font-weight: 500;
    color: var(--charcoal);
    font-size: 0.82rem;
}

/* ─── Arc Connected Context ──────────────────────────── */
.arc-connected-context {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--primary-tint-xs);
    border-left: 3px solid var(--narc-pattern);
    border-radius: 0 6px 6px 0;
}
.arc-connected-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate);
    margin-bottom: 0.35rem;
}
.arc-connected-ref {
    font-size: 0.78rem;
    color: var(--charcoal);
    margin-bottom: 0.2rem;
}
.arc-connected-ref-title {
    font-weight: 600;
    font-size: 0.72rem;
}
.arc-connected-bridge {
    margin-top: 0.4rem;
    font-weight: 500;
    color: var(--charcoal);
    font-size: 0.82rem;
}

.nac-somatic-prompt {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--slate);
    margin-top: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
    line-height: 1.4;
}

.nac-entry-input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.nac-entry-input-row textarea { flex: 1; }
.nac-entry-add-btn {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    align-self: flex-start;
}
.nac-entry-add-btn:hover { background: var(--primary-mid); }

.nac-entry-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.nac-entry-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
}
.nac-entry-item-text {
    flex: 1;
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.nac-entry-delete-btn {
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    color: var(--slate);
    font-size: 0.65rem;
    transition: color 0.15s, border-color 0.15s;
}
.nac-entry-delete-btn:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.nac-entry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.25rem 0 0.35rem 0.35rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--primary-tint-lg);
}
.nac-entry-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--primary-tint-sm);
    color: var(--charcoal);
    cursor: pointer;
    transition: background 0.15s;
    max-width: 100%;
}
.nac-entry-chip:hover {
    background: var(--primary-tint-md);
}
.nac-entry-chip-type {
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
}
.nac-entry-chip-text {
    color: var(--slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.nac-go-curation {
    margin-top: 1.5rem;
    padding: 0.65rem 1.5rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.nac-go-curation:hover { background: var(--primary-mid); }
.nac-go-curation:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── NAC SCAN VIEW (friction mapping) ────────────────── */
.nac-scan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.nac-scan-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s;
}
.nac-scan-card.rated {
    border-color: var(--lens-color, var(--border-medium));
}
.nac-scan-card-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.nac-scan-card-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nac-scan-card-icon svg { width: 18px; height: 18px; }
.nac-scan-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--charcoal);
}
.nac-scan-card-subtitle {
    font-size: 0.7rem;
    color: var(--slate);
    line-height: 1.3;
}
.nac-friction-btns {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
}
.nac-friction-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--warm-white);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.nac-friction-btn:hover { background: var(--cream); }
.nac-friction-btn--clear.active { background: var(--color-success-light); border-color: var(--color-success-border); }
.nac-friction-btn--some.active { background: var(--color-warning-light); border-color: var(--color-warning-border); }
.nac-friction-btn--significant.active { background: var(--color-warning-light); border-color: var(--color-warning); }
.nac-friction-btn--blocked.active { background: var(--color-danger-light); border-color: var(--color-danger); }
.nac-friction-dot { line-height: 1; }
.nac-scan-explore-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-tint-sm);
    border: 1px solid var(--primary-tint-md);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.nac-scan-explore-btn:hover { background: var(--primary-tint-md); }
.nac-scan-explore-btn svg { width: 12px; height: 12px; }

/* Scan summary */
.nac-scan-summary {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.nac-scan-progress {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nac-scan-highlight {
    font-size: 0.8rem;
    color: var(--rose);
    font-weight: 500;
}
.nac-scan-patterns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.nac-scan-pattern-tag {
    font-size: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--primary-tint-sm);
    color: var(--primary);
    border-radius: 10px;
    border: 1px solid var(--primary-tint-md);
}
.nac-scan-to-deep {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--on-brand);
    background: var(--primary);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}
.nac-scan-to-deep:hover { opacity: 0.9; }
.nac-scan-to-deep svg { width: 12px; height: 12px; }

/* ─── NAC COMPARISON PROMPT ────────────────── */
.nac-comparison-prompt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.25rem;
    background: var(--bg-surface);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    font-size: 0.75rem;
    flex-wrap: wrap;
}
.nac-comparison-prompt label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    white-space: nowrap;
}

/* ─── NAC SNAPSHOT BAR ────────────────── */
.nac-snapshot-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.nac-snapshot-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1;
}
.nac-snapshot-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.7rem;
    color: var(--charcoal);
}
.nac-snapshot-chip-label { font-weight: 500; }
.nac-snapshot-chip-date { font-size: 0.62rem; color: var(--slate); }
.nac-snapshot-chip-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    font-size: 0.8rem;
    padding: 0 0.1rem;
    line-height: 1;
}
.nac-snapshot-chip-delete:hover { color: var(--rose); }
.nac-snapshot-actions {
    display: flex;
    gap: 0.3rem;
}
.nac-snapshot-save-btn, .nac-snapshot-diff-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-medium);
    background: var(--warm-white);
    color: var(--primary);
}
.nac-snapshot-save-btn:hover { background: var(--primary-tint-sm); }
.nac-snapshot-diff-btn { color: var(--violet); }
.nac-snapshot-diff-btn:hover { background: var(--violet-light); }
.nac-snapshot-save-btn.disabled { opacity: 0.4; cursor: default; }

/* ─── NAC DIFF VIEW (inside modal) ────────────────── */
.nac-diff-view {
    max-height: 60vh;
    overflow-y: auto;
}
.nac-diff-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
}
.nac-diff-label-a { color: var(--slate); }
.nac-diff-arrow { color: var(--slate); font-size: 1rem; }
.nac-diff-label-b { color: var(--primary); }
.nac-diff-lens {
    margin-bottom: 0.75rem;
}
.nac-diff-lens-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.nac-diff-entry {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.15rem;
    border-radius: 3px;
    line-height: 1.4;
}
.nac-diff-added { background: var(--color-success-light); color: var(--color-success-text); }
.nac-diff-removed { background: var(--color-danger-light); color: var(--color-danger-text); text-decoration: line-through; }
.nac-diff-friction { background: var(--color-warning-light); color: var(--color-warning-text); font-style: italic; }
.nac-diff-marker {
    font-weight: 700;
    margin-right: 0.3rem;
}
.nac-diff-persp {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.7;
    margin-right: 0.2rem;
}

@media (max-width: 600px) {
    .nac-snapshot-bar { flex-direction: column; align-items: flex-start; }
    .nac-comparison-prompt { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    .nac-scan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .nac-scan-grid { grid-template-columns: 1fr; }
    .nac-scan-card { padding: 0.6rem; }
}

/* ─── NAC SOLO COLUMN (full width, single perspective) ────────────────── */
.nac-solo-column {
    margin-bottom: 1rem;
}
.nac-solo-column .nac-perspective-col {
    max-width: 720px;
}
.nac-solo-column .nac-solo-textarea {
    min-height: 4.5rem;
    font-size: 0.88rem;
}

/* ─── NAC MULTI-PERSPECTIVE COLUMNS (3-4 columns) ────────────────── */
.nac-multi-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.nac-multi-columns .nac-perspective-col {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--bg-surface);
}
.nac-multi-columns .nac-perspective-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

/* Stacking mode unlock button */
.nac-stacked-unlock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 1rem;
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.nac-stacked-unlock-btn:hover {
    border-color: var(--primary);
    background: var(--primary-tint-sm);
}

/* Multi perspective naming prompt */
.nac-multi-prompt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.25rem;
    background: var(--bg-surface);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    font-size: 0.75rem;
    flex-wrap: wrap;
}
.nac-multi-prompt label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    white-space: nowrap;
}
.nac-multi-inputs {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.nac-multi-input {
    width: 110px;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Open Sans', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
}
.nac-multi-input:focus {
    outline: none;
    border-color: var(--primary);
}
.nac-multi-actions {
    display: flex;
    gap: 0.3rem;
}
.nac-multi-add-btn, .nac-multi-remove-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-medium);
    background: var(--warm-white);
    color: var(--primary);
}
.nac-multi-remove-btn { color: var(--rose); }
.nac-multi-add-btn:hover { background: var(--primary-tint-sm); }
.nac-multi-remove-btn:hover { background: var(--rose-light); }

/* Mobile: multi columns stack to single */
@media (max-width: 600px) {
    .nac-multi-columns { grid-template-columns: 1fr; }
    .nac-multi-input { width: 80px; }
}

/* ─── NAC DUAL-PERSPECTIVE COLUMNS (stacked: p0 first, p1 second) ────────────────── */
.nac-dual-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}
.nac-perspective-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 0.75rem;
}
.nac-perspective-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}
.nac-perspective-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nac-p0-col .nac-perspective-label { color: var(--primary); }
.nac-p1-col .nac-perspective-label { color: var(--rose); }
.nac-p2-col .nac-perspective-label { color: var(--violet); }
.nac-p3-col .nac-perspective-label { color: var(--gamboge); }
.nac-perspective-name {
    font-size: 0.78rem;
    color: var(--slate);
    font-weight: 500;
}

/* ─── NARRATIVE TOOL KIT VIEW ──────────────────── */
.toolkit-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem 0.75rem;
    border-bottom: 1px solid var(--primary-tint-xs);
}
.toolkit-page-desc {
    margin: 0;
    color: var(--slate);
    font-size: 0.85rem;
    line-height: 1.4;
    flex: 1;
}
.toolkit-view {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
.toolkit-sidebar-col {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
}
.toolkit-canvas-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow: hidden;
    /* Legacy — no longer used as wrapper */
}
.toolkit-right-col {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    margin-left: 1rem;
}
@media (max-width: 1024px) {
    .toolkit-view { flex-direction: column; overflow-y: auto; }
    .toolkit-right-col { width: 100%; overflow-y: visible; }
    .toolkit-nav-group { flex-direction: column; height: auto; }
    .toolkit-types-col { width: 100%; flex-direction: row; flex-wrap: wrap; border-radius: 0; border-bottom: 1px solid var(--border-light); border-right: none; }
    .toolkit-models-col { width: 100% !important; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid var(--border-light); border-right: none; border-radius: 0; padding: 0.5rem 0.25rem !important; }
    .toolkit-viz-area { border-left: none; border-radius: 0; }
}

/* Toolkit fullscreen: constrain width so content doesn't stretch edge-to-edge */
body.canvas-fullscreen .toolkit-view {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Types column (left nav within canvas) */
.toolkit-types-col {
    width: 72px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0.25rem;
    overflow-y: auto;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-light);
    border-radius: 0;
    justify-content: flex-start;
}
.toolkit-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.45rem 0.2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex: 0 0 auto;
    justify-content: center;
}
.toolkit-type-btn:hover {
    background: color-mix(in srgb, var(--cat-color, var(--primary)) 8%, transparent);
}
.toolkit-type-btn.active {
    background: color-mix(in srgb, var(--cat-color, var(--primary)) 12%, var(--bg-surface));
}
.toolkit-type-btn.active::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cat-color, var(--primary));
    border-radius: 0;
}
.toolkit-type-btn .i {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
    transition: width 0.2s ease, height 0.2s ease;
}
.toolkit-type-btn:hover .i {
    width: 32px;
    height: 32px;
}
.toolkit-type-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--slate);
    line-height: 1.1;
    text-align: center;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.2s ease, max-width 0.2s ease;
}
.toolkit-type-btn:hover .toolkit-type-label {
    font-size: 0.7rem;
    max-width: 100px;
}
.toolkit-type-btn.active .toolkit-type-label {
    color: var(--cat-color, var(--primary));
}
.toolkit-type-count {
    font-size: 0.42rem;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--cat-color, var(--primary));
    border-radius: 6px;
    padding: 0 0.2rem;
    min-width: 12px;
    text-align: center;
}

/* Nav group: types + models columns together for hover interaction */
.toolkit-nav-group {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition: width 0.2s ease;
}
.toolkit-nav-group.collapsed .toolkit-models-col {
    width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}
.toolkit-nav-toggle {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--slate);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s;
    padding: 0;
}
.toolkit-nav-toggle:hover {
    background: var(--bg-panel);
    color: var(--primary);
}
.toolkit-nav-toggle .i {
    width: 14px;
    height: 14px;
}

/* Models column (second nav within canvas) */
.toolkit-models-col {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.25rem;
    overflow: hidden;
    overflow-y: auto;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-light);
    border-radius: 0;
    white-space: nowrap;
}
.toolkit-models-col-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.15rem;
}
.toolkit-model-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}
.toolkit-model-btn:hover {
    background: color-mix(in srgb, var(--model-color, var(--primary)) 8%, transparent);
}
.toolkit-model-btn.current {
    background: color-mix(in srgb, var(--model-color, var(--primary)) 12%, var(--bg-surface));
    border-radius: 0;
    box-shadow: inset 3px 0 0 var(--model-color, var(--primary));
}
.toolkit-model-btn.has-entries .toolkit-model-label {
    color: var(--model-color, var(--primary));
}
.toolkit-model-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}
.toolkit-model-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.toolkit-model-count {
    font-size: 0.48rem;
    font-weight: 700;
    color: var(--model-color, var(--primary));
    background: color-mix(in srgb, var(--model-color, var(--primary)) 12%, white);
    border-radius: 10px;
    padding: 0.05rem 0.25rem;
    flex-shrink: 0;
}

/* Visualization area (main content right of models col) */
.toolkit-viz-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-light);
    border-radius: 0;
    overflow: hidden;
}
.toolkit-viz-header {
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
}
.toolkit-viz-header-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.toolkit-viz-header-title .i { width: 22px; height: 22px; }
.toolkit-viz-header-desc {
    font-size: 0.85rem;
    color: var(--slate);
    line-height: 1.5;
    margin-top: 0.3rem;
}
.tk-helps-with {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
}
.tk-helps-with-label {
    font-size: 0.7rem;
    color: var(--slate);
    font-weight: 600;
    margin-right: 0.15rem;
}
a.tk-helps-with-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--chip-color) 14%, transparent);
    color: var(--chip-color);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
a.tk-helps-with-chip:hover {
    background: color-mix(in srgb, var(--chip-color) 24%, transparent);
    text-decoration: none;
}
.journey-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--primary);
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    cursor: pointer;
}
.journey-inline-btn:hover {
    background: var(--primary-tint-sm);
    border-color: var(--primary);
}
.journey-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: var(--green);
    font-weight: 600;
}
.journey-inline-status .i { width: 12px; height: 12px; }
.journey-inline-removable { cursor: pointer; border-radius: 5px; padding: 0.15rem 0.45rem; transition: background 0.15s, color 0.15s; }
.journey-inline-removable:hover { background: var(--rose-light); color: var(--rose); }
.toolkit-viz-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.toolkit-canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--slate);
    gap: 0.5rem;
    padding: 2.5rem 3rem;
    text-align: center;
}
.toolkit-canvas-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, currentColor 8%, transparent);
    margin-bottom: 0.25rem;
}
.toolkit-canvas-empty-icon .i { width: 28px; height: 28px; stroke-width: 1.5; }
.toolkit-canvas-empty .i { width: 48px; height: 48px; stroke-width: 1; opacity: 0.4; }
.toolkit-canvas-empty-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.toolkit-canvas-empty-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    max-width: 380px;
}
.toolkit-canvas-empty-long {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 480px;
    color: var(--charcoal);
    margin-top: 0.25rem;
}
.toolkit-canvas-empty-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate);
    opacity: 0.7;
}
.toolkit-canvas-empty-hint .i { width: 12px; height: 12px; }

/* Input area within visualization */
.toolkit-detail-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.toolkit-detail-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.toolkit-detail-title .i { width: 16px; height: 16px; }
.toolkit-detail-desc {
    font-size: 0.88rem;
    color: var(--slate);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}
.toolkit-detail-question {
    font-size: 0.8rem;
    color: var(--charcoal);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.toolkit-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.toolkit-input-row textarea {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 2.5rem;
    line-height: 1.4;
    background: var(--bg-surface);
    color: var(--charcoal);
}
.toolkit-input-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-tint-xs);
}
.toolkit-add-btn {
    padding: 0.45rem 0.85rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.toolkit-add-btn:hover { background: var(--primary-mid); }

/* ─── Toolkit Tab Bar ──────────────────────── */
.toolkit-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    padding: 0 1.25rem;
    background: var(--bg-surface);
}
.toolkit-tab {
    flex: 1;
    padding: 0.55rem 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--slate);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: color 0.15s, border-color 0.15s;
}
.toolkit-tab .i { width: 14px; height: 14px; }
.toolkit-tab:hover { color: var(--charcoal); }
.toolkit-tab.active {
    color: var(--tab-color, var(--primary));
    border-bottom-color: var(--tab-color, var(--primary));
}

/* ─── Stage Selector (above tabs) ──────────── */
.toolkit-stage-selector {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.toolkit-stage-btn {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--slate);
    cursor: pointer;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    transition: all 0.15s;
}
.toolkit-stage-btn.filled {
    border-color: var(--stage-color, var(--primary));
    color: var(--stage-color, var(--primary));
    font-weight: 600;
}
.toolkit-stage-btn.current {
    border-color: var(--stage-color, var(--primary));
    background: color-mix(in srgb, var(--stage-color, var(--primary)) 12%, var(--bg-surface));
    color: var(--stage-color, var(--primary));
    font-weight: 600;
}
.toolkit-stage-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

/* ─── Guide / Example Tab Content ──────────── */
.toolkit-tab-content {
    padding: 0.75rem 0;
}
.toolkit-tab-stage-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.toolkit-tab-question {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.toolkit-tab-text {
    font-size: 0.92rem;
    color: var(--charcoal);
    line-height: 1.65;
    font-family: 'Inter', sans-serif;
}
.toolkit-tab-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 1.1rem 0 0.9rem;
}
.toolkit-markdown p { margin: 0 0 0.6em 0; }
.toolkit-markdown p:last-child { margin-bottom: 0; }
.toolkit-markdown h1, .toolkit-markdown h2, .toolkit-markdown h3,
.toolkit-markdown h4, .toolkit-markdown h5, .toolkit-markdown h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--charcoal);
    margin: 0.8em 0 0.3em;
    line-height: 1.3;
}
.toolkit-markdown h1 { font-size: 1.25rem; }
.toolkit-markdown h2 { font-size: 1.1rem; }
.toolkit-markdown h3 { font-size: 1rem; }
.toolkit-markdown h4, .toolkit-markdown h5, .toolkit-markdown h6 { font-size: 0.92rem; }
.toolkit-markdown h1:first-child, .toolkit-markdown h2:first-child,
.toolkit-markdown h3:first-child, .toolkit-markdown h4:first-child { margin-top: 0; }
.toolkit-markdown ul, .toolkit-markdown ol {
    margin: 0.4em 0 0.6em 1.4em;
    padding: 0;
}
.toolkit-markdown li { margin-bottom: 0.25em; }
.toolkit-markdown blockquote {
    margin: 0.5em 0;
    padding: 0.4em 0.8em;
    border-left: 3px solid var(--primary);
    background: var(--primary-tint-xs);
    color: var(--slate);
    font-style: italic;
    border-radius: 0 6px 6px 0;
}
.toolkit-markdown code {
    background: var(--primary-tint-xs);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: monospace;
}
.toolkit-markdown hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 0.8em 0;
}
.toolkit-markdown strong { font-weight: 600; }
.toolkit-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.toolkit-markdown th {
    text-align: left;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--charcoal);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border-medium);
}
.toolkit-markdown td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--charcoal);
}
.toolkit-markdown tr:last-child td {
    border-bottom: none;
}
.toolkit-tab-scenario {
    font-size: 0.72rem;
    color: var(--slate);
    font-style: italic;
    line-height: 1.5;
    padding: 0.6rem 0.85rem;
    background: var(--primary-tint-xs);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.toolkit-tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--slate);
    font-size: 0.78rem;
    font-style: italic;
}
.toolkit-tab-empty .i { width: 28px; height: 28px; opacity: 0.4; }

/* ─── Bottom Helper ────────────────────────── */
.toolkit-bottom-helper {
    padding: 0.55rem 1.25rem;
    font-size: 0.68rem;
    color: var(--slate);
    border-top: 1px solid var(--border-light);
    font-family: 'Inter', sans-serif;
    text-align: center;
    flex-shrink: 0;
}

/* Pattern: Grid 2x2 */
.toolkit-grid2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 768px) { .toolkit-grid2x2 { grid-template-columns: 1fr; } }
.toolkit-grid2x2-cell {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--bg-surface);
    min-height: 80px;
}
.toolkit-grid2x2-cell-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--border-light);
}
.toolkit-grid2x2-input {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.toolkit-grid2x2-input input {
    flex: 1;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
}
.toolkit-grid2x2-input input:focus { outline: none; border-color: var(--primary); }
.toolkit-grid2x2-input button {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: var(--primary);
    color: var(--on-brand);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* Pattern: Chain */
.toolkit-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.toolkit-chain-link {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 0.75rem;
}
.toolkit-chain-link::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}
.toolkit-chain-link:last-child::before { display: none; }
.toolkit-chain-link-marker {
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--model-color, var(--primary));
    color: var(--on-brand);
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}
.toolkit-chain-link-marker.empty { background: var(--border-light); color: var(--slate); }

/* Pattern: Structured Fields */
.toolkit-structured-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.toolkit-structured-field {
    padding-left: 0.75rem;
}
.toolkit-structured-field-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--model-color, var(--primary));
    margin-bottom: 0.25rem;
}
.toolkit-structured-field textarea {
    width: 100%;
    font-size: 0.78rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 2.2rem;
    line-height: 1.4;
    background: var(--bg-surface);
    color: var(--charcoal);
    box-sizing: border-box;
}
.toolkit-structured-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-tint-xs); }

/* Canvas visualization items */
.toolkit-empty-hint {
    font-size: 0.75rem;
    color: var(--slate);
    text-align: center;
    padding: 1rem;
}
.toolkit-vis-node {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    position: relative;
    transition: border-color 0.15s;
}
.toolkit-vis-node:hover { border-color: var(--primary-tint-bg); }
.toolkit-vis-node-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}
.toolkit-vis-node-text {
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.toolkit-vis-node-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.toolkit-vis-node-action {
    font-size: 0.65rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.toolkit-vis-node-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.toolkit-vis-node-action .i { width: 12px; height: 12px; }
.toolkit-vis-node-action.danger:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Five Whys specific - drill-down tree */
.toolkit-whys-chain {
    padding: 1.25rem;
}
.toolkit-why-level {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.toolkit-why-level::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}
.toolkit-why-level:last-child::before { display: none; }
.toolkit-why-level-marker {
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-brand);
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}
.toolkit-why-level-marker.empty {
    background: var(--border-light);
    color: var(--slate);
}

/* Assumptions specific - two columns */
.toolkit-assumptions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem;
}
@media (max-width: 768px) {
    .toolkit-assumptions-grid { grid-template-columns: 1fr; }
}
.toolkit-assumptions-col-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--border-light);
}
.toolkit-assumption-status {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.3rem;
}
.toolkit-assumption-status.unverified { background: var(--color-warning-light); color: var(--color-warning-text); }
.toolkit-assumption-status.confirmed { background: var(--primary-tint-bg); color: var(--primary); }
.toolkit-assumption-status.challenged { background: var(--color-danger-light); color: var(--color-danger-text); }

/* Stakeholder map specific - concentric circles */
.toolkit-stakeholder-map {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.toolkit-stakeholder-ring {
    border: 2px dashed var(--border-light);
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem;
    position: relative;
}
.toolkit-stakeholder-ring.core { width: 200px; min-height: 200px; border-color: var(--primary); }
.toolkit-stakeholder-ring.influence { width: 320px; min-height: 160px; border-color: var(--primary-tint-bg); border-radius: 12px; }
.toolkit-stakeholder-ring.peripheral { width: 100%; min-height: 100px; border-color: var(--border-light); border-radius: 12px; }
.toolkit-stakeholder-ring-label {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    padding: 0 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
}
.toolkit-stakeholder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    font-size: 0.7rem;
    color: var(--charcoal);
    font-weight: 500;
}

/* Gap analysis specific - side by side */
.toolkit-gap-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    padding: 1.25rem;
    align-items: start;
}
@media (max-width: 768px) {
    .toolkit-gap-columns { grid-template-columns: 1fr; }
    .toolkit-gap-bridge { transform: rotate(90deg); }
}
.toolkit-gap-col-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
}
.toolkit-gap-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    color: var(--slate);
}
.toolkit-gap-bridge .i { width: 24px; height: 24px; opacity: 0.5; }
.toolkit-gap-bridge-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Montserrat', sans-serif;
}

/* Reframing specific - central hub with radiating items */
.toolkit-reframe-hub {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.toolkit-reframe-original {
    background: var(--primary-tint-xs);
    border: 2px solid var(--primary);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    max-width: 400px;
    text-align: center;
}
.toolkit-reframe-original-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 0.3rem;
}
.toolkit-reframe-original-text {
    font-size: 0.85rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.toolkit-reframe-alts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

/* Values compass specific */
.toolkit-values-compass {
    padding: 1.25rem;
}
.toolkit-values-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .toolkit-values-columns { grid-template-columns: 1fr; }
}
.toolkit-values-col {
    padding-left: 0.75rem;
}
.toolkit-values-col-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.toolkit-values-col.initiator .toolkit-values-col-title { color: var(--primary); }
.toolkit-values-col.receiver .toolkit-values-col-title { color: var(--rose); }

/* Fishbone specific */
.toolkit-fishbone {
    padding: 1.25rem;
}
.toolkit-fishbone-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 768px) {
    .toolkit-fishbone-categories { grid-template-columns: repeat(2, 1fr); }
}
.toolkit-fishbone-cat {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem;
}
.toolkit-fishbone-cat-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.toolkit-fishbone-cat-title .i { width: 14px; height: 14px; }
.toolkit-fishbone-cause {
    font-size: 0.75rem;
    color: var(--charcoal);
    padding: 0.25rem 0 0.25rem 0.5rem;
    border-left: 2px solid var(--border-light);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

/* Ladder of Inference specific */
.toolkit-ladder {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.toolkit-ladder-rung {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}
.toolkit-ladder-rung:last-child { border-bottom: none; }
.toolkit-ladder-rung-number {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--primary-tint-xs);
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    flex-shrink: 0;
}
.toolkit-ladder-rung-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    margin-bottom: 0.15rem;
}
.toolkit-ladder-rung-text {
    font-size: 0.78rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.toolkit-ladder-rung.empty .toolkit-ladder-rung-number {
    background: var(--border-light);
    color: var(--slate);
}
.toolkit-ladder-rung.empty .toolkit-ladder-rung-label {
    color: var(--border-light);
}

/* Right panel reference sections */
.toolkit-ref-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
}
.toolkit-ref-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}
.toolkit-continue-btn {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 1.5rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.toolkit-continue-btn:hover { background: var(--primary-mid); }

/* ─── CURATION VIEW ─────────────────────────────── */
.curation-view {
    padding: 1.5rem;
    overflow-y: auto;
}
.curation-view-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.25rem;
}
.curation-view-subtitle {
    font-size: 0.78rem;
    color: var(--slate);
    margin-bottom: 1.5rem;
}
.curation-columns {
    display: flex;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .curation-columns { flex-direction: column; }
}
.curation-column {
    flex: 1;
    min-width: 0;
}
.curation-column-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}
.curation-group-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.curation-group-label .i {
    width: 14px;
    height: 14px;
}
.curation-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 0.4rem;
}
.curation-card-text {
    flex: 1;
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.curation-card-source {
    font-size: 0.58rem;
    color: var(--slate);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}
.curation-send-btn {
    padding: 0.3rem 0.65rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.curation-send-btn:hover { background: var(--primary-mid); }
.curation-send-btn.sent {
    background: var(--pillar-color);
    cursor: default;
}
.curation-nav-btns {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.curation-nav-btn {
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.curation-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.curation-nav-btn.primary {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
.curation-nav-btn.primary:hover { background: var(--primary-mid); }

/* ─── SOURCE METADATA ───────────────────────────── */
.node-source-meta {
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--primary-tint-xs);
    border: 1px solid var(--primary-tint-bg);
    border-radius: 6px;
}
.node-source-meta-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 0.2rem;
}
.node-source-meta-value {
    font-size: 0.75rem;
    color: var(--charcoal);
}
.node-source-warning {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--color-warning-text);
    line-height: 1.4;
}
.node-source-warning button {
    margin-top: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: none;
    border: 1px solid var(--color-warning-border);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-warning-text);
    cursor: pointer;
}

/* ── CLARITY SORT GAME ─────────────────────────────────────── */
.clarity-sort-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--canvas-bg, #F0F2F5);
    background-image: radial-gradient(circle, var(--canvas-dot, #D5DAE0) 0.8px, transparent 0.8px);
    background-size: 20px 20px;
    user-select: none;
}
body.dark-mode .clarity-sort-container {
    background-color: var(--canvas-bg);
    background-image: radial-gradient(circle, var(--canvas-dot) 0.8px, transparent 0.8px);
}

/* Wrapper that holds the clarity sort content beneath the organize tab bar.
   Fills the remaining flex height of .main-area below the sticky tab bar. */
.organize-content-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Progress bar at top */
.cs-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--border-lighter);
    border-radius: 0 0 3px 3px;
    z-index: 10;
}
.cs-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-mid));
    transition: width 0.4s ease;
    border-radius: 0 3px 3px 0;
}

/* Round header */
.cs-round-header {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 15;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs-round-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    margin-bottom: 2px;
    display: inline-block;
    padding: 2px 10px;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-surface));
    border-radius: 100px;
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    line-height: 1.4;
}
.cs-round-question {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate);
    max-width: 320px;
}
body.dark-mode .cs-round-label { color: var(--primary); }
body.dark-mode .cs-round-question { color: var(--charcoal); }

/* Counter */
.cs-counter {
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate);
    z-index: 15;
}
body.dark-mode .cs-counter { color: var(--charcoal); }

/* Streak badge */
.cs-streak {
    position: absolute;
    top: 12px;
    left: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gamboge);
    background: rgba(154, 108, 8, 0.12);
    padding: 3px 12px;
    border-radius: 100px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
}
.cs-streak.visible { opacity: 1; transform: scale(1.05); }
body.dark-mode .cs-streak { background: rgba(200, 160, 40, 0.15); }

/* ── QUADRANT GRID ── */
.cs-quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* row-gap is enlarged to create a clear center channel for the floating
       deck card; column-gap stays tight. */
    gap: 20px 6px;
    position: absolute;
    top: 56px;
    left: 8px;
    right: 8px;
    bottom: 40px;
    z-index: 1;
}

.cs-quadrant {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 14px;
    border: 1.5px solid;
    transition: background 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease, transform 0.15s ease;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Push bottom-row quadrant headers/hints away from the floating deck card. */
.cs-q-bl, .cs-q-br {
    padding-top: 20px;
}

/* Quadrant color themes — Round 1 */
.cs-q-must {
    border-color: color-mix(in srgb, var(--gamboge) 25%, transparent);
    background: color-mix(in srgb, var(--gamboge) 6%, var(--bg-surface));
}
.cs-q-must .cs-quadrant-label { color: var(--gamboge); }
.cs-q-must .cs-quadrant-hint { color: var(--gamboge); }

.cs-q-should {
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface));
}
.cs-q-should .cs-quadrant-label { color: var(--primary); }
.cs-q-should .cs-quadrant-hint { color: var(--primary); }

.cs-q-could {
    border-color: color-mix(in srgb, var(--ultraviolet) 22%, transparent);
    background: color-mix(in srgb, var(--ultraviolet) 5%, var(--bg-surface));
}
.cs-q-could .cs-quadrant-label { color: var(--ultraviolet); }
.cs-q-could .cs-quadrant-hint { color: var(--ultraviolet); }

.cs-q-shouldnt {
    border-color: color-mix(in srgb, var(--rose) 22%, transparent);
    background: color-mix(in srgb, var(--rose) 5%, var(--bg-surface));
}
.cs-q-shouldnt .cs-quadrant-label { color: var(--rose); }
.cs-q-shouldnt .cs-quadrant-hint { color: var(--rose); }

/* Quadrant color themes — Round 2 */
.cs-q-idea {
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface));
}
.cs-q-idea .cs-quadrant-label { color: var(--primary); }
.cs-q-idea .cs-quadrant-hint { color: var(--primary); }

.cs-q-story {
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
    background: color-mix(in srgb, var(--green) 6%, var(--bg-surface));
}
.cs-q-story .cs-quadrant-label { color: var(--green); }
.cs-q-story .cs-quadrant-hint { color: var(--green); }

.cs-q-data {
    border-color: color-mix(in srgb, var(--ultraviolet) 22%, transparent);
    background: color-mix(in srgb, var(--ultraviolet) 5%, var(--bg-surface));
}
.cs-q-data .cs-quadrant-label { color: var(--ultraviolet); }
.cs-q-data .cs-quadrant-hint { color: var(--ultraviolet); }

.cs-q-context {
    border-color: color-mix(in srgb, var(--neutral) 22%, transparent);
    background: color-mix(in srgb, var(--neutral) 5%, var(--bg-surface));
}
.cs-q-context .cs-quadrant-label { color: var(--neutral); }
.cs-q-context .cs-quadrant-hint { color: var(--neutral); }

/* Dark mode quadrant adjustments */
body.dark-mode .cs-q-must { border-color: color-mix(in srgb, var(--gamboge) 20%, transparent); background: color-mix(in srgb, var(--gamboge) 6%, var(--bg-surface)); }
body.dark-mode .cs-q-should { border-color: color-mix(in srgb, var(--primary) 20%, transparent); background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface)); }
body.dark-mode .cs-q-could { border-color: color-mix(in srgb, var(--ultraviolet) 18%, transparent); background: color-mix(in srgb, var(--ultraviolet) 5%, var(--bg-surface)); }
body.dark-mode .cs-q-shouldnt { border-color: color-mix(in srgb, var(--rose) 18%, transparent); background: color-mix(in srgb, var(--rose) 5%, var(--bg-surface)); }
body.dark-mode .cs-q-idea { border-color: color-mix(in srgb, var(--primary) 20%, transparent); background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface)); }
body.dark-mode .cs-q-story { border-color: color-mix(in srgb, var(--green) 20%, transparent); background: color-mix(in srgb, var(--green) 6%, var(--bg-surface)); }
body.dark-mode .cs-q-data { border-color: color-mix(in srgb, var(--ultraviolet) 18%, transparent); background: color-mix(in srgb, var(--ultraviolet) 5%, var(--bg-surface)); }
body.dark-mode .cs-q-context { border-color: color-mix(in srgb, var(--neutral) 18%, transparent); background: color-mix(in srgb, var(--neutral) 5%, var(--bg-surface)); }

/* Quadrant drag-over glow */
.cs-quadrant.cs-drag-over {
    transform: scale(1.01);
    border-width: 2px;
}
.cs-q-must.cs-drag-over { background: color-mix(in srgb, var(--gamboge) 15%, transparent); border-color: var(--gamboge); box-shadow: 0 0 30px color-mix(in srgb, var(--gamboge) 25%, transparent), inset 0 0 16px color-mix(in srgb, var(--gamboge) 8%, transparent); }
.cs-q-should.cs-drag-over { background: color-mix(in srgb, var(--primary) 15%, transparent); border-color: var(--primary); box-shadow: 0 0 30px color-mix(in srgb, var(--primary) 25%, transparent), inset 0 0 16px color-mix(in srgb, var(--primary) 8%, transparent); }
.cs-q-could.cs-drag-over { background: color-mix(in srgb, var(--ultraviolet) 12%, transparent); border-color: var(--ultraviolet); box-shadow: 0 0 30px color-mix(in srgb, var(--ultraviolet) 20%, transparent), inset 0 0 16px color-mix(in srgb, var(--ultraviolet) 6%, transparent); }
.cs-q-shouldnt.cs-drag-over { background: color-mix(in srgb, var(--rose) 12%, transparent); border-color: var(--rose); box-shadow: 0 0 30px color-mix(in srgb, var(--rose) 20%, transparent), inset 0 0 16px color-mix(in srgb, var(--rose) 6%, transparent); }
.cs-q-idea.cs-drag-over { background: color-mix(in srgb, var(--primary) 15%, transparent); border-color: var(--primary); box-shadow: 0 0 30px color-mix(in srgb, var(--primary) 25%, transparent), inset 0 0 16px color-mix(in srgb, var(--primary) 8%, transparent); }
.cs-q-story.cs-drag-over { background: color-mix(in srgb, var(--green) 15%, transparent); border-color: var(--green); box-shadow: 0 0 30px color-mix(in srgb, var(--green) 25%, transparent), inset 0 0 16px color-mix(in srgb, var(--green) 8%, transparent); }
.cs-q-data.cs-drag-over { background: color-mix(in srgb, var(--ultraviolet) 12%, transparent); border-color: var(--ultraviolet); box-shadow: 0 0 30px color-mix(in srgb, var(--ultraviolet) 20%, transparent), inset 0 0 16px color-mix(in srgb, var(--ultraviolet) 6%, transparent); }
.cs-q-context.cs-drag-over { background: color-mix(in srgb, var(--neutral) 12%, transparent); border-color: var(--neutral); box-shadow: 0 0 30px color-mix(in srgb, var(--neutral) 20%, transparent), inset 0 0 16px color-mix(in srgb, var(--neutral) 6%, transparent); }

/* Quadrant header */
.cs-quadrant-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cs-quadrant-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cs-quadrant-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--neutral-light);
    color: var(--slate);
}
.cs-quadrant-key {
    margin-left: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    color: var(--slate);
    opacity: 0.7;
}
body.dark-mode .cs-quadrant-key { background: var(--topbar-bg); border-color: var(--border-medium); }

.cs-quadrant-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    opacity: 0.7;
    margin-bottom: 8px;
}

/* Quadrant cards area */
.cs-quadrant-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
    flex: 1;
    min-height: 0;
}

/* ── SORTED CHIPS (cards that landed in quadrants) ── */
.cs-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
    max-width: 100%;
    animation: csChipLand 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    touch-action: none;
}
.cs-chip:hover { transform: scale(1.04); }
.cs-chip:active { cursor: grabbing; }
.cs-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chip colors match their quadrant */
.cs-chip.cs-q-must { background: color-mix(in srgb, var(--gamboge) 18%, transparent); color: var(--gamboge); border: 1px solid color-mix(in srgb, var(--gamboge) 30%, transparent); }
.cs-chip.cs-q-should { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.cs-chip.cs-q-could { background: color-mix(in srgb, var(--ultraviolet) 15%, transparent); color: var(--ultraviolet); border: 1px solid color-mix(in srgb, var(--ultraviolet) 25%, transparent); }
.cs-chip.cs-q-shouldnt { background: color-mix(in srgb, var(--rose) 15%, transparent); color: var(--rose); border: 1px solid color-mix(in srgb, var(--rose) 25%, transparent); }
.cs-chip.cs-q-idea { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.cs-chip.cs-q-story { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.cs-chip.cs-q-data { background: color-mix(in srgb, var(--ultraviolet) 15%, transparent); color: var(--ultraviolet); border: 1px solid color-mix(in srgb, var(--ultraviolet) 25%, transparent); }
.cs-chip.cs-q-context { background: color-mix(in srgb, var(--neutral) 15%, transparent); color: var(--neutral); border: 1px solid color-mix(in srgb, var(--neutral) 25%, transparent); }

.cs-chip.cs-dragging-source { opacity: 0.3; }

@keyframes csChipLand {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── DECK AREA (center overlay) ──
   Anchored so the card's bottom sits at the row gap between quadrants.
   This keeps the card from overlapping bottom-row quadrant headers when
   the card title wraps to multiple lines. */
.cs-deck-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.cs-deck-area > * { pointer-events: auto; }

.cs-deck-remaining {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: 4px;
    text-align: center;
    pointer-events: none;
    background: var(--bg-surface);
    padding: 2px 12px;
    border-radius: 100px;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 4px var(--shadow-xs);
}

/* Deck pile shadow (stacked card effect) */
.cs-deck-shadow {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: 260px;
    max-width: 68%;
    height: 100px;
    background: var(--bg-surface);
    border: 1.5px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-xs);
    z-index: -1;
    pointer-events: none;
}
.cs-deck-shadow-2 {
    transform: translateX(-50%) rotate(-1.5deg);
    top: 28px;
    z-index: -2;
    opacity: 0.6;
}
body.dark-mode .cs-deck-shadow { background: var(--topbar-bg); border-color: color-mix(in srgb, var(--primary) 10%, transparent); }

/* The draggable card */
.cs-card {
    position: relative;
    width: 280px;
    max-width: 72%;
    background: var(--bg-surface);
    border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
    border-radius: 14px;
    padding: 18px 18px;
    box-shadow: 0 8px 32px var(--shadow-md), 0 2px 8px var(--shadow-xs), 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
    cursor: grab;
    z-index: 30;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    touch-action: none;
}
.cs-card:hover { box-shadow: 0 10px 40px var(--shadow-lg), 0 4px 12px var(--shadow-sm), 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent); }
.cs-card:active { cursor: grabbing; transform: scale(1.02); box-shadow: 0 14px 48px var(--shadow-lg), 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.cs-card.cs-card-enter {
    animation: csCardEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes csCardEnter {
    from { opacity: 0; transform: translateY(30px) scale(0.88); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.dark-mode .cs-card {
    background: var(--topbar-bg);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    box-shadow: 0 8px 32px var(--shadow-lg), 0 2px 8px var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), 0 0 24px color-mix(in srgb, var(--primary) 6%, transparent);
}
body.dark-mode .cs-card:hover {
    box-shadow: 0 10px 40px var(--shadow-xl), 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent), 0 0 32px color-mix(in srgb, var(--primary) 10%, transparent);
}
body.dark-mode .cs-card:active {
    box-shadow: 0 14px 48px var(--shadow-xl), 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 12%, transparent);
}

.cs-card-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 8px;
    margin-bottom: 0;
    opacity: 0.7;
}
.cs-card-source.source-arc     { background: var(--primary-tint-bgest); color: var(--primary); }
.cs-card-source.source-nac     { background: var(--rose-light); color: var(--rose); }
.cs-card-source.source-toolkit { background: var(--ultraviolet-light); color: var(--ultraviolet); }
.cs-card-source.source-manual  { background: var(--neutral-light); color: var(--neutral); }

.cs-card-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 6px;
    word-break: break-word;
}

.cs-card-context {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--slate);
    line-height: 1.4;
    font-style: italic;
}
body.dark-mode .cs-card-context { color: var(--slate); }

/* Conviction stars shown on card in Round 2 */
.cs-card-stars {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.68rem;
    color: var(--gamboge);
}

/* Conviction pill on card in Round 2 */
.cs-card-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

/* ── DRAG GHOST (clone that follows cursor) ── */
.cs-drag-ghost {
    position: fixed;
    z-index: var(--z-modal);
    pointer-events: none;
    opacity: 0.85;
    transform: rotate(3deg) scale(1.04);
    box-shadow: 0 16px 48px var(--shadow-lg);
    transition: none;
}

/* ── CONTROLS (bottom bar) ── */
.cs-controls {
    position: absolute;
    bottom: 6px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 25;
}

.cs-undo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    transition: background 0.15s, opacity 0.2s;
    opacity: 0;
    pointer-events: none;
}
.cs-undo-btn.visible { opacity: 1; pointer-events: auto; }
.cs-undo-btn:hover { background: var(--cream); }
body.dark-mode .cs-undo-btn { background: var(--topbar-bg); border-color: var(--border-medium); color: var(--charcoal); }

.cs-keyboard-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: var(--slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}
body.dark-mode .cs-keyboard-hint { color: var(--neutral); }

/* ── Interstitial (between rounds) ── */
.cs-interstitial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    animation: csCardEnter 0.4s ease forwards;
}
.cs-interstitial-emoji {
    font-size: 2.4rem;
    margin-bottom: 12px;
    animation: csBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes csBounceIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}
.cs-interstitial-celebrate {
    animation: csCardEnter 0.5s ease forwards;
}
.cs-interstitial-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}
.cs-interstitial-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--slate);
    margin-bottom: 16px;
}
.cs-interstitial-stats {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--slate);
    margin-bottom: 16px;
    line-height: 1.7;
}
.cs-interstitial-detail {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--slate);
    margin-bottom: 24px;
    line-height: 1.6;
}
.cs-interstitial-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.82rem;
    margin: 3px 4px;
}
.cs-interstitial-stat.must { background: var(--gamboge-light); color: var(--gamboge); }
.cs-interstitial-stat.should { background: var(--primary-tint-bgest); color: var(--primary); }
.cs-interstitial-stat.could { background: var(--ultraviolet-light); color: var(--ultraviolet); }
.cs-interstitial-stat.shouldnt { background: color-mix(in srgb, var(--rose) 15%, transparent); color: var(--rose); }
body.dark-mode .cs-interstitial-title { color: var(--primary); }
body.dark-mode .cs-interstitial-stats { color: var(--charcoal); }
body.dark-mode .cs-interstitial-detail { color: var(--charcoal); }
body.dark-mode .cs-interstitial-stats strong { color: var(--on-brand); }
body.dark-mode .cs-interstitial-stat.must { background: color-mix(in srgb, var(--gamboge) 20%, transparent); color: var(--gamboge); }
body.dark-mode .cs-interstitial-stat.should { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }
body.dark-mode .cs-interstitial-stat.could { background: color-mix(in srgb, var(--ultraviolet) 20%, transparent); color: var(--ultraviolet); }
body.dark-mode .cs-interstitial-stat.shouldnt { background: color-mix(in srgb, var(--rose) 20%, transparent); color: var(--rose); }

.cs-continue-btn {
    padding: 10px 28px;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.cs-continue-btn:hover { background: var(--primary-mid); }

/* ── Results screen ── */
.cs-results-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 24px;
}
.cs-results-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--charcoal);
    text-align: center;
    margin-bottom: 6px;
}
.cs-results-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--slate);
    text-align: center;
    margin-bottom: 24px;
}
body.dark-mode .cs-results-subtitle { color: var(--slate); }

.cs-results-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    .cs-results-columns { grid-template-columns: repeat(2, 1fr); }
}
.cs-results-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cs-results-col-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 8px;
    border-bottom: 2.5px solid var(--border-lighter);
    margin-bottom: 6px;
}
.cs-results-col-header.type-idea    { color: var(--primary); border-color: var(--primary); }
.cs-results-col-header.type-story   { color: var(--green); border-color: var(--green); }
.cs-results-col-header.type-data    { color: var(--ultraviolet); border-color: var(--ultraviolet); }
.cs-results-col-header.type-context { color: var(--rose); border-color: var(--rose); }

.cs-result-card {
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-lighter);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--charcoal);
    line-height: 1.5;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-result-card:hover {
    border-color: var(--primary-tint-bg);
    box-shadow: 0 2px 8px var(--shadow-sm);
}
body.dark-mode .cs-result-card { background: var(--topbar-bg); border-color: var(--border-medium); color: var(--charcoal); }
body.dark-mode .cs-result-card:hover { border-color: rgba(106, 170, 184, 0.3); }

/* Priority pill on result cards */
.cs-result-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.cs-result-pill.must { background: color-mix(in srgb, var(--gamboge) 18%, transparent); color: var(--gamboge); }
.cs-result-pill.should { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.cs-result-pill.could { background: color-mix(in srgb, var(--ultraviolet) 15%, transparent); color: var(--ultraviolet); }

.cs-result-text {
    word-break: break-word;
}

/* Results actions */
.cs-results-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.cs-results-done-btn {
    padding: 10px 28px;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.cs-results-done-btn:hover { background: var(--primary-mid); }
.cs-results-skip-btn {
    padding: 10px 20px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate);
    cursor: pointer;
}
.cs-results-skip-btn:hover { background: var(--cream); }
body.dark-mode .cs-results-skip-btn { color: var(--slate); border-color: var(--border-medium); }
body.dark-mode .cs-results-skip-btn:hover { background: var(--white-overlay); color: var(--charcoal); }

/* ── Sort sidebar ── */
.cs-sidebar-card-detail {
    padding: 12px;
    margin: 0 8px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.cs-sidebar-card-source {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.cs-sidebar-card-source.source-arc     { background: var(--primary-tint-bgest); color: var(--primary); }
.cs-sidebar-card-source.source-nac     { background: var(--rose-light); color: var(--rose); }
.cs-sidebar-card-source.source-toolkit { background: var(--ultraviolet-light); color: var(--ultraviolet); }
.cs-sidebar-card-source.source-manual  { background: var(--neutral-light); color: var(--neutral); }
.cs-sidebar-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 4px;
}
.cs-sidebar-card-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--slate);
    line-height: 1.5;
    font-style: italic;
}

/* Decision helper prompt */
.cs-sidebar-prompt {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 8px 10px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}
.cs-sidebar-prompt-icon {
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0.7;
}
.cs-sidebar-prompt-icon svg { width: 16px; height: 16px; }
.cs-sidebar-prompt-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--charcoal);
    line-height: 1.5;
    font-style: italic;
}
body.dark-mode .cs-sidebar-prompt { background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* Quick-assign buttons */
.cs-sidebar-quick-assign {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px 8px;
}
.cs-sidebar-quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: none;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.cs-sidebar-quick-btn:hover { transform: scale(1.02); }
.cs-sidebar-quick-btn.cs-q-must { color: var(--gamboge); border-color: color-mix(in srgb, var(--gamboge) 30%, transparent); }
.cs-sidebar-quick-btn.cs-q-must:hover { background: color-mix(in srgb, var(--gamboge) 10%, transparent); border-color: var(--gamboge); }
.cs-sidebar-quick-btn.cs-q-should { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.cs-sidebar-quick-btn.cs-q-should:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: var(--primary); }
.cs-sidebar-quick-btn.cs-q-could { color: var(--ultraviolet); border-color: color-mix(in srgb, var(--ultraviolet) 25%, transparent); }
.cs-sidebar-quick-btn.cs-q-could:hover { background: color-mix(in srgb, var(--ultraviolet) 8%, transparent); border-color: var(--ultraviolet); }
.cs-sidebar-quick-btn.cs-q-shouldnt { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 25%, transparent); }
.cs-sidebar-quick-btn.cs-q-shouldnt:hover { background: color-mix(in srgb, var(--rose) 8%, transparent); border-color: var(--rose); }
.cs-sidebar-quick-btn.cs-q-idea { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.cs-sidebar-quick-btn.cs-q-idea:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: var(--primary); }
.cs-sidebar-quick-btn.cs-q-story { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.cs-sidebar-quick-btn.cs-q-story:hover { background: color-mix(in srgb, var(--green) 10%, transparent); border-color: var(--green); }
.cs-sidebar-quick-btn.cs-q-data { color: var(--ultraviolet); border-color: color-mix(in srgb, var(--ultraviolet) 25%, transparent); }
.cs-sidebar-quick-btn.cs-q-data:hover { background: color-mix(in srgb, var(--ultraviolet) 8%, transparent); border-color: var(--ultraviolet); }
.cs-sidebar-quick-btn.cs-q-context { color: var(--neutral); border-color: color-mix(in srgb, var(--neutral) 25%, transparent); }
.cs-sidebar-quick-btn.cs-q-context:hover { background: color-mix(in srgb, var(--neutral) 8%, transparent); border-color: var(--neutral); }

.cs-sidebar-quick-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--slate);
}
body.dark-mode .cs-sidebar-quick-key { background: var(--topbar-bg); border-color: var(--border-medium); }

/* Sidebar bucket sections */
.cs-sidebar-section {
    margin-bottom: 6px;
}
.cs-sidebar-bucket-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.cs-sidebar-bucket-count {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--neutral-light);
    color: var(--slate);
}
.cs-sidebar-bucket-items {
    padding: 0 12px 6px 24px;
}
.cs-sidebar-item {
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--charcoal);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s;
}
.cs-sidebar-item:hover { background: var(--primary-tint-bgest); }
body.dark-mode .cs-sidebar-item { color: var(--charcoal); }
body.dark-mode .cs-sidebar-item:hover { background: rgba(43, 122, 138, 0.15); }
body.dark-mode .cs-sidebar-bucket-count { background: var(--white-overlay); color: var(--slate); }
body.dark-mode .cs-sidebar-exit-btn { color: var(--slate); border-color: var(--border-medium); }
body.dark-mode .cs-sidebar-exit-btn:hover { background: rgba(200, 204, 224, 0.08); }

.cs-sidebar-exit-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 10px 12px;
    padding: 8px 0;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    text-align: center;
}
.cs-sidebar-exit-btn:hover { background: var(--cream); }

/* ── Empty state + inline idea adder ── */
.cs-empty-state {
    text-align: center;
    max-width: 400px;
    margin: 0 auto 20px;
    padding: 20px;
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}
.cs-empty-icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    animation: csBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cs-empty-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 6px;
    line-height: 1.4;
}
.cs-empty-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Inline adder */
.cs-inline-adder {
    text-align: left;
    padding: 14px;
    background: color-mix(in srgb, var(--primary) 4%, transparent);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
}
.cs-inline-adder-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}
.cs-inline-adder-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.cs-inline-input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--charcoal);
    background: var(--bg-surface);
    outline: none;
    transition: border-color 0.2s;
}
.cs-inline-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.cs-inline-input::placeholder { color: var(--slate); opacity: 0.7; }
body.dark-mode .cs-inline-input { background: var(--topbar-bg); border-color: var(--border-medium); }
body.dark-mode .cs-inline-input:focus { border-color: var(--primary); }

.cs-inline-add-btn {
    padding: 0 1rem;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
    white-space: nowrap;
}
.cs-inline-add-btn:hover { background: var(--primary-mid); transform: scale(1.05); }
.cs-inline-add-btn:active { transform: scale(0.95); }

/* Added ideas display */
.cs-inline-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 0;
}
.cs-inline-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.cs-inline-chip-enter {
    animation: csChipLand 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cs-inline-counter {
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate);
    text-align: center;
}
#csInlineReady {
    color: var(--green);
    font-weight: 700;
}

/* ── Phone responsiveness for quadrant mode ── */
@media (max-width: 600px) {
    .cs-quadrant-grid {
        top: 42px;
        left: 4px;
        right: 4px;
        bottom: 36px;
        gap: 12px 4px;
    }
    .cs-quadrant { padding: 8px; border-radius: 10px; }
    .cs-q-bl, .cs-q-br { padding-top: 14px; }
    .cs-quadrant-label { font-size: 0.65rem; }
    .cs-quadrant-hint { font-size: 0.58rem; margin-bottom: 4px; }
    .cs-quadrant-key { display: none; }
    .cs-chip { font-size: 0.6rem; padding: 3px 7px; }
    .cs-card { width: 220px; max-width: 65%; padding: 12px 12px; }
    .cs-card-text { font-size: 0.82rem; }
    .cs-card-source { font-size: 0.6rem; }
    .cs-deck-shadow { width: 240px; max-width: 65%; }
    .cs-round-header { top: 10px; }
    .cs-round-label { font-size: 0.62rem; }
    .cs-round-question { font-size: 0.7rem; }
    .cs-counter { top: 10px; right: 8px; font-size: 0.68rem; }
    .cs-streak { top: 10px; left: 8px; font-size: 0.68rem; }
    .cs-controls { bottom: 4px; left: 6px; right: 6px; }
    .cs-keyboard-hint { display: none; }
}

/* ── Conviction / Content-Type Tag Badges ── */
.node-conviction-badge,
.node-type-badge {
    position: absolute;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-family: 'Montserrat', sans-serif;
}
.node-conviction-badge {
    top: 3px;
    right: 3px;
}
.node-type-badge {
    bottom: 3px;
    right: 3px;
    background: var(--bg-panel);
    color: var(--slate);
    border: 1px solid var(--border-light);
    font-size: 0.48rem;
}
.tag-must { background: var(--gamboge); color: var(--on-brand); }
.tag-should { background: var(--primary); color: var(--on-brand); }
.tag-could { background: var(--ultraviolet); color: var(--on-brand); }
.tag-shouldnt { background: var(--rose); color: var(--on-brand); }

/* Right panel / sidebar tag badges */
.node-tag-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0.75rem 8px;
}
.node-tag-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
}

/* Outline inline tag dot */
.outline-tag-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}
.outline-tag-letter {
    display: inline-block;
    font-size: 0.52rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--slate);
    margin-left: 2px;
    vertical-align: middle;
}

/* Role suggestions on results screen */
.cs-role-suggestions {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border-radius: 10px;
    border: 2px solid var(--primary-tint-md);
    max-width: 600px;
    width: 100%;
}
.cs-role-suggestions-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--charcoal);
    margin-bottom: 4px;
}
.cs-role-suggestions-subtitle {
    font-size: 0.78rem;
    color: var(--slate);
    margin-bottom: 14px;
    line-height: 1.4;
}
.cs-role-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    border-left: 4px solid var(--border-light);
}
.cs-role-suggestion.anchor { border-left-color: var(--primary); background: var(--primary-tint-xs); }
.cs-role-suggestion.pillar { border-left-color: var(--green); background: var(--green-light); }
.cs-role-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 56px;
}
.cs-role-suggestion.anchor .cs-role-label { color: var(--primary); }
.cs-role-suggestion.pillar .cs-role-label { color: var(--green); }
.cs-role-name {
    font-size: 0.82rem;
    color: var(--charcoal);
    flex: 1;
}
.cs-apply-roles-btn {
    margin-top: 12px;
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.cs-apply-roles-btn:hover { background: var(--primary-mid); }

/* ══════════════════════════════════════════════════════════════
   PHONE-SPECIFIC TOOL VIEW TWEAKS (≤600px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* ── Arc view: tighter spacing ─────────────────────────── */
    .narc-layout { padding: 0.75rem 0.5rem 4rem; gap: 1rem; }
    .narc-step-row { gap: 0.5rem; }
    .narc-step-number { width: 28px; height: 28px; font-size: 0.7rem; }
    .narc-textarea { font-size: 0.9rem; min-height: 60px; }
    .narc-perspective-name { font-size: 0.7rem; }

    /* ── NAC view: tighter lens grid ───────────────────────── */
    .nac-lens-grid { gap: 0.4rem; }
    .nac-lens-btn { padding: 0.4rem 0.5rem; font-size: 0.7rem; }
    .nac-layout { padding: 0.75rem 0.5rem 4rem; }
    .nac-input-area textarea { font-size: 0.9rem; }

    /* ── Toolkit: hide nav when model selected on phone ─── */
    .toolkit-view.toolkit-model-active .toolkit-nav-group {
        display: none;
    }
    .toolkit-view.toolkit-model-active .toolkit-viz-area {
        border-radius: 0;
        border-left: none;
    }
    .toolkit-phone-back {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.6rem 1rem;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border-light);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
        width: 100%;
    }

    /* ── Toolkit: compact nav on phone ─────────────────── */
    .toolkit-types-col {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        padding: 0.25rem !important;
    }
    .toolkit-type-btn { flex-shrink: 0; }
    .toolkit-type-label { font-size: 0.55rem; }
    .toolkit-models-col {
        gap: 1px !important;
        padding: 0.35rem 0.25rem !important;
    }
    .toolkit-model-btn { font-size: 0.7rem; padding: 0.35rem 0.5rem; }
    .toolkit-view { padding: 0; }

    /* ── Recommendations / Journey: pad bottom for tab bar ── */
    .journey-layout { padding-bottom: 4rem !important; }

    /* ── General: all tool views clear the bottom tab bar ──── */
    .pipeline-view,
    .narc-layout,
    .nac-layout,
    .toolkit-layout { padding-bottom: 4rem; }
}

/* Touch targets — ensure minimum 44x44px on mobile */
@media (max-width: 768px) {
    .rec-panel-dismiss,
    .nac-entry-delete-btn,
    .toolkit-add-btn,
    .outline-toggle-btn,
    .toast-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ─── BADGES ──────────────────────────────────────── */

/* Badge count in user menu */
.badge-menu-count {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: auto;
    font-weight: 600;
}

/* Badge toast — celebration popup */
.badge-toast {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: var(--bg-surface);
    border: 2px solid var(--gamboge, #9A6C08);
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: var(--z-modal-below);
    box-shadow: var(--shadow-xl), 0 0 30px color-mix(in srgb, var(--gamboge) 25%, transparent);
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.badge-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.badge-toast-hide {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
}
.badge-toast-icon {
    font-size: 2rem;
    line-height: 1;
    animation: badgeBounce 0.6s ease;
}
@keyframes badgeBounce {
    0%   { transform: scale(0.3) rotate(-20deg); }
    50%  { transform: scale(1.3) rotate(5deg); }
    70%  { transform: scale(0.9) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}
.badge-toast-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.badge-toast-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gamboge);
    font-weight: 700;
    font-family: var(--font-heading, Montserrat, sans-serif);
}
.badge-toast-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    font-family: var(--font-heading, Montserrat, sans-serif);
}

/* Badge panel overlay */
.badge-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.badge-panel {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 90vw;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.badge-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.badge-panel-header h2 {
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 1.3rem;
    margin: 0;
    color: var(--charcoal);
}
.badge-panel-count {
    font-size: 0.85rem;
    color: var(--slate);
    font-weight: 600;
}
.badge-panel-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    padding: 4px;
    border-radius: 6px;
}
.badge-panel-close:hover {
    background: var(--primary-tint-sm);
}

/* Progress bar */
.badge-panel-progress {
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}
.badge-panel-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--gamboge));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Category */
.badge-category {
    margin-bottom: 18px;
}
.badge-category-header {
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.badge-category-count {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Badge grid */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.badge-item {
    --badge-color: var(--primary);
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.badge-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.badge-earned {
    border-color: color-mix(in srgb, var(--badge-color) 45%, transparent);
    background: color-mix(in srgb, var(--badge-color) 5%, var(--bg-panel));
}
.badge-locked {
    opacity: 0.5;
}
.badge-locked .badge-icon {
    filter: grayscale(1);
}
.badge-granted-locked {
    opacity: 0.65;
    border-style: dotted;
    border-color: var(--badge-color);
}
.badge-granted-locked .badge-icon {
    animation: grantedShimmer 3s ease-in-out infinite;
}
@keyframes grantedShimmer {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
.badge-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--badge-color) 26%, var(--bg-panel)),
        color-mix(in srgb, var(--badge-color) 10%, var(--bg-panel)) 70%
    );
    color: var(--badge-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-color) 28%, transparent);
    transition: box-shadow 0.25s;
}
.badge-icon .i,
.badge-icon svg {
    width: 26px;
    height: 26px;
}
.badge-earned .badge-icon {
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--badge-color) 55%, transparent),
        0 0 14px color-mix(in srgb, var(--badge-color) 35%, transparent);
}
.badge-name {
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 3px;
}
.badge-desc {
    font-size: 0.68rem;
    color: var(--slate);
    line-height: 1.3;
}

/* Phone: 2 columns */
@media (max-width: 600px) {
    .badge-panel {
        width: 95vw;
        padding: 16px;
        max-height: 85vh;
    }
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ── Badge Tier 2 ── */
.badge-tier2-header {
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    margin: 1rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--primary-tint-md);
}
.badge-tier2-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    margin-top: 0.75rem;
    background: var(--primary-tint-xs);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--slate);
}
.badge-tier2-locked svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ─── CONFETTI ANIMATION (anniversary celebration) ─── */
.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti-burst 2s ease-out forwards;
}
.confetti-piece:nth-child(odd) {
    width: 6px;
    height: 10px;
    border-radius: 50%;
}

@keyframes confetti-burst {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--confetti-y)) translateX(var(--confetti-x)) rotate(var(--confetti-r)) scale(0.5);
    }
}

/* ─── AI COACHING ─────────────────────────────────────── */

.coaching-btn-wrap {
    display: flex;
    flex-direction: column;
}

/* Ask Gus button — icon-only, overlaid in bottom-right of textarea */
.coaching-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--primary);
    background: var(--primary-tint-xs);
    border: 1px solid var(--primary-tint-sm);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    /* Float up into the bottom-right of the preceding textarea */
    align-self: flex-end;
    margin-top: -36px;
    margin-right: 4px;
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
    opacity: 0.7;
}
.coaching-btn:hover {
    background: var(--primary-tint-sm);
    border-color: var(--primary-tint-md);
    opacity: 1;
    transform: scale(1.1);
}
.coaching-btn:active {
    transform: scale(0.97);
}
.coaching-btn .i {
    width: 18px;
    height: 18px;
}

/* Card container */
.coaching-card-container {
    margin-top: 0.5rem;
}

/* Coaching nudge card */
.coaching-card {
    background: var(--primary-tint-xs);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    animation: coaching-card-in 0.25s ease-out;
}
@keyframes coaching-card-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.coaching-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.coaching-card-title {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
}
.coaching-card-title .i {
    width: 14px;
    height: 14px;
}
.coaching-card-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    padding: 2px;
    border-radius: 4px;
    line-height: 0;
}
.coaching-card-dismiss:hover {
    color: var(--charcoal);
    background: var(--primary-tint-sm);
}
.coaching-card-dismiss .i {
    width: 12px;
    height: 12px;
}

/* Individual nudge items */
.coaching-nudge-item {
    font-size: 0.82rem;
    color: var(--charcoal);
    line-height: 1.5;
    padding: 0.35rem 0;
}
.coaching-nudge-item + .coaching-nudge-item {
    border-top: 1px solid var(--border-light);
}
.coaching-nudge-type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Montserrat', sans-serif;
}
.coaching-nudge-text {
    color: var(--slate);
}

/* Loading state */
.coaching-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
}
.coaching-loading-dots {
    display: flex;
    gap: 4px;
}
.coaching-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    animation: coaching-dot-pulse 1.2s infinite ease-in-out;
}
.coaching-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.coaching-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes coaching-dot-pulse {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}
.coaching-loading-text {
    font-size: 0.78rem;
    color: var(--slate);
    font-style: italic;
}

/* Credit badge — sits inside tool rail flex layout, above sidebar control */
.ai-credit-badge {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    font-family: 'Inter', sans-serif;
    color: var(--slate);
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.2rem 0.3rem;
    pointer-events: none;
    box-shadow: var(--shadow-xs);
    align-self: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.ai-credit-badge .ai-credit-icon {
    width: 11px;
    height: 11px;
}
body.rail-expanded .ai-credit-badge {
    width: 154px;
    justify-content: flex-start;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
}

/* The Clarity Insights accordion panel CSS (.insight-count-badge, .insight-prompt,
 * .insight-type-pills/pill, .insight-capture, .insight-list, .insight-list-item)
 * was removed in April 2026 along with renderInsightPanel. Highlight-to-tag
 * capture lives in css/insight-capture.css (.ic-*). */

/* ─── UNIVERSAL QUESTIONS VIEW ─────────────────────── */
.uq-view {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.uq-header {
    text-align: center;
    margin-bottom: 2rem;
}
.uq-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.uq-title svg { width: 20px; height: 20px; color: var(--primary); }
.uq-subtitle {
    font-size: 0.85rem;
    color: var(--slate);
    margin-top: 0.4rem;
    line-height: 1.5;
}
.uq-progress {
    font-size: 0.75rem;
    color: var(--slate);
    margin-top: 0.5rem;
    font-weight: 600;
}
.uq-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.uq-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--uq-color, var(--primary));
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.uq-card:hover { box-shadow: var(--shadow-sm); }
.uq-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-lighter);
}
.uq-card-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--uq-color, var(--primary));
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.uq-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--charcoal);
    flex: 1;
}
.uq-card-source {
    font-size: 0.7rem;
    color: var(--slate);
    font-style: italic;
    white-space: nowrap;
}
.uq-card-body {
    padding: 0.75rem 1rem 1rem;
}
.uq-question-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--uq-color, var(--primary));
    margin-bottom: 0.3rem;
}
.uq-question-text {
    font-size: 0.85rem;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.uq-textarea {
    width: 100%;
    box-sizing: border-box;
}
.uq-textarea:focus {
    border-color: var(--uq-color, var(--primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--uq-color, var(--primary)) 15%, transparent);
}
@media (max-width: 600px) {
    .uq-view { padding: 1rem 0.75rem 2rem; }
    .uq-card-source { display: none; }
}

/* ─── COACHING VIEW ──────────────────────────────── */
.coaching-view-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.coaching-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.coaching-view-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
}
.coaching-change-type-btn {
    background: none;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--slate);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.coaching-change-type-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.coaching-type-select {
    text-align: center;
    padding: 2rem 0;
}
.coaching-type-prompt {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
}
.coaching-type-hint {
    font-size: 0.9rem;
    color: var(--slate);
    margin-bottom: 1.5rem;
}
.coaching-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--charcoal);
}
.coaching-empty-icon {
    margin-bottom: 1rem;
}
.coaching-empty-icon svg {
    width: 48px;
    height: 48px;
    color: var(--slate);
}
.coaching-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.coaching-progress-bar-wrap {
    position: relative;
    flex: 1;
    min-width: 120px;
    height: 22px;
    background: var(--border-light);
    border-radius: 11px;
    overflow: hidden;
}
.coaching-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 11px;
    transition: width 0.3s ease;
    min-width: 0;
}
.coaching-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--charcoal);
    pointer-events: none;
}
.coaching-toolbar-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}
.coaching-toolbar-actions .coaching-change-type-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}
.coaching-toolbar-actions .coaching-change-type-btn svg {
    width: 14px;
    height: 14px;
}
.coaching-section-progress {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--slate);
    margin-left: 0.5rem;
}
.coaching-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-light);
}
.coaching-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-xs);
}
.coaching-question-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.coaching-question-hint {
    font-size: 0.85rem;
    color: var(--slate);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.coaching-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--charcoal);
    background: var(--warm-white);
    resize: vertical;
}
.coaching-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-tint-sm);
}
.coaching-q61-gaps {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.coaching-q61-gap {
    padding-left: 1rem;
    border-left: 2px solid var(--primary-tint-sm);
}
@media (max-width: 600px) {
    .coaching-view-container { padding: 1rem 0.75rem 2rem; }
    .coaching-view-header h2 { font-size: 1.1rem; }
}

/* ─── +IDEA / CAPTURED IDEAS FEEDBACK ──────────────── */
.outline-unassigned-flash {
    animation: unassignedFlash 1.2s ease;
}
@keyframes unassignedFlash {
    0%, 100% { background-color: transparent; }
    30% { background-color: var(--primary-tint-sm, rgba(13, 92, 107, 0.12)); }
}

/* Section title flash — brief green pulse to celebrate capture */
.captured-ideas-flash {
    animation: capturedTitleFlash 1.5s ease;
}
@keyframes capturedTitleFlash {
    0%   { color: inherit; transform: scale(1); }
    20%  { color: var(--green); transform: scale(1.04); }
    60%  { color: var(--green); }
    100% { color: inherit; transform: scale(1); }
}

/* Newest captured idea — green glow ring that fades */
.captured-idea-new {
    animation: capturedIdeaGlow 2s ease;
    border-radius: 6px;
}
@keyframes capturedIdeaGlow {
    0%   { background: transparent; box-shadow: none; }
    12%  { background: color-mix(in srgb, var(--green) 14%, transparent);
           box-shadow: 0 0 0 2px var(--green); }
    50%  { background: color-mix(in srgb, var(--green) 8%, transparent);
           box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 40%, transparent); }
    100% { background: transparent; box-shadow: none; }
}

/* ─── INLINE TAG PROMPT (+idea creation tagging) ──── */
.inline-tag-prompt {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    box-shadow: var(--shadow-md);
    animation: fadeSlideIn 0.2s ease;
}
.inline-tag-header {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inline-tag-skip {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--slate);
    cursor: pointer;
    opacity: 0.7;
}
.inline-tag-skip:hover { opacity: 1; text-decoration: underline; }
.inline-tag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.inline-tag-label {
    font-size: 0.75rem;
    color: var(--slate);
    min-width: 52px;
}
.inline-tag-btn {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Montserrat', sans-serif;
}
.inline-tag-btn:hover {
    border-color: var(--primary);
    background: var(--primary-tint-sm);
}
.inline-tag-btn.selected {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
    font-weight: 600;
}
.inline-tag-btn.tag-must { border-color: var(--green); }
.inline-tag-btn.tag-must:hover, .inline-tag-btn.tag-must.selected { background: var(--green); color: var(--on-brand); border-color: var(--green); }
.inline-tag-btn.tag-should { border-color: var(--gamboge); }
.inline-tag-btn.tag-should:hover, .inline-tag-btn.tag-should.selected { background: var(--gamboge); color: var(--on-brand); border-color: var(--gamboge); }
.inline-tag-btn.tag-could { border-color: var(--slate); }
.inline-tag-btn.tag-could:hover, .inline-tag-btn.tag-could.selected { background: var(--slate); color: var(--on-brand); border-color: var(--slate); }
.inline-tag-btn.tag-idea { border-color: var(--primary); }
.inline-tag-btn.tag-idea:hover, .inline-tag-btn.tag-idea.selected { background: var(--primary); color: var(--on-brand); border-color: var(--primary); }
.inline-tag-btn.tag-story { border-color: var(--rose); }
.inline-tag-btn.tag-story:hover, .inline-tag-btn.tag-story.selected { background: var(--rose); color: var(--on-brand); border-color: var(--rose); }
.inline-tag-btn.tag-evidence { border-color: var(--violet); }
.inline-tag-btn.tag-evidence:hover, .inline-tag-btn.tag-evidence.selected { background: var(--violet); color: var(--on-brand); border-color: var(--violet); }
.inline-tag-btn.tag-context { border-color: var(--ultraviolet); }
.inline-tag-btn.tag-context:hover, .inline-tag-btn.tag-context.selected { background: var(--ultraviolet); color: var(--on-brand); border-color: var(--ultraviolet); }
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── +IDEA BUTTON (on clarifier A answers) ──── */
.idea-from-clarifier-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--green);
    background: transparent;
    color: var(--green);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 8px;
}
.idea-from-clarifier-btn:hover {
    background: var(--green);
    color: var(--on-brand);
}
.idea-from-clarifier-btn.on-canvas {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    cursor: default;
    opacity: 0.8;
}
.idea-from-clarifier-btn.on-canvas:hover {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}
/* ─── NODE ORIGIN BADGE (sidebar) ──── */
.node-origin-badge {
    font-size: 0.72rem;
    color: var(--slate);
    padding: 6px 10px;
    margin: 0 8px 6px;
    border-left: 3px solid var(--primary);
    background: var(--bg-surface);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    transition: background 0.15s ease;
}
.node-origin-badge:hover {
    background: var(--primary-tint-sm);
}
.node-origin-badge.manual {
    border-left-color: var(--slate);
    opacity: 0.6;
}
.node-origin-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ─── NODE ORIGIN BADGE INLINE (canvas nodes) ──── */
.node-origin-badge-inline {
    font-size: 0.65rem;
    color: var(--slate);
    padding: 4px 8px;
    margin-top: 6px;
    border-left: 2px solid var(--primary);
    background: var(--bg-surface);
    border-radius: 0 4px 4px 0;
    display: block;
    transition: background 0.15s ease;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node-origin-badge-inline:hover {
    background: var(--primary-tint-sm);
}

.discovery-on-canvas-badge {
    font-size: 0.6rem;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: auto;
    flex-shrink: 0;
    font-weight: 500;
    pointer-events: none;
}
.discovery-item-bottom .idea-from-clarifier-btn {
    margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════ */
/* MESSAGING & SHARING                                        */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Messaging Container (split pane) ─────────────────── */
.messaging-container {
    display: flex;
    height: 100%;
    min-height: 0;
    background: var(--bg-surface);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.messaging-sidebar {
    width: 280px;
    min-width: 220px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
}
.messaging-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}
.messaging-sidebar-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
}
.msg-new-btn {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-surface));
    border: 1.5px solid color-mix(in srgb, var(--primary) 20%, transparent);
    cursor: pointer;
    color: var(--primary);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.msg-new-btn:hover { background: var(--primary-tint-sm); color: var(--primary); border-color: var(--primary); }
.msg-new-btn svg { width: 16px; height: 16px; }

.messaging-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.msg-conv-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-lighter);
    transition: background 0.15s;
}
.msg-conv-item:hover { background: var(--primary-tint-xs); }
.msg-conv-item.active {
    background: var(--primary-tint-sm);
    border-left: 3px solid var(--primary);
}
.msg-conv-item.msg-unread .msg-conv-title { font-weight: 700; }
.msg-conv-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-preview {
    font-size: 0.75rem;
    color: var(--slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-time {
    font-size: 0.65rem;
    color: var(--slate);
    margin-top: 2px;
}

/* ─── Messaging Main Area ──────────────────────────────── */
.messaging-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.messaging-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--slate);
    gap: 1rem;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 4%, transparent) 0%, transparent 70%);
}
.messaging-empty-state p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--slate);
    margin: 0;
}
.messaging-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface));
    border: 1.5px solid color-mix(in srgb, var(--primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.messaging-empty-icon svg { width: 36px; height: 36px; opacity: 0.5; color: var(--primary); }
.messaging-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--slate);
    font-size: 0.82rem;
}

/* ─── Message Thread ───────────────────────────────────── */
.msg-thread-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-panel);
}
.msg-thread-header h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
}
.msg-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.msg-bubble {
    max-width: 75%;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
}
.msg-mine {
    align-self: flex-end;
    background: var(--primary);
    color: var(--on-brand);
    border-bottom-right-radius: 4px;
}
.msg-theirs {
    align-self: flex-start;
    background: var(--bg-panel);
    color: var(--charcoal);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: 4px;
}
.msg-bubble-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2px;
    font-size: 0.68rem;
    opacity: 0.7;
}
.msg-mine .msg-bubble-meta { justify-content: flex-end; }
.msg-sender { font-weight: 600; }
.msg-bubble-body { word-break: break-word; }
.msg-session-ref {
    margin-top: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: rgba(0,0,0,0.08);
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.msg-session-ref:hover { background: rgba(0,0,0,0.14); }
.msg-session-ref svg { width: 12px; height: 12px; }

/* ─── Compose ──────────────────────────────────────────── */
.msg-compose {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-panel);
}
.msg-compose-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    min-height: 38px;
    max-height: 120px;
    background: var(--bg-surface);
    color: var(--charcoal);
    outline: none;
}
.msg-compose-input:focus { border-color: var(--primary); }
.msg-send-btn {
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.msg-send-btn:hover { opacity: 0.85; }
.msg-send-btn svg { width: 14px; height: 14px; }

/* ─── New Conversation ─────────────────────────────────── */
.msg-new-conv {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.msg-new-conv h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
}
.msg-search-row { position: relative; }
.msg-search-input,
.msg-conv-title-input {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    background: var(--bg-surface);
    color: var(--charcoal);
    outline: none;
    box-sizing: border-box;
}
.msg-search-input:focus,
.msg-conv-title-input:focus { border-color: var(--primary); }
.msg-search-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-user-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--charcoal);
}
.msg-user-result:hover { background: var(--primary-tint-xs); }
.msg-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-tint-sm);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.msg-coach-badge {
    font-size: 0.62rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--green);
    color: var(--on-brand);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.msg-no-results {
    padding: 0.5rem;
    color: var(--slate);
    font-size: 0.78rem;
}
.msg-selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.msg-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: var(--primary-tint-sm);
    color: var(--primary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}
.msg-selected-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
}
.msg-new-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ─── Community Discussion Spaces ─────────────────────── */

.community-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
}
.community-sidebar {
    width: 240px;
    min-width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-light);
    background: var(--bg-panel);
}
.community-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}
.community-sidebar-header h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    margin: 0;
}
.com-new-space-btn {
    background: var(--primary-tint-sm);
    border: none;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--primary);
    display: flex;
    align-items: center;
}
.com-new-space-btn:hover { background: var(--primary-tint-md); }

.community-space-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.com-space-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.5rem 1rem 0.25rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.com-space-group-label svg { width: 12px; height: 12px; }
.com-space-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 3px solid transparent;
    transition: background 0.15s;
    font-size: 0.85rem;
    color: var(--charcoal);
}
.com-space-item:hover { background: var(--primary-tint-xs); }
.com-space-item.active {
    background: var(--primary-tint-sm);
    border-left-color: var(--green);
    font-weight: 600;
}
.com-space-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.com-unread-badge {
    background: var(--green);
    color: var(--on-brand);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Community main area */
.community-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
}
.community-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--slate);
}
.community-empty-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-tint-sm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.community-empty-icon svg { width: 28px; height: 28px; color: var(--primary); }
.community-empty { color: var(--slate); padding: 1rem; font-size: 0.85rem; }

/* Space header */
.com-space-header {
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
}
.com-space-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.com-space-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--charcoal);
}
.com-space-desc {
    font-size: 0.82rem;
    color: var(--slate);
    margin: 0.25rem 0 0.5rem;
}

/* Topic chips */
.com-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0;
}
.com-topic-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--charcoal);
    transition: all 0.15s;
}
.com-topic-chip:hover { border-color: var(--primary); color: var(--primary); }
.com-topic-chip.active {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
.com-add-topic {
    border-style: dashed;
    color: var(--slate);
}
.com-add-topic:hover { color: var(--primary); border-color: var(--primary); }

/* Post controls (sort + new post) */
.com-post-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}
.com-sort-bar {
    display: flex;
    gap: 0.25rem;
}
.com-sort-btn {
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--slate);
}
.com-sort-btn.active {
    background: var(--primary-tint-sm);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}
.com-new-post-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--green);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.com-new-post-btn:hover { opacity: 0.85; }
.com-new-post-btn svg { width: 14px; height: 14px; }

/* Post list */
.com-post-list {
    flex: 1;
    overflow-y: auto;
}
.com-post-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.15s;
}
.com-post-card:hover { background: var(--primary-tint-xs); }
.com-post-card-left { flex-shrink: 0; }
.com-post-card-body { flex: 1; min-width: 0; }
.com-post-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
}
.com-post-author { font-weight: 600; color: var(--charcoal); }
.com-post-time { color: var(--slate); }
.com-post-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.com-post-card-preview {
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.com-post-card-stats {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--slate);
}
.com-post-card-stats span {
    display: flex;
    align-items: center;
    gap: 3px;
}
.com-post-card-stats svg { width: 13px; height: 13px; }

/* Badges */
.com-post-topic {
    background: var(--primary-tint-sm);
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
}
.com-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gamboge);
}
.com-pinned-badge svg { width: 11px; height: 11px; }
.com-closed-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--rose);
    background: var(--rose-light);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Avatar */
.com-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-tint-md);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.com-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 0.6rem;
}

/* Post detail */
.com-post-detail {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.com-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0.75rem;
}
.com-back-btn:hover { text-decoration: underline; }
.com-back-btn svg { width: 14px; height: 14px; }

.com-post-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}
.com-post-header-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}
.com-post-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--charcoal);
}
.com-post-body {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--charcoal);
    margin-bottom: 1rem;
    word-break: break-word;
}

/* Mention highlight */
.community-mention {
    background: var(--primary-tint-sm);
    color: var(--primary);
    font-weight: 600;
    padding: 0 3px;
    border-radius: 3px;
}

/* Reaction bar */
.com-reaction-bar {
    display: flex;
    gap: 0.3rem;
    margin: 0.5rem 0;
}
.com-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 3px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.com-reaction-btn:hover { border-color: var(--primary); background: var(--primary-tint-xs); }
.com-reaction-btn.active {
    border-color: var(--primary);
    background: var(--primary-tint-sm);
}
.com-reaction-emoji { font-size: 0.85rem; }
.com-reaction-count { font-weight: 600; color: var(--charcoal); }

/* Moderation controls */
.com-mod-controls {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}
.com-mod-btn {
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--slate);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.com-mod-btn:hover { border-color: var(--primary); color: var(--primary); }
.com-mod-btn svg { width: 12px; height: 12px; }
.com-mod-btn.com-danger { color: var(--rose); }
.com-mod-btn.com-danger:hover { border-color: var(--rose); }

/* Replies section */
.com-replies-section {
    margin-top: 1rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
}
.com-replies-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.75rem;
}
.com-reply {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-lighter);
}
.com-reply:last-child { border-bottom: none; }
.com-reply-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
}
.com-reply-author { font-weight: 600; color: var(--charcoal); }
.com-reply-time { color: var(--slate); }
.com-reply-delete {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}
.com-reply:hover .com-reply-delete { opacity: 1; }
.com-reply-delete:hover { color: var(--rose); }
.com-reply-delete svg { width: 12px; height: 12px; }
.com-reply-body {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--charcoal);
    word-break: break-word;
}

/* Compose reply */
.com-compose-reply {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}
.com-reply-input {
    flex: 1;
    resize: vertical;
    min-height: 38px;
    max-height: 120px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    font-family: 'Open Sans', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
}
.com-reply-input:focus { border-color: var(--primary); outline: none; }
.com-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--green);
    color: var(--on-brand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.com-send-btn:hover { opacity: 0.85; }
.com-send-btn svg { width: 16px; height: 16px; }

.com-closed-notice {
    text-align: center;
    padding: 1rem;
    font-size: 0.82rem;
    color: var(--slate);
    font-style: italic;
}

/* Compose post */
.com-compose-post {
    padding: 1rem 1.5rem;
    max-width: 640px;
}
.com-compose-post h2 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--charcoal);
}
.com-post-title-input {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}
.com-topic-select {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    background: var(--warm-white);
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}
.com-post-body-input {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-family: 'Open Sans', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
}
.com-post-title-input:focus,
.com-post-body-input:focus,
.com-topic-select:focus { border-color: var(--primary); outline: none; }

.com-compose-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.com-cancel-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--charcoal);
}
.com-cancel-btn:hover { background: var(--primary-tint-xs); }
.com-cancel-btn.com-danger { color: var(--rose); border-color: var(--rose-light); }
.com-submit-btn {
    background: var(--green);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.com-submit-btn:hover { opacity: 0.85; }

/* Space settings */
.com-space-settings {
    padding: 1rem 1.5rem;
    max-width: 500px;
}
.com-space-settings h2 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--charcoal);
}
.com-space-settings label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    margin-bottom: 0.25rem;
    margin-top: 0.75rem;
}
.com-settings-input {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-family: 'Open Sans', sans-serif;
    background: var(--warm-white);
    color: var(--charcoal);
    box-sizing: border-box;
}
.com-settings-input:focus { border-color: var(--primary); outline: none; }

/* Mobile responsive */
@media (max-width: 600px) {
    .community-container { flex-direction: column; }
    .community-sidebar {
        width: 100%;
        max-height: 140px;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .community-space-list {
        display: flex;
        overflow-x: auto;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    .com-space-item {
        white-space: nowrap;
        border-left: none;
        border-radius: 14px;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }
    .com-space-item.active {
        border-left: none;
        background: var(--green);
        color: var(--on-brand);
    }
    .com-space-group-label { display: none; }
    .com-post-detail { padding: 0.75rem; }
}

/* ─── Share Modal ──────────────────────────────────────── */
.share-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
}
.share-tab {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate);
    cursor: pointer;
    text-align: center;
}
.share-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.share-section {
    margin-bottom: 1.25rem;
}
.share-section h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 0.5rem;
}
.share-link-row,
.share-user-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.share-select {
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    background: var(--bg-surface);
    color: var(--charcoal);
}
.share-user-search {
    flex: 1;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    background: var(--bg-surface);
    color: var(--charcoal);
    outline: none;
}
.share-user-search:focus { border-color: var(--primary); }
.share-search-results { margin-top: 0.25rem; }
.share-link-display {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.share-link-input {
    flex: 1;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    background: var(--bg-panel);
    color: var(--charcoal);
}
.share-active-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.share-active-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: var(--bg-panel);
    font-size: 0.78rem;
    color: var(--charcoal);
}
.share-permission-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--primary-tint-sm);
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
}
.share-revoke-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--rose);
    color: var(--rose);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    cursor: pointer;
}
.share-revoke-btn:hover { background: color-mix(in srgb, var(--rose) 10%, transparent); }
.share-received-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-lighter);
}
.share-received-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.share-received-info strong { font-size: 0.82rem; color: var(--charcoal); }
.share-received-from { font-size: 0.72rem; color: var(--slate); }

/* ─── Comments Panel ───────────────────────────────────── */
.comments-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 340px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-light);
    z-index: 500;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}
.comments-header h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0;
    color: var(--charcoal);
}
.comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.comment-item {
    padding: 0.65rem;
    border-bottom: 1px solid var(--border-lighter);
}
.comment-item.comment-resolved { opacity: 0.5; }
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--slate);
    margin-bottom: 4px;
}
.comment-meta strong { color: var(--charcoal); }
.comment-tool-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--primary-tint-xs);
    color: var(--primary);
}
.comment-body {
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.comment-actions {
    margin-top: 4px;
}
.comment-actions button {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
}
.comment-actions button:hover { text-decoration: underline; }
.comment-compose {
    padding: 0.75rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ─── Notifications ────────────────────────────────────── */
.notif-bell-btn,
.coach-dashboard-btn {
    position: relative;
    background: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    color: var(--charcoal);
    padding: 0.4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.notif-bell-btn svg { width: 19px; height: 19px; }
.coach-dashboard-btn svg { width: 19px; height: 19px; }
.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--rose);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.notif-panel {
    position: fixed;
    width: 340px;
    max-height: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}
.notif-header h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0;
    color: var(--charcoal);
}
.notif-mark-all {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.72rem;
    cursor: pointer;
    font-weight: 500;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list {
    flex: 1;
    overflow-y: auto;
}
.notif-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-lighter);
    transition: background 0.12s;
}
.notif-item:hover { background: var(--primary-tint-xs); }
.notif-item.notif-unread { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.notif-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-tint-sm);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-icon svg { width: 14px; height: 14px; }
.notif-content {
    flex: 1;
    min-width: 0;
}
.notif-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-body {
    font-size: 0.72rem;
    color: var(--slate);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-time {
    font-size: 0.62rem;
    color: var(--slate);
    margin-top: 2px;
}
.notif-empty {
    padding: 2rem;
    text-align: center;
    color: var(--slate);
    font-size: 0.8rem;
}

/* ─── Responsive: messaging on phone ───────────────────── */
@media (max-width: 600px) {
    .messaging-container { flex-direction: column; }
    .messaging-sidebar {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .msg-bubble { max-width: 85%; }
    .notif-panel { width: 100vw; left: 0 !important; right: 0 !important; border-radius: 0 0 12px 12px; }
    .comments-panel { width: 100%; }
}

/* ─── COMMAND PALETTE (Cmd+K) ────────────────────── */
.cmd-palette-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-cmd-palette);
    background: rgba(0, 0, 0, 0.45);
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}
.cmd-palette-overlay.active {
    display: flex;
}
/* When opened from the lower-right FAB, scale-fade in from that corner so
   the visual jump from FAB to centered palette feels continuous. The
   modifier is set by openCommandPalette('fab') and cleared on close. */
.cmd-palette-overlay.from-fab .cmd-palette {
    transform-origin: bottom right;
    animation: cmdPaletteFromFab 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cmdPaletteFromFab {
    from { transform: scale(0.55) translate(35vw, 35vh); opacity: 0; }
    to   { transform: scale(1) translate(0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cmd-palette-overlay.from-fab .cmd-palette { animation: none; }
}
.cmd-palette {
    width: 90%;
    max-width: 540px;
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--primary),
                0 24px 70px rgba(0,0,0,0.55);
    overflow: visible;
    position: relative;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary);
}
/* Clarity sits on the top-left corner of the palette, large enough to feel
 * like a present character. Most of her body floats above and to the left
 * of the panel; the slice that overlaps the panel lands inside the input
 * row's reserved left padding so it never covers a search character or a
 * results header. */
.cmd-palette-clarity-mark {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-30%, -42%);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #F0E8D8;
    border: 2px solid var(--gamboge);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    z-index: 2;
    pointer-events: none;
}
.cmd-clarity-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E8B450;
    background: #2D3252;
    padding: 4px 0 10px;
}
.cmd-palette-clarity-bot {
    width: 96px;
    height: 96px;
    display: block;
    transform: translateY(-10px) scaleX(1);
}
/* Input row reserves enough left space for the slice of Clarity that hangs
 * into the panel (avatar right-edge lands at ~78px from the panel's left
 * edge after the translate). 92px gives the search input clear runway. */
.cmd-palette-input-row {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem 0.85rem 92px;
    border-bottom: 1px solid var(--border-light);
    border-radius: 12px 12px 0 0;
    gap: 0.5rem;
    min-height: 68px;
    position: relative;
}
.cmd-palette-search-icon {
    display: flex;
    color: var(--slate);
    flex-shrink: 0;
    opacity: 0.65;
}
.cmd-palette-search-icon .i {
    width: 16px;
    height: 16px;
}
.cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
    color: var(--charcoal);
}
.cmd-palette-input::placeholder {
    color: var(--slate);
    opacity: 0.7;
}
.cmd-palette-esc {
    font-size: 0.65rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--slate);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.7;
}
.cmd-palette-results {
    overflow-y: auto;
    max-height: calc(70vh - 86px);
    padding: 0.25rem 0;
    flex: 1 1 auto;
}
.cmd-palette-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.6rem 1rem 0.25rem;
}
.cmd-palette-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.7rem;
    cursor: pointer;
    transition: background 0.08s;
}
.cmd-palette-item:hover,
.cmd-palette-item.selected {
    background: var(--primary-tint-sm, rgba(13, 92, 107, 0.08));
}
.cmd-palette-item-icon {
    display: flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.cmd-palette-item-icon .i {
    width: 18px;
    height: 18px;
}
.cmd-palette-item-name {
    flex: 1;
    font-size: 0.88rem;
    font-family: 'Open Sans', sans-serif;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmd-palette-item-hint {
    font-size: 0.72rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--slate);
    flex-shrink: 0;
    opacity: 0.8;
}
/* Cmd+1..9 number badge on the first nine visible rows. Hidden by default
 * to keep the palette quiet; revealed when the user holds the meta key,
 * matching common command-palette conventions. */
.cmd-palette-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 0.4rem;
    border-radius: 4px;
    background: var(--primary-tint-sm, rgba(13, 92, 107, 0.1));
    color: var(--slate);
    font-size: 0.68rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}
.cmd-palette-overlay.show-cmd-nums .cmd-palette-item-num { opacity: 0.85; }
.cmd-palette-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--slate);
    font-size: 0.85rem;
    font-family: 'Open Sans', sans-serif;
}
/* Highlighted match characters inside a result name. The mark element is
 * deliberately understated: same color as the surrounding text, with a tinted
 * background so the matched span reads as emphasized rather than alarming. */
.cmd-palette-mark {
    background: var(--primary-tint-md, rgba(13, 92, 107, 0.18));
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 600;
}
.cmd-palette-clarity-anchor {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.7rem;
    border-top: 1px solid var(--border-light);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.1s;
}
.cmd-palette-clarity-anchor:hover,
.cmd-palette-clarity-anchor.selected {
    background: var(--primary-tint-xs, rgba(13,92,107,0.06));
}
.cmd-palette-clarity-anchor.hidden { display: none; }
.cmd-palette-clarity-anchor .cmd-palette-item-icon { color: var(--primary); }

.cmd-palette-prefix-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-tint-xs, rgba(13, 92, 107, 0.04));
    font-size: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--slate);
    flex-shrink: 0;
}
.cmd-prefix-row-label {
    opacity: 0.7;
    white-space: nowrap;
    margin-right: 0.15rem;
}
@media (max-width: 600px) {
    .cmd-palette-prefix-row { display: none; }
}
.cmd-palette-footer {
    display: flex;
    gap: 0.9rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-light);
    background: var(--primary-tint-xs, rgba(13, 92, 107, 0.04));
    border-radius: 0 0 12px 12px;
    font-size: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--slate);
    flex-shrink: 0;
    justify-content: center;
}
.cmd-palette-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.cmd-palette-hint kbd {
    font-size: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--slate);
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    line-height: 1;
    background: var(--bg-surface);
}

/* Colorful kbd badges for each footer hint group */
.cmd-hint-nav kbd {
    background: var(--primary-tint-bg);
    color: var(--primary);
    border-color: var(--primary);
}
.cmd-hint-open kbd {
    background: var(--green-light);
    color: var(--green);
    border-color: var(--green);
}
.cmd-hint-close kbd {
    background: var(--rose-light);
    color: var(--rose);
    border-color: var(--rose);
}
/* Tip group: @=teal, >=gamboge, ?=violet */
.cmd-hint-narr kbd {
    background: var(--primary-tint-bg);
    color: var(--primary);
    border-color: var(--primary);
}
.cmd-hint-act kbd {
    background: var(--gamboge-light);
    color: var(--gamboge);
    border-color: var(--gamboge);
}
.cmd-hint-hlp kbd {
    background: var(--violet-light);
    color: var(--violet);
    border-color: var(--violet);
}

/* Clickable footer hint buttons */
.cmd-hint-btn,
.cmd-hint-prefix-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.12s, color 0.12s;
}
.cmd-hint-btn:hover,
.cmd-hint-prefix-btn:hover {
    background: var(--primary-tint-xs);
    color: var(--charcoal);
}
.cmd-hint-btn:focus-visible,
.cmd-hint-prefix-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
/* Phone: full width palette, hide footer hints (no keyboard) */
@media (max-width: 600px) {
    .cmd-palette-overlay { padding-top: 5vh; }
    .cmd-palette { width: 96%; max-height: 80vh; }
    .cmd-palette-footer { display: none; }
}

/* ── Help toggle button in footer ── */
.cmd-palette-help-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.4rem;
    flex-shrink: 0;
    opacity: 0.65;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.cmd-palette-help-btn:hover,
.cmd-palette-help-btn[aria-expanded="true"] {
    color: var(--primary);
    background: var(--primary-tint-bg);
    opacity: 1;
}
@media (max-width: 600px) {
    .cmd-palette-help-btn { display: none; }
}

/* ── Expandable help panel ── */
.cmd-palette-help-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
    border-top: 1px solid transparent;
    background: var(--primary-tint-xs, rgba(13, 92, 107, 0.04));
    flex-shrink: 0;
}
.cmd-palette-help-panel.active {
    max-height: 260px;
    border-top-color: var(--border-light);
}
.cmd-help-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.2rem;
    padding: 0.8rem 1rem;
}
.cmd-help-section-title {
    font-size: 0.65rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    margin-bottom: 0.45rem;
}
.cmd-help-section-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}
.cmd-help-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cmd-help-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.76rem;
    font-family: 'Open Sans', sans-serif;
    color: var(--charcoal);
}
.cmd-help-keys {
    display: inline-flex;
    gap: 0.15rem;
    min-width: 2.8rem;
    flex-shrink: 0;
}
.cmd-help-keys kbd {
    font-size: 0.65rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    padding: 0.12rem 0.32rem;
    line-height: 1.2;
    background: var(--bg-surface);
    color: var(--slate);
}
.cmd-key-at {
    background: var(--primary-tint-bg) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.cmd-key-gt {
    background: var(--gamboge-light) !important;
    color: var(--gamboge) !important;
    border-color: var(--gamboge) !important;
}
.cmd-key-qm {
    background: var(--violet-light) !important;
    color: var(--violet) !important;
    border-color: var(--violet) !important;
}
.cmd-key-hash {
    background: var(--rose-light) !important;
    color: var(--rose) !important;
    border-color: var(--rose) !important;
}
@media (max-width: 600px) {
    .cmd-palette-help-panel { display: none; }
}

/* ─── AI CHAT PANEL ──────────────────────────────── */
.ai-chat-panel {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 380px;
    max-height: 520px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    /* Must sit above the demo guide badge (9400) so the chat panel isn't
     * obscured when the demo guide is active. Below the spotlight (9500). */
    z-index: 9410;
    overflow: hidden;
    animation: aiChatSlideUp 0.2s ease-out;
}
@keyframes aiChatSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-tint-xs);
    flex-shrink: 0;
}
.ai-chat-header-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
}
.ai-chat-header-title .i {
    width: 16px; height: 16px;
}
.ai-chat-header-sub {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--slate);
    margin-left: 6px;
    letter-spacing: 0;
}
.ai-chat-credits {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--gamboge);
    margin-left: auto;
    font-weight: 600;
}
.ai-chat-credits .i {
    width: 12px; height: 12px;
}
.ai-chat-close {
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    font-size: 1.1rem;
    color: var(--slate);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
}
.ai-chat-close:hover {
    background: var(--border-light);
    color: var(--charcoal);
}

.ai-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 200px;
    max-height: 400px;
}

.ai-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 0.5rem;
    flex: 1;
}
.ai-chat-empty-icon {
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.ai-chat-empty-icon .i {
    width: 28px; height: 28px;
}
.ai-chat-empty-bot {
    width: 220px;
    height: 180px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.ai-chat-empty-bot svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ai-chat-empty-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 0.35rem;
}
.ai-chat-empty-text {
    font-size: 0.75rem;
    color: var(--slate);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    max-width: 280px;
}

.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ai-chat-suggestion {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.73rem;
    color: var(--primary);
    background: var(--primary-tint-xs);
    border: 1px solid var(--primary-tint-sm);
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
}
.ai-chat-suggestion:hover {
    background: var(--primary-tint-sm);
    border-color: var(--primary-tint-md);
}

.ai-chat-msg {
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.5;
    max-width: 90%;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.ai-chat-msg-user {
    background: var(--primary);
    color: var(--on-brand);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.ai-chat-msg-assistant {
    background: var(--primary-tint-xs);
    color: var(--charcoal);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border-light);
}
.ai-chat-tool-link {
    display: inline;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1.5px solid var(--primary);
    cursor: pointer;
    padding: 0 1px;
    transition: opacity 0.15s;
}
.ai-chat-tool-link:hover {
    opacity: 0.7;
}
.ai-chat-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 0.8rem;
}

.ai-chat-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-panel);
    flex-shrink: 0;
}
.ai-chat-input {
    flex: 1;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--charcoal);
    outline: none;
    transition: border-color 0.15s;
}
.ai-chat-input:focus {
    border-color: var(--primary);
}
.ai-chat-input:disabled {
    opacity: 0.5;
}
.ai-chat-send {
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--primary);
    color: var(--on-brand);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.12s;
}
.ai-chat-send:hover { opacity: 0.85; }
.ai-chat-send:disabled { opacity: 0.4; cursor: default; }
.ai-chat-send .i { width: 16px; height: 16px; }

/* Launch button (on Journey page) */
.ai-chat-launch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--on-brand);
    background: var(--primary);
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ai-chat-launch-btn:hover { opacity: 0.85; }
.ai-chat-launch-btn .i { width: 16px; height: 16px; }

/* Phone overrides */
@media (max-width: 600px) {
    .ai-chat-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 14px 14px 0 0;
        border-bottom: none;
    }
}

/* ─── SAVE INDICATOR ──────────────────────────────────────────── */
/* Positioned above the Clarity FAB (bottom:20px + height:48px + 8px gap) */
.save-indicator {
    position: fixed;
    bottom: 76px;
    right: 16px;
    z-index: var(--z-overlay);
}
@media (max-width: 600px) {
    /* FAB shifts to bottom:72px on mobile, so clear that + 44px height + 8px */
    .save-indicator { bottom: 124px; right: 14px; }
}

/* ─── FLOATING HELP + MESSAGING BUTTONS (FABs) ──────────────── */
/* Shared styling; per-button right-offset and background below give each
   FAB in the row its own color so the stack reads as three distinct actions:
     [help 140 · green] [feedback 80 · rose] [messaging 20 · teal] */
.floating-help-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-overlay);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #B8BEC8;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.floating-help-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}
.floating-help-btn.active {
    background: var(--slate);
}
.floating-help-btn .i {
    width: 26px;
    height: 26px;
}
.floating-help-btn { overflow: hidden; }
.floating-help-btn .clarity-bot-fab {
    width: 52px;
    height: 52px;
    /* scaleX(-1) mirrors her so she faces inward from the corner.
       The translateY matches the framing the cmd-palette mark uses
       (top: 0; left: 0; translate(-30%, -42%)) so her face lands at
       the same spot in the circular crop. */
    transform: translateY(-5px) scaleX(-1);
    display: block;
}
/* Flight-to-palette animation: when the FAB is clicked, JS measures
   the cmd-palette Clarity mark and sets these custom properties so the
   FAB visually flies up to that spot while the palette opens. After
   the transition the FAB hides; on palette close it resets. */
.floating-help-btn.flying {
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 240ms ease;
    transform: translate(var(--fab-fly-dx, 0), var(--fab-fly-dy, 0))
               scale(var(--fab-fly-scale, 1));
    opacity: 0;
    pointer-events: none;
}

/* Hide Clarity FAB during fullscreen modes (feedback button stays visible for beta testers) */
body.canvas-fullscreen .floating-help-btn,
body.intake-fullscreen .floating-help-btn {
    display: none !important;
}

/* ── Admin preview speech bubble (sits above Clarity FAB) ── */
.admin-preview-bubble {
    position: fixed;
    bottom: 90px;   /* above the 56px FAB sitting at bottom: 20px */
    right: 8px;
    background: #ffffff;
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    max-width: 155px;
    text-align: center;
    line-height: 1.4;
    z-index: calc(var(--z-overlay) + 1);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
/* tail pointing down toward Clarity head */
.admin-preview-bubble::before {
    content: '';
    position: absolute;
    bottom: -9px;
    right: 25px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid var(--primary);
}
.admin-preview-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 27px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff;
    z-index: 1;
}
@media (max-width: 600px) {
    .admin-preview-bubble { bottom: 136px; } /* above mobile-shifted FAB */
}

@media (max-width: 600px) {
    .floating-help-btn {
        bottom: 72px; /* above mobile bottom tab bar */
        right: 14px;
        width: 50px;
        height: 50px;
    }
}

/* ─── CATEGORY DESCRIPTION VIEW ──────────────────────────────── */
.category-view {
    max-width: 720px;
    margin: 2.5rem auto;
    padding: 0 2rem;
}
.category-view-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.category-view-icon {
    display: flex;
    align-items: center;
}
.category-view-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.8;
}
.category-view-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.category-view-description {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--slate);
    margin: 0 0 2rem 0;
}
.category-tool-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.category-subgroup-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
    padding: 0.9rem 0.25rem 0.15rem;
}
.category-subgroup-label:first-child {
    padding-top: 0.25rem;
}
.category-tool-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.category-tool-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-sm);
    background: var(--warm-white);
}
.category-tool-card:active {
    box-shadow: var(--shadow-xs);
}
.category-tool-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.category-tool-disabled:hover {
    border-color: var(--border-light);
    box-shadow: none;
    background: var(--bg-surface);
}
.category-tool-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--primary-tint-sm);
}
.category-tool-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}
.category-tool-info {
    flex: 1;
    min-width: 0;
}
.category-tool-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--charcoal);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.category-tool-check {
    display: inline-flex;
    color: var(--green);
}
.category-tool-check svg {
    width: 14px;
    height: 14px;
}
.category-tool-summary {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--slate);
}
.category-tool-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--slate);
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}
.category-tool-arrow svg {
    width: 16px;
    height: 16px;
}
.category-tool-card:hover .category-tool-arrow {
    opacity: 0.7;
    transform: translateX(2px);
}

@media (max-width: 600px) {
    .category-view {
        margin: 1.5rem auto;
        padding: 0 1rem;
    }
    .category-view-title {
        font-size: 1.25rem;
    }
    .category-tool-card {
        padding: 0.85rem 1rem;
    }
    .category-tool-icon {
        width: 34px;
        height: 34px;
    }
    .category-tool-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ─── HELP CENTER PANEL ──────────────────────────── */
.help-center-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: var(--z-modal-below);
    transition: background 0.3s;
}
.help-center-backdrop.active { background: rgba(0,0,0,0.3); }

.help-center-panel {
    position: fixed; top: 0; right: -440px; bottom: 0;
    width: 440px; max-width: 100vw;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    display: flex; flex-direction: column;
    transition: right 0.3s ease;
    font-family: 'Open Sans', sans-serif;
}
.help-center-panel.active { right: 0; }

.help-center-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.help-center-header h3 {
    margin: 0; font-size: 1.1rem; font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: var(--charcoal);
}
.help-center-close {
    background: none; border: none; cursor: pointer;
    color: var(--slate); padding: 4px; border-radius: 4px;
}
.help-center-close:hover { background: var(--primary-tint-xs); color: var(--primary); }

.help-center-search {
    position: relative;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
}
.help-center-search-icon {
    position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
    color: var(--slate); pointer-events: none;
}
.help-center-search-icon svg { width: 14px; height: 14px; }
.help-center-search-input {
    width: 100%; padding: 8px 12px 8px 32px;
    border: 1px solid var(--border-medium);
    border-radius: 6px; font-size: 0.9rem;
    background: var(--warm-white);
    color: var(--charcoal);
    font-family: 'Open Sans', sans-serif;
}
.help-center-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-tint-sm);
}

.help-center-body {
    flex: 1; overflow-y: auto;
    padding: 8px 0;
}

.help-center-category { border-bottom: 1px solid var(--border-light); }
.help-center-category.context-match { background: var(--primary-tint-xs); }

.help-center-cat-header {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 20px;
    background: none; border: none; cursor: pointer;
    text-align: left; font-size: 0.9rem; font-weight: 600;
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
}
.help-center-cat-header:hover { background: var(--primary-tint-xs); }
.help-center-cat-icon { color: var(--primary); flex-shrink: 0; }
.help-center-cat-icon svg { width: 16px; height: 16px; }
.help-center-cat-title { flex: 1; }
.help-center-cat-count {
    font-size: 0.75rem; font-weight: 500;
    color: var(--slate); background: var(--border-light);
    padding: 1px 7px; border-radius: 10px;
}
.help-center-cat-chevron {
    color: var(--slate); transition: transform 0.2s;
}
.help-center-cat-chevron svg { width: 12px; height: 12px; }
.help-center-cat-chevron.expanded { transform: rotate(90deg); }

.help-center-items { padding: 0 20px 8px; }

.help-center-item {
    border: 1px solid var(--border-light);
    border-radius: 6px; margin-bottom: 6px;
    background: var(--warm-white);
    overflow: hidden;
}
.help-center-q {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 14px;
    background: none; border: none; cursor: pointer;
    text-align: left; font-size: 0.85rem; font-weight: 500;
    color: var(--charcoal); gap: 8px;
    font-family: 'Open Sans', sans-serif;
}
.help-center-q:hover { color: var(--primary); }
.help-center-q-chevron {
    flex-shrink: 0; color: var(--slate);
    transition: transform 0.2s;
}
.help-center-q-chevron svg { width: 12px; height: 12px; }
.help-center-item.open .help-center-q-chevron { transform: rotate(180deg); }

.help-center-a {
    display: none;
    padding: 0 14px 12px;
    font-size: 0.84rem; line-height: 1.6;
    color: var(--slate);
}
.help-center-item.open .help-center-a { display: block; }
.help-center-item.search-highlight {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-tint-md), var(--shadow-sm);
    background: var(--primary-tint-xs);
    animation: helpSearchPulse 2s ease-out;
}
.help-center-item.search-highlight .help-center-q {
    color: var(--primary);
}
@keyframes helpSearchPulse {
    0% { box-shadow: 0 0 0 4px var(--primary-tint-lg); }
    100% { box-shadow: 0 0 0 2px var(--primary-tint-md), var(--shadow-sm); }
}
.help-center-a mark {
    background: var(--gamboge-light);
    color: var(--charcoal);
    padding: 0 2px; border-radius: 2px;
}
.help-tool-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.help-tool-link:hover {
    text-decoration-style: solid;
    color: var(--primary-dark, var(--primary));
}

.help-center-empty {
    padding: 40px 20px;
    text-align: center; color: var(--slate);
    font-size: 0.9rem;
}

.help-center-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}
.help-center-footer p {
    margin: 0 0 8px; font-size: 0.8rem; color: var(--slate);
}
.help-center-ask-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 6px;
    background: var(--primary); color: var(--on-brand);
    border: none; cursor: pointer;
    font-size: 0.85rem; font-weight: 500;
    font-family: 'Open Sans', sans-serif;
}
.help-center-ask-btn:hover { opacity: 0.9; }
.help-center-ask-btn svg { width: 14px; height: 14px; }

/* Mobile: full-width bottom sheet style */
@media (max-width: 600px) {
    .help-center-panel {
        top: auto; right: 0; left: 0; bottom: -100%;
        width: 100%; height: 85vh;
        border-left: none;
        border-top: 1px solid var(--border-light);
        border-radius: 12px 12px 0 0;
        transition: bottom 0.3s ease;
    }
    .help-center-panel.active { bottom: 0; }
}

/* ─── UNIVERSAL DRAG ────────────────────────────── */
/* Active drag state for any universally-draggable element */
.universal-drag-active {
    opacity: 0.5;
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    border-radius: 6px;
}
/* Draggable items show grab cursor */
.nac-entry-item[draggable="true"],
.toolkit-vis-node[draggable="true"],
.toolkit-fishbone-cause[draggable="true"],
.toolkit-ladder-rung[draggable="true"],
.toolkit-chain-link[draggable="true"] {
    cursor: grab;
}
.nac-entry-item[draggable="true"]:active,
.toolkit-vis-node[draggable="true"]:active,
.toolkit-fishbone-cause[draggable="true"]:active,
.toolkit-ladder-rung[draggable="true"]:active,
.toolkit-chain-link[draggable="true"]:active {
    cursor: grabbing;
}

/* Drag handle for textarea-based fields (Arc, Toolkit structured fields) */
.narc-textarea-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.narc-textarea-wrap .narc-textarea,
.narc-textarea-wrap textarea {
    flex: 1;
    min-width: 0;
}
.universal-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-height: 32px;
    cursor: grab;
    color: var(--slate);
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    border-radius: 4px;
}
.universal-drag-handle:hover {
    opacity: 1;
    color: var(--primary);
    background: var(--primary-tint-xs);
}
.universal-drag-handle:active {
    cursor: grabbing;
}
.universal-drag-handle svg {
    width: 14px;
    height: 14px;
}

/* ─── LIBRARY VIEW ────────────────────────────────────────── */
.library-view {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    width: 100%;
    box-sizing: border-box;
}
.library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.library-search-wrap { flex: 0 1 280px; }
.library-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-size: 0.9rem;
    font-family: 'Open Sans', sans-serif;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.library-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-tint-sm);
}

/* Filter pills */
.library-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.library-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-size: 0.8rem;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.library-filter-pill:hover {
    border-color: var(--primary);
    background: var(--primary-tint-xs);
}
.library-filter-pill.active {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
.library-filter-count {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Card grid */
.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.library-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    gap: 0;
    overflow: hidden;
}
.library-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.library-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.95rem;
    flex: 1;
}
/* Typographic cover band shared by article and tutorial cards.
 * Renders the kicker, title, and a faded corner icon over a tool-accent
 * background so each card has a representable visual identity, matching
 * the role PNG covers play for workbooks. */
.content-card-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    background: var(--card-accent, var(--primary));
    color: var(--on-brand);
    padding: 0.85rem 0.95rem 0.85rem;
    min-height: 110px;
    overflow: hidden;
    isolation: isolate;
}
.content-card-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.16) 0%, transparent 55%),
        radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 2px) 0 0 / 14px 14px;
    pointer-events: none;
    z-index: 0;
}
.content-card-cover-kicker {
    position: relative;
    z-index: 1;
    font-family: Montserrat, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-brand);
    opacity: 0.78;
    line-height: 1.1;
}
.content-card-cover-title {
    position: relative;
    z-index: 1;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw + 0.7rem, 1.35rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--on-brand);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.content-card-cover-icon {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 22px;
    height: 22px;
    color: var(--on-brand);
    opacity: 0.55;
    z-index: 1;
}
.library-card:hover .content-card-cover-icon {
    opacity: 0.75;
}
.library-card-type {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.library-card-title {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--charcoal);
    margin: 0;
    line-height: 1.3;
}
.library-card-desc {
    font-size: 0.85rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.library-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: auto;
}
.library-card-tag {
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--slate);
    font-size: 0.7rem;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}
.library-card-tag-clickable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.library-card-tag-clickable:hover {
    background: var(--primary-tint-sm);
    border-color: var(--primary-tint-md);
    color: var(--charcoal);
}
.library-tag-cloud {
    flex-wrap: wrap;
}
.library-tag-pill {
    font-size: 0.78rem;
}

/* Related Library Items section */
.library-related-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}
.library-related-title {
    font-family: Montserrat, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
}
.library-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.65rem;
}
.library-related-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.library-related-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.library-related-card-type {
    font-size: 0.68rem;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.library-related-card-title {
    font-family: Montserrat, sans-serif;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.3;
}
.library-related-card-subtitle {
    font-size: 0.75rem;
    color: var(--slate);
    line-height: 1.3;
}

/* Empty state */
.library-empty {
    text-align: center;
    padding: 3rem 1rem;
}
.library-empty code {
    background: var(--primary-tint-xs);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ── Reading mode ── */
.library-reading-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.library-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--slate);
    font-size: 0.85rem;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.library-back-btn:hover {
    background: var(--primary-tint-xs);
    border-color: var(--primary);
}
.library-back-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.library-back-btn.library-back-to-tool {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.library-back-btn.library-back-to-tool:hover {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
.library-reading-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.library-reading-category {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--charcoal);
    font-size: 0.75rem;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

/* Markdown content styling */
.library-reading-content {
    line-height: 1.7;
    color: var(--charcoal);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
}
.video-embed-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    margin: 0 0 2rem;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.video-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.library-reading-content h1 {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
    color: var(--library-type-color, var(--primary));
}
.library-reading-content h2 {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
    color: var(--green);
}
.library-reading-content h3 {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin: 1.25rem 0 0.4rem;
    color: var(--violet);
}
.library-reading-content p {
    margin: 0 0 0.75rem;
}
.library-reading-content ul,
.library-reading-content ol {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}
.library-reading-content li {
    margin-bottom: 0.3rem;
}
.library-reading-content strong {
    font-weight: 600;
    color: var(--charcoal);
}
.library-reading-content code {
    background: var(--primary-tint-xs);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}
.library-reading-content pre {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 0 0 1rem;
}
.library-reading-content pre code {
    background: none;
    padding: 0;
    font-size: 0.85rem;
}
.library-reading-content blockquote {
    border-left: 3px solid var(--primary);
    margin: 0 0 0.75rem;
    padding: 0.5rem 0 0.5rem 1rem;
    color: var(--slate);
}
.library-reading-content hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 1.5rem 0;
}
.library-reading-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.library-reading-content th {
    text-align: left;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--charcoal);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border-medium);
}
.library-reading-content td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--charcoal);
}
.library-reading-content tr:last-child td {
    border-bottom: none;
}
.library-reading-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.library-reading-content img + em {
    display: block;
    margin: -0.5rem 0 1rem;
    color: var(--slate);
    font-size: 0.85rem;
    text-align: center;
}

/* Mobile */
@media (max-width: 600px) {
    .library-view { padding: 1rem; }
    .library-header { flex-direction: column; align-items: stretch; }
    .library-search-wrap { flex: 1 1 100%; }
    .library-grid { grid-template-columns: 1fr; }
}

/* ─── BETA FEEDBACK FAB ────────────────────────────────────── */
/* Sits to the left of the Help FAB. Help is at right:20px (48px wide),
 * so this lands at right:80px to leave a 12px gap. */
.floating-feedback-btn {
    position: fixed;
    bottom: 20px;
    right: 80px;
    z-index: var(--z-overlay);
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--rose);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s, box-shadow 0.2s;
}
.floating-feedback-btn:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-xl);
}
.floating-feedback-btn:active {
    transform: scale(0.95);
}
.floating-feedback-btn .i {
    width: 20px;
    height: 20px;
}
@media (max-width: 600px) {
    .floating-feedback-btn {
        bottom: 72px;
        right: 70px;
        width: 44px;
        height: 44px;
    }
}

/* ─── FAB tooltip ───────────────────────────────────────────────
 * Shared hover tooltip for the floating help, beta feedback, and
 * demo guide buttons. Pops above the button so the bottom-right
 * cluster stays readable without enlarging the buttons themselves. */
.floating-help-btn[data-tooltip]::after,
.floating-feedback-btn[data-tooltip]::after,
.demo-guide-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    transform: translateY(4px);
    padding: 5px 10px;
    background: rgba(15, 23, 28, 0.92);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms ease;
    box-shadow: var(--shadow-md);
    z-index: var(--z-tooltip);
}
.floating-help-btn[data-tooltip]:hover::after,
.floating-feedback-btn[data-tooltip]:hover::after,
.demo-guide-badge[data-tooltip]:hover::after,
.floating-help-btn[data-tooltip]:focus-visible::after,
.floating-feedback-btn[data-tooltip]:focus-visible::after,
.demo-guide-badge[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* ─── BETA FEEDBACK MODAL ──────────────────────────────────── */
.beta-feedback-categories {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.beta-feedback-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 16px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--slate);
    font-size: 0.78rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.beta-feedback-cat-pill:hover {
    border-color: var(--rose);
    color: var(--rose);
}
.beta-feedback-cat-pill input[type="radio"] {
    display: none;
}
.beta-feedback-cat-pill:has(input:checked) {
    background: var(--rose);
    color: #fff;
    border-color: var(--rose);
}
.beta-feedback-textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--charcoal);
    background: var(--bg-surface);
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
}
.beta-feedback-textarea:focus {
    outline: none;
    border-color: var(--rose);
    box-shadow: 0 0 0 2px var(--rose-light);
}
.beta-feedback-screenshot-zone {
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--slate);
    font-size: 0.78rem;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.beta-feedback-screenshot-zone:hover {
    border-color: var(--rose);
    background: var(--rose-light);
}
.beta-feedback-screenshot-zone .i {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
}
#bf-screenshot-preview {
    position: relative;
    display: inline-block;
}
.beta-feedback-remove-screenshot {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rose);
    color: #fff;
    border: 2px solid var(--bg-surface);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.beta-feedback-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.6rem;
    background: var(--primary-tint-xs);
    color: var(--primary);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

/* ─── ASSESSMENTS ────────────────────────────────── */

/* Landing page */
.assessments-landing {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.assessments-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.assessments-title-icon {
    width: 24px;
    height: 24px;
    color: var(--rose);
    flex-shrink: 0;
}
.assessments-title-text { color: inherit; }
.assessments-title-learn {
    margin-left: 1rem;
    display: inline-flex;
    align-items: center;
}
.assessments-subtitle {
    color: var(--slate);
    font-size: 0.95rem;
    margin: 0 0 2rem;
    line-height: 1.5;
}
.assessments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}
.assessments-section {
    margin-bottom: 2rem;
}
.assessments-section:last-child {
    margin-bottom: 0;
}
.assessments-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    margin: 0;
}
.assessments-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.9rem;
}
.assessments-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.assessments-section-toggle:hover .assessments-section-title,
.assessments-section-toggle:focus-visible .assessments-section-title {
    color: var(--charcoal);
}
.assessments-section-chevron {
    font-size: 0.65rem;
    color: var(--slate);
    line-height: 1;
}
.assessments-section.is-collapsed .assessments-section-chevron {
    color: var(--slate);
}
.assessments-section-open {
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.assessments-section-open:hover,
.assessments-section-open:focus-visible {
    background: var(--primary-tint-xs);
    text-decoration: underline;
    outline: none;
}
.assessments-back-link {
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
    display: inline-block;
}
.assessments-back-link:hover,
.assessments-back-link:focus-visible {
    text-decoration: underline;
    outline: none;
}
.assess-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
    padding: 0;
}
.assess-card:hover {
    border-color: var(--rose);
    box-shadow: var(--shadow-md);
}
.assess-card-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 1rem 0.5rem;
    background: var(--primary-tint-xs);
}
.assess-card-preview svg {
    max-width: 140px;
    max-height: 140px;
}
.assess-card-preview--frosted .ls-chart-frosted-wrap {
    margin-bottom: 0;
}
.assess-card-preview--frosted .ls-chart-reveal-overlay {
    background: radial-gradient(ellipse at center, var(--bg-panel) 20%, transparent 72%);
}
.assess-card-preview--frosted .ls-chart-reveal-overlay .i {
    width: 22px;
    height: 22px;
    margin-bottom: 0;
}
.assess-card-body {
    padding: 1.25rem;
}
.assess-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.assess-card-title-row h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
    flex: 1;
}
.assess-card-icon svg {
    width: 20px;
    height: 20px;
    color: var(--rose);
}
.assess-card-body p {
    color: var(--slate);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}
.assess-card-action {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rose);
}
.assess-status {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.assess-status-new {
    background: var(--rose-light);
    color: var(--rose);
}
.assess-status-complete {
    background: var(--green-light);
    color: var(--green);
}

/* Spectrum hero in assessments landing */
.assess-spectrum-hero-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 0.75rem;
    margin-bottom: 1.25rem;
}
.assess-spectrum-hero {
    min-height: 60px;
}
.assess-spectrum-hero .spectrum-component {
    margin-bottom: 0;
}
.assess-spectrum-hero-foot {
    border-top: 1px solid var(--border-light);
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}
.assess-spectrum-retake-btn {
    background: transparent;
    border: none;
    color: var(--rose);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
}
.assess-spectrum-retake-btn:hover {
    text-decoration: underline;
}
.assess-spectrum-body > .assessments-grid {
    margin-top: 0;
}

/* Life Satisfaction Assessment */
.ls-assessment-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 38px);
    min-height: 0;
}
body.canvas-fullscreen .ls-assessment-view {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
body.canvas-fullscreen .ls-layout {
    justify-content: center;
}
.ls-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-surface);
    flex-shrink: 0;
    z-index: 10;
}
.ls-back-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}
.ls-back-btn:hover {
    background: var(--primary-tint-xs);
}
.ls-back-btn svg {
    width: 16px;
    height: 16px;
}
.ls-save-btn {
    background: var(--rose);
    color: var(--on-brand);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ls-save-btn:hover {
    opacity: 0.9;
}
.ls-layout {
    display: flex;
    gap: 2rem;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.ls-domains-col {
    flex: 0 1 560px;
    min-width: 0;
    padding: 1.5rem 0 1.5rem 1.5rem;
}
.ls-chart-col {
    width: 460px;
    flex-shrink: 0;
    padding: 1.5rem 1.5rem 1.5rem 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100%;
    overflow-y: auto;
}
.ls-instructions h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.4rem;
}
.ls-instructions p {
    color: var(--slate);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
}
.ls-domain-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ls-domain-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s;
}
.ls-domain-card:hover {
    border-color: var(--border-medium);
}
.ls-domain-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.ls-domain-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ls-domain-label {
    flex: 1;
    min-width: 0;
}
.ls-domain-label strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    display: block;
}
.ls-domain-full {
    font-size: 0.76rem;
    color: var(--slate);
    display: block;
    margin-top: 1px;
}
.ls-domain-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    min-width: 28px;
    text-align: right;
}
.ls-slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ls-slider-min, .ls-slider-max {
    font-size: 0.72rem;
    color: var(--slate);
    font-weight: 600;
    width: 14px;
    text-align: center;
}
.ls-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--slider-color, var(--rose)) 0 var(--slider-pct, 0%),
        var(--border-light) var(--slider-pct, 0%) 100%);
    outline: none;
    cursor: pointer;
}
.ls-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-color, var(--rose));
    border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.1s;
}
.ls-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.ls-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-color, var(--rose));
    border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}
.ls-slider[data-untouched] {
    opacity: 0.4;
}

/* Circle rating selector */
.ls-circle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0 0.15rem;
}
.ls-circle-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border-medium);
    background: transparent;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.1s, border-color 0.15s, background 0.15s, color 0.15s, opacity 0.15s;
}
.ls-circle-btn.trail {
    background: color-mix(in srgb, var(--circle-color) 18%, transparent);
    border-color: var(--circle-color);
    color: var(--circle-color);
    opacity: 0.6;
}
.ls-circle-btn.selected {
    background: var(--circle-color);
    border-color: var(--circle-color);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ls-circle-btn:not(.selected):not(.trail):hover {
    border-color: var(--circle-color);
    color: var(--circle-color);
    transform: scale(1.08);
}
.ls-circle-btn.trail:hover {
    opacity: 0.9;
    transform: scale(1.08);
}
.ls-circle-btn.selected:hover {
    transform: scale(1.18);
}
.ls-circle-untouched .ls-circle-btn {
    opacity: 0.35;
}
.ls-circle-untouched .ls-circle-btn:hover {
    opacity: 0.75;
}
@media (max-width: 480px) {
    .ls-circle-row {
        justify-content: flex-start;
        gap: 4px;
    }
    .ls-circle-btn {
        width: 26px;
        height: 26px;
        font-size: 0.63rem;
    }
    .ls-circle-btn.selected {
        transform: scale(1.1);
    }
    .ls-circle-btn.selected:hover {
        transform: scale(1.14);
    }
}

/* Domain info toggle button */
.ls-domain-info-btn {
    background: none;
    border: 1px solid var(--border-medium);
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    color: var(--slate);
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.02em;
    transition: color 0.15s, border-color 0.15s;
}
.ls-domain-info-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Expandable domain description */
.ls-domain-info {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--primary-tint-xs);
    border-left: 2px solid var(--border-medium);
    border-radius: 0 6px 6px 0;
}
.ls-domain-description {
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.55;
    margin: 0 0 0.4rem;
}
.ls-domain-example {
    font-size: 0.78rem;
    color: var(--slate);
    font-style: italic;
    line-height: 1.55;
    margin: 0;
}

.ls-domain-example-low {
    margin-top: 0.5rem;
}

/* Reveal all Details toggle (sits under the instruction paragraph) */
.ls-reveal-all-btn {
    background: none;
    border: 1px solid var(--border-medium);
    color: var(--primary);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin: 0 0 1rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ls-reveal-all-btn:hover {
    background: var(--primary-tint-xs);
    border-color: var(--primary);
}

/* Per-domain help links (Workbook / Article / + Journey) next to Details */
.ls-domain-help-links {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    font-size: 0.72rem;
}
.ls-help-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.ls-help-link:hover {
    color: var(--primary-dark, var(--primary));
    text-decoration: none;
}
.ls-help-add-journey {
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ls-help-add-journey:hover {
    opacity: 0.85;
}

/* Subtler "add to journey" CTA inside the expanded details panel */
.ls-domain-help-cta {
    margin: 0.6rem 0 0;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--slate);
    line-height: 1.5;
}
.ls-domain-help-cta a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ls-domain-help-cta a:hover {
    text-decoration: none;
}

/* Phone: let the header wrap so the help links and Details stack cleanly */
@media (max-width: 600px) {
    .ls-domain-header {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }
    .ls-domain-help-links {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

/* Chart section */
.ls-chart-section {
    padding: 1.5rem;
    text-align: center;
}
.ls-chart-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 1rem;
}
.ls-chart-wrap, .ls-chart-placeholder-ring {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.assess-radial-svg {
    overflow: visible;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.assess-arc-fill {
    transition: d 0.2s ease;
}
/* Empty-state preview: each segment softly colored to invite interaction.
   Replaced by standard empty look as soon as any rating is entered. */
.assess-arc-preview {
    opacity: 0.3;
    animation: assessPreviewPulse 4.5s ease-in-out infinite;
}
@keyframes assessPreviewPulse {
    0%, 100% { opacity: 0.22; }
    50% { opacity: 0.42; }
}
@media (prefers-reduced-motion: reduce) {
    .assess-arc-preview { animation: none; opacity: 0.3; }
}
.assess-chart-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    fill: var(--charcoal) !important;
}
.assess-chart-avg {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    fill: var(--charcoal);
}
.assess-chart-avg-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    fill: var(--slate);
}
.ls-chart-placeholder-text {
    color: var(--slate);
    font-size: 0.85rem;
    margin: 0;
}

/* Frosted-glass empty state: sample chart blurred behind a reveal overlay */
.ls-chart-frosted-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.ls-chart-blur-layer {
    filter: blur(5px);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}
.ls-chart-reveal-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, var(--bg-panel) 15%, transparent 68%);
}
.ls-chart-reveal-overlay .i {
    width: 32px;
    height: 32px;
    color: #ffffff;
    stroke-width: 2.5;
    margin-bottom: 0.75rem;
}
.assess-card-preview--frosted .ls-chart-reveal-overlay .i {
    stroke-width: 2.5;
}
.ls-chart-reveal-overlay p {
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin: 0;
    max-width: 180px;
}

/* Summary */
.ls-summary-row {
    display: flex;
    gap: 2rem;
    text-align: left;
    justify-content: center;
}
.ls-summary-group {
    min-width: 130px;
}
.ls-summary-group h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}
.ls-summary-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--charcoal);
}
.ls-summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ls-summary-item strong {
    margin-left: auto;
    font-weight: 700;
}
.ls-history-note {
    color: var(--slate);
    font-size: 0.8rem;
    margin-top: 1.5rem;
    font-style: italic;
}

/* Communication Pattern Insights */
.cp-insights {
    margin-top: 1.5rem;
    text-align: left;
}
.cp-insights h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 0.75rem;
}
.cp-insight-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
}
.cp-insight-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.cp-insight-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--charcoal);
    margin: 0 0 0.6rem;
}
.cp-insight-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.cp-insight-tools-label {
    font-size: 0.7rem;
    color: var(--slate);
    font-weight: 600;
    margin-right: 0.15rem;
}
.cp-tool-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--primary-tint-sm);
    color: var(--primary);
    font-weight: 600;
}
a.cp-tool-tag-link {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
a.cp-tool-tag-link:hover {
    background: var(--primary-tint-md, var(--primary-tint-sm));
    text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {
    .ls-layout {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .ls-domains-col {
        overflow-y: visible;
        max-width: 100%;
        padding: 1.5rem 1.5rem 0;
    }
    .ls-chart-col {
        width: 100%;
        overflow-y: visible;
        position: static;
        align-self: auto;
        max-height: none;
        padding: 1rem 1.5rem 1.5rem;
    }
}
@media (max-width: 600px) {
    .assessments-landing {
        padding: 1.25rem 1rem 2rem;
    }
    .assessments-grid {
        grid-template-columns: 1fr;
    }
    .ls-layout {
        padding: 1rem;
    }
    /* Drop the per-domain bounding box on phones: borders + surface fill
       add visual weight without aiding scannability at narrow widths. Use
       padding and a larger inter-item gap for separation instead. */
    .ls-domain-card {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0.25rem 0;
    }
    .ls-domain-card:hover {
        border-color: transparent;
    }
    .ls-domain-list {
        gap: 1.25rem;
    }
}