/* Design System v2 — responsive + interaction foundation (Clinical OS v2 Phase 2).
 * Loaded LAST (after theme.css, clinical.css and material.css). Uses tokens only (app/tokens.css).
 * Breakpoints: sm 640, md 900, lg 1200. */


/* ---------- Keyboard: skip link + visible focus ---------- */
html body.aesthetic-crm a.skip-link { position: fixed; left: 12px; top: -120px; z-index: 1000; padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-on); font-weight: 600; text-decoration: none; }
html body.aesthetic-crm a.skip-link:focus, html body.aesthetic-crm a.skip-link:focus-visible { top: 8px; outline: none; box-shadow: var(--focus-ring); }
html body.aesthetic-crm :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
html body.login :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; box-shadow: none; }
html body.aesthetic-crm .medical-content:focus { outline: none; }

/* ---------- Press feedback (installPressFeedback sets data-pressed on pointerdown) ---------- */
html body.aesthetic-crm :is(button, .ui-btn, [role=button]) { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: var(--dur-instant); transition-timing-function: var(--ease-out); }
html body.aesthetic-crm :is(button, .ui-btn, [role=button])[data-pressed] { transform: scale(var(--press-scale)); }
html body.aesthetic-crm .is-saved .save-check { display: inline-block; font-weight: 700; }

/* ---------- Touch targets: 44 px under a coarse pointer, 32 px otherwise ---------- */
@media (pointer: coarse) {
  html body.aesthetic-crm :is(.medical-content button.active, .medical-content .ui-btn.primary, .medical-content [data-primary-action], .aesthetic-bottom-nav button, .medical-topbar button, .ui-pager button) { min-height: var(--touch-min); }
  html body.aesthetic-crm :is(.medical-topbar .icon-only, .medical-topbar .avatar-btn, .medical-topbar .bell-btn) { min-width: var(--touch-min); }
}

/* ---------- Sheets / drawers / modals ---------- */
html body.aesthetic-crm #drdialModal .modal-panel { animation: dd-sheet-in var(--dur-base) var(--ease-spring) both; }
@keyframes dd-sheet-in { from { opacity: 0; transform: translateY(calc(16px * var(--motion-shift))); } to { opacity: 1; transform: none; } }
html body.aesthetic-crm #drdialModal.drawer .modal-panel { width: min(100vw, 560px); max-width: min(100vw, 560px); }
@media (max-width: 639px) {
  /* Modals become full-screen sheets with a sticky material header (material.css). */
  html body.aesthetic-crm #drdialModal:not(.anchored) { padding: 0; align-items: stretch; }
  html body.aesthetic-crm #drdialModal:not(.anchored) .modal-panel { box-sizing: border-box; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0 var(--sp-4) var(--sp-4); border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; }
  html body.aesthetic-crm #drdialModal .modal-panel > .panel-head { min-height: 52px; margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-2) var(--sp-4); }
}

/* ---------- Tables: horizontal scroll inside their wrapper; card-list mode under 640 px ---------- */
html body.aesthetic-crm .ui-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
@media (max-width: 639px) {
  html body.aesthetic-crm .ui-table-wrap.cardable { overflow-x: visible; border: 0; background: transparent; box-shadow: none; }
  html body.aesthetic-crm table.ui-table.cardable,
  html body.aesthetic-crm table.ui-table.cardable tbody { display: block; width: 100%; }
  html body.aesthetic-crm table.ui-table.cardable thead { display: none; }
  /* Two cells per line (label above value); the first cell and the actions span the card. */
  html body.aesthetic-crm table.ui-table.cardable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-2); padding: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--r-md); background: var(--surface-1); }
  html body.aesthetic-crm table.ui-table.cardable td { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; padding: 0; border: 0; min-width: 0; height: auto; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  html body.aesthetic-crm table.ui-table.cardable td::before { content: attr(data-label); color: var(--ink-3); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 500; }
  html body.aesthetic-crm table.ui-table.cardable td[data-label=""]::before { content: none; }
  html body.aesthetic-crm table.ui-table.cardable td:first-child, html body.aesthetic-crm table.ui-table.cardable td.actions, html body.aesthetic-crm table.ui-table.cardable td[colspan] { grid-column: 1 / -1; }
  html body.aesthetic-crm table.ui-table.cardable td:first-child { font-weight: 600; }
  html body.aesthetic-crm table.ui-table.cardable td:first-child::before { content: none; }
}

/* ---------- Pagination ---------- */
.ui-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 0; color: var(--ink-3); font-size: var(--type-secondary-size); }
.ui-pager-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ui-pager button { min-width: 36px; }
.ui-pager button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.list-hidden-note { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0 0; color: var(--ink-3); font-size: var(--type-secondary-size); }

