/* ClinicPlatform design system (M27).
   Layer 1  structural tokens  - platform controlled, never tenant configurable.
   Layer 2  semantic tokens    - the only tokens written by theme_json (TOKEN_MAP in shell.js).
   Layer 3  derived tokens     - computed from layer 2, never stored anywhere.
*/

:root {
  /* Layer 2: brandable semantic colour tokens. */
  --surface: #f3f3f3;
  --surface-raised: #ffffff;
  --ink: #1b1a19;
  --muted: #5b5b5b;
  --primary: #2f5d8a;
  --primary-text: #ffffff;
  --accent: #2f5d8a;
  --secondary: #3b3a39;
  --danger: #b42318;
  --border: #d1d1d1;
  --focus: #2f5d8a;
  --status-confirmed: #2f5d8a;
  --status-cancelled: #5b5b5b;
  --status-held: #8a5a12;
  --working: #ffffff;
  --non-working: #ededed;
  --absence: #d8d8d8;

  /* Layer 1: statuses outside the branding contract. */
  --status-completed: #2c6a4f;
  --status-no-show: #a8531a;

  /* Layer 1: typography. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 0.875rem;
  --font-display: 1.0625rem;
  --font-title: 0.9375rem;
  --font-body: 0.875rem;
  --font-label: 0.8125rem;
  --font-caption: 0.75rem;
  --font-num: 0.8125rem;
  --font-read: 0.9375rem;
  --line: 1.45;
  --line-tight: 1.25;
  --line-read: 1.6;
  --weight-medium: 500;
  --weight-strong: 600;

  /* Layer 1: spacing, 4px base. */
  --space-05: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --pad-cell: 0.375rem 0.5rem;
  --pad-control: 0.375rem 0.625rem;
  --pad-panel: 1rem;

  /* Layer 1: shape, controls, chrome. */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-lg: 0.625rem;
  --control-h: 2.25rem;
  --control-h-sm: 2rem;
  --touch: 44px;
  --nav-width: 15rem;
  --rail-width: 3.5rem;
  --axis-width: 3.25rem;
  --bar-height: 2.75rem;
  --shadow-overlay: 0 1rem 2.5rem rgb(28 36 48 / 0.22);
  --read-measure: 68ch;

  /* Layer 3: derived. */
  --hover: color-mix(in srgb, var(--ink) 4%, var(--surface-raised));
  --sunken: color-mix(in srgb, var(--ink) 3%, var(--surface));
  --primary-tint: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
  --primary-tint-strong: color-mix(in srgb, var(--primary) 20%, var(--surface-raised));
  --danger-tint: color-mix(in srgb, var(--danger) 10%, var(--surface-raised));
  --line-hour: color-mix(in srgb, var(--ink) 17%, var(--surface-raised));
  --line-half: color-mix(in srgb, var(--ink) 8%, var(--surface-raised));
  --line-quarter: color-mix(in srgb, var(--ink) 4%, var(--surface-raised));
  --line-column: color-mix(in srgb, var(--ink) 13%, var(--surface-raised));
}

@media (pointer: coarse) {
  :root {
    --control-h: var(--touch);
    --control-h-sm: 2.5rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Class display utilities (e.g. .stack { display: grid }) must not un-hide [hidden]. */
[hidden] { display: none !important; }

html {
  font-size: 100%;
  color-scheme: light;
}

body.staff-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--font-body);
  line-height: var(--line);
  background: var(--surface);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-weight: var(--weight-strong);
  line-height: var(--line-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--font-display); margin: 0; }
h2 { font-size: var(--font-title); margin: 0 0 var(--space-2); }
h3 { font-size: var(--font-label); margin: 0 0 var(--space-2); }

a { color: var(--primary); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  z-index: 40;
  padding: var(--space-2) var(--space-3);
  background: var(--primary);
  color: var(--primary-text);
  border-radius: var(--radius);
}

.skip-link:focus { top: var(--space-2); }

.muted { color: var(--muted); }
.error { color: var(--danger); }
.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- controls ----------------------------------------------------------- */

.btn,
.icon-btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--pad-control);
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-label);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) { background: var(--hover); }

.btn:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary,
button[type="submit"] {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 88%, #000);
}

.btn-secondary {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--border);
}

.btn-tertiary,
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}

.btn-tertiary:hover:not(:disabled) { background: var(--primary-tint); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}

.btn-danger:hover:not(:disabled) { background: var(--danger-tint); }

.btn-danger-solid {
  background: var(--danger);
  color: var(--primary-text);
  border-color: var(--danger);
}

.icon-btn {
  min-width: var(--control-h);
  padding: 0;
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.segmented,
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.segmented button,
.view-switch button {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.segmented button[aria-pressed="true"],
.view-switch button[aria-pressed="true"] {
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: var(--weight-strong);
  box-shadow: 0 0 0 1px var(--border);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--font-label);
}

.chip[aria-pressed="true"] {
  background: var(--primary-tint);
  border-color: var(--primary);
  font-weight: var(--weight-medium);
}

.chip .chip-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: var(--font-caption);
}

.chip .chip-swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--resource-tone, var(--accent));
}

.chip .avatar {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.5625rem;
}

.chip-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
}

.chip:has(.chip-identity) {
  align-items: center;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.chip-location,
.cal-identity-location {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.cal-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
}

.cal-head-identity .cal-identity-location {
  text-transform: none;
  letter-spacing: 0;
}

/* --- inputs ------------------------------------------------------------- */

input, select, textarea {
  min-height: var(--control-h);
  padding: var(--pad-control);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  max-width: 100%;
}

textarea { line-height: var(--line-read); }

input[type="checkbox"],
input[type="radio"] {
  min-height: 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--sunken);
  color: var(--muted);
}

input[aria-invalid="true"] { border-color: var(--danger); }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-label);
}

.field > span,
.field-label {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.field > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
}

.field-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.form-grid { display: grid; gap: var(--space-3); }
.form-section-title {
  margin: var(--space-2) 0 0;
  font-size: var(--font-label);
  font-weight: var(--weight-strong);
}
.form-grid-2 { display: grid; gap: var(--space-3); }

.offer-discount,
.offer-link-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.offer-link-box code {
  display: block;
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.platform-app .page-main {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  max-width: 80rem;
}

.platform-app .admin-panel {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.platform-app .admin-panel > .card {
  display: grid;
  gap: var(--space-3);
}

.platform-app .admin-panel h2 {
  margin: 0;
}

.platform-app select[multiple] {
  min-height: 8rem;
}

.platform-app .status-pre {
  margin: 0;
  padding: var(--pad-panel);
  overflow: auto;
  font-size: var(--font-caption);
  background: var(--sunken);
  border-radius: var(--radius);
}

.journal-save-state[data-state="saving"] { color: var(--muted); }
.journal-save-state[data-state="saved"] { color: var(--muted); }
.journal-save-state[data-state="failed"] { color: var(--danger, #b42318); }
.journal-save-state[data-state="offline"] { color: var(--danger, #b42318); }

.wizard-layout {
  display: grid;
  gap: var(--space-4);
}

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-step {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
}

.wizard-step button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wizard-step button:disabled {
  cursor: default;
}

.wizard-step-meta {
  color: var(--muted);
  font-size: var(--font-caption);
}

.wizard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.wizard-summary span {
  color: var(--muted);
}

.wizard-next {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.wizard-next h3 {
  margin: 0;
  font-size: 1rem;
}

.wizard-next-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-next-list li {
  display: grid;
  gap: 0.15rem;
}

.wizard-next-list span,
.wizard-link {
  overflow-wrap: anywhere;
}

.wizard-step.is-current {
  color: var(--ink);
  border-color: var(--primary);
}

.wizard-step.is-complete {
  color: var(--status-completed);
}

.wizard-link { font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .wizard-steps {
    flex-direction: column;
  }

  .wizard-step {
    width: 100%;
  }

  .wizard-layout .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wizard-layout .form-actions .btn-primary,
  .wizard-layout .form-actions .btn-secondary,
  .wizard-layout .form-actions button,
  .wizard-layout .btn-primary,
  .wizard-layout .btn-secondary {
    width: 100%;
  }
}

.journal-ai {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.journal-ai-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.journal-ai-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.journal-ai-head h4 { margin: 0; font-size: 1rem; }

.journal-ai-head .section-hint,
.journal-ai .section-hint { margin: 0; }

.badge-ai {
  color: var(--status-held);
  border-color: color-mix(in srgb, var(--status-held) 35%, var(--surface-raised));
}

.journal-ai-actions { padding: 0; }

.journal-ai.is-recording {
  border-color: color-mix(in srgb, var(--status-held) 55%, var(--border));
}

.journal-ai.is-paused {
  border-color: var(--border);
}

.journal-ai-live {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
}

.journal-ai-live[hidden],
#journal-ai-mic-field[hidden] { display: none; }

.journal-ai-toolbar #journal-ai-mic-field {
  flex: 0 1 11rem;
  min-width: 8rem;
  margin: 0;
}

.journal-ai-meter {
  display: block;
  width: 4.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: calc(var(--radius) / 2);
}

.journal-ai-recording {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--status-held);
}

.journal-ai.is-paused .journal-ai-recording,
.journal-ai-recording[data-tone="idle"] {
  color: var(--muted);
  font-weight: 500;
}

.journal-completeness {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.journal-completeness-close {
  justify-self: end;
}

.journal-completeness-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.journal-completeness-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  list-style: none;
}

.journal-completeness-head::-webkit-details-marker { display: none; }

.journal-completeness-head h4 {
  margin: 0;
  font-size: var(--font-label);
  flex: 1 1 100%;
}

.journal-completeness-head .section-hint { margin: 0; flex: 1 1 8rem; }

.badge-completeness-green {
  color: var(--status-completed);
  border-color: color-mix(in srgb, var(--status-completed) 35%, var(--surface-raised));
}

.badge-completeness-yellow {
  color: var(--status-held);
  border-color: color-mix(in srgb, var(--status-held) 35%, var(--surface-raised));
}

.badge-completeness-red {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--surface-raised));
}

.journal-completeness-findings {
  list-style: decimal;
  margin: 0;
  padding: 0 0 0 1.4rem;
  display: block;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.completeness-finding {
  display: list-item;
  padding: 0.35rem 0.25rem 0.35rem 0;
  min-width: 0;
  border: 0;
}

.completeness-finding + .completeness-finding {
  border-top: 1px solid var(--border);
}

.completeness-finding.is-selected {
  background: color-mix(in srgb, var(--accent, var(--primary)) 10%, transparent);
  border-radius: var(--radius);
  margin-left: -0.25rem;
  padding-left: 0.25rem;
}

.completeness-finding-body {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.completeness-finding-summary {
  font: inherit;
  font-weight: var(--weight-medium);
  color: inherit;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
}

.completeness-finding-summary::-webkit-details-marker { display: none; }

.completeness-mark {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.completeness-mark.is-required { color: var(--danger); }
.completeness-mark.is-done { color: var(--status-completed); }

.completeness-finding p { margin: 0; }

.completeness-finding-question {
  flex: 1 1 8rem;
  min-width: 0;
}

.completeness-finding-missing,
.completeness-finding-why {
  color: var(--text-muted, inherit);
  font-size: 0.95em;
}

.completeness-why {
  font-size: var(--font-caption);
}

.completeness-why > summary {
  cursor: pointer;
  color: var(--muted);
}

.completeness-answer-row {
  display: grid;
  gap: var(--space-1);
}

.completeness-answer-row textarea {
  min-height: 4.5rem;
  max-height: 8rem;
  resize: vertical;
}

.completeness-reply {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.completeness-reply[hidden] { display: none; }

.completeness-finding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.completeness-dismiss-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 14rem;
  min-width: 0;
}

.search-field input {
  width: 100%;
  padding-left: 2rem;
}

/* A search field wider than a long name is wasted width, not generosity. */
.filter-bar .search-field { max-width: 26rem; }

.search-field .icon {
  position: absolute;
  left: 0.5rem;
  color: var(--muted);
  pointer-events: none;
}

/* --- surfaces ----------------------------------------------------------- */

.panel,
.card,
.admin-panel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.panel { padding: var(--pad-panel); }
.card { padding: var(--pad-panel); }
.admin-panel { padding: var(--pad-panel); }

.panel-flush { padding: 0; overflow: hidden; }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) var(--pad-panel);
  border-bottom: 1px solid var(--border);
}

.panel-head h2 { margin: 0; }

.panel-body { padding: var(--pad-panel); }

.section-hint {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--font-label);
}

.stack { display: grid; gap: var(--space-3); }
.stack-4 { display: grid; gap: var(--space-4); }

.page-kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--font-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.banner {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--font-label);
}

.placement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.placement-banner p {
  margin: 0;
}

.follow-up-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.visit-sheet {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.visit-sheet[hidden] { display: none; }

.visit-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.visit-facts div { display: grid; gap: 2px; }
.visit-facts dt { margin: 0; color: var(--muted); font-size: var(--font-caption); }
.visit-facts dd { margin: 0; font-weight: var(--weight-medium); }

.visit-latest .journal-entry .body {
  max-width: none;
}

.journal-shell.is-visit,
.journal-shell.is-visit > .journal-workspace:not([hidden]) {
  overflow: hidden;
  min-height: 0;
}

.journal-shell.is-visit > .journal-workspace:not([hidden]) {
  min-height: 0;
  flex: 1 1 auto;
}

.journal-shell.is-visit .journal-stage {
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 22.5rem);
  gap: var(--space-3);
  align-items: stretch;
}

.journal-shell.is-visit .journal-courses,
.journal-shell.is-visit .journal-timeline {
  display: none;
}

.journal-shell.is-visit .journal-panels,
.journal-shell.is-visit .journal-panels.has-side,
.journal-shell.is-visit .journal-panels.has-side.has-note {
  display: contents;
}

.journal-shell.is-visit .journal-side { display: contents; }

.journal-shell.is-visit .journal-checkout {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  min-width: 20rem;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}

.journal-shell.is-visit .journal-compose-overlay.is-open {
  position: static;
  grid-column: 1;
  grid-row: 1;
  height: auto;
  max-height: none;
  min-height: 0;
  inset: auto;
  left: auto;
  right: auto;
  overflow: hidden;
  align-self: stretch;
}

@media (max-width: 767px) {
  .journal-shell.is-visit,
  .journal-shell.is-visit > .journal-workspace:not([hidden]) {
    overflow: auto;
  }
  .journal-shell.is-visit .journal-stage {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
    align-items: start;
  }
  .journal-shell.is-visit .journal-checkout,
  .journal-shell.is-visit .journal-compose-overlay.is-open {
    grid-column: 1;
    grid-row: auto;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .journal-checkout { max-width: none; }
}

.calendar-placing .time-slot {
  cursor: crosshair;
}

.banner-error,
.banner-unassigned {
  background: var(--danger-tint);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--surface-raised));
}

.banner-unassigned {
  color: var(--danger);
  font-weight: var(--weight-medium);
}

/* --- status, feedback --------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 0.375rem;
  min-height: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  color: var(--muted);
  white-space: nowrap;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}

.status-confirmed .status-dot { background: var(--status-confirmed); }
.status-held .status-dot { background: var(--status-held); }
.status-cancelled .status-dot { background: var(--status-cancelled); }
.status-completed .status-dot { background: var(--status-completed); }
.status-no_show .status-dot { background: var(--status-no-show); }
.status-failed .status-dot { background: var(--danger); }
.status-paid .status-dot { background: var(--status-completed); }

.empty-state, .error-state, .loading-state {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  color: var(--muted);
  text-align: center;
  font-size: var(--font-label);
}

.error-state { color: var(--danger); }

.skeleton-row {
  height: 1rem;
  border-radius: var(--radius-sm);
  background: var(--sunken);
}

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 22rem;
}

.toast {
  background: var(--ink);
  color: var(--surface-raised);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-label);
  box-shadow: var(--shadow-overlay);
}

/* --- tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.data-table,
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-raised);
  font-size: var(--font-body);
}

.data-table caption { text-align: left; }

.data-table th,
.data-table td,
table.data th,
table.data td {
  padding: var(--pad-cell);
  text-align: left;
  border-bottom: 1px solid var(--line-quarter);
  vertical-align: middle;
}

#mig-grid .import-original {
  color: var(--muted);
  text-decoration: line-through;
}

#mig-grid .import-normalized {
  font-weight: var(--weight-strong);
}

#mig-grid .import-corrected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.data-table thead th,
table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line-hour);
  font-size: var(--font-caption);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.data-table tbody tr:hover { background: var(--hover); }
.data-table tbody tr:focus-within { background: var(--primary-tint); }

.data-table .cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table .cell-actions {
  text-align: right;
  white-space: nowrap;
}

.panel-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-left: auto;
}

.panel-head-actions .field-inline {
  width: auto;
  margin: 0;
}

.data-table tbody tr.entitlement-archived {
  background: var(--sunken);
}

.data-table tbody tr.entitlement-archived:hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--sunken));
}

.data-table td .badge + .badge {
  margin-left: var(--space-1);
}

.row-link {
  display: block;
  color: var(--ink);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.row-link:hover { color: var(--primary); text-decoration: underline; }

.row-sub {
  display: block;
  color: var(--muted);
  font-size: var(--font-caption);
}

.row-action {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  opacity: 0;
}

tr:hover .row-action,
tr:focus-within .row-action,
.row-action:focus-visible { opacity: 1; }

tr.is-new { background: var(--primary-tint); }

/* --- overlays ----------------------------------------------------------- */

html.overlay-open,
html.overlay-open body {
  overflow: hidden;
}

dialog {
  position: fixed;
  z-index: 200;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  padding: var(--pad-panel);
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100dvh - 2rem));
  overflow: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}

