/* ═══════════════════════════════════════════════════════════════════════════
   WORKSPACE-LEGACY — styles specific to the existing 4 workspaces
   ═══════════════════════════════════════════════════════════════════════════
   Used by: WorkspaceCompetitor.ascx (existing pattern, will be replaced),
            WorkspaceMarketing.ascx, WorkspaceProduct.ascx, WorkspaceBrand.ascx
   
   Workspaces rebuilt with the new verdict/situation/play pattern stop using
   this file and use workspace-pattern.css instead. As workspaces migrate,
   their sections here can be deleted. Eventually this file disappears.

   CSS variables (--teal, --bordlt, etc.) come from intelligence-shell.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   COMPETITOR & PRICING WORKSPACE (legacy — pre-pattern)
   ═══════════════════════════════════════════════════════════════════════ */

.comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.comp-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 18px 20px;
}

.comp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.comp-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comp-link {
    font-size: 11.5px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
}

    .comp-link:hover {
        text-decoration: underline;
    }

.pos-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .pos-pill.pos-premium {
        background: #fef9c3;
        color: #854d0e;
    }

    .pos-pill.pos-mid {
        background: var(--light);
        color: var(--teal);
    }

    .pos-pill.pos-budget {
        background: #dbeafe;
        color: #1e40af;
    }

.comp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.comp-stat {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 7px;
    padding: 8px 10px;
}

.comp-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}

.comp-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.comp-products {
    margin-bottom: 12px;
}

.comp-products-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.comp-products-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.6;
}

.comp-angle {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-left: 3px solid var(--teal);
    padding: 9px 12px;
    border-radius: 6px;
}

.comp-angle-label {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}

.comp-angle-text {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.5;
}

/* HEATMAP (competitor) */
.heatmap {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 13px;
}

    .heatmap th {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--sub2);
        padding: 8px 10px;
        text-align: center;
        background: var(--surf);
        border-radius: 6px;
    }

    .heatmap td {
        text-align: center;
        padding: 14px 10px;
        font-weight: 700;
        font-size: 13px;
        border-radius: 6px;
        min-width: 80px;
    }

        .heatmap td.heatmap-row-label {
            text-align: left;
            background: var(--surf);
            color: var(--text);
            font-size: 12.5px;
            font-weight: 600;
            padding: 10px 12px;
            text-transform: none;
            letter-spacing: 0;
        }

    .heatmap th.heatmap-row-label {
        background: var(--ink2);
        color: #fff;
    }

/* MARKET BANDS (competitor) */
.band-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.band-tier {
    display: grid;
    grid-template-columns: 120px 130px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 9px;
    background: var(--surf);
    border: 1px solid var(--bordlt);
}

    .band-tier.band-budget {
        border-left: 4px solid #6b7280;
    }

    .band-tier.band-mid {
        border-left: 4px solid #3b82f6;
    }

    .band-tier.band-premium {
        border-left: 4px solid #0D6B5E;
    }

    .band-tier.band-luxury {
        border-left: 4px solid #d97706;
    }