/* ---------- States: loading / empty / error ---------- */
.ui-state { display: grid; gap: var(--sp-2); justify-items: start; padding: var(--sp-6) var(--sp-4); border: var(--hairline) dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-2); }
.ui-state h3 { margin: 0; font-size: var(--type-section-size); line-height: var(--type-section-line); color: var(--ink-1); }
.ui-state p { margin: 0; max-width: 60ch; }
.ui-state .ui-state-why { color: var(--ink-3); }
.ui-state.error { border-style: solid; border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.ui-state.error h3 { color: var(--danger); }
.ui-state.loading { border-style: solid; }
.ui-state details { color: var(--ink-3); font-size: var(--type-caption-size); }
.ui-state[aria-busy="true"] .ui-skel { width: min(420px, 100%); }

/* ---------- App shell (Design System v2) ----------
 * ≥1200: sidebar (236 px), collapsible to a 72 px rail. 900–1199: 72 px rail. <900: the sidebar is a
 * sheet opened from "More", a 56 px tab bar (Today · Patients · Clinical · More) sits on the bottom edge
 * above the safe area, and the top bar is 52 px. `#shell#shell` outranks the older :has(...) #shell rules. */
html body.aesthetic-crm .medical-content { min-width: 0; }
@media (min-width: 1200px) {
  html body.aesthetic-crm #shell#shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  html body.aesthetic-crm:has(.medical-sidebar.collapsed) #shell#shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  html body.aesthetic-crm .medical-sidebar.collapsed { width: var(--sidebar-w-collapsed); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  html body.aesthetic-crm #shell#shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  html body.aesthetic-crm .medical-sidebar, html body.aesthetic-crm .medical-sidebar.collapsed { width: var(--sidebar-w-collapsed); }
}
@media (min-width: 900px) {
  html body.aesthetic-crm .aesthetic-bottom-nav { display: none; }
}
@media (max-width: 899px) {
  html body.aesthetic-crm #shell#shell { display: block; grid-template-columns: minmax(0, 1fr); }
  html body.aesthetic-crm .medical-sidebar, html body.aesthetic-crm .medical-sidebar.collapsed {
    display: block; position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(300px, 86vw); height: 100dvh; min-height: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-105%); visibility: hidden; box-shadow: var(--elev-pop);
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  html body.aesthetic-crm .medical-sidebar.mobile-open, html body.aesthetic-crm .medical-sidebar.collapsed.mobile-open { transform: none; visibility: visible; transition-delay: 0s; }
  html body.aesthetic-crm .medical-sidebar :is(.brand-lockup strong, .brand-lockup small, button em, .nav-group-label) { display: revert; }
  html body.aesthetic-crm .medical-sidebar :is(.sidebar-nav button, .logout-nav) { justify-content: flex-start; padding: 0 10px; min-height: var(--touch-min); }
  html body.aesthetic-crm .medical-sidebar .sidebar-toggle { display: none; }
  html body.aesthetic-crm .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: color-mix(in srgb, var(--ink-1) 38%, transparent); }
  html body.aesthetic-crm .mobile-nav-toggle { display: none; }
  html body.aesthetic-crm .medical-main { width: 100%; max-width: 100%; min-width: 0; padding: 8px 10px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }
  html body.aesthetic-crm .medical-topbar { position: sticky; top: 0; z-index: 50; min-height: var(--topbar-h); padding: 6px 10px; margin-bottom: 10px; }
  html body.aesthetic-crm .medical-content, html body.aesthetic-crm .calendar-toolbar { overflow-x: visible; }
  html body.aesthetic-crm .aesthetic-bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none;
    position: fixed; inset: auto 0 0 0; z-index: 80; min-height: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    margin: 0; padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border: 0; border-top: var(--hairline) solid var(--line); border-radius: 0; box-shadow: none;
  }
  html body.aesthetic-crm .aesthetic-bottom-nav button { min-height: var(--tabbar-h); height: var(--tabbar-h); margin: 0; padding: 4px 2px; border-radius: 0; background: transparent; color: var(--ink-3); font-size: var(--type-caption-size); }
  html body.aesthetic-crm .aesthetic-bottom-nav button.active { color: var(--accent); background: transparent; font-weight: 600; }
  html body.aesthetic-crm .aesthetic-bottom-nav button em { font-size: 11px; }
}

/* Patient context chip (top bar) */
html body.aesthetic-crm .patient-context-slot { min-width: 0; display: flex; }
html body.aesthetic-crm .patient-context-slot:empty { display: none; }
.patient-context-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 280px; min-width: 0; padding: 2px; border: var(--hairline) solid var(--line); border-radius: var(--r-pill); background: var(--surface-1); }
.patient-context-chip .pcc-open { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: 32px; padding: 2px 8px 2px 2px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-1); text-align: left; }
.patient-context-chip .pcc-text { display: grid; min-width: 0; line-height: 1.15; }
.patient-context-chip .pcc-text strong, .patient-context-chip .pcc-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-context-chip .pcc-text small { color: var(--ink-3); font-size: var(--type-caption-size); }
.patient-context-chip .pcc-clear { min-width: 28px; min-height: 28px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); }
@media (max-width: 899px) { .patient-context-chip { max-width: 180px; } .patient-context-chip .pcc-text small { display: none; } }

