/* ── S191: newsletter composer and list ──────────────────────────────────────────────────────
   Every class here is prefixed cc-nl-, and all were verified unused before being added. CSS in
   this app is one global namespace — every stylesheet loads on every page — and three S174 bugs
   came from names that collided with another module's. */

.cc-nl-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--cc-border);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--cc-space-4);
}

.cc-nl-stat {
    flex: 1 1 130px;
    /* Flex items default to min-width:auto, so a long label refuses to shrink and pushes the row
       wider than its container — the S182 topbar failure. */
    min-width: 0;
    background: var(--cc-surface, #fff);
    padding: var(--cc-space-3) var(--cc-space-4);
}

.cc-nl-stat b {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cc-text-primary);
    font-variant-numeric: tabular-nums;
}

.cc-nl-stat span {
    display: block;
    font-size: 0.8125rem;
    color: var(--cc-text-secondary);
    margin-top: 3px;
}

.cc-nl-name { font-weight: 600; color: var(--cc-text-primary); text-decoration: none; }
.cc-nl-name:hover { text-decoration: underline; }
.cc-nl-date { font-size: 0.8125rem; color: var(--cc-text-secondary); margin-top: 2px; }
.cc-nl-failed { color: var(--cc-error); font-size: 0.875rem; }

.cc-nl-practice {
    color: var(--cc-brand-primary);
    font-weight: 600;
    margin-bottom: var(--cc-space-4);
}

/* Composer: form on the left, actions parked on the right. The send button stays visible while
   scrolling a long draft — hunting for it is how a half-finished newsletter gets sent. */
.cc-nl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--cc-space-5);
    align-items: start;
}

.cc-nl-compose { min-width: 0; }
.cc-nl-side { min-width: 0; }
.cc-nl-actions { position: sticky; top: var(--cc-space-4); }

.cc-nl-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--cc-space-2);
}

.cc-nl-divider {
    border: 0;
    border-top: 1px solid var(--cc-border);
    margin: var(--cc-space-4) 0;
}

.cc-nl-blocked,
.cc-nl-warn {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cc-text-secondary);
    margin: var(--cc-space-2) 0 var(--cc-space-3);
}

.cc-nl-sent { text-align: center; margin-bottom: var(--cc-space-4); }
.cc-nl-sent b {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    color: var(--cc-success);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cc-nl-sent span { font-size: 0.8125rem; color: var(--cc-text-secondary); }

.cc-nl-block {
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: var(--cc-space-4);
    margin-bottom: var(--cc-space-3);
}

.cc-nl-block-num {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cc-text-secondary);
    margin-bottom: var(--cc-space-2);
}

.cc-nl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-space-3);
}

.cc-nl-search { flex: 1 1 240px; min-width: 0; margin-bottom: 0; }

/* The preview is rendered email HTML in a sandboxed iframe, so it inherits none of the app's
   styles and runs nothing. White ground because email clients composite on white and previewing
   it on the app's surface would misrepresent it. */
.cc-nl-preview {
    width: 100%;
    height: 760px;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: #ffffff;
}

@media (max-width: 900px) {
    .cc-nl-layout { grid-template-columns: 1fr; }
    .cc-nl-actions { position: static; }
}

@media (max-width: 560px) {
    .cc-nl-row { grid-template-columns: 1fr; }
    .cc-nl-preview { height: 560px; }
}