/* ========================================
   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;
}

/* One offset below the sticky header for everything the page scrolls to:
   anchor targets land under it, and (WCAG 2.4.11, EAA) a focused element is
   never hidden by it. Never also a scroll-margin on the targets: the two
   add up, and a jump then lands twice as far down, with the previous
   section still in the band "On this page" reads. */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

/* WCAG 1.4.1 (EAA): a link in running text is underlined, not only
   coloured. */
/* A deprecated name keeps its strike-through, which marks it already. */
main :is(p, td, dd, blockquote) a:not(.btn, .deprecated-name),
main :is(.concept-content, .description, .usage-notes, .callout) li a:not(.deprecated-name) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

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

/* Typography (PLAN-287 D2): calm, near-black headings in Inter — a bold
   page title, semibold section headings.
   ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-tight);
  font-weight: 600;
  color: var(--color-heading);
}

h1 {
  /* Long entity names in titles wrap on a phone. */
  overflow-wrap: anywhere;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}

h2 {
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  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;
}

/* Long inline code (a URL, a toggle with a value) wraps rather than pushing
   the page sideways on a phone (PLAN-287 final review). */
:not(pre) > code {
  overflow-wrap: anywhere;
}

/* 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". */
/* Struck through and muted, at full contrast (WCAG 1.4.3). */
.deprecated-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}