.band-name {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.band-range {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-family: 'DM Mono', monospace;
}

.band-sellers {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.band-seller {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 100px;
    padding: 3px 11px;
    font-size: 11.5px;
    color: var(--text);
    font-weight: 600;
}

.band-empty {
    font-size: 11.5px;
    color: var(--sub2);
    font-style: italic;
}

.whitespace-block {
    margin-top: 12px;
    background: linear-gradient(135deg, #0D1C19 0%, #0A4A40 100%);
    border-radius: 9px;
    padding: 14px 16px;
    color: #fff;
}

.ws-label {
    font-size: 10.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.ws-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #fff;
}

.alert-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

.alert-list-up li::marker {
    color: #dc6502;
}

.alert-list-down li::marker {
    color: #3b82f6;
}


/* ═══════════════════════════════════════════════════════════════════════
   MARKETING WORKSPACE
   ═══════════════════════════════════════════════════════════════════════ */

/* AD HOOKS */
.hook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.hook-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}

    .hook-card:hover {
        border-color: var(--teal);
        background: #fff;
        transform: translateY(-1px);
    }

.hook-text {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 8px;
}

.hook-actions {
    display: flex;
    justify-content: flex-end;
}

.hook-copy {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hook-card.copied {
    background: #dcfce7;
    border-color: #166534;
}

    .hook-card.copied .hook-copy::before {
        content: "✓ Copied! ";
    }

/* WORD PILLS */
.word-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.word-pill {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 100px;
    font-weight: 600;
    border: 1.5px solid transparent;
}

.word-use {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.word-avoid {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
    text-decoration: line-through;
}

/* QUOTE GRID */
.quote-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1.5px solid var(--bordlt);
    padding-bottom: 0;
}

.qtab {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--sub);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    font-family: inherit;
    transition: all .12s;
}

    .qtab:hover {
        color: var(--text);
    }

    .qtab.active {
        color: var(--teal);
        border-bottom-color: var(--teal);
    }

.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.quote-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--sub2);
}

    .quote-card.quote-positive {
        border-left-color: #16a34a;
        background: #f0fdf4;
    }

    .quote-card.quote-negative {
        border-left-color: #dc2626;
        background: #fef2f2;
    }

    .quote-card.quote-neutral {
        border-left-color: #9ca3af;
    }

    .quote-card.hide {
        display: none;
    }

.quote-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    font-style: italic;
}

.quote-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
}

.quote-sent {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 100px;
}

.quote-sent-positive {
    background: #dcfce7;
    color: #166534;
}

.quote-sent-negative {
    background: #fee2e2;
    color: #991b1b;
}

.quote-sent-neutral {
    background: #f3f4f6;
    color: #4b5563;
}

.quote-source {
    color: var(--sub);
    font-weight: 500;
}

.quote-copy {
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--bordlt);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--sub);
    font-family: inherit;
}

    .quote-copy:hover {
        border-color: var(--teal);
        color: var(--teal);
    }

    .quote-copy.copied {
        background: #dcfce7;
        color: #166534;
        border-color: #16a34a;
    }

/* RISING QUERIES */
.rising-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rising-item {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
}

    .rising-item[open] {
        border-color: var(--teal);
    }

.rising-summary {
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

    .rising-summary::-webkit-details-marker {
        display: none;
    }

.rising-query {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.rising-intent {
    font-size: 11.5px;
    color: var(--sub);
}

.rising-toggle {
    font-size: 14px;
    color: var(--sub2);
    transition: transform .15s;
}

.rising-item[open] .rising-toggle {
    transform: rotate(180deg);
    color: var(--teal);
}

.rising-detail {
    padding: 0 16px 14px;
    border-top: 1px solid var(--bordlt);
    margin-top: 8px;
    padding-top: 12px;
}

.rising-why {
    font-size: 12.5px;
    color: var(--sub);
    line-height: 1.55;
    margin-bottom: 10px;
}

    .rising-why strong {
        color: var(--text);
    }

.rising-titles-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.rising-titles {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.7;
}

/* CONTENT QUADRANT */
.content-quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quad {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    border-top: 4px solid;
}

    .quad.quad-hot {
        border-top-color: #f97316;
    }

    .quad.quad-trending {
        border-top-color: #0D6B5E;
    }

    .quad.quad-gaps {
        border-top-color: #3b82f6;
    }

    .quad.quad-avoid {
        border-top-color: #9ca3af;
    }

.quad-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text);
    margin-bottom: 8px;
}

.quad-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

.quad-list-gaps li {
    margin-bottom: 10px;
}

    .quad-list-gaps li strong {
        display: inline-block;
    }

.gap-format-pill {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--light);
    color: var(--teal);
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: 6px;
}

.gap-why {
    font-size: 11.5px;
    color: var(--sub);
    line-height: 1.5;
    margin-top: 3px;
    font-style: italic;
}

/* CHANNEL PLAYBOOKS */
.playbook-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1.5px solid var(--bordlt);
    overflow-x: auto;
}

