/* The TARDIS page: three figures drawn with the anatomy kit (iso.css beside this), each straight on the page's dotted
   paper. The kit's tokens are set from aule's own colours, so a figure is paper and ink in the light look and soot and
   cream in the dark one, its solids hide the dots behind them, and its one lit part takes the accent. 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(--accent) 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(--accent) 14%, var(--paper));
    --anatomy-lit-shade: color-mix(in oklab, var(--accent) 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(--accent); --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 {
    /* 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: ew-resize; outline-offset: 4px; user-select: none; -webkit-user-select: none; }
        figcaption { color: var(--mute); font-size: .875em; line-height: 1lh; } /* the site's type, not the kit's legend size */
    }
    /* Reduced motion: the kit's flows and pulses are already still (iso.css); the figures jump to their targets (app.js). */
}