/* =====================================================================
   Heart Lifter's Dental Clinic — design system
   ===================================================================== */
@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;
    --teal-50:  #eef8f7; --teal-100: #d3ece9; --teal-200: #a7d9d4; --teal-400: #4aa89f; --teal-500: #2f8d85; --teal-600: #24726c; --teal-700: #1b5854;
    --slate-0: #ffffff; --slate-25: #fafbfc; --slate-50: #f4f6f8; --slate-100: #e8ecf0; --slate-200: #d6dde4; --slate-400: #94a2b0; --slate-500: #6b7986; --slate-600: #4d5a66; --slate-800: #222b33; --slate-900: #161d23; --slate-950: #0e1317;
    --amber-400: #e0a133; --amber-100: #fbf0d9; --rose-500: #c94f4f; --rose-100: #fbe4e4; --green-500: #3f9a63; --green-100: #e0f2e7; --blue-500: #4472b8; --blue-100: #e2ebf7;

    --color-accent: light-dark(var(--teal-500), var(--teal-400)); --color-accent-strong: light-dark(var(--teal-600), var(--teal-200)); --color-accent-soft: light-dark(var(--teal-50), color-mix(in oklab, var(--teal-700) 30%, transparent));
    --color-text: light-dark(var(--slate-800), var(--slate-50)); --color-text-muted: light-dark(var(--slate-500), var(--slate-400)); --color-text-inverse: light-dark(var(--slate-0), var(--slate-950));

    --surface-page: light-dark(var(--slate-50), var(--slate-950)); --surface-card: light-dark(var(--slate-0), var(--slate-900)); --surface-subtle: light-dark(var(--slate-25), var(--slate-800)); --surface-hover: light-dark(var(--slate-50), color-mix(in oklab, var(--slate-800) 70%, var(--slate-900)));
    --ui-border: light-dark(var(--slate-200), color-mix(in oklab, var(--slate-600) 55%, transparent)); --ui-border-soft: light-dark(var(--slate-100), color-mix(in oklab, var(--slate-600) 30%, transparent)); --ui-ring: color-mix(in oklab, var(--color-accent) 45%, transparent);

    --status-ok-bg: light-dark(var(--green-100), color-mix(in oklab, var(--green-500) 24%, transparent)); --status-ok-fg: light-dark(#2c6e47, #9fdcb7); --status-warn-bg: light-dark(var(--amber-100), color-mix(in oklab, var(--amber-400) 24%, transparent)); --status-warn-fg: light-dark(#8a6216, #f0cd8c);
    --status-danger-bg: light-dark(var(--rose-100), color-mix(in oklab, var(--rose-500) 24%, transparent)); --status-danger-fg: light-dark(#93383a, #f0b0b0); --status-info-bg: light-dark(var(--blue-100), color-mix(in oklab, var(--blue-500) 24%, transparent)); --status-info-fg: light-dark(#2f5691, #b6ccec);

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans);
    --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --text-xl: clamp(1.375rem, 1.1rem + 1.4vw, 2rem); --text-2xl: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);

    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
    --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;

    --shadow-sm: 0 1px 2px color-mix(in oklab, var(--slate-900) 8%, transparent); --shadow: 0 1px 2px color-mix(in oklab, var(--slate-900) 6%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--slate-900) 12%, transparent); --shadow-lg: 0 2px 4px color-mix(in oklab, var(--slate-900) 6%, transparent), 0 18px 40px -12px color-mix(in oklab, var(--slate-900) 22%, transparent);

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); --speed-fast: 120ms; --speed: 200ms; --speed-slow: 320ms;
    --shell-sidebar: 264px; --shell-topbar: 60px;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
  @media (forced-colors: active) { :root { --ui-border: CanvasText; --color-accent: LinkText; --color-text: CanvasText; --color-text-muted: GrayText; } }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; padding: 0; }
  :where(ul[role="list"], ol[role="list"]) { list-style: none; }
  :where(img, svg, video, canvas) { display: block; max-inline-size: 100%; height: auto; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(a) { color: var(--color-accent-strong); }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-block-size: 100dvh; margin: 0; background: var(--surface-page); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-wrap: break-word; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 620; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
  h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); }
  p { text-wrap: pretty; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
  ::selection { background: #b3d4fc; color: #000; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: var(--motion-reduced-duration, 0.001ms); animation-iteration-count: 1; transition-duration: var(--motion-reduced-duration, 0.001ms); } }
}

@layer layout {
  .shell { display: grid; grid-template-columns: 1fr; min-block-size: 100dvh; }
  .shell__main { display: flex; flex-direction: column; min-inline-size: 0; }
  .shell__body { flex: 1; padding: var(--space-4) var(--space-4) calc(var(--space-7) + env(safe-area-inset-bottom)); container-type: inline-size; }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
  .page-head__sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: 2px; }

  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(84vw, var(--shell-sidebar)); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--surface-card); border-inline-end: 1px solid var(--ui-border-soft); translate: -102% 0; transition: translate var(--speed) var(--ease-out); overflow-y: auto; overscroll-behavior: contain; will-change: translate; }
  .sidebar[data-open="true"] { translate: 0 0; }
  .sidebar__scrim { position: fixed; inset: 0; z-index: 50; background: color-mix(in oklab, var(--slate-950) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--speed) var(--ease-out); }
  .sidebar__scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

  .topbar { position: sticky; inset-block-start: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--shell-topbar); padding-inline: var(--space-4); padding-block-start: env(safe-area-inset-top); background: color-mix(in oklab, var(--surface-card) 88%, transparent); backdrop-filter: blur(12px) saturate(140%); border-block-end: 1px solid var(--ui-border-soft); }
  .topbar__me { display: flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
  .topbar__who { display: none; }
  @media (min-width: 40rem) { .topbar__who { display: grid; gap: 1px; text-align: end; line-height: 1.2; } }
  .topbar__name { font-size: var(--text-sm); font-weight: 620; }
  .topbar__role { font-size: var(--text-xs); color: var(--color-text-muted); }
  .topbar--public { display: block; padding-inline: 0; }
  .topbar--public > .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--shell-topbar); }
  @media (min-width: 1024px) { .shell { grid-template-columns: var(--shell-sidebar) 1fr; } .sidebar { position: sticky; block-size: 100dvh; inline-size: auto; translate: none; transition: none; } .sidebar__scrim, .topbar__menu { display: none; } .shell__body { padding: var(--space-5) var(--space-6) var(--space-7); } }
  .container { inline-size: min(100% - 2 * var(--space-4), 1120px); margin-inline: auto; }
  .section { padding-block: clamp(var(--space-6), 6vw, var(--space-7)); }
}

