/* Responsive workspace: real CSS pixels, flexible content, and reachable touch
   controls. Loaded last so the existing desktop visual system stays intact. */
:root {
  --visible-height: var(--app-viewport-height, 100dvh);
  --mobile-nav-height: calc(76px + env(safe-area-inset-bottom, 0px));
}
.mobile-wordmark { display: none; }
.main-wrapper, .view-stack, .view-panel, .content-z { min-width: 0; }
input, textarea, select { max-width: 100%; }
button { overflow-wrap: anywhere; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:is(input, textarea, select, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.custom-select-menu { max-width: 100%; }
.cs-item { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Share the remaining workspace between Inspector and the board instead of
   subtracting a guessed header height from the entire viewport. */
html[data-layout-surface-mode="native"] body.matrix-inspector-fixed .matrix-layout.has-inline-inspector .bento-grid--matrix-stack {
  grid-template-rows: minmax(0, .7fr) auto minmax(180px, 1fr);
}
html[data-layout-surface-mode="native"] body.matrix-inspector-fixed .matrix-inspector-top-panel {
  height: 100%; max-height: none; min-height: 0;
}
html[data-layout-surface-mode="native"] .matrix-inspector-dock-layer { top: 0; bottom: 0; }
html[data-layout-surface-mode="native"] .matrix-inspector-dock { height: 100%; min-height: 0; max-height: 100%; }

@media (min-width: 768px) and (max-width: 1440px) {
  html[data-layout-surface-mode="native"] .app-layout { gap: 16px; }
  html[data-layout-surface-mode="native"] .sidebar { width: 200px; }
  .top-nav { flex-wrap: wrap; gap: 12px; }
  .nav-left { flex: 1 1 280px; }
  .nav-right { flex-wrap: wrap; }
  .page-title { font-size: clamp(26px, 3vw, 38px); white-space: normal; }
  .filter-row--matrix { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; }
  .filter-row--matrix .search-wrap { width: 100%; min-width: 0; max-width: none; }
  .filter-row--matrix .service-filter-row { grid-column: 1 / -1; grid-row: 2; min-width: 0; max-width: 100%; flex-wrap: wrap; overflow: visible; justify-content: flex-start; }
  .filter-row--matrix .pills { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  .matrix-layout.is-docked { grid-template-columns: minmax(0, 1fr); }
  .calendar-workspace { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .calendar-month-panel { min-height: 560px; flex: 0 0 auto; }
  .calendar-agenda { min-height: 300px; }
  .calendar-selected-events, .calendar-upcoming-events { max-height: 300px; }
}

html[data-layout-profile="tablet"] .app-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  height: var(--visible-height);
}
@media (min-width: 768px) and (max-width: 1000px) {
  html[data-layout-profile="tablet"] .app-layout { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; gap: 12px; }
  html[data-layout-profile="tablet"] .sidebar { width: 72px; }
  html[data-layout-profile="tablet"] .sidebar-inner { padding: 16px 6px; }
  html[data-layout-profile="tablet"] .logo-area { height: 36px; padding: 0; margin-bottom: 20px; }
  html[data-layout-profile="tablet"] .app-wordmark { font-size: 14px; letter-spacing: -.5px; }
  html[data-layout-profile="tablet"] .nav-title { font-size: 0; padding: 0 10px; gap: 0; }
  html[data-layout-profile="tablet"] .nav-item { justify-content: center; gap: 0; padding: 10px 0; font-size: 0; }
  html[data-layout-profile="tablet"] .nav-item-icon { flex-shrink: 0; }
  html[data-layout-profile="tablet"] .nav-badge { position: absolute; top: 2px; right: 0; font-size: 10px; }
}

html[data-layout-profile="phone"] {
  scroll-padding-block: 140px var(--mobile-nav-height);
}
html[data-layout-profile="phone"] body { min-width: 0; }
html[data-layout-profile="phone"] .desktop-scale-shell { min-height: 100svh; }
html[data-layout-profile="phone"] .app-layout { min-height: 100svh; }
html[data-layout-profile="phone"] .main-wrapper {
  width: 100%; height: auto; min-height: 100svh; overflow: visible;
  gap: 16px;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(var(--mobile-nav-height) + 20px) max(12px, env(safe-area-inset-left, 0px));
}
html[data-layout-profile="phone"] .top-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 0 12px;
  background: var(--bg); border-bottom: 1px solid var(--card-border);
}
html[data-layout-profile="phone"] .nav-left { flex-direction: row; align-items: baseline; justify-content: space-between; flex: auto; }
html[data-layout-profile="phone"] .mobile-wordmark { display: block; font-size: 28px; }
html[data-layout-profile="phone"] .page-title { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--text-muted); text-shadow: none; }
html[data-layout-profile="phone"] .nav-right { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
html[data-layout-profile="phone"] .header-tools { display: contents; }
html[data-layout-profile="phone"] .desktop-only-label { display: none; }
html[data-layout-profile="phone"] .header-tools .readonly-btn,
html[data-layout-profile="phone"] .nav-right .lock-btn { min-width: 0; min-height: 44px; padding: 8px; justify-content: center; gap: 5px; font-size: 11px; }
html[data-layout-profile="phone"] .header-tools .theme-segmented { height: 44px; padding: 2px; }
html[data-layout-profile="phone"] .header-tools .theme-btn { min-width: 36px; min-height: 38px; padding: 6px; }
html[data-layout-profile="phone"] .readonly-btn .button-icon { display: none; }
html[data-layout-profile="phone"] .toggle-visual { flex-shrink: 0; }
html[data-layout-profile="phone"] .view-stack,
html[data-layout-profile="phone"] .view-panel.active { flex: 0 0 auto; min-height: 0; height: auto; overflow: visible; }
html[data-layout-profile="phone"] .mobile-tab-bar {
  min-height: var(--mobile-nav-height); gap: 4px;
  padding: 8px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--bg); border-top: 1px solid var(--card-border);
}
html[data-layout-profile="phone"] .mobile-tab-btn { min-width: 0; min-height: 56px; gap: 5px; padding: 6px 2px; font-size: 11px; border-radius: 12px; }
html[data-layout-profile="phone"] .toast { max-width: calc(100% - 24px); bottom: calc(var(--mobile-nav-height) + 12px); white-space: normal; overflow-wrap: anywhere; }

/* Flexible content instead of hidden text or offscreen filter controls. */
html[data-layout-profile="phone"] :is(.phone-home-shell, .phone-accounts-shell, .phone-more-shell) { gap: 14px; }
html[data-layout-profile="phone"] :is(.phone-hero, .phone-sync-card, .phone-section, .phone-account-card) { border-radius: 18px; padding: 16px; min-width: 0; }
html[data-layout-profile="phone"] :is(.phone-hero h2, .phone-section-head h3) { font-size: 22px; line-height: 1.35; }
html[data-layout-profile="phone"] :is(.phone-section-head, .phone-hero-actions, .phone-sync-actions, .phone-account-actions, .phone-focus-item) { flex-wrap: wrap; }
html[data-layout-profile="phone"] .phone-section-head { gap: 12px; margin-bottom: 12px; }
html[data-layout-profile="phone"] :is(.phone-account-copy, .phone-focus-item-main, .phone-upcoming-copy, .phone-service-row-title) { min-width: 0; }
html[data-layout-profile="phone"] :is(.phone-upcoming-copy, .phone-focus-item-main, .phone-sync-card, .phone-log-stack, .template-card, .sync-status) { overflow-wrap: anywhere; }
html[data-layout-profile="phone"] .phone-upcoming-item { text-align: left; }
html[data-layout-profile="phone"] .phone-account-identity { align-items: flex-start; }
html[data-layout-profile="phone"] .phone-account-identity .avatar { flex: 0 0 36px; width: 36px; height: 36px; }
html[data-layout-profile="phone"] .phone-account-copy { align-items: stretch; gap: 8px; }
html[data-layout-profile="phone"] .phone-account-title-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; align-items: start; }
html[data-layout-profile="phone"] .phone-account-title-row > strong { overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; font-size: 15px; padding-block: 10px; }
html[data-layout-profile="phone"] .account-copy-action { width: 44px; height: 44px; }
html[data-layout-profile="phone"] .phone-account-badges { grid-column: 1 / -1; justify-content: flex-start; gap: 6px; }
html[data-layout-profile="phone"] .tag-row.inline { flex: 0 0 auto; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; max-width: 100%; margin-left: 0; }
html[data-layout-profile="phone"] .phone-account-actions > button { flex: 1 1 100px; }
html[data-layout-profile="phone"] .add-account-form--phone { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 12px; }
html[data-layout-profile="phone"] .add-account-form--phone .glow-btn--add-account { padding-inline: 18px; }
html[data-layout-profile="phone"] .phone-summary-grid { gap: 8px; }
html[data-layout-profile="phone"] .phone-summary-card { padding: 12px; min-width: 0; gap: 8px; border-radius: 12px; }
html[data-layout-profile="phone"] .phone-summary-card span { font-size: 12px; overflow-wrap: anywhere; }
html[data-layout-profile="phone"] .phone-summary-card strong { font-size: 24px; }
html[data-layout-profile="phone"] :is(.phone-filter-pills, .service-filter-row, .phone-more-nav) { flex-wrap: wrap; overflow: visible; gap: 6px; }
html[data-layout-profile="phone"] :is(.pill, .service-filter-chip) { min-height: 44px; margin: 0; }
html[data-layout-profile="phone"] .service-filter-chip { flex: 1 1 120px; justify-content: center; font-size: 12px; }
html[data-layout-profile="phone"] .phone-service-row { padding: 12px; border-radius: 12px; gap: 12px; }
html[data-layout-profile="phone"] .phone-service-row-main { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
html[data-layout-profile="phone"] .phone-service-row-title { flex: 1 1 130px; gap: 8px; }
html[data-layout-profile="phone"] .phone-service-row-title small { line-height: 1.5; overflow-wrap: anywhere; }
html[data-layout-profile="phone"] .phone-service-state { flex: 0 0 auto; }
html[data-layout-profile="phone"] .phone-service-row-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html[data-layout-profile="phone"] .phone-service-row-actions > button { min-width: 0; justify-content: center; padding: 8px 4px; font-size: 12px; }
html[data-layout-profile="phone"] :is(.ghost-btn, .glow-btn, .phone-more-nav-btn, .phone-service-toggle, .custom-select-btn, .cs-item) { min-height: 44px; }
html[data-layout-profile="phone"] :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="range"]), textarea, select),
html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage :is(.service-inline-edit-input, .service-payment-input) { font-size: 16px; }
html[data-layout-profile="phone"] :is(input, textarea) { scroll-margin-block: 150px 100px; }
html[data-layout-profile="phone"] :is(.heatmap-grid, .template-grid, .issues-compose-grid, .inspector-form-grid) { grid-template-columns: minmax(0, 1fr); }
html[data-layout-profile="phone"] :is(.action-buttons-grid, .inspector-account-actions, .inspector-primary-actions, .inspector-footer) { flex-wrap: wrap; }
html[data-layout-profile="phone"] .phone-more-body .bento-box { padding: 16px; border-radius: 18px; }
html[data-layout-profile="phone"] .phone-more-body .bento-grid { gap: 14px; }
html[data-layout-profile="phone"] .phone-more-body .bento-box p { line-height: 1.7; }
html[data-layout-profile="phone"] .heatmap-metrics { gap: 6px; }
html[data-layout-profile="phone"] .issues-workspace .issue-deck-head { flex-wrap: wrap; }
html[data-layout-profile="phone"] .issues-workspace .issue-deck-title { overflow-wrap: anywhere; }