/* GRID-SAFETY:BEGIN — generated by scripts/build-grid-safety.mjs (597 grid containers). */
:where(#addStaffDrawer .chip-row,
#addStaffDrawer .wizard-body .chip-row,
#aesPatientForm .form-grid,
.aesthetic-bottom-nav,
.aesthetic-bottom-nav button,
.aftercare-sheet,
.ai-draft-edit-label,
.ai-draft-panel,
.ai-draft-sections,
.ai-source,
.appointment-action-menu,
.appointment-actions summary,
.appointment-focus-card,
.appointment-focus-card dl,
.as-body,
.as-editor,
.as-editor label,
.as-empty,
.as-group,
.as-list,
.as-marker,
.as-row span,
.as-studio,
.as-toolbar,
.attention-chip b,
.automation-attention,
.automation-center,
.automation-identity,
.automation-meta,
.automation-row,
.automation-rule-row,
.av2-body,
.av2-qty,
.av2-row,
.av2-row-edit,
.av2-row-edit label,
.av2-summary,
.availability-day-row,
.availability-grid,
.availability-grid-head,
.before-after-card,
.before-after-grid,
.before-after-preview,
.billing-landing,
.billing-layout,
.billing-main,
.billing-patient-context>div,
.billing-side,
.billing-stats,
.body-contour-list,
.body-contour-list li,
.booking-day-panel,
.booking-day-panel #bookingDayAgenda,
.booking-day-panel #bookingDayAgenda article,
.booking-duplicate-choices,
.booking-patient-bar .patient-chip-selected > span:nth-child(3),
.booking-requirement-summary,
.booking-step-page.active,
.booking-stepper,
.booking-stepper>button em,
.booking-steps,
.booking-steps section,
.boot-shell,
.brand-lockup,
.builder-regions,
.calendar-blocked-band,
.calendar-break-band,
.calendar-head-row,
.calendar-month-body,
.calendar-month-day,
.calendar-month-head,
.calendar-row,
.calendar-week-day,
.calendar-week-grid,
.cards,
.category-card,
.category-grid,
.cc-attention-list,
.cc-attention-row,
.cc-grid,
.cc-grid-3,
.cc-queue-list,
.cc-queue-row,
.cc-ring,
.cc-wait,
.cell-link,
.chart-angle-strip,
.chart-angle-tile,
.chart-photo-empty,
.chart-point-list,
.chart-review,
.chart-review-grid,
.chart-side-panel,
.chart-total-meta,
.chart-totals,
.checkout-summary,
.clinical-chart,
.clinical-chart-body,
.clinical-next-step,
.clinical-next-step .mini-actions,
.clinical-pad,
.clinical-path,
.clinical-queue-panel,
.clinical-queue-row,
.clinical-readiness,
.clinical-workspace,
.cm-annotate-stage,
.cm-avatar,
.cm-compare,
.cm-drop,
.cm-empty,
.cm-form,
.cm-form fieldset,
.cm-form label,
.cm-form-row,
.cm-grid,
.cm-info,
.cm-info dl,
.cm-info-actions,
.cm-page,
.cm-pane,
.cm-pane-canvas,
.cm-picker,
.cm-picker-results,
.cm-q-icon,
.cm-queue,
.cm-queue img,
.cm-queue li,
.cm-queue li div,
.cm-sel,
.cm-stage,
.cm-tile,
.cm-timeline,
.cm-viewer,
.cmdk,
.cmdk-backdrop,
.cmdk-item .cmdk-icon,
.cmdk-item .cmdk-text,
.comm-events,
.comm-form .form-grid.three,
.comm-form .form-grid.two,
.command-center,
.command-journey-list,
.command-journey-row,
.compact-form,
.comparison-empty,
.comparison-stage,
.comparison-viewer,
.consent-actions,
.consent-centre,
.consent-centre .ui-stat-row,
.consent-choice,
.consent-filters,
.consent-sign,
.consent-signed,
.consent-summary>div>div,
.consent-warning,
.consultation-context #consultationContextPanel,
.consultation-document-actions,
.consultation-layout,
.consultation-patient-bar,
.consultation-patient-results,
.consultation-section.active,
.consultation-simple-card,
.cq-empty,
.cq-list,
.credits-filter,
.credits-grid,
.credits-hero,
.credits-metrics,
.credits-metrics article,
.credits-table,
.credits-table>div,
.credits-warning,
.credits-workspace,
.crm-head,
.crm-row,
.crm-table,
.cs-patient,
.cs-section,
.cs-suggest,
.cw-action i,
.cw-actions,
.cw-card,
.cw-card label,
.cw-copy-list,
.cw-copy-row span,
.cw-form,
.cw-headcard,
.cw-header,
.cw-menu[open]>div,
.cw-more[open],
.cw-nextsteps .cw-tiles,
.cw-row>div,
.cw-rx-panel,
.cw-rx-panel .clinical-pad,
.cw-rx-panel .rx-more,
.cw-summary,
.cw-template-list,
.cw-tile,
.cw-tile > div,
.dashboard-workspace,
.doctor-command-grid,
.doctor-empty,
.doctor-followup-list,
.doctor-kpi-strip,
.doctor-main-column,
.doctor-queue-card,
.doctor-queue-list,
.doctor-shortcuts,
.doctor-side-column,
.doctor-step-fields,
.entitlement-list,
.entitlement-list .ent-id>div,
.entitlement-list .ent-ring>div,
.entitlement-list article,
.entitlement-list article div,
.exception-count,
.exception-icon,
.exception-list,
.exception-list>button,
.experience-card,
.fd-menu .appointment-action-menu,
.fd-menu summary,
.fd-page,
.filter-bar,
.filter-grid,
.filter-grid label,
.filter-strip,
.finder-empty,
.followup-actions details>div,
.followup-actions summary,
.followup-board,
.followup-board section,
.followup-center,
.followup-create-form,
.followup-empty,
.followup-item,
.followup-kanban,
.followup-kanban>section,
.followup-list,
.followup-subject-results,
.followup-task,
.followup-task dl,
.form-grid,
.frontdesk-empty,
.frontdesk-layout,
.frontdesk-patient-card,
.frontdesk-profile,
.frontdesk-queue-list,
.frontdesk-shell,
.frontdesk-toolbar label,
.fse,
.fse-grid2,
.fse-row,
.fse-section,
.injection-map-addenda,
.injection-point-list,
.injection-point-row,
.inline-form,
.intel-detail-cell,
.intel-detail-grid,
.intel-fact-row,
.intel-fact-rows,
.intel-snapshot-summary,
.inventory-alert-grid,
.inventory-alert-grid article,
.inventory-head,
.inventory-po-banner div,
.inventory-table,
.inventory-table strong,
.inventory-table>div,
.inventory-workspace,
.invite-card-avatar,
.invite-card-body,
.invite-card-grid,
.invoice-party > div,
.invoice-share,
.invoice-sheet,
.invoice-sheet header > div,
.invoice-totals span,
.journey-score-dot,
.journey-step .journey-step-dot,
.kanban,
.lead-activity-timeline,
.lead-analytics,
.lead-card,
.lead-column,
.lead-column-body,
.lead-kanban,
.lead-kpi,
.lead-layout,
.lead-list,
.lead-name,
.lead-row,
.login-brand,
.login-card .login-field,
.login-card .password-toggle,
.login-mark,
.login-page,
.medical-content,
.medical-main,
.medical-sidebar button span,
.medical-topbar,
.medicine-grid,
.medicine-grid article,
.medicine-master-form,
.mobile-agenda-days,
.mobile-agenda-days>section,
.mobile-agenda-item,
.modal-backdrop,
.modal-stack,
.module-empty,
.next-slot-card,
.next-slot-list,
.notification-row,
.ob-checks,
.open-actions-list,
.opportunity-row,
.owner-bottom-grid,
.owner-control-fab .fab-icon,
.owner-control-hero,
.owner-live-queue,
.owner-live-queue > button,
.owner-metric-grid,
.owner-metric-grid > button,
.owner-operations-grid,
.owner-retention-grid,
.owner-risk-list,
.owner-risk-list button,
.owner-risk-list button>strong,
.owner-shortcuts,
.owner-stat-list,
.p360 .patient-today-summary span,
.p360-identity>div,
.p360-skeleton,
.package-card,
.pad-order,
.pad-section-editor,
.pad-section-editor article,
.pad-version-library,
.pad-version-library article,
.page-skeleton,
.page-skeleton-cards,
.past-visit-clinical,
.past-visit-clinical article,
.patient-avatar,
.patient-card,
.patient-cards,
.patient-chip-selected .ui-avatar,
.patient-chip-selected > span:nth-child(2),
.patient-directory-empty,
.patient-directory-tools,
.patient-finder,
.patient-finder-layout,
.patient-finder-results,
.patient-finder-search,
.patient-flow-strip,
.patient-intel,
.patient-lookup,
.patient-lookup-grid,
.patient-picker,
.patient-picker-results,
.patient-record-loading,
.patient-safety-banner,
.patient-split,
.patient-table .ui-cell-main,
.patient-typeahead-results.open,
.perm-matrix,
.perm-matrix-head,
.perm-module,
.perm-row,
.pfs-angle,
.pfs-angles,
.pfs-checklist,
.pfs-param,
.pfs-params,
.pfs-photos,
.pfs-session,
.pfs-tile,
.pkg-grid,
.pkg-grid-row,
.pkg-grid-row .pkg-name,
.pkg-grid-row.pkg-grid-head,
.pkg-row,
.pkg-table,
.plan-card,
.plan-card-grid,
.plan-catalogue-grid,
.plan-form .form-grid.three,
.plan-form .plan-doc[open],
.plan-form .plan-suggested,
.plan-list,
.plan-list article,
.plan-list article div,
.plan-option-card,
.plan-option-cards,
.plan-option-group,
.plan-options,
.plan-services,
.plans-entitlements,
.prescription-context,
.prescription-delivery-actions,
.prescription-delivery-status,
.prescription-delivery-status article,
.prescription-empty,
.prescription-hero,
.prescription-history-row,
.prescription-layout,
.prescription-patient-bar,
.prescription-patient-search,
.prescription-sticky-actions,
.prescription-workspace,
.proc-bill,
.proc-card,
.proc-card label,
.proc-charges,
.proc-check-list,
.proc-complications,
.proc-done-list,
.proc-field,
.proc-grid,
.proc-header-grid,
.proc-header-grid>div,
.proc-package,
.proc-review-list,
.proc-review-list li span,
.proc-step-pages,
.proc-step-pages>.proc-step.active,
.proc-steps,
.proc-steps button em,
.proc-usage-list,
.proc-usage-rows,
.procedure-card,
.procedure-card-main,
.procedure-hero,
.procedure-list,
.procedure-room,
.procedure-room .procedure-section.active,
.procedure-room .procedure-sticky,
.procedure-room-grid,
.procedure-room-grid dl,
.procedure-row,
.procedure-row > div,
.procedure-safety,
.procedure-section.active,
.procedure-sticky,
.procedure-sticky div,
.procedure-usage-row,
.procedure-usage-row .usage-qty-wrap,
.procedure-usage-row label,
.procedure-workspace,
.procurement-layout,
.profile-details,
.profile-group,
.profile-layout,
.profile-main,
.profile-menu.open .profile-pop,
.profile-side,
.pub-days button,
.pub-form,
.pub-form label,
.pub-list,
.pub-mark,
.pub-option,
.pub-slot-grid,
.pub-tick,
.queue-actions details>div,
.queue-actions summary,
.queue-number,
.quick-create-grid,
.quick-create-grid .qc-icon,
.quick-create-grid button,
.ranked-slot-card,
.ranked-slot-list,
.rebooking-list,
.reception-flow-cards,
.reception-queue-head,
.reception-queue-list,
.reception-queue-row,
.reception-upcoming-list,
.reception-upcoming-list article,
.reception-work-grid,
.reception-work-panel,
.reception-work-panel label,
.reception-work-panel.open,
.report-stats.cards,
.reports-filter label,
.reschedule-day-agenda #rescheduleDayAgenda,
.reschedule-day-agenda article,
.resource-calendar-head,
.resource-calendar-row,
.resource-timeline,
.review-summary,
.row,
.rx-a4,
.rx-a4-head,
.rx-a4-meds,
.rx-a4-meds ol,
.rx-a4-row,
.rx-clinical-section,
.rx-item,
.rx-preview,
.rx-speed,
.sell-plan-form,
.settings-card-grid,
.settings-card-grid button,
.settings-clean,
.settings-grid,
.settings-page,
.settings-stack,
.setup-page,
.sidebar-nav,
.signature-pad-wrap,
.skeleton-table,
.smart-booking-form,
.split,
.stack-form,
.step-list,
.step-list li,
.stock-cell,
.table-lite,
.table-lite div,
.task-card,
.task-list,
.timeline,
.timeline div,
.timeline-event,
.timeline-event-body,
.timeline-event-list,
.timeline-event-meta,
.timeline-group,
.timeline-kind-icon,
.toggle-row,
.translation-version,
.treatment-builder,
.ui-avatar,
.ui-bar,
.ui-bars,
.ui-empty,
.ui-empty-icon,
.ui-kit,
.ui-kit .swatches,
.ui-kit section,
.ui-ring,
.ui-ring-label,
.ui-stat,
.ui-stat-icon,
.ui-step,
.ui-stepper,
.ui-table .ui-cell-main,
.unbilled-item span,
.unbilled-list,
.visit-charge-list,
.visit-charge-row,
.visit-charges-panel,
.wa-icon,
.walkin-form .walkin-step,
.walkin-new-patient,
.wizard-body,
.workflow-exception,
.workspace-grid,
aside,
body.aesthetic-crm .brand-lockup,
body.aesthetic-crm .calendar-toolbar .panel-head .mini-actions,
body.aesthetic-crm .cards,
body.aesthetic-crm .cards article,
body.aesthetic-crm .cmdk-item,
body.aesthetic-crm .consent-choice-btn,
body.aesthetic-crm .crm-row,
body.aesthetic-crm .doctor-empty,
body.aesthetic-crm .inventory-table>div,
body.aesthetic-crm .medical-topbar,
body.aesthetic-crm .modal-stack,
body.aesthetic-crm .owner-kpi-grid,
body.aesthetic-crm .owner-kpi-grid>button,
body.aesthetic-crm .stack-form,
body.aesthetic-crm .topbar-title,
body.aesthetic-crm label,
body.business #shell,
body.shell-boot .boot-app,
header,
html body.aesthetic-crm .cw-card[data-card="assessment"] .cw-field,
html body.aesthetic-crm .cw-template-apply,
html body.aesthetic-crm .medical-sidebar .logout-nav .nav-icon,
html body.aesthetic-crm .patient-picker-results button,
html body.aesthetic-crm .plan-form .plan-option-card,
html body.aesthetic-crm .procedure-room label.pfs-angle,
html body.aesthetic-crm .settings-card-grid button,
html body.aesthetic-crm .sidebar-nav .nav-icon,
html body.aesthetic-crm .ui-cell-main,
html body.aesthetic-crm .ui-empty-icon,
html body.aesthetic-crm .ui-stat-icon,
html body.aesthetic-crm :is(.cards, .ui-stat-row),
html body.aesthetic-crm :is(.cards, .ui-stat-row) > :is(article, .ui-stat),
html body.aesthetic-crm button.cw-action,
label) > * { min-width: 0; }
/* GRID-SAFETY:END */