dialog::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }

dialog h2 { margin-top: 0; }

dialog menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.dialog-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

dialog.drawer {
  width: min(26rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  border-radius: 0;
  border-width: 0 0 0 1px;
  overflow-y: auto;
}

dialog.card-modal {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(36rem, calc(100vw - 2rem));
  height: auto;
  max-height: calc(100dvh - 2rem);
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 1rem;
  border-width: 1px;
  box-shadow: 0 1.25rem 3rem rgb(28 36 48 / 0.16);
  padding: var(--space-4);
  overflow: auto;
  overscroll-behavior: contain;
}

dialog.card-modal .dialog-head {
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.card-heading {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.card-heading-text { min-width: 0; }

.card-kicker {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

dialog.card-modal h2 {
  margin: 0;
  font-size: var(--font-display);
  line-height: var(--line-tight);
  overflow-wrap: anywhere;
}

.card-contact-line {
  margin: var(--space-1) 0 0;
  color: var(--ink);
  font-size: var(--font-label);
}

.card-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--sunken);
  border-radius: var(--radius);
}

.card-fact { margin: 0; min-width: 0; }

.card-fact dt {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.card-fact dd {
  margin: 0;
  font-weight: var(--weight-strong);
  overflow-wrap: anywhere;
}

.card-facts .field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  min-width: 0;
}

.card-facts .field > span:first-child {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.card-facts .field strong {
  font-weight: var(--weight-strong);
  overflow-wrap: anywhere;
}

dialog.card-modal #card-body { gap: var(--space-2); }

dialog.card-modal .card-move-row { margin-top: var(--space-2); }

dialog.card-modal #card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

dialog.card-modal #card-actions > .btn,
dialog.card-modal #card-actions > button,
dialog.card-modal form menu > .btn,
dialog.card-modal form menu > button {
  width: 100%;
  justify-content: center;
  margin: 0;
}

dialog.card-modal #card-place,
dialog.card-modal #card-cancel-booking,
dialog.card-modal #card-close {
  grid-column: 1 / -1;
}

dialog.card-modal #card-cancel-booking { margin-top: var(--space-1); }

@media (max-width: 640px) {
  dialog.card-modal {
    top: 50%;
    bottom: auto;
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-lg);
    overflow: auto;
  }

  dialog.card-modal .card-facts,
  dialog.card-modal #card-actions {
    grid-template-columns: 1fr;
  }
}

/* --- application shell -------------------------------------------------- */

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

.app-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.app-nav.open { display: flex; }

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-height: var(--control-h);
  font-size: var(--font-title);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
}

.app-brand::before,
.login-mark::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  background: url("/brand/klinikflow-mark.png") center / contain no-repeat;
}

.app-brand::before {
  width: 1.65rem;
  height: 1.5rem;
}

#org-logo {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.app-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group + .nav-group { margin-top: var(--space-3); }

.nav-group[hidden] { display: none; }

.nav-group-label {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  line-height: var(--line-tight);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.app-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--font-body);
}

.app-nav a[hidden] { display: none; }

.app-nav a:hover { background: var(--hover); }

.app-nav a[aria-current="page"] {
  background: var(--primary-tint);
  font-weight: var(--weight-strong);
  box-shadow: inset 3px 0 0 0 var(--primary);
}

.app-nav .nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--muted);
}

.app-nav a[aria-current="page"] .nav-icon { color: var(--primary); }

.app-nav .nav-label { flex: 1; min-width: 0; }

.nav-unread {
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.25rem;
}

.inbox-layout {
  display: grid;
  gap: var(--space-4);
}

.inbox-list,
.inbox-messages,
.inbox-recipients {
  display: grid;
  gap: var(--space-2);
}

.inbox-item {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  text-align: left;
}

.inbox-item[aria-current="true"] {
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 0 var(--primary);
}

.inbox-thread-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.inbox-thread-head #thread-people { margin: 0; }

.inbox-message {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.inbox-reply {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.inbox-attachments {
  margin: var(--space-2) 0 0;
  padding-left: 1.2rem;
}

.inbox-attachments a {
  color: var(--primary);
}

.inbox-recipient {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inbox-advanced {
  margin: var(--space-3) 0;
}

.inbox-advanced summary {
  cursor: pointer;
  color: var(--muted);
}

.app-nav-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.app-nav-foot .muted { font-size: var(--font-caption); }

.account { width: 100%; min-width: 0; }

.account > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-label);
}

.account > summary::-webkit-details-marker { display: none; }
.account > summary:hover { background: var(--hover); }

.account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) 0 0;
}

.account-menu button {
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
}

.account-menu button:hover { background: var(--hover); }

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-weight: var(--weight-strong);
  flex: 0 0 auto;
}

.app-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-bar,
.app-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  min-height: var(--bar-height);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.page-title {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--font-display);
}

.page-context {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.page-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  overflow: visible;
}

#bulk-notice:not([hidden]),
#bulk-notice-mobile:not([hidden]) {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-label);
}

.filter-bar[hidden] { display: none; }

.filter-bar .filter-label {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.filter-spacer { margin-left: auto; }

main { padding: var(--space-4); }

.page-main {
  padding: var(--space-4);
  min-width: 0;
}

.work-surface {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  overflow: auto;
}

#nav-toggle { display: inline-flex; }

/* --- login -------------------------------------------------------------- */

.login-page {
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
}

.login-card {
  width: min(23rem, 100%);
  margin: 0;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.login-page .login-card h1 {
  font-size: 1.375rem;
  margin: 0 0 var(--space-4);
}

.login-mark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--font-label);
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
  color: var(--secondary);
}

.login-mark::before {
  width: 2rem;
  height: 1.8rem;
}

.login-mark .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary);
}

.login-card .form-grid { gap: var(--space-3); }
.login-card button[type="submit"] { width: 100%; margin-top: var(--space-2); }
.login-card .error { margin: 0; font-size: var(--font-label); }
.login-card .mfa-qr {
  display: grid;
  place-items: center;
  margin: var(--space-3) 0;
  min-height: 180px;
}
.login-card .mfa-qr svg { display: block; }
.login-card .mfa-manual {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-caption);
  word-break: break-all;
}

.login-foot {
  margin: var(--space-4) 0 0;
  font-size: var(--font-caption);
  color: var(--muted);
}

.public-card {
  width: min(48rem, 100%);
  max-width: 100%;
  min-width: 0;
  margin: var(--space-5) auto;
  overflow-x: clip;
}
.manage-card { max-width: 40rem; }
.manage-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.manage-booking {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.manage-when {
  margin: 0;
  font-weight: var(--weight-medium);
  font-size: var(--font-title);
}
.manage-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}
.manage-meta dt {
  color: var(--muted);
  font-size: var(--font-caption);
}
.manage-meta dd { margin: 0; }
.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.manage-move {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.manage-move h2 { margin: 0 0 var(--space-2); }

.practitioner-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
  min-width: 0;
}
.field:has(.practitioner-card) {
  position: relative;
}
.field:has(.practitioner-card) > #practitioner-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.practitioner-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.practitioner-preview .avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.75rem;
  flex: 0 0 auto;
}

