/* ── Compare Tool: Section title ── */
.compare-section-title {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ── Compare Tool: KPI Grid ── */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.compare-kpi-card {
    background: var(--color-surface);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.compare-kpi-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    text-align: center;
}

.compare-kpi-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    padding: 0.75rem;
}

.compare-kpi-side {
    text-align: center;
    flex: 1;
}

.compare-kpi-side:first-child {
    border-right: 1px solid var(--color-border);
}

.compare-kpi-comp-label {
    font-size: 0.625rem;
    margin-bottom: 0.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

.compare-kpi-side:first-child .compare-kpi-comp-label {
    color: #0066CC;
}

.compare-kpi-side:last-child .compare-kpi-comp-label {
    color: #FF3333;
}

.compare-kpi-val {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text);
}

/* ── Compare Tool: CTA row ── */
.compare-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.compare-cta-a {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.compare-cta-a:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), var(--color-surface));
}

.compare-cta-b {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
    border: 1px solid var(--color-danger-border);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.compare-review-bridge {
    margin-top: 3rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.compare-review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.compare-review-head h3 {
    margin: 0.25rem 0 0.5rem;
}

.compare-review-head p {
    margin: 0;
    color: var(--color-text-secondary);
}

.compare-review-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.compare-review-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.compare-review-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.compare-review-inline-link:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), var(--color-surface));
}

.compare-review-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.compare-review-state-card {
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.compare-review-state-card-blocking {
    border-color: rgba(220, 38, 38, 0.28);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), var(--color-surface));
}

.compare-review-state-card-caution {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), var(--color-surface));
}

.compare-review-state-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.compare-review-state-value {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.1rem;
}

.compare-review-state-note {
    margin: 0.45rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.compare-review-handoff-summary {
    margin-bottom: 1rem;
    padding: 1rem 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: var(--color-surface);
}

.compare-review-handoff-summary-ready {
    border-color: rgba(22, 163, 74, 0.22);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.13), var(--color-surface));
}

.compare-review-handoff-summary-export_only,
.compare-review-handoff-summary-pending {
    border-color: rgba(37, 99, 235, 0.2);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), var(--color-surface));
}

.compare-review-handoff-summary-caution {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), var(--color-surface));
}

.compare-review-handoff-summary-blocked {
    border-color: rgba(220, 38, 38, 0.24);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), var(--color-surface));
}

.compare-review-handoff-note {
    margin: 0.85rem 0 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.compare-review-handoff-note-subtle {
    font-size: 0.92rem;
}

.compare-review-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.compare-review-form-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.compare-review-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.compare-review-card-head h4 {
    margin: 0;
}

.compare-review-form-card p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.compare-review-conflict-panel {
    margin-bottom: 1rem;
}

.compare-review-conflict-detail {
    margin-top: 0.9rem;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.compare-review-conflict-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.compare-review-conflict-question {
    padding: 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: var(--color-surface);
}

.compare-review-conflict-question-title {
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.45;
}

.compare-review-conflict-question-meta {
    margin-top: 0.35rem;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
}

.compare-review-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.compare-review-input,
.compare-review-select,
.compare-review-textarea {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.compare-review-textarea {
    min-height: 92px;
    resize: vertical;
}

.compare-review-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.compare-review-form-row-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compare-review-form-row-inline {
    align-items: end;
}

.compare-review-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.compare-review-actions-inline {
    justify-content: flex-start;
}

.compare-review-status {
    min-height: 1.25rem;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.compare-review-status.is-error {
    color: var(--color-danger-strong);
}

.compare-review-status.is-success {
    color: #0f766e;
}

.compare-review-bridge-secondary {
    margin-top: 1.25rem;
    border-color: #bfdbfe;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), var(--color-surface));
}

.compare-review-state-grid-compact {
    margin-bottom: 1rem;
}

.compare-review-form-grid-share {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.compare-review-form-card-emphasis {
    border-color: #bfdbfe;
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.08);
}

.compare-review-project-setup-panel {
    margin-bottom: 1.25rem;
    padding: 1rem 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(20, 184, 166, 0.2);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.13), var(--color-surface));
}

.compare-review-open-db-panel {
    border-color: rgba(37, 99, 235, 0.2);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), var(--color-surface));
}

.compare-review-open-db-grid .compare-review-meta-card {
    background: var(--color-surface);
}

.compare-review-open-db-chip-row .compare-review-context-chip {
    border-color: rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
}

.compare-review-links-inline {
    margin-left: auto;
}

