/* Parts B and C (chapters 6 to 8): the animations and figures of the means chapters. Colours come from the theme's
   variables, so both themes work; every mark also differs by dash, fill pattern or shape, never by colour alone. */

/* Chapter 6: the twelve steps. */
.anim .ts-curve {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2.5;
}

.anim .ts-normal {
    fill: none;
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.8;
}

.anim .ts-tail, .anim .ts-tail-swatch {
    fill: var(--mud-palette-warning);
    fill-opacity: 0.45;
    stroke: var(--mud-palette-warning);
    stroke-width: 1;
}

.anim .ts-mu0 {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

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

.anim .ts-crit {
    stroke: var(--mud-palette-error);
    stroke-width: 2;
    stroke-dasharray: 6 3;
}

.anim .ts-ci {
    stroke: var(--mud-palette-secondary);
    stroke-width: 4;
    stroke-linecap: square;
}

.anim .ts-verdict {
    font-weight: 700;
}

.ts-steps {
    margin: 0.75rem 0 0;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.ts-steps li {
    margin-bottom: 0.2rem;
    color: var(--mud-palette-text-secondary);
}

.ts-steps li.is-current {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* Chapter 7: two samples pulling apart. Old portal: circles; Portal v2: squares. */
.anim .tsm-dot {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.55;
}

.anim .tsm-dot.is-treatment {
    fill: var(--mud-palette-secondary);
    fill-opacity: 0.75;
}

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

.anim .tsm-zero {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.anim .tsm-curve {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.18;
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
}

.anim .tsm-ci {
    stroke: var(--mud-palette-warning);
    stroke-width: 4;
}

/* Chapter 7: pooled against Welch. Pooled: solid; Welch: outlined and dashed. */
.anim .pw-track {
    fill: var(--mud-palette-background);
    stroke: var(--mud-palette-lines-default);
}

.anim .pw-bar {
    fill: var(--mud-palette-error);
}

.anim .pw-bar.is-welch {
    fill: var(--mud-palette-success);
    fill-opacity: 0.45;
    stroke: var(--mud-palette-success);
    stroke-width: 2;
    stroke-dasharray: 5 3;
}

/* Chapter 8: pairs collapse into differences. Fewer calls: solid lines; more calls: dashed. */
.anim .pa-line {
    stroke: var(--mud-palette-primary);
    stroke-width: 1.2;
    stroke-opacity: 0.6;
}

.anim .pa-line.is-up {
    stroke: var(--mud-palette-warning);
    stroke-dasharray: 4 2;
}

.anim .pa-line.is-faded {
    stroke-opacity: 0.18;
}

.anim .pa-dot {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.7;
}

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

.anim .pa-zero {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.anim .pa-ci {
    stroke: var(--mud-palette-secondary);
    stroke-width: 4;
}

.anim .pa-ci.is-independent {
    stroke: var(--mud-palette-error);
    stroke-dasharray: 6 4;
}

.anim .pa-centre {
    fill: var(--mud-palette-text-primary);
}