.practitioner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.practitioner-card.is-selected,
.practitioner-card[aria-checked="true"] {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.practitioner-card .avatar {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.125rem;
}

.practitioner-card-name {
  font-weight: var(--weight-medium);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.public-card .form-grid { gap: var(--space-4); }
.public-card [hidden] { display: none !important; }
.public-cancel {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.issued-list {
  display: grid;
  gap: var(--space-4);
}

.issued-booking {
  display: grid;
  gap: var(--space-2);
}

.issued-booking .when {
  margin: 0;
  font-weight: var(--weight-medium);
}

.banner-ok {
  background: color-mix(in srgb, var(--status-completed) 12%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--status-completed) 35%, var(--surface-raised));
}
.public-card fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
}
.public-card fieldset.field > legend {
  padding: 0;
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.phone-field {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.phone-field select {
  width: 9.5rem;
  flex: 0 0 auto;
}

.phone-field input {
  flex: 1 1 auto;
  min-width: 0;
}

.date-field {
  position: relative;
  display: flex;
  align-items: center;
}

.date-field input[type="date"] {
  width: 100%;
  padding-right: 2.75rem;
}

.date-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.date-field-btn {
  position: absolute;
  right: 0.25rem;
  z-index: 1;
  width: var(--control-h);
  min-width: var(--control-h);
  height: calc(var(--control-h) - 0.375rem);
  min-height: unset;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--primary);
}

.date-field-btn:hover:not(:disabled) {
  background: var(--primary-tint);
}

.copy-field {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.copy-field input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-num);
  letter-spacing: 0.02em;
  background: var(--sunken);
  cursor: default;
}

.copy-field-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.slot-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.slot-list button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.public-when { display: grid; gap: var(--space-4); min-width: 0; }
.public-calendar-wrap { min-width: 0; }
.public-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.public-calendar-nav h2 { margin: 0; font-size: 1rem; }
.public-calendar {
  display: grid;
  grid-template-columns: 2rem repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: var(--space-3);
  min-width: 0;
}
.public-calendar .cal-head,
.public-calendar .cal-week {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}
.public-day {
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.15rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--sunken);
  color: var(--muted);
}
.public-day.is-open { background: #e5f2e4; color: var(--text); }
.public-day.is-few { background: #f8efd4; color: var(--text); }
.public-day.is-today { box-shadow: inset 0 0 0 2px var(--text); }
.public-day.is-selected,
.public-day[aria-pressed="true"] {
  background: #d9e6f5;
  box-shadow: inset 0 0 0 2px #2f5f93;
  color: var(--text);
}
.public-day:disabled { opacity: 0.55; }
.public-day-count { display: block; font-size: 0.7rem; }
.slot-group { width: 100%; margin: 0; font-size: 0.8rem; color: var(--muted); }
#cancel-toggle { margin-top: var(--space-4); }
@media (min-width: 720px) {
  .public-when { grid-template-columns: minmax(16rem, 1.2fr) minmax(12rem, 1fr); align-items: start; }
}
.public-card,
.public-card .form-grid,
.public-card .field,
.public-card .public-when,
.public-card .phone-field {
  min-width: 0;
  max-width: 100%;
}
.public-card button,
.public-card select,
.public-card input {
  max-width: 100%;
  min-width: 0;
}
.public-card .field > select,
.public-card .field > input,
.public-card .field > textarea {
  width: 100%;
  min-width: 0;
}
.public-card #cancel-toggle { white-space: normal; }
.public-card .phone-field select { width: 7.5rem; }
@media (max-width: 719px) {
  .public-body { overflow-x: clip; }
  .public-card {
    width: 100%;
    margin-inline: 0;
  }
  .public-card, .public-when, .public-calendar { overflow-x: clip; }
}

/* --- calendar ----------------------------------------------------------- */

body:has(.calendar-shell) {
  background: var(--surface);
}

body:has(.calendar-shell) .page-bar,
body:has(.calendar-shell) .filter-bar {
  background: var(--surface-raised);
}

body:has(.calendar-shell) .period-nav {
  gap: var(--space-2);
}

body:has(.calendar-shell) .view-switch button[aria-pressed="true"] {
  color: var(--primary);
}

.calendar-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.calendar-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.calendar-stage > .banner {
  margin: 0;
}

#calendar-main {
  min-width: 0;
  overflow-x: auto;
}

#calendar-main.is-loading {
  opacity: 0.72;
  transition: opacity 120ms ease-out;
}

.period-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.period-label {
  min-width: 9rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
}

.calendar-board {
  --slot-height: 2rem;
  user-select: none;
  position: relative;
  display: grid;
  align-items: start;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(28 36 48 / 0.05);
  overflow-x: auto;
  overflow-y: hidden;
}

.cal-corner,
.cal-head,
.col-head {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line-hour);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-caption);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}

/* Only the resource/day header row pins: the group row scrolls away under it. */
.cal-corner,
.col-head {
  position: sticky;
  top: 0;
  z-index: 3;
}

.cal-head {
  justify-content: center;
  border-bottom-color: var(--line-quarter);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.col-head + .col-head { border-left: 1px solid var(--line-column); }

.col-head.is-today {
  color: var(--primary);
  box-shadow: inset 0 2px 0 var(--primary);
}

.col-head.is-today[class*="resource-tone"] {
  box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--resource-tone);
}

.col-head {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.2;
  min-height: 2.5rem;
  font-size: var(--font-label);
}

.col-head > span,
.col-head-text,
.col-head-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 0;
  max-width: none;
}

.col-head .col-head-sub {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.col-head .avatar,
.cal-head-identity .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
  flex: 0 0 auto;
}

.cal-head-identity {
  justify-content: flex-start;
  gap: var(--space-2);
}

.cal-day-group {
  justify-content: space-between;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cal-day-group-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-notice-btn {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--muted);
}

.time-slot.block-select {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.calendar-context {
  position: fixed;
  z-index: 240;
  min-width: 12rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.calendar-context button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  border-radius: 0.35rem;
}

.calendar-context button:hover,
.calendar-context button:focus-visible {
  background: var(--surface-2, color-mix(in srgb, var(--primary) 8%, white));
}

.day-notice-btn:hover,
.day-notice-btn:focus-visible {
  color: var(--primary);
}

.agenda-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

.cal-day-group + .cal-day-group { border-left: 1px solid var(--line-column); }

.cal-day-group.is-today {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.calendar-board.has-day-groups .cal-head-axis,
.calendar-board.has-day-groups .cal-day-group {
  position: sticky;
  top: 0;
  z-index: 4;
}

.calendar-board.has-day-groups .cal-corner,
.calendar-board.has-day-groups .col-head {
  top: 1.75rem;
}

.resource-tone-0 { --resource-tone: var(--primary); }
.resource-tone-1 { --resource-tone: var(--accent); }
.resource-tone-2 { --resource-tone: var(--status-confirmed); }
.resource-tone-3 { --resource-tone: var(--status-held); }

.col-head[class*="resource-tone"] {
  box-shadow: inset 0 -2px 0 var(--resource-tone);
}

.day-col[class*="resource-tone"] {
  box-shadow: inset 2px 0 0 var(--resource-tone);
}

/* Today is carried by the header bar and the column wash stays a hint, so a
   warm palette does not tint a whole day of the week. */
html:not([style*="color-scheme: dark"]) .day-col.is-today {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-raised));
}

html:not([style*="color-scheme: dark"]) .day-col.is-today .time-slot.working {
  background: color-mix(in srgb, var(--primary) 5%, var(--working));
}

html:not([style*="color-scheme: dark"]) .day-col.is-today .time-slot.non-working,
html:not([style*="color-scheme: dark"]) .day-col.is-today .overlay-closed {
  background: color-mix(in srgb, var(--primary) 3%, var(--non-working));
}

html[data-calendar-theme="natteblaa"] .day-col.is-today {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-raised));
}

html[data-calendar-theme="natteblaa"] .day-col.is-today .time-slot.working {
  background: color-mix(in srgb, var(--primary) 20%, var(--working));
}

html[data-calendar-theme="natteblaa"] .day-col.is-today .time-slot.non-working,
html[data-calendar-theme="natteblaa"] .day-col.is-today .overlay-closed {
  background: color-mix(in srgb, var(--primary) 10%, var(--non-working));
}

html[data-calendar-theme="natteblaa"] .col-head.is-today,
html[data-calendar-theme="natteblaa"] .cal-day-group.is-today {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-raised));
  color: var(--ink);
}

html[data-calendar-theme="natteblaa"] .booking-chip.booking-status-cancelled,
html[data-calendar-theme="natteblaa"] .agenda-row.booking-status-cancelled {
  color: var(--ink);
  background: color-mix(in srgb, var(--muted) 28%, var(--surface-raised));
  border: 1px dashed var(--muted);
}

html[data-calendar-theme="natteblaa"] .booking-chip.chip-xs .booking-patient,
html[data-calendar-theme="natteblaa"] .booking-chip.chip-xs .booking-time,
html[data-calendar-theme="natteblaa"] .booking-chip.chip-sm .booking-patient,
html[data-calendar-theme="natteblaa"] .booking-chip.chip-sm .booking-time {
  color: var(--chip-ink, var(--ink));
  font-weight: var(--weight-strong);
}

.time-axis,
.slot-grid {
  display: grid;
  grid-auto-rows: var(--slot-height);
  min-width: 0;
}

.time-axis {
  position: relative;
  background: var(--surface-raised);
  border-right: 1px solid var(--line-hour);
}

.time-slot {
  height: var(--slot-height);
  min-height: var(--slot-height);
  max-height: var(--slot-height);
  overflow: hidden;
  padding: 0;
  background: var(--surface-raised);
  border-top: 1px solid var(--line-quarter);
}

/* Horizontal time hierarchy: hour strongest, half medium, quarter lightest. */
.time-slot.line-hour { border-top-color: var(--line-hour); }
.time-slot.line-half { border-top-color: var(--line-half); }
.time-slot.line-quarter { border-top-color: var(--line-quarter); }
.time-slot.line-first { border-top-color: transparent; }

.time-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0 var(--space-2) 0 0;
  font-size: var(--font-caption);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  border-top: 1px solid transparent;
  background: transparent;
}

/* Only the hour rule crosses the axis. That is what anchors the eye. */
.time-label.line-hour {
  border-top-color: var(--line-hour);
  color: var(--ink);
  font-weight: var(--weight-strong);
  font-size: var(--font-num);
  letter-spacing: 0.01em;
}

.time-label .tick {
  display: inline-block;
  width: 0.375rem;
  height: 1px;
  margin-top: 0.4rem;
  background: var(--line-half);
}

.time-label.line-quarter .tick { background: var(--line-quarter); }

.time-label .work-band {
  width: 3px;
  align-self: stretch;
  background: transparent;
}

.time-label.in-hours .work-band { background: var(--working); }

.day-col {
  position: relative;
  background: var(--surface-raised);
  min-width: 7rem;
  max-width: 100%;
  overflow: hidden;
  border-left: 1px solid var(--line-column);
}

.time-slot.working { background: var(--working); }
.time-slot.non-working { background: var(--non-working); }

/* Wide, low-contrast hatching: closed time reads as texture, not as a zebra. */
.time-slot.absence,
.time-slot.absence:hover {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 9px,
      color-mix(in srgb, var(--absence) 65%, transparent) 9px,
      color-mix(in srgb, var(--absence) 65%, transparent) 11px
    ),
    var(--non-working);
}

.overlay-closed { background: var(--non-working); }

.overlay-absence {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 9px,
      color-mix(in srgb, var(--absence) 65%, transparent) 9px,
      color-mix(in srgb, var(--absence) 65%, transparent) 11px
    ),
    var(--non-working);
}

.time-slot:hover { background: var(--hover); }
.time-slot.working:hover { background: color-mix(in srgb, var(--ink) 7%, var(--working)); }
.time-slot.non-working:hover { background: color-mix(in srgb, var(--ink) 7%, var(--non-working)); }

.absence-label {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.absence-label span {
  padding: 0 0.375rem;
  background: color-mix(in srgb, var(--absence) 70%, var(--surface-raised));
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, var(--absence));
  border-radius: var(--radius-sm);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  color: var(--ink);
  white-space: nowrap;
}

.booking-chip.booking-series::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  bottom: 0.18rem;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}

.booking-chip.chip-xs.booking-series::after { display: none; }

.time-slot.block-select {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.calendar-context {
  position: fixed;
  user-select: none;
  z-index: 240;
  min-width: 12rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  color: var(--ink);
}

.calendar-context button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  border-radius: 0.35rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.calendar-context button:hover,
.calendar-context button:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.booking-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.booking-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0.125rem 0.375rem;
  margin: 0;
  background: var(--chip-fill, var(--accent));
  color: var(--chip-ink, var(--primary-text));
  border: 1px solid color-mix(in srgb, var(--chip-ink, var(--ink)) 22%, var(--chip-fill, var(--accent)));
  border-radius: 0.45rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  font-size: var(--font-caption);
  line-height: 1.3;
  text-align: left;
  cursor: grab;
  overflow: hidden;
}

