/* ---------------------------------------------------------
   14. Responsive enhancements — tablet (≥640 px)
   --------------------------------------------------------- */
@media (min-width: 640px) {
  /* Hide hamburger; nav goes inline in the header row. */
  .nav-toggle { display: none; }

  /* Primary nav inline in the header (next to the brand). The pill bar scrolls
     horizontally on cramped widths so the header stays a single fixed-height
     row — this is what reclaims the vertical space the old strip occupied. */
  .site-nav {
    display: flex !important; /* override the default:none */
    position: static;
    flex: 1 1 auto;
    min-width: 0;            /* allow the flex item to shrink → enables scroll */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;   /* Firefox: hide scrollbar */
  }
  .site-nav::-webkit-scrollbar { display: none; } /* WebKit: hide scrollbar */

  .site-nav__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    min-width: max-content;
    margin: 0;
    padding: var(--sp-1);
    /* Was color-mix() with the per-area --area-accent-soft/-line tokens
       (tokens.css body[data-area] block, docs/ui/FASE1_TODO.md) — those are
       still literal cobalt hex with no dark variant, so at 58% weight they
       painted a near-white pill behind the nav in dark mode regardless of
       theme. Flat, already-tokenized surfaces fix it in both themes now;
       Fase 1 revisits per-area wayfinding per docs/ui/DESIGN_CONTRACT.md §2. */
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  .site-nav__list li {
    border-bottom: none;
    flex: 1 0 auto;
  }

  .site-nav__list a {
    display: block;
    text-align: center;
    white-space: nowrap;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    color: var(--color-text-muted);
  }

  .site-nav__list a:hover,
  .site-nav__list a[aria-current="page"],
  .site-nav__list a[aria-current="location"] {
    /* Was color: var(--area-accent-dk) — same un-migrated literal-hex issue
       as the container background above (illegible dark navy text on a dark
       surface in dark mode). --accent-ink is tokenized for both themes. */
    background: var(--color-surface);
    color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
  }

  /* Keep brand and account controls from being squeezed by the nav. */
  .site-header__brand { flex-shrink: 0; }
  .site-header__user { flex-shrink: 0; }

  /* Form rows go 2-col when there's room */
  .form-row--2col {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .form-row--3col {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
  }
}

/* ---------------------------------------------------------
   15. Desktop enhancements (≥1024 px)
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .site-main {
    padding: var(--sp-8) var(--sp-6);
  }

  .kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}