/* ==========================================================================
   mikr.app — shared shell. Reset, base type, nav, buttons, figures, code,
   footer. Loaded by every page after tokens.css and before the page's own
   stylesheet. No colour literals live here; see tokens.css.

   Class names in the nav (navbar / scrolled / nav-links / nav-link /
   nav-toggle / theme-switch / nav-brand) are the ones js/docs.js already
   binds to on the shipped site. They are kept exactly so that file can be
   reused without edits.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top is what keeps a jumped-to heading out from under the nav:
   the nav is fixed at --nav-h, so an anchor lands that far too high without it.
   One line, deliberately here rather than per page — it governs every anchor on
   the site: the docs rails, the whitepaper's contents, the legal pages. */
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body {
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 120ms !important; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; transition: none; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { border-top: 1px solid var(--rule); }
.band-pad { padding-block: var(--space-3xl); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.lede { font-size: var(--text-md); line-height: 1.66; color: var(--ink-2); max-width: 54ch; }

/* ---------- N1b · nav ---------- */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: var(--paper-blur);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.navbar.scrolled { border-bottom-color: var(--rule); background: var(--paper-blur-2); }
.nav__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-md); padding-block: var(--space-xs);
}
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--ink); }
.nav-brand:hover { text-decoration: none; }
.brand__mark {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); flex: 0 0 auto;
}
.brand__name { font-weight: 600; letter-spacing: -0.02em; font-size: var(--text-base); white-space: nowrap; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: var(--space-md); }
.nav-link { color: var(--ink-2); font-size: var(--text-base); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav-link:hover { color: var(--ink); text-decoration: none; }
.nav-link.active { color: var(--ink); }
.nav__end { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2xs); }
.nav__repo {
  display: grid; place-items: center; width: var(--tap); height: var(--tap);
  color: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--radius-control);
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.nav__repo:hover { color: var(--ink); border-color: var(--rule-2); text-decoration: none; }
.nav__repo:active { background: var(--active); }
.nav-cta {
  background: var(--accent-fill); color: var(--accent-ink); font-weight: 500; font-size: var(--text-base);
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-control); white-space: nowrap;
  display: inline-flex; align-items: center; line-height: 1; min-height: var(--tap);
  transition: background var(--dur-short) var(--ease-out);
}
.nav-cta:hover { background: var(--accent-fill-2); text-decoration: none; }
.nav-cta:active { background: var(--accent-fill-2); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule); border-radius: var(--radius-control);
  color: var(--ink); width: var(--tap); height: var(--tap); place-items: center; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--rule-2); }
.nav-toggle:active { background: var(--active); }
button[disabled], .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- theme switch: auto / light / dark ---------- */
.theme-switch {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--rule); border-radius: var(--radius-control); overflow: hidden;
}
.theme-switch button {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.theme-switch button + button { border-left: 1px solid var(--rule); }
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button:active { background: var(--active); }
.theme-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
/* Two copies in the markup, one visible at a time: the bar holds it on desktop,
   the collapsed menu holds it on narrow screens where the bar has no room. */
.nav-links .theme-switch { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap;
  font-family: inherit; font-size: var(--text-md); font-weight: 500; line-height: 1;
  padding: var(--space-xs) var(--space-md); min-height: var(--tap);
  border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.btn-primary { background: var(--accent-fill); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-fill-2); text-decoration: none; }
.btn-primary:active { background: var(--accent-fill-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { border-color: var(--ink-2); text-decoration: none; }
.btn-ghost:active { background: var(--active); }

/* ---------- figures. A capture arrives in the reader's own theme, so the
     surround is a frame that gives the figure an edge, in both themes ---------- */
figure { margin: 0; }
.shot {
  border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden;
  background: var(--shot-mat); padding: var(--shot-pad);
}
.shot img { width: 100%; height: auto; border-radius: calc(var(--radius-card) - 4px); }
figcaption { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; color: var(--ink-2); letter-spacing: 0.01em; }

/* ---------- code ---------- */
pre {
  position: relative;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius-card); padding: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7;
  color: var(--ink); overflow-x: auto;
}
pre code { font: inherit; color: inherit; background: none; padding: 0; }
pre .c { color: var(--ink-2); }
.copy-btn {
  position: absolute; top: var(--space-2xs); right: var(--space-2xs);
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: var(--radius-control);
  color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-3xs) var(--space-2xs); cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.copy-btn:hover { color: var(--ink); border-color: var(--rule-2); }
.copy-btn:active { background: var(--active); }

/* ---------- Ft1 · footer ---------- */
footer { border-top: 1px solid var(--rule); padding-block: var(--space-xl) var(--space-lg); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-lg); align-items: start; }
.foot__mark { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.03em; }
.foot__tag { margin-top: var(--space-3xs); color: var(--ink-2); font-size: var(--text-base); max-width: 34ch; }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); }
.foot__links a, .foot__links button { color: var(--ink-2); background: none; border: 0; font: inherit; font-size: var(--text-base); white-space: nowrap; cursor: pointer; padding: 0; }
.foot__links a:hover, .foot__links button:hover { color: var(--ink); text-decoration: none; }
.foot__legal { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-sm); }
.foot__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.foot__legal a:hover { color: var(--ink); }

/* ---------- collapse ----------
   The bar carries a wordmark, six links, the theme switch, a repo link and a
   CTA. Measured, that needs ~908px of content, so the desktop bar is switched
   for the menu button at 62rem (992px) — not at the 60rem it used to be, where
   the right-hand group ran past the viewport edge and `overflow-x: clip` simply
   cut the CTA off. The repo link, which is also in the hero and the footer,
   steps out earlier to buy the links room. */
@media (max-width: 80rem) {
  .nav__repo { display: none; }
}
@media (max-width: 62rem) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-links.open {
    display: grid; grid-column: 1 / -1; gap: var(--space-sm);
    padding-top: var(--space-sm); justify-content: start; justify-items: start;
  }
  .nav__end .theme-switch { display: none; }
  .nav-links.open .theme-switch { display: inline-flex; }
  .nav-toggle { display: grid; }
  .band-pad { padding-block: var(--space-2xl); }
  .foot__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .theme-switch button { width: var(--tap); height: var(--tap); }
}