.booking-chip:hover:not(:disabled) {
  background: var(--chip-fill, var(--accent));
}

.booking-chip.booking-status-cancelled:hover:not(:disabled) {
  background: var(--sunken);
}

.booking-chip.booking-overlay {
  position: absolute;
  pointer-events: auto;
}

.booking-chip .booking-time {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-caption);
  color: color-mix(in srgb, var(--chip-ink, var(--primary-text)) 78%, transparent);
}

.booking-chip .booking-patient {
  min-width: 0;
  font-weight: var(--weight-strong);
  font-size: var(--font-num);
  letter-spacing: -0.01em;
  color: var(--chip-ink, var(--primary-text));
  background: var(--chip-fill, var(--accent));
  overflow-wrap: anywhere;
  white-space: normal;
}

.booking-chip .booking-service {
  color: color-mix(in srgb, var(--chip-ink, var(--primary-text)) 78%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-chip .booking-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: color-mix(in srgb, var(--chip-ink, var(--primary-text)) 78%, transparent);
}

/* Height-aware content. The chip adapts; the grid row never does. */
.booking-chip.chip-xs .booking-service,
.booking-chip.chip-xs .booking-status,
.booking-chip.chip-sm .booking-service { display: none; }

.booking-chip .booking-pay {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  font-size: var(--font-caption);
  font-weight: var(--weight-strong);
  color: var(--chip-ink, var(--primary-text));
}

.booking-chip .booking-pay-mark {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.booking-chip.has-corner {
  padding-right: 1.15rem;
}

.booking-chip.has-corner:has(.booking-pay-money) {
  padding-right: 2rem;
}

.booking-chip-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
}

.booking-chip .booking-pay-money {
  min-width: 0.95rem;
  font-size: 0.62rem;
  letter-spacing: -0.03em;
}

.agenda-row .booking-pay {
  margin-left: auto;
}

.booking-chip .booking-chip-cancel {
  flex-shrink: 0;
  margin-left: 0;
  min-width: 1rem;
  min-height: 1rem;
  padding: 0 0.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--chip-ink, var(--ink)) 12%, transparent);
  color: var(--chip-ink, var(--primary-text));
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.booking-chip.chip-xs .booking-pay,
.booking-chip.chip-sm .booking-pay,
.booking-chip.chip-xs .booking-chip-cancel,
.booking-chip.chip-sm .booking-chip-cancel {
  display: inline-flex;
}

.booking-chip.chip-xs {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
}

.booking-chip.chip-xs .booking-patient {
  font-size: var(--font-caption);
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-chip.is-selected {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px var(--surface-raised);
  z-index: 1;
}

.booking-chip.is-pending {
  cursor: progress;
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.booking-chip.is-dragging { opacity: 0.4; }

.booking-chip.booking-status-held {
  border-style: dashed;
}

.booking-chip.booking-status-cancelled {
  color: var(--muted);
  background: var(--sunken);
  text-decoration: line-through;
}

/* Grid lines only. Appointment colour stays on --chip-fill from the service. */
html:not([style*="color-scheme: dark"]) {
  --line-hour: color-mix(in srgb, var(--ink) 22%, var(--surface-raised));
  --line-half: color-mix(in srgb, var(--ink) 10%, var(--surface-raised));
  --line-quarter: color-mix(in srgb, var(--ink) 5%, var(--surface-raised));
  --line-column: color-mix(in srgb, var(--ink) 16%, var(--surface-raised));
}

.booking-chip.chip-md,
.booking-chip.chip-sm {
  padding-top: 0.15rem;
  padding-bottom: 0.1rem;
  padding-left: 0.4rem;
}

/* The now indicator is the only chromatic horizontal line on the board. */
.now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--danger);
  z-index: 3;
  pointer-events: none;
}

.now-indicator::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

/* The label covers the axis row it sits on, so it replaces that tick
   instead of colliding with it. */
.now-label {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 4;
  padding: 0 0.25rem;
  background: var(--danger);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.5;
  pointer-events: none;
}

.time-slot.drop-target {
  background: var(--primary-tint);
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}

.drop-band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--primary-tint-strong);
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.drop-band-time {
  display: block;
  padding: 0.125rem 0.375rem;
  font-size: var(--font-caption);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

/* Other chips must not steal hit-testing. The source chip keeps pointer
   events: Chromium aborts HTML5 drag if the dragged node gets none. */
body.calendar-dragging .booking-chip:not(.is-dragging) {
  pointer-events: none;
}

.drop-band.drop-conflict {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      color-mix(in srgb, var(--danger) 45%, transparent) 5px,
      color-mix(in srgb, var(--danger) 45%, transparent) 6px
    ),
    var(--danger-tint);
  border-color: var(--danger);
}

.time-slot.drop-conflict {
  background: var(--danger-tint);
  outline-color: var(--danger);
}

.calendar-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--font-label);
}

/* Phone: the same mini-calendar is a popover under the period label.
   Tablet/desktop (≥768px): it is a persistent left rail. One DOM, one date state. */
.calendar-date-nav {
  display: none;
}

.calendar-date-nav.is-open {
  display: block;
  position: absolute;
  z-index: 30;
  top: 0;
  left: var(--space-3);
  right: var(--space-3);
  width: auto;
  max-width: 20rem;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}

.mini-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mini-nav p { margin: 0; font-size: var(--font-label); font-weight: var(--weight-strong); }

.mini-today {
  width: 100%;
  margin-bottom: var(--space-2);
}

.mini-grid, .month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-weekday {
  display: grid;
  place-items: center;
  min-height: 1.25rem;
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  color: var(--muted);
  text-transform: uppercase;
}

.mini-grid button {
  min-height: 2rem;
  min-width: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

.mini-grid .other-month { color: var(--muted); }
.mini-grid .today {
  box-shadow: inset 0 0 0 1.5px var(--primary);
  border-radius: 999px;
}

.mini-grid .selected {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
  border-radius: 999px;
  font-weight: var(--weight-strong);
}

.calendar-date-nav .field { margin-top: var(--space-2); }

/* Month view uses booking density, not a compressed day grid. */
.month-grid {
  gap: 1px;
  background: var(--line-column);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.month-weekday {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-raised);
  font-size: var(--font-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.month-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 5.5rem;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-raised);
  border: 0;
  border-radius: 0;
  text-align: left;
  align-items: stretch;
  justify-content: flex-start;
}

.month-cell.other-month { background: var(--sunken); color: var(--muted); }
.month-cell.is-today .month-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  font-weight: var(--weight-strong);
}
.month-cell.selected { box-shadow: inset 0 0 0 2px var(--primary); }

.month-day {
  font-size: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.month-count {
  font-size: var(--font-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.density { display: flex; flex-wrap: wrap; gap: 2px; }

.density i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--status-confirmed);
}

.density i.held { background: var(--status-held); }
.density i.cancelled { background: var(--status-cancelled); }
.density i.completed { background: var(--status-completed); }
.density i.no_show { background: var(--status-no-show); }

/* Agenda is the phone week presentation. */
.agenda { display: grid; gap: var(--space-3); }

.agenda-day { display: grid; gap: var(--space-1); }

.agenda-day.is-today h3 { color: var(--primary); }

.agenda-day > h3 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-1) 0;
  background: var(--surface);
  font-size: var(--font-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.agenda-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--touch);
  padding: var(--space-2);
  background: var(--chip-fill, var(--surface-raised));
  color: var(--chip-ink, var(--ink));
  border: 1px solid color-mix(in srgb, var(--chip-ink, var(--ink)) 22%, var(--chip-fill, var(--border)));
  border-radius: var(--radius);
  text-align: left;
  font-size: var(--font-body);
}

.agenda-row .agenda-time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
  font-size: var(--font-num);
}

.agenda-row .agenda-main { min-width: 0; }

.agenda-row .agenda-patient {
  display: block;
  font-weight: var(--weight-medium);
  background: var(--chip-fill, transparent);
  color: var(--chip-ink, var(--ink));
  overflow-wrap: anywhere;
  white-space: normal;
}

.agenda-row .agenda-service,
.agenda-row .agenda-resource {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: color-mix(in srgb, var(--chip-ink, var(--muted)) 78%, transparent);
  font-size: var(--font-caption);
}

.agenda-row .agenda-resource .avatar {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.5625rem;
}

.card-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.card-identity-text,
.card-contact,
.card-visits {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.card-identity .field { margin: 0; }

.mobile-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: none;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
}

.mobile-action-bar button {
  flex: 1 1 auto;
  min-height: 2.75rem;
}

/* --- dashboard ---------------------------------------------------------- */

.home-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.home-side { display: grid; gap: var(--space-4); align-content: start; }

.today-list { display: grid; }

.today-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-quarter);
  font-size: var(--font-body);
  color: var(--ink);
  text-decoration: none;
}

.today-row:last-child { border-bottom: 0; }
.today-row:hover { background: var(--hover); }

.today-row .today-time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
  font-size: var(--font-num);
}

.today-row.is-next .today-time { color: var(--primary); }
.today-row .today-service { color: var(--muted); font-size: var(--font-caption); }

.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--font-label);
  color: var(--muted);
}

.metric strong {
  display: block;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}

.daily-recon-status {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.daily-recon-status.is-matched {
  color: var(--status-completed);
}

.daily-reclassify-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.analytics-layout {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.analytics-layout[hidden] { display: none; }

.analytics-hero,
.analytics-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.analytics-hero-metric strong { font-size: 1.75rem; }

.analytics-delta {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-caption);
  font-style: normal;
  color: var(--muted);
}

.analytics-bar {
  display: block;
  margin-top: var(--space-2);
  height: 0.4rem;
  background: color-mix(in srgb, var(--ink) 10%, var(--surface-raised));
  border-radius: var(--radius);
  overflow: hidden;
}

.analytics-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: inherit;
}

.analytics-bars { display: grid; gap: var(--space-3); }

.analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
}

.analytics-bar-row .analytics-bar { grid-column: 1 / -1; margin-top: 0; }

.analytics-split {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.analytics-ids {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.analytics-id-list {
  margin: var(--space-2) 0 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.compensation-layout {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.compensation-layout[hidden] { display: none; }

.announcements-layout {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.announcements-layout[hidden] { display: none; }

.announcements-split {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.announcements-list,
.announcements-body {
  display: grid;
  gap: var(--space-2);
}

.announcements-item {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  text-align: left;
}

.announcements-item[aria-current="true"] {
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 0 var(--primary);
}

.announcements-body {
  white-space: pre-wrap;
  max-width: var(--read-measure);
}

.compensation-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.compensation-split {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.compensation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.compensation-actions .btn-primary,
.compensation-actions .btn-secondary {
  min-height: var(--touch);
}

#settlement-panel[data-locked="true"] {
  background: var(--surface-raised);
}

.attention-list { list-style: none; margin: 0; padding: 0; display: grid; }

.attention-list li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-quarter);
  font-size: var(--font-label);
}

.attention-list li:last-child { border-bottom: 0; }
.attention-list a { margin-left: auto; }

.setup-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--font-label);
}

.setup-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--sunken);
  overflow: hidden;
}

.setup-bar > i {
  display: block;
  height: 100%;
  background: var(--primary);
}

.setup-count { font-variant-numeric: tabular-nums; font-weight: var(--weight-strong); }

.setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.setup-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
  min-height: var(--control-h);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-size: var(--font-label);
}

.setup-list li:hover { background: var(--hover); }
.setup-list .setup-done { color: var(--muted); }
.setup-list a { text-decoration: none; }
.setup-list a:hover { text-decoration: underline; }

.shortcut-list { display: grid; gap: var(--space-1); }

.shortcut {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--font-body);
}

.shortcut:hover { background: var(--hover); color: var(--primary); }
.shortcut .icon { color: var(--muted); }

/* --- patients ----------------------------------------------------------- */

.result-count {
  font-size: var(--font-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.patient-table-wrap {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}

.patient-empty { padding: var(--space-6) var(--space-4); }
.patient-empty .btn { margin-top: var(--space-3); }

.patient-directory { list-style: none; padding: 0; margin: 0; }

.patient-directory li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-quarter);
}

.patient-directory a {
  font-weight: var(--weight-medium);
  text-decoration: none;
  color: var(--ink);
}

.patient-directory a:hover { color: var(--primary); }

#patient-results { list-style: none; padding: 0; margin: var(--space-2) 0; }
#patient-results button,
#booking-patient-create-open { width: 100%; justify-content: flex-start; }

