/* Comfortable reading sizes without scaling the fixed navigation or calendar grid. */
body { font-size:18px; }
body .small, body .field label, body .field .label,
body .field .hint, body .metric-label, body .metric-foot,
body .detail-item span, body .meta-box span, body .setting-row span,
body .more-group-copy span, body .visit-profile-heading span,
body .visit-profile-schedule span, body .visit-profile-photo-hint,
body .sprint-note, body .visit-delete-note {
  font-size:16px; line-height:1.45;
}
body .primary-btn, body .secondary-btn, body .danger-btn,
body .today-empty-card .primary-btn, body .today-empty-card .secondary-btn {
  font-size:18px; line-height:1.35; min-height:50px;
  white-space:normal; overflow-wrap:anywhere;
}
body .field input, body .field select, body .field textarea,
body .message-preview { font-size:18px; line-height:1.45; }
body .detail-item strong, body .meta-box strong,
body .visit-profile-schedule strong, body .visit-profile-client,
body .service-row .service-name { font-size:18px; line-height:1.4; }
body .section-title h2, body .more-group-copy strong { font-size:20px; line-height:1.3; }
body .notice, body .toast, body .screen-subtitle { font-size:16px; line-height:1.45; }
body .toast { border-radius:18px; }
body .field, body .detail-item, body .meta-box { min-width:0; }
body .detail-item strong, body .meta-box strong { overflow-wrap:anywhere; }
@media (max-width:600px) {
  body .more-plan-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  body .more-plan-actions .secondary-btn { width:100%; word-break:normal; overflow-wrap:normal; }
}
/* Warm, low-glare light mode. Dark mode keeps its existing palette. */
html:not([data-theme="dark"]) {
  --cream:#EFE7DA;
  --paper:#F7F1E7;
  --muted:#586174;
}
html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .app-shell,
html:not([data-theme="dark"]) .workspace-scroll { background:#EFE7DA; }
html:not([data-theme="dark"]) .topbar { background:#F2EADF; }
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .modal,
html:not([data-theme="dark"]) .modal-head,
html:not([data-theme="dark"]) .more-group,
html:not([data-theme="dark"]) .visit-profile-schedule > div,
html:not([data-theme="dark"]) .booking-card,
html:not([data-theme="dark"]) .regular-card { background:#F7F1E7; }
html:not([data-theme="dark"]) .field input,
html:not([data-theme="dark"]) .field select,
html:not([data-theme="dark"]) .field textarea,
html:not([data-theme="dark"]) .message-preview { background:#FBF6EE; }

/* Browser accounts and onboarding always use the dark palette. */
html[data-theme="dark"] { color-scheme: dark; }
/* Settings selects sit outside .field; set both colors for native WebKit controls. */
body .setting-row select {
  background:#FBF6EE;
  color:#263445;
  -webkit-text-fill-color:#263445;
  color-scheme:light;
  font:inherit;
  min-height:44px;
  max-width:100%;
}
html[data-theme="dark"] .setting-row select {
  background:#1C2433;
  color:#F2F3F8;
  -webkit-text-fill-color:#F2F3F8;
  border-color:#53617B;
  color-scheme:dark;
}
@media (max-width:600px) {
  body .setting-row:has(select) { flex-direction:column; align-items:stretch; }
  body .setting-row select { width:100%; }
}
html[data-browser-dark-only="true"] .home-theme-toggle,
html[data-browser-dark-only="true"] .native-appearance-only { display:none !important; }

/* Backup and restore panels must not inherit their light-only backgrounds. */
html[data-theme="dark"] :is(.backup-meta,.backup-status,.restore-drop,.restore-preview-grid > div,.storage-total,.storage-breakdown) { background:#252F41; color:#F2F3F8; border-color:#53617B; }
html[data-theme="dark"] :is(.backup-meta,.backup-status,.restore-drop,.restore-preview-grid,.storage-total,.storage-breakdown) strong { color:#F2F3F8; }
html[data-theme="dark"] :is(.backup-meta,.backup-status,.restore-drop,.restore-preview-grid,.storage-total,.storage-breakdown) :is(span.small,span,p) { color:#C5CBD9; }
html[data-theme="dark"] .storage-breakdown > div { border-color:#53617B; }
html[data-theme="dark"] :is(.backup-meta,.restore-preview-grid) span { font-size:16px; }
html[data-theme="dark"] :is(.backup-meta,.restore-preview-grid) strong { font-size:18px; }

/* Give native form controls an explicit surface and text color in both themes. */
html {
  --control-surface:#FBF6EE;
  --control-ink:#263445;
  --control-muted:#586174;
  --control-scheme:light;
}
html[data-theme="dark"] {
  --control-surface:#1C2534;
  --control-ink:#F2F3F8;
  --control-muted:#C5CBD9;
  --control-scheme:dark;
}
html body :is(.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .field select, .field textarea, .setting-row select, .appearance-grid select, .service-row select, .voice-controls select) {
  min-width:0;
  max-width:100%;
  background:var(--control-surface);
  color:var(--control-ink);
  -webkit-text-fill-color:var(--control-ink);
  color-scheme:var(--control-scheme);
}
html body :is(.field input, .field textarea)::placeholder {
  color:var(--control-muted);
  -webkit-text-fill-color:var(--control-muted);
  opacity:1;
}
html body :is(.field select, .setting-row select, .appearance-grid select, .service-row select, .voice-controls select):disabled {
  --control-ink:var(--control-muted);
  opacity:1;
}
body .appearance-grid select, body .voice-controls select, body .service-row select {
  min-height:50px;
  font-size:18px;
  line-height:1.4;
}
body .setting-row > div { min-width:0; }
.workspace-scroll { scroll-padding-bottom:32px; }
body #screen { padding-bottom:32px !important; }

/* A light action surface needs dark ink, independent of the brand's dark-mode ink. */
html body .client-hero-actions .light {
  background:#F2F3F8;
  color:#263445;
  -webkit-text-fill-color:#263445;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media (max-width:600px) {
  body .calendar-page-intro { display:none; }
  body .calendar-view-switch { margin-bottom:8px; padding:4px; }
  body .calendar-view-switch button { min-height:44px; }
  body .calendar-workspace .calendar-card { display:flex; flex-direction:column; padding:10px; }
  body .calendar-head { grid-template-columns:44px minmax(0,1fr) 56px 44px; gap:6px; margin-bottom:8px; }
  body .calendar-month-title { display:contents; }
  body .calendar-head .calendar-month-title h2 { font-size:18px; line-height:1.2; letter-spacing:0; }
  body .calendar-head .calendar-month-nav { width:44px; min-width:44px; height:44px; min-height:44px; }
  body .calendar-head .calendar-today-btn { width:56px; min-width:0; height:44px; min-height:44px; margin:0; padding:0 4px; }
  body .calendar-workspace .calendar-legend { order:1; margin:10px 0 0; }
  body .calendar-workspace .weekday-grid { margin-bottom:5px; }
  body .calendar-workspace :is(.weekday-grid,.calendar-grid) { gap:3px; }
  body .calendar-workspace .day { min-width:0; min-height:52px; padding:4px 2px; }
  body .calendar-workspace .day-marker { width:16px; min-width:16px; height:16px; }
}
@media (max-width:350px) {
  body .calendar-workspace .day-markers { gap:1px; }
  body .calendar-workspace .day-marker { width:14px; min-width:14px; height:14px; }
}

/* The booking dialog follows keyboard resizing and viewport panning. */
.modal-backdrop:has(.booking-form) {
  top:var(--workspace-top,0px);
  bottom:auto;
  height:var(--workspace-height,100dvh);
  padding-top:12px;
}
.modal:has(.booking-form) {
  max-height:100%;
  scroll-padding-top:90px;
  scroll-padding-bottom:24px;
  overscroll-behavior-y:contain;
}

@media (max-width:600px) {
  body .appearance-grid, body .voice-controls, body .booking-form .field-row {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  body .appearance-grid select, body .voice-controls select { width:100%; }
  body .setting-row { align-items:stretch; flex-wrap:wrap; }
  body .setting-row > div { flex:1 1 180px; }
  body .setting-row:has(select) > div { flex-basis:auto; }
  body .service-row {
    grid-template-columns:44px minmax(0,1fr);
    gap:8px;
    padding:10px;
  }
  body .service-row input[type="checkbox"] { justify-self:center; width:28px; height:28px; }
  body .service-row .service-name { overflow-wrap:anywhere; }
  body .service-row select { grid-column:2; }
  body .bottom-nav > div { display:grid; justify-items:center; align-content:center; }
  body .bottom-nav .nav-add {
    top:0 !important;
    margin:0 !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    font-size:34px;
  }
}
.booking-form > .advanced > summary {
  gap: 8px;
  flex-wrap: wrap;
}