/* Calm Intelligence base layer: reset, document typography, links, focus, layout primitives, utilities.
   Tokens only (tokens.css). Loaded on every ci page before components.css. */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--ci-scroll-offset); /* focused targets stay clear of the sticky header (WCAG 2.4.11) */
  -webkit-text-size-adjust: 100%;
}

body.ci {
  margin: 0;
  background: var(--ci-color-page);
  color: var(--ci-color-text);
  font-family: var(--ci-font-sans);
  font-size: var(--ci-text-body);
  line-height: var(--ci-leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Element resets use :where() (zero specificity), so any component class overrides them. */
:where(.ci) :where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--ci-font-sans);
  color: var(--ci-color-text);
  line-height: var(--ci-leading-tight);
  letter-spacing: var(--ci-tracking-title);
}
:where(.ci) :where(p, ul, ol, dl, figure) { margin: 0; }
:where(.ci) :where(img, svg) { max-width: 100%; height: auto; }
:where(.ci) [role="list"] { list-style: none; padding-inline-start: 0; }
:where(.ci) time { font-variant-numeric: tabular-nums; }

/* Links inside running text stay underlined (1px, 2px on hover). Components drop the underline only where
   their own shape is the affordance (buttons, cards, navigation, routes). */
:where(.ci) a { color: var(--ci-color-action-strong); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:where(.ci) a:hover { color: var(--ci-color-text); text-decoration-thickness: 2px; }

/* Focus is always visible, never removed without a replacement. */
.ci :focus-visible {
  outline: var(--ci-focus-width) solid var(--ci-color-focus);
  outline-offset: var(--ci-focus-offset);
  border-radius: var(--ci-radius-sm);
}
.ci main:focus { outline: none; } /* programmatic target of the skip link only */
.ci .ci-main { display: block; overflow-x: clip; }

/* Layout primitive: the page column. */
.ci-wrap { width: 100%; max-width: var(--ci-width-page); margin-inline: auto; padding-inline: var(--ci-gutter); }

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

/* Content-policy hook: brand.content.Policy.text renders preview placeholders with this class (stable since M1). */
.ci .b-placeholder {
  padding: 0 var(--ci-space-1);
  border: var(--ci-border-width) dashed var(--ci-color-draft-text);
  border-radius: var(--ci-radius-sm);
  background: var(--ci-color-draft-bg);
  color: var(--ci-color-draft-text);
  font-size: max(0.85em, var(--ci-text-label));
}

/* M5 motion: same-origin page changes cross-fade (CSS view transitions, no script; browsers without support
   simply navigate), only when the visitor has not asked for reduced motion. No smooth scrolling: it delays
   keyboard focus scrolling, so a focused control would briefly sit off-screen (QA finding, M5 §5). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: var(--ci-duration-slow); animation-timing-function: var(--ci-ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  .ci *, .ci *::before, .ci *::after { transition-duration: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
}