/*
* M1 Limousine Design System
* Release: 2026.09.01.14 / m1limo-20260901-compact-mobile-density.1
*
* Principles:
* - Quiet, high-contrast enterprise surfaces instead of decorative gradients.
* - Semantic alias tokens; no page should need to know raw palette values.
* - 4px-based spacing, consistent 40/44px controls, clear focus states.
* - Responsive reflow down to 320px without horizontal page scrolling.
* - Tokens live in m1-tokens.css; this file owns reset, base elements,
*   shared components, utilities and print. It never declares tokens.
* - Page modules specialize layout in the `page` layer; the compact mobile
*   composition is the final layer, so it needs no !important.
*/
/* Layer order is declared once, in m1-tokens.css. */
/* Tokens now live in m1-tokens.css (single owner). */
@layer reset {
  html {
    min-width: 320px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }
  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  button,
  [role="button"] {
    touch-action: manipulation;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

@layer base {
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-normal);
    letter-spacing: -0.008em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 18rem;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(180deg, #eef3f8 0%, rgb(244 246 248 / 0) 100%);
  }
  main {
    flex: 1 0 auto;
    width: 100%;
  }
  a {
    color: var(--color-brand);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }
  a:hover {
    color: var(--color-brand-hover);
  }
  strong,
  b {
    font-weight: 650;
  }
  h1,
  h2,
  h3,
  h4 {
    color: var(--color-text);
    line-height: var(--line-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--font-size-3xl);
    font-weight: 720;
  }
  h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
  }
  h3 {
    font-size: var(--font-size-xl);
    font-weight: 680;
  }
  h4 {
    font-size: var(--font-size-lg);
    font-weight: 650;
  }
  p {
    color: var(--color-text-secondary);
  }
  small {
    color: var(--color-text-muted);
  }
  ::selection {
    background: var(--m1-brand-100);
    color: var(--m1-ink-900);
  }
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: max(4px, var(--radius-xs));
  }
  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 10000;
    transform: translateY(-180%);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--m1-white);
    color: var(--m1-ink-900);
    box-shadow: var(--shadow-lg);
    font-weight: 700;
    text-decoration: none;
  }
  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer components {
  /* ---------- Application shell ---------- */
  .logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
  }
  .logo img {
    width: auto;
    height: 2.75rem;
    object-fit: contain;
    /* Source artwork is dark ink on transparent ground with no reversed
    variant; invert renders it as warm white/legible against the navy nav. */
    filter: invert(1);
  }
  .mobile-menu-button {
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.06);
    color: white;
    cursor: pointer;
  }
  .mobile-menu-button svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .mobile-menu-backdrop {
    position: fixed;
    inset: var(--nav-height) 0 0;
    z-index: 998;
    display: none;
    background: rgb(8 13 23 / 0.42);
    backdrop-filter: blur(3px);
  }
  .mobile-menu {
    position: fixed;
    inset: var(--nav-height) var(--space-3) auto;
    z-index: 999;
    display: none;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
  }
  .mobile-menu.active,
  .mobile-menu-backdrop.active {
    display: block;
  }
  /* ---------- Content/layout ---------- */
  .container {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
  }
  .header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }
  .page-eyebrow {
    margin-bottom: var(--space-2);
    color: var(--color-brand);
    font-size: var(--font-size-xs);
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .header p {
    margin-top: var(--space-2);
    max-width: 48rem;
    color: var(--color-text-secondary);
  }
  /* ---------- Surfaces/cards ---------- */
  .card,
  .trip-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
  }
  .card {
    padding: var(--space-6);
  }
  .trip-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
  }
  /* ---------- Buttons ---------- */
  .btn,
  .button {
    min-height: var(--control-md);
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.58rem var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
    font-size: var(--font-size-md);
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  }
  .btn:hover,
  .button:hover {
    background: var(--color-surface-muted);
    border-color: var(--m1-ink-400);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
  }
  .btn:active,
  .button:active {
    transform: translateY(1px);
  }
  .btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }
  .btn-primary {
    border-color: var(--m1-ink-900);
    background: var(--m1-ink-900);
    color: white;
  }
  .btn-primary:hover {
    border-color: var(--m1-ink-800);
    background: var(--m1-ink-800);
    color: white;
  }
  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
  }
  .btn-sm {
    min-height: var(--control-sm);
    padding: 0.35rem var(--space-3);
    font-size: var(--font-size-xs);
  }
  .btn[disabled],
  button[disabled],
  .disabled {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
    transform: none;
  }
  /* ---------- Forms ---------- */
  .form-group {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    align-self: start;
    align-content: start;
    min-width: 0;
  }
  .form-label {
    display: inline-block;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 650;
    line-height: 1.35;
  }
  .form-label .required,
  .required {
    color: var(--color-error);
  }
  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    width: 100%;
    min-height: var(--control-lg);
    padding: 0.62rem var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: inset 0 1px 0 rgb(15 23 42 / 0.015);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  .form-input:not(textarea),
  .form-select {
    height: var(--control-lg);
    min-height: var(--control-lg);
  }
  textarea,
  .form-textarea {
    min-height: 7rem;
    resize: vertical;
  }
  select,
  .form-select {
    appearance: auto;
  }
  .form-input:hover,
  .form-select:hover,
  .form-textarea:hover,
  input:hover,
  select:hover,
  textarea:hover {
    border-color: var(--m1-ink-400);
  }
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus,
  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.14);
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
  }
  input:disabled,
  select:disabled,
  textarea:disabled {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
  }
  .form-error {
    color: var(--color-error-strong);
    font-size: var(--font-size-xs);
    font-weight: 580;
  }
  .form-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-brand);
  }
  /* ---------- Tables / responsive data ---------- */
  table {
    width: 100%;
    color: var(--color-text);
    font-size: var(--font-size-sm);
  }
  th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }
  td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
  }
  tbody tr:last-child td {
    border-bottom: 0;
  }
  tbody tr:hover {
    background: #fafbfd;
  }
  /* ---------- Badges / states ---------- */
  .badge {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0.015em;
    white-space: nowrap;
  }
  .assigned {
    border-color: #b5e5d3;
    background: var(--color-success-soft);
    color: var(--color-success-strong);
  }
  .unassigned {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }
  /* ---------- Alerts / notifications ---------- */
  .alert,
  .message {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
  }
  .message.success {
    border-color: #b5e5d3;
    background: var(--color-success-soft);
    color: var(--color-success-strong);
  }
  .message.info {
    border-color: #bae6fd;
    background: var(--color-info-soft);
    color: var(--color-info);
  }
  .message.warning {
    border-color: #f4d7a1;
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
  }
  .alert-error,
  .message.error {
    border-color: #fecaca;
    background: var(--color-error-soft);
    color: var(--color-error-strong);
  }
  .messages {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-4));
    right: var(--space-4);
    z-index: 1500;
    width: min(26rem, calc(100vw - 2rem));
    display: grid;
    gap: var(--space-2);
  }
  .message {
    align-items: flex-start;
    padding-right: 3rem;
    box-shadow: var(--shadow-lg);
    animation: m1-slide-in var(--duration-slow) var(--ease-emphasized);
  }
  /* ---------- Info/detail patterns ---------- */
  .detail-row,
  .review-item {
    display: grid;
    grid-template-columns: minmax(9rem, 0.45fr) minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .detail-row:last-child,
  .review-item:last-child {
    border-bottom: 0;
  }
  /* ---------- Empty states ---------- */
  .empty-state {
    padding: clamp(2.5rem, 7vw, 5rem) var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
    text-align: center;
  }
  .empty-state p {
    max-width: 36rem;
    margin-inline: auto;
  }
  /* ---------- Filters / tabs / pagination ---------- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
  .pagination a,
  .pagination span {
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
  }
  .pagination a:hover,
  .pagination .current {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-soft);
  }
  /* ---------- Progress / step flows ---------- */
  .progress-step {
    color: var(--color-text-muted);
  }
  .progress-step.active {
    color: var(--color-brand);
  }
  /* ---------- Public landing ----------
  Light-first hero: dark navy stays in the nav/footer for brand
  recognition, but the hero itself is a warm, light editorial surface --
  not another large dark block -- with gold used only as a thin accent. */
  .hero {
    position: relative;
    overflow: hidden;
    min-height: min(34rem, calc(100vh - var(--nav-height)));
    display: grid;
    align-items: center;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
  }
  .hero h1 {
    max-width: 16ch;
    color: var(--color-text);
    font-size: var(--font-size-display);
    font-weight: 760;
    letter-spacing: -0.045em;
  }
  .hero p {
    max-width: 42rem;
    margin-top: var(--space-5);
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 1vw + .7rem, 1.2rem);
    line-height: 1.65;
  }
  @media (max-width: 900px) {
  }
  /* ---------- Footer ---------- */
  /* ---------- Cookie consent ---------- */
  /* ---------- Error pages ---------- */
  /* ---------- Drivers ---------- */
  .trip-card {
    padding: var(--space-5);
  }
  /* ---------- Misc policy/content ---------- */
  /* Motion */
  @keyframes m1-pop {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes m1-slide-in {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes m1-slide-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes m1-progress {
    from {
      width: 100%;
    }
    to {
      width: 0;
    }
  }
}

@layer utilities {
  .icon-md {
    width: 1.125rem;
    height: 1.125rem;
  }
  /* Compatibility utilities found in templates */
  .rounded {
    border-radius: var(--radius-sm);
  }
}

@layer responsive {
  @media (max-width: 900px) {
    .mobile-menu-button {
      display: inline-flex;
    }
  }
  @media (max-width: 760px) {
    /* --nav-height's phone value lives in m1-tokens.css with every other token.
       .page-shell padding and .page-header stacking are owned by
       m1-mobile-density.css and m1-foundation.css respectively. */
    body {
      font-size: var(--font-size-md);
    }
    .container {
      width: min(100% - 1.5rem, var(--content-width));
    }
    .logo img {
      height: 2.25rem;
    }
    .form-row {
      flex-direction: column;
    }
    .detail-row,
    .review-item {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
    .hero {
      min-height: auto;
      padding-block: var(--space-16);
    }
    .messages {
      top: calc(var(--nav-height) + var(--space-3));
      right: var(--space-3);
      width: calc(100vw - 1.5rem);
    }
  }
  @media (max-width: 430px) {
    /* Card padding on phones belongs to m1-mobile-density.css. */
    .btn {
      white-space: normal;
      text-align: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  @media (forced-colors: active) {
    .btn,
    .badge,
    .card,
    .form-input,
    .form-select,
    .form-textarea {
      border: 1px solid CanvasText;
    }
    :focus-visible {
      outline: 3px solid Highlight;
    }
  }
}

@layer print {
  @media print {
    .mobile-menu,
    .mobile-menu-backdrop,
    .messages {
      display: none !important;
    }
    body {
      background: white;
      color: black;
    }
    body::before {
      display: none;
    }
    main {
      display: block;
    }
    .card,
    .trip-card {
      box-shadow: none;
      border-color: #aaa;
      break-inside: avoid;
    }
    a {
      color: black;
      text-decoration: none;
    }
  }
}

@layer components {
}

@layer components {
  .m1-datetime-field {
    position: relative;
    width: 100%;
    min-width: 0;
  }
  .m1-datetime-field > input[type="hidden"] {
    display: none;
  }
  .m1-datetime-trigger {
    width: 100%;
    height: var(--control-lg);
    min-height: var(--control-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  }
  .m1-datetime-trigger:hover {
    border-color: var(--m1-ink-400);
  }
  .m1-datetime-trigger:focus-visible,
  .m1-datetime-field.is-open .m1-datetime-trigger {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgb(37 99 235 / .14);
  }
  .m1-datetime-trigger.has-value {
    color: var(--color-text);
  }
  .m1-datetime-trigger__icon {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
  }
  /* Rendered as a body-level overlay (JS reparents it to document.body on
  open), never as a descendant of .booking-section or any other
  overflow:hidden container. position:fixed + JS-computed top/left let it
  escape card/modal/viewport-edge clipping with above/below collision
  flipping; visibility stays hidden until JS finishes positioning it, so
  it never flashes at the default top:0/left:0. */
  .m1-datetime-panel {
    position: fixed;
    z-index: 1600;
    top: 0;
    left: 0;
    width: min(22rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
  }
  .m1-datetime-panel.is-positioned {
    visibility: visible;
  }
  .m1-calendar-header {
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .m1-calendar-title {
    text-align: center;
    font-size: var(--font-size-sm);
  }
  .m1-icon-button {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.4rem;
  }
  .m1-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .2rem;
  }
  .m1-calendar-weekday {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 650;
    padding: .35rem 0;
  }
  .m1-calendar-day {
    min-width: 0;
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-sm);
  }
  .m1-calendar-day:hover:not(:disabled) {
    background: var(--color-surface-subtle);
  }
  .m1-calendar-day.is-outside {
    color: var(--color-text-muted);
  }
  .m1-calendar-day.is-today {
    box-shadow: inset 0 0 0 1px var(--color-brand);
  }
  .m1-calendar-day.is-selected {
    background: var(--color-brand);
    color: #fff;
    box-shadow: none;
  }
  .m1-calendar-day:disabled {
    opacity: .35;
    cursor: not-allowed;
  }
  .m1-calendar-day:focus-visible,
  .m1-icon-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
  }
  .m1-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .m1-time-title {
    margin-bottom: var(--space-3);
    font-weight: 700;
  }
  .m1-time-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .m1-time-select {
    display: grid;
    gap: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 650;
  }
  .m1-time-select select {
    width: 100%;
  }
}

/* 2026.08.29.2 migration state hooks. Kept in the shared component layer so
legacy pages can reflow through the new system without relying on inline CSS. */
@layer components {
  .form-help {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
  }
  #next-reservation-container {
    position: relative;
    min-height: 2.8rem;
    flex: 1;
  }
  /* Initial visibility controlled by page JS after interaction. */
  #hoursBookedGroup,
  #returnTripSection,
  #stopsSection,
  #flightSection,
  #returnFlightSection,
  #capacityError,
  #pickup_date_realtime_error,
  #pickup_time_realtime_error,
  #autoFillNotice,
  #passenger_edit_mode,
  #review_hours_booked_row,
  #review_flight_row,
  #review_notes_row,
  #pickup_edit_mode,
  #review_return_section,
  #review_return_flight_row,
  #editMenu,
  #notification-edit {
    display: none;
  }
}

@layer base {
  body:not(.landing-page) > main {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  }
  body.landing-page > main {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

@layer responsive {
  @media (max-width: 760px) {
    body:not(.landing-page) > main {
      /* width is owned by m1-foundation's `body.m1-app main` rule. */
      padding-block: var(--space-5) var(--space-10);
    }
  }
}

@layer components {
  .icon-button {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-brand);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }
  .icon-button:hover {
    border-color: var(--color-border-strong);
    background: var(--color-brand-soft);
    color: var(--color-brand-hover);
  }
  .icon-button svg {
    width: 1rem;
    height: 1rem;
  }
}

@layer responsive {
  @media (max-width: 760px) {
    .landing-page .hero h1 {
      margin-inline: auto;
    }
    .landing-page .hero p {
      margin-inline: auto;
    }
  }
}

@layer components {
  body:not(.landing-page) main h1 {
    font-size: var(--font-size-3xl);
    font-weight: 720;
    letter-spacing: var(--tracking-tight);
  }
  body:not(.landing-page) main h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
  }
  body:not(.landing-page) main h3 {
    font-size: var(--font-size-lg);
    font-weight: 680;
  }
  .empty-state h3 {
    margin-top: var(--space-4);
  }
}

@layer utilities {
}

@layer components {
  /* Shared location-type selector used by both Pick-up and Drop-off. */
}

@layer responsive {
  /* Phone control ergonomics (16px text, 44px targets) are owned end-to-end
     by m1-mobile-density.css; the duplicate block that used to live here at
     720px could never win against it. */
  @media (max-width: 760px) {
    .form-group {
      min-width: 0;
    }
  }
  @media (max-width: 520px) {
    .m1-datetime-panel {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      width: 100%;
      max-height: min(78vh, 40rem);
      overflow: auto;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: var(--space-5);
    }
    .m1-picker-actions .btn {
      flex: 1;
      min-height: 2.75rem;
    }
    .m1-time-controls {
      grid-template-columns: 1fr;
    }
  }
}

/* M1 Snap Rail
* A native horizontal overflow component for small-screen finite choice sets.
* It uses browser scrolling + CSS Scroll Snap instead of drag emulation.
* Controls are manual only; the component never auto-rotates content. */
@layer components {
  .m1-snap-carousel {
    min-width: 0;
  }
  .m1-snap-carousel__toolbar,
  .m1-snap-carousel__progress {
    display: none;
  }
  @media (max-width: 760px) {
    .m1-snap-carousel {
      --m1-snap-gap: 10px;
      --m1-snap-card-width: 86%;
      --m1-snap-control: 40px;
      display: grid;
      min-width: 0;
      gap: 8px;
    }
    .m1-snap-carousel__toolbar {
      display: flex;
      min-height: var(--m1-snap-control);
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .m1-snap-carousel__hint {
      color: var(--m1-business-accent-strong);
      font-size: .61rem;
      font-weight: 720;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .m1-snap-carousel__controls {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 6px;
    }
    .m1-snap-carousel__count {
      min-width: 34px;
      color: var(--color-text-muted);
      font-size: .62rem;
      font-variant-numeric: tabular-nums;
      text-align: center;
    }
    .m1-snap-carousel__button {
      display: grid;
      width: var(--m1-snap-control);
      height: var(--m1-snap-control);
      place-items: center;
      padding: 0;
      border: 1px solid var(--color-border);
      border-radius: 10px;
      background: var(--color-surface);
      color: var(--color-text);
      font: inherit;
      font-size: .9rem;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
    }
    .m1-snap-carousel__button:hover:not(:disabled) {
      border-color: var(--m1-business-accent-border);
      background: var(--m1-business-accent-soft);
    }
    .m1-snap-carousel__button:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--m1-business-accent-strong) 34%, transparent);
      outline-offset: 2px;
    }
    .m1-snap-carousel__button:disabled {
      cursor: default;
      opacity: .32;
    }
    .m1-snap-carousel__track {
      display: flex;
      gap: var(--m1-snap-gap);
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 1px 0 5px;
      overscroll-behavior-inline: contain;
      scroll-behavior: smooth;
      scroll-padding-inline: 0;
      scroll-snap-type: inline mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .m1-snap-carousel__track::-webkit-scrollbar {
      display: none;
    }
    .m1-snap-carousel__slide {
      flex: 0 0 var(--m1-snap-card-width);
      scroll-snap-align: start;
      scroll-snap-stop: normal;
    }
    .m1-snap-carousel__progress {
      display: flex;
      min-height: 4px;
      align-items: center;
      gap: 4px;
    }
    .m1-snap-carousel__progress > span {
      width: 15px;
      height: 2px;
      border-radius: 999px;
      background: #d7d9dc;
      transition: width var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
    }
    .m1-snap-carousel__progress > span.is-current {
      width: 26px;
      background: var(--m1-business-accent-strong);
    }
  }
  @media (max-width: 360px) {
    .m1-snap-carousel {
      --m1-snap-card-width: 88%;
      --m1-snap-gap: 8px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .m1-snap-carousel__track {
      scroll-behavior: auto;
    }
    .m1-snap-carousel__progress > span {
      transition: none;
    }
  }
}

/* 2026.09.01.13 — Adaptive operations primitives.
* Shared by staff reservation workspaces and administration surfaces.
* These are structural components, not page patches: page modules choose
* which fields occupy each slot while this layer owns density, interaction,
* responsive reflow, focus, and overflow behavior.
*/
@layer components {
  .m1-data-surface {
    overflow: clip;
    border: 1px solid var(--color-border);
    border-radius: var(--m1-radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }
  .m1-worklist {
    --m1-worklist-columns: minmax(7rem, .8fr) minmax(7.5rem, .82fr) minmax(13rem, 1.65fr) minmax(9rem, 1fr) minmax(8rem, .9fr) minmax(8rem, .92fr) 2.5rem;
    min-width: 0;
  }
  .m1-worklist__head,
  .m1-worklist__row {
    display: grid;
    grid-template-columns: var(--m1-worklist-columns);
    min-width: 0;
    align-items: center;
    column-gap: var(--space-3);
  }
  .m1-worklist__head {
    position: sticky;
    top: var(--m1-worklist-head-top, 0px);
    z-index: 5;
    min-height: 2.4rem;
    padding-inline: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: .66rem;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .065em;
  }
  .m1-worklist__row {
    position: relative;
    min-height: 5.15rem;
    padding: .7rem var(--space-4);
    color: inherit;
    border-bottom: 1px solid var(--color-border-subtle);
    text-decoration: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
  }
  .m1-worklist__row:last-child {
    border-bottom: 0;
  }
  .m1-worklist__row:hover {
    background: var(--color-surface-subtle);
  }
  .m1-worklist__row:focus-visible {
    z-index: 1;
    outline: 3px solid color-mix(in srgb, var(--color-focus) 30%, transparent);
    outline-offset: -3px;
  }
  .m1-worklist__row[data-updated="true"] {
    box-shadow: inset 3px 0 0 var(--color-business-accent-strong);
  }
  .m1-worklist__row[data-past="true"] {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-surface-subtle) 65%, transparent);
  }
  .m1-worklist__cell {
    min-width: 0;
  }
  .m1-worklist__cell--schedule strong,
  .m1-worklist__cell--identity strong,
  .m1-worklist__cell--route strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: .84rem;
    font-weight: 680;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m1-worklist__cell--schedule span,
  .m1-worklist__cell--identity span,
  .m1-worklist__cell--route span,
  .m1-worklist__cell--service span,
  .m1-worklist__cell--driver span {
    display: block;
    min-width: 0;
    margin-top: .16rem;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: .72rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m1-worklist__cell--schedule time {
    font-variant-numeric: tabular-nums;
  }
  .m1-worklist__cell--schedule time strong {
    font-size: 1rem;
    letter-spacing: -.015em;
  }
  .m1-worklist__reference {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .015em;
  }
  .m1-worklist__updated {
    color: var(--color-business-accent-strong);
    font-size: .65rem;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .055em;
  }
  .m1-worklist__cell--action {
    display: grid;
    place-items: center;
  }
  .m1-worklist__chevron {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-business-accent-strong);
    background: var(--color-surface);
    font-size: 1rem;
  }
  .m1-worklist__linked {
    display: inline-flex;
    min-height: 1.35rem;
    align-items: center;
    margin-top: .3rem;
    padding: .12rem .35rem;
    border: 1px solid var(--color-business-accent-border);
    border-radius: var(--radius-pill);
    color: var(--color-business-accent-strong);
    background: var(--color-business-accent-soft);
    font-size: .64rem;
    font-weight: 700;
    white-space: nowrap;
  }
  @media (max-width: 900px) {
    .m1-data-surface {
      border-radius: var(--m1-radius-md);
    }
    .m1-worklist__head {
      display: none;
    }
    .m1-worklist {
      display: grid;
    }
    .m1-worklist__row {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "schedule status" "identity identity" "route route" "meta meta";
      min-height: 0;
      gap: .26rem .55rem;
      padding: .56rem .68rem .6rem;
    }
    .m1-worklist__cell--schedule {
      grid-area: schedule;
      display: flex;
      min-width: 0;
      align-items: baseline;
      gap: .4rem;
    }
    .m1-worklist__cell--schedule time {
      display: flex;
      min-width: 0;
      align-items: baseline;
      gap: .32rem;
    }
    .m1-worklist__cell--schedule time strong {
      display: inline;
      font-size: .91rem;
    }
    .m1-worklist__cell--schedule span {
      margin: 0;
      font-size: .64rem;
      white-space: nowrap;
    }
    /* The passenger name is the primary scanning key on a phone: give it the
       full row instead of capping it at 50% next to the reference, which
       truncated most real names to "Executive ..." / "Daniel Br...". */
    .m1-worklist__cell--identity {
      grid-area: identity;
      display: grid;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      column-gap: .4rem;
    }
    .m1-worklist__cell--identity strong {
      grid-column: 1;
      min-width: 0;
      font-size: .82rem;
    }
    .m1-worklist__cell--identity .m1-worklist__reference {
      grid-column: 2;
      margin: 0;
      white-space: nowrap;
    }
    .m1-worklist__cell--identity .m1-worklist__updated {
      grid-column: 1 / -1;
      margin: 0;
    }
    .m1-worklist__cell--route {
      grid-area: route;
      min-width: 0;
      pointer-events: none;
    }
    /* The whole row is already a link; the chevron only costs horizontal
       space that the route line needs on a phone. */
    .m1-worklist__cell--action {
      display: none;
    }
    .m1-worklist__route-mobile {
      overflow: hidden;
      color: var(--color-text-secondary);
      font-size: .68rem;
      font-weight: 560;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .m1-worklist__route-mobile b {
      color: var(--color-business-accent-strong);
      font-weight: 700;
    }
    .m1-worklist__cell--service {
      grid-area: meta;
      display: flex;
      min-width: 0;
      align-items: center;
      gap: .32rem;
    }
    .m1-worklist__cell--service strong {
      color: var(--color-text-secondary);
      font-size: .65rem;
      font-weight: 680;
    }
    .m1-worklist__cell--service span {
      margin: 0;
      font-size: .63rem;
    }
    .m1-worklist__cell--driver {
      grid-area: meta;
      justify-self: end;
      align-self: center;
      max-width: 43%;
    }
    .m1-worklist__cell--driver strong {
      display: none;
    }
    .m1-worklist__cell--driver span {
      margin: 0;
      font-size: .63rem;
    }
    .m1-worklist__cell--status {
      grid-area: status;
      justify-self: end;
      align-self: start;
    }
    .m1-worklist__cell--action {
      grid-area: action;
      align-self: center;
    }
    .m1-worklist__chevron {
      width: 1.65rem;
      height: 1.65rem;
      font-size: .82rem;
    }
    .m1-worklist__reference {
      font-size: .6rem;
    }
    .m1-worklist__updated {
      font-size: .58rem;
    }
    .m1-worklist__linked {
      min-height: 1rem;
      margin-top: .1rem;
      padding-block: .06rem;
      font-size: .56rem;
    }
  }
  @media (max-width: 360px) {
    .m1-worklist__row {
      padding-inline: .65rem;
    }
    .m1-worklist__cell--driver {
      display: none;
    }
    .m1-worklist__cell--identity strong {
      padding-right: 0;
    }
    .m1-worklist__cell--identity span {
      max-width: 100%;
    }
  }
}

@layer components {
  .m1-worklist__mobile-only {
    display: none !important;
  }
  @media (max-width: 900px) {
    .m1-worklist__desktop-only {
      display: none !important;
    }
    .m1-worklist__mobile-only {
      display: block !important;
    }
  }
}

/* ------------------------------------------------------------------ *
 * Operational toolbar, filter sheet and worklist heading.
 *
 * Shared components, not page furniture: any operations list can adopt
 * them. The toolbar is one compact row on a pointer device and collapses
 * to "search + Filters" on a phone, where the secondary fields move into
 * a sheet instead of stacking down the page. Page stylesheets compose
 * these; they do not restyle them.
 * ------------------------------------------------------------------ */
@layer components {
  .m1-worklist-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 0.6rem;
  }
  .m1-worklist-heading h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }
  .m1-worklist-heading__count {
    color: var(--m1-ink-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .m1-worklist-heading__aside {
    color: var(--m1-ink-muted);
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .m1-toolbar {
    display: grid;
    /* Pages compose the column rhythm; the component owns the behaviour. */
    grid-template-columns: var(--m1-toolbar-columns,
                               minmax(15rem, 1fr) 9.25rem 9.25rem 10.5rem auto);
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0.55rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .m1-toolbar__search {
    display: block;
    min-width: 0;
  }
  .m1-toolbar__group,
  .m1-toolbar__group-panel,
  .m1-toolbar__group-fields {
    display: contents;
  }
  .m1-toolbar__group-backdrop,
  .m1-toolbar__group-head,
  .m1-toolbar__group-foot,
  .m1-toolbar__filters {
    display: none;
  }
  .m1-toolbar__field {
    min-width: 0;
  }
  .m1-toolbar .form-input,
  .m1-toolbar .form-select,
  .m1-toolbar .m1-datetime-trigger {
    height: var(--control-md);
    min-height: var(--control-md);
    padding-inline: 0.65rem;
    font-size: 0.88rem;
  }
  .m1-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .m1-toolbar__actions .button {
    height: var(--control-md);
    min-height: var(--control-md);
    padding-inline: 1rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Active filters: the operator must see at a glance why this list is
     shorter than the full one, and be able to undo one condition. */
  .m1-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
  }
  .m1-filter-chips__label {
    color: var(--m1-ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .m1-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.85rem;
    padding: 0.1rem 0.3rem 0.1rem 0.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
  }
  .m1-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--radius-pill);
    color: var(--m1-ink-muted);
    font-size: 1rem;
    line-height: 1;
  }
  .m1-filter-chip:hover .m1-filter-chip__remove,
  .m1-filter-chip:focus-visible .m1-filter-chip__remove {
    background: var(--color-surface);
    color: var(--color-text);
  }
  .m1-filter-chips__clear {
    color: var(--m1-ink-muted);
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .m1-filter-chips__clear:hover {
    color: var(--color-text);
  }

  /* The toolbar stays reachable while an operator scrolls a long list.
     Only the toolbar sticks; summary cards and column headers do not. */
  .m1-toolbar--sticky {
    position: sticky;
    top: var(--m1-sticky-toolbar-top, 0px);
    z-index: 6;
    box-shadow: 0 6px 18px -14px rgb(15 23 42 / 0.5);
  }

  @media (max-width: 900px) {
    .m1-toolbar {
      grid-template-columns: var(--m1-toolbar-mobile-columns, 1fr auto);
      gap: 0.4rem;
      padding: 0.35rem;
    }
    .m1-toolbar .form-input {
      height: var(--control-lg);
      min-height: var(--control-lg);
      font-size: 16px;
    }
    .m1-toolbar__filters {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      height: var(--control-lg);
      min-height: var(--control-lg);
      padding-inline: 0.85rem;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      color: var(--color-text);
      font-size: 0.85rem;
      font-weight: 650;
      white-space: nowrap;
    }
    .m1-toolbar__filters[data-active="true"] {
      border-color: var(--color-accent);
      background: var(--color-accent-soft);
    }
    .m1-toolbar__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.15rem;
      height: 1.15rem;
      padding-inline: 0.25rem;
      border-radius: var(--radius-pill);
      background: var(--m1-ink-900);
      color: var(--m1-white);
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
    }
    .m1-toolbar--sticky {
      position: static;
      box-shadow: none;
    }

    /* Secondary filters become a bottom sheet rather than a stacked form:
       it takes only the height its fields need, the worklist stays visible
       behind the scrim, and Apply sits under the operator's thumb. */
    .m1-toolbar__group {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      background: transparent;
    }
    .m1-toolbar__group[data-open="true"] {
      display: block;
    }
    .m1-toolbar__group-backdrop {
      position: absolute;
      inset: 0;
      display: block;
      background: rgb(15 23 42 / 0.45);
    }
    .m1-toolbar__group-panel {
      position: absolute;
      inset: auto 0 0 0;
      display: grid;
      grid-template-rows: auto auto auto;
      max-height: 85vh;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      background: var(--color-surface);
      box-shadow: 0 -18px 40px -24px rgb(15 23 42 / 0.6);
      animation: m1-sheet-rise 180ms ease-out;
    }
    @media (prefers-reduced-motion: reduce) {
      .m1-toolbar__group-panel {
        animation: none;
      }
    }
    .m1-toolbar__group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: 0.8rem 1rem;
      border-bottom: 1px solid var(--color-border);
    }
    .m1-toolbar__group-head h2 {
      margin: 0;
      font-size: 0.98rem;
    }
    .m1-toolbar__group-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--control-lg);
      height: var(--control-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      color: var(--color-text);
      font-size: 1.15rem;
      line-height: 1;
    }
    .m1-toolbar__group-fields {
      display: grid;
      gap: 0.7rem;
      align-content: start;
      padding: 0.9rem 1rem;
      overflow-y: auto;
    }
    .m1-toolbar__group-foot {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.5rem;
      padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--color-border);
    }
    .m1-toolbar__group-foot .button {
      width: 100%;
      min-height: var(--control-lg);
    }
    .m1-toolbar__actions {
      display: none;
    }
    .m1-toolbar__group .form-input,
    .m1-toolbar__group .form-select,
    .m1-toolbar__group .m1-datetime-trigger {
      height: var(--control-lg);
      min-height: var(--control-lg);
      font-size: 16px;
    }
  }

  /* While a sheet owns the screen, nothing behind it should scroll or
     compete for attention, including the bottom navigation dock. */
  body.m1-sheet-open {
    overflow: hidden;
  }
  body.m1-sheet-open .m1-mobile-dock {
    display: none !important;
  }
}

@layer components {
  @keyframes m1-sheet-rise {
    from {
      transform: translateY(12%);
      opacity: 0.6;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

@layer components {
  /* Reusing a journey is announced on the reservation form so the customer
     knows why fields are already filled and what is still theirs to enter. */
  .journey-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .6rem;
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--color-accent-border);
    border-radius: var(--m1-radius-md);
    background: var(--color-accent-soft);
    font-size: .86rem;
  }
  .journey-banner strong {
    font-weight: 700;
  }
  .journey-banner__hint {
    color: var(--m1-ink-muted);
  }
}

/* ------------------------------------------------------------------ *
 * Static select.
 *
 * The counterpart to the combobox below: a short fixed option list (a
 * status filter, an action filter) does not need a search field, but the
 * owner does not want the raw browser <select> sheet either. One shared
 * primitive for every M1-owned short list -- data-m1-select opts a native
 * select in. The select stays in the form and stays the submitted value,
 * so the page works with JavaScript off; this only replaces what the
 * operator sees and touches.
 * ------------------------------------------------------------------ */
@layer components {
  .m1-select {
    position: relative;
    display: block;
    min-width: 0;
  }
  .m1-select select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .m1-select__trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: var(--control-lg);
    padding-inline: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
  }
  .m1-select__trigger:hover {
    border-color: var(--color-border-strong);
  }
  .m1-select__trigger:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: 1px;
  }
  .m1-select[data-open="true"] .m1-select__trigger {
    border-color: var(--color-accent-strong);
  }
  .m1-select[data-disabled="true"] .m1-select__trigger {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .m1-select.is-error .m1-select__trigger {
    border-color: var(--color-danger-border);
  }
  .m1-select__value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .m1-select__chevron {
    flex: none;
    color: var(--m1-ink-muted);
    font-size: 0.7rem;
    line-height: 1;
  }
  .m1-select__list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 0.25rem);
    max-height: var(--m1-popover-max-height);
    margin: 0;
    padding: 0.2rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--m1-popover-radius);
    background: var(--color-surface);
    box-shadow: var(--m1-popover-elevation);
  }
  .m1-select__list[data-position="above"] {
    top: auto;
    bottom: calc(100% + 0.25rem);
  }
  .m1-select:not([data-open="true"]) .m1-select__list {
    display: none;
  }
  .m1-select__option {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.88rem;
    cursor: pointer;
  }
  .m1-select__option[aria-selected="true"] {
    font-weight: 640;
  }
  .m1-select__option[aria-selected="true"]::before {
    content: "\2713";
    margin-inline-end: 0.5rem;
    color: var(--color-accent-strong);
  }
  .m1-select__option:not([aria-selected="true"])::before {
    content: "";
    display: inline-block;
    width: 1rem;
    margin-inline-end: 0.5rem;
  }
  .m1-select__option.is-active {
    background: var(--color-accent-soft);
  }
  .m1-select__option.is-disabled {
    color: var(--m1-ink-muted);
    cursor: not-allowed;
  }

  @media (max-width: 900px) {
    .m1-select__option {
      min-height: 2.75rem;
      padding: 0.55rem 0.6rem;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .m1-select[data-open="true"] .m1-select__list {
      animation: m1-combobox-open 120ms ease-out;
    }
  }
}