.compare-review-project-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.compare-review-project-setup-copy {
    margin: 0.45rem 0 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.compare-review-context-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.compare-review-context-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: #115e59;
    font-size: 0.88rem;
    font-weight: 600;
}

.compare-review-context-inline {
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: var(--color-surface);
}

.compare-review-context-inline-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.compare-review-context-inline p {
    margin: 0.4rem 0 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.compare-review-context-inline-caution {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), var(--color-surface));
}

.compare-review-chip-wrap {
    min-height: 2rem;
}

.compare-review-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.compare-review-meta-card {
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: var(--color-surface);
}

.compare-review-meta-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.compare-review-meta-value {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
}

.compare-review-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.compare-review-mode-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.36);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
}

.compare-review-mode-chip.is-active {
    border-color: #2563eb;
    background: rgba(219, 234, 254, 0.92);
    color: #1d4ed8;
}

.compare-review-mode-chip-default {
    color: var(--color-text);
}

.compare-review-mode-chip-info {
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(219, 234, 254, 0.92);
    color: #1d4ed8;
}

.compare-review-mode-chip-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(254, 243, 199, 0.95);
    color: #b45309;
}

.compare-review-mode-chip-critical {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(254, 226, 226, 0.95);
    color: #b91c1c;
}

.compare-review-mode-chip-success {
    border-color: rgba(22, 163, 74, 0.24);
    background: rgba(220, 252, 231, 0.92);
    color: #166534;
}

.compare-review-audience-panel {
    margin-top: 0.9rem;
    padding: 1rem 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(37, 99, 235, 0.16);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), var(--color-surface));
}

.compare-review-audience-meta-grid {
    margin-top: 0.9rem;
}

.compare-review-audience-summary {
    margin: 0.85rem 0 0;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.compare-review-audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 0.95rem;
}

.compare-review-audience-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.95rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: var(--color-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.compare-review-audience-card.is-active {
    border-color: rgba(37, 99, 235, 0.34);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.compare-review-audience-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.compare-review-audience-title {
    font-size: 1rem;
    font-weight: 700;
}

.compare-review-audience-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.compare-review-audience-copy {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.compare-review-audience-copy-subtle {
    font-size: 0.9rem;
}

.compare-review-audience-button {
    align-self: flex-start;
    padding: 0.6rem 0.85rem;
}

.compare-review-link-box {
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: var(--color-surface);
}

.compare-review-link {
    color: #1d4ed8;
    font-weight: 600;
    word-break: break-all;
}

.compare-review-readiness-panel {
    margin-bottom: 1rem;
    padding: 1rem 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: var(--color-surface);
}

.compare-review-readiness-pill,
.compare-review-readiness-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.compare-review-readiness-pill-clear {
    background: #dcfce7;
    color: #166534;
}

.compare-review-readiness-pill-info,
.compare-review-readiness-severity-info {
    background: #e0f2fe;
    color: #075985;
}

.compare-review-readiness-pill-warning,
.compare-review-readiness-severity-warning {
    background: #fef3c7;
    color: #92400e;
}

.compare-review-readiness-pill-critical,
.compare-review-readiness-severity-critical {
    background: #fee2e2;
    color: #b91c1c;
}

.compare-review-meta-grid-readiness {
    margin-top: 0.85rem;
}

.compare-review-readiness-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-top: 0.95rem;
}

.compare-review-readiness-item {
    padding: 0.95rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: var(--color-surface);
}

.compare-review-readiness-item-warning {
    border-color: rgba(245, 158, 11, 0.35);
}

.compare-review-readiness-item-critical {
    border-color: rgba(239, 68, 68, 0.35);
}

.compare-review-readiness-item-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.compare-review-readiness-link {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

.compare-review-readiness-link:hover {
    color: #1d4ed8;
}

.compare-review-readiness-source {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.compare-review-readiness-detail {
    margin: 0.45rem 0 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.compare-review-readiness-action {
    margin-top: 0.6rem;
    width: fit-content;
}

.compare-review-chip-wrap-synthesis {
    margin-top: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 900px) {
    .compare-review-head,
    .compare-review-card-head {
        flex-direction: column;
    }

    .compare-review-links {
        justify-content: flex-start;
    }

    .compare-review-form-row,
    .compare-review-form-row-triple,
    .compare-review-meta-grid {
        grid-template-columns: 1fr;
    }

    .compare-review-audience-card-head {
        flex-direction: column;
    }

    .compare-review-readiness-list {
        grid-template-columns: 1fr;
    }
}