/* ============================================================
   The Interaction Atlas — FOUNDATION
   ------------------------------------------------------------
   The single, shared clinical design layer. Every screen composes
   from these primitives so the whole app reads as one product.
   Loaded after styles.css (which owns the :root tokens) and before
   the screen/consumer stylesheets.

   THE CANON — use these on every page, do not reinvent:

   • Page column .... #app  (max-width 1100px, centred, padded — styles.css)
   • Page header .... .page-header
                        ├ .page-eyebrow   (mono · UPPERCASE · count/section)
                        ├ .page-title     (display title, optional <em> accent)
                        └ .page-sub       (one-line dek, optional)
   • Top controls ... .page-toolbar       (search / filters / actions row)
   • Card ........... .card   (alias of .panel)
   • Section label .. .section-head       (mono accent label inside a page)
   • Buttons ........ .btn / .btn-primary / .btn-ghost   (styles.css)
   • Chips .......... .chip                               (styles.css)
   • Risk tiers ..... .tier-badge / .tier-1..6            (styles.css)
   • Inputs ......... .search-input / input               (styles.css)

   Palette + type come from the :root tokens in styles.css
   (--c-* navy/clinical-white, --c-tier-1..6, --font-sans/mono).
   Do NOT introduce new palettes or web fonts — system fonts only.
   ============================================================ */

/* ── Card — the one card primitive (mirrors .panel) ───────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.card > h2,
.card > .card-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.card > h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-brand-2);
}

/* ── Section label — mono accent header inside a page ─────── */
/* Promoted from .copy-section-head so any screen can mark a section. */
.section-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-brand-2);
  margin: 0 0 12px;
}
.section-head::before {
  content: ""; flex-shrink: 0;
  width: 18px; height: 2px;
  background: var(--c-brand-2);
  border-radius: 1px;
}

/* ── Page toolbar — the standard controls row under a header ─ */
/* Search box, filter chips/dropdowns, and page actions live here so
   every screen's top controls line up the same way. */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.page-toolbar > .grow { flex: 1 1 auto; min-width: 0; }
.page-toolbar .spacer { flex: 1 1 auto; }
.page-toolbar--between { justify-content: space-between; }

@media (max-width: 640px) {
  .page-toolbar { gap: 8px; }
}