.ptab {
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--sub);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    font-family: inherit;
    transition: all .12s;
    white-space: nowrap;
}

    .ptab:hover {
        color: var(--text);
    }

    .ptab.active {
        color: var(--teal);
        border-bottom-color: var(--teal);
    }

.pb-pane {
    display: none;
}

    .pb-pane.active {
        display: block;
    }

.pb-summary {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
    background: var(--surf);
    border-left: 3px solid var(--teal);
    padding: 12px 16px;
    border-radius: 7px;
    margin: 0 0 14px;
}

.pb-platform {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 12px;
}

.pb-platform-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pb-platform-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
}

.pb-platform-why {
    font-size: 13px;
    color: var(--sub);
    line-height: 1.55;
    margin: 0 0 10px;
}

.pb-platform-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--sub);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 7px;
}

    .pb-platform-meta strong {
        color: var(--text);
    }

.pb-row {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 8px;
}

    .pb-row strong {
        color: var(--text);
    }

.pb-examples-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 14px 0 6px;
}

.pb-example {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 6px;
}

.pb-ad {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 7px;
    padding: 11px 14px;
    margin-bottom: 8px;
}

.pb-ad-head {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.pb-ad-body {
    font-size: 12.5px;
    color: var(--sub);
    line-height: 1.5;
}

.pb-accounts-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 10px 0 5px;
}

.pb-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pb-account {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--teal);
    background: var(--light);
    padding: 3px 9px;
    border-radius: 100px;
}

.pb-firststep {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-left: 3px solid var(--teal);
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    border-radius: 7px;
}

    .pb-firststep strong {
        color: var(--text);
    }


/* ═══════════════════════════════════════════════════════════════════════
   PRODUCTS WORKSPACE
   ═══════════════════════════════════════════════════════════════════════ */

/* GAP OPPORTUNITIES */
.gap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.gap-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 4px solid var(--sub2);
}

    .gap-card.gap-pri-high {
        border-left-color: #dc2626;
        background: #fef2f2;
    }

    .gap-card.gap-pri-mid {
        border-left-color: #f59e0b;
        background: #fffbeb;
    }

    .gap-card.gap-pri-low {
        border-left-color: #9ca3af;
    }

.gap-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.gap-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.gap-rationale {
    font-size: 12.5px;
    color: var(--sub);
    line-height: 1.55;
}

/* TRENDING PRODUCTS */
.trend-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1.5px solid var(--bordlt);
    overflow-x: auto;
}

.ttab {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--sub);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    font-family: inherit;
    transition: all .12s;
    white-space: nowrap;
}

    .ttab:hover {
        color: var(--text);
    }

    .ttab.active {
        color: var(--teal);
        border-bottom-color: var(--teal);
    }

.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.trend-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    border-top: 4px solid var(--sub2);
}

    .trend-card.trend-pri-high {
        border-top-color: #dc2626;
        background: #fef2f2;
    }

    .trend-card.trend-pri-mid {
        border-top-color: #f59e0b;
    }

    .trend-card.trend-pri-low {
        border-top-color: #9ca3af;
    }

    .trend-card.hide {
        display: none;
    }

.trend-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.trend-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.trend-why {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 10px;
}

.trend-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}

.trend-evidence {
    color: var(--sub);
    font-style: italic;
}

.trend-country {
    font-weight: 600;
    color: var(--text);
    background: #fff;
    padding: 2px 9px;
    border-radius: 100px;
    border: 1px solid var(--bordlt);
}

/* QUORA */
.quora-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.quora-pane {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
}

.quora-pane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.1px;
}

.quora-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.quora-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub2);
    background: #fff;
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid var(--bordlt);
}

.quora-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

    .quora-list li {
        margin-bottom: 5px;
    }

.quora-faq li {
    font-weight: 500;
}

/* UNIQUE NICHES */
.niche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.niche-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    border-top: 3px solid #6b7280;
}

.niche-head {
    margin-bottom: 10px;
}

.niche-seller {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
    margin-bottom: 2px;
}