/* ------------------------------------------------------------------ *
 * Searchable combobox.
 *
 * A shared primitive, not a customer-picker hack: any <select> that grows
 * past a handful of options can opt in with data-m1-combobox. The native
 * select stays in the form and stays the value, so the page works with
 * JavaScript off and the server sees no difference. What changes is that a
 * dispatcher can type a name instead of scrolling a full-screen browser
 * sheet on a phone.
 * ------------------------------------------------------------------ */
@layer components {
  .m1-combobox {
    position: relative;
    display: block;
    min-width: 0;
  }
  .m1-combobox select {
    /* Kept in the form and kept accessible to assistive tech through the
       labelled input below; simply not the thing the operator touches.
       min-height has to be reset explicitly: the form primitives set one on
       every select, and it would otherwise keep this at full control height. */
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .m1-combobox__control {
    position: relative;
    display: flex;
    align-items: center;
  }
  .m1-combobox__input {
    width: 100%;
    padding-inline-end: 2.2rem;
    text-overflow: ellipsis;
  }
  .m1-combobox__toggle {
    position: absolute;
    inset-inline-end: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fills the control height so it is a real target, not a 32px dot inside
       a 40px field. */
    width: 2.25rem;
    height: calc(var(--control-lg) - 0.3rem);
    min-height: 2.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--m1-ink-muted);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
  }
  .m1-combobox__toggle:hover {
    color: var(--color-text);
  }
  .m1-combobox__clear {
    position: absolute;
    inset-inline-end: 2.05rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--m1-ink-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
  }
  .m1-combobox[data-has-value="true"] .m1-combobox__clear {
    display: inline-flex;
  }
  .m1-combobox__clear:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }

  .m1-combobox__list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 0.25rem);
    max-height: 17rem;
    margin: 0;
    padding: 0.2rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 18px 38px -22px rgb(15 23 42 / 0.55);
  }
  .m1-combobox:not([data-open="true"]) .m1-combobox__list {
    display: none;
  }
  .m1-combobox__option {
    display: grid;
    gap: 0.05rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .m1-combobox__option[aria-selected="true"],
  .m1-combobox__option.is-active {
    background: var(--color-accent-soft);
  }
  .m1-combobox__option-primary {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 620;
    line-height: 1.25;
  }
  .m1-combobox__option-secondary {
    color: var(--m1-ink-muted);
    font-size: 0.76rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .m1-combobox__option mark {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .m1-combobox__empty {
    padding: 0.55rem;
    color: var(--m1-ink-muted);
    font-size: 0.82rem;
  }
  .m1-combobox__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  @media (max-width: 900px) {
    .m1-combobox__input {
      font-size: 16px;
    }
    .m1-combobox__list {
      max-height: 14rem;
    }
    .m1-combobox__option {
      padding: 0.55rem;
      min-height: 2.75rem;
      align-content: center;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .m1-combobox[data-open="true"] .m1-combobox__list {
      animation: m1-combobox-open 120ms ease-out;
    }
  }
  @keyframes m1-combobox-open {
    from {
      transform: translateY(-4px);
      opacity: 0.4;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* ------------------------------------------------------------------ *
 * Cookie consent.
 *
 * A quiet bar, not a wall. Accept and reject sit next to each other at the
 * same size, because a choice presented unevenly is not a choice. The panel
 * never blocks the page and never covers the primary action.
 * ------------------------------------------------------------------ */
@layer components {
  .m1-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    padding: 0.6rem;
    background: color-mix(in srgb, var(--m1-ink-900) 96%, transparent);
    color: var(--m1-white);
    box-shadow: 0 -18px 40px -28px rgb(15 23 42 / 0.8);
  }
  .m1-consent[hidden] {
    display: none;
  }
  .m1-consent__panel,
  .m1-consent__preferences {
    width: min(100%, 68rem);
    margin-inline: auto;
  }
  .m1-consent__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1.25rem;
  }
  .m1-consent__title {
    margin: 0 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 700;
  }
  .m1-consent__copy p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.5;
  }
  .m1-consent__meta {
    margin-top: 0.15rem !important;
    font-size: 0.76rem !important;
  }
  .m1-consent__copy a {
    color: var(--m1-white);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .m1-consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }
  /* The consent bar sits on navy, so its quiet action needs a light label.
     Expressed as a state of the bar rather than as a redefinition of the
     shared button variant, which m1-foundation.css owns. */
  .m1-consent__actions [class*="quiet"] {
    color: #cbd5e1;
  }
  .m1-consent__preferences {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.6rem;
    margin-top: 0.6rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }
  .m1-consent__preferences[hidden] {
    display: none;
  }
  .m1-consent__subtitle {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cbd5e1;
  }
  .m1-consent__option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    padding: 0.35rem 0;
    cursor: pointer;
  }
  .m1-consent__option--locked {
    cursor: default;
    opacity: 0.75;
  }
  .m1-consent__option strong {
    display: block;
    font-size: 0.84rem;
  }
  .m1-consent__option small {
    display: block;
    color: #b6c2d1;
    font-size: 0.76rem;
    line-height: 1.45;
  }
  .m1-consent__option input {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin-top: 0.15rem;
  }
  .m1-consent__preferences-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.35rem;
  }
  .m1-footer__preferences {
    /* Reads as one of the footer links, but it is a button, so it carries a
       real hit area rather than only the height of its text. */
    display: inline-flex;
    align-items: center;
    min-height: var(--control-quiet);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (max-width: 760px) {
    .m1-consent {
      padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    }
    .m1-consent__panel {
      grid-template-columns: minmax(0, 1fr);
    }
    .m1-consent__actions .button {
      flex: 1 1 auto;
      justify-content: center;
    }
  }
  /* One interaction owns the bottom of a phone screen at a time. While the
     cookie choice is on screen the navigation dock stands down; it returns
     the moment the choice is made. Nudging it upwards instead left the dock
     overlapping the buttons and swallowing taps. */
  body[data-cookie-consent-state="unanswered"] .m1-mobile-dock {
    display: none !important;
  }
  .m1-consent {
    z-index: 90;
  }
}

/* ------------------------------------------------------------------ *
 * m1-timeline — one owner for every chronological event list: the
 * reservation "Recent activity" panel, and (rendered the same way from a
 * different data source) the Admin's recent-actions list. A title and its
 * metadata are laid out in a grid with an explicit gap, never adjacent
 * inline text relying on a stray space in the template.
 * ------------------------------------------------------------------ */
@layer components {
  .m1-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .m1-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--m1-timeline-gutter) 1fr;
    column-gap: .75rem;
    padding-bottom: var(--m1-timeline-item-gap);
  }
  .m1-timeline__item:last-child {
    padding-bottom: 0;
  }
  .m1-timeline__item:not(:last-child)::before {
    position: absolute;
    top: 1.1rem;
    bottom: 0;
    left: calc(var(--m1-timeline-gutter) / 2 - .5px);
    width: 1px;
    content: '';
    background: var(--m1-border);
  }
  .m1-timeline__marker {
    z-index: 1;
    justify-self: center;
    width: var(--m1-timeline-marker);
    height: var(--m1-timeline-marker);
    margin-top: .35rem;
    border: 2px solid var(--m1-business-accent-strong);
    border-radius: 50%;
    background: var(--m1-surface);
  }
  .m1-timeline__content {
    display: grid;
    gap: var(--m1-timeline-title-meta-gap);
    min-width: 0;
  }
  .m1-timeline__title {
    color: var(--color-text);
    font-size: .92rem;
    font-weight: 640;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .m1-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
    color: var(--m1-ink-subtle);
    font-size: .78rem;
    line-height: 1.4;
  }
  .m1-timeline__meta-sep {
    color: var(--m1-border-strong);
  }
  @media (min-width: 700px) {
    /* Enough horizontal room that title and metadata can share one row
       without crowding -- still an explicit grid gap, not concatenation. */
    .m1-timeline--wide .m1-timeline__content {
      grid-template-columns: auto 1fr;
      align-items: baseline;
      column-gap: 1rem;
    }
  }
}