/* ============================================================
   NewsletterQA – Styles (extracted from original index.html)
   ============================================================ */

:root {
    --green:  #1e9e51;
    --yellow: #e0a800;
    --red:    #d12b2b;
    --bg:     #f4f5f7;
    --card:   #fff;
    --ink:    #1f2430;
    --muted:  #6b7280;
    --border: #e3e6ea;
    --accent: #2b6cb0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ── Header ──────────────────────────────────────────────── */
header { background: var(--ink); color: #fff; padding: 20px 28px; }
header h1 { margin: 0; font-size: 20px; }
header p  { margin: 4px 0 0; color: #aeb6c2; font-size: 13px; }

/* ── Layout ──────────────────────────────────────────────── */
.wrap  { max-width: 1080px; margin: 22px auto; padding: 0 20px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }

/* ── Controls ────────────────────────────────────────────── */
.controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.field    { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; }

select, button {
    font: inherit;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
button { cursor: pointer; font-weight: 600; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary:hover { filter: brightness(1.07); }
button.ghost:hover { background: #f0f1f3; }

/* ── Target info ─────────────────────────────────────────── */
.target {
    font-size: 13px;
    color: var(--ink);
    background: #eef4fb;
    border: 1px solid #d4e3f5;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 12px;
}
.target b { color: var(--accent); }

/* ── Textarea ────────────────────────────────────────────── */
textarea {
    width: 100%;
    min-height: 220px;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    resize: vertical;
}

/* ── Hint & assumptions ──────────────────────────────────── */
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

details.assump { font-size: 13px; color: var(--muted); margin-top: 8px; }
details.assump pre {
    background: #f7f8fa;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    overflow: auto;
    font-size: 12px;
    color: var(--ink);
}

/* ── Summary pills ───────────────────────────────────────── */
.summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pill {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    flex: 1;
    min-width: 140px;
}
.pill .n { font-size: 26px; font-weight: 700; }
.pill.green  .n { color: var(--green); }
.pill.yellow .n { color: var(--yellow); }
.pill.red    .n { color: var(--red); }

/* ── Category cards ──────────────────────────────────────── */
details.cat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
details.cat > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
details.cat > summary::-webkit-details-marker { display: none; }

.cat .left { border-left: 5px solid var(--border); padding-left: 10px; font-weight: 600; }
.cat.green  .left { border-color: var(--green); }
.cat.yellow .left { border-color: var(--yellow); }
.cat.red    .left { border-color: var(--red); }
.cat .count { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ── Findings ────────────────────────────────────────────── */
.findings { padding: 2px 18px 14px 34px; }
.f { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.f:last-child { border-bottom: none; }
.f .msg    { font-weight: 500; }
.f .detail { color: var(--muted); font-size: 13px; margin-top: 2px; word-break: break-all; }
.f code    { background: #f0f1f3; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ── Footer & empty state ────────────────────────────────── */
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 28px; }
.empty { color: var(--muted); text-align: center; padding: 24px; }