.niche-cat {
    font-size: 12px;
    color: var(--sub);
    font-weight: 500;
}

.niche-moat {
    font-size: 12px;
    color: var(--text);
    line-height: 1.55;
    background: #fff;
    border: 1px solid var(--bordlt);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

    .niche-moat strong {
        color: var(--text);
    }

.niche-examples-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.niche-example {
    font-size: 12px;
    color: var(--sub);
    font-style: italic;
    line-height: 1.5;
}

/* SEASONAL CALENDAR */
.month-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.month-cell {
    position: relative;
    padding: 14px 6px 12px;
    border-radius: 8px;
    text-align: center;
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
}

    .month-cell.month-peak {
        background: #fef2f2;
        border-color: #fca5a5;
    }

    .month-cell.month-rampup {
        background: #fff7ed;
        border-color: #fdba74;
    }

    .month-cell.month-low {
        background: #f3f4f6;
        border-color: #d1d5db;
    }

    .month-cell.month-current {
        box-shadow: 0 0 0 2px var(--teal);
        background: var(--light);
        border-color: var(--teal);
    }

.month-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.month-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sub);
}

.month-cell.month-peak .month-label {
    color: #991b1b;
}

.month-cell.month-rampup .month-label {
    color: #9a3412;
}

.month-cell.month-low .month-label {
    color: #4b5563;
}

.month-now {
    position: absolute;
    top: -8px;
    right: -4px;
    background: var(--teal);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 100px;
    letter-spacing: .05em;
}

.month-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--sub);
    padding: 10px 14px;
    background: var(--surf);
    border-radius: 7px;
}

.legend-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: middle;
}

    .legend-dot.legend-peak {
        background: #fca5a5;
    }

    .legend-dot.legend-rampup {
        background: #fdba74;
    }

    .legend-dot.legend-low {
        background: #d1d5db;
    }

    .legend-dot.legend-neutral {
        background: var(--bordlt);
    }

/* AD SPEND CALENDAR */
.spend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spend-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 13px 16px;
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
}

.spend-period {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.1px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--bordlt);
    text-align: center;
}

.spend-action {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.spend-reason {
    font-size: 12px;
    color: var(--sub);
    line-height: 1.55;
    font-style: italic;
}

/* CATALOGUE GAPS */
.catgap-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.catgap-label {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--bordlt);
}

.catgap-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.catgap-item {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 8px;
    padding: 10px 12px;
}

.catgap-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

    .catgap-item-head .catgap-item-title {
        margin-bottom: 0;
    }

.catgap-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.4;
}

.catgap-item-why {
    font-size: 11.5px;
    color: var(--sub);
    line-height: 1.55;
    margin-bottom: 5px;
}

.catgap-stocked-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
    margin-bottom: 4px;
}

.catgap-stocked {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.catgap-seller {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--bordlt);
    padding: 2px 8px;
    border-radius: 100px;
}

/* THREE-STAR */
.threestar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.ts-pane {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    border-top: 3px solid;
}

    .ts-pane.ts-almost {
        border-top-color: #16a34a;
    }

    .ts-pane.ts-fixes {
        border-top-color: #3b82f6;
    }

    .ts-pane.ts-hidden {
        border-top-color: #a855f7;
    }

.ts-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.ts-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════════
   BRAND & SENTIMENT WORKSPACE
   ═══════════════════════════════════════════════════════════════════════ */

