/* core.css: the skeleton's plumbing styles, the same in every run. No look: no colors, fonts or sizes of the design.
   Loaded on every page after system.css and before components.css. */

/* A screen laid over its photo (core.js places it). Its box is the size its interface is designed at. */
[data-screen-photo] { position: relative; display: block; overflow: hidden; }
[data-screen-photo] > img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-screen] { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; backface-visibility: hidden; }
[data-screen]:not([data-placed]) { visibility: hidden; }

/* A scene fills the box its page gives it, its padding included, and keeps everything it draws inside that box. */
[data-scene] { position: relative; overflow: hidden; box-sizing: border-box; }

/* A link to a page that is only planned (Part 1): it shows, but it is not clickable yet. */
[data-planned] { pointer-events: none; cursor: default; }

/* A stop icon shows the icon of what pressing it does. */
[data-stop] .stop__play { display: none; }
[data-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-stop][aria-pressed="true"] .stop__pause { display: none; }

/* The skip link appears when it gets the focus. */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 1000; }

/* Hidden from the eye, read by screen readers. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* What the kit hides stays hidden. */
[hidden] { display: none !important; }