/* =============================================================================
   FOUNDATION — shared responsive building blocks for the cross-device
   consistency campaign (2026-07-18, operator brief).

   Purpose: stop per-screen whack-a-mole. Every screen touched from here on
   gets built on these primitives instead of inventing its own breakpoints,
   spacing, and card/button shapes from scratch.

   Build technique: MOBILE-FIRST. Every primitive's base (no media query)
   rule is sized for phone; `min-width` queries layer UP toward the existing
   desktop look. The desktop look itself is the reference design — these
   primitives reproduce it exactly at desktop width using the SAME color
   tokens already defined in styles.css (--card, --border-strong, etc.) —
   this file adds spacing/shape tokens only, it does not redefine colors.

   Scope note: this file does NOT retroactively rewrite the existing
   desktop-first CSS (dashboard.css, claim_detail.css, ...). Those still
   author base = desktop, `max-width` shrinks down — rewriting ~11k lines
   of already-correct, operator-approved desktop styling to invert that
   cascade in one pass would be a real desktop-regression risk. Instead:
   NEW mobile/tablet rules (starting with the dashboard fix) are authored
   against this file's tokens/primitives; each subsequent screen in the
   campaign migrates further as it's touched. Fix once, adopt incrementally.
   ============================================================================ */

:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---- Tap targets (WCAG 2.5.5 minimum, phone-scoped) ---- */
  --tap-target-min: 44px;
}

/* ---- Breakpoint reference ----
   Plain CSS can't parameterize @media conditions with custom properties,
   so these are documented constants. Every mobile-first rule added to
   this codebase should match one of these exactly, so a phone in
   landscape is never silently missed the way the dashboard's first pass
   was (width-only breakpoints don't catch a ~844px-wide rotated phone).

     Phone portrait   : (max-width: 519px)
     Phone landscape  : (max-height: 519px) and (max-width: 926px)
       — OR'd with the portrait condition via a comma in the same query,
         e.g. `@media (max-width: 519px), (max-height: 519px) and
         (max-width: 926px) { ... }`. `pointer: coarse` would be the
         more precise touch-vs-mouse signal but no available browser-
         automation surface reports it under viewport emulation
         (confirmed via matchMedia), so it can never be verified live —
         the width-bounded max-height is the testable equivalent.
     Tablet           : (min-width: 768px)
     Desktop          : (min-width: 1200px)
       — the point at which dashboard.css's existing 4-across grid
         (`repeat(auto-fill, minmax(360px, 1fr))`) and similar desktop
         layouts are already correct without any override; primitives
         below reach their desktop shape by this width.
*/

/* =============================================================================
   .cm-card — mobile-first card primitive. Base = phone; builds up to the
   existing desktop `.claim-card` look (background, border, radius,
   padding) by 768px+. Reproduces docs/mockups' `--card` / `--border-
   strong` / `--shadow-card` tokens verbatim — no new colors introduced.
   ============================================================================ */
.cm-card {
  background: var(--card, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card, none);
  padding: var(--space-3);
}
@media (min-width: 768px) {
  .cm-card {
    padding: var(--space-4) var(--space-5);
  }
}

/* =============================================================================
   .cm-btn — mobile-first button primitive. Base is tap-target sized
   (>=44px, per WCAG 2.5.5) for phone; desktop keeps the existing compact
   sizing the operator already approved (buttons don't need 44px targets
   on a mouse-driven surface).
   ============================================================================ */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
@media (min-width: 768px) {
  .cm-btn {
    min-height: 0;
    padding: var(--space-1) var(--space-3);
  }
}