/* ============================================================================
   CHARTER · base.css — reset + base element styling
   ========================================================================== */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  font-optical-sizing: auto;
}

p { line-height: var(--leading-relaxed); }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

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

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

ul, ol { padding-left: 1.2em; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

::selection { background: var(--green-200); color: var(--green-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* lucide icons render as <i data-lucide> -> <svg>; normalize sizing */
[data-lucide], .lucide {
  width: 1.15em; height: 1.15em;
  stroke-width: 2;
  vertical-align: -0.18em;
  flex: none;
}

/* Scrollbars (webkit) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--stone-400); }

/* ---- tiny utility set (kept intentionally small) ---- */
.u-mono   { font-family: var(--font-mono); }
.u-muted  { color: var(--text-muted); }
.u-subtle { color: var(--text-subtle); }
.u-caps   { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.u-row    { display: flex; align-items: center; gap: var(--space-3); }
.u-wrap   { flex-wrap: wrap; }
.u-col    { display: flex; flex-direction: column; gap: var(--space-3); }
.u-center { display: flex; align-items: center; justify-content: center; }

/* ---- accessibility ---- */
/* visually hidden, but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* skip link — first focusable element; slides in on focus */
.skip-link {
  position: fixed; left: var(--space-3); top: -64px; z-index: var(--z-toast);
  background: var(--accent); color: var(--accent-contrast); font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); text-decoration: none; outline: none; }

/* Respect reduced-motion: collapse animations & transitions, stop smooth scroll.
   Scoped to :not([data-motion-preview]) so a docs page can offer a deliberate
   "preview motion" override. Essential in-place feedback (spinner, skeleton) is
   exempt — a frozen loader reads as broken, not calm. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preview]) { scroll-behavior: auto; }
  html:not([data-motion-preview]) *,
  html:not([data-motion-preview]) *::before,
  html:not([data-motion-preview]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html:not([data-motion-preview]) .spinner { animation: spin .7s linear infinite !important; }
  html:not([data-motion-preview]) .skeleton { animation: sk 1.4s ease infinite !important; }
}

/* print-only / screen-only helpers */
.print-only { display: none; }

/* ============================================================================
   PRINT / EXPORT
   Board packets and exam binders get printed and PDF'd, so every page must
   degrade to a clean document: strip the app chrome, force a light sheet
   regardless of theme, and control page breaks so tables and cards don't
   split across pages. Status keeps meaning on paper because we always pair
   the dot/badge with a word.
   ========================================================================== */
@media print {
  /* force the light "paper" document, even from dark mode or a CVD mode */
  :root, :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-sunken: #fff;
    --text: #111; --text-muted: #3a3a3a; --text-subtle: #5a5a5a;
    --border: #c4c4c0; --border-strong: #9a9a94;
  }
  html, body { background: #fff !important; }

  /* drop the app chrome and anything interactive-only */
  .topbar, .sidebar, .skip-link, .copybtn, .iconbtn, .segmented,
  .assistant-dock, .drawer, .toast, .coachmark, [data-no-print], .no-print {
    display: none !important;
  }
  .print-only { display: revert; }

  /* expand the reading column to the full page */
  .layout { display: block !important; }
  .content { padding: 0 !important; margin: 0 !important; }
  .content__inner { max-width: none !important; margin: 0 !important; }

  @page { margin: 18mm 16mm; }
  body { font-size: 10.5pt; line-height: 1.45; color: #111; }

  /* flatten ink-hungry decoration */
  * { box-shadow: none !important; }
  .specimen__preview, .specimen { background-image: none !important; }
  .code { background: #f5f5f2 !important; color: #111 !important; border: 1px solid #ccc; }

  /* links print black; surface external URLs for reference */
  a { color: #111; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; }

  /* page-break control */
  h1, h2, h3, h4 { break-after: avoid; }
  p, blockquote { orphans: 3; widows: 3; }
  .section, .specimen, .card, .docs-card, .impact, .chart-card, .callout,
  figure, blockquote, tr, .timeline__item, .doc__sig { break-inside: avoid; }
  .page-break { break-before: page; }

  /* tables repeat their header/footer on every printed page */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  table, .dtable, .spec-table { width: 100% !important; }

  /* status stays legible on a black-and-white printer */
  .badge, .pill { border: 1px solid #999 !important; }
}