/* ============================================================
   ERPForce Design System v2.0 — Responsive layer
   Three scale standards: Mobile · Tablet · Desktop
   ────────────────────────────────────────────────────────────
   • Desktop  (≥ 1024px) — Attio-tight density (default tokens)
   • Tablet   (640–1023) — slight breathing room, 2-col grids
   • Mobile   (< 640px)  — single column, 44px touch targets,
                           horizontal scroll for complex tables
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   TABLET — 640px to 1023px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root {
    --h-control:    32px;     /* +4 from desktop */
    --h-control-sm: 28px;
    --h-row:        34px;     /* +4 row height */
    --pad-x:        16px;
    --pad-y:        12px;

    /* Slightly larger body for tablet readability */
    --text-sm:      12.5px;
    --text-md:      13.5px;
  }

  /* Section spacing — looser */
  .section { padding: 40px 20px !important; max-width: 100% !important; }
  .hero    { padding: 48px 20px 32px !important; }
  .hero h1 { font-size: 34px !important; }

  /* Page bar — keep visible but compress nav */
  .page-bar { padding: 0 14px !important; gap: 10px !important; }
  .page-bar .nav-links { display: none !important; }
  .page-bar .mobile-menu-btn { display: inline-flex !important; }

  /* Grids — collapse 3-col to 2 */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero "what changed" — drop the "why" column */
  .changed-head, .changed-row {
    grid-template-columns: 1.2fr 1fr 1fr !important;
  }
  .changed-head > div:nth-child(4),
  .changed-row > div:nth-child(4) { display: none !important; }

  /* Color scales — half */
  .scale-row { grid-template-columns: repeat(5, 1fr) !important; }

  /* Smart Inbox — collapse to 2-pane (drop sidebar, keep queue + detail) */
  .si-grid {
    grid-template-columns: 280px 1fr !important;
    height: 580px !important;
  }
  .si-sb { display: none !important; }

  /* Three-way match — keep 6-col but allow horizontal scroll.
     RTL (Wave 3): the grid flips for free under dir=rtl (logical
     conversion in v1-redesigned.css); flow arrows carry .icon-rtl-flip. */
  .tm-col-head, .tm-summary {
    min-width: 880px;
  }
  .tm-list, .tm-col-head {
    overflow-x: auto;
  }

  /* Form Detail — narrower drawer */
  .fd-grid { grid-template-columns: 1fr 320px !important; }

  /* Cash flow split-bottom → stacked */
  .cf-bottom { grid-template-columns: 1fr !important; }
  .cf-bottom > div:first-child { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }

  /* Reconciliation hero → stacked */
  .rc-hero-bar { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rc-hero-r   { gap: 20px !important; }

  /* Audit trail — sidebar narrower */
  .at-grid { grid-template-columns: 1fr 280px !important; }

  /* Aging buckets — wrap to 2 rows */
  .ag-buckets { grid-template-columns: repeat(3, 1fr) !important; }
  .ag-bucket:nth-child(n+4) { border-top: 1px solid var(--border-subtle); }
  .ag-bucket:nth-child(3)   { border-right: 0 !important; }

  /* Cash flow stats — 2x2 */
  .cf-stats, .tm-stats, .pv-stats, .rcp-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .cf-stat:nth-child(2), .tm-stat:nth-child(2),
  .pv-stat:nth-child(2), .rcp-stat:nth-child(2) { border-right: 0 !important; }
  .cf-stat:nth-child(n+3), .tm-stat:nth-child(n+3),
  .pv-stat:nth-child(n+3), .rcp-stat:nth-child(n+3) {
    border-top: 1px solid var(--border-subtle);
  }

  /* ── Calendar — slim month cells so 7 cols still breathe at 768w ── */
  .cal-cells { grid-auto-rows: 92px !important; }
  .cal-cell  { padding: 6px 6px !important; }
  .cal-head  { padding: 8px 6px !important; font-size: 10.5px !important; letter-spacing: .02em !important; }
  .cal-num   { font-size: 12px !important; }
  .cal-ev    { font-size: 10.5px !important; padding: 1px 5px !important; }
  /* Overflow events fold into a .cal-more chip (6.3) rendered OUTSIDE this
     clipped list, so clipping the pills never loses data. */
  .cal-evs   { max-height: 60px; overflow: hidden; }
  .cal-more  { font-size: 10.5px !important; }

  /* ── Kanban — accept H-scroll but tighten columns so 3 fit on tablet ── */
  .kb-board { padding: 12px !important; gap: 10px !important; }
  .kb-col   { min-width: 260px !important; flex: 0 0 260px; }
  .kb-card  { padding: 10px !important; }

  /* ── Pivot — compress value cells; sticky first col still works ── */
  .pv-tbl       { font-size: 12.5px !important; }
  .pv-tbl th,
  .pv-tbl td    { padding: 6px 8px !important; }
  .pv-tbl th:first-child,
  .pv-tbl td:first-child { padding-left: 12px !important; }
  .pv-config    { padding: 10px 12px !important; gap: 8px !important; flex-wrap: wrap; }

  /* ── Spec-page chrome (shared by all preview/components-*.html) ── */
  .spec-main    { padding: 28px 20px 72px !important; gap: 40px !important; }
  .spec-h       { font-size: 22px !important; }
  .spec-topbar  { padding: 0 16px !important; }
  .spec-meta    { flex-wrap: wrap; gap: 10px !important; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE — < 640px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  :root {
    /* Touch-friendly control sizing */
    --h-xs:         32px;
    --h-sm:         36px;
    --h-md:         40px;
    --h-lg:         44px;
    --h-control:    40px;
    --h-control-sm: 36px;
    --h-row:        44px;
    --row-h:        44px;
    --row-h-c:      40px;

    --pad-x:        14px;
    --pad-y:        12px;

    /* Body sizes step up slightly for legibility */
    --text-3xs:     10px;
    --text-2xs:     11px;
    --text-2_5xs:   11px;
    --text-xs:      12px;
    --text-sm:      13px;
    --text-md:      14px;
    --text-base:    15px;
    --text-lg:      16px;
    --text-xl:      19px;
    --text-2xl:     22px;
    --text-3xl:     24px;
    --text-4xl:     28px;
    --text-5xl:     30px;

    --sidebar-w:    100%;
    --topbar-h:     52px;
  }

  body { font-size: 14px; }

  /* ── Section / hero ── */
  .section { padding: 28px 14px !important; max-width: 100% !important; }
  .section-head { margin-bottom: 18px !important; }
  .section-head .ttl { font-size: 20px !important; }
  .section-head .sub { font-size: 13px !important; }

  .hero { padding: 36px 14px 24px !important; }
  .hero h1 { font-size: 26px !important; line-height: 1.15 !important; }
  .hero .sub { font-size: 14px !important; }

  /* ── Page bar ── */
  .page-bar {
    height: 52px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .page-bar .nav-links { display: none !important; }
  .page-bar .mobile-menu-btn { display: inline-flex !important; }
  .page-bar .ver { display: none !important; }
  .page-bar .right { display: none !important; }

  /* ── All grids collapse ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── Comparison table — drop columns 3 & 4 ── */
  .changed-head, .changed-row { grid-template-columns: 1fr 1fr !important; }
  .changed-head > div:nth-child(n+3),
  .changed-row > div:nth-child(n+3) { display: none !important; }
  .changed-row > div { padding: 8px 10px !important; }

  /* ── Color scale half ── */
  .scale-row { grid-template-columns: repeat(5, 1fr) !important; gap: 3px !important; }
  .scale-row .sc-chip { height: 28px !important; }

  /* ── Type specimen ── */
  .type-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 0 !important; }
  .type-row .meta { font-size: 10px !important; }
  .type-row > div:last-child { font-size: 90% !important; }

  /* ── Demos: kill horizontal padding inside cards ── */
  .demo { border-radius: var(--r-md) !important; }
  .demo-strip { padding: 6px 10px !important; }

  /* ── ax-tb toolbar — wrap, hide search/input ── */
  .ax-tb {
    padding: 8px 10px !important;
    height: auto !important;
    min-height: 44px;
    gap: 6px !important;
  }
  .ax-tb .input-shell { display: none !important; }
  .ax-tb .ax-title { font-size: 14px !important; }
  .ax-tb .btn { height: 36px !important; padding: 0 10px !important; font-size: 13px !important; }
  .ax-tb .btn--icon { width: 36px !important; padding: 0 !important; }

  /* Filter row — horizontal scroll */
  .ax-chips, .at-filter, .pv-config {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding: 8px 10px !important;
  }
  .ax-chips::-webkit-scrollbar,
  .at-filter::-webkit-scrollbar,
  .pv-config::-webkit-scrollbar { display: none; }
  .ax-chips .chip,
  .at-filter .chip,
  .pv-config .chip,
  .pv-config .pv-group { flex-shrink: 0; min-height: 32px; }

  /* Tables: scroll horizontally; keep dense */
  .ax-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ax-tbl { font-size: 13px !important; min-width: 720px !important; }
  .ax-tbl tbody td { height: 44px !important; padding: 0 12px !important; }
  .ax-tbl thead th { height: 36px !important; padding: 0 12px !important; font-size: 12px !important; }

  /* Footer becomes 2 rows */
  .ax-foot {
    height: auto !important; padding: 8px 10px !important;
    flex-wrap: wrap; gap: 6px !important;
  }
  .ax-foot-meta { font-size: 12px !important; }

  /* Bulk bar */
  .ax-bulk {
    height: auto !important;
    padding: 8px 10px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }
  .ax-bulk-btn { height: 32px !important; font-size: 12px !important; flex-shrink: 0; }

  /* ── Buttons / inputs ── */
  .btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .btn--sm { min-height: 36px; }
  .btn--xs { min-height: 32px; }
  .btn--icon { width: 40px !important; }
  .btn--icon.btn--sm { width: 36px !important; }
  .btn--icon.btn--xs { width: 32px !important; }

  .input, .input-shell { height: 40px !important; font-size: 14px !important; }
  .input--sm, .input-shell--sm { height: 36px !important; }
  .toggle { width: 36px; height: 20px; }
  .toggle::after { width: 16px; height: 16px; }
  .toggle:checked::after { transform: translateX(16px); }
  .cb, .rd { width: 18px; height: 18px; }
  .cb:checked::after { left: 5px; top: 2px; width: 5px; height: 9px; }

  /* Tabs — horizontal scroll */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    width: 100%;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; min-height: 40px; }

  /* Segmented — keep small */
  .seg-item { min-height: 28px; padding: 0 10px !important; }

  /* ── Smart Inbox — stack ── */
  .si-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .si-sb { display: none !important; }
  .si-queue { max-height: 360px; border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }
  .si-detail { min-height: 540px; }
  .si-hero { grid-template-columns: 44px 1fr !important; gap: 10px !important; padding: 12px !important; }
  .si-hero .si-ring { width: 44px !important; height: 44px !important; }
  .si-hero .si-ring-num { font-size: 14px !important; }
  .si-hero-right { display: none !important; }
  .si-hero-title { font-size: 14px !important; }
  .si-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .si-action-bar { padding: 10px !important; flex-wrap: wrap; gap: 6px !important; }
  .si-action-bar .btn { flex: 1 1 calc(50% - 3px); justify-content: center; }

  /* ── Three-way Match — horizontal scroll ── */
  .tm-col-head, .tm-summary { min-width: 880px; }
  .tm-list, .tm-col-head {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tm-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .tm-stat:nth-child(2) { border-right: 0 !important; }
  .tm-stat:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }

  /* ── Form Detail — list collapses, drawer becomes its own stack ── */
  .fd-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .fd-left { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); max-height: 320px; overflow-y: auto; }
  .fd-action { flex-wrap: wrap; gap: 6px !important; }
  .fd-action .btn { flex: 1 1 auto; justify-content: center; }
  .fd-amt { font-size: 22px !important; }

  /* ── Kanban — horizontal scroll, smaller cards ── */
  .kb-board { padding: 10px !important; gap: 8px !important; }
  .kb-col { min-width: 240px !important; flex: 0 0 240px; }

  /* ── Calendar — compact ── */
  .cal-cells { grid-auto-rows: 64px !important; }
  .cal-cell { padding: 4px 4px !important; }
  .cal-num { font-size: 11px !important; width: 16px !important; height: 16px !important; }
  .cal-ev { font-size: 9px !important; padding: 1px 4px !important; }
  /* Pills clip; the .cal-more chip (6.3) sits outside this list and stays
     visible — tap it to open the day sheet with every event. */
  .cal-evs { max-height: 38px; overflow: hidden; }
  .cal-more { font-size: 9px !important; }
  .cal-head { padding: 6px 4px !important; font-size: 9.5px !important; }

  /* ── Aging — 1 col stack ── */
  .ag-buckets { grid-template-columns: repeat(2, 1fr) !important; }
  .ag-bucket { padding: 12px !important; }
  .ag-bucket:nth-child(2n) { border-right: 0 !important; }
  .ag-bucket:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .ag-amt { font-size: 18px !important; }

  /* ── Cash Flow ── */
  .cf-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .cf-stat:nth-child(2) { border-right: 0 !important; }
  .cf-stat:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .cf-stat-v { font-size: 15px !important; }
  .cf-bottom { grid-template-columns: 1fr !important; }
  .cf-bottom > div { padding: 12px !important; }
  .cf-bottom > div:first-child { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }
  .cf-chart-wrap { padding: 14px 12px 6px !important; }
  .cf-chart { height: 160px !important; }
  .cf-axis { font-size: 8.5px !important; }
  .cf-legend { gap: 8px !important; padding: 8px 12px !important; flex-wrap: wrap; font-size: 10.5px !important; }

  /* ── Reconciliation ── */
  .rc-hero-bar { grid-template-columns: 1fr !important; padding: 14px !important; gap: 14px !important; }
  .rc-hero-r { gap: 16px !important; flex-wrap: wrap; }
  .rc-hero-stat-v { font-size: 17px !important; }
  .rcp-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .rcp-stat:nth-child(2) { border-right: 0 !important; }
  .rcp-stat:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }

  /* Reconciliation rows — stack bank/ledger */
  .rcp-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: "bank" "mid" "ledger" "act" !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .rcp-side--bank   { grid-area: bank; }
  .rcp-side--ledger { grid-area: ledger; }
  .rcp-mid    { grid-area: mid; justify-content: flex-start !important; }
  .rcp-act    { grid-area: act; align-items: stretch !important; }
  .rcp-act-btns { display: flex; gap: 6px; }
  .rcp-act-btns .btn { flex: 1; justify-content: center; }

  /* ── Pivot — scroll ── */
  .pv-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .pv-stat:nth-child(2) { border-right: 0 !important; }
  .pv-stat:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .pv-stat-v { font-size: 14px !important; }
  .pv-tbl { font-size: 12px !important; min-width: 640px; }

  /* ── Audit ── */
  .at-grid { grid-template-columns: 1fr !important; }
  .at-side { border-top: 1px solid var(--border-subtle); padding: 12px !important; }
  .at-event {
    grid-template-columns: 56px 22px 1fr !important;
    padding: 10px !important;
    font-size: 13px !important;
  }
  .at-event .at-meta { display: none !important; }
  .at-banner { padding: 10px !important; }
  .at-banner-s { font-size: 11px !important; }
  .at-change { grid-template-columns: 80px 1fr !important; }

  /* Footer */
  footer { padding: 20px 14px !important; font-size: 12px !important; }

  /* ── Spec-page chrome — mobile ── */
  .spec-main    { padding: 20px 14px 56px !important; gap: 32px !important; }
  .spec-h       { font-size: 19px !important; }
  .spec-desc    { font-size: 12.5px !important; }
  .spec-topbar  { padding: 0 12px !important; gap: 8px !important; }
  .spec-topbar-right { gap: 6px !important; }
  .spec-pill-link span,
  .spec-back span { display: none; }   /* compact: keep icons + 1-2 words */
  .spec-meta    { flex-wrap: wrap; gap: 8px !important; }
  .spec-meta-item { font-size: 10.5px !important; }
  .sec-head     { flex-wrap: wrap; gap: 8px !important; }
  .sec-title    { font-size: 16px !important; }
  .sec-meta     { font-size: 11px !important; width: 100%; }
  /* Demo cards inside spec pages — drop side gutters */
  .demo-card    { border-radius: var(--r-md) !important; }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP — ≥ 1024px (default tokens already cover this)
   Adds: mobile menu button stays hidden
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-bar .mobile-menu-btn { display: none !important; }
  .mobile-nav-sheet { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Mobile nav — a USE of the .sheet--top primitive (v2/components.css),
   not an inline sheet definition (Stage 4 ledger #3, foundations-
   responsive-review §5). Markup:
     <div  class="sheet-scrim mobile-nav-scrim"></div>
     <nav  class="sheet sheet--top sheet--anim mobile-nav-sheet"> … </nav>
   Surface, shadow, radius, top anchoring, scrim + reduced-motion all
   come from the primitive. Only the topbar offset, the closed/open
   transform and the nav-link list styling live here. Logical insets
   throughout; z-index via tokens (was 49 / 48 literals).
   ───────────────────────────────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer;
}
.mobile-menu-btn svg { width: 18px; height: 18px; stroke-width: 2; }