/* Paged lists never widen their parent (a wide table scrolls inside its own .ui-table-wrap). */
html body.aesthetic-crm .paged-list { min-width: 0; max-width: 100%; }
/* Card-list mode keeps the table's priority rules: low-priority columns stay hidden on phones. */
@media (max-width: 639px) {
  html body.aesthetic-crm table.ui-table.cardable td:is(.prio-2, .prio-3) { display: none; }
}
/* Search fields above paged lists */
html body.aesthetic-crm .list-search { width: min(100%, 320px); min-width: 0; }
html body.aesthetic-crm .simple-inventory-table > .list-search { margin: 0 0 var(--sp-2); }

/* ---------- Compact list cards on phones (lists stay within the page-height budget) ---------- */
@media (max-width: 899px) {
  html body.aesthetic-crm .procedure-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "chips action"; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); }
  html body.aesthetic-crm .procedure-card > .procedure-card-main { grid-area: main; }
  html body.aesthetic-crm .procedure-card > .procedure-card-chips { grid-area: chips; grid-column: auto; justify-content: flex-start; align-self: center; }
  html body.aesthetic-crm .procedure-card > :is(button, .ghost-pill, a) { grid-area: action; justify-self: end; align-self: center; min-height: var(--touch-min); margin: 0; }
  html body.aesthetic-crm .procedure-card-main strong { font-size: var(--type-body-size); }
}
@media (max-width: 639px) {
  html body.aesthetic-crm .automation-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3); }
  html body.aesthetic-crm .automation-row > .automation-identity { grid-column: 1; }
  html body.aesthetic-crm .automation-row > :is(.status-pill, .automation-status, [class*="badge"]) { grid-column: 2; grid-row: 1; align-self: start; }
  html body.aesthetic-crm .automation-row > .automation-meta { grid-column: 1 / -1; }
  html body.aesthetic-crm .automation-row > .mini-actions, html body.aesthetic-crm .automation-row > .muted { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  /* Calendar toolbar: view switch, date navigation and Book wrap instead of running off the edge. */
  html body.aesthetic-crm .calendar-toolbar .mini-actions, html body.aesthetic-crm .panel-head > .mini-actions:has(.calendar-date-nav) { display: flex; flex-wrap: wrap; overflow: visible; gap: var(--sp-2); width: 100%; }
  html body.aesthetic-crm :is(.calendar-view-switch, .calendar-date-nav) { display: flex; flex-wrap: wrap; gap: var(--sp-1); width: auto; max-width: 100%; }
}

