/* Reset, typography and small utilities. Colours and sizes come from tokens.css. */

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

html { font-size: 14px; scrollbar-color: var(--border-strong) transparent; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  /* Two faint lights behind the page give the translucent surfaces something to sit on. */
  background-image:
    radial-gradient(900px 520px at 12% -8%, var(--bg-tint-a), transparent 70%),
    radial-gradient(900px 560px at 96% -12%, var(--bg-tint-b), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  /* Paths and package names have no spaces: break them rather than widen the page. */
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
h1 { font-size: 1.55rem; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }
h2 { font-size: 1.02rem; font-weight: 620; line-height: 1.3; letter-spacing: -.005em; }
h3 { font-size: .93rem; font-weight: 620; line-height: 1.3; }
ul, ol { padding-left: 1.3em; }
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, canvas, svg { max-width: 100%; }
code, pre, kbd, .mono { font-family: var(--mono); font-size: .92em; }
code { background: var(--surface-2); border: 1px solid var(--border); padding: 0 5px; border-radius: 5px; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; padding: 1px 6px;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px;
  font-size: .82rem; line-height: 1.4; white-space: nowrap;
}
strong { font-weight: 620; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }

/* One focus ring everywhere; never removed, only shown for keyboard use. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

.icon { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.icon.lg { width: 20px; height: 20px; }
.icon.xl { width: 28px; height: 28px; }

.muted { color: var(--muted); }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.fail { color: var(--fail); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.eyebrow { color: var(--muted); font-size: .76rem; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; }
.gradient-text {
  color: var(--accent);
  background: linear-gradient(120deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .gradient-text { -webkit-text-fill-color: currentColor; background: none; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -64px; z-index: 100; padding: var(--s-2) var(--s-3);
  color: var(--text); background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.skip-link:focus { top: var(--s-2); }

.noscript { margin: 40px auto; max-width: 480px; padding: var(--s-4); }

@keyframes sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@keyframes sf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.spin { animation: sf-spin .9s linear infinite; }
.pulse { animation: sf-pulse 1.4s ease-in-out infinite; }

/* Motion is decoration here, never information: with reduced motion everything is still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}