@layer components {
  .card { background: var(--surface-card); border: 1px solid var(--ui-border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); height: auto; overflow: visible; }
  .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
  .card__title { font-size: var(--text-md); font-weight: 600; }
  .card__body { padding: var(--space-4); }
  .card__foot { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--ui-border-soft); }
  .stat-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
  .stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--ui-border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--speed) var(--ease-out), translate var(--speed) var(--ease-out); }
  @media (hover: hover) { .stat:hover { box-shadow: var(--shadow); translate: 0 -2px; } }
  .stat__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
  .stat__value { font-size: var(--text-xl); font-weight: 660; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .stat__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

  .btn { --btn-bg: var(--surface-card); --btn-fg: var(--color-text); --btn-border: var(--ui-border); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 42px; padding-inline: var(--space-4); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); border-radius: var(--radius); font-size: var(--text-base); font-weight: 560; text-decoration: none; cursor: pointer; transition: background-color var(--speed-fast) var(--ease-out), border-color var(--speed-fast) var(--ease-out), scale var(--speed-fast) var(--ease-out), box-shadow var(--speed-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
  @media (pointer: coarse) { .btn { min-block-size: 48px; } }
  .btn:active { scale: 0.975; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
  .btn--primary { --btn-bg: var(--color-accent); --btn-fg: var(--color-text-inverse); --btn-border: transparent; box-shadow: var(--shadow-sm); } .btn--primary:hover { --btn-bg: var(--color-accent-strong); }
  .btn--ghost { --btn-bg: transparent; --btn-border: transparent; } .btn--ghost:hover { --btn-bg: var(--surface-hover); }
  .btn--danger { --btn-fg: var(--status-danger-fg); --btn-border: color-mix(in oklab, var(--rose-500) 40%, transparent); }
  .btn--sm { min-block-size: 34px; padding-inline: var(--space-3); font-size: var(--text-sm); } .btn--block { inline-size: 100%; } .btn--icon { min-inline-size: 42px; padding-inline: 0; }

  .field { display: grid; gap: var(--space-2); margin-block-end: var(--space-4); } .field__label { font-size: var(--text-sm); font-weight: 600; } .field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
  .field:has(:is(input:not([type="hidden"]), select, textarea)[required]) > .field__label::after, .field__label--required::after { content: " *"; color: var(--status-danger-fg); font-weight: 700; }
  .field--action .field__label::after { content: none; }
  .form-note { display: flex; gap: var(--space-2); align-items: baseline; margin-block-end: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); } .form-note__star { color: var(--status-danger-fg); font-weight: 700; } .field__error { font-size: var(--text-xs); color: var(--status-danger-fg); }
  .input, .select, .textarea { inline-size: 100%; min-block-size: 44px; padding: var(--space-2) var(--space-3); background: var(--surface-card); color: inherit; border: 1px solid var(--ui-border); border-radius: var(--radius); font-size: max(var(--text-base), 16px); transition: border-color var(--speed-fast) var(--ease-out), box-shadow var(--speed-fast) var(--ease-out); }
  .textarea { min-block-size: 96px; resize: vertical; padding-block: var(--space-3); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
  @media (forced-colors: active) { .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid Highlight; } }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: color-mix(in oklab, var(--rose-500) 60%, var(--ui-border)); } .input:user-invalid { border-color: color-mix(in oklab, var(--rose-500) 60%, var(--ui-border)); }
  .field-row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .field-row > .field { align-content: start; } .field--action .field__label { visibility: hidden; } .field--action .btn { min-block-size: 44px; justify-self: start; }
  .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-inline-end: 46px; }
  .input-group__btn { position: absolute; inset-inline-end: 4px; display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; } .input-group__btn svg { inline-size: 20px; block-size: 20px; } .input-group__btn:hover { color: var(--color-text); } .input-group__btn[aria-pressed="true"] { color: var(--color-accent); }
  .checkline { display: flex; align-items: center; gap: var(--space-2); min-block-size: 44px; } .checkline input { accent-color: var(--color-accent); inline-size: 18px; block-size: 18px; }

  .flow { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .flow__step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
  .flow__step + .flow__step::before { content: ""; inline-size: 20px; block-size: 2px; border-radius: 2px; background: var(--ui-border); margin-inline-end: var(--space-2); }
  .flow__dot { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1px solid var(--ui-border); font-size: var(--text-xs); font-weight: 650; }
  .flow__step--done { color: var(--color-text); } .flow__step--done .flow__dot { background: color-mix(in oklab, var(--color-accent) 18%, transparent); border-color: transparent; color: var(--color-accent); }
  .flow__step--now { color: var(--color-text); font-weight: 620; } .flow__step--now .flow__dot { background: var(--color-accent); border-color: transparent; color: var(--color-accent-contrast, #fff); }

  .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 620; letter-spacing: 0.02em; text-transform: capitalize; white-space: nowrap; }
  .badge--ok     { background: var(--status-ok-bg);     color: var(--status-ok-fg); }
  .badge--warn   { background: var(--status-warn-bg);   color: var(--status-warn-fg); }
  .badge--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
  .badge--info   { background: var(--status-info-bg);   color: var(--status-info-fg); }
  .badge--accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
  .badge--muted  { background: var(--surface-subtle);   color: var(--color-text-muted); }
  .badge--plain { text-transform: none; }

  .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--ui-border-soft); background: var(--surface-card); -webkit-overflow-scrolling: touch; }
  .table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .table th { position: sticky; inset-block-start: 0; z-index: 1; padding: var(--space-3); background: var(--surface-subtle); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 660; letter-spacing: 0.04em; text-transform: uppercase; text-align: start; white-space: nowrap; }
  .table td { padding: var(--space-3); border-block-start: 1px solid var(--ui-border-soft); vertical-align: middle; }
  .table tbody tr { content-visibility: auto; contain-intrinsic-block-size: auto 3.25rem; transition: background-color var(--speed-fast) var(--ease-out); }
  @media (hover: hover) { .table tbody tr:hover { background: var(--surface-hover); } }
  .table__num { font-variant-numeric: tabular-nums; text-align: end; }
  .table th.table__num { text-align: end; }
  .table__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }
  .table th.table__actions-head { text-align: end; }
  @media (max-width: 639px) { .table--stack thead { display: none; } .table--stack tbody tr { display: grid; gap: var(--space-1); padding: var(--space-3); border-block-start: 1px solid var(--ui-border-soft); } .table--stack td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border: 0; } .table--stack td::before { content: attr(data-label); font-size: var(--text-xs); font-weight: 640; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); } }

  .nav { display: flex; flex-direction: column; gap: 2px; } .nav__group { margin-block-start: var(--space-4); padding-inline: var(--space-3); font-size: var(--text-xs); font-weight: 660; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
  .nav__link { display: flex; align-items: center; gap: var(--space-3); min-block-size: 42px; padding-inline: var(--space-3); border-radius: var(--radius); color: inherit; text-decoration: none; font-weight: 520; transition: background-color var(--speed-fast) var(--ease-out), color var(--speed-fast) var(--ease-out); } .nav__link:hover { background: var(--surface-hover); } .nav__link[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 620; } .nav__icon { inline-size: 20px; block-size: 20px; flex: none; }

  .brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-4); font-weight: 680; letter-spacing: -0.02em; text-decoration: none; color: inherit; }
  .brand__role { padding: 2px var(--space-2); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-accent) 16%, transparent); color: var(--color-accent); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0; } .topbar--public .brand { padding: 0; }
  .brand__mark { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 11px; background: var(--color-accent); color: var(--color-text-inverse); flex: none; }

  .cms-row { display: grid; gap: var(--space-2); grid-template-columns: 4.5rem minmax(0, 1fr); margin-block-end: var(--space-2); } .cms-row__icon { text-align: center; font-size: var(--text-md); } @media (min-width: 720px) { .cms-row:has(> :nth-child(3)) { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr); } }
  .avatar--photo { object-fit: cover; background: var(--surface-subtle); } .avatar--lg { inline-size: 88px; block-size: 88px; font-size: var(--text-lg); } .avatar { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: var(--text-sm); font-weight: 680; flex: none; }

  .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); margin-block-end: var(--space-4); } .alert--success { background: var(--status-ok-bg); color: var(--status-ok-fg); } .alert--error { background: var(--status-danger-bg); color: var(--status-danger-fg); } .alert--warning { background: var(--status-warn-bg); color: var(--status-warn-fg); } .alert--info { background: var(--status-info-bg); color: var(--status-info-fg); }

  .toast-stack { position: fixed; inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); inset-inline: var(--space-4); z-index: 90; display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; } .toast { pointer-events: auto; max-inline-size: 420px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-card); border: 1px solid var(--ui-border-soft); box-shadow: var(--shadow-lg); font-size: var(--text-sm); animation: toast-in var(--speed-slow) var(--ease-spring) both; --motion-reduced-duration: 1ms; } @keyframes toast-in { from { opacity: 0; translate: 0 12px; scale: 0.98; } to { opacity: 1; translate: 0 0; scale: 1; } }

  dialog.modal { inline-size: min(100% - 2rem, 560px); max-block-size: min(88dvh, 720px); padding: 0; border: 1px solid var(--ui-border-soft); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--color-text); box-shadow: var(--shadow-lg); overflow: clip; opacity: 0; scale: 0.97; transition: opacity var(--speed) var(--ease-out), scale var(--speed) var(--ease-spring), overlay var(--speed) allow-discrete, display var(--speed) allow-discrete; }
  dialog.modal[open] { opacity: 1; scale: 1; } @starting-style { dialog.modal[open] { opacity: 0; scale: 0.97; } }
  dialog.modal::backdrop { background: color-mix(in oklab, var(--slate-950) 45%, transparent); backdrop-filter: blur(8px) saturate(120%); opacity: 0; transition: opacity var(--speed) var(--ease-out), overlay var(--speed) allow-discrete, display var(--speed) allow-discrete; } dialog.modal[open]::backdrop { opacity: 1; } @starting-style { dialog.modal[open]::backdrop { opacity: 0; } }
  .modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-block-end: 1px solid var(--ui-border-soft); } .modal__body { padding: var(--space-4); overflow-y: auto; max-block-size: 60dvh; overscroll-behavior: contain; } .modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--ui-border-soft); background: var(--surface-subtle); }
  @media (max-width: 639px) { dialog.modal { inline-size: 100%; max-inline-size: 100%; max-block-size: 92dvh; margin-block-end: 0; margin-block-start: auto; border-end-end-radius: 0; border-end-start-radius: 0; } }

  .calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
  .calendar__dow { padding-block: var(--space-2); font-size: var(--text-xs); font-weight: 660; color: var(--color-text-muted); text-align: center; text-transform: uppercase; }
  .calendar__day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; padding: var(--space-1); background: var(--surface-subtle); border: 2px solid transparent; border-radius: var(--radius); color: inherit; font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; transition: background-color var(--speed-fast) var(--ease-out), border-color var(--speed-fast) var(--ease-out); }
  .calendar__day:hover:not([disabled]) { border-color: var(--color-accent); } .calendar__day[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); } .calendar__day:active:not([disabled]) { scale: 0.94; }
  .calendar__day[data-state="open"]   { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 640; } .calendar__day[data-state="full"]   { background: var(--status-warn-bg); color: var(--status-warn-fg); } .calendar__day[data-state="closed"] { background: transparent; color: var(--color-text-muted); } .calendar__day[disabled] { opacity: 0.4; cursor: not-allowed; }
  .calendar__dot { inline-size: 5px; block-size: 5px; border-radius: var(--radius-pill); background: currentColor; }

  .slot-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .slot { min-block-size: 54px; padding: var(--space-2) var(--space-3); border: 1px solid var(--ui-border); border-radius: var(--radius); background: var(--surface-card); font-size: var(--text-sm); font-weight: 560; cursor: pointer; text-align: center; transition: border-color var(--speed-fast) var(--ease-out), background-color var(--speed-fast) var(--ease-out), scale var(--speed-fast) var(--ease-out); }
  .slot:active { scale: 0.97; } .slot[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); } .slot[disabled] { opacity: 0.45; cursor: not-allowed; }

  .meter { display: block; inline-size: min(100%, 160px); block-size: 8px; border-radius: 999px; background: var(--ui-border-soft, var(--ui-border)); overflow: hidden; }
  .meter__fill { --fill: 0%; display: block; inline-size: var(--fill); block-size: 100%; border-radius: inherit; background: linear-gradient(to right, var(--color-accent), color-mix(in oklab, var(--color-accent) 60%, white)); }

  .chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18px, 1fr); align-items: end; gap: var(--space-2); block-size: 220px; padding-block-start: var(--space-4); }
  .chart__bar { --bar: 0%; position: relative; display: block; block-size: var(--bar); min-block-size: 3px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: linear-gradient(to top, var(--color-accent), color-mix(in oklab, var(--color-accent) 65%, white)); animation: bar-rise var(--speed-slow) var(--ease-out) both; --motion-reduced-duration: 1ms; transform-origin: bottom; } @keyframes bar-rise { from { scale: 1 0; opacity: 0.4; } to { scale: 1 1; opacity: 1; } }
  .chart__labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18px, 1fr); gap: var(--space-2); margin-block-start: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

  .tabs { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-subtle); border-radius: var(--radius); overflow-x: auto; scrollbar-width: none; touch-action: pan-x; } .tabs::-webkit-scrollbar { display: none; }
  .tab { min-block-size: 38px; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background-color var(--speed-fast) var(--ease-out), color var(--speed-fast) var(--ease-out); } .tab[aria-selected="true"] { background: var(--surface-card); color: var(--color-text); box-shadow: var(--shadow-sm); }

  .empty { display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); }

  .hero { display: grid; gap: var(--space-5); align-items: center; padding-block: clamp(var(--space-6), 8vw, var(--space-7)); } .hero__title { font-size: var(--text-2xl); letter-spacing: -0.03em; } .hero__lead { font-size: var(--text-md); color: var(--color-text-muted); max-inline-size: 52ch; } @media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

  .service-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .service { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-card); border: 1px solid var(--ui-border-soft); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: translate var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out); } .service__body { padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; flex: 1; }
  .service__media { aspect-ratio: 16 / 10; background: var(--surface-sunken, var(--ui-border-soft)); } .service__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .service__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-2); } .service__more { font-size: var(--text-sm); color: var(--color-accent); font-weight: 600; }
  @media (hover: hover) { .service:hover { translate: 0 -3px; box-shadow: var(--shadow); border-color: var(--color-accent); } .service:hover .service__media img { scale: 1.03; } } .service__media img { transition: scale var(--speed) var(--ease-out); } .service:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .hours { display: grid; gap: var(--space-1); max-inline-size: 36rem; margin-inline: auto; } .hours__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--ui-border-soft); } .hours__row:last-child { border-block-end: 0; } .hours__day { font-weight: 600; } .hours__time { color: var(--color-text-muted); text-align: end; }

  .map-frame { aspect-ratio: 16 / 10; min-block-size: 22rem; block-size: 100%; inline-size: 100%; border: 0; border-radius: var(--radius-lg); }

  .bottom-nav { position: sticky; inset-block-end: 0; z-index: 30; display: grid; grid-auto-flow: column; background: color-mix(in oklab, var(--surface-card) 92%, transparent); backdrop-filter: blur(12px); border-block-start: 1px solid var(--ui-border-soft); padding-block-end: env(safe-area-inset-bottom); } .bottom-nav__link { display: grid; justify-items: center; gap: 2px; padding-block: var(--space-2); min-block-size: 54px; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; text-decoration: none; } .bottom-nav__link[aria-current="page"] { color: var(--color-accent-strong); } @media (min-width: 1024px) { .bottom-nav { display: none; } }

  .skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-subtle) 25%, var(--surface-hover) 37%, var(--surface-subtle) 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; --motion-reduced-duration: 1ms; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

  .eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-strong); margin: 0; }
  .hero-band { background: radial-gradient(60rem 30rem at 15% -10%, var(--color-accent-soft), transparent 70%), var(--surface-page); border-block-end: 1px solid var(--ui-border-soft); } .hero-shot { margin: 0; border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-lg); background: var(--surface-subtle); }
  .brand__mark--logo { padding: 0; background: none; border-radius: 0; color: inherit; } .brand__mark--logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }

  .about-split { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 900px) { .about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .about-split > .stack { justify-self: end; max-inline-size: 600px; } }
  
  .about-shot { margin: 0; border-radius: var(--radius-lg); overflow: clip; border: 1px solid var(--ui-border-soft); background: var(--surface-subtle); } .about-shot img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .photo-placeholder { display: block; inline-size: 100%; block-size: 100%; color: var(--color-accent); background: var(--color-accent-soft); } .photo-placeholder svg { display: block; inline-size: 100%; block-size: 100%; } .hero-shot .photo-placeholder svg { aspect-ratio: 4 / 3; } .about-shot .photo-placeholder svg { aspect-ratio: 4 / 5; } .hero-shot img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

  .band { background: var(--surface-subtle); border-block: 1px solid var(--ui-border-soft); } .section-head { display: grid; gap: var(--space-2); justify-items: center; text-align: center; max-inline-size: 60ch; margin-inline: auto; margin-block-end: var(--space-5); } .section-head__lead { color: var(--color-text-muted); font-size: var(--text-md); margin: 0; }
  .prose p { margin-block: 0 var(--space-3); } .pull-quote { margin: 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--color-accent); font-size: var(--text-md); font-weight: 600; color: var(--color-accent-strong); }

  .feature-grid, .steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .feature, .step { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--ui-border-soft); border-radius: var(--radius-lg); } .feature h3, .step h3 { font-size: var(--text-md); margin: 0; } .feature p, .step p { margin: 0; }
  .feature__mark, .step__num { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 700; font-size: var(--text-md); line-height: 1; } .feature__mark--glyph { font-size: 1.35rem; background: var(--color-accent-soft); } .feature__mark img { inline-size: 1.5rem; block-size: 1.5rem; object-fit: contain; } .steps { counter-reset: step; } .steps > li { list-style: none; }

  .gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .gallery__item { margin: 0; border-radius: var(--radius-lg); overflow: clip; background: var(--surface-card); border: 1px solid var(--ui-border-soft); } .gallery__item img { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .gallery__item figcaption { padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

  .contact-split { display: grid; gap: var(--space-4); align-items: stretch; } @media (min-width: 900px) { .contact-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
  .contact-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .contact-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; } .contact-item__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-accent-strong); } .contact-item__label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .contact-item__value { margin: var(--space-1) 0 0; font-size: var(--text-base); overflow-wrap: anywhere; }

  .cta-band { justify-items: center; text-align: center; padding: clamp(var(--space-6), 6vw, var(--space-7)) var(--space-5); border-radius: var(--radius-lg); background: radial-gradient(40rem 20rem at 50% 0%, var(--color-accent-soft), transparent 70%), var(--surface-card); border: 1px solid var(--ui-border-soft); } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); } .trust-row li::before { content: "✓"; margin-inline-end: var(--space-1); color: var(--color-accent); font-weight: 700; } .btn--lg { padding-inline: var(--space-5); min-block-size: 3rem; font-size: var(--text-md); }
}

@layer utilities {
  .stack { display: grid; gap: var(--space-4); } .stack-2 { display: grid; gap: var(--space-2); } .row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .grow { flex: 1; min-inline-size: 0; }
  .muted { color: var(--color-text-muted); } .small { font-size: var(--text-sm); } .tiny { font-size: var(--text-xs); } .strong { font-weight: 640; } .nowrap { white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } .center { text-align: center; } .end { text-align: end; } .mt-2 { margin-block-start: var(--space-2); } .mt-4 { margin-block-start: var(--space-4); } .mb-4 { margin-block-end: var(--space-4); } .rounded { border-radius: var(--radius-lg); } [hidden] { display: none !important; }

  @media (max-width: 639px) { .hide-sm { display: none; } } @media (min-width: 640px) { .only-sm { display: none; } }

  .grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

  /* Fixes the page jump without adding scrollbars */
  .dentist-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    min-block-size: 900px; 
    align-items: start;
  }

  .dentist-dashboard-grid > .stack {
    block-size: auto;
    align-self: start;
  }

  @media (max-width: 1023px) {
    .dentist-dashboard-grid { 
      grid-template-columns: 1fr; 
      min-block-size: auto;
    }
  }

  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .scroll-x { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
}