.journal-picker { max-width: 36rem; }
.journal-patient-results {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.journal-patient-results button {
  width: 100%;
  justify-content: flex-start;
  text-align: start;
}

.nested-flow {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--sunken);
}

.nested-flow[hidden] { display: none; }
.nested-flow > h3 { margin: 0; font-size: var(--font-title); }
.nested-flow > menu {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0;
  background: var(--sunken);
}
#booking-patient-address {
  display: grid;
  gap: var(--space-3);
}
#booking-patient-address > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
}
#booking-patient-save { display: inline-flex; }

.booking-column-title { display: none; margin: 0 0 var(--space-2); }

#booking-visit,
#booking-visit-rest { display: contents; }

#booking-dialog:not(.is-patient-create) #booking-visit > :not(#booking-visit-rest) { order: 1; }

#booking-dialog:not(.is-patient-create) #booking-patient-locked,
#booking-dialog:not(.is-patient-create) #booking-patient-search,
#booking-dialog:not(.is-patient-create) #booking-patient-create { order: 2; }

#booking-dialog:not(.is-patient-create) #booking-visit-rest > * { order: 3; }

#booking-dialog.is-patient-create {
  width: min(68.75rem, 92vw);
  max-height: 90vh;
  overflow: hidden;
}

#booking-dialog.is-patient-create form {
  display: flex;
  flex-direction: column;
  max-height: calc(90vh - 2rem);
  min-height: 0;
}

#booking-dialog.is-patient-create .dialog-head,
#booking-dialog.is-patient-create #booking-create-actions {
  flex: none;
}

#booking-dialog.is-patient-create #booking-create-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

#booking-dialog.is-patient-create #booking-patient-back { width: auto; }

#booking-dialog.is-patient-create #booking-patient-save { width: 100%; }

#booking-dialog.is-patient-create .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  overflow: auto;
  min-height: 0;
}

#booking-dialog.is-patient-create #booking-visit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-width: 0;
}

#booking-dialog.is-patient-create #booking-visit > .booking-column-title { order: 0; }

#booking-dialog.is-patient-create #booking-context { order: 1; margin: 0; }

#booking-dialog.is-patient-create #booking-visit > .field,
#booking-dialog.is-patient-create #booking-visit > .error,
#booking-dialog.is-patient-create #booking-end { order: 2; }

#booking-dialog.is-patient-create #booking-visit-rest {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  order: 3;
  min-width: 0;
}

#booking-dialog.is-patient-create #booking-patient-create {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  background: transparent;
  padding: 0;
  border: 0;
}

#booking-dialog.is-patient-create .booking-column-title { display: block; }

#booking-patient-address {
  margin: 0;
  padding: 0;
  border: 0;
}

#booking-patient-address legend {
  padding: 0;
  color: var(--muted);
  font-size: var(--font-caption);
}

.address-compact {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-2);
}

@media (max-width: 800px) {
  #booking-dialog.is-patient-create .form-grid { grid-template-columns: 1fr; }
  #booking-dialog.is-patient-create #booking-patient-create { grid-column: 1; grid-row: auto; order: 1; }
  #booking-dialog.is-patient-create #booking-visit { grid-column: 1; grid-row: auto; order: 2; }
}

/* --- journal ------------------------------------------------------------ */

.journal-shell {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.journal-workspace { display: grid; gap: var(--space-3); min-width: 0; }
.journal-workspace[hidden] { display: none; }

.patient-header {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-hour);
}

.patient-header h2 { margin: 0; font-size: 1.125rem; font-weight: var(--weight-strong); }
.patient-header .context-meta { margin: 0; color: var(--muted); font-size: var(--font-label); }

.patient-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
  overflow-x: hidden;
  font-size: var(--font-label);
}

.patient-tabs a,
  .patient-tabs span {
    white-space: normal;
    overflow-wrap: anywhere;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
}

@media (max-width: 767.98px) {
  .patient-tabs {
    flex-wrap: wrap;
    overflow-x: hidden;
  }
}

.patient-tabs a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--primary);
  font-weight: var(--weight-medium);
}

.patient-tabs .is-pending { opacity: 0.45; cursor: not-allowed; }

.journal-stage {
  position: relative;
  min-width: 0;
}

.journal-workspace.is-composing .journal-stage {
  min-height: 0;
}

.journal-panels {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.journal-compose-overlay[hidden] { display: none; }

.journal-compose-overlay.is-open {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised, 0 12px 32px color-mix(in srgb, var(--ink) 12%, transparent));
  min-width: 0;
  min-height: 0;
  max-height: var(--compose-height, calc(100dvh - 19rem));
  overflow: hidden;
}

.journal-composer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-3);
  min-height: 0;
  height: 100%;
  container-type: inline-size;
  container-name: journal-composer;
}

.journal-compose-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.completeness-lamps {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
}

.completeness-lamps[hidden] { display: none; }

.completeness-lamp {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  opacity: 0.5;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.28);
}

.completeness-lamp[data-tone="red"] { background: #d92d20; }
.completeness-lamp[data-tone="yellow"] { background: #e6b422; }
.completeness-lamp[data-tone="green"] { background: #12b76a; }

.completeness-lamps[data-status="red"] .completeness-lamp[data-tone="red"] {
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, #d92d20 45%, var(--surface-raised)), 0 0 12px #d92d20;
}

.completeness-lamps[data-status="yellow"] .completeness-lamp[data-tone="yellow"] {
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, #e6b422 45%, var(--surface-raised)), 0 0 12px #e6b422;
}

.completeness-lamps[data-status="green"] .completeness-lamp[data-tone="green"] {
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, #12b76a 45%, var(--surface-raised)), 0 0 12px #12b76a;
}

.booking-journal-lamp {
  margin-left: 0;
  gap: 0;
  flex: 0 0 auto;
}

.booking-journal-lamp .completeness-lamp {
  width: 0.68rem;
  height: 0.68rem;
}

.booking-journal-lamp[data-status="red"] .completeness-lamp[data-tone="red"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, #d92d20 40%, var(--surface-raised)), 0 0 6px #d92d20;
}

.booking-journal-lamp[data-status="green"] .completeness-lamp[data-tone="green"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, #12b76a 40%, var(--surface-raised)), 0 0 6px #12b76a;
}

.phrase-library { margin-top: var(--space-2); }
.phrase-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  max-height: 12rem;
  overflow: auto;
}
.phrase-list li { display: flex; gap: var(--space-1); align-items: center; min-width: 0; }
.phrase-list .phrase-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-locale {
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-2) var(--space-2);
  min-width: 0;
}
.account-locale label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-caption);
}
.account-locale select { width: 100%; min-width: 0; }
.booking-journal-lamp .completeness-lamp {
  width: 7px;
  height: 7px;
  opacity: 1;
  box-shadow: none;
}

.booking-chip .booking-journal-lamp {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 2;
  margin: 0;
}

.booking-chip.has-corner .booking-journal-lamp { right: 1.15rem; }

.booking-chip.has-corner:has(.booking-pay-money) .booking-journal-lamp { right: 2rem; }

.booking-chip:has(.booking-journal-lamp) { padding-right: 0.95rem; }

.booking-chip.has-corner:has(.booking-journal-lamp) { padding-right: 1.7rem; }

.agenda-row .booking-journal-lamp {
  position: static;
  margin-left: auto;
}

.booking-journal-lamp[data-status="red"] .completeness-lamp[data-tone="red"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, #d92d20 35%, var(--surface-raised));
}

.booking-journal-lamp[data-status="green"] .completeness-lamp[data-tone="green"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, #12b76a 35%, var(--surface-raised));
}
.journal-compose-head h3 { margin: 0; font-size: var(--font-title); }

.journal-compose-layout {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

@container journal-composer (min-width: 44rem) {
  .journal-compose-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  }
}

.journal-composer .journal-compose-layout {
  grid-template-columns: minmax(0, 1fr);
}

.journal-composer.is-support-open .journal-compose-layout {
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
}

.journal-compose-write {
  display: grid;
  gap: var(--space-2);
  grid-template-rows: auto minmax(16rem, 1fr) auto auto auto auto;
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.journal-compose-meta {
  display: grid;
  gap: var(--space-2);
}

.journal-ai-transcript-fold {
  font-size: var(--font-caption);
}

.journal-ai-transcript-fold > summary {
  cursor: pointer;
  color: var(--muted);
}

.journal-compose-support {
  display: none;
}

.journal-composer.is-support-open .journal-compose-support {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.journal-compose-support .journal-ai {
  min-width: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.journal-compose-support .journal-ai-actions {
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.journal-compose-support .journal-ai-status,
.journal-compose-support #journal-ai-status {
  flex: 1 1 12rem;
  min-width: 0;
}

.journal-compose-support #journal-ai-transcript {
  min-height: 2.5rem;
  max-height: 8rem;
  resize: vertical;
}

.journal-compose-support .journal-completeness {
  min-height: 0;
}

.journal-compose-support .journal-completeness[hidden] {
  display: none;
}

.journal-composer.is-questions-collapsed #journal-completeness {
  display: none;
}

.journal-composer.is-questions-collapsed .journal-compose-support {
  grid-template-rows: auto;
}

.journal-compose-body {
  display: grid;
  grid-template-rows: auto minmax(16rem, 1fr);
  min-height: 0;
}

.journal-compose-body textarea,
.journal-composer #note-body {
  min-height: 16rem;
  height: 100%;
  resize: vertical;
}

