/* ============================================================================
   ZKCAP-X · ui-next/v3 · RESPONSIVE RECOMPOSITION
   Layer 6 of 6.
   ----------------------------------------------------------------------------
   Every rule keys off [data-vp] on the runtime frame, resolved by the runtime
   from the frame's measured width (or forced by ?vp=). A 390 render is therefore
   identical regardless of the real browser window.

   Mobile is recomposed, not compressed:
     · desktop mega menu        → mobile navigation sheet
     · desktop comparison table → mobile stacked comparison cards
     · desktop service side rail → mobile ordered sections
     · desktop contextual drawer → mobile bottom sheet
     · desktop multi-column onboarding → mobile task-first steps
   ========================================================================== */

/* ===========================================================================
   TABLET — 768 bucket
   ========================================================================== */

[data-vp="768"] .nav-primary { display: none; }
[data-vp="768"] .nav-actions .nav-link-quiet { display: none; }
[data-vp="768"] .nav-menu-btn { display: inline-flex; }
[data-vp="768"] .mega-host { display: none !important; }

[data-vp="768"] .hero { padding-block: var(--s-16) var(--s-12); }
[data-vp="768"] .hero-grid,
[data-vp="768"] .hero-grid-domain { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
[data-vp="768"] .hero-visual { max-width: 560px; }
[data-vp="768"] .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-12); }

[data-vp="768"] .domain-grid,
[data-vp="768"] .jur-grid,
[data-vp="768"] .g3,
[data-vp="768"] .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

[data-vp="768"] .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-vp="768"] .dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-vp="768"] .party-grid,
[data-vp="768"] .trust-grid,
[data-vp="768"] .gap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-vp="768"] .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-vp="768"] .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

[data-vp="768"] .g-rail,
[data-vp="768"] .g-rail-left { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
[data-vp="768"] .g-rail > aside,
[data-vp="768"] .g-rail-left > aside { order: 2; }
[data-vp="768"] .sticky-rail { position: static; }

[data-vp="768"] .readiness-flow,
[data-vp="768"] .readiness-intro { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }

[data-vp="768"] .auth-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
[data-vp="768"] .auth-aside { padding: var(--s-10) var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); }
[data-vp="768"] .auth-main { padding: var(--s-10) var(--gutter); }

