/*
 * Element defaults. Deliberately almost empty — see main.css for why these
 * three files exist at all (<header-template> hard-links them) and why the
 * base server's versions were not carried over.
 *
 * Load order matters here and is the one thing worth knowing:
 * <header-template> appends the page's own <style>/<link> children FIRST and
 * these shared sheets AFTER, so a rule here beats a page rule at equal
 * specificity. That is why frontend/pages/index/index.css selects
 * `html body` rather than `body` — it is outranking a sheet that loads
 * later. Keep this file free of `body` rules and that stays a historical
 * note rather than a live conflict.
 */

/* Every box in this site is sized by its border, not its content. The one
 * page sets it on .stage already; declaring it globally means the next page
 * does not have to remember. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------------- before a custom element upgrades ----------------
 *
 * (Copied from the base server's base.css. The directory layering has a
 * site's file REPLACE the base's rather than extend it, so a site that
 * owns this stylesheet carries the guard itself.)
 *
 * A custom element is an unknown inline element until its JavaScript
 * runs and defines it. The wrapper templates below carry PAGE CONTENT in
 * their light DOM, so for that window the browser lays their children
 * out with none of the wrapper's layout — full-bleed text where a
 * centred column belongs — and then snaps them into place. That snap is
 * the flash.
 *
 * Holding them until they can lay themselves out costs nothing: the
 * children still occupy their space, so this hides a wrong layout rather
 * than reserving a blank one.
 *
 * Only elements THIS BASE defines are listed. A blanket :not(:defined)
 * would also hide a typo'd tag and any component whose module failed to
 * load, permanently — and an invisible page is worse than an ugly one.
 * For the same reason each rule arms a fallback: if the definition has
 * not arrived within three seconds it is not coming, and the content
 * appears unstyled rather than not at all.
 */
container-template:not(:defined),
page-template:not(:defined),
header-template:not(:defined),
footer-template:not(:defined),
nav-template:not(:defined),
form-template:not(:defined),
form-flow-template:not(:defined),
slideshow-template:not(:defined),
list-page:not(:defined) {
  visibility: hidden;
  animation: base-upgrade-fallback 0s linear 3s forwards;
}
@keyframes base-upgrade-fallback { to { visibility: visible; } }