/* The cell module's page rules. The dark look is the default; html.cell-dark carries it. */
.cell-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cell-live .cell-static{display:none}

/* Dark look: the page takes the cell's ground, so the canvas and the page are one surface */
html.cell-dark{--bg:#0A0E0D;--ink:#E6ECE9;--soft:#9BA7A1;--line:#3A4542;--hair:#26302D;color-scheme:dark}
html.cell-dark,html.cell-dark body{background:#0A0E0D;color:var(--ink)}
html.cell-dark .ages button,html.cell-dark .bar a{color:var(--soft)}
html.cell-dark .ages button[aria-pressed=true],html.cell-dark .laser,html.cell-dark .bar a[aria-current]{color:var(--ink)}
html.cell-dark .icons a,html.cell-dark .icons li{color:var(--ink)}

/* the laser reads amber in the dark, apart from the green and red cells */
html.cell-dark .lesion{border-color:#F2B84B}
html.cell-dark .lesion::after{background:#F2B84B}
html.cell-dark .laser i{border-color:#F2B84B}
html.cell-dark .laser[aria-pressed=true] i{background:#F2B84B}
html.cell-dark.laser-on,html.cell-dark.laser-on body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='8' fill='none' stroke='%23F2B84B' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='13' r='2.5' fill='%23F2B84B'/%3E%3C/svg%3E") 13 13,crosshair}

/* the look switch: a small disc, half filled, beside Laser */
.cell-mode{font:inherit;background:none;border:0;padding:0 0 7px;margin:0;cursor:pointer;position:relative;color:var(--ink)}
.cell-mode::after{content:"";position:absolute;inset:-8px}
.cell-mode i{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.cell-mode:focus-visible{outline:2px solid var(--ink);outline-offset:3px}