/* ============================================================
   ACCA Smart™ — CabComms CSS
   Used by: pages/correspondence.php
   ============================================================ */

/* ── Boundary note (human-in-the-loop reminder) ──────────────── */
.corr-boundary-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: rgba(0, 184, 169, 0.08);
    border: 1px solid var(--teal);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-5);
    margin-bottom: var(--space-6);
    color: var(--teal);
    font-size: var(--text-sm);
}

.corr-boundary-note--info {
    background-color: rgba(255, 215, 0, 0.08);
    border-color: var(--yellow);
    color: var(--yellow);
}

.corr-boundary-note--info a {
    color: inherit;
    text-decoration: underline;
}

/* ── Usage badge (reuses .quiz-usage-badge shell, text-only variant) ── */
.corr-usage-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--yellow);
}

/* ── Generator Card ──────────────────────────────────────────── */
.corr-generator-card {
    background-color: var(--acca-navy-dark);
    border: 1px solid var(--acca-navy-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.corr-generator-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--white);
    margin: 0 0 var(--space-5);
}

.corr-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.corr-freetext-note {
    font-size: var(--text-xs);
    color: rgba(245, 245, 245, 0.5);
    margin-top: var(--space-2);
}

.corr-dynamic-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.corr-form-actions {
    margin-top: var(--space-6);
}

/* ── Output Area ─────────────────────────────────────────────── */
.corr-output {
    margin-top: var(--space-6);
}

.corr-loading {
    text-align: center;
    padding: var(--space-10);
    color: rgba(245, 245, 245, 0.5);
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.corr-result {
    background-color: var(--acca-navy-dark);
    border: 1px solid var(--acca-navy-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.corr-result-header {
    margin-bottom: var(--space-5);
}

.corr-result-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--white);
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.corr-result-reminder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--yellow);
    margin: 0;
}

.corr-draft-textarea {
    width: 100%;
    min-height: 320px;
    background-color: var(--acca-navy-deepest);
    border: 1px solid var(--acca-navy-light);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    padding: var(--space-4);
    resize: vertical;
}

.corr-result-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.corr-mark-sent {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--acca-navy-light);
    font-size: var(--text-sm);
    color: rgba(245, 245, 245, 0.6);
}

.corr-mark-sent label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.corr-error {
    background-color: rgba(220, 20, 60, 0.08);
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    color: var(--red);
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .corr-result-actions {
        flex-direction: column;
    }
}