/* panel.css — the grounded panel's own styles (M4, the twin-grounding slice).
 *
 * It loads AFTER campaign.css and results.css and ADDS only what a panel needs.
 * Nothing here redefines a shared class: `.card`, `.panel`, `.chip`, `.btn`, `.defs`,
 * `.field-hint`, `.row-sub` and the four states belong to app.css and campaign.css, and
 * two stylesheets arguing over one class is how a suite app drifts out of the suite.
 *
 * TOKENS ONLY, and three rules here carry MEANING rather than decoration:
 *
 *   · `.reply` is a QUOTE, not a result card. It is deliberately plain — no mint, no
 *     emphasis, no figure treatment — because a generated reply must never acquire the
 *     visual weight this suite gives a collected measurement.
 *   · `.reply-silent` is the DID-NOT-ANSWER treatment: muted and dashed, visibly not a
 *     reply. A respondent who said nothing must not read as one who said something bland.
 *   · `.handle` is an opaque reference — monospace, muted, small. It is how an analyst
 *     pins a respondent, and it is never the label a person is read by.
 */

/* ── the roster ───────────────────────────────────────────────────────────── */

.roster-counts { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }

.roster-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.roster-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.roster-who { font-family: var(--font-display); font-size: 0.95rem; }

/* ── the ask ──────────────────────────────────────────────────────────────── */

.pin-set {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 12px 0 0;
}
.pin-set legend { padding: 0 6px; font-size: 0.82rem; color: var(--text-muted); }

.pin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.92rem; }

/* ── the replies ──────────────────────────────────────────────────────────── */

.stamp-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }

.reply {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    margin: 0 0 8px;
}
.reply-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }
.reply-who { font-family: var(--font-display); font-size: 0.95rem; margin-right: 4px; }
.reply-text { margin: 0 0 6px; line-height: 1.55; }
.reply-silent {
    color: var(--text-muted);
    font-style: italic;
    border-left: 2px dashed var(--border-strong);
    padding-left: 10px;
}
.reply-cite { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }

.handle { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-muted); }

/* ── who did not take part, and what the engine said ──────────────────────── */

.not-grounded { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.not-grounded li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
}

/* A refusal quoted from the engine, attributed by its own block rather than paraphrased
   into this app's voice. */
.engine-said {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 0.88rem;
}