.journal-compose-save {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 0;
  padding-top: var(--space-2);
  background: var(--surface-raised);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.journal-courses,
.journal-timeline,
.journal-note,
.journal-checkout {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

.journal-checkout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.journal-checkout .checkout {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  gap: var(--space-1);
}

.journal-checkout .checkout-body {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  gap: var(--space-1);
  align-content: start;
  scrollbar-width: thin;
}

.journal-checkout .checkout-settle {
  flex: 0 0 auto;
  position: relative;
  gap: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.journal-checkout .checkout h2 {
  font-size: var(--font-label);
}

.journal-checkout .checkout-methods-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.journal-checkout .checkout-addons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: flex-start;
}

.journal-checkout .checkout-addons .checkout-extras,
.journal-checkout .checkout-addons .checkout-products {
  flex: 0 1 auto;
}

.journal-checkout .checkout-extras:has(.checkout-picker),
.journal-checkout .checkout-products:has(.checkout-picker) {
  flex: 1 1 100%;
}

.journal-checkout .checkout-picker {
  width: 100%;
}

.journal-checkout .checkout-extras > .muted,
.journal-checkout .checkout-products > .muted {
  display: none;
}

.journal-checkout .checkout-settle .btn-primary,
.journal-checkout .checkout-settle .btn-secondary {
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal-checkout .checkout-pay-now {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journal-checkout .checkout-pay-now > .btn-primary {
  flex: 0 1 auto;
  width: 100%;
}

.journal-checkout .checkout-pay-later {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.journal-checkout .checkout-pay-later > .btn-primary,
.journal-checkout .checkout-pay-later > .btn-secondary {
  flex: 0 1 auto;
  width: 100%;
}

.journal-side {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

.journal-side[hidden] { display: none; }

.journal-note[hidden] { display: none; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.panel-head h3 { margin: 0; font-size: var(--font-title); }

.course-group { display: grid; gap: var(--space-2); }
.course-group.is-closed { opacity: 0.72; }

.course-row { display: grid; gap: var(--space-1); }
.course-row .course-action { justify-self: start; }

.course-card {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
}

.course-card.is-all { background: var(--surface-raised); }
.course-card.is-closed { background: transparent; }
.course-card[aria-pressed="true"] { box-shadow: inset 3px 0 0 0 var(--primary); }
.course-card .muted,
.course-card span { color: var(--muted); font-size: var(--font-caption); }

.journal-status {
  font-size: var(--font-caption);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.banner-filter {
  background: var(--primary-tint);
  color: var(--ink);
}

.journal-filters { font-size: var(--font-label); }
.journal-filters summary { cursor: pointer; color: var(--muted); }

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: max-content;
  max-height: none;
  text-align: left;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line-half);
  background: transparent;
  font: inherit;
  white-space: normal;
  overflow: visible;
}

.timeline-item[aria-pressed="true"] { background: var(--primary-tint); }
.timeline-item .meta,
.timeline-item .preview {
  order: 0;
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
.timeline-item .preview { order: -1; }
.timeline-item .meta { font-size: var(--font-caption); color: var(--muted); }
.timeline-item .preview {
  color: var(--ink);
  font-size: var(--font-read);
  line-height: var(--line-read);
}

.note-section { margin: 0 0 var(--space-3); }
.note-section h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-label);
  color: var(--muted);
}

.journal-more { position: relative; }
.journal-more summary { cursor: pointer; font-size: var(--font-caption); color: var(--muted); }
.journal-more menu { display: grid; gap: var(--space-1); padding: var(--space-2) 0 0; }

.journal-back { justify-self: start; }

.journal-rail { display: grid; gap: var(--space-2); align-content: start; }

.journal-list { display: grid; gap: 1px; max-height: 26rem; overflow-y: auto; }

.journal-list button {
  justify-content: flex-start;
  min-height: var(--control-h);
  border-color: transparent;
  background: transparent;
  font-weight: var(--weight-medium);
}

.journal-list button:hover { background: var(--hover); }

.journal-list button[aria-pressed="true"] {
  background: var(--primary-tint);
  box-shadow: inset 3px 0 0 0 var(--primary);
}

.journal-reading { min-width: 0; }

.journal-entries {
  display: grid;
  gap: var(--space-1);
  align-items: start;
  grid-auto-rows: max-content;
}

.journal-section-title {
  margin: var(--space-2) 0 0;
  font-size: var(--font-label);
  font-weight: var(--weight-strong);
  color: var(--muted);
}

.journal-entry {
  padding: var(--space-3);
  border-top: 1px solid var(--line-half);
}

.journal-entry:first-of-type,
.journal-entry.is-current { border-top: 0; padding-top: var(--space-3); }

.journal-entry.is-current {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.journal-context {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.journal-visits { display: grid; gap: var(--space-2); }

.journal-entry .meta {
  margin: 0 0 var(--space-2);
  font-size: var(--font-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.journal-entry .body {
  margin: 0;
  max-width: var(--read-measure);
  font-size: var(--font-read);
  line-height: var(--line-read);
  white-space: pre-wrap;
}

.journal-entry .entry-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.journal-history {
  margin-top: var(--space-2);
}

.journal-history summary {
  cursor: pointer;
  font-size: var(--font-caption);
  color: var(--muted);
}

.journal-revision {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-half);
}

.journal-print { display: none; }

.journal-composer textarea { min-height: 7rem; }
.journal-composer #note-body { min-height: 16rem; }

@media (max-width: 767px) {
  .journal-composer.is-support-open .journal-compose-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .journal-composer.is-support-open .journal-compose-support {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-2);
    max-height: min(42dvh, 22rem);
  }
  .journal-workspace.is-composing .journal-compose-overlay.is-open {
    position: absolute;
    inset: 0;
    z-index: 4;
    min-height: calc(100dvh - 8rem);
    overflow: hidden;
  }
}

.patient-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-hour);
}

.patient-context h2 { margin: 0; font-size: 1.0625rem; }
.patient-context .context-meta { color: var(--muted); font-size: var(--font-label); }

/* --- billing ------------------------------------------------------------ */

.billing-layout { display: grid; gap: var(--space-4); align-items: start; }
.billing-layout[hidden] { display: none; }

.finance-nav.segmented {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.is-hidden { display: none !important; }

.payroll-tax-status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
}
.payroll-tax-status.status-ok {
  background: color-mix(in srgb, var(--status-completed) 14%, var(--surface-raised));
  color: var(--status-completed);
}
.payroll-tax-status.status-warn {
  background: color-mix(in srgb, var(--status-held) 16%, var(--surface-raised));
  color: var(--status-held);
}
.payroll-tax-status.status-bad {
  background: var(--danger-tint);
  color: var(--danger);
}
.payroll-tax-receivable { color: var(--muted); font-weight: var(--weight-medium); }
.payroll-tax-stack { display: grid; gap: var(--space-3); }
.payroll-tax-dl {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}
.payroll-tax-dl dt { color: var(--muted); }
.payroll-tax-dl dd { margin: 0; }
.payroll-tax-item {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.payroll-tax-item h3 { margin: 0 0 var(--space-2); font-size: var(--font-title); }
.payroll-tax-item.payroll-tax-warning { border-color: var(--status-held); }
.payroll-tax-period {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.payroll-tax-period summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
}
.payroll-tax-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.payroll-tax-actions { margin-top: var(--space-3); }
.payroll-tax-timeline {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--status-held);
  color: var(--ink);
}

.finance-section-select { display: none; }

.finance-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.finance-filters[hidden] { display: none; }

.finance-detail { display: grid; gap: var(--space-2); }
.finance-signals { display: grid; gap: var(--space-2); }
.finance-glossary { display: grid; gap: var(--space-3); }
.finance-glossary h3 { margin: 0 0 var(--space-1); font-size: 1rem; }
.finance-export {
  overflow: auto;
  max-height: 20rem;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: pre-wrap;
}
.finance-invoice-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.panel-head > .section-hint {
  flex-basis: 100%;
  margin: 0;
}
.finance-row { cursor: pointer; }
.finance-booking-warn {
  color: var(--status-held);
  font-weight: var(--weight-semibold, 600);
}
.finance-booking-bad {
  color: var(--danger);
  font-weight: var(--weight-semibold, 600);
}
.finance-timeline {
  margin: var(--space-3) 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--space-1);
}
.finance-timeline [data-event="credit_issued"] { color: var(--muted); }
.finance-timeline [data-event="refund_registered"],
.finance-timeline [data-event="payment_reversed"] { color: var(--muted); }

.money {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* --- settings ----------------------------------------------------------- */

.settings-layout { display: grid; gap: var(--space-4); align-items: start; }

.settings-nav { display: grid; gap: 0; align-content: start; }

.settings-nav .nav-group { display: grid; gap: 1px; }

.settings-nav button,
.settings-nav .settings-nav-link,
.admin-tabs button {
  justify-content: flex-start;
  min-height: var(--control-h);
  border-color: transparent;
  background: transparent;
  text-align: left;
}

.settings-nav button:hover,
.settings-nav .settings-nav-link:hover,
.admin-tabs button:hover { background: var(--hover); }

.settings-nav button[aria-pressed="true"],
.admin-tabs button[aria-pressed="true"] {
  background: var(--primary-tint);
  color: var(--ink);
  font-weight: var(--weight-strong);
  box-shadow: inset 3px 0 0 0 var(--primary);
}

.duplicate-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.duplicate-card,
.duplicate-actions,
.duplicate-preview {
  grid-column: auto;
}

.duplicate-pair > p,
.duplicate-actions,
.duplicate-preview,
.duplicate-matches {
  grid-column: 1 / -1;
}

.patient-match {
  display: block;
  width: auto;
  text-align: left;
}

@media (max-width: 700px) {
  .duplicate-pair { grid-template-columns: 1fr; }
}

.settings-nav button[hidden] { display: none; }

.settings-nav .settings-nav-link[hidden] { display: none; }

.settings-nav .settings-nav-link {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  color: inherit;
  text-decoration: none;
}

.member-roles {
  color: var(--muted);
  font-size: var(--font-caption);
}

.member-roles-fieldset {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.member-roles-fieldset legend {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--font-label);
  font-weight: var(--weight-medium);
}

.member-workspace {
  display: grid;
  gap: var(--space-4);
}

.member-list-pane,
.member-detail-pane {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

.member-list-pane h2 { margin: 0; font-size: var(--font-title); }

.member-workspace.is-list .member-detail-pane { display: none; }
.member-workspace.is-detail .member-list-pane { display: none; }

.member-back { justify-self: start; }

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  text-align: left;
}

.member-row[aria-current="true"] {
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 0 var(--primary);
}

.member-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.member-row-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-row-meta {
  color: var(--muted);
  font-size: var(--font-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-invite {
  justify-content: center;
  width: 100%;
}

.member-detail-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: 44rem;
}

.member-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.member-detail-identity {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  flex: 1 1 14rem;
}

.member-header-avatar { flex: 0 0 auto; }

.avatar-md {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1rem;
}

.member-header-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.member-header-text h3 {
  margin: 0;
  font-size: var(--font-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-header-text .muted { margin: 0; }

.member-header-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  color: var(--muted);
  font-size: var(--font-caption);
}

.member-header-sep { color: var(--border); }

.member-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.admin-tabs.member-tabs button,
.member-tabs .member-tab {
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  white-space: nowrap;
}

.admin-tabs.member-tabs button:hover,
.member-tabs .member-tab:hover {
  background: var(--hover);
  color: var(--ink);
}

.admin-tabs.member-tabs button[aria-pressed="true"],
.member-tabs .member-tab[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-raised));
  border-color: var(--primary);
  color: var(--ink);
  font-weight: var(--weight-strong);
  box-shadow: none;
}

.admin-tabs.member-tabs button:focus-visible,
.member-tabs .member-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.member-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-left: auto;
}

.member-more { position: relative; }

.member-more summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
}

.member-more summary::-webkit-details-marker { display: none; }

.member-more-menu {
  position: absolute;
  z-index: 3;
  right: 0;
  left: auto;
  top: calc(100% + var(--space-1));
  min-width: 12rem;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised, 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent));
}

.member-clinic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.member-clinic-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.field-with-action {
  display: grid;
  gap: var(--space-2);
  align-items: end;
}

.economic-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.economic-workspace {
  display: grid;
  gap: var(--space-4);
  max-width: 56rem;
}

.economic-header {
  display: grid;
  gap: var(--space-2);
}

.economic-header h3 {
  margin: 0;
  font-size: var(--font-display);
}

.economic-location-field { max-width: 20rem; }

.economic-chips,
.economic-unit-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.economic-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--font-caption);
}

.economic-chip[data-tone="ok"],
.economic-card[data-tone="ok"],
.economic-pay-card[data-tone="ok"] {
  border-color: color-mix(in srgb, var(--status-completed) 40%, var(--border));
}

.economic-chip[data-tone="warn"],
.economic-card[data-tone="warn"],
.economic-pay-card[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--status-held) 45%, var(--border));
}

.economic-chip[data-tone="block"],
.economic-card[data-tone="block"],
.economic-pay-card[data-tone="block"] {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.economic-tone-icon[data-tone="ok"] { color: var(--status-completed); }
.economic-tone-icon[data-tone="warn"] { color: var(--status-held); }
.economic-tone-icon[data-tone="block"] { color: var(--danger); }
.economic-tone-icon[data-tone="neutral"] { color: var(--muted); }

.economic-summary {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-body);
}

.economic-tab-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.economic-tablist {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: var(--space-1);
}

.economic-tab {
  flex: 0 0 auto;
  min-height: var(--control-h);
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
}

.economic-tab[aria-selected="true"] {
  background: var(--primary-tint);
  box-shadow: inset 0 -3px 0 0 var(--primary);
  font-weight: var(--weight-strong);
}

.economic-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.economic-tab-badge {
  margin-left: 0.35rem;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: var(--font-caption);
}

.economic-tab-badge[data-tone="warn"] { background: color-mix(in srgb, var(--status-held) 20%, var(--surface)); color: var(--status-held); }
.economic-tab-badge[data-tone="block"] { background: var(--danger-tint); color: var(--danger); }

.economic-tab-more { display: none; min-width: 10rem; }

.economic-cards,
.economic-pay-grid,
.economic-cards-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
}

.economic-card,
.economic-pay-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-raised);
}

.economic-card h4,
.economic-pay-card h4,
.economic-dialog-section h3 {
  margin: 0;
  font-size: var(--font-title);
}

.economic-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
}

.economic-counts { margin: 0; color: var(--muted); font-size: var(--font-caption); }

.economic-table-wrap { overflow-x: auto; }

.economic-line-table .economic-line-row {
  display: table-row;
}

.economic-pane { display: grid; gap: var(--space-3); }
.economic-pane[hidden] { display: none; }

.economic-dialog-section {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-half);
}

.economic-product-form { max-width: 28rem; }

.economic-status-meta { color: var(--muted); font-size: var(--font-caption); }
.economic-tech { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .economic-tablist { display: none; }
  .economic-tab-more { display: grid; }
  .economic-workspace { max-width: none; }
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.settings-section {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-half);
}

.settings-section:first-of-type { border-top: 0; padding-top: 0; }

.settings-section > h3 { margin: 0 0 var(--space-1); font-size: var(--font-title); }
.settings-section > .section-subhead {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--font-label);
  font-weight: var(--weight-strong);
}
.settings-section > .section-hint { margin-bottom: var(--space-3); }

.denmark-summary {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.denmark-practitioner,
.denmark-service {
  display: grid;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-half);
}

.denmark-practitioner-main,
.denmark-map-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.denmark-map-row .field { margin: 0; min-width: 14rem; }

.settings-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  margin-top: var(--space-4);
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
}

.admin-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 1px; }

.admin-list button {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
}

.admin-list button:hover { background: var(--hover); }

.admin-list li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-label);
}

.admin-list .service-row {
  min-width: 0;
}