/* Patient entitlements: the three info columns keep their width; actions sit on their own row. */
/* The legacy global `article strong {font-size:31px}` leaked into these rows (31 px patient names). */
html body.aesthetic-crm .entitlement-list article strong { font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 600; }
html body.aesthetic-crm .entitlement-list article span, html body.aesthetic-crm .entitlement-list article small { font-size: var(--type-secondary-size); line-height: var(--type-secondary-line); }
html body.aesthetic-crm .entitlement-list article .ui-chip { display: inline-flex; vertical-align: middle; }
html body.aesthetic-crm .entitlement-list article { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
html body.aesthetic-crm .entitlement-list article > .mini-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 639px) {
  html body.aesthetic-crm .entitlement-list article { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); padding: var(--sp-3); }
  html body.aesthetic-crm .entitlement-list article > :is(.ent-id, .mini-actions) { grid-column: 1 / -1; }
  html body.aesthetic-crm .entitlement-list article > :not(.ent-id):not(.mini-actions) { display: grid; gap: 0; min-width: 0; }
  html body.aesthetic-crm .entitlement-list .ent-ring .ui-ring { display: none; }
  html body.aesthetic-crm .entitlement-list article :is(strong, span, small) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.aesthetic-crm .entitlement-list .ent-id > div > span { display: block; }
  html body.aesthetic-crm .entitlement-list article > .mini-actions { margin-top: var(--sp-1); }
}
/* Secondary page sections collapse into a disclosure (one tap away, not scrolled past). */
html body.aesthetic-crm details.panel-disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
html body.aesthetic-crm details.panel-disclosure > summary::-webkit-details-marker { display: none; }
html body.aesthetic-crm details.panel-disclosure > summary::after { content: "Show"; color: var(--accent); font-weight: 600; font-size: var(--type-secondary-size); }
html body.aesthetic-crm details.panel-disclosure[open] > summary::after { content: "Hide"; }
html body.aesthetic-crm details.panel-disclosure > summary > h3 { margin: 0; }