/* SENTIMENT GAUGE */
.gauge-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.gauge-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gauge-bar {
    width: 100%;
    height: 14px;
    background: var(--bordlt);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.gauge-fill {
    height: 100%;
    border-radius: 100px;
    transition: width .8s ease;
}

    .gauge-fill.gauge-v-strong {
        background: linear-gradient(90deg, #16a34a, #22c55e);
    }

    .gauge-fill.gauge-v-positive {
        background: linear-gradient(90deg, #0D6B5E, #10b981);
    }

    .gauge-fill.gauge-v-mixed {
        background: linear-gradient(90deg, #f59e0b, #fbbf24);
    }

    .gauge-fill.gauge-v-negative {
        background: linear-gradient(90deg, #dc2626, #ef4444);
    }

    .gauge-fill.gauge-v-neutral {
        background: linear-gradient(90deg, #6b7280, #9ca3af);
    }

.gauge-pct {
    font-size: 48px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -1.5px;
    line-height: 1;
    font-family: 'DM Mono', monospace;
}

.gauge-counts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.count-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--surf);
    border: 1px solid var(--bordlt);
}

    .count-block.count-pos {
        border-left: 3px solid #16a34a;
    }

    .count-block.count-neg {
        border-left: 3px solid #dc2626;
    }

    .count-block.count-tot {
        border-left: 3px solid var(--ink2);
        background: #fff;
    }

.count-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.count-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    font-family: 'DM Mono', monospace;
}

/* MESSAGING GAP HERO */
.gap-card-hero.gap-hero-gap-crit {
    border: 2px solid #dc2626;
    background: #fef2f2;
}

.gap-card-hero.gap-hero-gap-high {
    border: 2px solid #f59e0b;
    background: #fffbeb;
}

.gap-card-hero.gap-hero-gap-mid {
    border: 2px solid #fbbf24;
}

.gap-card-hero.gap-hero-gap-low {
    border: 2px solid #22c55e;
    background: #f0fdf4;
}

.gap-score-pill {
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .gap-score-pill strong {
        font-weight: 800;
        font-size: 13px;
    }

    .gap-score-pill.gap-score-gap-crit {
        background: #fee2e2;
        color: #991b1b;
    }

    .gap-score-pill.gap-score-gap-high {
        background: #fef3c7;
        color: #92400e;
    }

    .gap-score-pill.gap-score-gap-mid {
        background: #fef9c3;
        color: #854d0e;
    }

    .gap-score-pill.gap-score-gap-low {
        background: #dcfce7;
        color: #166534;
    }

.gap-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.gap-block {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    padding: 14px 16px;
}

.gap-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.gap-label-old {
    color: var(--sub);
}

.gap-label-want {
    color: var(--teal);
}

.gap-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}

.rewrite-block {
    background: linear-gradient(135deg, #0D1C19 0%, #0A4A40 100%);
    color: #fff;
    padding: 18px 20px;
    border-radius: 9px;
    margin-bottom: 14px;
}

.rewrite-label {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

.rewrite-text {
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.55;
    margin: 0;
    letter-spacing: -0.2px;
}

.asset-callout {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-left: 3px solid #a855f7;
    padding: 12px 14px;
    border-radius: 7px;
}

.asset-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
}

.asset-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}

/* MISMATCH TABLE */
.mismatch-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mismatch-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 14px;
}

.mismatch-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 14px;
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    align-items: start;
}

.mismatch-cell {
    font-size: 13px;
    line-height: 1.55;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--bordlt);
}

.mismatch-says {
    color: var(--sub);
}

.mismatch-want {
    color: var(--text);
    font-weight: 500;
    border-left: 2px solid var(--teal);
}

.mismatch-fix {
    color: #166534;
    font-weight: 600;
    background: #f0fdf4;
    border-color: #86efac;
}

.missing-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text);
}

    .missing-list li {
        margin-bottom: 4px;
    }

/* THEMES (praises / complaints) */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}

.theme-card {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 11px;
    padding: 16px 18px;
    border-top: 4px solid var(--sub2);
}

    .theme-card.theme-praise {
        border-top-color: #16a34a;
        background: #f0fdf4;
    }

    .theme-card.theme-complaint {
        border-top-color: #dc2626;
        background: #fef2f2;
    }

    .theme-card.theme-freq-high {
        border-top-width: 5px;
    }