.admin-list .service-row.is-dragging {
  opacity: 0.55;
}

.admin-list .service-drag {
  flex: 0 0 auto;
  width: auto;
  cursor: grab;
  color: var(--muted);
  letter-spacing: -0.15em;
  padding-inline: 0.35rem;
}

.admin-list .service-open {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.admin-list .service-order-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: auto;
}

.admin-list .service-order-actions button {
  width: auto;
}

.admin-list .avatar {
  width: 2rem;
  height: 2rem;
  font-size: var(--font-caption);
  flex: 0 0 auto;
}

[data-hours-host],
[data-member-panel="hours"] {
  min-width: 0;
  max-width: 100%;
}

[data-hours-host] {
  container-type: inline-size;
  container-name: hours;
}

[data-hours-host] .form-grid-2 {
  grid-template-columns: minmax(0, 1fr);
}

.hours-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  min-width: 0;
  margin-bottom: var(--space-4);
}

.hours-toolbar .field {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
}

.hours-toolbar select {
  min-width: 0;
  max-width: 100%;
}

.hours-week {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.hours-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  min-height: 12rem;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hours-day.is-open {
  background: color-mix(in srgb, var(--working) 42%, var(--surface-raised));
  box-shadow: inset 0 3px 0 var(--working);
}

.hours-day.is-closed {
  background: color-mix(in srgb, var(--non-working) 55%, var(--surface-raised));
  box-shadow: inset 0 3px 0 var(--border);
}

.hours-day.is-weekend {
  border-style: dashed;
}

.hours-day-head h3 {
  margin: 0;
  font-size: var(--font-title);
}

.hours-day-status {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--font-caption);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.hours-day-body {
  display: grid;
  gap: var(--space-2);
  flex: 1;
}

.hours-closed {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-label);
}

.hours-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  min-width: 0;
  width: 100%;
}

.hours-time {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  flex: 1 1 7rem;
  min-width: 0;
  max-width: 100%;
}

.hours-time span {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.hours-time input[type="time"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.hours-sep {
  flex: 0 0 auto;
  padding-bottom: 0.55rem;
  color: var(--muted);
}

.hours-row .hours-remove {
  flex: 0 0 auto;
}

.hours-add {
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

@container hours (min-width: 32rem) {
  .hours-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container hours (min-width: 36rem) {
  [data-hours-host] .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container hours (min-width: 50rem) {
  .hours-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container hours (min-width: 72rem) {
  .hours-week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Branding editor: colour controls, live preview, contrast guard. */
.theme-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.theme-template {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-2);
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.theme-template:hover:not(:disabled) {
  background: var(--hover);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.theme-template[aria-pressed="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.theme-template-preview {
  display: block;
  height: 4.25rem;
  border: 1px solid var(--tpl-border, var(--border));
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--tpl-surface, var(--surface));
}

.theme-template-bar {
  display: block;
  height: 1.15rem;
  background: var(--tpl-primary, var(--primary));
}

.theme-template-body {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.55rem;
}

.theme-template-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--tpl-accent, var(--accent));
}

.theme-template-dot:nth-child(2) { background: var(--tpl-ink, var(--ink)); }
.theme-template-dot:nth-child(3) { background: var(--tpl-muted, var(--muted)); }

.theme-template-card {
  flex: 1;
  height: 1.15rem;
  border-radius: 0.2rem;
  background: var(--tpl-raised, var(--surface-raised));
  border: 1px solid var(--tpl-border, var(--border));
}

.theme-template-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.theme-template-name {
  font-size: var(--font-label);
  font-weight: var(--weight-strong);
  color: var(--ink);
}

.theme-template-mode {
  font-size: var(--font-caption);
  color: var(--muted);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

.theme-swatch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.theme-swatch input[type="color"] {
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.theme-swatch .theme-hex {
  width: 7.25rem;
  min-height: var(--control-h-sm);
  padding: 0.25rem 0.5rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--font-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.theme-preview {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.theme-preview .preview-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-label);
  font-weight: var(--weight-strong);
}

.theme-preview .preview-body { padding: var(--space-3); font-size: var(--font-label); }
.theme-preview .preview-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.theme-preview .preview-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.theme-preview .preview-hour {
  min-height: 2.5rem;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.theme-preview .preview-grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  min-height: 2.75rem;
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-raised);
}

.theme-preview .preview-grid-line {
  border-top: 1px solid var(--preview-grid-sub, var(--line-half));
}

.theme-preview .preview-grid-main {
  border-top-color: var(--preview-grid-main, var(--line-hour));
}

.contrast-warning {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--danger-tint);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--surface-raised));
  border-radius: var(--radius);
  font-size: var(--font-caption);
}

.help-item { margin: var(--space-3) 0; }
.help-item h3 { margin: 0 0 var(--space-1); }

.avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--primary-text);
  font-weight: var(--weight-strong);
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 7rem; height: 7rem; font-size: 1.5rem; }

.crop-stage {
  position: relative;
  width: min(18rem, 100%);
  aspect-ratio: 1;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  touch-action: none;
  cursor: grab;
  background: var(--surface);
}

.crop-stage:active { cursor: grabbing; }

.crop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 999px color-mix(in srgb, var(--ink) 40%, transparent);
  pointer-events: none;
}

.crop-stage img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  user-select: none;
  pointer-events: none;
  max-width: none;
  max-height: none;
}

.checkout {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.checkout-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  align-content: start;
}

.checkout-settle {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  position: relative;
}

.checkout h2 {
  margin: 0;
  font-size: var(--font-title);
}

.checkout-summary {
  margin: 0;
  font-weight: var(--weight-strong);
  font-size: var(--font-label);
}

.checkout-overview {
  display: grid;
  gap: var(--space-1);
}

.checkout-split {
  margin: 0;
  font-size: var(--font-label);
}

.checkout-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.checkout-secondary {
  display: block;
}

.checkout-secondary:not([open]) > :not(summary) {
  display: none;
}

.checkout-secondary[open] {
  display: grid;
  gap: var(--space-1);
}

.checkout-secondary > p { margin: 0; font-size: var(--font-label); }

.checkout-products,
.checkout-extras {
  display: grid;
  gap: var(--space-1);
}

.checkout-product-row,
.checkout-extra-row,
.checkout-line,
.checkout-total {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.checkout-total {
  justify-content: space-between;
  font-weight: 600;
  margin: 0;
}

.checkout-methods-heading {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.checkout-pay-now > .btn-primary {
  flex: 1 1 4.75rem;
}

.checkout-pay-later {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.checkout-pay-later > .btn-primary,
.checkout-pay-later > .btn-secondary {
  flex: 1 1 7rem;
}

dialog.checkout-dialog {
  width: min(36rem, calc(100vw - 1.25rem));
  max-height: min(46rem, calc(100dvh - 1.25rem));
  padding: var(--space-3);
  overflow: hidden;
}

dialog.checkout-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2);
}

.checkout-dialog .dialog-head { margin-bottom: 0; }

.checkout-dialog .journal-checkout {
  min-height: 0;
  overflow: hidden;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.checkout-dialog .checkout {
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
}

.checkout-dialog .checkout-body {
  min-height: 0;
  overflow: auto;
  gap: var(--space-3);
  scrollbar-width: thin;
}

.checkout-dialog .checkout-body > h2 { display: none; }

.checkout-dialog .checkout-secondary {
  padding-bottom: var(--space-1);
}

.checkout-dialog .checkout-settle {
  z-index: 1;
  margin-top: 0;
  padding-top: var(--space-2);
  background: var(--surface-raised);
}

.checkout-dialog .checkout-total {
  font-size: 1.35rem;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.checkout-dialog .checkout-pay-now {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.checkout-dialog .checkout-pay-now > .btn-primary,
.checkout-dialog .checkout-send-invoice {
  min-height: 2.75rem;
  width: 100%;
}

.checkout-dialog .checkout-pay-later {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.checkout-dialog .checkout[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.72;
}

.journal-workspace.is-compose-focus .journal-courses,
.journal-workspace.is-compose-focus .journal-timeline,
.journal-workspace.is-compose-focus .journal-side {
  display: none;
}

@media (max-width: 767px) {
  dialog.checkout-dialog {
    width: calc(100vw - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
    margin: auto;
  }
  .checkout-dialog .checkout-pay-now,
  .checkout-dialog .checkout-pay-later {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checkout-pay-later-info {
  position: static;
  flex: 0 0 auto;
}

.checkout-pay-later-info > summary {
  list-style: none;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.checkout-pay-later-info > summary::-webkit-details-marker { display: none; }

.checkout-pay-later-info > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.checkout-pay-later-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--space-1));
  z-index: 2;
  width: auto;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  font-size: var(--font-caption);
}

.checkout-picker {
  display: grid;
  gap: var(--space-1);
}

.checkout-addons {
  display: grid;
  gap: var(--space-1);
}

.checkout-add { justify-self: start; }

.journal-checkout .checkout-add,
.journal-checkout .checkout-extra-row .btn-secondary,
.journal-checkout .checkout-product-row .btn-secondary {
  min-height: 1.75rem;
  padding: 0.15rem 0.5rem;
}

/* --- responsive ---------------------------------------------------------
   phone   <768    drawer nav, single-resource calendar, sheets, no x-overflow
   tablet  768-1099 icon rail, capped resource columns
   desktop >=1100  full nav, side-by-side layouts
*/

@media (max-width: 767.98px) {
  /* The page itself never scrolls sideways; only the calendar board may. */
  html, body { overflow-x: hidden; }
  .app-shell, .app-body, .page-main, .work-surface { max-width: 100vw; }

  .app-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(17rem, 84vw);
    height: 100%;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-overlay);
  }

  .page-bar, .app-top { padding: var(--space-2) var(--space-3); }
  .page-title { font-size: var(--font-body); }
  .filter-bar { padding: var(--space-2) var(--space-3); }
  .finance-nav { display: none; }
  .finance-section-select { display: block; width: 100%; }
  .payroll-tax-dl { grid-template-columns: 1fr; }
  .payroll-tax-cards { grid-template-columns: 1fr; }
  .finance-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .finance-filters .field:first-child { grid-column: 1 / -1; }
  .finance-export { max-height: 12rem; }
  main, .page-main, .work-surface { padding: var(--space-3); }

  dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-width: 1px 0 0;
  }

  dialog.drawer {
    width: 100%;
    height: auto;
    max-height: 92vh;
    margin: auto auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-width: 1px 0 0;
  }

  /* The thumb-reachable bar owns the primary action on phones. */
  .mobile-action-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .page-actions [data-primary-action] { display: none; }
  .page-actions #bulk-notice { display: none !important; }
  #bulk-notice-mobile:not([hidden]) { display: inline-flex; }
  .work-surface, .page-main { padding-bottom: 4.5rem; }

  .calendar-board { --axis-width: 2.5rem; }
  .booking-chip { padding: 0.25rem 0.5rem; }

  .data-table thead { display: none; }

  .data-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line-quarter);
  }

  .data-table tbody td { padding: 0; border: 0; }
  .data-table tbody td.cell-actions { grid-row: 1 / span 2; align-self: center; }
  .row-action { opacity: 1; }
  .today-row, .agenda-row { min-height: var(--touch); }

  .member-workspace,
  .member-detail-pane,
  .member-detail-card,
  .member-detail-head {
    min-width: 0;
    max-width: 100%;
  }

  .member-detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .member-detail-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    flex: none;
  }

  .member-header-text {
    flex: 1 1 8rem;
  }

  .member-header-text h3,
  .member-header-text .muted,
  .member-header-meta,
  .member-header-meta span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .member-detail-identity .badge { flex: 0 0 auto; }

  .avatar-md {
    width: 3rem;
    height: 3rem;
  }

  .member-detail-pane .member-detail-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .member-tabs { overflow-x: visible; }
}