/* Anchor the top-sheet under the mobile topbar + CSS closed/open state.
   (The bottom-sheet primitive is JS-driven; this nav variant toggles via
   the .open class, so it carries its own hidden transform.) */
.mobile-nav-sheet {
  --sheet-anchor: var(--topbar-h, 52px);
  padding: var(--s-3);
  overflow-y: auto;          /* nav list scrolls (overrides primitive touch-action) */
  touch-action: auto;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              opacity   var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.mobile-nav-sheet.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.mobile-nav-sheet a {
  display: flex; align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--s-7);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.mobile-nav-sheet a:hover,
.mobile-nav-sheet a:active { background: var(--surface-hover); }
.mobile-nav-sheet .sec-lbl {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-quaternary);
  padding: var(--s-5) var(--s-7) var(--s-2);
}

/* Scrim — the primitive's .sheet-scrim, dropped below the topbar and given a
   CSS visibility toggle (the JS primitive uses pointer-events instead). */
.mobile-nav-scrim {
  inset-block-start: var(--topbar-h, 52px);
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.mobile-nav-scrim.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ─────────────────────────────────────────────────────────────
   Audit fixes — consistency cleanups applied site-wide
   (preserves Attio-tight intent, removes stray off-scale values)
   ───────────────────────────────────────────────────────────── */

/* Ensure all tabular numerics align (tokens.css drove this but a few
   number cells were missing the variant) */
.fd-amt, .ag-amt, .cf-stat-v, .tm-stat-v, .pv-stat-v,
.rc-hero-stat-v, .rcp-stat-v, .si-progress-num,
.si-ring-num, .ax-foot-meta b, .ax-page-pill,
.tm-doc-amt, .at-stat-row .n {
  font-variant-numeric: tabular-nums;
}

/* Link styling — every <a> in content gets a clear hover affordance */
.fd-fv a, .si-rec-id, .tm-doc-id, .ax-id-link {
  cursor: pointer;
  transition: color var(--dur-fast);
}
.fd-fv a:hover, .ax-id-link:hover, .tm-doc-id:hover { color: var(--brand-green); }

/* Long content guard — prevent any text from blowing layout */
.si-q-head, .fd-block-b, .at-body, .rc-it-title,
.section-head .sub, .hero .sub {
  overflow-wrap: anywhere;
}

/* Better focus rings for keyboard users (formerly missing on chips/tabs).
   NOTE: relocated to components.css (audit 4.7) so a responsive refactor
   can't drop them. Kept out of responsive.css intentionally. */

/* Print — bonus: design-system handoff prints cleanly */
@media print {
  .page-bar, .mobile-menu-btn, footer { display: none !important; }
  .section { padding: 16px 0 !important; max-width: 100% !important; break-inside: avoid; }
  .demo { border: 1px solid #ccc !important; box-shadow: none !important; }
}