/* ========================
   RESPONSIVE - Mobile-first media queries (M3 tokens)
   ======================== */

/* ---- Small mobile - below 480px ---- */
@media (max-width: 480px) {
  /* Patrol page: two stat columns */
  .patrol-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patrol-stats .patrol-stat:first-child {
    grid-column: 1 / -1;
  }

  .hero__title {
    font-size: var(--md-headline-large-size);
    line-height: var(--md-headline-large-line);
  }

  /* The bottom padding stays layout.css's: it keeps the copy above the hero's camera timeline
     and above the consent banner while that is shown (--ph-consent-h, consent-banner.js) */
  .section--hero-full {
    padding-top: 100px;
    padding-left: var(--md-spacing-4);
    padding-right: var(--md-spacing-4);
    min-height: 100svh;
  }


  .hero__headline {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  /* A short phone (and the consent banner on it): the copy starts right under the header and
     goes without its badge, so its buttons stay above the banner */
  @media (max-height: 700px) {
    .section--hero-full {
      padding-top: var(--md-spacing-4);
    }

    .hero__badge {
      display: none;
    }
  }

  /* Ref-grid: prevent 300px minmax from overflowing small screens */
  .ref-grid {
    grid-template-columns: 1fr;
  }

  /* Heatmap: tighter column gap so seven bars fit beside the hour axis */
  .heatmap__grid {
    column-gap: var(--md-spacing-1);
  }

  /* Elevation boxes: reduce min-width to fit */
  .elevation-box {
    min-width: var(--md-list-item-height-large);
  }

  /* Shape boxes + labels: smaller on tiny screens */
  .shape-box {
    width: var(--md-icon-button-size);
    height: var(--md-icon-button-size);
  }

  .shape-label {
    width: var(--md-icon-button-size);
    font-size: var(--md-label-small-size);
  }

  /* Swatch: smaller on tiny screens */
  .swatch {
    width: var(--md-button-height-large);
    height: var(--md-button-height-large);
  }

  /* Carousel buttons: smaller on mobile */
  .carousel__btn {
    width: var(--md-carousel-button-size-small);
    height: var(--md-carousel-button-size-small);
    font-size: var(--md-label-large-size);
  }

  /* Date picker dropdown: constrain to viewport and center */
  .date-picker__dropdown {
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-list-max-height);
    left: var(--md-spacing-4);
    right: var(--md-spacing-4);
  }

  /* Reduce day button size slightly on very small screens */
  .date-picker__day {
    width: var(--md-icon-button-size);
    height: var(--md-icon-button-size);
    font-size: var(--md-body-small-size);
  }

  .date-picker__nav {
    width: var(--md-icon-button-size);
    height: var(--md-icon-button-size);
  }

  /* Side sheet: full width on small mobile */
  .side-sheet {
    width: 100%;
    max-width: 100%;
  }

  /* OTP input: reduce field size for very small screens */
  .otp-input__field {
    width: var(--md-button-height-small);
  }

  .otp-input__fields {
    gap: var(--md-spacing-1);
  }

  /* Snackbar: reduce min-width on small screens */
  .snackbar {
    min-width: auto;
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-component-width-medium);
  }

  /* Time picker: constrain to viewport */
  .time-picker__dropdown {
    min-width: auto;
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-list-max-height);
    left: 50%;
    transform: translateX(-50%);
  }

  .time-picker__dropdown--visible {
    display: block;
  }

  /* Color picker: constrain to viewport */
  .color-picker__dropdown {
    min-width: auto;
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-component-width-small);
  }

  /* Tabs: enable horizontal scroll */
  .tabs__bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs__bar::-webkit-scrollbar {
    display: none;
  }

  /* Breadcrumbs: wrap on small screens */
  .breadcrumbs {
    flex-wrap: wrap;
  }

  .breadcrumbs__item {
    max-width: var(--md-min-dropdown-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pagination: show only arrows + active page on mobile */
  .pagination__btn:not(:first-child):not(:last-child):not(.pagination__btn--active) {
    display: none;
  }

  /* Keep ellipsis visible for context */
  .pagination__ellipsis {
    font-size: var(--md-label-small-size);
  }

  /* Banner: stack actions vertically on small screens */
  .banner__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .banner__btn {
    width: 100%;
    text-align: center;
  }

  /* Dialog: reduce padding on small screens */
  .dialog {
    padding: var(--md-spacing-4);
  }

  .dialog__title {
    font-size: var(--md-title-medium-size);
  }

  /* Tag input: reduce size on small screens */
  .tag-input__tag {
    font-size: var(--md-label-small-size);
    padding: var(--md-spacing-1) var(--md-spacing-2);
  }

  /* Bottom sheet: ensure content fits and buttons stack properly */
  .bottom-sheet__content .ref-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bottom-sheet__content .btn {
    width: 100%;
  }

  /* Bottom sheet: reduce max height on very small screens */
  .bottom-sheet {
    max-height: 90vh;
  }
}

/* ---- Mobile - below 768px: off-screen drawer + hamburger ---- */
@media (max-width: 767px) {
  /* End-user lists (the patrol picker): the page scrolls, never a box inside it */
  .property-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .property-list-wrap::after {
    display: none;
  }


  /* Header CTA hidden on mobile - the drawer covers navigation */
  .navbar__cta {
    display: none;
  }

  /* Horizontal stepper: scrollable on mobile */
  .stepper:not(.stepper--vertical) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--md-spacing-2);
  }

  /* Segmented button: allow horizontal scroll, and tighter segments on a phone (the height stays) */
  .segmented-button {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .segmented-button__item {
    padding-left: var(--md-spacing-3);
    padding-right: var(--md-spacing-3);
  }


  /* The view switch's tabs tighten too, so Units | Residents | Exempt Plates stays one row on a phone
     (under 480px the icons go as well: the block at the end of this file) */
  .view-switch__link {
    padding-left: var(--md-spacing-3);
    padding-right: var(--md-spacing-3);
  }

  /* Billing plan rows: stepper and line total wrap under the service text */
  .billing-row {
    flex-wrap: wrap;
  }

  .billing-row__info {
    flex: 1 1 calc(100% - var(--md-icon-size-large) - var(--md-spacing-3));
  }

  .billing-row__stepper {
    flex: 1 1 auto;
  }

  .billing-row__total {
    flex: 1 0 auto;
  }

  .billing-row--collapsed .billing-row__add {
    margin-left: auto;
  }

  /* Phones: the stage is as tall as its content (the stretch rules start at 768px) */
  .activity__stage {
    grid-template-rows: minmax(0, auto);
  }

  /* Phones only: the search bar drops under the type filter */
  .activity__toolbar {
    flex-wrap: wrap;
  }

  .activity__toolbar .activity__search {
    flex-basis: 100%;
  }

  /* Phones only: the day slider drops under the Activity | Availability switch (2026-10-31) */
  .activity__viewbar {
    flex-wrap: wrap;
  }

  .activity__viewbar .activity__day {
    flex-basis: 100%;
  }

  .heatmap {
    --heatmap-axis: var(--md-spacing-8);
  }

  /* Phones: the facts under the dashboard's chart in two equal columns (components.css .activity__facts:
     one column per visible item from 768px) */
  .activity__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Setup steps (dashboard band, open strip): the checklist stacks instead of scrolling sideways */
  .setup-band .stepper:not(.stepper--vertical),
  .setup-strip .stepper:not(.stepper--vertical) {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .setup-band .stepper__connector,
  .setup-strip .stepper__connector {
    width: var(--md-divider-thickness);
    min-width: 0;
    height: var(--md-spacing-4);
    flex: none;
    margin: var(--md-spacing-1) 0 var(--md-spacing-1) var(--md-spacing-4);
  }

  /* Setup strip: the buttons take their own full-width row under the text, together at the right end
     (a third button - Add a payment method during a trial with no card - wraps to a second row and
     stays at the right too; 2026-10-28) */
  .setup-strip__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  /* Transfer list: stack vertically on mobile */
  .transfer-list__container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--md-spacing-4);
  }

  .transfer-list__controls {
    order: 2;
    flex-direction: row;
    justify-content: center;
    gap: var(--md-spacing-3);
  }

  .transfer-list__panel:first-child {
    order: 1;
  }

  .transfer-list__panel:last-child {
    order: 3;
  }
}

/* ---- Tablet - 768px+ ---- */
@media (min-width: 768px) {
  /* Patrol page + Investigate a plate: buttons stop stretching, the lookup toolbar is one row */
  .patrol-cta {
    width: auto;
    align-self: flex-start;
  }

  /* End-user app pages (components.css .app-*): a section becomes an outlined card, the action bar one
     right-aligned row with the primary button last */
  .app-section {
    padding: var(--md-spacing-5);
    border: var(--md-divider-thickness) solid var(--md-outline-variant);
    border-radius: var(--md-shape-large);
    background-color: var(--md-surface);
  }

  .app-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .app-actions .btn {
    width: auto;
  }

  .app-actions--inline {
    flex-direction: row;
    justify-content: flex-end;
  }

  .app-actions--inline .btn {
    flex: 0 0 auto;
  }

  .plate-lookup__toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  /* Dashboard visitor activity (2026-11-01): the heatmap fills the stage. The chart column is a flex
     column whose chart takes the room the facts under it leave (components.css .activity__chart), the
     heatmap's grid grows and shrinks with it (min-height: 0 - a flex item's auto minimum would pin it at
     its content) and its 24 hour rows share the height (row 1 = the corner + the day labels), each cell
     as tall as its row; the legend's swatches sit outside the grid and keep their 8px,
     and the pills keep --md-shape-full. Scoped under .activity: neither the patrol page nor the marketing
     vignette, which share the partial, stretch. Phones keep the 8px cells */
  .activity__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .activity .heatmap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .activity .heatmap__grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto repeat(24, minmax(0, 1fr));
    align-items: stretch;
  }

  .activity .heatmap__grid .heatmap__cell {
    height: auto;
    min-height: var(--md-spacing-2);
  }

  .activity .heatmap__hour {
    line-height: var(--md-label-small-line);
    align-self: center;
  }

  .activity .heatmap__day {
    align-self: end;
  }

  /* Header: right padding only while the row is collapsed (768px to 1279px), so the hamburger
     sits at the row's own 12px padding at every collapsed width and Book a Demo / Get Pass stay
     52px from the right edge; the desktop tier at the end of this file pads both sides */
  .header {
    padding: 0 var(--md-spacing-10) 0 0;
  }

  .main {
    padding: var(--md-spacing-12) var(--md-spacing-10);
  }
}

/* ---- Desktop - 1024px+ ---- */
@media (min-width: 1024px) {
  .main {
    padding: var(--md-spacing-12) var(--md-spacing-6);
  }

  /* Dashboard visitor activity: the chart area is a fixed height (min = max) so the card is the
     same size in every state - the token alone, since every card carries the two control rows (the
     Activity | Availability row is always shown, 2026-11-01) */
  .activity__stage {
    height: var(--md-activity-stage-height);
    overflow: auto;
  }

  /* The lot map and the open panel need more than the fixed height and must never clip their menus;
     declared after the fixed-height rule at a higher specificity, so the lift always wins */
  .activity--map .activity__stage,
  .activity--panel .activity__stage {
    height: auto;
    overflow: visible;
  }

  /* Dashboard Availability (2026-10-31) and, since 2026-11-01, the Activity body: the detail panel beside
     the map or the chart - the dock's columns idiom (layout.css): the second track 0px while closed,
     --md-activity-detail-width while open; the panel keeps that width (no reflow during the slide) and
     stretches to the row, so its footer sits at the bottom. The transitions are declared once on the
     wraps in components.css; both the closed and the open class are named here so the override never
     depends on source order. The one row fills the stage, so a lot map shorter than it is centred
     (components.css .activity--map .pmap*, 2026-11-01) and the heatmap keeps its stretch beside the panel */
  .activity__map,
  .activity__map--detail,
  .activity__body,
  .activity__body--detail {
    grid-template-columns: minmax(0, 1fr) 0px;
    grid-template-rows: minmax(0, 1fr);
    row-gap: 0;
  }

  .activity__map--detail,
  .activity__body--detail {
    grid-template-columns: minmax(0, 1fr) var(--md-activity-detail-width);
    column-gap: var(--md-spacing-6);
  }

  .activity__detail-panel {
    flex: 0 0 var(--md-activity-detail-width);
    width: var(--md-activity-detail-width);
    align-self: stretch;
  }
}

/* ---- Desktop header - 1280px+ ----
   The full header row (five links, Client Portal, both buttons; components.css sizes it) is the
   same at every desktop width and its labels never wrap (components.css nowrap). 24px side
   padding keeps the 1200px row whole from 1280px even beside a 17px scrollbar; wider than that
   the row is centred and the padding is never reached. Below 1280px the drawer takes over. */
@media (min-width: 1280px) {
  .header {
    padding: 0 var(--md-spacing-6);
  }
}

/* The Edit location dialogs and the Residents view's expand-row forms: side-by-side fields stack on a
   phone (components.css .dialog__row, .expand-form__row), except a wrapping row, whose cells keep
   their own bases; the short field's cap goes with the stack */
@media (max-width: 480px) {
  .dialog__row,
  .expand-form__row:not(.expand-form__row--wrap) {
    flex-direction: column;
  }

  .expand-form__row:not(.expand-form__row--wrap) {
    align-items: stretch;
  }

  .expand-form__row > .expand-form__cell--short {
    max-width: none;
  }
}

/* The two switches on a small phone (2026-10-29): the three-tab view switch (Units | Residents | Exempt
   Plates) and the three-segment groups with icons (the dashboard's type) measure wider than the panel at
   360px, so the icons go and the words carry the choice; the segmented group still scrolls as a last resort
   (the 767px block). The public drawer's Park | Manage segments are full width and keep their icons. */
@media (max-width: 480px) {
  .view-switch__icon,
  .segmented-button__icon {
    display: none;
  }

  .drawer__segments .segmented-button__icon {
    display: inline-block;
  }
}