/* Small additions on top of Pico classless. */

.prompt-block {
    max-height: 70vh;
    overflow-y: auto;
    font-size: 0.85em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--pico-code-background-color, #f4f4f4);
    padding: 0.75em 1em;
    border-radius: 6px;
    margin: 0.25em 0 1em;
}

article header h2,
article header h3 {
    margin: 0 0 0.25em;
}

/* ===== queue row layout: prompt left, action right ===== */

.qc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5em;
    align-items: start;
}
@media (max-width: 900px) {
    .qc-row { grid-template-columns: 1fr; }
}

.prompt-pane,
.action-pane { min-width: 0; }

.prompt-pane h4,
.model-output h4 {
    margin: 0.5em 0 0.25em;
    font-size: 0.78em;
    color: var(--pico-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.headline-pane h2 {
    margin: 0;
    line-height: 1.25;
    font-size: 1.6em;
}
.headline-pane p {
    margin: 0.4em 0 1em;
}

/* model output set off with a left bar + tinted background */
.model-output {
    background: var(--pico-card-sectioning-background-color, #f5f7fa);
    border-left: 4px solid var(--pico-primary, #1095c1);
    padding: 0.75em 1em;
    margin: 0 0 1.25em;
    border-radius: 0 4px 4px 0;
}
.model-output .model-label {
    margin: 0 0 0.4em;
    font-size: 0.95em;
}
.model-output .rationale {
    margin: 0;
    line-height: 1.5;
    color: var(--pico-color);
}
.model-output .labeler {
    margin: 0.5em 0 0;
    color: var(--pico-muted-color);
}

/* ===== verdict buttons (colored) ===== */

.verdict-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5em;
    margin-top: 0.5em;
}
.verdict-buttons button {
    margin: 0;
    font-weight: 600;
    border: none;
}

.btn-good {
    --pico-background-color: #15803d;
    --pico-border-color: #15803d;
    --pico-color: #ffffff;
    background: #15803d; border-color: #15803d; color: #fff;
}
.btn-good:hover, .btn-good:focus {
    background: #166534; border-color: #166534;
}

.btn-wrong {
    --pico-background-color: #dc2626;
    --pico-border-color: #dc2626;
    --pico-color: #ffffff;
    background: #dc2626; border-color: #dc2626; color: #fff;
}
.btn-wrong:hover, .btn-wrong:focus {
    background: #b91c1c; border-color: #b91c1c;
}

.btn-tossup {
    --pico-background-color: #facc15;
    --pico-border-color: #eab308;
    --pico-color: #1f2937;
    background: #facc15; border-color: #eab308; color: #1f2937;
}
.btn-tossup:hover, .btn-tossup:focus {
    background: #eab308; border-color: #ca8a04;
}

.btn-badheadline {
    --pico-background-color: #111827;
    --pico-border-color: #111827;
    --pico-color: #ffffff;
    background: #111827; border-color: #111827; color: #fff;
}
.btn-badheadline:hover, .btn-badheadline:focus {
    background: #000000; border-color: #000000;
}

/* ===== misc ===== */

.toast {
    color: var(--pico-muted-color);
    font-style: italic;
}

.error {
    color: var(--pico-color-red-500, #b00020);
}

.team-dot {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    margin-right: 0.35em;
    vertical-align: middle;
    flex-shrink: 0;
}
.team-0 { background: #2563eb; } /* blue   — Team A */
.team-1 { background: #10b981; } /* green  — Team B */
.team-2 { background: #f59e0b; } /* amber  — Team C */

.strategist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.5em;
}

details summary {
    cursor: pointer;
    user-select: none;
}

nav ul li small a {
    text-decoration: underline;
}