/* Currents Managed Bookkeeping — Responsive System (m7-1)
   Mobile-first: base = 375px; min-width media queries add tablet/desktop/wide.
   Components adapt to their container (container queries), not just viewport.
   Loaded after style.css and after page <style> blocks so these overrides win. */

/* ── 1. Fluid typography applied to page-scoped selectors ─────────────────── */

/* Portal pages (page-scoped styles use fixed sizes; pull them onto the fluid scale) */
.cat h1, .bank h1, .recon h1, .receipts h1, .dashboard h1, .onboarding h1 { font-size: var(--font-size-2xl); }
.card__value { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); }
.card__label { font-size: var(--font-size-xs); }
.group-card__seller { font-size: var(--font-size-base); }
.gate-card__merchant { font-size: var(--font-size-base); }
.account-card__name { font-size: var(--font-size-base); }
.onboarding__panel h2 { font-size: var(--font-size-xl); }
.email-in h2, .bank__section h2, .recon__section h2, .recon__close-section h2,
.recon__tax-report h2, .section h2 { font-size: var(--font-size-lg); }

/* Marketing pages */
.hero__headline { font-size: clamp(2.1rem, 6vw, 4.2rem); }
.hero__sub { font-size: var(--font-size-lg); }
.page-section__title { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.cta-card__title { font-size: clamp(1.5rem, 4vw, 2.6rem); }
.pricing__amount { font-size: clamp(2.6rem, 5vw, 3.4rem); }

/* Auth */
.auth-card__title { font-size: var(--font-size-xl); }
.auth-card__subtitle { font-size: var(--font-size-sm); }

/* Legal prose */
.legal { max-width: clamp(320px, 90vw, 800px); }
.legal .card { font-size: var(--font-size-base); }

/* ── 2. Container queries: cards, tables, grids ───────────────────────────── */

/* Card wrappers become containers so children adapt to card width */
.cards, .group-card, .account-card, .gate-card, .proposal-card,
.step-card, .feature-card, .pricing__card, .cta-card,
.bank__section, .recon__section, .recon__close-section, .recon__tax-report,
.period-grid, .recon__grid, .rules-panel__body {
  container-type: inline-size;
}

/* Statement/feature/step cards: stacked on narrow, side-by-side from 400px */
@container (min-width: 400px) {
  .feature-card { display: flex; gap: 20px; align-items: flex-start; }
  .feature-card__icon { margin-bottom: 0; flex-shrink: 0; }
  .step-card { display: flex; gap: 20px; align-items: flex-start; }
  .step-card__number { margin-bottom: 0; flex-shrink: 0; }
}

/* Tables: card-style rows on narrow containers, real table from 600px.
   The card-style row layout is driven by data-label attributes emitted by the
   JS renderers; plain scroll-wrapped tables simply scroll (also fine). */
@container (min-width: 600px) {
  .group-card__tx-table { display: table; }
  .recon__detail-table { display: table; }
}

/* Reconciliation grid: 1 column on narrow, 2 from 700px */
@container (min-width: 700px) {
  .recon__grid { display: block; }
}

/* ── 3. Navigation: hamburger collapse ≤768px ─────────────────────────────── */
.nav__toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px 8px;
}
.nav__toggle:hover { opacity: .8; }
.nav__actions { display: flex; align-items: center; }

@media (max-width: 767px) {
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__inner { flex-wrap: wrap; }
  .nav__actions {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 8px;
  }
  .nav__actions.open { display: flex; }
  .nav__actions a { padding: 10px 8px; border-radius: var(--radius); }
  .nav__actions a:hover { background: rgba(255,255,255,.08); }
  .nav__links { flex-direction: column; gap: 4px; width: 100%; }
}

/* ── 4. Per-page responsive fixes ─────────────────────────────────────────── */

/* Tables: horizontal scroll container on mobile (intentional scroll exempts
   the no-horizontal-scroll rule) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .review table, .receipts table, .cat table, .bank table, .recon table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .receipts table th, .receipts table td { min-width: 90px; }
  .email-in__table th, .email-in__table td { min-width: 140px; }
}

/* Categorization queue: 1 col mobile, 2 tablet, 3 wide desktop.
   The queue container is the viewport; group cards adapt via container query. */
#groups-container { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) and (max-width: 1439px) { #groups-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1440px) { #groups-container { grid-template-columns: repeat(3, 1fr); } }

/* Dashboard: stat cards wrap fluidly (auto-fit grid already does this) */
.dashboard .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Receipts: grid 1 col mobile, 2-3 tablet+; inbox list single column */
@media (max-width: 767px) {
  .receipts .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .receipts .filter-bar label { display: flex; flex-direction: column; gap: 4px; }
}

/* Reconciliation: unmatched panel sits below the table on mobile */
@media (max-width: 767px) {
  .recon__grid, .recon__detail-section { margin-bottom: 16px; }
}

/* Bank: file list rows wrap; detail modal full-width on mobile */
@media (max-width: 767px) {
  .file-item { flex-wrap: wrap; gap: 8px; }
  .file-item__actions { flex-basis: 100%; display: flex; gap: 8px; justify-content: flex-end; }
  .period-detail { max-width: 100%; width: 94%; }
}

/* Categorization: transaction detail modal is full-screen on mobile */
@media (max-width: 767px) {
  .modal, .detail-modal__content, .match-modal__content, .period-detail { width: 100%; max-width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .modal-overlay { align-items: stretch; }
}

/* Onboarding: rail becomes a horizontal stepper, panel full width */
@media (max-width: 767px) {
  .onboarding__rail { border-right: none; border-bottom: 1px solid var(--gray-200); overflow-x: auto; }
  .onboarding__rail-title { display: none; }
  .onboarding__panel { padding: 20px 16px; }
}

/* Auth: form container centered, max-width 400px */
.auth-card { margin: 0 auto; }

/* Upload rows stack on mobile */
@media (max-width: 767px) {
  .upload-row { flex-direction: column; align-items: stretch; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn, .actions a.btn { text-align: center; }
}

/* Toast container fits narrow screens */
@media (max-width: 479px) {
  .toast-container { left: 12px; right: 12px; max-width: none; }
}