.theme-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.theme-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.freq-pill {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

    .freq-pill.freq-high {
        background: #dc2626;
        color: #fff;
    }

    .freq-pill.freq-mid {
        background: #f59e0b;
        color: #fff;
    }

    .freq-pill.freq-low {
        background: #9ca3af;
        color: #fff;
    }

.theme-vpo {
    background: linear-gradient(135deg, #0D1C19 0%, #0A4A40 100%);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform .12s;
    position: relative;
}

    .theme-vpo:hover {
        transform: translateY(-1px);
    }

    .theme-vpo.copied {
        background: linear-gradient(135deg, #166534 0%, #16a34a 100%);
    }

        .theme-vpo.copied .theme-vpo-copy::before {
            content: "✓ Copied! ";
        }

.theme-vpo-label {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.theme-vpo-text {
    font-size: 13.5px;
    color: #fff;
    line-height: 1.5;
    font-weight: 600;
    font-style: italic;
}

.theme-vpo-copy {
    font-size: 9.5px;
    color: rgba(255, 255, 255, .7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 6px;
    text-align: right;
}

.theme-quotes-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.theme-quotes {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.theme-quote {
    font-size: 12px;
    color: var(--sub);
    font-style: italic;
    line-height: 1.5;
    padding: 5px 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--bordlt);
}

.theme-sowhat {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 7px;
    border-left: 3px solid var(--sub2);
}

    .theme-sowhat strong {
        color: var(--text);
    }

/* PERSONAS */
.persona-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.persona-card {
    background: #fff;
    border: 1.5px solid var(--bordlt);
    border-radius: 12px;
    overflow: hidden;
}

    .persona-card[open] {
        border-color: var(--teal);
        box-shadow: 0 2px 8px rgba(13, 107, 94, .06);
    }

.persona-summary {
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-left: 4px solid transparent;
    background: var(--surf);
}

    .persona-summary::-webkit-details-marker {
        display: none;
    }

    .persona-summary.persona-p-primary {
        border-left-color: var(--teal);
        background: linear-gradient(90deg, var(--light) 0%, var(--surf) 50%);
    }

    .persona-summary.persona-p-secondary {
        border-left-color: #3b82f6;
    }

    .persona-summary.persona-p-other {
        border-left-color: #9ca3af;
    }

.persona-summary-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.persona-pri {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

    .persona-pri.persona-pri-p-primary {
        background: var(--teal);
        color: #fff;
    }

    .persona-pri.persona-pri-p-secondary {
        background: #3b82f6;
        color: #fff;
    }

    .persona-pri.persona-pri-p-other {
        background: #9ca3af;
        color: #fff;
    }

.persona-summary-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.persona-seg {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sub);
    font-style: italic;
}

.persona-summary-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sub);
    font-weight: 500;
}

.persona-toggle {
    margin-left: 8px;
    font-size: 14px;
    color: var(--sub2);
    transition: transform .15s;
}

.persona-card[open] .persona-toggle {
    transform: rotate(180deg);
    color: var(--teal);
}

.persona-detail {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--bordlt);
}

.persona-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.pfact {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 8px;
    padding: 8px 12px;
}

.pfact-l {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--sub2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}

.pfact-v {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.persona-psych {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.psych-block {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    padding: 12px 14px;
    border-left: 3px solid var(--sub2);
}

    .psych-block.psych-frustration {
        border-left-color: #dc2626;
    }

    .psych-block.psych-goal {
        border-left-color: var(--teal);
    }

    .psych-block.psych-hate {
        border-left-color: #9ca3af;
    }

    .psych-block.psych-moment {
        border-left-color: #a855f7;
    }

.psych-label {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
}

.psych-text {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
}

.persona-signals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.sig-pane {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    padding: 12px 14px;
}

.sig-label {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.sig-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sig-pill {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--bordlt);
    padding: 3px 9px;
    border-radius: 100px;
    font-style: italic;
}

.sig-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text);
}

.persona-block {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.obj-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

    .obj-list li {
        font-style: italic;
        color: var(--sub);
    }

.emotion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.emo-pane {
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    padding: 12px 14px;
    border-top: 3px solid;
}

    .emo-pane.emo-safe {
        border-top-color: #16a34a;
    }

    .emo-pane.emo-threat {
        border-top-color: #dc2626;
    }

.emo-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.emo-pane.emo-safe .emo-label {
    color: #166534;
}

.emo-pane.emo-threat .emo-label {
    color: #991b1b;
}

.emo-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text);
}

.price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.price-cell {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--bordlt);
    padding: 8px 11px;
    border-radius: 7px;
}

    .price-cell strong {
        color: var(--text);
    }

