/**
 * Styles for the shared PlainReadout "Start here" box and the tiered metrics headline.
 * Pair with shared/js/plain_readout.js.
 */

/* ── Start here box ───────────────────────────────────────────────────── */

.plain-readout {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 1.1rem 1.25rem 1.25rem;
}

.plain-readout__empty {
    margin: 0;
    color: #64748b;
    font-style: italic;
}

.plain-readout__verdict {
    margin: 0 0 1rem;
    padding-left: 0.85rem;
    border-left: 4px solid #94a3b8;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.45;
    color: #0f172a;
}

.plain-tone-sound { border-left-color: #10b981; }
.plain-tone-caution { border-left-color: #f59e0b; }
.plain-tone-unreliable { border-left-color: #ef4444; }

.plain-readout__questions {
    margin: 0;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.9rem;
}

.plain-readout__item {
    line-height: 1.6;
}

.plain-readout__q {
    margin: 0 0 0.2rem;
    font-weight: 650;
    color: #1e293b;
}

.plain-readout__a {
    margin: 0;
    color: #334155;
}

.plain-readout__label {
    margin: 1.25rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.plain-readout__cautions {
    margin: 0;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.5rem;
    line-height: 1.6;
    color: #7c2d12;
}

.plain-readout__notsaying {
    margin-top: 1.1rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
}

.plain-readout__notsaying > summary {
    cursor: pointer;
    font-weight: 650;
    color: #475569;
}

.plain-readout__notsaying ul {
    margin: 0.6rem 0 0;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.5rem;
    line-height: 1.6;
    color: #475569;
}

.plain-readout__sentence {
    margin-top: 1.2rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
}

.plain-readout__sentence-text {
    margin: 0 0 0.6rem;
    padding: 0.75rem 0.9rem;
    background: #ffffff;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    line-height: 1.65;
    color: #1e293b;
}

.plain-readout__copy {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
    cursor: pointer;
}

.plain-readout__copy:hover {
    background: #f1f5f9;
}

/* ── Tiered metrics: the three numbers that answer the question ────────── */

.metric-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.metric-headline__card {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.9rem 1rem;
}

.metric-headline__question {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
    color: #475569;
}

/* Compound selector so this wins over main.css's .dynamic-value regardless of load order. */
.metric-headline__card .metric-headline__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    word-break: break-word;
}

.metric-headline__gloss {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #475569;
}

/* The formal name stays on screen: students are still graded on this vocabulary. */
.metric-headline__term {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.metric-headline__vocab {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748b;
}

/* ── Two-step group test explainer ────────────────────────────────────── */

.group-test-explainer {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #7c3aed;
    border-radius: 8px;
    background: #faf9ff;
}

.group-test-explainer__title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.group-test-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.group-test-step__badge {
    display: inline-block;
    margin-bottom: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.group-test-step__title {
    margin: 0 0 0.2rem;
    font-weight: 700;
    color: #1e293b;
}

.group-test-step__body {
    margin: 0;
    line-height: 1.6;
    color: #334155;
}

.group-test-why {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    line-height: 1.6;
    color: #334155;
}

.group-test-jargon {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
}

.group-test-jargon__lead {
    font-weight: 700;
    color: #475569;
}

/* ── Equation shown above the chart ───────────────────────────────────── */

.equation-banner {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    background: #f8fafc;
}

.equation-banner__label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.equation-banner__text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.5;
    color: #0f172a;
}

.equation-banner__hint {
    margin: 0.5rem 0 0;
    font-size: 0.87rem;
    line-height: 1.55;
    color: #475569;
}

.equation-banner__hint:empty {
    display: none;
}

.metric-headline__chip {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.metric-headline__chip--sig {
    background: #d1fae5;
    color: #065f46;
}

.metric-headline__chip--nonsig {
    background: #fef3c7;
    color: #92400e;
}

.metric-more > summary {
    cursor: pointer;
    font-weight: 650;
    color: #475569;
    padding: 0.35rem 0;
}

.metric-more__note {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.88rem;
    color: #64748b;
}

/* ── Predict one case ─────────────────────────────────────────────────── */

.predict-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.predict-row input[type="number"],
.predict-row select {
    font: inherit;
    padding: 0.35rem 0.55rem;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    min-width: 8rem;
}

.predict-row output {
    font-weight: 800;
    font-size: 1.25rem;
    color: #0f172a;
    padding: 0.15rem 0.6rem;
    background: #f1f5f9;
    border-radius: 6px;
}

.predict-arrow {
    color: #94a3b8;
    font-weight: 700;
}

.predict-math {
    margin: 0.75rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92rem;
    color: #334155;
}

.predict-note {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #64748b;
}

.predict-note--warn {
    color: #92400e;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .plain-readout__copy {
        transition: none;
    }
}

@media print {
    .plain-readout__copy {
        display: none;
    }

    .plain-readout__notsaying[open] > summary {
        list-style: none;
    }
}