/* M1 Mobile Density — 2026.09.01.14
   Compact composition model: shell + forms + reservation.
   Loaded after m1-auth, before page layers. One token system only.
   All mobile overrides live here; no page should redefine global sizes. */
@layer m1-mobile-density {
  /* Collapse reserved validation geometry on phones — was 2.35–5.8em blank per field */
  @media (max-width: 700px) {
    body.m1-app .form-group > .m1-form-status,
    body.m1-app .field > .m1-form-status,
    body.m1-app .location-field > .m1-form-status,
    body.m1-app .service-choice-field > .m1-form-status,
    .field__status,
    .field > .field__error,
    .location-field > .field__error {
      min-block-size: 1em !important;
    }
    body.m1-app .form-group > .m1-form-status:empty,
    body.m1-app .field > .m1-form-status:empty { min-block-size: 0 !important; }
  }

  /* Page rhythm — compact gutters, section gaps */
  @media (max-width: 700px) {
    .page-shell { width: min(100% - var(--m1-mobile-page-gutter)*2, var(--m1-content)); padding-block: var(--m1-mobile-section-gap) var(--m1-mobile-section-gap-lg); }
    .page-header { gap: var(--m1-mobile-stack-gap); margin-bottom: var(--m1-mobile-section-gap); }
    .page-shell--narrow { width: min(100% - var(--m1-mobile-page-gutter)*2, var(--m1-reading)); }
  }
  @media (max-width: 360px) {
    .page-shell { width: min(100% - var(--m1-mobile-page-gutter-narrow)*2, var(--m1-content)); }
  }

  /* Shell — header compact 54–60px via token */
  @media (max-width: 700px) {
    .m1-header, .m1-header__inner { min-height: var(--m1-mobile-header-height) !important; }
    .m1-header__inner { gap: 12px; }
    .m1-brand img { width: 88px !important; height: auto; }
    body.m1-app.booking-form-page--luxury .m1-header,
    body.m1-app.booking-form-page--luxury .m1-header__inner { min-height: var(--m1-mobile-header-height) !important; }
  }
  @media (max-width: 340px) {
    .m1-header__inner { width: calc(100% - var(--m1-mobile-page-gutter-narrow)*2) !important; }
    .m1-brand img { width: 80px !important; }
  }

  /* Bottom nav — lighter, 60px, modern pill active, transform-based hiding */
  @media (max-width: 900px) {
    body.m1-app { padding-bottom: calc(var(--m1-mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 10px); }
    .m1-mobile-dock {
      min-height: var(--m1-mobile-bottom-nav-height) !important;
      right: 10px; left: 10px;
      border-radius: var(--m1-mobile-radius-floating) !important;
      transition: transform 220ms var(--ease-standard), opacity 180ms var(--ease-standard);
      will-change: transform;
    }
    .m1-mobile-dock[data-nav-state="hidden"] { transform: translateY(calc(100% + 14px + env(safe-area-inset-bottom))); opacity: .98; }
    .m1-mobile-dock[data-nav-state="visible"] { transform: translateY(0); opacity: 1; }
    .m1-mobile-dock__item { min-height: var(--m1-mobile-bottom-nav-height) !important; gap: 2px; padding: 5px 4px; font-size: .60rem; }
    .m1-mobile-dock__icon { min-width: 24px; min-height: 24px; font-size: .88rem; }
    .m1-mobile-dock__item[aria-current="page"] { color: #f8fafc; }
    .m1-mobile-dock__item[aria-current="page"]::after { background: var(--m1-business-accent); height: 2px; left: 28%; right: 28%; }
    @media (prefers-reduced-motion: reduce) {
      .m1-mobile-dock { transition: none !important; }
      .m1-mobile-dock[data-nav-state="hidden"] { transform: none; opacity: 0; }
    }
  }
  @media (max-width: 340px) {
    .m1-mobile-dock { right: 6px; left: 6px; }
  }

  /* Footer — compact variant */
  @media (max-width: 700px) {
    .m1-footer__inner { gap: var(--m1-mobile-footer-gap) !important; padding: 16px 0 !important; }
    .m1-footer__legal { padding: 10px 0 12px !important; font-size: .74rem; }
    .site-footer__inner { padding: var(--m1-mobile-footer-gap) 0 12px !important; }
    .site-footer__grid { gap: var(--m1-mobile-footer-gap) !important; }
  }

  /* Shared form stack — single primitive */
  .m1-form-stack { display: grid; gap: var(--m1-mobile-field-gap); }
  .m1-field { display: grid; gap: var(--m1-mobile-label-gap); min-width: 0; }
  .m1-field__label { color: var(--m1-ink); font-size: .80rem; font-weight: 700; line-height: 1.3; }
  .m1-field__control { min-height: var(--m1-mobile-control-height); }
  .m1-field__help { color: var(--m1-ink-muted); font-size: .76rem; line-height: 1.4; }
  .m1-form-actions { display: grid; gap: 10px; padding-top: 6px; }

  /* Auth forms — remove artificial min-height/space-between */
  @media (max-width: 900px) {
    .auth-page main { min-height: auto !important; padding: 18px var(--m1-mobile-page-gutter) 28px !important; place-items: start center !important; }
    .auth-shell { padding: var(--m1-mobile-card-padding) !important; min-height: auto !important; width: min(100%, 520px) !important; margin: 0 auto !important; }
    .auth-card { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
    .auth-header { margin-bottom: var(--m1-mobile-section-gap) !important; }
    .auth-header h1 { font-size: clamp(1.75rem, 6vw, 2.4rem) !important; margin-bottom: 6px !important; }
    .auth-header p { line-height: 1.6 !important; }
    .auth-form { gap: var(--m1-mobile-field-gap) !important; }
    .form-stack { gap: var(--m1-mobile-field-gap) !important; }
    .form-row { gap: var(--m1-mobile-field-gap) !important; }
    .form-group { gap: var(--m1-mobile-label-gap) !important; margin-bottom: 0 !important; }
    .auth-actions { gap: 10px !important; padding-top: 8px !important; }
    .auth-actions .btn-block { min-height: var(--m1-mobile-button-height) !important; }
  }

  /* Controls — 16px text on phones, 44px height, compact where appropriate */
  @media (max-width: 700px) {
    body.m1-app input, body.m1-app select, body.m1-app textarea,
    body.m1-app .form-input, body.m1-app .form-select, body.m1-app .form-textarea,
    body.m1-app .m1-datetime-trigger {
      min-height: var(--m1-mobile-control-height);
      font-size: 16px !important;
      padding: 10px 12px;
      border-radius: var(--m1-mobile-radius-control);
    }
    body.m1-app textarea, body.m1-app .form-textarea { min-height: 84px !important; }
    .button, body.m1-app .btn { min-height: var(--m1-mobile-button-height) !important; padding: 10px 16px; border-radius: var(--m1-mobile-radius-control); font-size: .88rem; }
    .button--small, .btn-sm { min-height: var(--m1-mobile-button-height-compact) !important; }
    .button--compact, .btn--compact { min-height: var(--m1-mobile-button-height-compact) !important; padding: 8px 12px; font-size: .84rem; }
    .icon-button { width: var(--m1-mobile-icon-target); height: var(--m1-mobile-icon-target); }
  }

  /* Cards — compact padding, no desktop minima on mobile */
  @media (max-width: 700px) {
    .card, .form-section, .feature-card, .service-card, .trip-card,
    .surface__header, .surface__body, .detail-shell .trip-hero > header,
    .detail-shell .detail-section, .next-trip {
      padding: var(--m1-mobile-card-padding) !important;
    }
    .card--compact, .surface--compact { padding: var(--m1-mobile-card-padding-compact) !important; }
    .trip-card { padding: var(--m1-mobile-card-padding-compact) !important; }
    .stat-card { padding: 14px !important; }
    /* Remove luxe minima that inflate mobile */
    .booking-shell--luxury, .booking-concierge { min-height: 0 !important; }
    .booking-concierge__visual { margin-top: 18px !important; }
  }
  @media (max-width: 390px) {
    .card, .form-section { padding: var(--m1-mobile-card-padding-compact) !important; }
  }

  /* Reservation density — reusable primitives + overrides for legacy markup */
  @media (max-width: 700px) {
    .detail-shell { padding-block: var(--m1-mobile-section-gap) 28px !important; }
    .detail-header { gap: 10px !important; margin-bottom: 12px !important; flex-direction: row !important; align-items: center !important; }
    .detail-header h1 { font-size: clamp(1.45rem, 5vw, 1.95rem) !important; line-height: 1.15 !important; margin-bottom: 2px !important; }
    .detail-header p { font-size: .82rem !important; margin-top: 2px !important; }
    .detail-header .status-badge { margin-left: auto; }
    /* Legacy status-statement -> compact banner */
    .status-statement { padding: 12px 14px !important; margin-bottom: var(--m1-mobile-card-gap) !important; gap: 10px !important; }
    .status-statement > div { gap: 10px !important; }
    .status-statement h2 { font-size: .95rem !important; line-height: 1.3 !important; margin-bottom: 2px !important; }
    .status-statement p { font-size: .84rem !important; line-height: 1.45 !important; }
    /* Trip hero — compact schedule */
    .trip-hero { padding: var(--m1-mobile-card-padding) !important; }
    .trip-hero > header { padding: 0 !important; margin-bottom: 12px !important; flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; gap: 10px !important; }
    .trip-hero > header h2 { font-size: .88rem !important; }
    .trip-hero > header time { font-size: 1.35rem !important; font-weight: 750 !important; letter-spacing: -.02em !important; }
    .detail-route { gap: 10px !important; padding: 12px 0 !important; }
    .detail-route > div { gap: 6px !important; }
    .trip-notes { gap: 8px !important; padding: 10px 0 0 !important; }
    /* Detail sections */
    .detail-section { padding: var(--m1-mobile-card-padding) !important; margin-bottom: var(--m1-mobile-card-gap) !important; }
    .detail-section header { margin-bottom: 10px !important; }
    .detail-section header h2 { font-size: 1rem !important; }
    /* Compact status banner instead of large card */
    .status-card--banner, .m1-status-banner {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; border-radius: var(--m1-mobile-radius-card);
      border: 1px solid var(--m1-border); background: var(--m1-surface);
      margin-bottom: var(--m1-mobile-card-gap);
    }
    .m1-status-banner__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
    .m1-status-banner__body { min-width: 0; }
    .m1-status-banner__title { font-weight: 700; font-size: .92rem; line-height: 1.3; }
    .m1-status-banner__desc { color: var(--m1-ink-muted); font-size: .82rem; line-height: 1.45; margin-top: 2px; }
    /* Schedule compact */
    .trip-schedule-compact { display: grid; gap: 2px; }
    .trip-schedule-compact__date { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--m1-ink-muted); }
    .trip-schedule-compact__time { font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; }
    /* Ride-details grid — also override legacy .detail-data (dl) to become grid */
    .detail-data { display: grid !important; gap: 8px 14px !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
    .detail-data > div { display: grid !important; gap: 2px !important; padding: 6px 0 !important; border: 0 !important; }
    .detail-data dt { font-size: .68rem !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--m1-ink-muted) !important; }
    .detail-data dd { font-size: .88rem !important; font-weight: 600 !important; margin: 0 !important; }
    @media (max-width: 360px) { .detail-data { grid-template-columns: 1fr 1fr !important; } }
    @media (max-width: 320px) { .detail-data { grid-template-columns: 1fr !important; } }
    .ride-details-grid {
      display: grid; gap: 10px 14px;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .ride-details-grid .info-row,
    .ride-details-grid .detail-row,
    .ride-details-grid .review-item { grid-template-columns: 1fr !important; gap: 2px !important; padding-block: 8px !important; }
    .ride-details-grid .info-label, .ride-details-grid .detail-label { font-size: .68rem !important; letter-spacing: .06em !important; }
    .ride-details-grid .info-value, .ride-details-grid .detail-value { font-size: .88rem !important; font-weight: 600 !important; }
    @media (max-width: 360px) {
      .ride-details-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 320px) {
      .ride-details-grid { grid-template-columns: 1fr; }
    }
  }

  /* Contact — tighten */
  @media (max-width: 700px) {
    .contact-layout { gap: var(--m1-mobile-card-gap) !important; }
    .contact-layout .surface__header { padding: var(--m1-mobile-card-padding) !important; }
    .contact-layout .surface__body { padding: var(--m1-mobile-card-padding) !important; gap: var(--m1-mobile-field-gap) !important; }
    .field-grid { gap: var(--m1-mobile-field-gap) !important; }
    .field { gap: var(--m1-mobile-label-gap) !important; }
  }

  /* Guest manage — help sections denser */
  @media (max-width: 700px) {
    .guest-help { padding: var(--m1-mobile-card-padding) !important; gap: 12px !important; margin-bottom: var(--m1-mobile-card-gap) !important; }
    .guest-help h2 { font-size: 1rem !important; margin-bottom: 4px !important; }
    .guest-help p { font-size: .84rem !important; line-height: 1.45 !important; }
    .guest-help .button { min-height: var(--m1-mobile-button-height-compact) !important; }
    .linked-trip { padding: var(--m1-mobile-card-padding-compact) !important; gap: 10px !important; }
  }

  /* Ensure no horizontal overflow at 320 */
  html { min-width: 320px; }
  body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  /* Desktop unmodified — density only below 700px */
}