@layer m1-system {
/* M1 System — the design language layer (app/docs/DESIGN_LANGUAGE.md).
 *
 * Sits after every page module (page, m1-booking) and before the phone
 * geometry layer in the manifest (m1-tokens.css), so the type roles, page
 * header, card, control and sticky-action rules below are stated once and
 * hold on every page without !important. Values come only from the role
 * tokens in m1-tokens.css; when this file needs a number that is not a
 * token, it is a 4px-scale value.
 */

  /* ---------------------------------------------------------------- *
   * 1. Type roles
   * ---------------------------------------------------------------- */
  body.m1-app {
    font-family: var(--font-sans);
    font-size: var(--m1-fs-body);
    line-height: var(--m1-lh-body);
    letter-spacing: 0;
  }
  body.m1-app h1,
  body.m1-app h2,
  body.m1-app h3,
  body.m1-app h4 {
    letter-spacing: 0;
  }
  /* display: the page h1, one per page. Every page module used to set its
     own (23px to 92px); this is the only declaration that now matters. */
  body.m1-app main h1 {
    margin: 0 0 4px;
    font-size: var(--m1-fs-display);
    font-weight: 650;
    line-height: var(--m1-lh-display);
    letter-spacing: -.015em;
    text-wrap: balance;
  }
  /* The home hero is the single marketing exception. */
  body.m1-app main .hero h1 {
    font-size: var(--m1-fs-hero);
    line-height: var(--m1-lh-hero);
    letter-spacing: -.02em;
  }
  /* title: card / section headings. */
  body.m1-app main h2 {
    font-size: var(--m1-fs-title);
    font-weight: 600;
    line-height: var(--m1-lh-title);
  }
  body.m1-app main h3 {
    font-size: var(--m1-fs-body);
    font-weight: 600;
    line-height: var(--m1-lh-body);
  }
  /* heading: the one major region title on a list page. */
  body.m1-app .m1-worklist-heading h2 {
    font-size: var(--m1-fs-heading);
    line-height: var(--m1-lh-heading);
  }

  /* Overlines are data, not decoration: caption, sentence case, muted.
     A label that only repeats the heading after it is not rendered. */
  body.m1-app .eyebrow,
  body.m1-app .page-eyebrow,
  body.m1-app .booking-concierge__eyebrow {
    display: block;
    margin: 0 0 4px;
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-caption);
    font-weight: 500;
    line-height: var(--m1-lh-caption);
    letter-spacing: 0;
    text-transform: none;
  }
  body.m1-app main .eyebrow:has(+ h2),
  body.m1-app main .eyebrow:has(+ h3),
  body.m1-app .booking-page-header .eyebrow,
  body.m1-app .auth-card > .page-eyebrow {
    display: none;
  }

  /* Labels and terms: sentence case, label/caption role. */
  body.m1-app dt,
  body.m1-app .data-list dt,
  body.m1-app .detail-data dt,
  body.m1-app .sidebar-section dt,
  body.m1-app .review-grid dt,
  body.m1-app .staff-summary__list dt,
  body.m1-app .booking-concierge__summary dt,
  body.m1-app .confirmation-summary dt,
  body.m1-app .driver-trip-card dt,
  body.m1-app .detail-route small,
  body.m1-app .decision-route small,
  body.m1-app .driver-trip-card small,
  body.m1-app .contact-aside small,
  body.m1-app .trip-notes span,
  body.m1-app .reference-band > span,
  body.m1-app .confirmation-route span,
  body.m1-app .staff-summary__title,
  body.m1-app .m1-worklist__head,
  body.m1-app .m1-snap-carousel__hint,
  body.m1-app .m1-footer__heading,
  body.m1-app .booking-shell--luxury .passenger-field > .field__label,
  body.m1-app .booking-shell--luxury .booking-progress strong,
  body.m1-app .reservation-item__return > span:first-child {
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-caption);
    font-weight: 500;
    line-height: var(--m1-lh-caption);
    letter-spacing: 0;
    text-transform: none;
  }
  body.m1-app .booking-shell--luxury .passenger-field > .field__label {
    color: var(--m1-ink);
    font-size: var(--m1-fs-label);
    line-height: var(--m1-lh-label);
  }
  body.m1-app dd {
    font-size: var(--m1-fs-body);
    line-height: var(--m1-lh-body);
  }
  body.m1-app main th {
    letter-spacing: 0;
    text-transform: none;
  }
  /* Small markers that were uppercase badges become micro, sentence case. */
  body.m1-app .new-marker,
  body.m1-app .m1-worklist__updated,
  body.m1-app .request-item__status {
    font-size: var(--m1-fs-micro);
    font-weight: 600;
    line-height: var(--m1-lh-micro);
    letter-spacing: 0;
    text-transform: none;
  }
  /* Data numbers. */
  body.m1-app time,
  body.m1-app .status-index strong,
  body.m1-app .m1-worklist__cell--schedule strong {
    font-variant-numeric: tabular-nums;
  }

  /* ---------------------------------------------------------------- *
   * 2. Page frame and the page header pattern
   * ---------------------------------------------------------------- */
  body.m1-app .page-shell {
    width: min(100% - var(--m1-gutter) * 2, var(--m1-content));
    padding-block: var(--m1-page-top) 48px;
  }
  body.m1-app .page-shell--narrow {
    width: min(100% - var(--m1-gutter) * 2, var(--m1-reading));
  }
  body.m1-app .page-header,
  body.m1-app .booking-page-header,
  body.m1-app .detail-header,
  body.m1-app .reading-header,
  body.m1-app .driver-page-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    min-height: 0;
    margin: 0 0 var(--m1-card-pad);
    padding: 0;
    border: 0;
    background: none;
  }
  /* Header grid: the h1 and the page's one action share a row; the intro
     line runs full width beneath them instead of being squeezed beside the
     button. The copy wrapper dissolves (display: contents) so its children
     join the grid without a markup change on every page. */
  body.m1-app .page-header,
  body.m1-app .booking-page-header,
  body.m1-app .detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
  }
  body.m1-app .page-header > div:first-child,
  body.m1-app .page-header__copy,
  body.m1-app .booking-page-header > div:first-child,
  body.m1-app .detail-header > div:first-child {
    display: contents;
  }
  body.m1-app :is(.page-header, .booking-page-header, .detail-header) :is(.eyebrow, p) {
    grid-column: 1 / -1;
  }
  body.m1-app :is(.page-header, .booking-page-header, .detail-header) h1 {
    grid-column: 1;
    margin: 0;
  }
  body.m1-app :is(.page-header, .booking-page-header, .detail-header) > :is(.button, .page-header__actions, .status-badge) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  body.m1-app :is(.page-header, .booking-page-header, .detail-header):has(.eyebrow:not([hidden])) > :is(.button, .page-header__actions, .status-badge) {
    grid-row: 2;
  }
  /* The wizard's "Back to reservations" is a back link above the title. */
  body.m1-app .booking-page-header.booking-page-header:is(*, :has(.eyebrow:not([hidden]))) > a.button.button {
    grid-column: 1 / -1;
    grid-row: 1;
    border: 0;
    background: none;
    box-shadow: none;
    justify-self: start;
    min-height: 44px;
    margin: -8px 0 4px;
    padding: 0;
    color: var(--m1-business-accent-strong);
    font-size: var(--m1-fs-label);
    font-weight: 500;
  }
  body.m1-app .booking-page-header > a.button::before {
    content: "\2190";
    margin-inline-end: 8px;
  }
  /* The intro line: caption on phones, body on desktop, one measure. */
  body.m1-app .page-header p,
  body.m1-app .booking-page-header p,
  body.m1-app .detail-header p,
  body.m1-app .reading-header p,
  body.m1-app .driver-page-title p,
  body.m1-app .confirmation-header p {
    max-width: 60ch;
    margin: 0;
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-body);
    line-height: var(--m1-lh-body);
  }
  body.m1-app .page-header__actions {
    width: auto;
    flex: none;
  }
  body.m1-app .page-header__actions .button,
  body.m1-app .page-header > .button {
    flex: none;
  }
  /* Back link: one component on every page that has a parent. */
  body.m1-app .back-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    margin: -8px 0 4px;
    color: var(--m1-business-accent-strong);
    font-size: var(--m1-fs-label);
    font-weight: 500;
    line-height: var(--m1-lh-label);
    text-decoration: none;
  }
  body.m1-app .back-link:hover {
    color: var(--m1-ink);
    text-decoration: underline;
  }
  @media (max-width: 760px) {
    body.m1-app .page-header p,
    body.m1-app .booking-page-header p,
    body.m1-app .detail-header p,
    body.m1-app .reading-header p,
    body.m1-app .driver-page-title p,
    body.m1-app .confirmation-header p {
      font-size: var(--m1-fs-caption);
      line-height: var(--m1-lh-caption);
    }
  }

  /* ---------------------------------------------------------------- *
   * 3. Surfaces: cards are flat, hairline, 12px, 16/24 padding
   * ---------------------------------------------------------------- */
  body.m1-app .surface,
  body.m1-app .card,
  body.m1-app .detail-section,
  body.m1-app .trip-hero,
  body.m1-app .next-trip,
  body.m1-app .sidebar-section,
  body.m1-app .action-panel,
  body.m1-app .workspace-overview,
  body.m1-app .status-index,
  body.m1-app .staff-row,
  body.m1-app .staff-summary,
  body.m1-app .linked-trip,
  body.m1-app .guest-help,
  body.m1-app .driver-card,
  body.m1-app .driver-trip-card,
  body.m1-app .confirmation-summary,
  body.m1-app .next-steps,
  body.m1-app .m1-worklist,
  body.m1-app .reservation-list,
  body.m1-app .today-strip,
  body.m1-app .booking-section,
  body.m1-app .m1-previous-site {
    border-color: var(--m1-border);
    border-radius: var(--m1-radius-md);
    box-shadow: none;
  }
  body.m1-app .detail-section,
  body.m1-app .sidebar-section,
  body.m1-app .action-panel,
  body.m1-app .surface__body,
  body.m1-app .surface__header {
    padding: var(--m1-card-pad);
  }
  body.m1-app .trip-hero > header,
  body.m1-app .detail-section header,
  body.m1-app .surface__header,
  body.m1-app .booking-section__header {
    background: none;
  }
  body.m1-app .trip-hero {
    padding: var(--m1-card-pad);
  }
  body.m1-app .trip-hero > header {
    margin: 0;
    padding: 0 0 12px;
  }
  body.m1-app .detail-section header h2,
  body.m1-app .sidebar-section h2,
  body.m1-app .action-panel h2,
  body.m1-app .surface__header h2,
  body.m1-app .booking-section__header h2,
  body.m1-app .confirmation-summary h2,
  body.m1-app .next-steps h2,
  body.m1-app .guest-help h2,
  body.m1-app .linked-trip h2 {
    margin: 0;
    font-size: var(--m1-fs-title);
    line-height: var(--m1-lh-title);
  }
  /* Schedule figures are titles, not displays. */
  body.m1-app .trip-hero > header h2,
  body.m1-app .trip-hero > header time,
  body.m1-app .next-trip strong {
    font-size: var(--m1-fs-heading);
    font-weight: 600;
    line-height: var(--m1-lh-heading);
    letter-spacing: -.01em;
  }
  body.m1-app .detail-route strong,
  body.m1-app .detail-route p {
    font-size: var(--m1-fs-body);
    font-weight: 600;
    line-height: var(--m1-lh-body);
  }
  body.m1-app .detail-section + .detail-section,
  body.m1-app .trip-hero + .detail-section {
    margin-top: var(--m1-section-gap);
  }

  /* Alerts / attention rows: tint carries the meaning, no extra weight. */
  body.m1-app .alert,
  body.m1-app .attention-row,
  body.m1-app .status-statement {
    padding: 12px 16px;
    border-radius: var(--m1-radius-md);
    box-shadow: none;
    font-size: var(--m1-fs-caption);
    line-height: var(--m1-lh-caption);
  }
  body.m1-app .alert strong,
  body.m1-app .attention-row h2,
  body.m1-app .status-statement h2 {
    font-size: var(--m1-fs-label);
    font-weight: 600;
    line-height: var(--m1-lh-label);
    margin: 0;
  }
  body.m1-app .alert p,
  body.m1-app .attention-row p,
  body.m1-app .status-statement p {
    margin: 0;
    font-size: var(--m1-fs-caption);
    line-height: var(--m1-lh-caption);
  }
  /* Attention row: dot + copy on the left, the action on the right, on
     every width -- the action never drops onto a line of its own. */
  body.m1-app .attention-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body.m1-app .attention-row > div {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
  }
  body.m1-app .attention-row .status-dot {
    margin-top: 6px;
  }
  body.m1-app .attention-row > .button {
    flex: none;
  }
  body.m1-app .attention-row + .attention-row,
  body.m1-app .attention-row + .workspace-overview {
    margin-top: 8px;
  }

  /* Empty states. */
  body.m1-app .empty-state {
    padding: 32px var(--m1-card-pad);
    text-align: center;
  }
  body.m1-app .empty-state h2 {
    font-size: var(--m1-fs-title);
    line-height: var(--m1-lh-title);
  }
  body.m1-app .empty-state p {
    margin-inline: auto;
    color: var(--m1-ink-muted);
  }

  /* ---------------------------------------------------------------- *
   * 4. Controls
   * ---------------------------------------------------------------- */
  body.m1-app .button,
  body.m1-app .btn {
    padding-inline: 16px;
    border-radius: var(--m1-radius-sm);
    font-size: var(--m1-fs-body);
    font-weight: 600;
    letter-spacing: 0;
    transform: none;
  }
  body.m1-app .button--small {
    padding-inline: 12px;
    font-size: var(--m1-fs-label);
  }
  body.m1-app .field__label,
  body.m1-app .form-label,
  body.m1-app label.field__label {
    font-size: var(--m1-fs-label);
    font-weight: 500;
    line-height: var(--m1-lh-label);
    letter-spacing: 0;
    text-transform: none;
  }
  body.m1-app .field__optional {
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-caption);
    font-weight: 400;
  }
  body.m1-app .field__hint,
  body.m1-app .field__status,
  body.m1-app .field__error {
    font-size: var(--m1-fs-caption);
    line-height: var(--m1-lh-caption);
  }
  body.m1-app input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  body.m1-app select,
  body.m1-app textarea,
  body.m1-app .form-input,
  body.m1-app .form-select {
    border-color: var(--m1-control-border);
    border-radius: var(--m1-radius-sm);
    font-size: var(--m1-fs-input);
  }
  /* Filter / period chips. */
  body.m1-app .m1-period-presets__link,
  body.m1-app .m1-filter-chips a,
  body.m1-app .m1-toolbar__filters {
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    font-size: var(--m1-fs-label);
    font-weight: 500;
    line-height: var(--m1-lh-label);
  }
  @media (pointer: coarse) {
    body.m1-app .button--small { min-height: 44px; }
    body.m1-app .m1-period-presets__link,
    body.m1-app .m1-toolbar__filters { min-height: 44px; }
  }
  @media (max-width: 900px) {
    body.m1-app input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body.m1-app select,
    body.m1-app .form-input,
    body.m1-app .form-select,
    body.m1-app .m1-datetime-trigger,
    body.m1-app .m1-select__trigger,
    body.m1-app .m1-combobox__input {
      min-height: 48px;
    }
  }

  /* ---------------------------------------------------------------- *
   * 5. ONE sticky action surface (DESIGN_LANGUAGE section 5)
   *    The bottom nav is hidden by m1-shell.css whenever one of these bars
   *    is on the page; the bar is flush to the bottom edge and the page
   *    gets matching bottom padding so nothing sits underneath it.
   * ---------------------------------------------------------------- */
  @media (max-width: 760px) {
    body.m1-app .booking-shell--luxury .booking-step .booking-section__footer,
    body.m1-app .staff-editor__footer,
    body.m1-app .booking-actions--sticky {
      position: fixed;
      z-index: 84;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      min-height: 0;
      margin: 0;
      padding: 12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
      border: 0;
      border-top: 1px solid var(--m1-border);
      border-radius: 0;
      background: var(--m1-surface);
      box-shadow: 0 -8px 24px -20px rgba(15, 23, 42, .35);
      transition: none;
    }
    body.m1-app .booking-shell--luxury .booking-step .booking-section__footer .button,
    body.m1-app .staff-editor__footer .button,
    body.m1-app .booking-actions--sticky .button {
      width: auto;
      min-height: 48px;
    }
    body.m1-app .booking-shell--luxury .booking-step .booking-section__footer .button:last-child,
    body.m1-app .booking-shell--luxury .booking-step .booking-section__footer .booking-primary-action,
    body.m1-app .staff-editor__footer .button:last-child,
    body.m1-app .booking-actions--sticky .button:last-child {
      flex: 1 1 auto;
    }
    body.m1-app:has(.booking-section__footer, .staff-editor__footer, .booking-actions--sticky) {
      padding-bottom: calc(var(--m1-action-bar-height) + env(safe-area-inset-bottom) + 16px);
    }
    html:has(.booking-section__footer, .staff-editor__footer) {
      scroll-padding-bottom: calc(var(--m1-action-bar-height) + env(safe-area-inset-bottom) + 24px);
    }
  }

  /* ---------------------------------------------------------------- *
   * 6. Page-specific corrections to the shared pattern
   * ---------------------------------------------------------------- */
  /* Status badge never stretches (driver page rendered it full width). */
  body.m1-app .detail-header .status-badge,
  body.m1-app .driver-page-title .status-badge {
    flex: none;
  }
  /* Dashboard overview: next trip + counts read as one calm card. */
  body.m1-app .status-index span {
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-caption);
    line-height: var(--m1-lh-caption);
  }
  body.m1-app .status-index strong {
    font-size: var(--m1-fs-title);
    font-weight: 600;
    line-height: var(--m1-lh-title);
  }
  body.m1-app .next-trip p {
    font-size: var(--m1-fs-body);
    line-height: var(--m1-lh-body);
  }
  body.m1-app .next-trip > span:last-child {
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-caption);
  }
  /* Auth: one card, one display size. */
  body.m1-app .auth-header h1,
  body.m1-app .auth-card > h1 {
    font-size: var(--m1-fs-display);
    line-height: var(--m1-lh-display);
  }
  /* Wizard: the progress rail is a caption row, not a second headline. */
  body.m1-app .booking-progress span {
    font-size: var(--m1-fs-caption);
  }
  body.m1-app .booking-section__index {
    font-size: var(--m1-fs-caption);
  }

  body.m1-app .booking-section__header p,
  body.m1-app .booking-context-copy,
  body.m1-app .booking-context-copy span,
  body.m1-app .booking-context-copy small {
    color: var(--m1-ink-muted);
    font-size: var(--m1-fs-caption);
    line-height: var(--m1-lh-caption);
  }
  /* Staff editor: the header no longer has an action column. */
  body.m1-app .staff-summary__actions {
    display: grid;
    gap: 8px;
  }
  @media (max-width: 1023px) {
    body.m1-app .staff-summary__actions {
      display: none;
    }
  }
}