/* Hypothesis tests to explore (applets/tests.js): a few rules the shared
 * sheet does not have. Needs maths-applets.css. */

.mc-applet [hidden] { display: none !important; }
.mca-body.is-tables { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.mct-tables { display: grid; gap: 14px; min-width: 0; }
.mct-cap { margin: 0 0 4px; font-size: 0.85rem; font-weight: 800; color: var(--ink); }
.mca-table.mct-table { table-layout: auto; }
.mca-table.mct-table th, .mca-table.mct-table td { padding: 4px 3px; font-variant-numeric: tabular-nums; }
.mca-table.mct-table tbody th { width: auto; white-space: normal; font-size: 0.85rem; color: var(--ink); }
.mca-table.mct-table .is-end td, .mca-table.mct-table .is-end th, .mca-table.mct-table tfoot td, .mca-table.mct-table tfoot th { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; }
.mct-in { width: 4.4em; min-height: 36px; padding: 2px 4px; font-size: 0.95rem; }
.mct-cell { display: grid; width: 100%; min-height: 48px; padding: 3px 2px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); font: inherit; color: var(--ink); cursor: pointer; }
.mct-cell b { font-size: 1rem; }
.mct-cell small { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.mct-cell:focus-visible, .mct-name:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 2px; }
.mct-cell.is-on { border-color: var(--ink); background: color-mix(in srgb, var(--mint) 70%, var(--paper)); }
.mct-cell.is-top { box-shadow: 0 0 0 3px var(--tangerine); }
.mct-cell.is-low { background: color-mix(in srgb, var(--gold) 38%, var(--paper)); }
.mct-cell.is-low small { color: var(--ink); font-weight: 800; }
.mct-name { min-height: 36px; padding: 0 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.85rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.mca-table.mct-table tr.is-on .mct-name { border-color: var(--ink); background: color-mix(in srgb, var(--mint) 70%, var(--paper)); }
.mca-table.mct-table tr.is-low td { background: color-mix(in srgb, var(--gold) 38%, var(--paper)); }
.mca-table.mct-table tr.is-top td:last-child { box-shadow: inset 0 0 0 3px var(--tangerine); border-radius: 6px; }
.mct-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.mct-cat { font-size: 12px; font-weight: 700; fill: var(--ink); }
.mct-guide { stroke-width: 1.6; stroke-dasharray: 5 4; }
.mct-guide.is-1 { stroke: var(--ink); }
.mct-guide.is-2 { stroke: var(--teal-deep); }
.mca-working small + small { margin-top: 4px; }

@media (max-width: 860px) {
    .mca-body.is-tables { grid-template-columns: minmax(0, 1fr); }
}

/* The curve of a test statistic (pvalue, ttest): the critical values in gold,
 * the critical region as a band on the axis, the spread bracket in teal. */
.mct-cut { stroke: var(--gold); stroke-width: 2; }
.mct-region { stroke: var(--gold); stroke-width: 7; stroke-linecap: butt; }
.mct-bracket { stroke: var(--teal-deep); stroke-width: 2.4; }
.mct-boards { display: grid; gap: 10px; }
.mca[data-mc-applet="pvalue"], .mca[data-mc-applet="ttest"] { container-type: inline-size; }
@container (max-width: 780px) { .mct-body { grid-template-columns: minmax(0, 1fr); } }