/* Settings → Services on phones: the five-column service row overlapped; stack it, two categories per line. */
@media (max-width: 639px) {
  html body.aesthetic-crm .service-rows .service-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); }
  html body.aesthetic-crm .service-rows .service-row > strong { grid-column: 1; }
  html body.aesthetic-crm .service-rows .service-row > .status-pill { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  html body.aesthetic-crm .service-rows .service-row > span:not(.status-pill) { grid-column: 1 / -1; }
  html body.aesthetic-crm .service-rows .service-row > .mini-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
}
@media (max-width: 639px) {
  /* "Redeem in procedure" only navigates to Procedures (the Clinical tab on phones); keep the two row actions on one line. */
  html body.aesthetic-crm .entitlement-list .mini-actions .ent-redeem-link { display: none; }
  html body.aesthetic-crm .service-categories .category-card { padding: var(--sp-3); }
  html body.aesthetic-crm .service-categories .category-grid { gap: var(--sp-2); }
}

/* Settings → Branding: accent picker (six named themes; previews live, applies on save). */
html body.aesthetic-crm .accent-picker { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-4); border: var(--hairline) solid var(--line); border-radius: var(--r-md); }
html body.aesthetic-crm .accent-picker legend { padding: 0 var(--sp-1); font-weight: 600; }
html body.aesthetic-crm .accent-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
html body.aesthetic-crm .accent-swatch { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch-min); padding: 4px 12px 4px 6px; border: var(--hairline) solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
html body.aesthetic-crm .accent-swatch input { position: absolute; opacity: 0; pointer-events: none; }
html body.aesthetic-crm .accent-swatch .swatch-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface-1) 40%, transparent); }
html body.aesthetic-crm .accent-swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
html body.aesthetic-crm .accent-swatch:has(input:focus-visible) { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* Steps switch in place: the step area keeps a stable height so the footer and page do not jump. */
html body.aesthetic-crm .procedure-room .proc-step.active { min-height: min(56vh, 520px); }

/* ---------- Audit offenders (D) ---------- */
/* Reception: one queue-width rule (the old 1100 px two-column rule pushed the work panel onto a new row);
   the stored/dragged width is clamped; below 900 px the queue and panel stack and the handle is removed. */
@media (min-width: 1200px) {
  html body.aesthetic-crm .frontdesk-layout { grid-template-columns: clamp(240px, var(--queue-panel-width, 320px), 40%) 8px minmax(0, 1fr); }
}
/* 900–1199: the side column made queue cards ~520 px wide and ~240 px tall; stack panel and queue instead. */
@media (max-width: 1199px) {
  html body.aesthetic-crm .frontdesk-layout { grid-template-columns: minmax(0, 1fr); }
  html body.aesthetic-crm .queue-resize-handle { display: none; }
}
html body.aesthetic-crm .queue-resize-handle { touch-action: none; }
html body.aesthetic-crm .queue-resize-handle:focus-visible::after { background: var(--accent); width: 4px; left: 2px; }
/* Patient directory tools never demand more than the row has. */
html body.aesthetic-crm .patient-directory-tools { grid-template-columns: minmax(min(260px, 100%), 1fr) minmax(0, 180px) minmax(0, 150px) auto; }
@media (max-width: 900px) { html body.aesthetic-crm .patient-directory-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { html body.aesthetic-crm .patient-directory-tools { grid-template-columns: minmax(0, 1fr); } }
/* Flowsheet editor rows live in a ≤560 px drawer: parameter rows wrap two fields per line. */
html body.aesthetic-crm #drdialModal .fse-row.param { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Clinical media viewer: info column, stage padding and text input adapt. */
@media (min-width: 901px) and (max-width: 1100px) { html body.aesthetic-crm .cm-viewer { grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); } }
@media (max-width: 639px) {
  html body.aesthetic-crm .cm-stage { padding: var(--sp-2); }
  html body.aesthetic-crm .cm-text-input { width: min(200px, 100%); }
}

/* Phone sheets: the form's action row stays reachable (sticky, on material), primary action first in reach. */
@media (max-width: 639px) {
  html body.aesthetic-crm #drdialModal:not(.anchored) .modal-panel form > :is(.mini-actions, .form-actions, .modal-actions):last-child {
    position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end;
    margin: var(--sp-3) calc(-1 * var(--sp-4)) 0; padding: var(--sp-2) var(--sp-4) max(var(--sp-2), env(safe-area-inset-bottom));
    background: var(--material-bg); -webkit-backdrop-filter: var(--material-filter); backdrop-filter: var(--material-filter); border-top: var(--hairline) solid var(--line);
  }
}

/* Phones keep notifications and the account menu in the top bar (they were hidden below 640/420 px,
   leaving no way to reach the profile or notifications on a phone). Popovers stay inside the viewport. */
