/* Parts C and D (chapters 9 to 12): the animations and figures of the proportions, counts and variances chapters. */

/* Chapter 11, observed against expected (js/chi-square-fit-animation.js): observed bars solid, expected bars hatched. */
.anim .cf-obs {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.75;
}

.anim .cf-exp {
    stroke: var(--mud-palette-warning);
    stroke-width: 1.2;
}

.anim .cf-hatch-back {
    fill: var(--mud-palette-warning);
    fill-opacity: 0.25;
}

.anim .cf-hatch-line {
    stroke: var(--mud-palette-warning);
    stroke-width: 2.5;
}

.anim .cf-track {
    fill: var(--mud-palette-background);
    stroke: var(--mud-palette-lines-default);
}

.anim .cf-seg {
    fill: var(--mud-palette-primary);
    stroke: var(--mud-palette-surface);
    stroke-width: 1;
}

.anim .cf-seg.is-alt {
    fill: var(--mud-palette-secondary);
}

.anim .cf-token {
    fill: var(--mud-palette-secondary);
    stroke: var(--mud-palette-text-primary);
    stroke-width: 1;
}

.anim .cf-tail {
    stroke: var(--mud-palette-warning);
    stroke-width: 1;
}

.anim .cf-marker {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 3;
}

.anim .cf-marker-head {
    fill: var(--mud-palette-text-primary);
}

/* Chapter 11, expected from the margins (js/chi-square-margins-animation.js): an HTML table in its own scroll box. */
.cm-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.cm-table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    min-width: 100%;
}

.cm-table caption {
    caption-side: top;
    text-align: left;
    padding-bottom: 6px;
    color: var(--mud-palette-text-secondary);
}

.cm-table th, .cm-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 8px;
    text-align: right;
    vertical-align: top;
}

.cm-table thead th {
    text-align: center;
    font-weight: 500;
}

.cm-table tbody th {
    text-align: left;
    font-weight: 500;
}

.cm-table .cm-total {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.cm-main, .cm-sub {
    display: block;
}

.cm-sub {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    min-height: 1.1em;
}

.cm-cell.is-current {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.cm-cell.is-residual .cm-main {
    font-weight: 700;
}

/* Residuals: the sign is always written; the shade and the border add sign and size. */
.cm-cell.is-more, .cm-key.is-more {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.cm-cell.is-more.is-medium {
    background: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
}

.cm-cell.is-more.is-large, .cm-key.is-more.is-large {
    background: color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.cm-cell.is-fewer, .cm-key.is-fewer {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.cm-cell.is-fewer.is-medium {
    background: color-mix(in srgb, var(--mud-palette-warning) 26%, transparent);
}

.cm-cell.is-fewer.is-large, .cm-key.is-fewer.is-large {
    background: color-mix(in srgb, var(--mud-palette-warning) 38%, transparent);
    box-shadow: inset 0 0 0 2px var(--mud-palette-warning);
}

.cm-legend {
    margin: 8px 0 0;
    font-size: 0.85rem;
}

.cm-key {
    display: inline-block;
    min-width: 1.6em;
    text-align: center;
    font-weight: 700;
    border-radius: 3px;
}

/* Chapter 12, where χ² and F come from (js/variance-animation.js): bars beyond the critical value are hatched. */
.anim .vr-bar:not(.is-beyond) {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.45;
}

.anim .vr-bar.is-beyond {
    stroke: var(--mud-palette-warning);
    stroke-width: 1;
}

.anim .vr-hatch-back {
    fill: var(--mud-palette-warning);
    fill-opacity: 0.35;
}

.anim .vr-hatch-line {
    stroke: var(--mud-palette-warning);
    stroke-width: 2.5;
}

.anim .vr-curve {
    fill: none;
    stroke: var(--mud-palette-text-primary);
    stroke-width: 2;
}

.anim .anim-title.vr-title-narrow {
    font-size: 10.5px;
}