/* PaxOnBoard base styles: the reset, type, links, focus, icons, a few layout helpers and print.
   Load order: tokens.css, base.css, components.css. Rules: tokens only (no colour, size or duration literals),
   logical properties only (inline-start, not left), nothing fixed-width that holds text. docs/design-standards.md. */

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

html {
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--fg);
  scrollbar-color: var(--border) transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;   /* long names and 40%-longer translations never push a page sideways */
}

/* Headings: one h1 per page, then h2 for sections, h3 inside cards. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0; }
p + p { margin-block-start: var(--sp-3); }
.prose { max-width: var(--prose-max); }
.prose > * + * { margin-block-start: var(--sp-3); }
.lead { font-size: var(--fs-lg); color: var(--muted); }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
.hint { color: var(--hint); }
strong, b { font-weight: var(--fw-semibold); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.caps-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--dur-1);
}
a:hover { text-decoration-thickness: 2px; }

/* One focus ring everywhere: the --focus token, 2px, 2px off the control. Never remove it. */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}

::selection {
  background: var(--selection);
  color: var(--fg);
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding-inline-start: 1.25em; }
ul.plain, ol.plain { list-style: none; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--sp-6); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
code.ref { padding: 0.1em 0.4em; border-radius: var(--r-xs); background: var(--surface-2); color: var(--fg); }
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--surface-inverse);
  color: var(--fg-inverse);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
  box-shadow: var(--shadow-1);
}

/* Icons: 24-grid strokes from ui/design/icons.svg, drawn in the text colour. */
.icon {
  width: var(--icon);
  height: var(--icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2; }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.5; }
.icon-fill { fill: currentColor; stroke: none; }

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

.skip-link {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: var(--z-tooltip);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-control);
  background: var(--surface-inverse);
  color: var(--fg-inverse);
  text-decoration: none;
  translate: 0 -200%;
  transition: translate var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { translate: 0 0; }

/* Layout helpers. A page body is a .container; inside it, stacks and clusters do most of the spacing. */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--form-max); }
.stack > * + * { margin-block-start: var(--sp-4); }
.stack-sm > * + * { margin-block-start: var(--sp-2); }
.stack-lg > * + * { margin-block-start: var(--sp-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cluster-sm { gap: var(--sp-2); }
.cluster-between { justify-content: space-between; }
.grid-auto {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ms-auto { margin-inline-start: auto; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.section { padding-block: var(--sp-8); }
.section + .section { border-block-start: 1px solid var(--line); }
.scroll-x { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

/* Reading flow on wide screens: lines of text stop at --prose-max; numbers and tables use the full width. */

/* Print: manifests and sheets. The tokens already switch to the flat light palette (tokens.css @media print). */
.print-only { display: none; }
@media print {
  /* Page numbers come from the page itself: every printed page gets "Page x of y" in the bottom margin (Chromium
     engines; the counter is not typed text). A screen that wants the header line repeated on every page adds its own
     @page { @top-left { content: "..." } } rule. */
  @page {
    margin: 14mm 14mm 18mm;
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: var(--fs-xs); color: var(--muted); }
  }
  html, body { background: var(--bg); color: var(--fg); font-size: 11pt; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  a { color: inherit; text-decoration: none; }
  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-4);
    padding-block-end: var(--sp-2);
    margin-block-end: var(--sp-4);
    border-block-end: 2px solid var(--fg);
  }
  .print-header .brand-line { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
  .print-footer { margin-block-start: var(--sp-4); padding-block-start: var(--sp-2); border-block-start: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
  .page-break { break-before: page; }
}