/* ZKCAP v1 — Responsive recomposition via container queries on #viewport-frame.
   Breakpoints (container width):
     mobile  ≤ 640px      (simulated by vp=390)
     tablet  641–1023px   (simulated by vp=768)
     desktop ≥ 1024px     (simulated by vp=1440 / full)
   Also mirrored with viewport media queries for real devices (vp=full). */

/* ============ MOBILE (container ≤ 640px) ============ */
@container zapp (max-width: 640px) {
  .wrap { padding-inline: var(--s4); }
  .section { padding-block: var(--s6); }
  .section-tight { padding-block: var(--s5); }

  /* Shell: desktop nav → navigation sheet */
  .mast-nav, .mast-actions .desk-only { display: none; }
  .mast-menu-btn { display: grid; }
  .masthead-inner { min-height: 56px; gap: var(--s3); }
  .mast-actions { gap: var(--s2); }
  .masthead .wm-tag, .masthead .wm-sep { display: none; }
  .mast-actions .btn, .mast-actions .link { white-space: nowrap; }
  .mast-actions .btn-sm { padding: 0.55em 0.9em; font-size: 0.8rem; }

  /* Footer stacks */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); padding-block: var(--s6) var(--s5); }
  .footer-brand { grid-column: 1 / -1; }

  /* Hero recomposes: single column, route card below copy */
  .hero { padding-block: var(--s6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero h1 { font-size: 2.15rem; }
  .hero-ctas .btn { flex: 1 1 100%; }

  /* Home */
  .family-grid, .goal-grid, .cap-grid, .guide-grid { grid-template-columns: 1fr; }
  .lifecycle-strip { grid-template-columns: 1fr; }
  .lifecycle-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .lifecycle-strip > div:last-child { border-bottom: 0; }
  .split-band, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .two-col-list { grid-template-columns: 1fr; }

  /* Page head */
  .page-head-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .page-head { padding-block: var(--s5) var(--s4); }

  /* Explore toolbar stacks; chips scroll horizontally */
  .explore-toolbar { grid-template-columns: 1fr; }
  .goal-focus { grid-template-columns: 1fr; }

  /* Capability */
  .cap-layout { grid-template-columns: 1fr; gap: var(--s5); }
  .cap-aside { position: static; }
  .consume-grid { grid-template-columns: 1fr; }
  .consume-step { flex-direction: row; align-items: baseline; gap: var(--s3); }
  .consume-step .cs-name { min-width: 88px; }

  /* Assessment: multi-column → step flow */
  .assess-layout { grid-template-columns: 1fr; gap: var(--s4); }
  .assess-q { padding: var(--s5) var(--s4); border-radius: var(--r-md); }
  .assess-aside { position: static; order: -1; }
  .assess-aside .recap-desktop { display: none; }
  .result-grid, .prep-cols, .honesty-row, .auth-split { grid-template-columns: 1fr; }
  .steps li { padding-right: var(--s2); font-size: 0.72rem; }
  .steps li .step-long { display: none; }

  /* Path */
  .path-node + .path-node::before { left: 24px; }
  .path-node + .path-node::after { left: 16px; }
  .cap-status-row { grid-template-columns: 1fr; gap: var(--s2); }

  /* Market */
  .market-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s2); }
  .market-tab { white-space: nowrap; }
  .entry-seq li { grid-template-columns: 34px 1fr; }
  .entry-seq li .es-action { grid-column: 2; justify-self: start; margin-top: var(--s2); }

  /* Marketplace: filter rail → bottom sheet trigger */
  .mk-layout { grid-template-columns: 1fr; }
  .mk-filters { display: none; position: static; }
  .mk-filters.is-sheet { display: grid; }
  .mk-mobile-filter { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }

  /* Guide */
  .guide-feature { grid-template-columns: 1fr; padding: var(--s5); gap: var(--s4); }
  .guide-body p { font-size: 0.98rem; }
  .help-grid { grid-template-columns: 1fr; gap: var(--s5); }

  /* Meta/summary lists */
  .meta-list > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .summary-list li, .intent-row { grid-template-columns: 1fr; gap: 0.15rem; }

  /* Auth: intent panel stacks above card */
  .auth-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .auth-stage { padding: var(--s5) var(--s4) var(--s7); }
  .auth-top .link { white-space: nowrap; }
  .auth-top .wm-tag, .auth-top .wm-sep { display: none; }
  .auth-card { padding: var(--s5) var(--s4); }
  .auth-top { padding: var(--s4) var(--s4) 0; }
  .prov-entry-grid { grid-template-columns: 1fr; }

  /* Overlays: drawers become bottom sheets */
  .overlay-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 82%; border-left: 0; border-top: 1px solid var(--line-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: sheet-in 0.22s ease;
  }
  .overlay-panel.overlay-center {
    top: 50%; right: 50%; transform: translate(50%, -50%);
    width: calc(100% - 32px); max-height: 80%;
    border-radius: var(--r-lg);
  }
  @keyframes sheet-in { from { transform: translateY(30px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }

  .cta-band { padding: var(--s6) var(--s4); }
  .stat-strip { gap: var(--s4); }
}

/* ============ TABLET (container 641–1023px) ============ */
@container zapp (min-width: 641px) and (max-width: 1023px) {
  .wrap { padding-inline: var(--s5); }
  .masthead-inner { gap: var(--s4); min-height: 60px; }
  .mast-nav { gap: var(--s3); margin-left: var(--s2); }
  .mast-nav a { font-size: 0.85rem; white-space: nowrap; }
  .masthead .wm-tag, .masthead .wm-sep { display: none; }
  .mast-actions .btn, .mast-actions .link { white-space: nowrap; }
  .family-grid, .goal-grid, .cap-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lifecycle-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lifecycle-strip > div:nth-child(2n) { border-right: 0; }
  .lifecycle-strip > div { border-bottom: 1px solid var(--line); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .split { grid-template-columns: 1fr; gap: var(--s5); }
  .split-band { grid-template-columns: 1fr 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-head-grid { grid-template-columns: 1fr; }
  .cap-layout, .assess-layout, .mk-layout, .help-grid { grid-template-columns: 1fr; }
  .cap-aside, .assess-aside, .mk-filters { position: static; }
  .mk-filters .stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); align-items: start; }
  .mk-filters .stack > * { margin-top: 0; }
  .mk-filters .stack > .faint { grid-column: 1 / -1; }
  .consume-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .result-grid, .honesty-row { grid-template-columns: 1fr 1fr; }
  .prep-cols { grid-template-columns: 1fr; gap: var(--s3); }
  .auth-grid { grid-template-columns: 1fr; max-width: 640px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-top .link { white-space: nowrap; }
  .guide-feature { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps li .step-long { display: none; }
}

/* ============ DESKTOP (container ≥ 1024px) ============ */
@container zapp (min-width: 1024px) {
  .mast-menu-btn { display: none; }
}

/* Mobile nav sheet content (rendered inside overlay) */
.nav-sheet { display: grid; gap: var(--s2); }
.nav-sheet a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s2); min-height: 52px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.02rem;
}
.nav-sheet a:hover { color: var(--gilt); }
.nav-sheet a .ns-arrow { color: var(--gilt); font-family: var(--font-mono); }
.nav-sheet .nav-sheet-cta { margin-top: var(--s4); display: grid; gap: var(--s3); }

/* ============ Real-viewport media queries (vp=full on real devices) ============ */
@media (max-width: 640px) {
  .mast-nav, .mast-actions .desk-only { display: none; }
  .mast-menu-btn { display: grid; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .family-grid, .goal-grid, .cap-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}