/* ADA thinking orbs: <ada-orb> (home/js/orbs.js), included with components/orb.html.
   The orb is a square that fills the width it is given; the dots are drawn live on a canvas. */

ada-orb {
    /* ink: "light" draws dark dots for a light ground, "dark" mirrors them for a dark one */
    --orb-scheme: light;

    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

ada-orb > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

ada-orb[scheme="dark"] { --orb-scheme: dark; }

@media (prefers-color-scheme: dark) {
    ada-orb[scheme="auto"] { --orb-scheme: dark; }
}

/* set in a line of text, like the app's chat rows (draws the compact tuning) */
ada-orb.orb-inline {
    display: inline-block;
    width: 1.25em;
    vertical-align: -0.25em;
}