@media (max-width: 639px) {
  html body.aesthetic-crm .medical-topbar .profile-menu, html body.aesthetic-crm .medical-topbar .notification-menu { display: block; position: relative; }
  html body.aesthetic-crm .medical-topbar .topbar-actions { gap: 4px; flex-wrap: nowrap; }
  html body.aesthetic-crm .medical-topbar :is(.avatar-btn, .bell-btn) { width: 36px; height: 36px; min-width: 36px; padding: 0; }
  html body.aesthetic-crm .medical-topbar .topbar-title { min-width: 0; overflow: hidden; }
  html body.aesthetic-crm .medical-topbar .topbar-title :is(h1, .breadcrumb) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.aesthetic-crm .notification-pop { position: fixed; top: calc(var(--topbar-h) + 8px); left: 8px; right: 8px; width: auto; max-width: none; max-height: 70dvh; overflow: auto; }
  html body.aesthetic-crm .profile-pop { right: 0; left: auto; max-width: calc(100vw - 16px); }
}
@media (pointer: coarse) and (max-width: 639px) {
  html body.aesthetic-crm .medical-topbar :is(.avatar-btn, .bell-btn, .topbar-search, .topbar-create) { width: 44px; height: 44px; min-width: 44px; }
}
/* Phone top bar: page title + four icon buttons (search, create, notifications, account). */
@media (max-width: 639px) {
  html body.aesthetic-crm .medical-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
  html body.aesthetic-crm .medical-topbar .breadcrumb { display: none; }
  html body.aesthetic-crm .medical-topbar h1 { font-size: var(--type-section-size); line-height: var(--type-section-line); }
  html body.aesthetic-crm .medical-topbar .topbar-search { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
  html body.aesthetic-crm .medical-topbar .topbar-search > :not(:first-child) { display: none; }
  html body.aesthetic-crm .medical-topbar .topbar-actions > .topbar-create { width: 36px; min-width: 36px; padding: 0; justify-content: center; font-size: 18px; }
  html body.aesthetic-crm .medical-topbar .topbar-actions > .topbar-create::after { content: none; }
  html body.aesthetic-crm .medical-topbar .topbar-create em { display: none; }
  html body.aesthetic-crm .medical-topbar .topbar-actions > .ghost-pill { display: none; }
}

/* Loading skeleton: never wider than the screen (inline 280/420 px lines overflowed phones while loading). */
html body.aesthetic-crm .page-skeleton { min-width: 0; grid-template-columns: minmax(0, 1fr); }
html body.aesthetic-crm .page-skeleton .skeleton-line { max-width: 100%; }
html body.aesthetic-crm .skeleton-table { background: var(--surface-1); }
/* With the queue full-width at 900–1199, its cards have room for the one-row (five-column) layout again. */
@media (min-width: 900px) and (max-width: 1199px) {
  html body.aesthetic-crm .frontdesk-patient-card { grid-template-columns: 42px minmax(180px, 1.2fr) minmax(140px, .8fr) minmax(120px, .6fr) auto; }
  html body.aesthetic-crm .frontdesk-patient-card > :is(.frontdesk-clinical, .frontdesk-state, .frontdesk-actions) { grid-column: auto; grid-row: auto; }
}

/* Service categories: a two-row strip that scrolls sideways, so the page height stays fixed however many
   categories a clinic has (the grid grew by one row per few categories). */
html body.aesthetic-crm .service-categories .category-grid { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding-bottom: var(--sp-2); }
html body.aesthetic-crm .service-categories .category-grid > .category-card { scroll-snap-align: start; }

/* Patient compact header (UI.patientChip, Phase 3) */
.ui-patient-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; padding: var(--sp-2) var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--r-md); background: var(--surface-1); }
.ui-patient-chip .pc-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; }
.ui-patient-chip .pc-body strong { font-size: var(--type-body-size); line-height: var(--type-body-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-patient-chip .pc-meta { display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); color: var(--ink-3); font-size: var(--type-secondary-size); line-height: var(--type-secondary-line); }
.ui-patient-chip .pc-mrn { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.ui-patient-chip .pc-change { flex: none; }

/* Global clinic switcher (Phase 3): top bar on tablet/desktop; inside the navigation sheet on phones. */
html body.aesthetic-crm .clinic-switcher-slot:empty, html body.aesthetic-crm .sidebar-clinic-switcher:empty { display: none; }
html body.aesthetic-crm .clinic-switcher select { min-height: 32px; max-width: 220px; padding: 0 28px 0 10px; border-radius: var(--r-pill); font-weight: 500; }
html body.aesthetic-crm .sidebar-clinic-switcher { display: none; margin: 0 0 var(--sp-2); }
html body.aesthetic-crm .sidebar-clinic-switcher select { width: 100%; max-width: none; }
@media (max-width: 899px) {
  html body.aesthetic-crm .clinic-switcher-slot { display: none; }
  html body.aesthetic-crm .medical-sidebar .sidebar-clinic-switcher { display: block; }
}

/* Patient profile form (registration = edit, Phase 3) */
html body.aesthetic-crm .patient-profile-form { display: grid; gap: var(--sp-3); }
html body.aesthetic-crm .patient-profile-form .allergy-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-1) 0; }
html body.aesthetic-crm .patient-profile-form .chip-btn { min-height: 28px; padding: 0 10px; border: var(--hairline) solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--type-secondary-size); }
html body.aesthetic-crm .patient-profile-form .chip-btn:hover { border-color: var(--accent); color: var(--accent); }
html body.aesthetic-crm .patient-profile-form .form-error { margin: 0; color: var(--danger); font-weight: 500; }
@media (pointer: coarse) { html body.aesthetic-crm .patient-profile-form .chip-btn { min-height: 36px; } }

