/* M1 Mobile Density — compact mobile composition
FINAL layer in the cascade manifest (m1-tokens.css), which is why nothing
here needs !important: it already outranks every page module.
This file owns phone geometry. No page module may redefine global sizes,
control heights, gutters or card padding for phones. */
@layer m1-mobile-density {
  /* Collapse reserved validation geometry on phones — was 2.35–5.8em blank per field */
  @media (max-width: 760px) {
    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;
    }
    body.m1-app .form-group > .m1-form-status:empty,
    body.m1-app .field > .m1-form-status:empty {
      min-block-size: 0;
    }
  }
  /* Page rhythm — compact gutters, section gaps */
  @media (max-width: 760px) {
    .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));
    }
  }
  /* Shared form stack — single primitive */
  .m1-field {
    display: grid;
    gap: var(--m1-mobile-label-gap);
    min-width: 0;
  }
  /* Shared form primitives — one compact rhythm for every form on a phone */
  @media (max-width: 760px) {
    .form-stack {
      gap: var(--m1-mobile-field-gap);
    }
    .form-row {
      gap: var(--m1-mobile-field-gap);
    }
    .form-group {
      gap: var(--m1-mobile-label-gap);
      margin-bottom: 0;
    }
  }

  /* Controls — 16px text on phones, 44px height, compact where appropriate */
  @media (max-width: 760px) {
    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;
      padding: 10px 12px;
      border-radius: var(--m1-mobile-radius-control);
    }
    body.m1-app textarea,
    body.m1-app .form-textarea {
      min-height: 84px;
    }
    .button,
    body.m1-app .btn {
      min-height: var(--m1-mobile-button-height);
      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);
    }
    .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: 760px) {
    .card,
    .trip-card,
    .surface__header,
    .surface__body,
    .detail-shell .trip-hero > header,
    .detail-shell .detail-section,
    .next-trip {
      padding: var(--m1-mobile-card-padding);
    }
    .trip-card {
      padding: var(--m1-mobile-card-padding-compact);
    }
    /* Remove luxe minima that inflate mobile */
    .booking-shell--luxury,
    .booking-concierge {
      min-height: 0;
    }
    .booking-concierge__visual {
      margin-top: 18px;
    }
  }
  @media (max-width: 430px) {
    .card {
      padding: var(--m1-mobile-card-padding-compact);
    }
  }
  /* Reservation density — reusable primitives + overrides for legacy markup */
  @media (max-width: 760px) {
    .detail-shell {
      padding-block: var(--m1-mobile-section-gap) 28px;
    }
    .detail-header {
      gap: 10px;
      margin-bottom: 12px;
      flex-direction: row;
      align-items: center;
    }
    .detail-header h1 {
      font-size: clamp(1.45rem, 5vw, 1.95rem);
      line-height: 1.15;
      margin-bottom: 2px;
    }
    .detail-header p {
      font-size: .82rem;
      margin-top: 2px;
    }
    .detail-header .status-badge {
      margin-left: auto;
    }
    /* Legacy status-statement -> compact banner */
    .status-statement {
      padding: 12px 14px;
      margin-bottom: var(--m1-mobile-card-gap);
      gap: 10px;
    }
    .status-statement > div {
      gap: 10px;
    }
    .status-statement h2 {
      font-size: .95rem;
      line-height: 1.3;
      margin-bottom: 2px;
    }
    .status-statement p {
      font-size: .84rem;
      line-height: 1.45;
    }
    /* Trip hero — compact schedule */
    .trip-hero {
      padding: var(--m1-mobile-card-padding);
    }
    .trip-hero > header {
      padding: 0;
      margin-bottom: 12px;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
    }
    .trip-hero > header h2 {
      font-size: .88rem;
    }
    .trip-hero > header time {
      font-size: 1.35rem;
      font-weight: 750;
      letter-spacing: -.02em;
    }
    .detail-route {
      /* Narrow the marker gutter on a phone; never remove it. The component
         derives the markers and the connector from this token, so the
         timeline stays inside its card at every width. */
      --m1-route-gutter: 2.1rem;
      gap: 10px;
      padding-block: 12px;
      padding-inline-end: 0;
    }
    .detail-route > div {
      gap: 6px;
    }
    .trip-notes {
      gap: 8px;
      padding: 10px 0 0;
    }
    /* Detail sections */
    .detail-section {
      padding: var(--m1-mobile-card-padding);
      margin-bottom: var(--m1-mobile-card-gap);
    }
    .detail-section header {
      margin-bottom: 10px;
    }
    .detail-section header h2 {
      font-size: 1rem;
    }
    /* Compact status banner instead of large card */
    /* Schedule compact */
    /* Ride-details grid — also override legacy .detail-data (dl) to become grid */
    .detail-data {
      display: grid;
      gap: 8px 14px;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .detail-data > div {
      display: grid;
      gap: 2px;
      padding: 6px 0;
      border: 0;
    }
    .detail-data dt {
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--m1-ink-muted);
    }
    .detail-data dd {
      font-size: .88rem;
      font-weight: 600;
      margin: 0;
    }
    @media (max-width: 360px) {
      .detail-data {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 320px) {
      .detail-data {
        grid-template-columns: 1fr;
      }
    }
  }
  /* Contact — tighten */
  @media (max-width: 760px) {
    .contact-layout {
      gap: var(--m1-mobile-card-gap);
    }
    .contact-layout .surface__header {
      padding: var(--m1-mobile-card-padding);
    }
    .contact-layout .surface__body {
      padding: var(--m1-mobile-card-padding);
      gap: var(--m1-mobile-field-gap);
    }
    .field-grid {
      gap: var(--m1-mobile-field-gap);
    }
    .field {
      gap: var(--m1-mobile-label-gap);
    }
  }
  /* Guest manage — help sections denser */
  @media (max-width: 760px) {
    .guest-help {
      padding: var(--m1-mobile-card-padding);
      gap: 12px;
      margin-bottom: var(--m1-mobile-card-gap);
    }
    .guest-help h2 {
      font-size: 1rem;
      margin-bottom: 4px;
    }
    .guest-help p {
      font-size: .84rem;
      line-height: 1.45;
    }
    .guest-help {
      display: grid;
      gap: 12px;
    }
    .guest-help > div:last-child {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .guest-help .button {
      min-height: var(--m1-mobile-button-height-compact);
      padding-inline: .5rem;
      font-size: .8rem;
    }
    .linked-trip {
      padding: var(--m1-mobile-card-padding-compact);
      gap: 10px;
    }
  }
  /* Ensure no horizontal overflow at 320 */
  html {
    min-width: 320px;
  }
  body {
    overflow-x: hidden;
  }
  /* Content images scale; a brand lockup is a fixed-height asset the shell
     sizes, so it opts out by class rather than by this layer reaching into
     the header and footer. */
  img:not(.m1-logo-asset),
  video {
    max-width: 100%;
    height: auto;
  }
  /* Desktop unmodified — density only below 700px */
}