/* The Bell page: three figures drawn with the anatomy kit (/anatomy/iso.css) straight on the page's dotted paper, the
   switch between the two suppositions, the ledger and the chart. The kit's tokens are set from aule's own colours, as the
   TARDIS page sets them, so a figure is paper and ink in the light look and soot and cream in the dark one. The lit part
   takes the supposition's colour (--tone): oxblood for hidden variables, verdigris for quantum mechanics. iso.css is
   unlayered, so the tokens are set unlayered too, after it. */
.iso {
    --anatomy-card: var(--paper); --anatomy-paper: var(--paper);
    --anatomy-face: color-mix(in oklab, var(--tone) 8%, var(--paper));
    --anatomy-top: light-dark(#fffdf7, #3e3734);
    --anatomy-shade-0: light-dark(#dcd6c9, #2b2523);
    --anatomy-shade-1: light-dark(#e6e0d4, #2f2926);
    --anatomy-shade-2: light-dark(#eee9de, #342d2a);
    --anatomy-shade-3: light-dark(#f6f2ea, #39322f);
    --anatomy-lit-top: color-mix(in oklab, var(--tone) 14%, var(--paper));
    --anatomy-lit-shade: color-mix(in oklab, var(--tone) 30%, var(--paper));
    --anatomy-hi: var(--ink); --anatomy-mid: var(--mute);
    --anatomy-lo: color-mix(in oklab, var(--ink) 36%, var(--paper));
    --anatomy-faint: color-mix(in oklab, var(--ink) 18%, var(--paper));
    --anatomy-lit: var(--tone); --anatomy-dot: var(--ink);
    --anatomy-halo: var(--shade); --anatomy-halo-opacity: light-dark(.22, .6);
    --anatomy-red: var(--bad); --anatomy-green: var(--good); --anatomy-blue: light-dark(#2d4f9e, #8fb0ff);
    --anatomy-text: var(--ink); --anatomy-strong: var(--ink); --anatomy-muted: var(--mute);
    --anatomy-mono: 'B612 Mono', ui-monospace, monospace;
}

@layer page {
    /* The two suppositions each have a colour, and the page takes the one that is on. */
    #page { --hidden: light-dark(#8b3a2e, #e38b7b); --quantum: light-dark(#2f6f66, #7cc9ba); --tone: var(--hidden); }
    #page:has(#world input[value=quantum]:checked) { --tone: var(--quantum); }

    /* The choice of world: two labels, the one that is on underlined in its colour, the radios themselves out of sight. */
    #world {
        display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 2ch;
        label { cursor: pointer; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; line-height: 1lh; text-decoration: underline 1px; }
        label:has(:checked) { color: var(--tone); text-decoration-color: var(--tone); }
        input { position: absolute; opacity: 0; width: 0; height: 0; }
        + .caption { text-align: center; font-style: italic; font-size: .875em; margin-block-start: -.75lh; }
    }

    /* A figure sits on the paper: the drawing, then the hint and the live readout on one line, then the caption. */
    figure.iso {
        display: grid; gap: .25lh;
        .corners { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2ch; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); line-height: 1lh;
            .readout { color: var(--ink); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; } }
        .stage { touch-action: pan-y; cursor: grab; outline-offset: 4px; user-select: none; -webkit-user-select: none; &:active { cursor: grabbing; } }
        figcaption { color: var(--mute); font-size: .875em; line-height: 1lh; }
    }
    #fig-oven .stage { cursor: ew-resize; }
    .magnets { display: grid; grid-template-columns: 1fr 1fr; gap: 1lh 2ch; align-items: start; }
    /* What the page draws onto the figures: a ring with a hole, the screws, the grains on a plate, the atoms in flight, the oven's glow. */
    .holed path { fill-rule: evenodd; }
    .iso-dots circle, .iso-screw { fill: var(--ink); opacity: .5; }
    [data-part="grains"] circle { fill: var(--ink); opacity: .75; }
    .atom, [data-part="atoms"] circle, [data-part="atoms-far"] circle { fill: var(--tone); }
    .fired :is(.iso-fill, .iso-top, .iso-shade) { fill: var(--tone); stroke: var(--tone); }

    /* The ledger: the counts in a box, the chart beside it on the paper. */
    .ledger { display: grid; grid-template-columns: minmax(26ch, 2fr) 3fr; gap: 1lh 3ch; align-items: start; }
    .counts {
        display: grid; gap: .5lh;
        table { width: 100%; border-collapse: collapse;
            td { padding: 0; line-height: 1.5lh; border-block-end: var(--hair); }
            td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
            tr.sum td { border-block-end: 0; border-block-start: var(--edge); font-weight: 700; } }
        .agree { text-align: center; b { display: block; font-size: 2.25em; line-height: 2lh; color: var(--tone); } }
        dl { display: grid; grid-template-columns: 1fr auto; gap: 0 2ch; align-items: baseline; font-size: .875em;
            dt { color: var(--mute); font-style: italic; } dd { font-weight: 700; text-align: end; } }
        button { justify-self: start; }
    }
    .graph {
        display: grid; gap: .25lh;
        svg { width: 100%; height: auto; display: block; }
        .axis { stroke: var(--ink); stroke-width: 1; }
        .grid { stroke: var(--mute); stroke-width: .5; }
        .hidden { stroke: var(--hidden); stroke-width: 1.6; fill: none; stroke-dasharray: 5 3; }
        .quantum { stroke: var(--quantum); stroke-width: 1.6; fill: none; }
        #dots circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1; }
        #cursor { stroke: var(--tone); stroke-width: 1; stroke-dasharray: 1.5 3; }
        text { font: 9px 'B612 Mono', ui-monospace, monospace; fill: var(--mute); }
        .key { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2ch; font-size: .75em; color: var(--mute);
            i { display: inline-block; width: 2ch; height: 0; vertical-align: middle; margin-inline-end: .5ch; }
            .c i { border-block-start: 2px dashed var(--hidden); }
            .q i { border-block-start: 2px solid var(--quantum); }
            .d i { width: .5em; height: .5em; background: var(--ink); border-radius: 50%; } }
        figcaption { color: var(--mute); font-size: .875em; line-height: 1lh; }
    }

    @container page (width < 56ch) {
        .magnets, .ledger { grid-template-columns: 1fr; }
    }
}