.ad-target-block {
    background: #fff;
    border-left: 3px solid var(--teal);
}

.ad-target-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    font-family: 'DM Mono', monospace;
    background: var(--surf);
    padding: 10px 12px;
    border-radius: 7px;
    border: 1px solid var(--bordlt);
    margin-top: 6px;
}

.persona-narrative {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    padding: 14px 16px;
    background: var(--surf);
    border-radius: 9px;
    border-left: 3px solid var(--teal);
    margin-top: 14px;
}

/* NARRATIVES */
.narrative-pane {
    background: var(--surf);
    border: 1px solid var(--bordlt);
    border-radius: 9px;
    margin-bottom: 8px;
}

.narrative-summary {
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
}

    .narrative-summary::-webkit-details-marker {
        display: none;
    }

.narrative-toggle {
    font-size: 13px;
    color: var(--sub2);
    transition: transform .15s;
}

.narrative-pane[open] .narrative-toggle {
    transform: rotate(180deg);
    color: var(--teal);
}

.narrative-body {
    padding: 0 18px 18px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.75;
    border-top: 1px solid var(--bordlt);
    padding-top: 14px;
}

/* RED FLAGS (full detail — brand workspace) */
.redflag-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.redflag-item {
    background: var(--surf);
    border: 1.5px solid var(--bordlt);
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 4px solid var(--sub2);
}

    .redflag-item.rf-sev-crit {
        border-left-color: #991b1b;
        background: #fef2f2;
    }

    .redflag-item.rf-sev-high {
        border-left-color: #dc2626;
        background: #fef2f2;
    }

    .redflag-item.rf-sev-mid {
        border-left-color: #f59e0b;
        background: #fffbeb;
    }

    .redflag-item.rf-sev-low {
        border-left-color: #9ca3af;
    }

.redflag-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.rf-sev {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

    .rf-sev.rf-sev-crit {
        background: #991b1b;
        color: #fff;
    }

    .rf-sev.rf-sev-high {
        background: #dc2626;
        color: #fff;
    }

    .rf-sev.rf-sev-mid {
        background: #f59e0b;
        color: #fff;
    }

    .rf-sev.rf-sev-low {
        background: #9ca3af;
        color: #fff;
    }

.redflag-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
    flex: 1;
}

.redflag-source {
    font-size: 10.5px;
    color: var(--sub);
    background: #fff;
    padding: 3px 9px;
    border-radius: 100px;
    border: 1px solid var(--bordlt);
    font-weight: 600;
}

.redflag-detail {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 8px;
}

.redflag-quote {
    font-size: 12.5px;
    color: var(--sub);
    font-style: italic;
    background: #fff;
    padding: 9px 12px;
    border-radius: 7px;
    border: 1px solid var(--bordlt);
    margin-bottom: 8px;
    line-height: 1.55;
}

.redflag-implication {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--bordlt);
    border-radius: 7px;
    border-left: 3px solid var(--teal);
}

    .redflag-implication strong {
        color: var(--text);
    }

/* ═══ RESPONSIVE (workspace-specific) ═══════════════════════════════════ */

@media (max-width: 900px) {
    .gauge-wrap {
        grid-template-columns: 1fr;
    }

    .gap-twocol {
        grid-template-columns: 1fr;
    }

    .mismatch-header, .mismatch-row {
        grid-template-columns: 1fr;
    }

        .mismatch-header div::before, .mismatch-cell::before {
            display: none;
        }

    .emotion-grid {
        grid-template-columns: 1fr;
    }

    .month-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .spend-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .catgap-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .content-quad {
        grid-template-columns: 1fr;
    }

    .quote-grid {
        grid-template-columns: 1fr;
    }

    .hook-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .month-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}