/* =====================================================================
   Heart Lifter's Dental Clinic — design system
   Layer order is declared once so cascade behaviour stays predictable.
   ===================================================================== */
@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------------
   Tokens
   Tier 1 = literal, Tier 2 = semantic, Tier 3 = UI surfaces.
   --------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Tier 1 — literal palette */
    --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;

    /* Tier 2 — semantic colour */
    --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));

    /* Tier 3 — surfaces & chrome */
    --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 */
    --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);

    /* Typography */
    --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 & shape */
    --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);

    /* Motion */
    --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: inherit;
  }

  @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);
    }
  }
}

/* ---------------------------------------------------------------------
   Layout: app shell
   --------------------------------------------------------------------- */
@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--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)); }
}

/* ---------------------------------------------------------------------
   Components
   --------------------------------------------------------------------- */
@layer components {

  /* ---- Cards ---- */
  .card {
    background: var(--surface-card);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .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 tiles ---- */
  .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); }

  /* ---- Buttons ---- */
  .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;
  }

  .btn--lg {
    padding-inline: var(--space-5);
    min-block-size: 3rem;
    font-size: var(--text-md);
  }

  /* ---- Forms ---- */
  .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__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; }

  .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; }

  /* ---- Status flow ---- */
  .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-text-inverse);
  }

  /* ---- Badges ---- */
  .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; }

  /* ---- Tables ---- */
  .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; }

  @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 ---- */
  .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;
  }

  .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;
  }

  /* ---- Avatar ---- */
  .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;
  }

  .avatar--photo { object-fit: cover; background: var(--surface-subtle); }
  .avatar--lg { inline-size: 88px; block-size: 88px; font-size: var(--text-lg); }

  /* ---- CMS rows ---- */
  .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); }
  }

  /* ---- Flash / alerts ---- */
  .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 ---- */
  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 ---- */
  .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;
    min-block-size: 44px;
    padding: 0;
    background: var(--surface-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: inherit;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--speed-fast) var(--ease-out),
                border-color var(--speed-fast) var(--ease-out),
                scale var(--speed-fast) var(--ease-out);
  }

  .calendar__day:hover:not([disabled]) { 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[data-state="blocked"] { background: var(--status-danger-bg); color: var(--status-danger-fg); }
  .calendar__day[aria-pressed="true"]  { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); }
  .calendar__day[aria-pressed="true"] .calendar__count { color: #ffffff; }
  .calendar__day[disabled] { opacity: 0.4; cursor: not-allowed; }

  .calendar__dot {
    inline-size: 5px;
    block-size: 5px;
    border-radius: var(--radius-pill);
    background: currentColor;
  }

  .calendar__count {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent-strong);
    line-height: 1;
    margin-block-start: 1px;
  }

  .calendar__badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent-strong);
    line-height: 1;
  }

  .calendar__badge--blocked {
    color: var(--status-danger-fg);
    font-size: var(--text-xs);
  }

  /* ---- Slot picker ---- */
  .slot-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
  }

  .slot {
    min-block-size: 52px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    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 > span:first-child {
    display: block;
    color: var(--color-text);
    font-weight: 650;
  }

  .slot > span:last-child {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-block-start: 2px;
  }

  .slot:hover:not([disabled]) { border-color: var(--color-accent); }
  .slot:active { scale: 0.97; }

    .slot[aria-pressed="true"] {
    background: #24726c;             
    border-color: #24726c;
  }

  .slot[aria-pressed="true"] > span:first-child {
    color: #ffffff;
  }

  .slot[aria-pressed="true"] > span:last-child {
    color: #d3ece9;                  
  }

  .slot[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* ---- Bar chart (statistics) ---- */
  .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 ---- */
  .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 state ---- */
  .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);
  }

  /* ---- Public hero ---- */
  .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 {
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--radius-lg);
    transition: translate var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
  }

  @media (hover: hover) {
    .service:hover { translate: 0 -3px; box-shadow: var(--shadow); }
  }

  .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 (patient, phones only) ---- */
  .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 ---- */
  .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; }
  }

  /* ---- Landing page sections ---- */
  .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);
  }

  .about-split {
    display: grid;
    gap: var(--space-5);
    align-items: start;
  }

  @media (min-width: 900px) {
    .about-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  }

  .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;
  }

  /* ---- Date picker ---- */
  .datepicker {
    position: relative;
  }

  .datepicker__trigger {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    text-align: start;
    cursor: pointer;
  }

  .datepicker__trigger svg {
    flex: none;
    color: var(--color-text-muted);
  }

  .datepicker__panel {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 0;
    inline-size: min(340px, 90vw);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }

  .datepicker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }

  .datepicker__selects {
    display: flex;
    gap: var(--space-2);
    flex: 1;
    justify-content: center;
  }

  .datepicker__select {
    min-block-size: 32px;
    padding: 2px var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    inline-size: auto;
    min-inline-size: 100px;
  }

  .calendar--picker {
    gap: 2px;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* MUST BE 7 */
  }

  .calendar--picker .calendar__day {
    min-block-size: 34px;
    font-size: var(--text-sm);
  }

  .calendar--picker .calendar__dow {
    padding-block: var(--space-1);
    font-size: 10px;
  }

  .datepicker__foot {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--ui-border-soft);
  }

  /* ---- Auth modal ---- */
  .modal--auth {
    inline-size: min(100% - 2rem, 460px);
    max-block-size: min(92dvh, 720px);
    padding: 0;
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
    overflow: visible;
    position: relative;
  }

  .auth-modal__close {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--speed-fast) var(--ease-out), color var(--speed-fast) var(--ease-out);
  }

  .auth-modal__close:hover {
    background: var(--surface-hover);
    color: var(--color-text);
  }

  .auth-modal__body {
    padding: var(--space-6) var(--space-5) var(--space-5);
    overflow-y: auto;
    max-block-size: inherit;
  }

  .auth-modal__head {
    margin-block-end: var(--space-5);
  }

  .auth-modal__title {
    font-size: var(--text-lg);
    font-weight: 660;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .auth-modal__sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
  }

  .auth-modal__form .field:last-of-type {
    margin-block-end: var(--space-5);
  }

  .auth-modal__links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    font-size: var(--text-sm);
    flex-wrap: wrap;
  }

  .auth-modal__links--center {
    justify-content: center;
  }

  /* ---- Activity log ---- */
  .activity-list {
    display: grid;
    gap: var(--space-2);
  }

  .activity-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--ui-border-soft);
    background: var(--surface-subtle);
  }

  .activity-item__time {
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .activity-item__body {
    display: grid;
    gap: 2px;
  }

  .activity-item__who,
  .activity-item__what {
    margin: 0;
    font-size: var(--text-sm);
  }

  /* ---- Day-count colours on the activity calendar ---- */
  .calendar__day[data-state="high"] {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    font-weight: 640;
  }

  .calendar__day[data-state="medium"] {
    background: var(--status-warn-bg);
    color: var(--status-warn-fg);
    font-weight: 640;
  }

  .calendar__day[data-state="low"] {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-weight: 640;
  }
}

/* --------------------------------------------------------------------- */
@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-4    { margin-block-start: var(--space-4); }
  .mb-4    { margin-block-end: var(--space-4); }

  [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));
  }

  .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;
  }
}