/* Client-only viewport repair. All native actions and content remain unchanged. */
@media (max-width: 640px) {
  .customer-shell {
    --af-safe-top: env(safe-area-inset-top, 0px);
    --af-safe-bottom: env(safe-area-inset-bottom, 0px);
    --af-header-height: 56px;
    --af-nav-height: 56px;
    --mobile-tabbar-height: var(--af-nav-height);
    --mobile-safe-bottom: var(--af-safe-bottom);
    height: var(--app-height, 100dvh);
    min-height: 0;
  }
  .customer-shell .topbar {
    height: calc(var(--af-header-height) + var(--af-safe-top));
    min-height: calc(var(--af-header-height) + var(--af-safe-top));
    padding: var(--af-safe-top) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
  }
  .customer-shell > .body {
    flex: 1;
    height: auto;
    min-height: 0;
    padding-top: calc(var(--af-header-height) + var(--af-safe-top));
    padding-bottom: calc(var(--af-nav-height) + var(--af-safe-bottom));
  }
  .customer-shell .main {
    flex: 1;
    height: auto;
    min-height: 0;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    container: af-client / size;
    overflow-y: auto;
  }
  .customer-shell .mobile-tabbar {
    height: calc(var(--af-nav-height) + var(--af-safe-bottom));
    min-height: 0;
    padding: 5px max(20px, env(safe-area-inset-right, 0px)) calc(5px + var(--af-safe-bottom)) max(20px, env(safe-area-inset-left, 0px));
  }
  .customer-shell .mobile-tab { min-height: 44px; padding: 3px; gap: 1px; }
  .customer-shell .mobile-tab svg { width: 20px; height: 20px; }
  .customer-shell .mobile-tab > span { height: 22px; }
  .customer-shell .customer-home { min-height: 0; height: auto; justify-content: flex-start; gap: 10px; }
  .customer-shell .customer-home > * { flex: 0 0 auto; }
  .customer-shell .live-status-head { margin-bottom: 10px; }
  .customer-shell .af-eyebrow { margin-bottom: 3px; }
  .customer-shell .af-page-heading h2 { font-size: 21px; }
  .customer-shell .status-tile-grid { gap: 10px; }
  .customer-shell .status-tile { padding: 12px; gap: 8px; border-radius: 15px; }
  .customer-shell .status-tile-head { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 9px; }
  .customer-shell .status-tile-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; }
  .customer-shell .status-tile-icon svg { width: 18px; height: 18px; }
  .customer-shell .status-tile-info strong { font-size: 17px; }
  .customer-shell .status-tile-info small { font-size: 11px; line-height: 1.3; }
  .customer-shell .status-tile-state { padding: 5px 8px; }
  .customer-shell .status-tile-action { min-height: 40px; padding: 8px 10px; }
  .customer-shell .status-tile-secondary { min-height: 28px; margin: 0; padding: 3px 6px; }
  .customer-shell .status-tile.checkin .checkin-window { padding-top: 6px; gap: 4px 8px; background: transparent; }
  .customer-shell .checkin-window .window-label { font-size: 10px; gap: 5px; }
  .customer-shell .checkin-window .window-hours { font-size: 14px; }
  .customer-shell .checkin-window .window-hours .time-period { font-size: 10px; }
  .customer-shell .next-block-head { margin: 0 0 6px; }
  .customer-shell .next-block-head h3 { font-size: 14px; }
  .customer-shell .next-block-empty, .customer-shell .next-block-details, .customer-shell .next-block-skeleton { padding: 10px; border-radius: 14px; }
  .customer-shell .next-block-details { gap: 6px; }
  .customer-shell .next-block-details div { padding: 5px 8px; }
  .customer-shell .next-block-details strong { font-size: 12px; line-height: 1.25; }
  .customer-shell .next-block-empty { min-height: 74px; gap: 3px; }
  .customer-shell .next-block-empty .empty-illustration { display: none; }
  .customer-shell .subscription-card { padding: 10px 12px; margin: 0; border-radius: 13px; }
  .customer-shell .subscription-card-head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 8px; }
  .customer-shell .subscription-card-head > div:first-child { grid-column: 1; grid-row: 1; }
  .customer-shell .subscription-card-head > div:nth-child(2) { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; border: 0; padding: 0; }
  .customer-shell .subscription-card-head > div:nth-child(2) strong { font-size: 10px; }
  .customer-shell .subscription-card .access-dot { grid-column: 3; }
  .customer-shell .smart-filter-page { height: 100%; min-height: 0; align-content: start; grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .customer-shell .smart-v15-head { margin-bottom: 6px; }
  .customer-shell .smart-v15-hero { --af-power-size: clamp(124px, 25cqh, 176px); padding-top: calc(var(--af-power-size) * .27); }
  .customer-shell .smart-v15-power { width: var(--af-power-size); height: var(--af-power-size); min-width: var(--af-power-size); }
  .customer-shell .smart-v15-power .smart-v15-core { inset: 13px; gap: 8px; }
  .customer-shell .smart-v15-power .smart-v15-core svg { width: 44px; height: 44px; }
  .customer-shell .smart-v15-status { margin-top: calc(var(--af-power-size) * .28); min-height: 0; gap: 3px; }
  .customer-shell .smart-v15-status strong { font-size: 20px; }
  .customer-shell .smart-v15-counters { padding: 10px 0; margin-top: 8px; }
  .customer-shell .smart-v15-counters strong { font-size: 20px; }
  .customer-shell .smart-v15 .sfl-inline-profiles, .customer-shell .smart-v15 .sfl-inline-schedule-launcher { min-height: 48px; }
  .customer-shell .sfl-inline-profile-trigger { min-height: 48px; padding: 7px 0; }
  .customer-shell .smart-v15 .sfl-inline-schedule-launcher { padding-top: 7px; padding-bottom: 7px; }
  .customer-shell .sfl-inline-schedule-open > span { top: 24px; }
  .customer-shell .sfl-inline-schedule-open svg { top: 18px; }
  .customer-shell .smart-v15-history { margin-top: 12px; min-height: 0; display: flex; flex-direction: column; align-self: stretch; }
  .customer-shell .smart-v15-history-head { flex: 0 0 auto; }
  .customer-shell .smart-v15-seg { flex: 0 0 auto; }
  .customer-shell .smart-v15-empty { min-height: 52px; flex: 1; padding: 12px; }
  .customer-shell .smart-v15-history-list { min-height: 0; overflow-y: auto; flex: 1; }
  .customer-shell .smart-v15-backdrop { top: calc(var(--af-header-height) + var(--af-safe-top)); bottom: calc(var(--af-nav-height) + var(--af-safe-bottom)); }
}
@container af-client (max-height: 610px) {
  .customer-shell .customer-home { gap: 8px; }
  .customer-shell .live-status-head { margin-bottom: 8px; }
  .customer-shell .af-eyebrow { font-size: 7px; margin-bottom: 2px; }
  .customer-shell .af-page-heading h2 { font-size: 19px; }
  .customer-shell .status-tile-grid { gap: 8px; }
  .customer-shell .status-tile { padding: 10px; gap: 6px; }
  .customer-shell .status-tile-head { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 8px; }
  .customer-shell .status-tile-icon { width: 28px; height: 28px; min-width: 28px; }
  .customer-shell .status-tile-info strong { font-size: 16px; }
  .customer-shell .status-tile-info small { line-height: 1.2; }
  .customer-shell .status-tile-action { min-height: 36px; padding: 7px 8px; font-size: 12px; }
  .customer-shell .status-tile-secondary { min-height: 24px; }
  .customer-shell .next-block-details { padding: 8px; gap: 4px; }
  .customer-shell .next-block-details div { padding: 4px 6px; }
  .customer-shell .next-block-empty { min-height: 62px; }
  .customer-shell .subscription-card { padding: 8px 10px; }
  .customer-shell .smart-v15-hero { --af-power-size: clamp(116px, 24cqh, 144px); }
  .customer-shell .smart-v15-status strong { font-size: 18px; }
  .customer-shell .smart-v15-counters { padding: 8px 0; margin-top: 6px; }
  .customer-shell .smart-v15-counters strong { font-size: 18px; }
  .customer-shell .smart-v15-history { margin-top: 8px; }
}
@container af-client (max-height: 550px) {
  .customer-shell .af-eyebrow { display: none; }
  .customer-shell .customer-home { gap: 6px; }
  .customer-shell .status-tile { padding: 8px; gap: 5px; }
  .customer-shell .status-tile.selfie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; }
  .customer-shell .status-tile.selfie .status-tile-head { grid-column: 1 / -1; }
  .customer-shell .status-tile.selfie .status-tile-action { grid-column: 1; }
  .customer-shell .status-tile.selfie .status-tile-secondary { grid-column: 2; max-width: 100px; min-height: 36px; font-size: 10px; text-align: center; }
  .customer-shell .status-tile.checkin .checkin-window { padding-top: 4px; }
  .customer-shell .next-block-head { margin-bottom: 4px; }
  .customer-shell .next-block-map-btn { width: 24px; height: 24px; }
  .customer-shell .next-block-details { padding: 6px; }
  .customer-shell .next-block-details div { display: flex; align-items: baseline; gap: 6px; padding: 4px 6px; }
  .customer-shell .next-block-details span { margin: 0; font-size: 8px; line-height: 1.2; }
  .customer-shell .next-block-details strong { font-size: 11px; line-height: 1.25; overflow: visible; }
  .customer-shell .subscription-card { padding: 6px 10px; }
  .customer-shell .subscription-card-head div { gap: 2px; }
  .customer-shell .subscription-card-head :is(span,strong) { line-height: 1.2; }
  .customer-shell .smart-v15-status > span { font-size: 10px; }
  .customer-shell .smart-v15-power .smart-v15-core svg { width: 36px; height: 36px; }
}
@container af-client (max-height: 460px) {
  .customer-shell .customer-home { gap: 4px; }
  .customer-shell .status-tile-grid { gap: 6px; }
  .customer-shell .smart-v15-hero { --af-power-size: 108px; }
  .customer-shell .smart-v15-status { gap: 2px; }
  .customer-shell .smart-v15-status strong { font-size: 17px; }
  .customer-shell .smart-v15-counters { padding: 6px 0; }
  .customer-shell .smart-v15-history-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
  .customer-shell .smart-v15-history-head h3 { font-size: 12px; }
  .customer-shell .smart-v15-history-head .smart-v15-seg { flex: 1; min-width: 0; padding: 3px; }
  .customer-shell .smart-v15-seg button { font-size: 9px; padding: 6px 3px; }
  .customer-shell .smart-v15-empty { min-height: 40px; padding: 8px; font-size: 10px; }
}