/* Base element styles and the few global helpers: Actum design system, Appendix A «base.css», verbatim. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--ff-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* transparent between the grid lines: the glow below (z-index -1) sits between html's --bg and this grid */
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px;
  background-attachment: fixed;
}
/* the soft lilac glow at the top breathes very slowly (DECISIONS 3e); paused while the tab is hidden */
body::before {
  content: ""; position: fixed; inset: -20% -10% auto; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent);
  animation: actum-glow 48s ease-in-out infinite;
}
:root[data-hidden] body::before { animation-play-state: paused; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
::placeholder { color: var(--ink-3); opacity: 1; }
::selection { background: var(--accent-wash); }
[hidden] { display: none !important; }

/* the outline follows each control's own radius; plain links get a small one */
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; animation: actum-focus var(--dur-fast) var(--ease); }
a:focus-visible { border-radius: 4px; }
/* headings that receive focus programmatically (tabIndex=-1) show no ring (DESIGN 9.3) */
:is(h1, h2, h3, [data-focus-target])[tabindex="-1"]:focus { outline: none; }

.meta { font: 400 var(--fs-meta)/var(--lh-meta) var(--ff-meta); color: var(--ink-3); }
.meta b { font-weight: 500; color: var(--ink-2); }
/* meta that is a sentence: same size and colour, letters and punctuation in Fixel (a "." in Num looks detached) */
.meta-prose { font: 400 var(--fs-meta)/var(--lh-meta) var(--ff-text); color: var(--ink-3); }
kbd {
  font: 500 var(--fs-label) var(--ff-meta); padding: 2px 6px; border-radius: var(--r-tag);
  box-shadow: 0 0 0 1px var(--line-2); color: var(--ink-2); white-space: nowrap;
}
/* digits in Martian Mono inside any text run, e.g. a date inside a sentence */
.num { font-family: var(--ff-meta); }

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

/* skip link: first focusable element of every page; invisible until focused */
.skip {
  position: fixed; left: var(--gutter); top: 12px; z-index: var(--z-toast);
  padding: 10px 14px; border-radius: var(--r-control);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (pointer: coarse) { button, [role="radio"], .opt, .tab { min-height: 44px; } }