/* Account details sit above navigation. The scroll area includes every action. */
html[data-layout-profile="phone"] #mobileSheetLayer { z-index: 9990; }
html[data-layout-profile="phone"] .mobile-sheet-panel {
  bottom: auto; top: calc(var(--app-viewport-top, 0px) + 8px);
  max-height: calc(var(--visible-height) - 16px);
  border-radius: 20px; margin-inline: max(8px, env(safe-area-inset-left, 0px));
}
html[data-layout-profile="phone"] .mobile-sheet-scroll { max-height: calc(var(--visible-height) - 16px); padding: 16px 14px max(20px, env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
html[data-layout-profile="phone"] .inspector-account-id { white-space: normal; overflow-wrap: anywhere; }
html[data-layout-profile="phone"] .inspector-service-card-header { grid-template-columns: minmax(0, 1fr); }
html[data-layout-profile="phone"] .inspector-service-summary-row { flex-wrap: wrap; }
html[data-layout-profile="phone"] .inspector-service-metric { min-width: 0; max-width: 100%; }
html[data-layout-profile="phone"] .inspector-service-metric strong { overflow-wrap: anywhere; white-space: normal; }

/* Size to the visible viewport so the software keyboard cannot cover Save. */
html[data-layout-profile="phone"] .service-editor-dialog.service-editor-popover.service-editor-dialog--brand {
  top: calc(var(--app-viewport-top, 0px) + 8px) !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: max(8px, env(safe-area-inset-right, 0px)); bottom: auto;
  width: auto !important;
  height: min(var(--service-dialog-height, 820px), calc(var(--visible-height) - 16px)) !important;
  max-height: calc(var(--visible-height) - 16px); border-radius: 20px;
}
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-brand-panel { padding: 14px 16px 10px; gap: 6px; }
html[data-layout-profile="phone"] .service-editor-popover.service-editor-dialog.service-editor-dialog--brand .service-editor-hero { gap: 10px; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-dialog-close { top: 10px; right: 10px; width: 44px; height: 44px; }
html[data-layout-profile="phone"] .service-editor-popover.service-editor-dialog.service-editor-dialog--brand .service-editor-account { white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-content { padding: 14px 16px max(14px, env(safe-area-inset-bottom, 0px)); gap: 12px; }
html[data-layout-profile="phone"] .service-editor-popover.service-editor-dialog.service-editor-dialog--brand .status-btn { min-height: 44px; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-main { overscroll-behavior: contain; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-stage-panel { min-height: 0; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-stage-body { overscroll-behavior: contain; }
html[data-layout-profile="phone"] .service-editor-dialog--brand :is(input, textarea) { scroll-margin: 0; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage .service-editor-stage-body--date { overflow: auto; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage .service-inline-days { min-height: 240px; grid-template-rows: repeat(6, 40px); height: auto; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage .service-inline-days .sp-cell { width: 100%; min-height: 38px; max-height: 40px; font-size: 13px; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage .service-editor-stage-footer { gap: 6px; flex-wrap: wrap; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-stage-close { width: 44px; height: 44px; flex-basis: 44px; }
html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage .service-stage-apply { min-height: 44px; }
html[data-layout-profile="phone"] :is(.date-picker-popup, .time-picker-popup) {
  top: calc(var(--app-viewport-top, 0px) + 8px) !important;
  bottom: auto; max-height: calc(var(--visible-height) - 16px); overflow: auto;
}
html[data-layout-profile="phone"] .calendar-toolbar { flex-wrap: wrap; padding: 12px 10px; }
html[data-layout-profile="phone"] .calendar-month-controls { flex: 1 1 auto; justify-content: space-between; gap: 2px; }
html[data-layout-profile="phone"] .calendar-month-count { width: 100%; text-align: right; }
html[data-layout-profile="phone"] .calendar-month-panel .cal-days { grid-template-rows: repeat(6, minmax(88px, auto)); }
html[data-layout-profile="phone"] .calendar-day-select { min-height: 40px; padding: 0; }
html[data-layout-profile="phone"] .calendar-month-panel .cal-event { min-height: 28px; }
html[data-layout-profile="phone"] .calendar-more { min-height: 24px; width: 100%; }
html[data-layout-profile="phone"] .calendar-agenda-event { min-height: 56px; }

/* A keyboard or landscape phone may leave very little vertical space. Keep
   the editor toolbar and footer visible; only its contents need to scroll. */
@media (max-height: 600px) {
  html[data-layout-profile="phone"] .top-nav { position: relative; }
  html[data-layout-profile="phone"] .service-editor-dialog--brand .service-brand-panel { padding: 8px 16px; }
  html[data-layout-profile="phone"] .service-brand-panel > .service-brand-status { display: none; }
  html[data-layout-profile="phone"] .service-editor-popover.service-editor-dialog.service-editor-dialog--brand .service-logo-large,
  html[data-layout-profile="phone"] .service-editor-popover.service-editor-dialog.service-editor-dialog--brand .service-logo-large .service-mark,
  html[data-layout-profile="phone"] .service-editor-popover.service-editor-dialog.service-editor-dialog--brand .service-logo-large .service-mark svg { width: 32px; height: 32px; }
  html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-content { padding: 8px 12px; gap: 8px; }
  html[data-layout-profile="phone"] .service-editor-dialog--brand .service-editor-dialog-status { gap: 0; }
  html[data-layout-profile="phone"] .service-editor-dialog--brand :is(.service-editor-dialog-label, .service-editor-status-hint) { display: none; }
  html[data-layout-profile="phone"] .service-editor-dialog--brand .is-flat-stage .service-editor-stage-title strong { font-size: 16px; }
}
html[data-layout-profile="phone"][data-keyboard-open="true"] .service-brand-panel > :is(.service-brand-status, .service-editor-open-link) { display: none; }
html[data-layout-profile="phone"][data-keyboard-open="true"] .mobile-tab-bar { display: none; }
html[data-layout-profile="phone"][data-keyboard-open="true"] .service-editor-content.is-editing { grid-template-rows: minmax(0, 1fr); padding: 8px 12px; }
html[data-layout-profile="phone"][data-keyboard-open="true"] .service-editor-content.is-editing .service-editor-dialog-status { display: none; }
html[data-layout-profile="phone"][data-keyboard-open="true"] .service-editor-dialog--brand .service-brand-panel { padding: 8px 16px; }
html[data-layout-profile="phone"][data-keyboard-open="true"][data-compact-viewport="true"] .service-editor-dialog--brand:has(.service-editor-content.is-editing) { grid-template-rows: minmax(0, 1fr); }
html[data-layout-profile="phone"][data-keyboard-open="true"][data-compact-viewport="true"] .service-editor-dialog--brand:has(.service-editor-content.is-editing) > :is(.service-brand-panel, .service-editor-dialog-close) { display: none; }
@media (pointer: coarse) {
  :is(.nav-item, .ghost-btn, .custom-select-btn, .cs-item, .theme-btn, .service-editor-close) { min-height: 44px; }
}