/* ============================================================
   Rolodex — Responsive & device foundation
   Makes the system friendly across recent iPhone, Android, and
   tablet viewports. Imported by tokens.css after the base sheets,
   so role-level fluid overrides win at equal specificity.

   How to use:
   • Breakpoints — author mobile-first; layer `@media (min-width: var())`.
     (Media queries can't read a custom prop directly, so the raw px
     are echoed in the queries below — keep them in sync with the tokens.)
   • Fluid type — swap fixed sizes for `--fluid-*`; they resolve to the
     existing desktop sizes at wide widths and shrink on small screens.
   • Touch — give any tappable control `min-height: var(--hit-min)` (44px,
     iOS HIG) or `--hit-comfortable` (48px, Android Material). Use the
     `.tap-target` helper for icon buttons.
   • Safe areas — pad app chrome with `--safe-*` (notch, Dynamic Island,
     home indicator, Android gesture bar). Requires
     `<meta name="viewport" content="... viewport-fit=cover">`.
   ============================================================ */

:root {
  /* ---------- Breakpoints (min-width thresholds) ---------- */
  --bp-sm:  480px;   /* large phone / phablet */
  --bp-md:  768px;   /* tablet portrait — iPad mini/Air */
  --bp-lg: 1024px;   /* tablet landscape / small laptop */
  --bp-xl: 1280px;   /* desktop */

  /* ---------- Fluid type (min, preferred-vw, desktop max) ---------- */
  --fluid-hero:       clamp(30px, 6.2vw, 42px); /* @kind font */  /* .text-hero */
  --fluid-page-title: clamp(26px, 5.2vw, 36px); /* @kind font */  /* h1 / page title */
  --fluid-section:    clamp(20px, 3.4vw, 26px); /* @kind font */  /* section heads */
  --fluid-kpi:        clamp(26px, 7vw, 34px);   /* @kind font */  /* KPI numerics */

  /* ---------- Touch targets ---------- */
  --hit-min:         44px;   /* iOS Human Interface Guidelines minimum */
  --hit-comfortable: 48px;   /* Android Material comfortable target */

  /* ---------- Safe-area insets (needs viewport-fit=cover) ---------- */
  --safe-top:    env(safe-area-inset-top, 0px);    /* @kind other */
  --safe-right:  env(safe-area-inset-right, 0px);  /* @kind other */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* @kind other */
  --safe-left:   env(safe-area-inset-left, 0px);   /* @kind other */

  /* ---------- Fluid page gutter ---------- */
  --gutter: clamp(16px, 5vw, 48px); /* @kind spacing */ /* page padding-inline, phone→desktop */
}

/* ============================================================
   Device base — quiet defaults that keep the system well-behaved
   on touch devices without changing desktop rendering.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;   /* no auto-inflation on rotate (iOS) */
  text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;  /* no grey flash on tap */
  overscroll-behavior-y: contain;            /* no rubber-band bleed */
}
* { -webkit-touch-callout: none; }

/* ============================================================
   Fluid type overrides — role-level. Resolve to existing desktop
   sizes at wide widths; shrink gracefully on phones/tablets.
   ============================================================ */
.text-hero, h1.hero      { font-size: var(--fluid-hero); }
.text-page-title, h1     { font-size: var(--fluid-page-title); }
.text-kpi                { font-size: var(--fluid-kpi); }

/* ============================================================
   Helpers
   ============================================================ */

/* Fluid page container — safe-area aware horizontal gutter. */
.container {
  width: 100%;
  margin-inline: auto;
  max-width: var(--bp-xl);
  padding-inline: max(var(--gutter), var(--safe-left), var(--safe-right));
}

/* Minimum comfortable tap target for icon-only controls. */
.tap-target {
  min-width: var(--hit-min);
  min-height: var(--hit-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tap-target--comfortable { min-width: var(--hit-comfortable); min-height: var(--hit-comfortable); }

/* Safe-area padding utilities (app shell chrome). */
.safe-top    { padding-top:    var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }
.safe-inset  { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }

/* Responsive card grid — auto-fits from 1 col on phones upward. */
.grid-auto {
  display: grid;
  gap: clamp(12px, 2.5vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Stack below tablet, row at/above. */
.stack-md { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 768px) { .stack-md { flex-direction: row; } }

/* Visibility helpers keyed to the tablet breakpoint. */
.only-mobile { display: initial; }
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .only-mobile { display: none; }
  .hide-mobile { display: initial; }
}

/* ============================================================
   App-shell responsive behavior — the Rolodex desktop shell has a
   fixed left sidebar. Below the tablet breakpoint, collapse it to a
   bottom tab bar (thumb-reachable, safe-area padded) and let content
   take the full width. Opt in with `.app-shell` on the layout root
   and `.app-sidebar` / `.app-main` on the regions.
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }
.app-main  { flex: 1; min-width: 0; }

@media (max-width: 767.98px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    width: 100%; height: auto;
    flex-direction: row; justify-content: space-around;
    padding: var(--space-2) var(--space-3);
    padding-bottom: max(var(--space-2), var(--safe-bottom));
    border-right: none;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    background: var(--bg-elevated, #0d0d12);
  }
  /* nav items become icon-first, evenly distributed, min 44px tall */
  .app-sidebar .nav-item { min-height: var(--hit-min); flex-direction: column; gap: 2px; }
  .app-main { padding-bottom: calc(64px + var(--safe-bottom)); } /* clear the bar */
}