/* Macro tracker — light base reset (overrides base server's base.css). */
@import 'variables.css';

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: var(--font-primary);
  color: var(--ink);
}

body {
  min-height: 100vh;
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings are set tight and heavy — panel voice, not editorial voice. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
a { color: var(--color-primary); }
button { font-family: inherit; }

/* Every figure in this app is compared against another figure, so digits must
 * line up in a column. Tabular by default; opt out rather than opt in. */
input, select, textarea, button, table { font-variant-numeric: tabular-nums; }

/* Quality floor: a visible, square focus ring that reads as part of the system. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------- 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; } }