/* ========================================
   Reset, typography, accessibility utilities
   (split from main.css, PLAN-165 D9)
   ======================================== */

/* Reset & Base Styles
   ---------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* The document itself scrolls (browser scrollbar); header, sidebar and
   detail rail stick. The footer sits after the content in normal flow, so
   it only scrolls into view at the end (PLAN-170). */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Between pages the old page stays on screen until the new one can render,
   then swaps without animation (PLAN-276 D3). Unsupporting browsers ignore
   this. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* Anchor targets land below the sticky header. */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* Typography — as docs.bitmark.cloud (PLAN-274 D6): light-weight
   headings; a grey page title; section headings in brand indigo.
   ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-tight);
  font-weight: 300;
  color: var(--color-heading);
}

h1 {
  font-size: var(--text-3xl);
  color: var(--color-title);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-xl);
  font-weight: 400;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Code: a flat grey fill, no border (PLAN-274 D7a). */
code {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  background-color: var(--color-bg-muted);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 1.5;
  background-color: var(--color-bg-muted);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

pre code {
  padding: 0;
  background: none;
}

/* Skip Link (Accessibility)
   ---------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Utility Classes
   ---------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Deprecated entity names (PLAN-176 D24)
   ----------------------------------------
   A deprecated bit or tag reads the same wherever its name appears — the
   sidebar tree, index tables, group rosters, reference lists and tag tables.
   Defined once here rather than per surface, which is how the sidebar and the
   index tables came to disagree. The badge and the page banner still carry the
   VERSION; this only says "do not use this". */
.deprecated-name {
  text-decoration: line-through;
  opacity: 0.7;
}