@media (min-width: 768px) {
  .app-shell { grid-template-columns: var(--rail-width) 1fr; }

  .app-nav {
    display: flex;
    position: sticky;
    top: 0;
    height: 100vh;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    overflow-x: hidden;
    overflow-y: auto;
  }

  #nav-toggle { display: none; }

  .journal-shell { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .app-shell:has(.journal-shell) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  .app-shell:has(.journal-shell) > .app-body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .journal-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .journal-shell > .journal-workspace:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }
  .journal-shell .patient-header { flex: 0 0 auto; }
  .journal-shell .journal-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }
  .journal-shell .journal-panels {
    flex: 1 1 auto;
    width: 100%;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
  }
  .journal-shell .journal-courses,
  .journal-shell .journal-timeline,
  .journal-shell .journal-note,
  .journal-shell .journal-checkout {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
  .journal-shell .journal-courses {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
  }
  .journal-shell .journal-checkout {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .journal-shell .journal-timeline {
    height: 100%;
    align-content: stretch;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  .journal-shell .journal-entries {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
  }
  .journal-shell .timeline-item { min-width: 0; }
  .journal-shell .timeline-item .meta,
  .journal-shell .timeline-item .preview {
    overflow-wrap: anywhere;
  }
  .journal-shell .journal-note.is-open {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .journal-shell #note-detail {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
  }
  .journal-shell .journal-entries::-webkit-scrollbar,
  .journal-shell #note-detail::-webkit-scrollbar,
  .journal-shell .journal-courses::-webkit-scrollbar,
  .journal-shell .journal-checkout .checkout-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .journal-shell .journal-entries::-webkit-scrollbar-thumb,
  .journal-shell #note-detail::-webkit-scrollbar-thumb,
  .journal-shell .journal-courses::-webkit-scrollbar-thumb,
  .journal-shell .journal-checkout .checkout-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 28%, transparent);
    border-radius: 999px;
  }
  .journal-shell .journal-entries::-webkit-scrollbar-track,
  .journal-shell #note-detail::-webkit-scrollbar-track,
  .journal-shell .journal-courses::-webkit-scrollbar-track,
  .journal-shell .journal-checkout .checkout-body::-webkit-scrollbar-track {
    background: transparent;
  }
  .journal-side { display: contents; }
  .journal-panels { grid-template-columns: minmax(0, 1fr); }
  .journal-panels.has-side,
  .journal-panels.has-side.has-note {
    grid-template-columns: 11rem 12rem minmax(0, 1fr);
  }
  .journal-panels.has-side #journal-note-panel[hidden] { display: grid !important; }
  .journal-note.is-open .journal-note-empty { display: none; }
  .journal-checkout { align-self: stretch; width: 100%; }
  .journal-note.is-open { display: grid; }
  .journal-compose-overlay.is-open {
    position: absolute;
    top: 0;
    right: calc(21.25rem + var(--space-3));
    bottom: auto;
    left: calc(16rem + var(--space-3));
    z-index: 3;
    height: var(--compose-height, calc(100dvh - 19rem));
    max-height: var(--compose-height, calc(100dvh - 19rem));
    min-height: 0;
    overflow: hidden;
  }
  .journal-workspace.is-composing .journal-compose-overlay.is-open {
    left: 0;
    right: 0;
  }
  .journal-compose-layout {
    align-items: stretch;
  }
  .journal-composer #note-body { min-height: 20rem; }
  .billing-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compensation-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 12rem minmax(0, 1fr); }
  .inbox-layout { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
  .member-workspace {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  }
  .member-workspace.is-list .member-detail-pane,
  .member-workspace.is-detail .member-list-pane {
    display: grid;
  }
  .member-back { display: none; }
  .field-with-action { grid-template-columns: minmax(0, 1fr) auto; }
  .announcements-split { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

  .calendar-shell {
    display: grid;
    grid-template-columns: 14.5rem minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
    align-items: start;
  }

  .calendar-date-nav,
  .calendar-date-nav.is-open {
    display: block;
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / -1;
    width: 14.5rem;
    max-width: none;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(28 36 48 / 0.05);
  }

  .calendar-shell > .calendar-stage {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .calendar-stage > .banner {
    margin: 0;
    flex: 0 0 auto;
  }

  .calendar-stage > #calendar-main {
    min-width: 0;
  }

  .calendar-stage > #placement-banner p {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    white-space: normal;
  }

  #placement-cancel {
    flex: 0 0 auto;
  }
}

/* Tablet: the icon rail keeps the work surface dominant. */
@media (min-width: 768px) and (max-width: 1099px) {
  .app-nav { padding: var(--space-2); align-items: stretch; }
  .app-nav a, .account > summary { justify-content: center; padding: 0; }

  .app-nav .app-brand { justify-content: center; }

  .app-nav .nav-label,
  .app-nav .nav-group-label,
  .app-nav .brand-name,
  .account-name,
  .app-nav-foot .muted {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 0 var(--primary); }
  .app-nav .nav-group + .nav-group { margin-top: var(--space-2); }
  .payroll-tax-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-tax-dl { grid-template-columns: minmax(7rem, 12rem) 1fr; }
}

@media (min-width: 1100px) {
  .app-shell { grid-template-columns: var(--nav-width) 1fr; }
  .journal-shell { grid-template-columns: minmax(0, 1fr); }
  .journal-panels.has-side,
  .journal-panels.has-side.has-note {
    grid-template-columns: 12rem 13rem minmax(0, 1fr);
  }
  .journal-checkout { max-width: none; }
  .settings-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .inbox-layout { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); }
  .member-workspace { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  .announcements-split { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); }
  .analytics-split,
  .analytics-ids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-main { padding: var(--space-4) var(--space-5); }
  .work-surface { padding: var(--space-3) var(--space-5) var(--space-4); }

}

@media (min-width: 1600px) {
  .journal-compose-layout { min-width: 0; }
}

/* Desktop: the member card uses the detail pane, so six tabs stay on one row. */
@media (min-width: 1280px) {
  .settings-layout { grid-template-columns: 12rem minmax(0, 1fr); }
  .member-workspace { grid-template-columns: minmax(11rem, 12rem) minmax(0, 1fr); }
  .member-detail-card {
    max-width: none;
    container-type: inline-size;
  }
  .admin-tabs.member-tabs button,
  .member-tabs .member-tab {
    padding: 0 0.625rem;
  }
}

@container (min-width: 46rem) {
  .member-tabs { flex-wrap: nowrap; }
}

/* Users who ask for more contrast get harder separators, not a different layout. */
@media (prefers-contrast: more) {
  :root {
    --line-hour: color-mix(in srgb, var(--ink) 34%, var(--surface-raised));
    --line-half: color-mix(in srgb, var(--ink) 18%, var(--surface-raised));
    --line-quarter: color-mix(in srgb, var(--ink) 10%, var(--surface-raised));
    --line-column: color-mix(in srgb, var(--ink) 28%, var(--surface-raised));
    --border: color-mix(in srgb, var(--ink) 42%, var(--surface-raised));
  }

  .booking-chip { border-width: 1px; }
  :focus-visible { outline-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .app-nav, .page-bar, .filter-bar, .mobile-action-bar, .toast-region, .calendar-date-nav { display: none; }
  .app-shell, .app-body, .page-main, .journal-shell, .journal-rail, .journal-workspace, .journal-reading, .journal-context, .journal-composer, .journal-compose-overlay, .journal-panels { display: none !important; }
  .journal-print {
    display: block;
    padding: 0;
    color: #111;
  }
  .journal-print h1 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
  }
  .journal-print .meta {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
  }
  .journal-print-entry {
    break-inside: avoid;
    margin: 0 0 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ccc;
  }
  .journal-print-revision .body {
    white-space: pre-wrap;
    margin: 0 0 0.75rem;
  }
}

/* --- platform customer console (M46 Slice A) --------------------------- */

.platform-app .customer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.platform-app .customer-header h2 {
  margin: 0;
}

.platform-app .customer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.platform-app .tab-btn {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  min-height: var(--control-h);
}

.platform-app .tab-btn[aria-pressed="true"] {
  background: var(--primary-tint);
  border-color: var(--primary);
}

.platform-app .status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 0.15rem 0.55rem;
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  background: var(--sunken);
}

.platform-app .status-badge.status-active,
.platform-app .status-badge.status-ready {
  color: var(--status-completed, #0f7b3a);
}

.platform-app .status-badge.status-suspended,
.platform-app .status-badge.status-trial,
.platform-app .status-badge.status-past_due,
.platform-app .status-badge.status-grace_period {
  color: var(--status-held, #9a6700);
}

.platform-app .status-badge.status-disabled,
.platform-app .status-badge.status-cancelled,
.platform-app .status-badge.status-expired,
.platform-app .status-badge.status-payment_at_risk,
.platform-app .status-badge.status-access_restricted {
  color: var(--danger);
}

.platform-app .status-badge.status-scheduled_cancellation,
.platform-app .status-badge.status-onboarding_incomplete {
  color: var(--status-held, #9a6700);
}

.platform-app .mrr-cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

.platform-app .mrr-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--sunken);
}

.platform-app .mrr-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}

.platform-app .mrr-value {
  margin: 0;
  font-size: var(--font-title);
  font-weight: var(--weight-semibold);
}

.platform-app .badge-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.platform-app .table-wrap {
  overflow-x: auto;
}

@media (min-width: 40rem) {
  .platform-app .mrr-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .platform-app .mrr-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-app .link-btn {
  border: 0;
  background: transparent;
  color: var(--primary);
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.platform-app .danger-box {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.platform-app .clinic-tree h4 {
  margin: 0 0 var(--space-2);
}

.platform-app .location-list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
}

.platform-app .plan-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.platform-app .plan-editor-head h2 {
  margin: 0;
}

.platform-app .plan-toggle-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.platform-app .plan-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--sunken);
}

.platform-app .dash-cards {
  margin-bottom: var(--space-4);
}

.platform-app .mix-bar {
  display: block;
  height: 0.5rem;
  min-width: 0.5rem;
  background: var(--primary);
  border-radius: 999px;
}

.platform-app input.limit-extra {
  width: 6rem;
}

.platform-app #user-access-layers h3 {
  margin: var(--space-3) 0 0;
}

.platform-app .plan-toggle small {
  grid-column: 2;
  font-size: var(--font-caption);
}

.platform-app .access-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.platform-app .access-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  line-height: var(--line-tight);
}

.platform-app .access-chip-included {
  background: color-mix(in srgb, var(--status-completed) 16%, var(--surface-raised));
  color: var(--status-completed);
}

.platform-app .access-chip-restricted {
  background: var(--danger-tint);
  color: var(--danger);
}

.platform-app .access-chip-locked {
  background: var(--sunken);
  color: var(--muted);
}

.platform-app .plan-toggle-restricted {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.platform-app .plan-toggle-locked {
  opacity: 0.88;
}

.platform-app .plan-summary .plan-editor {
  border: 0;
  padding: 0;
  box-shadow: none;
}

.platform-app input:not([type="checkbox"]):not([type="radio"]),
.platform-app select,
.platform-app textarea {
  min-height: var(--control-h);
  width: 100%;
}

.platform-app .data-table {
  min-width: 36rem;
}

@media (min-width: 40rem) {
  .platform-app .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-app .kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .platform-app .customer-filters .form-grid-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-app .plan-limits,
.platform-app .plan-features {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.platform-app .plan-limits legend,
.platform-app .plan-features legend {
  padding: 0 var(--space-2);
  font-weight: var(--weight-medium);
}

.platform-app .kv {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.platform-app .kv div {
  display: grid;
  gap: 0.15rem;
}

.platform-app .kv dt {
  color: var(--muted);
  font-size: var(--font-caption);
}

.platform-app .kv dd {
  margin: 0;
}

.platform-app .field-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.platform-app .note-item {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.sms-admin {
  max-width: 42rem;
  display: grid;
  gap: var(--space-5);
}

.sms-page-head h2,
.sms-admin h3 { margin: 0; }

.sms-page-head p,
.sms-count,
.sms-placeholders p { margin: 0; color: var(--muted); }

.sms-page-head p { font-size: var(--font-label); }

.sms-placeholders ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.sms-placeholders code {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--sunken);
  color: var(--ink);
  font-size: var(--font-caption);
}

.sms-template-list,
.sms-admin > section { display: grid; gap: var(--space-3); }

.sms-template h3 { font-size: var(--font-title); }

.sms-template .section-hint,
.sms-count,
.sms-preview-label { margin: 0; font-size: var(--font-caption); }

.sms-preview-label { color: var(--muted); }

.sms-preview {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--sunken);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sms-clinic { display: grid; gap: var(--space-3); }

.sms-clinic-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.sms-clinic-head h3 { font-size: var(--font-title); }
.sms-clinic-head p { margin: 0; }

.sms-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  margin: 0;
}

.sms-switch-control {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.4rem;
}

.sms-switch input {
  appearance: none;
  width: 2.5rem;
  height: 1.4rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--sunken);
}

.sms-switch-control::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--border);
  pointer-events: none;
}

.sms-switch input:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.sms-switch-control:has(input:checked)::after { left: 1.28rem; }

.sms-switch input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sms-clinic-options { display: grid; gap: var(--space-2); }

.sms-clinic-options.is-disabled { opacity: 0.45; }

.sms-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.sms-lead input { width: 4.5rem; }

.sms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 48rem) {
  .platform-app .kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}