[data-vp="768"] .onboard-body { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
[data-vp="768"] .onboard-rail { order: 2; }

[data-vp="768"] .close-grid,
[data-vp="768"] .compare-entry,
[data-vp="768"] .start-banner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
[data-vp="768"] .close-actions,
[data-vp="768"] .compare-entry-actions { flex-direction: row; flex-wrap: wrap; }

[data-vp="768"] .model-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
[data-vp="768"] .boundary-grid { grid-template-columns: minmax(0, 1fr); }
[data-vp="768"] .boundary-col + .boundary-col { border-left: 0; border-top: 1px solid var(--line-soft); }

[data-vp="768"] .foot-top { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
[data-vp="768"] .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-vp="768"] .foot-bottom { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
[data-vp="768"] .foot-legal { align-items: flex-start; }

[data-vp="768"] .section-head-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
[data-vp="768"] .provider-card { grid-template-columns: 44px minmax(0, 1fr); }
[data-vp="768"] .provider-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; min-width: 0; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
[data-vp="768"] .track-switch { grid-template-columns: minmax(0, 1fr); }
[data-vp="768"] .entity-detail-grid { grid-template-columns: minmax(0, 1fr); }
[data-vp="768"] .complexity { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
[data-vp="768"] .overlay-drawer { width: min(480px, 96%); }

/* ===========================================================================
   MOBILE — 390 bucket
   ========================================================================== */

[data-vp="390"] .shell,
[data-vp="390"] .shell-narrow { padding-inline: var(--s-5); }

[data-vp="390"] .band { padding-block: var(--s-10); }
[data-vp="390"] .band-loose { padding-block: var(--s-12); }

[data-vp="390"] .nav-primary,
[data-vp="390"] .nav-actions .nav-link-quiet,
[data-vp="390"] .nav-actions .btn { display: none; }
[data-vp="390"] .nav-menu-btn { display: inline-flex; }
[data-vp="390"] .mega-host { display: none !important; }
[data-vp="390"] .nav-inner { height: 62px; }
[data-vp="390"] .brand-word { font-size: 1.0625rem; }

/* --- Hero: headline leads, artwork supports --- */

[data-vp="390"] .hero { padding-block: var(--s-12) var(--s-10); }
[data-vp="390"] .hero-grid,
[data-vp="390"] .hero-grid-domain { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
[data-vp="390"] .hero-title { max-width: none; font-size: 2.125rem; line-height: 1.12; }
[data-vp="390"] .hero-domain .hero-title { font-size: 1.875rem; }
[data-vp="390"] .hero-lede { font-size: var(--fs-body); margin-top: var(--s-5); }
[data-vp="390"] .hero-actions { flex-direction: column; align-items: stretch; }
[data-vp="390"] .hero-actions .btn { width: 100%; }
[data-vp="390"] .hero-secondary { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
[data-vp="390"] .hero-note { font-size: var(--fs-label); }
[data-vp="390"] .hero-visual { order: 2; max-width: 100%; }
[data-vp="390"] .hero-caption { display: none; }
[data-vp="390"] .hero-strip { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-10); padding-top: var(--s-6); }
[data-vp="390"] .hero-strip-value { font-size: 1.5rem; }
[data-vp="390"] .hero-strip-item { flex-direction: row; align-items: baseline; gap: var(--s-3); }

/* --- All grids collapse --- */

[data-vp="390"] .domain-grid,
[data-vp="390"] .jur-grid,
[data-vp="390"] .g2,
[data-vp="390"] .g3,
[data-vp="390"] .g4,
[data-vp="390"] .g-rail,
[data-vp="390"] .g-rail-left,
[data-vp="390"] .g-split,
[data-vp="390"] .g-hero,
[data-vp="390"] .module-grid,
[data-vp="390"] .dimension-grid,
[data-vp="390"] .party-grid,
[data-vp="390"] .trust-grid,
[data-vp="390"] .gap-grid,
[data-vp="390"] .lifecycle,
[data-vp="390"] .package-grid,
[data-vp="390"] .model-grid,
[data-vp="390"] .foot-cols,
[data-vp="390"] .foot-top,
[data-vp="390"] .foot-bottom,
[data-vp="390"] .close-grid,
[data-vp="390"] .compare-entry,
[data-vp="390"] .start-banner,
[data-vp="390"] .section-head-split,
[data-vp="390"] .readiness-flow,
[data-vp="390"] .readiness-intro,
[data-vp="390"] .auth-layout,
[data-vp="390"] .onboard-body,
[data-vp="390"] .track-switch,
[data-vp="390"] .entity-detail-grid,
[data-vp="390"] .complexity,
[data-vp="390"] .boundary-grid,
[data-vp="390"] .jur-fact-grid,
[data-vp="390"] .field-row,
[data-vp="390"] .provider-card,
[data-vp="390"] .jur-switcher {
  grid-template-columns: minmax(0, 1fr);
}

[data-vp="390"] .jur-switcher { border: 0; gap: var(--s-2); }
[data-vp="390"] .jur-tab { border: 1px solid var(--line); border-radius: var(--radius-xs); flex-direction: row; align-items: center; justify-content: space-between; }
[data-vp="390"] .jur-tab.is-active { border-color: var(--navy-850); }

[data-vp="390"] .lifecycle { border-left: 0; background: transparent; gap: var(--s-3); }
[data-vp="390"] .lifecycle-item { border: 1px solid var(--line); border-radius: var(--radius-sm); }
[data-vp="390"] .lifecycle-item.is-stage-a { box-shadow: inset 3px 0 0 var(--gilt-500); }

[data-vp="390"] .g-rail > aside,
[data-vp="390"] .g-rail-left > aside { order: 2; }
[data-vp="390"] .sticky-rail { position: static; }

[data-vp="390"] .close-actions,
[data-vp="390"] .compare-entry-actions { flex-direction: column; }
[data-vp="390"] .close-actions .btn,
[data-vp="390"] .compare-entry-actions .btn { width: 100%; }

/* --- Cards --- */

[data-vp="390"] .domain-card,
[data-vp="390"] .jur-card,
[data-vp="390"] .service-card,
[data-vp="390"] .resource-card,
[data-vp="390"] .category-card,
[data-vp="390"] .package-card { padding: var(--s-5); }

[data-vp="390"] .domain-card-visual { width: 84px; }

[data-vp="390"] .provider-card { padding: var(--s-5); }
[data-vp="390"] .provider-side { grid-column: auto; flex-direction: column; align-items: stretch; min-width: 0; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
[data-vp="390"] .provider-side .btn { width: 100%; }
[data-vp="390"] .provider-facts { grid-template-columns: minmax(0, 1fr); }

/* --- Tables become stacked decision cards --- */

[data-vp="390"] .table-wrap { border: 0; background: transparent; overflow: visible; }
[data-vp="390"] .table,
[data-vp="390"] .table tbody,
[data-vp="390"] .table tr,
[data-vp="390"] .table td { display: block; width: 100%; }
[data-vp="390"] .table thead { display: none; }
[data-vp="390"] .table tr { margin-bottom: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-000); }
[data-vp="390"] .table td { padding: 0; border: 0; font-size: var(--fs-sm); }
[data-vp="390"] .table td + td { margin-top: var(--s-2); color: var(--ink-600); }
[data-vp="390"] .table td:first-child { font-weight: 600; color: var(--ink-900); }

/* Comparison table → stacked cards */
[data-vp="390"] .comparison-grid { grid-template-columns: minmax(0, 1fr); border: 0; background: transparent; }
[data-vp="390"] .comparison-corner { display: none; }
[data-vp="390"] .comparison-col-head { border: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
[data-vp="390"] .comparison-row-label { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
[data-vp="390"] .comparison-cell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
[data-vp="390"] .comparison-cell:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-bottom: var(--s-4); }

[data-vp="390"] .data-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }

/* --- Process / readiness --- */

[data-vp="390"] .process-step { grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; }
[data-vp="390"] .q-head { grid-template-columns: 26px minmax(0, 1fr); gap: var(--s-3); }
[data-vp="390"] .q-prompt { font-size: 1.0625rem; }
[data-vp="390"] .opt { grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); }
[data-vp="390"] .gap-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
[data-vp="390"] .readiness-nav { flex-direction: column-reverse; align-items: stretch; gap: var(--s-3); }
[data-vp="390"] .readiness-nav .btn,
[data-vp="390"] .readiness-nav .row-wrap,
[data-vp="390"] .readiness-nav .row-wrap .btn { width: 100%; }
[data-vp="390"] .readiness-actions { flex-direction: column; align-items: stretch; }
[data-vp="390"] .readiness-actions .row-wrap { flex-direction: column; }
[data-vp="390"] .readiness-actions .btn { width: 100%; }
[data-vp="390"] .outcome-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
[data-vp="390"] .outcome-title { font-size: 1.25rem; }

/* --- Auth --- */

[data-vp="390"] .auth-layout { min-height: 0; }
[data-vp="390"] .auth-aside { padding: var(--s-8) var(--s-5); }
[data-vp="390"] .auth-aside .d3 { font-size: 1.375rem; }
[data-vp="390"] .auth-main { padding: var(--s-8) var(--s-5) var(--s-12); }
[data-vp="390"] .auth-card-head,
[data-vp="390"] .auth-card-body { padding: var(--s-5); }
[data-vp="390"] .auth-card-foot { padding: var(--s-4) var(--s-5); flex-direction: column; align-items: flex-start; gap: var(--s-3); }
[data-vp="390"] .nav-focused-meta .micro { display: none; }
[data-vp="390"] .intent-panel-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
[data-vp="390"] .gap-row > .status { padding-top: 0; }

/* --- Onboarding: task-first steps --- */

[data-vp="390"] .onboard-head { padding-block: var(--s-6); }
[data-vp="390"] .onboard-head .row-between { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
[data-vp="390"] .onboard-body { padding-block: var(--s-8); }
[data-vp="390"] .onboard-rail { order: 2; }
[data-vp="390"] .onboard-foot-inner { flex-direction: column-reverse; align-items: stretch; gap: var(--s-3); }
[data-vp="390"] .onboard-foot-inner .btn,
[data-vp="390"] .onboard-foot-inner .row-wrap,
[data-vp="390"] .onboard-foot-inner .row-wrap .btn { width: 100%; }

/* --- Overlays: drawers become sheets --- */

[data-vp="390"] .overlay-drawer {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: 90%;
  border-left: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

[data-vp="390"] .overlay-modal {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: auto;
  max-height: 90%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

[data-vp="390"] .overlay-head,
[data-vp="390"] .overlay-body { padding-inline: var(--s-5); }
[data-vp="390"] .overlay-foot { padding-inline: var(--s-5); flex-direction: column; align-items: stretch; }
[data-vp="390"] .overlay-foot .btn { width: 100%; }

/* --- Type scale for narrow composition --- */

[data-vp="390"] .d1 { font-size: 2.125rem; }
[data-vp="390"] .d2 { font-size: 1.625rem; }
[data-vp="390"] .d3 { font-size: 1.3125rem; }
[data-vp="390"] .t1 { font-size: 1.25rem; }
[data-vp="390"] .lead { font-size: var(--fs-body); }

[data-vp="390"] .page-head { padding-block: var(--s-8) var(--s-6); }
[data-vp="390"] .section-head { margin-bottom: var(--s-8); }
[data-vp="390"] .page-head-facts { flex-direction: column; gap: var(--s-2); }

/* --- Filter rails scroll horizontally instead of stacking forever --- */

[data-vp="390"] .filter-panel { padding: var(--s-4); }
[data-vp="390"] .filter-group .chip-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scrollbar-width: none;
}
[data-vp="390"] .filter-group .chip-row::-webkit-scrollbar { display: none; }
[data-vp="390"] .chip { flex: none; }

[data-vp="390"] .cat-switcher,
[data-vp="390"] .cat-tabs,
[data-vp="390"] .cat-modes,
[data-vp="390"] .cat-tab { min-width: 0; max-width: 100%; }
[data-vp="390"] .cat-switcher { flex-direction: column; align-items: stretch; }
[data-vp="390"] .cat-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
[data-vp="390"] .cat-tabs::-webkit-scrollbar { display: none; }
[data-vp="390"] .jur-context,
[data-vp="390"] .jur-context-head { min-width: 0; }
[data-vp="390"] .complexity,
[data-vp="390"] .complexity-level { min-width: 0; }

[data-vp="390"] .toast-host { bottom: var(--s-4); }