/* Patient 360 overview cards (Phase 3): one glance, each card opens its record. */
html body.aesthetic-crm .p360-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
html body.aesthetic-crm .p360-card { display: grid; align-content: start; gap: var(--sp-2); min-width: 0; padding: var(--sp-3) var(--sp-4); border: var(--hairline) solid var(--line); border-radius: var(--r-md); background: var(--surface-1); overflow-wrap: anywhere; }
html body.aesthetic-crm .p360-card.is-wide { grid-column: 1 / -1; }
html body.aesthetic-crm .p360-card[role="button"] { cursor: pointer; transition: border-color var(--dur-fast, 120ms) ease; }
html body.aesthetic-crm .p360-card[role="button"]:hover, html body.aesthetic-crm .p360-card[role="button"]:focus-visible { border-color: var(--accent); }
html body.aesthetic-crm .p360-card h3 { margin: 0; color: var(--ink-3); font-size: var(--type-secondary-size); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
html body.aesthetic-crm .p360-card-body { display: grid; gap: var(--sp-1); min-width: 0; }
html body.aesthetic-crm .p360-card-body p { margin: 0; }
html body.aesthetic-crm .p360-nba { padding: 0; border: 0; background: none; }
html body.aesthetic-crm .p360-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
html body.aesthetic-crm .p360-list li { display: grid; gap: 2px; min-width: 0; }
html body.aesthetic-crm .p360-list small { color: var(--ink-3); }
html body.aesthetic-crm .p360-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--sp-3); margin: 0; }
html body.aesthetic-crm .p360-dl dt { color: var(--ink-3); font-size: var(--type-secondary-size); }
html body.aesthetic-crm .p360-dl dd { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.aesthetic-crm .p360-progress { display: block; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
html body.aesthetic-crm .p360-progress i { display: block; height: 100%; background: var(--accent); }
html body.aesthetic-crm .p360-figure { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
html body.aesthetic-crm .p360-figure.is-due, html body.aesthetic-crm .p360-overdue { color: var(--danger); }
html body.aesthetic-crm .p360-photo-strip { display: flex; gap: var(--sp-2); overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: var(--sp-1); }
html body.aesthetic-crm .p360-photo { flex: none; display: grid; gap: 2px; width: 92px; margin: 0; }
html body.aesthetic-crm .p360-photo-img { display: block; width: 92px; height: 92px; border-radius: var(--r-sm); background: var(--surface-2) center / cover no-repeat; }
html body.aesthetic-crm .p360-photo figcaption { font-size: var(--type-secondary-size); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.aesthetic-crm .p360-photo figcaption small { display: block; color: var(--ink-3); }
html body.aesthetic-crm .record-flash { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* Patient timeline filters (Phase 3) */
html body.aesthetic-crm .timeline-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
html body.aesthetic-crm .timeline-filters label { display: grid; gap: 2px; min-width: 0; flex: 1 1 140px; max-width: 220px; font-size: var(--type-secondary-size); color: var(--ink-3); }

/* Reception (Phase 3): submit row + the "Patient is here" walk-in entry; queue card ⋯ menu. */
html body.aesthetic-crm .reception-submit-row { display: grid; gap: var(--sp-2); }
html body.aesthetic-crm .reception-card-menu .appointment-action-menu { right: 0; left: auto; }
@media (max-width: 800px) {
  /* Phones/tablets: the ⋯ stays on the action row (no extra card height); the menu opens as a sheet above the bottom nav. */
  html body.aesthetic-crm .frontdesk-patient-card .frontdesk-actions { flex-wrap: nowrap; }
  html body.aesthetic-crm .frontdesk-patient-card .frontdesk-actions > button { min-width: 0; }
  html body.aesthetic-crm .reception-card-menu { flex: none; }
  html body.aesthetic-crm .reception-card-menu .appointment-action-menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; z-index: 70; }
}
html body.aesthetic-crm .walkin-note { margin: 0; font-size: var(--type-secondary-size); }
html body.aesthetic-crm .p360-card-body strong { font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 600; letter-spacing: normal; }
html body.aesthetic-crm .p360-card-body .p360-when { font-size: 1.0625rem; }
html body.aesthetic-crm .p360-progress { height: 6px; margin-top: 2px; background: var(--line); }
html body.aesthetic-crm .reception-card-menu:not([open]) .appointment-action-menu { display: none; }

/* Phase 4 step 2: the one Suggested next step, Finish's missing fields, quiet save status. */
html body.aesthetic-crm .cw-actions .cw-action { position: relative; }
html body.aesthetic-crm .cw-actions .cw-action.is-suggested { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
html body.aesthetic-crm .cw-actions .cw-action .cw-suggested { position: absolute; top: 6px; right: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on, #fff); font-size: 11px; font-style: normal; font-weight: 600; line-height: 18px; letter-spacing: .02em; }
html body.aesthetic-crm .cw-missing textarea, html body.aesthetic-crm .cw-missing input, html body.aesthetic-crm [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
html body.aesthetic-crm .consultation-primary-reason.is-alert { color: var(--danger); font-weight: 600; }

/* Phase 4 step 3: one-line auto-growing clinical fields (ddAutoGrow sets the height; the cap scrolls). */
html body.aesthetic-crm textarea.ui-autogrow { min-height: 38px; max-height: 240px; resize: none; overflow-y: hidden; line-height: 1.45; }
/* Dictation sits in the field's caption row: no extra line under every field. */
html body.aesthetic-crm #aesConsultationForm .has-dictation { position: relative; }
html body.aesthetic-crm #aesConsultationForm .has-dictation > .dictation-bar { position: absolute; top: -3px; right: 0; margin: 0; float: none; }
html body.aesthetic-crm #aesConsultationForm .has-dictation > textarea { margin-top: 2px; }
html body.aesthetic-crm .dictation-mic:focus-visible, html body.aesthetic-crm .dictation-lang:focus-visible, html body.aesthetic-crm .cs-suggest button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 480px) {
  /* Phones: the language stays as chosen on this device; the mic stays one tap away. */
  html body.aesthetic-crm #aesConsultationForm .has-dictation > .dictation-bar .dictation-lang { width: 44px !important; padding: 0 2px !important; }
}