/* =========================================================================
   Cocoa Beach Express - narrow screens

   Most customers book and check their trip on a phone, often standing at an
   airport curb. On a phone the fare summary drops below the form, the menu
   folds behind a button, and every button is big enough for a thumb.
   ========================================================================= */

@media (max-width: 68rem) {
    .site-nav a { padding: 8px 10px; font-size: var(--fs-ui); }
    .site-nav a.nav-call { display: none; }
    .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 60rem) {
    :root { --shell: min(1200px, calc(100% - 36px)); }

    .nav-toggle { display: block; order: 2; margin-left: 0; }
    .brand { margin-right: auto; }
    .unread-badge { order: 1; }
    .site-nav { order: 3; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0 0 14px;
    }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 13px 16px; font-size: 16px; }
    .site-nav a.nav-call { display: flex; margin: 8px 0 0; }
    .header-inner { min-height: 66px; gap: 12px; }
    .brand img { width: 160px; }

    .hero { padding: 44px 0 68px; }
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    .steps { grid-template-columns: minmax(0, 1fr); }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .band { padding: 52px 0; }

    .booking-form { grid-template-columns: minmax(0, 1fr); }
    .booking-side { position: static; }
    .messages-layout { grid-template-columns: minmax(0, 1fr); }
    .messages-compose { position: static; }

    .trip-find { grid-template-columns: minmax(0, 1fr); }
    .admin-split, #locations-root .admin-split { grid-template-columns: minmax(0, 1fr); }
    .sql-console, .tpl-console { grid-template-columns: minmax(0, 1fr); }
    .sql-schema, .tpl-files, .pick-list { max-height: 22rem; }
}

@media (max-width: 40rem) {
    :root { --shell: calc(100% - 28px); }

    body { font-size: 16px; }
    .test-banner { font-size: 11px; }

    .page-head { padding: 22px 0 18px; }
    .panel, .staff-section, .pickup-card { padding: 20px; border-radius: var(--r); }
    .auth-panel { padding: 26px 20px; }
    .cta-inner { padding: 30px 24px; }

    .hero-card { padding: 20px; }
    .hero-facts strong { font-size: 26px; }

    .button { padding: 14px 22px; }
    .button-small { padding: 10px 16px; }
    .hero-actions .button, .button-row .button, .step-actions .button { flex: 1 1 auto; }
    .step-actions { flex-direction: column-reverse; }

    .progress li { flex-direction: column; gap: 4px; font-size: var(--fs-label); text-align: center; padding: 8px 4px; }
    .place-choices { gap: 8px; }
    .place-choice { padding: 14px 4px 10px; font-size: var(--fs-ui); }
    .place-choice img { width: 36px; height: 36px; }

    .review-list > div { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .leg-remove { position: static; margin: 0 0 12px; }
    .leg-add { padding: 18px; }
    .leg-add-buttons .button { flex: 1 1 100%; }

    .trip-card-head, .trip-leg, .trip-card-foot { padding-left: 18px; padding-right: 18px; }
    .trip-cancel { justify-content: flex-start; }
    .trip-cancel .note { text-align: left; }

    .request-item { flex-direction: column; }
    .request-actions { flex-direction: row; flex-wrap: wrap; }
    .route-point { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .schedule-periods { width: 100%; }
    .schedule-periods .tab { flex: 1 1 auto; }
    .schedule-search { max-width: none; }
    .schedule-booking-find { max-width: none; }
    .booking-id-form .button { width: 100%; }
    .booking-detail-head, .booking-trip-detail header { align-items: flex-start; }
    .option-grid { grid-template-columns: minmax(0, 1fr); }
    .table-pagination { justify-content: center; }

    .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 40px; }

    /* Today's pickups become cards rather than a table that scrolls sideways. */
    .staff-section .data-table thead { display: none; }
    .staff-section .data-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .staff-section .data-table td { display: block; padding: 2px 0; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* A driver or manager may still print today's list. */
@media print {
    .test-banner, .site-header, .site-footer, .editor-bar, .breadcrumb-bar, .button, .button-row, .nav-toggle { display: none !important; }
    body { background: #fff; }
    .panel, .staff-section, .trip-card { box-shadow: none; border: 1px solid #ccc; }
    .rate-card-tools { display: none !important; }
    .rate-main { min-height: 0; padding: 0; }
}