/* Loaded first by every layout (LayoutAssetsHelper): the box model and the few element defaults
   the layout sheets build on, plus the helpers every layout uses. Colours come from each
   layout's tokens (body.site, .shell, body.auth-page). */

/* Manrope, self-hosted (DESIGN.md); the layouts preload the file. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-latin-d5c538de.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
a { color: inherit; }
/* Browser extensions add popover elements styled with a style attribute, which our CSP blocks; the
   browser's default popover box (black border, centred) then shows on our pages only. Our popovers
   set their own border, padding and background, and :where() keeps this rule below theirs. */
:where([popover]) { padding: 0; border: 0; background: transparent; color: inherit; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
/* The paper kangaroos (MascotHelper): the <img> is the layout box, the <picture> only picks the file. */
picture.mascot { display: contents; }

/* The first focusable element in the app and auth layouts */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { left: 12px; }