/* CareLogic — Component Library (Unifying Layer A). Loaded AFTER tokens.css on every surface.
   One canonical UI vocabulary on the existing tokens: .btn / .field / .card / .callout /
   .cta-block / .chip / .table / .band. Retires the ~6 button classes / 3 form systems /
   4 card systems / per-page <style> duplication. See ~/Downloads/carelogic-component-library-spec.md.
   The primary-button contrast fix uses the locked --cta (#137FA8, white = 4.54:1, passes AA). */

/* ============================ 1. Button — .btn ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 14px 28px; border: 1.5px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-hover); }
.btn--secondary { background: var(--primary); color: #fff; }            /* navy fill, white = 10.3:1 */
.btn--secondary:hover { background: var(--navy); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: rgba(0,0,0,.05); }
.btn--danger { background: var(--red-text); color: #fff; }
.btn--danger:hover { filter: brightness(.92); }
.btn--warning { background: var(--yellow-text); color: #fff; }   /* admin semantic: caution (amber-brown, white ✓) */
.btn--warning:hover { filter: brightness(.92); }
.btn--success { background: var(--green-text); color: #fff; }    /* admin semantic: safe/confirm (dark green, white ✓) */
.btn--success:hover { filter: brightness(.92); }
.btn--quiet { background: transparent; color: var(--primary); padding: 8px 10px; font-weight: 600; }
.btn--quiet:hover { text-decoration: underline; }
.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--lg { padding: 17px 36px; font-size: var(--t-lede); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn--block { width: 100%; }

/* ============================ 2. Form field — .field ============================ */
.field { margin: 0 0 var(--s4); }
.field__label { display: block; font-size: 14px; font-weight: 600; color: var(--primary); margin: 0 0 var(--s2); }
.field__input, .field__select {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: var(--t-body);
  color: var(--ink, #1a1a1a); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.field__input:focus, .field__select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(17,153,221,.15);
}
.field__check { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-body); line-height: 1.5; }
.field__check input { margin-top: 3px; flex: 0 0 auto; }
.field__help { font-size: 13px; color: var(--ink-muted); margin: var(--s2) 0 0; }
.field__error { font-size: 13px; color: var(--red-text); margin: var(--s2) 0 0; }
.field--on-dark .field__label { color: #fff; }
.field--on-dark .field__input { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.field--on-dark .field__input::placeholder { color: rgba(255,255,255,.6); }

/* ============================ 3. Card / surface — .card ============================ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: var(--s5);
}
.card--elevated { box-shadow: 0 8px 32px rgba(0,0,0,.14); }
.card--navy { background: var(--navy); color: #fff; border-color: transparent; }
.card--flush { padding: 0; }
.card__section { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.card__section:first-child { border-top: none; }

/* ============================ 5. Callout — .callout ============================ */
.callout {
  display: flex; gap: var(--s3); padding: var(--s4) var(--s5); border-radius: var(--r-md);
  border-left: 4px solid var(--accent); background: var(--paper-tint, #f9f9fb);
  font-size: var(--t-body); line-height: 1.55; color: var(--ink, #1a1a1a);
}
.callout svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.callout--privacy { border-left-color: var(--primary); background: #eef4f8; }
.callout--win { border-left-color: var(--green-text); background: var(--green-bg); }
.callout--note { border-left-color: var(--secondary); background: #eef6fb; }   /* neutral, NOT amber */
.callout--info { border-left-color: var(--accent); }
.callout--on-dark { background: rgba(255,255,255,.07); color: #fff; border-left-color: var(--secondary); }

/* ============================ 6. CTA block — .cta-block ============================ */
.cta-block { text-align: center; padding: var(--s7) var(--s4); }
.cta-block__h { font-size: var(--t-h2); font-weight: 700; color: var(--primary); margin: 0 0 var(--s2); }
.cta-block__sub { font-size: var(--t-lede); color: var(--ink-muted); margin: 0 auto var(--s5); max-width: 52ch; }
.cta-block--on-dark .cta-block__h { color: #fff; }
.cta-block--on-dark .cta-block__sub { color: rgba(255,255,255,.78); }

/* ============================ 7. Chip / pill — .chip ============================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; line-height: 1; background: #eef2f5; color: var(--primary);
  border: 1px solid transparent;
}
.chip--active { background: var(--cta); color: #fff; }
.chip--people { background: var(--people-tint); color: var(--people); }
.chip--processes { background: var(--processes-tint); color: var(--processes); }
.chip--products { background: var(--products-tint); color: var(--products); }
/* a11y: explanation is a real, focusable tooltip — visible to touch + screen readers,
   NOT a hover-only ::after (spec §7). */
.chip--info { position: relative; }
.chip--info[aria-describedby] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ============================ 8. Table — .table ============================ */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table th, .table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
.table th { font-weight: 700; color: var(--primary); }
.table tbody tr:nth-child(even) { background: var(--paper-tint, #f9f9fb); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .table-wrap { overflow-x: auto; } }

/* ============================ 9. Page band — .band ============================ */
.band { padding: var(--s7) var(--s4); }
.band--navy { background: var(--navy); color: #fff; }
.band--paper { background: var(--paper-tint, #f9f9fb); }
.band__inner { max-width: 960px; margin: 0 auto; }

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }