/*
 * Final narrow-phone layout contract.
 *
 * This file is loaded after every other stylesheet and is intentionally
 * limited to phone widths. Desktop layout must never be changed here.
 */
@media (max-width: 780px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body[data-device-mode="mobile"] {
    --phone-gutter: 0.6rem;
    font-size: 15px;
  }

  body[data-device-mode="mobile"] .page-shell,
  body[data-device-mode="mobile"] main,
  body[data-device-mode="mobile"] main > section,
  body[data-device-mode="mobile"] .appointment-layout,
  body[data-device-mode="mobile"] .panel-stack,
  body[data-device-mode="mobile"] .booking-flow,
  body[data-device-mode="mobile"] .owner-dialog-shell,
  body[data-device-mode="mobile"] .owner-dashboard,
  body[data-device-mode="mobile"] .owner-panel-stack,
  body[data-device-mode="mobile"] .owner-panel,
  body[data-device-mode="mobile"] .dashboard-card,
  body[data-device-mode="mobile"] .owner-management-pane,
  body[data-device-mode="mobile"] .owner-style-pane,
  body[data-device-mode="mobile"] .owner-record-list {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] input,
  body[data-device-mode="mobile"] select,
  body[data-device-mode="mobile"] textarea,
  body[data-device-mode="mobile"] button,
  body[data-device-mode="mobile"] .button,
  body[data-device-mode="mobile"] .ghost-button,
  body[data-device-mode="mobile"] .mini-button {
    box-sizing: border-box;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] input,
  body[data-device-mode="mobile"] select,
  body[data-device-mode="mobile"] textarea {
    width: 100%;
    min-width: 0;
    font-size: 1rem;
  }

  body[data-device-mode="mobile"] :is(h1, h2, h3, h4, p, span, strong, a, button, label) {
    overflow-wrap: anywhere;
  }

  /* Public site shell and navigation */
  body[data-device-mode="mobile"] .page-shell {
    margin: 0;
    padding: 0.4rem var(--phone-gutter) 1rem;
  }

  body[data-device-mode="mobile"] .topbar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    width: 100%;
    max-width: none;
    margin: 0 0 0.55rem;
    padding: 0.45rem;
    border-radius: 0.65rem;
  }

  body[data-device-mode="mobile"] .brand {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .brand-mark {
    width: 2.35rem;
    height: 2.35rem;
  }

  body[data-device-mode="mobile"] .brand-wordmark {
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.1;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .primary-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .primary-nav a,
  body[data-device-mode="mobile"] .primary-nav button {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.35rem;
    font-size: 0.76rem;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    width: 100%;
    max-width: 100%;
    padding: 0.75rem var(--phone-gutter) max(0.9rem, env(safe-area-inset-bottom));
  }

  /* Public content uses the screen instead of nested narrow cards. */
  body[data-device-mode="mobile"] .experience,
  body[data-device-mode="mobile"] .appointment-section,
  body[data-device-mode="mobile"] .public-style-gallery-section,
  body[data-device-mode="mobile"] .salon-hero {
    width: 100%;
    min-width: 0;
    margin: 0 0 0.75rem;
  }

  body[data-device-mode="mobile"] .section-heading {
    gap: 0.3rem;
    margin-bottom: 0.55rem;
  }

  body[data-device-mode="mobile"] .section-heading .eyebrow,
  body[data-device-mode="mobile"] .card-kicker,
  body[data-device-mode="mobile"] .mini-label {
    font-size: 0.68rem;
  }

  body[data-device-mode="mobile"] .section-heading h2,
  body[data-device-mode="mobile"] .public-style-gallery-section h2 {
    font-size: clamp(1.45rem, 6.6vw, 1.8rem);
    line-height: 1.05;
  }

  body[data-device-mode="mobile"] .panel,
  body[data-device-mode="mobile"] .booking-step-screen,
  body[data-device-mode="mobile"] .booking-calendar-card,
  body[data-device-mode="mobile"] .booking-form-card,
  body[data-device-mode="mobile"] .openings-card,
  body[data-device-mode="mobile"] #styles-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.7rem;
    border-radius: 0.75rem;
  }

  body[data-device-mode="mobile"] .booking-step-screen,
  body[data-device-mode="mobile"] .booking-calendar-card,
  body[data-device-mode="mobile"] .booking-form-card,
  body[data-device-mode="mobile"] .booking-form,
  body[data-device-mode="mobile"] .tight-form {
    gap: 0.65rem;
  }

  body[data-device-mode="mobile"] .calendar-card-header,
  body[data-device-mode="mobile"] .details-card-header,
  body[data-device-mode="mobile"] .panel-header,
  body[data-device-mode="mobile"] .card-heading {
    gap: 0.35rem;
  }

  body[data-device-mode="mobile"] .calendar-card-header {
    padding-bottom: 0.45rem;
  }

  body[data-device-mode="mobile"] :is(.calendar-card-header, .details-card-header, .booking-form-intro) h4 {
    font-size: 1.12rem;
    line-height: 1.15;
  }

  body[data-device-mode="mobile"] .field-row,
  body[data-device-mode="mobile"] .contact-grid,
  body[data-device-mode="mobile"] .form-grid,
  body[data-device-mode="mobile"] .payment-layout,
  body[data-device-mode="mobile"] .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .field {
    min-width: 0;
  }

  body[data-device-mode="mobile"] .field > span,
  body[data-device-mode="mobile"] .field-label-row {
    font-size: 0.82rem;
  }

  body[data-device-mode="mobile"] .field input,
  body[data-device-mode="mobile"] .field select,
  body[data-device-mode="mobile"] .field textarea {
    min-height: 2.75rem;
    padding: 0.65rem 0.7rem;
    border-radius: 0.6rem;
  }

  body[data-device-mode="mobile"] .button,
  body[data-device-mode="mobile"] .ghost-button,
  body[data-device-mode="mobile"] .mini-button {
    min-height: 2.75rem;
    padding: 0.62rem 0.72rem;
    font-size: 0.88rem;
    line-height: 1.15;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .hero-actions,
  body[data-device-mode="mobile"] .confirmation-actions,
  body[data-device-mode="mobile"] .style-card-actions,
  body[data-device-mode="mobile"] .style-details-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    width: 100%;
  }

  body[data-device-mode="mobile"] .hero-actions > *,
  body[data-device-mode="mobile"] .confirmation-actions > *,
  body[data-device-mode="mobile"] .style-card-actions > *,
  body[data-device-mode="mobile"] .style-details-toolbar > * {
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .cash-payment-confirmation {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.75rem;
  }

  /* Compact public home. */
  body[data-device-mode="mobile"][data-site-page="home"] main {
    min-height: 0;
    padding-top: 0;
  }

  body[data-device-mode="mobile"] .salon-hero-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    min-height: 0;
    padding: 0.75rem;
    border-radius: 0.75rem;
  }

  body[data-device-mode="mobile"] .salon-hero-copy > :not(.salon-hero-panel),
  body[data-device-mode="mobile"] .salon-hero-panel {
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .salon-hero .hero-message,
  body[data-device-mode="mobile"][data-site-page="home"] .salon-hero .hero-message {
    max-width: none;
    margin: 0.25rem 0 0;
    font-size: clamp(1.42rem, 6.8vw, 1.8rem);
    line-height: 1.08;
  }

  body[data-device-mode="mobile"] .salon-hero .hero-message span {
    display: inline;
  }

  body[data-device-mode="mobile"] .salon-hero .hero-message span:not(:last-child)::after {
    content: " ";
  }

  body[data-device-mode="mobile"] .salon-hero-panel,
  body[data-device-mode="mobile"] .mobile-style-summary-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
  }

  body[data-device-mode="mobile"] .salon-hero-panel div,
  body[data-device-mode="mobile"] .mobile-style-summary-panel div {
    min-width: 0;
    padding: 0.45rem 0;
  }

  body[data-device-mode="mobile"] .salon-hero-panel span,
  body[data-device-mode="mobile"] .mobile-style-summary-panel span {
    font-size: 0.64rem;
  }

  body[data-device-mode="mobile"] .salon-hero-panel strong,
  body[data-device-mode="mobile"] .mobile-style-summary-panel strong {
    font-size: 0.82rem;
    line-height: 1.28;
  }

  body[data-device-mode="mobile"] .hero-contact {
    gap: 0.4rem;
    margin-top: 0;
  }

  body[data-device-mode="mobile"] .contact-chip {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
  }

  /* Public calendars, times, styles, and modal sheets stay inside the phone. */
  body[data-device-mode="mobile"] .calendar-weekdays,
  body[data-device-mode="mobile"] .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.16rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .calendar-weekdays span {
    min-width: 0;
    font-size: 0.5rem;
  }

  body[data-device-mode="mobile"] :is(.calendar-day, .calendar-pad, .calendar-loading),
  body[data-device-mode="mobile"] .owner-availability-calendar-card .calendar-day {
    min-width: 0;
    min-height: 3.2rem;
    padding: 0.3rem 0.12rem;
    border-radius: 0.5rem;
  }

  body[data-device-mode="mobile"] .calendar-day-number {
    font-size: 0.86rem;
  }

  body[data-device-mode="mobile"] .calendar-day-meta,
  body[data-device-mode="mobile"] .owner-availability-calendar-card .calendar-day-meta {
    font-size: 0.46rem;
    line-height: 1.05;
  }

  body[data-device-mode="mobile"] .calendar-selection,
  body[data-device-mode="mobile"] .helper-text,
  body[data-device-mode="mobile"] .section-note,
  body[data-device-mode="mobile"] .panel-caption {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  body[data-device-mode="mobile"] .time-option-grid,
  body[data-device-mode="mobile"] .booking-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .time-option-grid > *,
  body[data-device-mode="mobile"] .booking-time-grid > * {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
  }

  body[data-device-mode="mobile"][data-site-page="styles"] #styleGallery {
    width: 100%;
    min-width: 0;
    gap: 0.55rem;
    padding: 0 0 0.55rem;
  }

  body[data-device-mode="mobile"][data-site-page="styles"] #styleGallery .style-card,
  body[data-device-mode="mobile"][data-site-page="styles"] #styleGallery .style-card.is-expanded {
    flex: 0 0 min(16rem, calc(100vw - 2rem));
    width: min(16rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }

  body[data-device-mode="mobile"] .style-content {
    padding: 0.6rem 0.65rem 0.15rem;
  }

  body[data-device-mode="mobile"] .style-content h4 {
    font-size: 0.9rem;
  }

  body[data-device-mode="mobile"] .style-details {
    padding: 0 0.65rem 0.7rem;
  }

  body[data-device-mode="mobile"] .public-modal {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    padding: 0.4rem;
  }

  body[data-device-mode="mobile"] .public-modal-panel,
  body[data-device-mode="mobile"] .confirmation-modal-panel {
    box-sizing: border-box;
    width: calc(100vw - 0.8rem);
    min-width: 0;
    max-width: calc(100vw - 0.8rem);
    max-height: calc(100dvh - 0.8rem);
    padding: 0.75rem;
    border-radius: 0.75rem 0.75rem 0 0;
    overflow-x: hidden;
  }

  /* Owner gate and full-screen workspace. */
  body[data-device-mode="mobile"] .owner-dialog {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }

  body[data-device-mode="mobile"] .owner-dialog-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
  }

  body[data-device-mode="mobile"] .owner-dialog-shell:has(.owner-gate:not(.hidden)) {
    padding: var(--phone-gutter);
  }

  body[data-device-mode="mobile"] .owner-gate {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 27rem;
    margin: auto;
    padding: 0.9rem;
    border-radius: 0.75rem;
  }

  body[data-device-mode="mobile"] .owner-gate h2 {
    margin: 0.3rem 0 0.55rem;
    font-size: clamp(1.55rem, 7.2vw, 1.95rem);
    line-height: 1.02;
  }

  body[data-device-mode="mobile"] .owner-gate p {
    margin: 0 0 0.65rem;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  body[data-device-mode="mobile"] .owner-pin-form {
    gap: 0.6rem;
  }

  body[data-device-mode="mobile"] .owner-gate-actions {
    margin-top: 0.6rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "header"
      "mobile-nav"
      "panels";
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard .owner-header,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-header {
    grid-area: header;
    min-height: 3rem;
    padding: max(0.2rem, env(safe-area-inset-top)) 0.5rem 0.2rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard .owner-brand-logo,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-brand-logo {
    width: 1.9rem;
    height: 1.9rem;
  }

  body[data-device-mode="mobile"] #ownerLogoutButton {
    width: auto;
    min-width: 3.5rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.76rem;
  }

  body[data-device-mode="mobile"] .owner-section-mobile,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-section-mobile {
    grid-area: mobile-nav;
    min-height: 2.75rem;
    padding: 0.12rem 0.5rem;
  }

  body[data-device-mode="mobile"] .owner-section-mobile > span {
    display: none;
  }

  body[data-device-mode="mobile"] .owner-section-mobile select,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-section-mobile select {
    min-height: 2.5rem;
    padding: 0.35rem 2rem 0.35rem 0;
    font-size: 0.9rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard > .owner-panel-stack,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus > .owner-panel-stack {
    grid-area: panels;
    min-height: 0;
    padding: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-device-mode="mobile"] .owner-panel.is-active,
  body[data-device-mode="mobile"] .owner-panel[data-owner-panel="bookings"].is-active,
  body[data-device-mode="mobile"] .owner-management-card {
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .owner-management-card,
  body[data-device-mode="mobile"] .owner-panel .dashboard-card {
    gap: 0.55rem;
    width: 100%;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-workspace-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  body[data-device-mode="mobile"] .owner-workspace-header h3,
  body[data-device-mode="mobile"] .owner-style-editor-pane .card-heading h3,
  body[data-device-mode="mobile"] .settings-section-head h3 {
    margin: 0.15rem 0;
    font-size: 1.22rem;
    line-height: 1.12;
  }

  body[data-device-mode="mobile"] .owner-workspace-header p,
  body[data-device-mode="mobile"] .owner-pane-heading p,
  body[data-device-mode="mobile"] .owner-style-pane p,
  body[data-device-mode="mobile"] .settings-section-copy {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.38;
  }

  body[data-device-mode="mobile"] .owner-workspace-count,
  body[data-device-mode="mobile"] .owner-workspace-stats span {
    font-size: 0.78rem;
  }

  body[data-device-mode="mobile"] .owner-workspace-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  body[data-device-mode="mobile"] .owner-view-switch,
  body[data-device-mode="mobile"] .owner-styles-view-switch,
  body[data-device-mode="mobile"] .owner-hours-mode-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.2rem;
  }

  body[data-device-mode="mobile"] .owner-view-switch .mini-button,
  body[data-device-mode="mobile"] .owner-styles-view-switch .mini-button,
  body[data-device-mode="mobile"] .owner-hours-mode-strip .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.35rem;
    font-size: 0.78rem;
  }

  body[data-device-mode="mobile"] .owner-pane-heading,
  body[data-device-mode="mobile"] .settings-section-head,
  body[data-device-mode="mobile"] .owner-record-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-pane-heading > .button,
  body[data-device-mode="mobile"] .owner-pane-heading > .ghost-button {
    width: 100%;
  }

  body[data-device-mode="mobile"] .owner-management-form,
  body[data-device-mode="mobile"] .hours-editor-form,
  body[data-device-mode="mobile"] .settings-form,
  body[data-device-mode="mobile"] #styleForm {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-form-actions,
  body[data-device-mode="mobile"] .style-form-actions,
  body[data-device-mode="mobile"] .owner-date-action-row,
  body[data-device-mode="mobile"] .settings-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    width: 100%;
  }

  body[data-device-mode="mobile"] .owner-form-actions > *,
  body[data-device-mode="mobile"] .style-form-actions > *,
  body[data-device-mode="mobile"] .owner-date-action-row > *,
  body[data-device-mode="mobile"] .settings-actions > * {
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .weekday-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  body[data-device-mode="mobile"] .choice-button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.78rem;
  }

  body[data-device-mode="mobile"] .owner-record-list {
    gap: 0.45rem;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-record-card,
  body[data-device-mode="mobile"] .owner-record-item,
  body[data-device-mode="mobile"] .summary-item,
  body[data-device-mode="mobile"] .list-item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.7rem;
    border-radius: 0.65rem;
  }

  body[data-device-mode="mobile"] .owner-record-actions,
  body[data-device-mode="mobile"] .list-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-record-actions .mini-button,
  body[data-device-mode="mobile"] .list-actions .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.35rem;
    font-size: 0.78rem;
  }

  body[data-device-mode="mobile"] .public-product-strip:not(.hidden) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
  }

  body[data-device-mode="mobile"] .public-product-gallery {
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .public-product-card {
    flex-basis: min(15rem, 78vw);
    max-width: calc(100vw - 2rem);
  }

  body[data-device-mode="mobile"] #ownerProductEditorPane,
  body[data-device-mode="mobile"] .product-photo-workspace,
  body[data-device-mode="mobile"] .product-photo-preview {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .product-photo-workspace {
    padding: 0.7rem;
  }

  body[data-device-mode="mobile"] .owner-product-heading-copy {
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-product-thumbnail {
    flex-basis: 3.75rem;
    width: 3.75rem;
    height: 3.75rem;
  }

  /* Booking cards remain readable and selection uses a real outside gutter. */
  body[data-device-mode="mobile"] .owner-bookings-card .owner-scroll-list {
    width: 100%;
    min-width: 0;
    padding: 0 0 0.5rem;
  }

  body[data-device-mode="mobile"] .booking-card-summary {
    padding: 0.7rem 0.75rem 0.7rem 0.85rem;
  }

  body[data-device-mode="mobile"] .booking-card-summary-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .booking-card-summary-aside {
    min-width: 0;
    max-width: 5rem;
  }

  body[data-device-mode="mobile"] .booking-card-slot .booking-card-date {
    font-size: 0.94rem;
  }

  body[data-device-mode="mobile"] .booking-card-slot .booking-card-time {
    font-size: 0.9rem;
  }

  body[data-device-mode="mobile"] .booking-card-state,
  body[data-device-mode="mobile"] .booking-card-toggle-label {
    font-size: 0.66rem;
  }

  body[data-device-mode="mobile"] .booking-card-details {
    gap: 0.6rem;
    padding: 0.75rem;
  }

  body[data-device-mode="mobile"] .booking-primary-actions,
  body[data-device-mode="mobile"] .booking-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode {
    box-sizing: border-box;
    padding-left: 2.65rem;
    overflow-x: visible;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode .booking-list-item {
    width: 100%;
    margin-left: 0;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .booking-selection-label {
    top: 0.55rem;
    left: -2.45rem;
    width: 2rem;
    height: 2rem;
  }

  /* One compact control row, then the active calendar uses the rest. */
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus > .owner-panel-stack {
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-card {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.3rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-bar {
    position: static;
    display: grid;
    grid-template-columns: minmax(6.7rem, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.12rem;
    width: 100%;
    min-width: 0;
    padding: 0.1rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-switch .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.35rem 0.2rem;
    font-size: 0.68rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav {
    display: grid;
    grid-template-columns: 2.75rem minmax(2rem, 1fr) 2.75rem auto;
    grid-template-areas: "previous date next today";
    align-items: center;
    gap: 0.1rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.2rem;
    font-size: 0.66rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav strong {
    width: auto;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-tools {
    display: none;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-view,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-mobile-calendar,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-mobile-agenda {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
  }

  body[data-device-mode="mobile"] .owner-mobile-agenda {
    gap: 0.45rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-agenda-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 4.4rem;
    padding: 0.65rem 0.75rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-agenda-empty {
    min-height: 0;
    padding: 0.75rem 0.35rem;
    font-size: 0.84rem;
  }
}

/* Compact phone calendar: one control row, full-height schedule, and swipe feedback. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-dialog-shell:has(.owner-dashboard:not(.hidden)),
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    > .owner-panel-stack {
    padding: 0.25rem 0.25rem 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-card {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.15rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch,
  body[data-device-mode="mobile"] .owner-calendar-mode-switch {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.1rem;
    gap: 0.1rem;
    border: 1px solid rgba(181, 136, 44, 0.25);
    border-radius: 0.72rem;
    background: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-device-mode="mobile"] .owner-calendar-mode-switch {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch .mini-button,
  body[data-device-mode="mobile"] .owner-calendar-mode-switch .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.3rem 0.12rem;
    overflow: hidden;
    border-radius: 0.57rem;
    font-size: 0.69rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-view {
    padding-bottom: calc(3rem + max(0.1rem, env(safe-area-inset-bottom)));
    touch-action: pan-y;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-nav {
    right: 0.1rem;
    bottom: max(0.1rem, env(safe-area-inset-bottom));
    left: 0.1rem;
    grid-template-columns: 44px minmax(0, 1fr) 44px 3.2rem;
    gap: 0.12rem;
    padding: 0.12rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-nav .mini-button,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-nav strong {
    min-height: 44px;
  }

  body[data-device-mode="mobile"] .owner-calendar-view > * {
    transform: translateX(0);
    transition:
      transform 180ms cubic-bezier(0.2, 0.75, 0.25, 1),
      opacity 180ms ease;
  }

  body[data-device-mode="mobile"] .owner-calendar-view.is-swipe-tracking > * {
    opacity: 0.92;
    transform: translateX(var(--owner-calendar-swipe-x, 0));
    transition: none;
  }

  body[data-device-mode="mobile"]
    .owner-calendar-view.is-view-transitioning.is-swipe-forward > * {
    animation: owner-phone-calendar-enter-forward 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  body[data-device-mode="mobile"]
    .owner-calendar-view.is-view-transitioning.is-swipe-backward > * {
    animation: owner-phone-calendar-enter-backward 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }
}

@media (max-width: 360px) {
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch .mini-button,
  body[data-device-mode="mobile"] .owner-calendar-mode-switch .mini-button {
    font-size: 0.64rem;
  }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  body[data-device-mode="mobile"] .owner-calendar-view > *,
  body[data-device-mode="mobile"]
    .owner-calendar-view.is-view-transitioning.is-swipe-forward > *,
  body[data-device-mode="mobile"]
    .owner-calendar-view.is-view-transitioning.is-swipe-backward > * {
    animation: none;
    transition: none;
  }
}

@keyframes owner-phone-calendar-enter-forward {
  from {
    opacity: 0.45;
    transform: translateX(2.25rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes owner-phone-calendar-enter-backward {
  from {
    opacity: 0.45;
    transform: translateX(-2.25rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Google Calendar-inspired Week schedule for the Owner Bookings phone view. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-mobile-week-grid,
  body[data-device-mode="mobile"] .owner-mobile-week-grid-scroll {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(92, 76, 46, 0.24);
    border-radius: 0.85rem;
    background: #fffdfa;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-scroll {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-board {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: #fffdfa;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-header,
  body[data-device-mode="mobile"] .owner-mobile-week-grid-body {
    display: grid;
    grid-template-columns: 2.65rem repeat(7, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-header {
    position: relative;
    z-index: 10;
    min-height: 58px;
    border-bottom: 1px solid rgba(92, 76, 46, 0.28);
    background: #fffdfa;
    box-shadow: 0 3px 8px rgba(58, 45, 20, 0.08);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-corner {
    min-width: 0;
    border-right: 1px solid rgba(92, 76, 46, 0.2);
    background: #fffdfa;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-heading {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    place-content: center;
    gap: 0.08rem;
    padding: 0.22rem 0.02rem;
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgba(92, 76, 46, 0.12);
    border-radius: 0;
    background: #fffdfa;
    color: #4f493f;
    font: inherit;
    text-align: center;
    box-shadow: none;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-heading span {
    display: block;
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-heading strong {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 0.96rem;
    line-height: 1;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-heading.is-today strong {
    background: var(--gold-deep);
    color: #fff;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-body {
    align-items: start;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-time-axis {
    min-width: 0;
    border-right: 1px solid rgba(92, 76, 46, 0.2);
    background: #fffdfa;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-time-label {
    box-sizing: border-box;
    height: 84px;
    padding: 0.18rem 0.18rem 0 0.04rem;
    overflow: hidden;
    border-top: 1px solid rgba(92, 76, 46, 0.18);
    color: #756e62;
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 750;
    line-height: 1.1;
    text-align: right;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day-lane {
    position: relative;
    min-width: 0;
    border-right: 1px solid rgba(92, 76, 46, 0.12);
    background: #fffdfa;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day-lane.is-today {
    background: #fffaf0;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-quarter-slot {
    position: relative;
    box-sizing: border-box;
    height: 21px;
    min-width: 0;
    border-top: 1px solid rgba(92, 76, 46, 0.055);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-quarter-slot.is-hour {
    border-top-color: rgba(92, 76, 46, 0.18);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event {
    position: absolute;
    z-index: 3;
    top: calc(var(--event-offset-minutes, 0) * 1.4px);
    left: calc(var(--event-left, 0%) + 1px);
    box-sizing: border-box;
    width: calc(var(--event-width, 100%) - 2px);
    min-width: 0;
    height: max(44px, calc(var(--event-duration-slots, 1) * 21px - 2px));
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.08rem;
    padding: 0.24rem 0.14rem;
    overflow: hidden;
    border: 1px solid #77bedb;
    border-left: 3px solid #1094cb;
    border-radius: 0.24rem;
    background: #caedf9;
    color: #153744;
    font: inherit;
    text-align: left;
    box-shadow: 0 1px 2px rgba(21, 55, 68, 0.13);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event.is-google-calendar {
    border-color: #b889dc;
    border-left-color: #8e3dca;
    background: #e5caf6;
    color: #3e1959;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event strong,
  body[data-device-mode="mobile"] .owner-mobile-week-grid-event span,
  body[data-device-mode="mobile"] .owner-mobile-week-grid-event small {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    font-family: var(--font-body);
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event .owner-mobile-week-grid-event-name {
    flex: 0 0 auto;
    overflow: visible;
    font-size: 0.55rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.01em;
    overflow-wrap: normal;
    text-overflow: clip;
    white-space: normal;
    word-break: normal;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event-time {
    color: currentColor;
    font-size: 0.46rem;
    font-weight: 800;
    opacity: 0.82;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event-time > span {
    display: block;
    width: 100%;
    overflow: hidden;
    font: inherit;
    line-height: inherit;
    text-overflow: clip;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event .owner-mobile-week-grid-event-note {
    display: block;
    flex: 0 0 auto;
    margin-top: 0.04rem;
    overflow: visible;
    color: currentColor;
    font-size: 0.46rem;
    font-weight: 650;
    line-height: 1.16;
    opacity: 0.78;
    overflow-wrap: normal;
    text-overflow: clip;
    white-space: normal;
    word-break: normal;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-current-time {
    position: absolute;
    z-index: 4;
    top: calc(var(--event-offset-minutes, 0) * 1.4px);
    right: 0;
    left: 0;
    height: 2px;
    background: #b54b2a;
    pointer-events: none;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-empty {
    position: absolute;
    top: 4.5rem;
    right: 0.75rem;
    left: 3.25rem;
    z-index: 2;
    margin: 0;
    padding: 0.65rem;
    color: #756e62;
    font-size: 0.72rem;
    text-align: center;
    pointer-events: none;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-sheet {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    align-items: end;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0.4rem;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(25, 20, 13, 0.46);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.8rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(82%, 34rem);
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(92, 76, 46, 0.24);
    border-radius: 1rem;
    background: #fffdfa;
    box-shadow: 0 -0.7rem 2rem rgba(32, 24, 12, 0.22);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-header p {
    margin: 0 0 0.15rem;
    color: var(--gold-deep);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-header h3 {
    margin: 0;
    overflow-wrap: normal;
    font-size: 1.25rem;
    line-height: 1.12;
    word-break: normal;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-header .mini-button,
  body[data-device-mode="mobile"] .owner-mobile-week-detail-panel > .button {
    min-height: 44px;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-content,
  body[data-device-mode="mobile"] .owner-mobile-week-detail-facts {
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-facts {
    display: grid;
    gap: 0.7rem;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-facts > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(92, 76, 46, 0.14);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-facts dt {
    color: #756e62;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: break-word;
    color: #29251f;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-detail-facts .is-note dd {
    font-weight: 550;
    white-space: pre-wrap;
  }
}

@media (max-width: 360px) {
  body[data-device-mode="mobile"] .owner-mobile-week-grid-header,
  body[data-device-mode="mobile"] .owner-mobile-week-grid-body {
    grid-template-columns: 2.35rem repeat(7, minmax(0, 1fr));
  }

  body[data-device-mode="mobile"] .owner-mobile-week-time-label {
    padding-right: 0.1rem;
    font-size: 0.46rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event .owner-mobile-week-grid-event-name {
    font-size: 0.49rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event-time {
    font-size: 0.41rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-grid-event .owner-mobile-week-grid-event-note {
    font-size: 0.41rem;
  }
}

/*
 * Owner Bookings phone recovery pass.
 * This final layer owns phone scrolling, card bulk-selection, Tools, and
 * Day / Week / Month calendar behavior. Desktop remains untouched.
 */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-dialog-shell:has(.owner-dashboard:not(.hidden)) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard > .owner-panel-stack {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-panel[data-owner-panel="bookings"],
  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-card {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-view-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-view-switch,
  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-card-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.35rem;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort,
  body[data-device-mode="mobile"] .owner-bookings-tools {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort > summary,
  body[data-device-mode="mobile"] .owner-bookings-tools > summary {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    place-items: center;
    padding: 0.55rem 0.65rem;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort[open],
  body[data-device-mode="mobile"] .owner-bookings-tools[open] {
    position: static;
    z-index: auto;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0.45rem;
    overflow: visible;
    border: 1px solid rgba(181, 136, 44, 0.28);
    border-radius: 0.8rem;
    background: #fffdf8;
    box-shadow: 0 0.55rem 1.4rem rgba(33, 28, 21, 0.1);
  }

  body[data-device-mode="mobile"] .owner-bookings-sort[open] > summary,
  body[data-device-mode="mobile"] .owner-bookings-tools[open] > summary {
    margin-bottom: 0.4rem;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort-options,
  body[data-device-mode="mobile"] .owner-bookings-tools .bookings-toolbar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    box-shadow: none;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort-options .mini-button,
  body[data-device-mode="mobile"] .owner-bookings-tools .bookings-toolbar .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .owner-bookings-tools .owner-calendar-sync-status {
    max-width: 100%;
    margin: 0.45rem 0 0;
    overflow-wrap: anywhere;
  }

  body[data-device-mode="mobile"] .owner-bookings-card .owner-scroll-list,
  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    padding: 0 0 1rem;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-list-item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-card-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-selection-label {
    position: static;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    margin: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-selection-label input {
    width: 1.45rem;
    height: 1.45rem;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-card-summary-layout {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    > .owner-panel-stack {
    overflow: hidden;
    touch-action: pan-y;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-card {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-bar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-calendar-mode-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
    padding: 0.2rem;
    border: 1px solid rgba(181, 136, 44, 0.24);
    border-radius: 0.78rem;
    background: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-calendar-mode-switch .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    border-color: transparent;
    background: transparent;
    font-size: 0.78rem;
  }

  body[data-device-mode="mobile"] .owner-calendar-mode-switch .mini-button.is-active {
    border-color: #d6b55f;
    background: #6f4f13;
    color: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-view {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    padding-bottom: calc(
      3.55rem + max(0.2rem, calc(env(safe-area-inset-bottom) - 1.5rem))
    );
    overflow: hidden;
    touch-action: pan-y;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar,
  body[data-device-mode="mobile"] .owner-mobile-period-view,
  body[data-device-mode="mobile"] .owner-mobile-period-scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-timeline-scroll,
  body[data-device-mode="mobile"] .owner-mobile-period-scroll,
  body[data-device-mode="mobile"] .owner-mobile-month-view {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event {
    width: calc(var(--event-width, 100%) - 0.24rem);
    max-width: calc(100% - 0.24rem);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-view {
    border: 1px solid rgba(48, 40, 28, 0.14);
    border-radius: 0.72rem;
    background: #fbf8f1;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-scroll {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(48, 40, 28, 0.12);
    border-radius: 0.72rem;
    background: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day.is-today {
    border-color: rgba(181, 136, 44, 0.56);
    box-shadow: inset 0 0 0 1px rgba(181, 136, 44, 0.18);
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.62rem 0.72rem;
    border: 0;
    border-bottom: 1px solid rgba(48, 40, 28, 0.1);
    background: rgba(181, 136, 44, 0.09);
    color: #211c15;
    font: inherit;
    text-align: left;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day-heading span {
    min-width: 0;
    font-weight: 850;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day-heading strong {
    flex: 0 0 auto;
    color: #6f4f13;
    font-size: 0.72rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-week-day-items {
    display: grid;
    gap: 0.35rem;
    padding: 0.45rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-appointment {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0.12rem 0.55rem;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(48, 40, 28, 0.12);
    border-left: 4px solid #2d8ab7;
    border-radius: 0.58rem;
    background: #eef8fc;
    color: #211c15;
    font: inherit;
    text-align: left;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-appointment.is-google-calendar {
    border-left-color: #8057a6;
    background: #f3edf8;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-appointment strong {
    grid-row: 1 / span 2;
    font-size: 0.78rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-appointment span,
  body[data-device-mode="mobile"] .owner-mobile-period-appointment small {
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-appointment span {
    font-weight: 850;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-appointment small,
  body[data-device-mode="mobile"] .owner-mobile-period-empty,
  body[data-device-mode="mobile"] .owner-mobile-month-help {
    color: #6f685e;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  body[data-device-mode="mobile"] .owner-mobile-period-empty {
    margin: 0;
    padding: 0.45rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-view {
    box-sizing: border-box;
    height: 100%;
    padding: 0.5rem;
    border: 1px solid rgba(48, 40, 28, 0.14);
    border-radius: 0.72rem;
    background: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-weekdays,
  body[data-device-mode="mobile"] .owner-mobile-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-weekdays span {
    padding: 0.3rem 0;
    color: #6f685e;
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-grid {
    gap: 0.18rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-day {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    gap: 0.1rem;
    padding: 0.25rem 0.08rem;
    border: 1px solid rgba(48, 40, 28, 0.1);
    border-radius: 0.45rem;
    background: #fffdf8;
    color: #211c15;
    font: inherit;
    font-size: 0.76rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-day.is-outside-month {
    color: #9b9288;
    background: #f6f2ea;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-day.is-today {
    border-color: #6f4f13;
    box-shadow: inset 0 0 0 1px #6f4f13;
    font-weight: 900;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-day strong {
    display: grid;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 999px;
    background: #6f4f13;
    color: #fffdf8;
    font-size: 0.62rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-day i {
    width: 0.28rem;
    height: 0.28rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-month-help {
    margin: 0.55rem 0 0;
    text-align: center;
  }

  body[data-device-mode="mobile"] .owner-calendar-view.is-view-transitioning
    > * {
    animation: owner-phone-calendar-enter 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  body[data-device-mode="mobile"] .owner-calendar-view.is-view-transitioning
    > * {
    animation: none;
  }
}

@keyframes owner-phone-calendar-enter {
  from {
    opacity: 0.35;
    transform: translateY(0.45rem) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Keep phone booking cards quiet until the owner asks for administrative options. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .booking-card-actions {
    gap: 0.55rem;
  }

  body[data-device-mode="mobile"] .booking-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  body[data-device-mode="mobile"] .booking-primary-actions .mini-button {
    min-width: 0;
    min-height: 44px;
    padding: 0.68rem 0.72rem;
    border-radius: 0.65rem;
    font-size: 0.9rem;
  }

  body[data-device-mode="mobile"] .booking-primary-actions .booking-tap-pay-button,
  body[data-device-mode="mobile"] .booking-primary-actions .booking-payment-link-button,
  body[data-device-mode="mobile"] .booking-primary-actions .booking-more-button {
    grid-column: 1 / -1;
  }

  body[data-device-mode="mobile"] .booking-primary-actions .booking-payment-link-button,
  body[data-device-mode="mobile"] .booking-primary-actions .booking-tap-pay-button {
    border-color: rgba(181, 136, 44, 0.42);
    background: rgba(181, 136, 44, 0.12);
    color: #5f4312;
    font-weight: 850;
  }

  body[data-device-mode="mobile"] .booking-primary-actions .booking-more-button {
    border-color: rgba(48, 40, 28, 0.14);
    background: rgba(255, 255, 255, 0.66);
    color: #4e463c;
    font-weight: 750;
  }

  body[data-device-mode="mobile"] .list-actions.booking-secondary-actions:not(.is-open) {
    display: none;
  }

  body[data-device-mode="mobile"] .list-actions.booking-secondary-actions.is-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(181, 136, 44, 0.2);
  }

  body[data-device-mode="mobile"] .booking-secondary-actions-heading {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.05rem 0.08rem 0.2rem;
  }

  body[data-device-mode="mobile"] .booking-secondary-actions-heading strong {
    color: #252019;
    font-size: 0.84rem;
    font-weight: 850;
  }

  body[data-device-mode="mobile"] .booking-secondary-actions-heading span {
    color: #756b5f;
    font-size: 0.74rem;
    line-height: 1.35;
  }

  body[data-device-mode="mobile"] .booking-secondary-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.35rem;
    border: 1px solid rgba(48, 40, 28, 0.1);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.72);
  }

  body[data-device-mode="mobile"] .booking-secondary-action-row.is-help-open {
    border-color: rgba(181, 136, 44, 0.3);
    background: rgba(255, 252, 244, 0.96);
  }

  body[data-device-mode="mobile"] .booking-secondary-action-row > .mini-button {
    justify-content: flex-start;
    min-width: 0;
    min-height: 44px;
    padding: 0.62rem 0.68rem;
    border: 0;
    background: transparent;
    color: #29231c;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: left;
    box-shadow: none;
  }

  body[data-device-mode="mobile"] .booking-action-info-button {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(181, 136, 44, 0.28);
    border-radius: 999px;
    background: #fffdf8;
    color: #6b4d10;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
  }

  body[data-device-mode="mobile"] .booking-action-info-button[aria-expanded="true"] {
    border-color: rgba(181, 136, 44, 0.52);
    background: rgba(181, 136, 44, 0.16);
  }

  body[data-device-mode="mobile"] .booking-secondary-action-help {
    grid-column: 1 / -1;
    max-width: 100%;
    margin: 0;
    padding: 0.62rem 0.7rem;
    border-radius: 0.58rem;
    background: rgba(181, 136, 44, 0.1);
    color: #5d554b;
    font-size: 0.78rem;
    line-height: 1.42;
  }

  body[data-device-mode="mobile"] .booking-secondary-action-help[hidden],
  body[data-device-mode="mobile"] .booking-zeer-action {
    display: none;
  }

  body[data-device-mode="mobile"] .booking-secondary-actions > .booking-delete-action {
    min-height: 44px;
    border-color: rgba(127, 49, 41, 0.2);
    background: rgba(127, 49, 41, 0.055);
    color: #7a332c;
    font-weight: 750;
  }
}

@media (max-width: 360px) {
  body[data-device-mode="mobile"] {
    --phone-gutter: 0.45rem;
  }

  body[data-device-mode="mobile"] .primary-nav a,
  body[data-device-mode="mobile"] .primary-nav button {
    padding-inline: 0.2rem;
    font-size: 0.7rem;
  }

  body[data-device-mode="mobile"] .booking-primary-actions,
  body[data-device-mode="mobile"] .booking-secondary-actions,
  body[data-device-mode="mobile"] .owner-record-actions,
  body[data-device-mode="mobile"] .list-actions,
  body[data-device-mode="mobile"] .owner-workspace-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-bar {
    grid-template-columns: minmax(6.2rem, 0.76fr) minmax(0, 1.24fr);
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav {
    grid-template-columns: 2.75rem minmax(1.8rem, 1fr) 2.75rem auto;
  }
}

/* Owner phone Calendar is a real one-day time grid, not a second card list. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-timeline-scroll {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(48, 40, 28, 0.14);
    border-radius: 0.7rem;
    background: #fffdf8;
    scrollbar-gutter: stable;
    touch-action: pan-y;
  }

  body[data-device-mode="mobile"] .owner-mobile-timeline {
    display: grid;
    grid-template-columns: 3.45rem minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-time-axis {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 0;
    border-right: 1px solid rgba(48, 40, 28, 0.13);
    background: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-mobile-time-label {
    box-sizing: border-box;
    height: 96px;
    padding: 0.3rem 0.35rem 0 0.15rem;
    border-top: 1px solid rgba(48, 40, 28, 0.13);
    color: #6f685e;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: right;
  }

  body[data-device-mode="mobile"] .owner-mobile-day-lane {
    position: relative;
    min-width: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.84) 0,
      rgba(255, 255, 255, 0.84) 23px,
      rgba(181, 136, 44, 0.07) 24px
    );
  }

  body[data-device-mode="mobile"] .owner-mobile-quarter-slot {
    position: relative;
    box-sizing: border-box;
    height: 24px;
    border-top: 1px dashed rgba(48, 40, 28, 0.055);
  }

  body[data-device-mode="mobile"] .owner-mobile-quarter-slot.is-hour {
    border-top: 1px solid rgba(48, 40, 28, 0.15);
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event {
    top: calc(var(--event-offset-minutes, 0) * 1.6px);
    left: calc(var(--event-left, 0%) + 0.12rem);
    width: calc(var(--event-width, 100%) - 0.24rem);
    height: max(44px, calc(var(--event-duration-slots, 1) * 24px - 3px));
    min-width: 0;
    min-height: 44px;
    padding: 0.34rem 0.42rem;
    border-left-width: 4px;
    border-radius: 0.42rem;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event .owner-calendar-event-time {
    font-size: 0.7rem;
    line-height: 1.05;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event .owner-calendar-event-name {
    font-size: 0.9rem;
    line-height: 1.08;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event small {
    font-size: 0.61rem;
    line-height: 1.08;
  }

  body[data-device-mode="mobile"] .owner-mobile-day-lane .owner-calendar-current-time {
    top: calc(var(--event-offset-minutes, 0) * 1.6px);
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-empty {
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: 0.75rem;
    right: 0.75rem;
    padding: 0.85rem;
    color: #6f685e;
    border: 1px dashed rgba(48, 40, 28, 0.16);
    border-radius: 0.65rem;
    background: rgba(255, 253, 248, 0.94);
    font-size: 0.88rem;
    text-align: center;
    pointer-events: none;
  }
}

/* Keep phone calendar navigation thumb-friendly at the bottom of the workspace. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-dashboard .owner-header,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-header {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    min-height: 3.35rem;
    padding: max(0.25rem, env(safe-area-inset-top)) 0.5rem 0.25rem;
    gap: 0.4rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard .owner-header > .owner-brand-lockup,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-header > .owner-brand-lockup {
    display: block;
    width: 2rem;
    min-width: 2rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard .owner-section-mobile,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-section-mobile {
    grid-area: auto;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-device-mode="mobile"] .owner-dashboard .owner-section-mobile select,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-section-mobile select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.48rem 2rem 0.48rem 0.7rem;
    overflow: hidden;
    color: #211c15;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    background-color: #fffdf8;
    font-size: 0.84rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-dashboard .owner-header > .owner-header-actions,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-header > .owner-header-actions {
    width: auto;
    min-width: 0;
  }

  /* Keep the card-view Sort and Tools controls beside one another. */
  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-view-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.25rem;
    align-items: stretch;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    padding: 0 0.15rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-view-switch {
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.2rem;
    width: 7.25rem;
    min-width: 0;
    margin-left: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-sort,
  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-tools:not([open]) {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-sort > summary,
  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-tools:not([open]) > summary {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    place-items: center;
    padding: 0.4rem 0.2rem;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus) .owner-bookings-tools[open] {
    right: 0;
    width: calc(100vw - 0.6rem);
    max-width: calc(100vw - 0.6rem);
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-card {
    position: relative;
    gap: 0.3rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-bar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    padding: 0 0.15rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    padding: 0.12rem;
    border: 1px solid rgba(181, 136, 44, 0.24);
    border-radius: 0.85rem;
    background: rgba(255, 253, 248, 0.96);
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-bookings-view-switch .mini-button {
    min-height: 2.75rem;
    padding: 0.48rem 0.65rem;
    border-radius: 0.68rem;
    font-size: 0.86rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-view {
    box-sizing: border-box;
    padding-bottom: calc(
      3.55rem + max(0.2rem, calc(env(safe-area-inset-bottom) - 1.5rem))
    );
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav {
    position: absolute;
    z-index: 14;
    right: 0.2rem;
    bottom: max(0.2rem, calc(env(safe-area-inset-bottom) - 1.5rem));
    left: 0.2rem;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem 3.6rem;
    grid-template-areas: "previous date next today";
    align-items: center;
    gap: 0.18rem;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0.2rem;
    border: 1px solid rgba(48, 40, 28, 0.16);
    border-radius: 0.82rem;
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 -0.22rem 0.9rem rgba(33, 28, 21, 0.13);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  body[data-device-mode="mobile"] #ownerCalendarPreviousButton {
    grid-area: previous;
  }

  body[data-device-mode="mobile"] #ownerCalendarTodayButton {
    grid-area: today;
  }

  body[data-device-mode="mobile"] #ownerCalendarNextButton {
    grid-area: next;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.4rem;
    border-color: rgba(48, 40, 28, 0.12);
    border-radius: 0.62rem;
    background: #fffdf8;
    color: #211c15;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: none;
  }

  body[data-device-mode="mobile"] #ownerCalendarPreviousButton,
  body[data-device-mode="mobile"] #ownerCalendarNextButton {
    padding: 0;
    color: #6b4d10;
    font-size: 1.45rem;
    font-weight: 700;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus .owner-calendar-nav strong {
    grid-area: date;
    display: grid;
    width: auto;
    min-width: 0;
    min-height: 2.75rem;
    place-items: center;
    padding: 0.35rem 0.5rem;
    overflow: hidden;
    color: #211c15;
    border-radius: 0.62rem;
    background: rgba(181, 136, 44, 0.12);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event {
    width: min(calc(var(--event-width, 100%) - 0.24rem), 7.25rem);
    max-width: calc(100% - 0.24rem);
  }

  /* Choose a known booking recipient before opening the phone's Messages app. */
  body[data-device-mode="mobile"] .receipt-recipient-picker {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    align-items: end;
    padding:
      max(0.4rem, env(safe-area-inset-top))
      max(0.4rem, env(safe-area-inset-right))
      max(0.4rem, env(safe-area-inset-bottom))
      max(0.4rem, env(safe-area-inset-left));
    background: rgba(18, 16, 13, 0.46);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body[data-device-mode="mobile"] .receipt-recipient-picker-panel {
    display: grid;
    box-sizing: border-box;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(78dvh, 38rem);
    padding: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(48, 40, 28, 0.14);
    border-radius: 1rem 1rem 0.75rem 0.75rem;
    background: #fffdf8;
    box-shadow: 0 1.2rem 3.5rem rgba(18, 16, 13, 0.28);
  }

  body[data-device-mode="mobile"] .receipt-recipient-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .receipt-recipient-picker-header h3,
  body[data-device-mode="mobile"] .receipt-recipient-picker-header p {
    margin: 0;
  }

  body[data-device-mode="mobile"] .receipt-recipient-picker-header h3 {
    font-size: 1.1rem;
    line-height: 1.15;
  }

  body[data-device-mode="mobile"] .receipt-recipient-picker-close {
    flex: 0 0 auto;
    min-width: 3.7rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(48, 40, 28, 0.16);
    border-radius: 0.7rem;
    background: #fffdf8;
    color: #211c15;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
  }

  body[data-device-mode="mobile"] .receipt-recipient-to-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.25rem 0.35rem 0.25rem 0.7rem;
    border: 1px solid rgba(181, 136, 44, 0.42);
    border-radius: 0.8rem;
    background: #fff;
  }

  body[data-device-mode="mobile"] .receipt-recipient-to-field > strong {
    font-size: 0.82rem;
  }

  body[data-device-mode="mobile"] .receipt-recipient-to-field input {
    width: 100%;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
  }

  body[data-device-mode="mobile"] .receipt-recipient-to-field:focus-within {
    border-color: #76540e;
    box-shadow: 0 0 0 3px rgba(181, 136, 44, 0.2);
  }

  body[data-device-mode="mobile"] .receipt-recipient-help {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
  }

  body[data-device-mode="mobile"] .receipt-recipient-list {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-device-mode="mobile"] .receipt-recipient-choice {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(48, 40, 28, 0.12);
    border-radius: 0.75rem;
    background: #fffdf8;
    color: #211c15;
    font: inherit;
    text-align: left;
  }

  body[data-device-mode="mobile"] .receipt-recipient-choice strong,
  body[data-device-mode="mobile"] .receipt-recipient-choice span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .receipt-recipient-choice strong {
    font-size: 0.86rem;
  }

  body[data-device-mode="mobile"] .receipt-recipient-choice span {
    color: #5f584f;
    font-size: 0.75rem;
  }

  body[data-device-mode="mobile"] .receipt-recipient-empty {
    margin: 0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(181, 136, 44, 0.08);
    color: #5f584f;
    font-size: 0.82rem;
    text-align: center;
  }

  /* The Styles page starts with the gallery itself and gives each photo visual priority. */
  body[data-device-mode="mobile"][data-site-page="styles"]
    .public-style-gallery-section > .section-heading {
    display: none !important;
  }

  body[data-device-mode="mobile"][data-site-page="styles"]
    .public-style-gallery-section #styles-panel {
    margin-top: 0;
    padding: 0.45rem;
    border-radius: 1rem;
  }

  body[data-device-mode="mobile"][data-site-page="styles"] #styleGallery {
    gap: 0.65rem;
    padding: 0.1rem 0 0.65rem;
    scroll-padding-inline: 0.1rem;
  }

  body[data-device-mode="mobile"][data-site-page="styles"] #styleGallery .style-card,
  body[data-device-mode="mobile"][data-site-page="styles"]
    #styleGallery .style-card.is-expanded {
    flex: 0 0 min(21rem, calc(100vw - 2.5rem));
    width: min(21rem, calc(100vw - 2.5rem));
    max-width: calc(100vw - 2.5rem);
    border-radius: 1rem;
  }

  body[data-device-mode="mobile"][data-site-page="styles"]
    #styleGallery .style-image,
  body[data-device-mode="mobile"][data-site-page="styles"]
    #styleGallery .style-face {
    aspect-ratio: 1 / 1;
  }

  body[data-device-mode="mobile"][data-site-page="styles"]
    #styleGallery .style-content h4 {
    font-size: 1.05rem;
    line-height: 1.18;
  }

  /* Customer photo previews are true full-screen viewers. Service details stay in the details modal. */
  body[data-device-mode="mobile"] .style-photo-lightbox.is-public-style-photo {
    align-items: stretch;
    justify-content: stretch;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #0f0d0a;
    backdrop-filter: none;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-dialog {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    place-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #0f0d0a;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-header {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-header > div {
    display: none;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-close {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(15, 13, 10, 0.72);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.28);
    color: #ffffff;
    font-size: 0;
    font-weight: 850;
    pointer-events: auto;
    backdrop-filter: blur(12px);
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-close::before {
    content: "\00d7";
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-stage {
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    place-items: center;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
    background: #0f0d0a;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-image {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: contain;
    background: #0f0d0a;
    box-shadow: none;
  }

  body[data-device-mode="mobile"]
    .style-photo-lightbox.is-public-style-photo .style-photo-lightbox-details {
    display: none;
  }
}

/* Final cascade guard for the Owner Bookings phone recovery pass. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-dialog-shell:has(.owner-dashboard:not(.hidden)),
  body[data-device-mode="mobile"] .owner-dashboard,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus {
    height: 100dvh;
    max-height: 100dvh;
  }

  body[data-device-mode="mobile"] .owner-dashboard > .owner-panel-stack {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-panel[data-owner-panel="bookings"],
  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-card {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-view-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard:not(.is-calendar-focus)
    .owner-bookings-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort,
  body[data-device-mode="mobile"] .owner-bookings-tools {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort > summary,
  body[data-device-mode="mobile"] .owner-bookings-tools > summary {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    place-items: center;
    padding: 0.55rem 0.65rem;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort[open],
  body[data-device-mode="mobile"] .owner-bookings-tools[open] {
    position: static;
    z-index: auto;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0.45rem;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort-options,
  body[data-device-mode="mobile"] .owner-bookings-tools .bookings-toolbar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
  }

  body[data-device-mode="mobile"] .owner-bookings-sort-options .mini-button,
  body[data-device-mode="mobile"] .owner-bookings-tools .bookings-toolbar .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }

  body[data-device-mode="mobile"] .owner-bookings-card .owner-scroll-list,
  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    padding: 0 0 1rem;
    overflow: visible;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-list-item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-card-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-selection-label {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
  }

  body[data-device-mode="mobile"] .owner-scroll-list.is-selection-mode
    .booking-card-summary-layout {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    > .owner-panel-stack {
    overflow: hidden;
    touch-action: pan-y;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-card {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-bar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-calendar-mode-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-view {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar,
  body[data-device-mode="mobile"] .owner-mobile-period-view,
  body[data-device-mode="mobile"] .owner-mobile-period-scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 0;
  }

  body[data-device-mode="mobile"] .owner-mobile-timeline-scroll,
  body[data-device-mode="mobile"] .owner-mobile-period-scroll,
  body[data-device-mode="mobile"] .owner-mobile-month-view {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event {
    width: calc(var(--event-width, 100%) - 0.24rem);
    max-width: calc(100% - 0.24rem);
  }

  body[data-device-mode="mobile"] .owner-mobile-month-weekdays,
  body[data-device-mode="mobile"] .owner-mobile-month-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Final phone-calendar density override: keep every mode in one 44px row. */
@media (max-width: 780px) {
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    > .owner-panel-stack {
    padding: 0.25rem 0.25rem 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-card {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.15rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch,
  body[data-device-mode="mobile"] .owner-calendar-mode-switch {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.1rem;
    gap: 0.1rem;
    border: 1px solid rgba(181, 136, 44, 0.25);
    border-radius: 0.72rem;
    background: #fffdf8;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-device-mode="mobile"] .owner-calendar-mode-switch {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch .mini-button,
  body[data-device-mode="mobile"] .owner-calendar-mode-switch .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.3rem 0.12rem;
    overflow: hidden;
    border-radius: 0.57rem;
    font-size: 0.69rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-view {
    padding-bottom: calc(3rem + max(0.1rem, env(safe-area-inset-bottom)));
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-nav {
    right: 0.1rem;
    bottom: max(0.1rem, env(safe-area-inset-bottom));
    left: 0.1rem;
    grid-template-columns: 44px minmax(0, 1fr) 44px 3.2rem;
    gap: 0.12rem;
    padding: 0.12rem;
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-nav .mini-button,
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-calendar-nav strong {
    min-height: 44px;
  }

  body[data-device-mode="mobile"] .owner-mobile-calendar-event strong,
  body[data-device-mode="mobile"] .owner-mobile-calendar-event span,
  body[data-device-mode="mobile"] .owner-mobile-calendar-event small {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-device-mode="mobile"] .owner-dashboard.is-calendar-focus
    .owner-bookings-view-switch .mini-button,
  body[data-device-mode="mobile"] .owner-calendar-mode-switch .mini-button {
    font-size: 0.64rem;
  }
}