/* ─── RESET ──────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; }
  body { font-family: var(--font-body); background: var(--cream); color: var(--green-900); min-height: 100vh; }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; font-family: var(--font-body); border: none; }
  input, textarea, select { font-family: var(--font-body); }
  ul { list-style: none; }
  svg { flex-shrink: 0; }

  :focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 3px;
  }

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

  /* ─── UTILITY ─────────────────────────────────────────────── */
  .hidden  { display: none !important; }
  .flex    { display: flex; }
  .items-center { align-items: center; }
  .gap-2   { gap: .5rem; }
  .gap-3   { gap: .75rem; }
  .gap-4   { gap: 1rem; }

  /* ─── VIEWS ──────────────────────────────────────────────── */
  .view { display: none; }
  .view.active { display: block; }

  /* Ensure inactive top-level pages stay hidden even when page-specific
     ID selectors define their own flex layout. */
  .view:not(.active) { display: none !important; }